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>
2026-02-01 23:02:37 +00:00
parent 1a7a0ed4d3
commit fa2e7dd44a
3 changed files with 261 additions and 108 deletions
--- a/src/app/page.tsx
+++ b/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 */}