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,31 +39,42 @@ export default function Home() {
   const hasBookmarks = Object.keys(bookmarksByCategory).length > 0;
   const noResults = searchQuery && !hasServices && !hasBookmarks;
 
-  return (
+  // Count running services
-    <div className="min-h-screen bg-slate-50 dark:bg-stone-950">
+  const runningCount = services.filter(s => healthStatus[s.name] === 'running').length;
-      <Header />
+  const totalServices = services.length;
 
-      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+  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 results found for &quot;{searchQuery}&quot;
+                  No services found for &quot;{searchQuery}&quot;
                 </p>
               </div>
             )}
 
             {/* Services */}
             {hasServices && (
-          <div className="mb-12">
+              <div>
-            <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}
@@ -72,13 +93,29 @@ export default function Home() {
                 ))}
               </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>
-            <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}
@@ -96,6 +133,88 @@ export default function Home() {
                 ))}
               </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 activeTab={activeTab} onTabChange={(tab) => setActiveTab(tab as TabId)} tabs={tabs} />
+
+      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+        {renderTabContent()}
       </main>
 
       {/* Footer */}

src/components/Header.tsx

@@ -3,12 +3,26 @@
 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">
+    <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 py-4 flex items-center justify-between">
+      <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">
@@ -54,6 +68,25 @@ export function Header() {
             </button>
           </div>
         </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"/>'),
 };