feat(mobile-responsive-polish): Nav + Pages mobile-friendly (Hamburger, stacking) [tsc:fail]

2026-05-23 05:44:17 +02:00 · 2026-05-23 05:44:17 +02:00 · 475d910f8a
commit 475d910f8a
parent 0b33877c70
3 changed files with 84 additions and 90 deletions
--- a/.phase7-state.json
+++ b/.phase7-state.json
@ -1,9 +1,10 @@
 {
  "completed_features": [],
-  "current_feature": "email-notification-stub",
+  "current_feature": "mobile-responsive-polish",
  "started_at": "2026-05-23T05:40:09.997191",
  "attempted_features": [
    "documents-upload",
-    "search-everywhere"
+    "search-everywhere",
+    "email-notification-stub"
  ]
 }
--- a/GENERATION_LOG.md
+++ b/GENERATION_LOG.md
@ -816,3 +816,18 @@ src/routes/documents.ts(36,25): error TS2339: Property 'size' does not exist on
 src/routes/documents.ts(46,32): error TS2339: Property 'file' does not exist on type 'FastifyRequest<RouteGenericInterface, RawServerDefault, IncomingMessage, FastifySchema, FastifyTypeProviderDefault, unknown, FastifyBaseLogger, ResolveFastifyRequestType<...>>'.
 src/routes/documents.ts(56,9): error TS2769: No overload matches this call.
  Overload 1 of 2, '(value: { filename: string | SQL<unknown> | Placeholder<string, any>; contentType: string | SQL<unknown> | Placeholder<string, any>; sizeBytes: number | SQL<...> | Placeholder<...>; id?: string | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; userId?: string | ... 3 more ... | undefined; c
