From 2e7deee9bf950cde660a9bb37bd01748ba679a33 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sat, 24 Oct 2026 19:14:30 +0200
Subject: [PATCH] style: convert top navigation to grouped monochromatic
 segmented tabs

---
 frontend/src/App.tsx | 208 ++++++++++++++++++++++---------------------
 1 file changed, 105 insertions(+), 103 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1db166a..7647440 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -203,113 +203,115 @@ export const App: React.FC = () => {
           />
         </section>
 
-        {/* Top Filter / Tab Pills matching Template Screen 3 */}
-        <nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar">
-          <button
-            onClick={() => {
-              triggerHaptic(10);
-              setActiveTab('triage');
-            }}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
-              activeTab === 'triage'
-                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
-            }`}
-          >
-            <Layers className="w-4 h-4" />
-            <span>Triage</span>
-            {stats.inboxCount > 0 && (
-              <span
-                className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
-                  activeTab === 'triage'
-                    ? 'bg-white text-[#1d8cf8]'
-                    : 'bg-[#16171a] text-[#1d8cf8]'
-                }`}
-              >
-                {stats.inboxCount}
-              </span>
-            )}
-          </button>
-
-          <button
-            onClick={() => {
-              triggerHaptic(10);
-              setActiveTab('tasks');
-            }}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
-              activeTab === 'tasks'
-                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
-            }`}
-          >
-            <CheckSquare className="w-4 h-4" />
-            <span>Aufgaben</span>
-            {stats.tasksOpenCount > 0 && (
-              <span
-                className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
-                  activeTab === 'tasks'
-                    ? 'bg-white text-[#1d8cf8]'
-                    : 'bg-[#16171a] text-[#22c55e]'
-                }`}
-              >
-                {stats.tasksOpenCount}
-              </span>
-            )}
-          </button>
-
-          <button
-            onClick={() => {
-              triggerHaptic(10);
-              setActiveTab('workspace');
-            }}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
-              activeTab === 'workspace'
-                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
-            }`}
-          >
-            <FileText className="w-4 h-4" />
-            <span>Workspace</span>
-            <span
-              className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
-                activeTab === 'workspace'
-                  ? 'bg-white text-[#1d8cf8]'
-                  : 'bg-[#16171a] text-zinc-400'
+        {/* Monochromatic Segmented Tabs */}
+        <nav className="flex items-center justify-start sm:justify-center mb-8 overflow-x-auto pb-1 no-scrollbar">
+          <div className="inline-flex items-center p-1 bg-[#1c1e22] rounded-xl border border-white/[0.08] shadow-sm gap-1">
+            <button
+              onClick={() => {
+                triggerHaptic(10);
+                setActiveTab('triage');
+              }}
+              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+                activeTab === 'triage'
+                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
+                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
               }`}
             >
-              {stats.docsCount}
-            </span>
-          </button>
+              <Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-white' : 'text-zinc-400'}`} />
+              <span>Triage</span>
+              {stats.inboxCount > 0 && (
+                <span
+                  className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
+                    activeTab === 'triage'
+                      ? 'bg-white/[0.14] text-white'
+                      : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
+                  }`}
+                >
+                  {stats.inboxCount}
+                </span>
+              )}
+            </button>
 
-          <button
-            onClick={() => {
-              triggerHaptic(10);
-              setActiveTab('lists');
-            }}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
-              activeTab === 'lists'
-                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
-            }`}
-          >
-            <ShoppingCart className="w-4 h-4" />
-            <span>Geteilte Listen</span>
-          </button>
+            <button
+              onClick={() => {
+                triggerHaptic(10);
+                setActiveTab('tasks');
+              }}
+              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+                activeTab === 'tasks'
+                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
+                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
+              }`}
+            >
+              <CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-white' : 'text-zinc-400'}`} />
+              <span>Aufgaben</span>
+              {stats.tasksOpenCount > 0 && (
+                <span
+                  className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
+                    activeTab === 'tasks'
+                      ? 'bg-white/[0.14] text-white'
+                      : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
+                  }`}
+                >
+                  {stats.tasksOpenCount}
+                </span>
+              )}
+            </button>
 
-          <button
-            onClick={() => {
-              triggerHaptic(10);
-              setActiveTab('ecosystem');
-            }}
-            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
-              activeTab === 'ecosystem'
-                ? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
-                : 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
-            }`}
-          >
-            <Webhook className="w-4 h-4" />
-            <span>Webhooks & Export</span>
-          </button>
+            <button
+              onClick={() => {
+                triggerHaptic(10);
+                setActiveTab('workspace');
+              }}
+              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+                activeTab === 'workspace'
+                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
+                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
+              }`}
+            >
+              <FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-white' : 'text-zinc-400'}`} />
+              <span>Workspace</span>
+              <span
+                className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
+                  activeTab === 'workspace'
+                    ? 'bg-white/[0.14] text-white'
+                    : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
+                }`}
+              >
+                {stats.docsCount}
+              </span>
+            </button>
+
+            <button
+              onClick={() => {
+                triggerHaptic(10);
+                setActiveTab('lists');
+              }}
+              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+                activeTab === 'lists'
+                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
+                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
+              }`}
+            >
+              <ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-white' : 'text-zinc-400'}`} />
+              <span>Geteilte Listen</span>
+            </button>
+
+            <button
+              onClick={() => {
+                triggerHaptic(10);
+                setActiveTab('ecosystem');
+              }}
+              className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
+                activeTab === 'ecosystem'
+                  ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
+                  : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
+              }`}
+            >
+              <Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-white' : 'text-zinc-400'}`} />
+              <span>Webhooks & Export</span>
+            </button>
+          </div>
         </nav>
 
         {/* Tab View Content */}