itsamejms
9675e05b07
- 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
101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
import {
|
|
Map,
|
|
User,
|
|
Swords,
|
|
Dice5,
|
|
ScrollText,
|
|
Volume2,
|
|
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" },
|
|
{ icon: User, label: "NPCs" },
|
|
{ icon: Swords, label: "Encounter" },
|
|
{ icon: Dice5, label: "Dice" },
|
|
{ icon: ScrollText, label: "Session" },
|
|
{ icon: Volume2, label: "Sound" },
|
|
];
|
|
|
|
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 */}
|
|
<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"
|
|
>
|
|
⚔
|
|
</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 === 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)]"
|
|
}`}
|
|
title={item.label}
|
|
>
|
|
<item.icon size={18} />
|
|
</button>
|
|
))}
|
|
|
|
{/* Spacer */}
|
|
<div className="flex-1" />
|
|
|
|
{/* Settings at bottom */}
|
|
<button
|
|
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} />
|
|
</button>
|
|
</nav>
|
|
|
|
{/* 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
|
|
>
|
|
<span className="font-heading text-[var(--color-gold-bright)] text-base font-bold tracking-wider">
|
|
DM-Pal
|
|
</span>
|
|
<div className="ml-4 flex items-center gap-1 text-[var(--color-text-secondary)] text-xs cursor-pointer hover:text-[var(--color-text-primary)] transition-colors">
|
|
<ChevronDown size={12} />
|
|
<span>My Campaign</span>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 overflow-auto">
|
|
{view === "dashboard" ? <Dashboard /> : <SettingsPanel />}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |