v0.1.0-skeleton: Tauri v2 + React + TS scaffold with design system

- Tauri v2 project with greet command (invoke round-trip verified) - React + TypeScript + Vite front-end - Tailwind CSS v4 with dark blue + gold design tokens - Glassmorphism .glass-card component with backdrop-filter - BentoCard component (framer-motion, lucide-react icons) - App shell: left rail nav (56px) + title bar + bento grid dashboard - Cinzel / Inter / JetBrains Mono font stack - Dark-only design: #0a0e1a deep, #d4af37 gold accents - All design tokens as CSS custom properties - Rust backend: greet command, tauri-plugin-log - Builds successfully: cargo check, tsc, vite build, tauri build (macOS .app + .dmg)
2026-06-28 22:30:28 +01:00
commit f30a92ddeb
43 changed files with 8525 additions and 0 deletions
@@ -0,0 +1,79 @@
+import {
+  Map,
+  User,
+  Swords,
+  Dice5,
+  ScrollText,
+  Volume2,
+  Settings,
+  ChevronDown,
+} from "lucide-react";
+import { Dashboard } from "./components/Dashboard";
+
+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" },
+  { icon: Settings, label: "Settings" },
+];
+
+export default function App() {
+  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">
+          ⚔
+        </div>
+
+        {navItems.map((item, i) => (
+          <button
+            key={item.label}
+            className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
+              i === 0
+                ? "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
+          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"
+          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>
+
+        {/* Dashboard */}
+        <main className="flex-1 overflow-auto">
+          <Dashboard />
+        </main>
+      </div>
+    </div>
+  );
+}