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>
+  );
+}
@@ -0,0 +1,37 @@
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+
+interface BentoCardProps {
+  title: string;
+  icon: ReactNode;
+  span?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function BentoCard({
+  title,
+  icon,
+  span = "col-span-1 row-span-1",
+  children,
+  className = "",
+}: BentoCardProps) {
+  return (
+    <motion.div
+      className={`glass-card flex flex-col overflow-hidden p-4 ${span} ${className}`}
+      whileHover={{ scale: 1.005 }}
+      whileTap={{ scale: 0.985 }}
+      transition={{ type: "spring", stiffness: 400, damping: 25 }}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-2 pb-2 mb-3 border-b border-[var(--color-border-glass)]">
+        <span className="text-[var(--color-gold-bright)]">{icon}</span>
+        <h2 className="font-heading text-sm font-semibold tracking-wide text-[var(--color-text-primary)]">
+          {title}
+        </h2>
+      </div>
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto">{children}</div>
+    </motion.div>
+  );
+}
@@ -0,0 +1,123 @@
+import {
+  Map,
+  User,
+  Swords,
+  ScrollText,
+  Dice5,
+  Timer,
+  GitBranch,
+  Volume2,
+  Calendar,
+  Sparkles,
+} from "lucide-react";
+import { BentoCard } from "./BentoCard";
+import { Greet } from "./Greet";
+
+export function Dashboard() {
+  return (
+    <div className="grid grid-cols-4 grid-rows-4 gap-3 p-4 h-full bg-[var(--color-bg-deep)]">
+      {/* World Map — 2×2 */}
+      <BentoCard title="World Map" icon={<Map size={16} />} span="col-span-2 row-span-2">
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          Map canvas placeholder
+        </div>
+      </BentoCard>
+
+      {/* NPC Sheet — 1×1 */}
+      <BentoCard title="NPC Sheet" icon={<User size={16} />} span="col-span-1 row-span-1">
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          NPC generator placeholder
+        </div>
+      </BentoCard>
+
+      {/* Dice Roller — 1×1 */}
+      <BentoCard title="Dice Roller" icon={<Dice5 size={16} />} span="col-span-1 row-span-1">
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          Dice roller placeholder
+        </div>
+      </BentoCard>
+
+      {/* Encounter Builder — 1×1 */}
+      <BentoCard
+        title="Encounter"
+        icon={<Swords size={16} />}
+        span="col-span-1 row-span-1"
+      >
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          Encounter builder placeholder
+        </div>
+      </BentoCard>
+
+      {/* Session Log — 2×1 */}
+      <BentoCard
+        title="Session Log"
+        icon={<ScrollText size={16} />}
+        span="col-span-2 row-span-1"
+      >
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          Session log placeholder
+        </div>
+      </BentoCard>
+
+      {/* Quest Designer — 2×1 */}
+      <BentoCard
+        title="Quest Designer"
+        icon={<GitBranch size={16} />}
+        span="col-span-2 row-span-1"
+      >
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          Quest designer placeholder
+        </div>
+      </BentoCard>
+
+      {/* Initiative Tracker — 1×1 */}
+      <BentoCard title="Initiative" icon={<Timer size={16} />} span="col-span-1 row-span-1">
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          Initiative tracker placeholder
+        </div>
+      </BentoCard>
+
+      {/* Random Tables — 1×1 */}
+      <BentoCard
+        title="Random Tables"
+        icon={<Sparkles size={16} />}
+        span="col-span-1 row-span-1"
+      >
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          Random tables placeholder
+        </div>
+      </BentoCard>
+
+      {/* Greeting / LLM Test — spans bottom area */}
+      <BentoCard
+        title="DM-Pal"
+        icon={<Volume2 size={16} />}
+        span="col-span-2 row-span-1"
+      >
+        <Greet />
+      </BentoCard>
+
+      {/* Calendar — 1×1 */}
+      <BentoCard
+        title="Calendar"
+        icon={<Calendar size={16} />}
+        span="col-span-1 row-span-1"
+      >
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          Calendar placeholder
+        </div>
+      </BentoCard>
+
+      {/* Soundboard — 1×1 */}
+      <BentoCard
+        title="Soundboard"
+        icon={<Volume2 size={16} />}
+        span="col-span-1 row-span-1"
+      >
+        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
+          Soundboard placeholder
+        </div>
+      </BentoCard>
+    </div>
+  );
+}
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+export function Greet() {
+  const [greeting, setGreeting] = useState("");
+  const [name, setName] = useState("");
+
+  async function greet() {
+    // Learn more about Tauri commands at https://v2.tauri.app/develop/calling-rust/
+    setGreeting(await invoke("greet", { name }));
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-3">
+      <form
+        className="flex gap-2 w-full max-w-md"
+        onSubmit={(e) => {
+          e.preventDefault();
+          greet();
+        }}
+      >
+        <input
+          className="flex-1 rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm font-[var(--font-sans)]"
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Enter a name…"
+          value={name}
+        />
+        <button
+          type="submit"
+          className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer"
+        >
+          Greet
+        </button>
+      </form>
+      {greeting && (
+        <p className="text-[var(--color-text-secondary)] text-sm font-[var(--font-mono)]">
+          {greeting}
+        </p>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,181 @@
+@import "tailwindcss";
+
+/* ─── Design Tokens ─────────────────────────────────────────── */
+
+@theme {
+  /* Background layers */
+  --color-bg-deep: #0a0e1a;
+  --color-bg-surface: #111827;
+  --color-bg-card: #1a2236;
+  --color-bg-card-hover: #1f2a42;
+
+  /* Borders */
+  --color-border-glass: rgba(212, 175, 55, 0.12);
+  --color-border-subtle: rgba(255, 255, 255, 0.06);
+
+  /* Gold accents */
+  --color-gold-bright: #d4af37;
+  --color-gold-muted: #a8872a;
+  --color-gold-glow: rgba(212, 175, 55, 0.25);
+
+  /* Text */
+  --color-text-primary: #e8e0d0;
+  --color-text-secondary: #8b9bb4;
+  --color-text-dim: #4a5568;
+
+  /* Semantic */
+  --color-danger: #ef4444;
+  --color-success: #22c55e;
+  --color-info: #3b82f6;
+
+  /* Fonts */
+  --font-heading: "Cinzel", serif;
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+}
+
+/* ─── Self-Hosted Fonts ─────────────────────────────────────── */
+/* TODO: download woff2 files to public/fonts/ for offline-first */
+/* For now, load from Google Fonts during development */
+@font-face {
+  font-family: "Cinzel";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/cinzel/v25/8vIJ7ww63mViL4j6N6R2lQ.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Cinzel";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/cinzel/v25/8vIK7ww63mVnVhR0LQRJNg.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrY.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrY.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrY.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v21/tDbY2o-flEEny0FZhsfKx5Q.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v21/tDbY2o-flEEny0FZhsfKx5Q.woff2") format("woff2");
+}
+
+/* ─── Base Styles ───────────────────────────────────────────── */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-gold-muted) transparent;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: var(--color-bg-deep);
+  color: var(--color-text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ─── Glassmorphism Card ─────────────────────────────────────── */
+
+.glass-card {
+  background: rgba(26, 34, 54, 0.55);
+  backdrop-filter: blur(18px) saturate(1.3);
+  -webkit-backdrop-filter: blur(18px) saturate(1.3);
+  border: 1px solid rgba(212, 175, 55, 0.12);
+  border-radius: 16px;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.03),
+    0 2px 8px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  transition:
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.glass-card:hover {
+  border-color: rgba(212, 175, 55, 0.25);
+  box-shadow:
+    0 0 20px rgba(212, 175, 55, 0.08),
+    0 4px 16px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.glass-card-active {
+  border-color: var(--color-gold-bright) !important;
+  box-shadow:
+    0 0 24px rgba(212, 175, 55, 0.15),
+    0 4px 16px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
+}
+
+/* ─── Utility Classes ────────────────────────────────────────── */
+
+.font-heading {
+  font-family: var(--font-heading);
+}
+
+.font-mono {
+  font-family: var(--font-mono);
+}
+
+.text-gold {
+  color: var(--color-gold-bright);
+}
+
+.border-gold {
+  border-color: var(--color-gold-bright);
+}
+
+.bg-deep {
+  background-color: var(--color-bg-deep);
+}
+
+.bg-surface {
+  background-color: var(--color-bg-surface);
+}
+
+.bg-card {
+  background-color: var(--color-bg-card);
+}
+
+/* Gold glowing focus ring */
+*:focus-visible {
+  outline: 2px solid var(--color-gold-bright);
+  outline-offset: 2px;
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);