feat(FN-005): implement frontend foundation with auth and routing

- Add OIDC authentication with PKCE flow - Create dashboard shell with sidebar and header - Implement project management UI (list, create, detail) - Add tool spawn page with tool/project selection - Create tool instance detail page with status and controls - Set up React Router with route guards - Add Zustand auth store and API client with types
2026-05-14 17:28:15 +02:00
parent 6aea953734
commit 6f18dd24a5
27 changed files with 1469 additions and 43 deletions
@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useAuthStore } from '../stores/auth'
+import {
+  UserCircleIcon,
+  ArrowRightOnRectangleIcon,
+  Cog6ToothIcon,
+} from '@heroicons/react/24/outline'
+
+export default function Header() {
+  const { user, logout } = useAuthStore()
+  const [showDropdown, setShowDropdown] = useState(false)
+
+  const handleLogout = () => {
+    logout()
+    localStorage.removeItem('access_token')
+    window.location.href = '/login'
+  }
+
+  return (
+    <header className="h-16 border-b border-border bg-surface flex items-center justify-between px-6">
+      <div className="flex items-center">
+        <span className="text-lg font-semibold">Headquarter</span>
+      </div>
+
+      <div className="relative">
+        <button
+          onClick={() => setShowDropdown(!showDropdown)}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface transition-colors"
+        >
+          <UserCircleIcon className="w-6 h-6" />
+          <span className="text-sm">{user?.display_name || user?.email || 'User'}</span>
+        </button>
+
+        {showDropdown && (
+          <div className="absolute right-0 mt-2 w-48 rounded-lg border border-border bg-surface shadow-lg z-50">
+            <div className="p-2">
+              <Link
+                to="/settings"
+                className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface text-sm"
+                onClick={() => setShowDropdown(false)}
+              >
+                <Cog6ToothIcon className="w-4 h-4" />
+                Settings
+              </Link>
+              <button
+                onClick={handleLogout}
+                className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface text-sm w-full text-left text-red-400"
+              >
+                <ArrowRightOnRectangleIcon className="w-4 h-4" />
+                Logout
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}