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

style: reduce padding, adopt crisp square tabs/cards, keep round buttons and single accent
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 51s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 19:43:59 +02:00
1 parent 3263b07e72
commit da82caf82c
7 files changed
+345 -371
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/App.tsx
+74 -73
View File
@@ -152,20 +152,20 @@ export const App: React.FC = () => {
<div className="min-h-screen bg-[#16171a] text-white flex flex-col font-sans selection:bg-[#1d8cf8]/30">
{/* Top Header Bar */}
<header className="sticky top-0 z-30 bg-[#16171a]/95 backdrop-blur-md border-b border-white/[0.08]">
<div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
<div className="max-w-6xl mx-auto px-3 sm:px-4 h-12 flex items-center justify-between gap-4">
{/* Logo & Headline */}
<div
onClick={() => {
setActiveTab('triage');
handleTriggerAddButton();
}}
className="flex items-center gap-3 cursor-pointer group select-none"
className="flex items-center gap-2.5 cursor-pointer group select-none"
>
<div className="w-9 h-9 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm group-hover:scale-105 transition-transform">
<Brain className="w-5 h-5" />
<div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center">
<Brain className="w-4 h-4" />
</div>
<div className="flex flex-col">
<span className="font-bold text-base sm:text-lg text-white tracking-tight leading-none">
<span className="font-bold text-sm sm:text-base text-white tracking-tight leading-none">
MindSift
</span>
<span className="text-[11px] text-zinc-400 mt-0.5 hidden sm:inline-block">
@@ -181,49 +181,38 @@ export const App: React.FC = () => {
triggerHaptic(10);
setShowProfileModal(true);
}}
className="h-9 px-3.5 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2.5 transition-colors shadow-sm"
className="h-8 pl-1 pr-3 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2 transition-colors"
title="Profil & Einstellungen"
>
<div className="w-5 h-5 rounded-full bg-[#1d8cf8] text-white text-[10px] font-bold flex items-center justify-center">
<div className="w-6 h-6 rounded-full bg-[#1d8cf8] text-white text-[10px] font-bold flex items-center justify-center">
{user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div>
<span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
</button>
</div>
</div>
</header>
{/* Main Container */}
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-5 pb-28">
{/* Instant Capture Section */}
<section className="mb-6">
<InstantCaptureBar
onCaptured={handleCaptured}
autoFocusTrigger={captureFocusCount}
/>
</section>
{/* 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">
{/* Monochrome square tabs attached to header */}
<nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-white/[0.06]">
<div className="flex items-stretch">
<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 ${
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'triage'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
<Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-white' : 'text-zinc-400'}`} />
<Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<span>Triage</span>
{stats.inboxCount > 0 && (
<span
className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
activeTab === 'triage'
? 'bg-white/[0.14] text-white'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`}
>
@@ -237,19 +226,19 @@ export const App: React.FC = () => {
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 ${
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'tasks'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
<CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-white' : 'text-zinc-400'}`} />
<CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<span>Aufgaben</span>
{stats.tasksOpenCount > 0 && (
<span
className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
activeTab === 'tasks'
? 'bg-white/[0.14] text-white'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`}
>
@@ -263,18 +252,18 @@ export const App: React.FC = () => {
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 ${
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'workspace'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
<FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-white' : 'text-zinc-400'}`} />
<FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<span>Workspace</span>
<span
className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
activeTab === 'workspace'
? 'bg-white/[0.14] text-white'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`}
>
@@ -287,13 +276,13 @@ export const App: React.FC = () => {
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 ${
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'lists'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
<ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-white' : 'text-zinc-400'}`} />
<ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<span>Geteilte Listen</span>
</button>
@@ -302,17 +291,29 @@ export const App: React.FC = () => {
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 ${
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'ecosystem'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.03]'
}`}
>
<Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-white' : 'text-zinc-400'}`} />
<Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<span>Webhooks & Export</span>
</button>
</div>
</nav>
</header>
{/* Main Container */}
<main className="flex-1 max-w-6xl w-full mx-auto px-3 sm:px-4 pt-3 pb-24">
{/* Instant Capture Section */}
<section className="mb-3">
<InstantCaptureBar
onCaptured={handleCaptured}
autoFocusTrigger={captureFocusCount}
/>
</section>
{/* Tab View Content */}
<section>
@@ -359,7 +360,7 @@ export const App: React.FC = () => {
triggerHaptic(10);
setActiveTab('triage');
}}
className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`}
title="Triage Deck"
@@ -374,7 +375,7 @@ export const App: React.FC = () => {
triggerHaptic(10);
setActiveTab('tasks');
}}
className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`}
title="Aufgaben"
@@ -401,7 +402,7 @@ export const App: React.FC = () => {
triggerHaptic(10);
setActiveTab('lists');
}}
className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`}
title="Listen"
@@ -416,7 +417,7 @@ export const App: React.FC = () => {
triggerHaptic(10);
setActiveTab('workspace');
}}
className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
className={`flex flex-col items-center justify-center p-2 rounded-full transition-colors ${
activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`}
title="Workspace"
@@ -430,9 +431,9 @@ export const App: React.FC = () => {
{/* Profile & Settings Modal styled identically to Template Screen 2 */}
{showProfileModal && (
<div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
<div className="w-full max-w-sm rounded-3xl bg-[#222428] border border-white/[0.08] shadow-2xl p-6 overflow-hidden">
<div className="w-full max-w-sm bg-[#222428] border border-white/[0.08] shadow-2xl p-4 overflow-hidden">
{/* Screen 2: Top Profile Card */}
<div className="flex flex-col items-center text-center mb-6">
<div className="flex flex-col items-center text-center mb-4">
<div className="w-20 h-20 rounded-full bg-[#1d8cf8] text-white text-2xl font-bold flex items-center justify-center shadow-lg mb-3 ring-4 ring-white/[0.05]">
{user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div>
@@ -452,36 +453,36 @@ export const App: React.FC = () => {
</button>
</div>
{/* Template Screen 2: Capsule Settings Sections */}
<div className="space-y-3 mb-6">
{/* Notification toggle capsule */}
<div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-[#22c55e]/20 text-[#22c55e] flex items-center justify-center">
<Bell className="w-4 h-4" />
{/* Settings Sections */}
<div className="space-y-2 mb-3">
{/* Notification toggle */}
<div className="p-2.5 bg-[#16171a] border border-white/[0.06] flex items-center justify-between">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
<Bell className="w-3.5 h-3.5" />
</div>
<span className="text-xs font-medium text-white">Benachrichtigungen</span>
</div>
<button
type="button"
onClick={() => setNotificationsEnabled(!notificationsEnabled)}
className={`w-11 h-6 rounded-full transition-colors relative p-0.5 ${
className={`w-10 h-5 rounded-full transition-colors relative p-0.5 ${
notificationsEnabled ? 'bg-[#1d8cf8]' : 'bg-zinc-600'
}`}
>
<div
className={`w-5 h-5 rounded-full bg-white transition-transform ${
className={`w-4 h-4 rounded-full bg-white transition-transform ${
notificationsEnabled ? 'translate-x-5' : 'translate-x-0'
}`}
/>
</button>
</div>
{/* Security info capsule */}
<div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
<Shield className="w-4 h-4" />
{/* Security info */}
<div className="p-2.5 bg-[#16171a] border border-white/[0.06] flex items-center justify-between">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
<Shield className="w-3.5 h-3.5" />
</div>
<div>
<span className="text-xs font-medium text-white block">Sicherheit</span>
@@ -493,14 +494,14 @@ export const App: React.FC = () => {
</div>
{/* Auth Switcher Form if switching accounts */}
<form onSubmit={handleAuthSubmit} className="space-y-2.5 mb-4">
<form onSubmit={handleAuthSubmit} className="space-y-2 mb-3">
{authMode === 'register' && (
<input
type="text"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
placeholder="Anzeigename"
className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
className="w-full h-8 px-2.5 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
required
/>
)}
@@ -509,7 +510,7 @@ export const App: React.FC = () => {
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="E-Mail"
className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
className="w-full h-8 px-2.5 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
required
/>
<input
@@ -517,15 +518,15 @@ export const App: React.FC = () => {
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Passwort"
className="w-full h-10 px-4 rounded-xl bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
className="w-full h-8 px-2.5 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:border-[#1d8cf8] focus:outline-none"
required
/>
{authError && <p className="text-xs text-[#ef4444] px-1">{authError}</p>}
{authError && <p className="text-xs text-red-400 px-1">{authError}</p>}
<button
type="submit"
className="w-full h-10 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white font-semibold text-xs transition-colors shadow-sm"
className="w-full h-8 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white font-medium text-xs transition-colors shadow-sm"
>
{authMode === 'login' ? 'Anmelden' : 'Registrieren'}
</button>