Phase 1: scaffold Next.js 16 web-ui + Coolify staging

- create-next-app with TypeScript, Tailwind v4, App Router - Port design-system.css tokens into Tailwind @theme (navy/gold/parchment, Heebo) - Install TanStack Query, react-hook-form, zod, lucide-react, react-dropzone - layout.tsx: RTL Hebrew + Heebo via next/font/google - AppShell component with navy header + gold rule + nav - next.config.ts: output:standalone + rewrites to proxy /api/* to production FastAPI - Dockerfile: multi-stage Node 20 Alpine build for Next.js standalone (branch-local override of the FastAPI Dockerfile; main is unaffected) - Switch .taskmaster to claude-code provider (no API key required) - Add 7 phase tasks (83-89) tracking the full rewrite plan Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-11 13:47:05 +00:00
parent a8b79822bf
commit 64724656af
24 changed files with 7752 additions and 82 deletions
--- a/web-ui/src/components/app-shell.tsx
+++ b/web-ui/src/components/app-shell.tsx
@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+
+/**
+ * Ezer Mishpati navigation shell.
+ *
+ * Editorial/judicial aesthetic:
+ * - Navy header with a gold hairline rule (border-b-3)
+ * - Parchment/cream body background (set on <body> via globals.css)
+ * - Hebrew RTL throughout (set on <html> in layout.tsx)
+ *
+ * Structure mirrors the current vanilla index.html header so that visual
+ * continuity is preserved while we migrate screen-by-screen.
+ */
+
+type NavItem = {
+  href: string;
+  label: string;
+};
+
+const NAV_ITEMS: NavItem[] = [
+  { href: "/", label: "בית" },
+  { href: "/upload", label: "העלאת מסמכים" },
+  { href: "/training", label: "אימון סגנון" },
+  { href: "/skills", label: "מיומנויות" },
+  { href: "/diagnostics", label: "אבחון" },
+];
+
+export function AppShell({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <header
+        className="
+          relative z-10 flex items-center gap-4
+          px-10 py-[18px]
+          bg-navy text-parchment
+          border-b-[3px] border-gold
+          shadow-md
+        "
+      >
+        <Link href="/" className="flex items-baseline gap-3 hover:text-parchment">
+          <span className="font-display text-[1.45rem] font-bold tracking-[0.02em] text-parchment">
+            עוזר משפטי
+          </span>
+          <span className="text-gold-soft text-sm font-medium">ניהול תיקים</span>
+        </Link>
+
+        <nav className="me-auto flex items-center gap-1">
+          {NAV_ITEMS.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className="
+                px-3 py-1.5 rounded
+                text-sm text-parchment/80
+                transition-colors
+                hover:text-parchment hover:bg-navy-soft/60
+              "
+            >
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+      </header>
+
+      <main className="flex-1 w-full max-w-[1400px] mx-auto px-10 py-10">
+        {children}
+      </main>
+    </>
+  );
+}