Add tab navigation (Services, Bookmarks, Settings)

- Services tab: shows all internal services with health status
- Bookmarks tab: shows all external bookmarks by category
- Settings tab: dark mode toggle and portal info
- Running services counter in header
- Consistent tab styling with underline indicator

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

src/app/page.tsx

@@ -1,11 +1,21 @@
 'use client';
 
-import { Header, SearchBar, ServiceCard, BookmarkCard, CategorySection } from '@/components';
+import { useState } from 'react';
+import { Header, SearchBar, ServiceCard, BookmarkCard, CategorySection, Icon } from '@/components';
 import { usePortal } from '@/lib/PortalContext';
 import { categoryLabels, categoryOrder, bookmarkCategoryLabels, bookmarkCategoryOrder, ServiceCategory, BookmarkCategory } from '@/lib/services';
 
+type TabId = 'services' | 'bookmarks' | 'settings';
+
+const tabs: { id: TabId; label: string; icon: string }[] = [
+  { id: 'services', label: 'Services', icon: 'server' },
+  { id: 'bookmarks', label: 'Bookmarks', icon: 'external-link' },
+  { id: 'settings', label: 'Settings', icon: 'settings' },
+];
+
 export default function Home() {
-  const { filteredServices, filteredBookmarks, healthStatus, searchQuery } = usePortal();
+  const [activeTab, setActiveTab] = useState<TabId>('services');
+  const { filteredServices, filteredBookmarks, healthStatus, searchQuery, darkMode, setDarkMode, services } = usePortal();
 
   // Group services by category
   const servicesByCategory = categoryOrder.reduce((acc, category) => {
@@ -29,73 +39,182 @@ export default function Home() {
   const hasBookmarks = Object.keys(bookmarksByCategory).length > 0;
   const noResults = searchQuery && !hasServices && !hasBookmarks;
 
+  // Count running services
+  const runningCount = services.filter(s => healthStatus[s.name] === 'running').length;
+  const totalServices = services.length;
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'services':
+        return (
+          <>
+            {/* Search */}
+            <div className="mb-8 max-w-xl">
+              <SearchBar />
+            </div>
+
+            {/* Status summary */}
+            <div className="mb-6 flex items-center gap-4 text-sm">
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-emerald-500" />
+                <span className="text-slate-600 dark:text-stone-400">
+                  {runningCount} of {totalServices} services running
+                </span>
+              </div>
+            </div>
+
+            {/* No results message */}
+            {noResults && (
+              <div className="text-center py-12">
+                <p className="text-slate-500 dark:text-stone-500">
+                  No services found for &quot;{searchQuery}&quot;
+                </p>
+              </div>
+            )}
+
+            {/* Services */}
+            {hasServices && (
+              <div>
+                {Object.entries(servicesByCategory).map(([category, services]) => (
+                  <CategorySection
+                    key={category}
+                    title={categoryLabels[category as ServiceCategory]}
+                    count={services.length}
+                    columns={3}
+                  >
+                    {services.map(service => (
+                      <ServiceCard
+                        key={service.name}
+                        service={service}
+                        status={healthStatus[service.name] || 'unknown'}
+                      />
+                    ))}
+                  </CategorySection>
+                ))}
+              </div>
+            )}
+          </>
+        );
+
+      case 'bookmarks':
+        return (
+          <>
+            {/* Search */}
+            <div className="mb-8 max-w-xl">
+              <SearchBar />
+            </div>
+
+            {/* No results message */}
+            {searchQuery && !hasBookmarks && (
+              <div className="text-center py-12">
+                <p className="text-slate-500 dark:text-stone-500">
+                  No bookmarks found for &quot;{searchQuery}&quot;
+                </p>
+              </div>
+            )}
+
+            {/* Bookmarks */}
+            {hasBookmarks && (
+              <div>
+                {Object.entries(bookmarksByCategory).map(([category, bookmarks]) => (
+                  <CategorySection
+                    key={category}
+                    title={bookmarkCategoryLabels[category as BookmarkCategory]}
+                    count={bookmarks.length}
+                    columns={4}
+                  >
+                    {bookmarks.map(bookmark => (
+                      <BookmarkCard
+                        key={bookmark.name}
+                        bookmark={bookmark}
+                      />
+                    ))}
+                  </CategorySection>
+                ))}
+              </div>
+            )}
+          </>
+        );
+
+      case 'settings':
+        return (
+          <div className="max-w-2xl">
+            <div className="bg-white dark:bg-stone-900 rounded-xl border border-slate-200 dark:border-stone-800 p-6">
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-stone-100 mb-6">
+                Appearance
+              </h2>
+
+              {/* Dark Mode Toggle */}
+              <div className="flex items-center justify-between py-4 border-b border-slate-100 dark:border-stone-800">
+                <div>
+                  <h3 className="font-medium text-slate-900 dark:text-stone-100">Dark Mode</h3>
+                  <p className="text-sm text-slate-500 dark:text-stone-500">
+                    Use dark theme for the portal
+                  </p>
+                </div>
+                <button
+                  onClick={() => setDarkMode(!darkMode)}
+                  className={`relative w-12 h-6 rounded-full transition-colors ${
+                    darkMode ? 'bg-emerald-500' : 'bg-slate-300 dark:bg-stone-600'
+                  }`}
+                >
+                  <span
+                    className={`absolute top-1 left-1 w-4 h-4 rounded-full bg-white transition-transform ${
+                      darkMode ? 'translate-x-6' : 'translate-x-0'
+                    }`}
+                  />
+                </button>
+              </div>
+
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-stone-100 mt-8 mb-6">
+                About
+              </h2>
+
+              <div className="space-y-3 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-slate-500 dark:text-stone-500">Version</span>
+                  <span className="text-slate-900 dark:text-stone-100">1.0.0</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-slate-500 dark:text-stone-500">Server IP</span>
+                  <span className="text-slate-900 dark:text-stone-100 font-mono">192.168.1.3</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-slate-500 dark:text-stone-500">Services</span>
+                  <span className="text-slate-900 dark:text-stone-100">{totalServices}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-slate-500 dark:text-stone-500">Bookmarks</span>
+                  <span className="text-slate-900 dark:text-stone-100">{filteredBookmarks.length}</span>
+                </div>
+              </div>
+
+              <div className="mt-8 pt-6 border-t border-slate-100 dark:border-stone-800">
+                <a
+                  href="http://192.168.1.3:3030/nuc/nuc-portal"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300"
+                >
+                  <Icon name="git-branch" size={16} />
+                  View on Gitea
+                </a>
+              </div>
+            </div>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className="min-h-screen bg-slate-50 dark:bg-stone-950">
-      <Header />
+      <Header activeTab={activeTab} onTabChange={(tab) => setActiveTab(tab as TabId)} tabs={tabs} />
 
       <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
-        {/* Search */}
-        <div className="mb-8 max-w-xl">
-          <SearchBar />
-        </div>
-
-        {/* No results message */}
-        {noResults && (
-          <div className="text-center py-12">
-            <p className="text-slate-500 dark:text-stone-500">
-              No results found for &quot;{searchQuery}&quot;
-            </p>
-          </div>
-        )}
-
-        {/* Services */}
-        {hasServices && (
-          <div className="mb-12">
-            <h2 className="text-xl font-bold text-slate-900 dark:text-stone-100 mb-6">
-              Services
-            </h2>
-            {Object.entries(servicesByCategory).map(([category, services]) => (
-              <CategorySection
-                key={category}
-                title={categoryLabels[category as ServiceCategory]}
-                count={services.length}
-                columns={3}
-              >
-                {services.map(service => (
-                  <ServiceCard
-                    key={service.name}
-                    service={service}
-                    status={healthStatus[service.name] || 'unknown'}
-                  />
-                ))}
-              </CategorySection>
-            ))}
-          </div>
-        )}
-
-        {/* Bookmarks */}
-        {hasBookmarks && (
-          <div>
-            <h2 className="text-xl font-bold text-slate-900 dark:text-stone-100 mb-6">
-              Bookmarks
-            </h2>
-            {Object.entries(bookmarksByCategory).map(([category, bookmarks]) => (
-              <CategorySection
-                key={category}
-                title={bookmarkCategoryLabels[category as BookmarkCategory]}
-                count={bookmarks.length}
-                columns={4}
-              >
-                {bookmarks.map(bookmark => (
-                  <BookmarkCard
-                    key={bookmark.name}
-                    bookmark={bookmark}
-                  />
-                ))}
-              </CategorySection>
-            ))}
-          </div>
-        )}
+        {renderTabContent()}
       </main>
 
       {/* Footer */}

src/components/Header.tsx

@@ -3,56 +3,89 @@
 import { usePortal } from '@/lib/PortalContext';
 import { Icon } from './Icons';
 
-export function Header() {
+interface Tab {
+  id: string;
+  label: string;
+  icon: string;
+}
+
+interface HeaderProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+  tabs: Tab[];
+}
+
+export function Header({ activeTab, onTabChange, tabs }: HeaderProps) {
   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" />
+    <header className="sticky top-0 z-50 bg-white dark:bg-stone-950 border-b border-slate-200 dark:border-stone-800">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        {/* Top bar */}
+        <div className="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>
-          <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>
+
+          {/* 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>
 
-        {/* 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>
+        {/* Tabs */}
+        <nav className="flex gap-1 -mb-px">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === tab.id
+                  ? 'border-slate-900 dark:border-stone-100 text-slate-900 dark:text-stone-100'
+                  : 'border-transparent text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300 hover:border-slate-300 dark:hover:border-stone-700'
+              }`}
+            >
+              <Icon name={tab.icon} size={16} />
+              {tab.label}
+            </button>
+          ))}
+        </nav>
       </div>
     </header>
   );

src/components/Icons.tsx

@@ -106,6 +106,7 @@ export const icons: Record<string, React.ComponentType<IconProps>> = {
   'external-link': createIcon('<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>'),
   'refresh-cw': createIcon('<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>'),
   'x': createIcon('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'),
+  'settings': createIcon('<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>'),
   'loader': createIcon('<path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/>'),
 };