sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: convert top navigation to grouped monochromatic segmented tabs
MindSift CI & Docker Release / Lint, Build & Unit Tests (push) Successful in 2m21s
Details
MindSift CI & Docker Release / Build & Push Docker Image (push) Successful in 1m46s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 19:14:30 +02:00
1 parent b53f7c5fc9
commit 2e7deee9bf
1 file changed
+33 -31
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+33 -31
View File
@@ -203,27 +203,28 @@ export const App: React.FC = () => {
/> />
</section> </section>
{/* Top Filter / Tab Pills matching Template Screen 3 */} {/* Monochromatic Segmented Tabs */}
<nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar"> <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 <button
onClick={() => { onClick={() => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('triage'); setActiveTab('triage');
}} }}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${ 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' activeTab === 'triage'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm' ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]' : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
}`} }`}
> >
<Layers className="w-4 h-4" /> <Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-white' : 'text-zinc-400'}`} />
<span>Triage</span> <span>Triage</span>
{stats.inboxCount > 0 && ( {stats.inboxCount > 0 && (
<span <span
className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${ className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
activeTab === 'triage' activeTab === 'triage'
? 'bg-white text-[#1d8cf8]' ? 'bg-white/[0.14] text-white'
: 'bg-[#16171a] text-[#1d8cf8]' : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`} }`}
> >
{stats.inboxCount} {stats.inboxCount}
@@ -236,20 +237,20 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('tasks'); setActiveTab('tasks');
}} }}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${ 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' activeTab === 'tasks'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm' ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]' : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
}`} }`}
> >
<CheckSquare className="w-4 h-4" /> <CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-white' : 'text-zinc-400'}`} />
<span>Aufgaben</span> <span>Aufgaben</span>
{stats.tasksOpenCount > 0 && ( {stats.tasksOpenCount > 0 && (
<span <span
className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${ className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
activeTab === 'tasks' activeTab === 'tasks'
? 'bg-white text-[#1d8cf8]' ? 'bg-white/[0.14] text-white'
: 'bg-[#16171a] text-[#22c55e]' : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`} }`}
> >
{stats.tasksOpenCount} {stats.tasksOpenCount}
@@ -262,19 +263,19 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('workspace'); setActiveTab('workspace');
}} }}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${ 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' activeTab === 'workspace'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm' ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]' : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
}`} }`}
> >
<FileText className="w-4 h-4" /> <FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-white' : 'text-zinc-400'}`} />
<span>Workspace</span> <span>Workspace</span>
<span <span
className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${ className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
activeTab === 'workspace' activeTab === 'workspace'
? 'bg-white text-[#1d8cf8]' ? 'bg-white/[0.14] text-white'
: 'bg-[#16171a] text-zinc-400' : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`} }`}
> >
{stats.docsCount} {stats.docsCount}
@@ -286,13 +287,13 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('lists'); setActiveTab('lists');
}} }}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${ 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' activeTab === 'lists'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm' ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]' : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
}`} }`}
> >
<ShoppingCart className="w-4 h-4" /> <ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-white' : 'text-zinc-400'}`} />
<span>Geteilte Listen</span> <span>Geteilte Listen</span>
</button> </button>
@@ -301,15 +302,16 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('ecosystem'); setActiveTab('ecosystem');
}} }}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${ 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' activeTab === 'ecosystem'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm' ? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]' : 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
}`} }`}
> >
<Webhook className="w-4 h-4" /> <Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-white' : 'text-zinc-400'}`} />
<span>Webhooks & Export</span> <span>Webhooks & Export</span>
</button> </button>
</div>
</nav> </nav>
{/* Tab View Content */} {/* Tab View Content */}