Dev #1

Merged
sandrodach merged 20 commits from dev into main 2026-10-25 01:03:04 +02:00
Showing only changes of commit 2e7deee9bf - Show all commits
+33 -31
View File
@@ -203,27 +203,28 @@ 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">
{/* 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-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'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
: '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" />
<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-full text-[10px] font-bold ${
className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
activeTab === 'triage'
? 'bg-white text-[#1d8cf8]'
: 'bg-[#16171a] text-[#1d8cf8]'
? 'bg-white/[0.14] text-white'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`}
>
{stats.inboxCount}
@@ -236,20 +237,20 @@ export const App: React.FC = () => {
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 ${
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-[#1d8cf8] text-white font-semibold shadow-sm'
: '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]'
}`}
>
<CheckSquare className="w-4 h-4" />
<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-full text-[10px] font-bold ${
className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
activeTab === 'tasks'
? 'bg-white text-[#1d8cf8]'
: 'bg-[#16171a] text-[#22c55e]'
? 'bg-white/[0.14] text-white'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`}
>
{stats.tasksOpenCount}
@@ -262,19 +263,19 @@ export const App: React.FC = () => {
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 ${
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-[#1d8cf8] text-white font-semibold shadow-sm'
: '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]'
}`}
>
<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
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'
? 'bg-white text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400'
? 'bg-white/[0.14] text-white'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`}
>
{stats.docsCount}
@@ -286,13 +287,13 @@ export const App: React.FC = () => {
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 ${
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-[#1d8cf8] text-white font-semibold shadow-sm'
: '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]'
}`}
>
<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>
</button>
@@ -301,15 +302,16 @@ export const App: React.FC = () => {
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 ${
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-[#1d8cf8] text-white font-semibold shadow-sm'
: '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]'
}`}
>
<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>
</button>
</div>
</nav>
{/* Tab View Content */}