refactor(frontend): restructure project layout and update API schema

Relocate frontend source code from `next-app/` to `frontend/` to align with the new project structure. This includes removing the old Next.js boilerplate files and establishing a cleaner workspace. Additionally, updates the OpenAPI specification to include support for the `immich` widget type and its corresponding configuration schema. - Move frontend files to `frontend/` - Delete obsolete `next-app/` directory and its configuration - Add `immich` widget type to `openapi.yaml` - Update `FrontendPlan.md` with dashboard refactor and UX direction
2026-06-03 23:12:56 +00:00 · 2026-05-04 12:31:34 +02:00
parent b17a06fbba
commit 17a579880f
85 changed files with 9441 additions and 947 deletions
@@ -0,0 +1,68 @@
+"use client";
+
+import { ThemeToggle } from "./theme-toggle";
+import { Button } from "@/components/ui/button";
+import { Plus, LayoutGrid, AppWindow, Puzzle } from "lucide-react";
+import { useState, useEffect } from "react";
+
+export function Header({
+  onAddService,
+  onAddWidget,
+  onAddGroup,
+}: {
+  onAddService: () => void;
+  onAddWidget: () => void;
+  onAddGroup: () => void;
+}) {
+  const [now, setNow] = useState(new Date());
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  const timeStr = now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  const dateStr = now.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
+
+  return (
+    <header className="sticky top-0 z-40 w-full border-b border-border bg-background">
+      <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-secondary">
+              <LayoutGrid className="h-4 w-4 text-primary" />
+            </div>
+            <span className="text-sm font-semibold tracking-tight text-foreground">
+              Dash
+            </span>
+          </div>
+          <div className="hidden h-4 w-px bg-border sm:block" />
+          <div className="hidden items-center gap-2 sm:flex">
+            <span className="text-xs text-muted-foreground">
+              {dateStr}
+            </span>
+            <span className="font-mono text-xs tabular-nums text-muted-foreground">
+              {timeStr}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="sm" onClick={onAddWidget} className="gap-1.5 text-xs text-muted-foreground hover:text-foreground">
+            <Puzzle className="h-3.5 w-3.5" />
+            <span className="hidden sm:inline">Widget</span>
+          </Button>
+          <Button variant="ghost" size="sm" onClick={onAddGroup} className="gap-1.5 text-xs text-muted-foreground hover:text-foreground">
+            <AppWindow className="h-3.5 w-3.5" />
+            <span className="hidden sm:inline">Group</span>
+          </Button>
+          <Button variant="default" size="sm" onClick={onAddService} className="gap-1.5 text-xs">
+            <Plus className="h-3.5 w-3.5" />
+            <span className="hidden sm:inline">App</span>
+          </Button>
+          <div className="ml-1 h-4 w-px bg-border" />
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,48 @@
+"use client";
+
+import { useTheme } from "@/components/providers";
+import { themeLabels, type Theme } from "@/lib/theme/themes";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Sun, Moon, Sparkles, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const themeIcons: Record<Theme, React.ReactNode> = {
+  light: <Sun className="h-4 w-4" />,
+  dark: <Moon className="h-4 w-4" />,
+  casaos: <Sparkles className="h-4 w-4" />,
+};
+
+const themeDot: Record<Theme, string> = {
+  light: "bg-amber-400",
+  dark: "bg-indigo-400",
+  casaos: "bg-pink-400",
+};
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="rounded-lg hover:bg-accent relative" aria-label="Toggle theme">
+          <div className="relative">
+            {themeIcons[theme]}
+            <span className={cn("absolute -bottom-0.5 -right-0.5 h-1.5 w-1.5 rounded-full border-2 border-background", themeDot[theme])} />
+          </div>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-40 rounded-xl">
+        {(["light", "dark", "casaos"] as Theme[]).map((t) => (
+          <DropdownMenuItem key={t} onClick={() => setTheme(t)} className={cn("gap-2.5 rounded-lg cursor-pointer", theme === t && "bg-accent")}>
+            <span className={cn("flex h-5 w-5 items-center justify-center rounded-md", theme === t ? "text-foreground" : "text-muted-foreground")}>
+              {themeIcons[t]}
+            </span>
+            <span className="text-sm">{themeLabels[t]}</span>
+            {theme === t && <Check className="ml-auto h-3.5 w-3.5 text-foreground" />}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}