Dev #1
+105
-103
@@ -203,113 +203,115 @@ 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">
|
||||||
<button
|
<div className="inline-flex items-center p-1 bg-[#1c1e22] rounded-xl border border-white/[0.08] shadow-sm gap-1">
|
||||||
onClick={() => {
|
<button
|
||||||
triggerHaptic(10);
|
onClick={() => {
|
||||||
setActiveTab('triage');
|
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'
|
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 ${
|
||||||
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
|
activeTab === 'triage'
|
||||||
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
|
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
|
||||||
}`}
|
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
|
||||||
>
|
|
||||||
<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'
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{stats.docsCount}
|
<Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-white' : 'text-zinc-400'}`} />
|
||||||
</span>
|
<span>Triage</span>
|
||||||
</button>
|
{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
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
triggerHaptic(10);
|
triggerHaptic(10);
|
||||||
setActiveTab('lists');
|
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 === 'lists'
|
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]'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<ShoppingCart className="w-4 h-4" />
|
<CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-white' : 'text-zinc-400'}`} />
|
||||||
<span>Geteilte Listen</span>
|
<span>Aufgaben</span>
|
||||||
</button>
|
{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
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
triggerHaptic(10);
|
triggerHaptic(10);
|
||||||
setActiveTab('ecosystem');
|
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 === 'ecosystem'
|
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]'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<Webhook className="w-4 h-4" />
|
<FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-white' : 'text-zinc-400'}`} />
|
||||||
<span>Webhooks & Export</span>
|
<span>Workspace</span>
|
||||||
</button>
|
<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>
|
</nav>
|
||||||
|
|
||||||
{/* Tab View Content */}
|
{/* Tab View Content */}
|
||||||
|
|||||||
Reference in new issue
Block a user