Add Home and Settings tabs

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

src/app/page.tsx

@@ -1,7 +1,15 @@
 'use client';
 
+import { useState } from 'react';
 import { Icon } from '@/components';
 
+type TabId = 'home' | 'settings';
+
+const tabs: { id: TabId; label: string; icon: string }[] = [
+  { id: 'home', label: 'Home', icon: 'star' },
+  { id: 'settings', label: 'Settings', icon: 'settings' },
+];
+
 const whyratingLinks = [
   { name: 'Brand Site', url: 'http://brand.nuc.lan', icon: 'palette', description: 'WhyRating brand guidelines and assets' },
   { name: 'Templates Site', url: 'http://templates.nuc.lan', icon: 'layout', description: 'WhyRating email and document templates' },
@@ -9,12 +17,15 @@ const whyratingLinks = [
 ];
 
 export default function Home() {
+  const [activeTab, setActiveTab] = useState<TabId>('home');
+  const [darkMode, setDarkMode] = useState(true);
+
   return (
     <div className="min-h-screen bg-slate-50 dark:bg-stone-950">
       {/* Header */}
       <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-4xl mx-auto px-4 sm:px-6">
-          <div className="py-6 flex items-center justify-between">
+          <div className="py-4 flex items-center justify-between">
             <div className="flex items-center gap-3">
               <div className="w-10 h-10 flex items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-orange-600">
                 <Icon name="star" size={20} className="text-white" />
@@ -29,40 +40,121 @@ export default function Home() {
               </div>
             </div>
           </div>
+
+          {/* Tabs */}
+          <nav className="flex gap-1 mt-2">
+            {tabs.map(tab => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex items-center gap-2 px-5 py-3 text-sm font-medium border-none cursor-pointer rounded-t-lg transition-all whitespace-nowrap ${
+                  activeTab === tab.id
+                    ? 'bg-slate-100 dark:bg-stone-800 text-slate-900 dark:text-stone-50'
+                    : 'bg-transparent text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300'
+                }`}
+              >
+                <Icon name={tab.icon} size={16} />
+                {tab.label}
+              </button>
+            ))}
+          </nav>
         </div>
       </header>
 
       {/* Main Content */}
-      <main className="max-w-4xl mx-auto px-4 sm:px-6 py-12">
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 py-8">
-        <div className="mb-8">
+        {activeTab === 'home' && (
-          <h2 className="text-2xl font-semibold text-slate-900 dark:text-stone-100 mb-2">
+          <>
-            Quick Access
+            <div className="mb-8">
-          </h2>
+              <h2 className="text-2xl font-semibold text-slate-900 dark:text-stone-100 mb-2">
-          <p className="text-slate-500 dark:text-stone-500">
+                Quick Access
-            Jump to WhyRating resources and documentation
+              </h2>
-          </p>
+              <p className="text-slate-500 dark:text-stone-500">
-        </div>
+                Jump to WhyRating resources and documentation
+              </p>
+            </div>
 
-        <div className="grid gap-4">
+            <div className="grid gap-4">
-          {whyratingLinks.map(link => (
+              {whyratingLinks.map(link => (
-            <a
+                <a
-              key={link.name}
+                  key={link.name}
-              href={link.url}
+                  href={link.url}
-              target="_blank"
+                  target="_blank"
-              rel="noopener noreferrer"
+                  rel="noopener noreferrer"
-              className="flex items-center gap-4 p-5 bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm hover:shadow-md hover:border-slate-200 dark:hover:border-stone-600/50 transition-all"
+                  className="flex items-center gap-4 p-5 bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm hover:shadow-md hover:border-slate-200 dark:hover:border-stone-600/50 transition-all"
-            >
+                >
-              <div className="w-14 h-14 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-stone-800">
+                  <div className="w-14 h-14 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-stone-800">
-                <Icon name={link.icon} size={28} className="text-slate-600 dark:text-stone-400" />
+                    <Icon name={link.icon} size={28} className="text-slate-600 dark:text-stone-400" />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="font-semibold text-lg text-slate-900 dark:text-stone-100">{link.name}</h3>
+                    <p className="text-sm text-slate-500 dark:text-stone-500">{link.description}</p>
+                  </div>
+                  <Icon name="external-link" size={20} className="text-slate-400 dark:text-stone-600" />
+                </a>
+              ))}
+            </div>
+          </>
+        )}
+
+        {activeTab === 'settings' && (
+          <div className="max-w-2xl">
+            <div className="bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm 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 hub
+                  </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>
-              <div className="flex-1">
+
-                <h3 className="font-semibold text-lg text-slate-900 dark:text-stone-100">{link.name}</h3>
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-stone-100 mt-8 mb-6">
-                <p className="text-sm text-slate-500 dark:text-stone-500">{link.description}</p>
+                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">Project</span>
+                  <span className="text-slate-900 dark:text-stone-100">WhyRating.com</span>
+                </div>
               </div>
-              <Icon name="external-link" size={20} className="text-slate-400 dark:text-stone-600" />
+
-            </a>
+              <div className="mt-8 pt-6 border-t border-slate-100 dark:border-stone-800">
-          ))}
+                <a
-        </div>
+                  href="http://192.168.1.3:3030/nuc/whyrating-hub"
+                  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>
+        )}
       </main>
 
       {/* Footer */}