Initial NUC Portal dashboard

- 17 internal services with live health status
- 28 external bookmarks organized by category
- Dark/light mode toggle with persistence
- Cmd+K search filtering
- Health API polling every 30 seconds

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/Header.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { usePortal } from '@/lib/PortalContext';
+import { Icon } from './Icons';
+
+export function Header() {
+  const { darkMode, setDarkMode, refreshHealth, isRefreshing } = usePortal();
+
+  return (
+    <header className="sticky top-0 z-50 bg-white/80 dark:bg-stone-950/80 backdrop-blur-sm border-b border-slate-200 dark:border-stone-800">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
+        {/* Logo / Title */}
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 flex items-center justify-center rounded-lg bg-gradient-to-br from-slate-700 to-slate-900 dark:from-stone-600 dark:to-stone-800">
+            <Icon name="server" size={18} className="text-white" />
+          </div>
+          <div>
+            <h1 className="font-bold text-lg text-slate-900 dark:text-stone-100">
+              NUC Portal
+            </h1>
+            <p className="text-xs text-slate-500 dark:text-stone-500">
+              192.168.1.3
+            </p>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-2">
+          {/* Refresh button */}
+          <button
+            onClick={refreshHealth}
+            disabled={isRefreshing}
+            className="p-2 rounded-lg bg-slate-100 dark:bg-stone-900 border border-slate-200 dark:border-stone-800 hover:bg-slate-200 dark:hover:bg-stone-800 disabled:opacity-50 transition-colors"
+            title="Refresh health status"
+          >
+            <Icon
+              name="refresh-cw"
+              size={18}
+              className={`text-slate-600 dark:text-stone-400 ${isRefreshing ? 'animate-spin' : ''}`}
+            />
+          </button>
+
+          {/* Dark mode toggle */}
+          <button
+            onClick={() => setDarkMode(!darkMode)}
+            className="p-2 rounded-lg bg-slate-100 dark:bg-stone-900 border border-slate-200 dark:border-stone-800 hover:bg-slate-200 dark:hover:bg-stone-800 transition-colors"
+            title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+          >
+            <Icon
+              name={darkMode ? 'sun' : 'moon'}
+              size={18}
+              className="text-slate-600 dark:text-stone-400"
+            />
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}