+- `05:43:30` **INFO**   Committed feature email-notification-stub
+- `05:43:31` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: mobile-responsive-polish (2026-05-23 05:43:31)
+
+- `05:43:31` **INFO** Description: Nav + Pages mobile-friendly (Hamburger, stacking)
+- `05:43:31` **INFO**   Generating apps/web/src/components/Nav.tsx (ERWEITERT — Mobile-Hamburger (Menu-Icon) bei md:hidden, full Nav-Links…)
+- `05:44:16` **INFO**     wrote 4790 chars in 45.2s (attempt 1)
+- `05:44:16` **INFO** Running tsc --noEmit on api…
+- `05:44:17` **WARN**   tsc errors:
+src/routes/documents.ts(34,25): error TS2339: Property 'name' does not exist on type 'PgTableWithColumns<{ name: "documents"; schema: undefined; columns: { id: PgColumn<{ name: "id"; tableName: "documents"; dataType: "string"; columnType: "PgUUID"; data: string; driverParam: string; notNull: true; hasDefault: true; ... 6 more ...; generated: undefined; }, {}, {}>; ... 5 more ...; createdAt: PgColumn<...'.
+src/routes/documents.ts(36,25): error TS2339: Property 'size' does not exist on type 'PgTableWithColumns<{ name: "documents"; schema: undefined; columns: { id: PgColumn<{ name: "id"; tableName: "documents"; dataType: "string"; columnType: "PgUUID"; data: string; driverParam: string; notNull: true; hasDefault: true; ... 6 more ...; generated: undefined; }, {}, {}>; ... 5 more ...; createdAt: PgColumn<...'.
+src/routes/documents.ts(46,32): error TS2339: Property 'file' does not exist on type 'FastifyRequest<RouteGenericInterface, RawServerDefault, IncomingMessage, FastifySchema, FastifyTypeProviderDefault, unknown, FastifyBaseLogger, ResolveFastifyRequestType<...>>'.
+src/routes/documents.ts(56,9): error TS2769: No overload matches this call.
+  Overload 1 of 2, '(value: { filename: string | SQL<unknown> | Placeholder<string, any>; contentType: string | SQL<unknown> | Placeholder<string, any>; sizeBytes: number | SQL<...> | Placeholder<...>; id?: string | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; userId?: string | ... 3 more ... | undefined; c
--- a/apps/web/src/components/Nav.tsx
+++ b/apps/web/src/components/Nav.tsx
@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { Link, useLocation } from "@tanstack/react-router"
 import { 
  Home, 
@ -10,7 +10,9 @@ import {
  Sun,
  Moon,
  Settings,
-  ListTree
+  ListTree,
+  Menu,
+  X
 } from "lucide-react"
 import { useQuery } from "@tanstack/react-query"
 import { api } from "../lib/api"
@ -19,6 +21,7 @@ import { useTheme } from "../lib/theme"
 export default function Nav() {
  const location = useLocation()
  const { theme, toggleTheme } = useTheme()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  
  const { data: user } = useQuery({
    queryKey: ['me'],
@ -33,6 +36,35 @@ export default function Nav() {
    { label: "Projects", to: "/projects", icon: FolderKanban },
  ]

+  const adminItems = [
+    { label: "Admin", to: "/admin", icon: ShieldCheck },
+    { label: "Audit Log", to: "/admin/audit-log", icon: ListTree },
+  ]
+
+  const allItems = user?.role === 'admin' 
+    ? [...navItems, ...adminItems] 
+    : navItems
+
+  const NavLink = ({ item, mobile = false }: { item: typeof navItems[0], mobile?: boolean }) => {
+    const isActive = location.pathname === item.to
+    const Icon = item.icon
+    
+    const baseClasses = "flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors"
+    const activeClasses = "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
+    const inactiveClasses = "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+    
+    return (
+      <Link
+        to={item.to}
+        onClick={() => setIsMobileMenuOpen(false)}
+        className={`${baseClasses} ${isActive ? activeClasses : inactiveClasses}`}
+      >
+        <Icon className="w-4 h-4" />
+        {item.label}
+      </Link>
+    )
+  }
+
  return (
    <nav className="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@ -50,104 +82,50 @@ export default function Nav() {
              </div>
            </div>
            
-            <div className="flex items-center gap-1">
-              {navItems.map((item) => {
-                const isActive = location.pathname === item.to
-                const Icon = item.icon
-                return (
-                  <Link
-                    key={item.to}
-                    to={item.to}
-                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                      isActive 
-                        ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300" 
-                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
-                    }`}
-                  >
-                    <Icon className="w-4 h-4" />
-                    {item.label}
-                  </Link>
-                )
-              })}
-
-              {user?.role === 'admin' && (
-                <>
-                  <Link
-                    to="/admin"
-                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                      location.pathname === "/admin"
-                        ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
-                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
-                    }`}
-                  >
-                    <ShieldCheck className="w-4 h-4" />
-                    Admin
-                  </Link>
-                  <Link
-                    to="/admin/audit-log"
-                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                      location.pathname === "/admin/audit-log"
-                        ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
-                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
-                    }`}
-                  >
-                    <ListTree className="w-4 h-4" />
-                    Audit Log
-                  </Link>
-                  <Link
-                    to="/settings"
-                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                      location.pathname === "/settings"
-                        ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
-                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
-                    }`}
-                  >
-                    <Settings className="w-4 h-4" />
-                    Settings
-                  </Link>
-                </>
-              )}
+            <div className="hidden md:flex items-center gap-1">
+              {allItems.map((item) => (
+                <NavLink key={item.to} item={item} />
+              ))}
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button 
              onClick={toggleTheme}
-              className="p-2 rounded-md text-gray-500 hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
-              title="Toggle Theme"
+              className="p-2 rounded-full text-gray-500 hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
            >
              {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
            </button>
            
-            <div className="h-8 w-px bg-gray-200 dark:bg-slate-800 mx-2" />
-            
-            <div className="flex items-center gap-3 pl-2">
-              <div className="text-right hidden sm:block">
-                <p className="text-sm font-medium text-gray-900 dark:text-white leading-none">
-                  {user?.name}
-                </p>
-                <p className="text-xs text-gray-500 dark:text-slate-400 mt-1 capitalize">
-                  {user?.role}
-                </p>
-              </div>
-              <button
-                onClick={async () => {
-                  try {
-                    await api.logout()
-                    window.location.href = "/login"
-                  } catch (e) {
-                    console.error(e)
-                  }
-                }}
-                className="p-2 rounded-full bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-slate-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
-                title="Logout"
-              >
-                <Settings className="w-4 h-4" /> {/* Placeholder for logout icon if needed, but using a simple button style */}
-              </button>
-            </div>
+            <button 
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="md:hidden p-2 rounded-md text-gray-500 hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-800"
+            >
+              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            </button>
          </div>
        </div>
      </div>
+
+      {/* Mobile Menu Overlay */}
+      {isMobileMenuOpen && (
+        <div className="md:hidden absolute top-16 left-0 w-full bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 shadow-xl animate-in slide-in-from-top-2 duration-200">
+          <div className="px-4 pt-2 pb-6 space-y-1">
+            {allItems.map((item) => (
+              <NavLink key={item.to} item={item} mobile />
+            ))}
+            <div className="pt-4 mt-4 border-t border-gray-100 dark:border-slate-800">
+              <Link
+                to="/settings"
+                className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-gray-600 dark:text-slate-400 hover:bg-gray-50 dark:hover:bg-slate-800"
+              >
+                <Settings className="w-4 h-4" />
+                Settings
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
    </nav>
  )
 }