Merge pull request #12 from masseater/feat/sdd-webapp-webui-refactor

sdd-webapp: adopt shadcn/ui + tailwind, show archived, fix navigation

Author: masseater

bun.lock

@@ -17,5 +17,10 @@
 		"formatter": {
 			"quoteStyle": "double"
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }

packages/sdd-webapp/biome.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "src/client/tailwind.config.js",
+    "css": "src/client/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

packages/sdd-webapp/components.json

@@ -27,20 +27,32 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.25.1",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "highlight.js": "^11.11.0",
     "hono": "^4.10.2",
+    "lucide-react": "^0.562.0",
     "marked": "^15.0.0",
-    "marked-highlight": "^2.2.0"
+    "marked-highlight": "^2.2.0",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.0.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.18",
     "@types/bun": "^1.3.4",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@typescript/native-preview": "^7.0.0-dev.20251217.1",
     "@vitejs/plugin-react": "^4.4.0",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^6.0.0"
   },

packages/sdd-webapp/package.json

@@ -1,9 +1,11 @@
 import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import type { TaskStatus } from "../types";
 import { Dashboard } from "./components/Dashboard";
 import { ProjectSelector } from "./components/ProjectSelector";
 import { TaskDetailView } from "./components/TaskDetailView";
 import { useProjects } from "./hooks/useProjects";
-import { type TaskStatus, useSpecs } from "./hooks/useSpecs";
+import { useSpecs } from "./hooks/useSpecs";
 
 export function App() {
 	const {
@@ -13,9 +15,17 @@ export function App() {
 		addProject,
 		removeProject,
 		loading: projectsLoading,
+		error: projectsError,
 	} = useProjects();
-	const { fileTree, selectedFile, specContent, status, fetchSpecContent } =
-		useSpecs(selectedProject?.id ?? null);
+	const [includeArchived, setIncludeArchived] = useState(false);
+	const {
+		fileTree,
+		selectedFile,
+		specContent,
+		status,
+		fetchSpecContent,
+		error: specsError,
+	} = useSpecs(selectedProject?.id ?? null, { includeArchived });
 	const [selectedTask, setSelectedTask] = useState<TaskStatus | null>(null);
 
 	const handleTaskClick = (task: TaskStatus) => {
@@ -28,42 +38,63 @@ export function App() {
 
 	if (projectsLoading) {
 		return (
-			<div className="app">
-				<div className="loading">Loading...</div>
+			<div className="min-h-screen bg-muted/30">
+				<div className="mx-auto max-w-5xl p-6 text-muted-foreground">
+					Loading...
+				</div>
 			</div>
 		);
 	}
 
 	return (
-		<div className="app">
-			<header className="app-header">
-				<div className="app-header-left">
-					<h1 className="app-title">SDD Webapp</h1>
-					{selectedTask && (
-						<>
-							<span className="breadcrumb-separator">/</span>
-							<span className="breadcrumb-current">{selectedTask.name}</span>
-						</>
-					)}
+		<div className="min-h-screen bg-muted/30">
+			{(projectsError || specsError) && (
+				<div
+					className="border-b border-destructive/20 bg-destructive/10 px-6 py-3 text-sm text-destructive"
+					role="alert"
+				>
+					{projectsError || specsError}
 				</div>
-				<div className="app-header-right">
-					<ProjectSelector
-						projects={projects}
-						selectedProject={selectedProject}
-						onSelect={(project) => {
-							setSelectedProject(project);
-							setSelectedTask(null);
-						}}
-						onAdd={addProject}
-						onRemove={removeProject}
-					/>
+			)}
+			<header className="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
+				<div className="mx-auto flex h-16 max-w-6xl items-center justify-between gap-4 px-6">
+					<div className="flex items-center gap-3">
+						<h1 className="text-lg font-semibold">SDD Webapp</h1>
+						{selectedTask && (
+							<>
+								<span className="text-muted-foreground">/</span>
+								<Button
+									type="button"
+									variant="link"
+									className="h-auto p-0 text-sm text-muted-foreground"
+									onClick={handleBackToDashboard}
+								>
+									{selectedTask.name}
+								</Button>
+							</>
+						)}
+					</div>
+					<div className="flex items-center gap-3">
+						<ProjectSelector
+							projects={projects}
+							selectedProject={selectedProject}
+							onSelect={(project) => {
+								setSelectedProject(project);
+								setSelectedTask(null);
+							}}
+							onAdd={addProject}
+							onRemove={removeProject}
+						/>
+					</div>
 				</div>
 			</header>
-			<main className="main-content">
+			<main className="mx-auto w-full max-w-6xl flex-1 px-6 py-6">
 				{!selectedProject ? (
-					<div className="empty-state">
-						<h2>No Project Selected</h2>
-						<p>Add a project to get started.</p>
+					<div className="rounded-lg border bg-background p-8 text-center">
+						<h2 className="text-lg font-semibold">No Project Selected</h2>
+						<p className="mt-2 text-sm text-muted-foreground">
+							Add a project to get started.
+						</p>
 					</div>
 				) : selectedTask ? (
 					<TaskDetailView
@@ -78,6 +109,8 @@ export function App() {
 					<Dashboard
 						status={status}
 						projectName={selectedProject.name}
+						includeArchived={includeArchived}
+						onToggleArchived={setIncludeArchived}
 						onTaskClick={handleTaskClick}
 					/>
 				)}