v0.2.0-llm: LLM integration, core utilities, and persistence

- Rust backend: LLM abstraction with OpenAI-compatible + Ollama API clients
- Tauri commands: generate, generate_stream, get/set LLM config
- LLM config: api_url, api_key, model, temperature, max_tokens, top_p
- Works with Ollama (localhost:11434), LM Studio, any OpenAI-compatible API
- Streaming infrastructure via Tauri Channels (LlmEvent)
- tauri-plugin-store, tauri-plugin-fs added
- Frontend: NPC Generator with race/class/alignment selection + AI generation
- Frontend: Dice Roller with notation parsing (2d6+3), presets, history
- Frontend: Session Logger with note-taking + AI summarization
- Frontend: Settings panel for LLM configuration (URL, key, model, temperature)
- App shell: left rail nav with active states, settings toggle
- All glassmorphism cards with gold glow hover states
- Builds clean: tsc, vite build, cargo check, tauri build

src/App.tsx

@@ -8,7 +8,11 @@ import {
   Settings,
   ChevronDown,
 } from "lucide-react";
+import { useState } from "react";
 import { Dashboard } from "./components/Dashboard";
+import { SettingsPanel } from "./components/SettingsPanel";
+
+type View = "dashboard" | "settings";
 
 const navItems = [
   { icon: Map, label: "World" },
@@ -17,24 +21,34 @@ const navItems = [
   { icon: Dice5, label: "Dice" },
   { icon: ScrollText, label: "Session" },
   { icon: Volume2, label: "Sound" },
-  { icon: Settings, label: "Settings" },
 ];
 
 export default function App() {
+  const [view, setView] = useState<View>("dashboard");
+  const [activeNav, setActiveNav] = useState(0);
+
   return (
     <div className="flex h-screen w-screen overflow-hidden bg-[var(--color-bg-deep)]">
       {/* Left Rail */}
       <nav className="flex flex-col items-center w-14 bg-[var(--color-bg-surface)] border-r border-[var(--color-border-subtle)] py-3 gap-1 shrink-0">
         {/* App Logo */}
-        <div className="w-8 h-8 rounded-lg bg-[var(--color-gold-bright)] flex items-center justify-center mb-4 text-[var(--color-bg-deep)] font-heading font-bold text-lg">
+        <button
+          onClick={() => setView("dashboard")}
+          className="w-8 h-8 rounded-lg bg-[var(--color-gold-bright)] flex items-center justify-center mb-4 text-[var(--color-bg-deep)] font-heading font-bold text-lg cursor-pointer"
+          title="DM-Pal"
+        >
           ⚔
-        </div>
+        </button>
 
         {navItems.map((item, i) => (
           <button
             key={item.label}
+            onClick={() => {
+              setActiveNav(i);
+              setView("dashboard");
+            }}
             className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
-              i === 0
+              i === activeNav && view === "dashboard"
                 ? "bg-[var(--color-bg-card)] text-[var(--color-gold-bright)]"
                 : "text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-card)]"
             }`}
@@ -49,7 +63,12 @@ export default function App() {
 
         {/* Settings at bottom */}
         <button
-          className="w-10 h-10 rounded-lg flex items-center justify-center text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-card)] transition-colors cursor-pointer"
+          onClick={() => setView(view === "settings" ? "dashboard" : "settings")}
+          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
+            view === "settings"
+              ? "bg-[var(--color-bg-card)] text-[var(--color-gold-bright)]"
+              : "text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-card)]"
+          }`}
           title="Settings"
         >
           <Settings size={18} />
@@ -59,7 +78,10 @@ export default function App() {
       {/* Main Content Area */}
       <div className="flex flex-col flex-1 overflow-hidden">
         {/* Title Bar */}
-        <header className="flex items-center h-10 px-4 bg-[var(--color-bg-surface)] border-b border-[var(--color-border-subtle)] shrink-0" data-tauri-drag-region>
+        <header
+          className="flex items-center h-10 px-4 bg-[var(--color-bg-surface)] border-b border-[var(--color-border-subtle)] shrink-0"
+          data-tauri-drag-region
+        >
           <span className="font-heading text-[var(--color-gold-bright)] text-base font-bold tracking-wider">
             DM-Pal
           </span>
@@ -69,9 +91,9 @@ export default function App() {
           </div>
         </header>
 
-        {/* Dashboard */}
+        {/* Main Content */}
         <main className="flex-1 overflow-auto">
-          <Dashboard />
+          {view === "dashboard" ? <Dashboard /> : <SettingsPanel />}
         </main>
       </div>
     </div>