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"> <div className="min-h-screen bg-[#16171a] text-white flex flex-col font-sans selection:bg-[#1d8cf8]/30">
{/* Top Header Bar */} {/* Top Header Bar */}
<header className="sticky top-0 z-30 bg-[#16171a]/95 backdrop-blur-md border-b border-white/[0.08]"> <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 */} {/* Logo & Headline */}
<div <div
onClick={() => { onClick={() => {
setActiveTab('triage'); setActiveTab('triage');
handleTriggerAddButton(); 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"> <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center">
<Brain className="w-5 h-5" /> <Brain className="w-4 h-4" />
</div> </div>
<div className="flex flex-col"> <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 MindSift
</span> </span>
<span className="text-[11px] text-zinc-400 mt-0.5 hidden sm:inline-block"> <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); triggerHaptic(10);
setShowProfileModal(true); 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" 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'} {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div> </div>
<span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span> <span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
</button> </button>
</div> </div>
</div> </div>
</header>
{/* Main Container */} {/* Monochrome square tabs attached to header */}
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-5 pb-28"> <nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-white/[0.06]">
{/* Instant Capture Section */} <div className="flex items-stretch">
<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">
<button <button
onClick={() => { onClick={() => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('triage'); 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' activeTab === 'triage'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]' ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'text-zinc-400 hover:text-white hover: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> <span>Triage</span>
{stats.inboxCount > 0 && ( {stats.inboxCount > 0 && (
<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 === 'triage' activeTab === 'triage'
? 'bg-white/[0.14] text-white' ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]' : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`} }`}
> >
@@ -237,19 +226,19 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('tasks'); 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' activeTab === 'tasks'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]' ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'text-zinc-400 hover:text-white hover: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> <span>Aufgaben</span>
{stats.tasksOpenCount > 0 && ( {stats.tasksOpenCount > 0 && (
<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 === 'tasks' activeTab === 'tasks'
? 'bg-white/[0.14] text-white' ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]' : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`} }`}
> >
@@ -263,18 +252,18 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('workspace'); 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' activeTab === 'workspace'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]' ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'text-zinc-400 hover:text-white hover: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>Workspace</span>
<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' activeTab === 'workspace'
? 'bg-white/[0.14] text-white' ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]' : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`} }`}
> >
@@ -287,13 +276,13 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('lists'); 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' activeTab === 'lists'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]' ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'text-zinc-400 hover:text-white hover: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> <span>Geteilte Listen</span>
</button> </button>
@@ -302,17 +291,29 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('ecosystem'); 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' activeTab === 'ecosystem'
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]' ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'text-zinc-400 hover:text-white hover: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> <span>Webhooks & Export</span>
</button> </button>
</div> </div>
</nav> </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 */} {/* Tab View Content */}
<section> <section>
@@ -359,7 +360,7 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('triage'); 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' activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`} }`}
title="Triage Deck" title="Triage Deck"
@@ -374,7 +375,7 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('tasks'); 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' activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`} }`}
title="Aufgaben" title="Aufgaben"
@@ -401,7 +402,7 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('lists'); 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' activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`} }`}
title="Listen" title="Listen"
@@ -416,7 +417,7 @@ export const App: React.FC = () => {
triggerHaptic(10); triggerHaptic(10);
setActiveTab('workspace'); 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' activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`} }`}
title="Workspace" title="Workspace"
@@ -430,9 +431,9 @@ export const App: React.FC = () => {
{/* Profile & Settings Modal styled identically to Template Screen 2 */} {/* Profile & Settings Modal styled identically to Template Screen 2 */}
{showProfileModal && ( {showProfileModal && (
<div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4"> <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 */} {/* 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]"> <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'} {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div> </div>
@@ -452,36 +453,36 @@ export const App: React.FC = () => {
</button> </button>
</div> </div>
{/* Template Screen 2: Capsule Settings Sections */} {/* Settings Sections */}
<div className="space-y-3 mb-6"> <div className="space-y-2 mb-3">
{/* Notification toggle capsule */} {/* Notification toggle */}
<div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between"> <div className="p-2.5 bg-[#16171a] border border-white/[0.06] flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2.5">
<div className="w-8 h-8 rounded-lg bg-[#22c55e]/20 text-[#22c55e] flex items-center justify-center"> <div className="w-7 h-7 bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
<Bell className="w-4 h-4" /> <Bell className="w-3.5 h-3.5" />
</div> </div>
<span className="text-xs font-medium text-white">Benachrichtigungen</span> <span className="text-xs font-medium text-white">Benachrichtigungen</span>
</div> </div>
<button <button
type="button" type="button"
onClick={() => setNotificationsEnabled(!notificationsEnabled)} 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' notificationsEnabled ? 'bg-[#1d8cf8]' : 'bg-zinc-600'
}`} }`}
> >
<div <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' notificationsEnabled ? 'translate-x-5' : 'translate-x-0'
}`} }`}
/> />
</button> </button>
</div> </div>
{/* Security info capsule */} {/* Security info */}
<div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between"> <div className="p-2.5 bg-[#16171a] border border-white/[0.06] flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2.5">
<div className="w-8 h-8 rounded-lg bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center"> <div className="w-7 h-7 bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
<Shield className="w-4 h-4" /> <Shield className="w-3.5 h-3.5" />
</div> </div>
<div> <div>
<span className="text-xs font-medium text-white block">Sicherheit</span> <span className="text-xs font-medium text-white block">Sicherheit</span>
@@ -493,14 +494,14 @@ export const App: React.FC = () => {
</div> </div>
{/* Auth Switcher Form if switching accounts */} {/* 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' && ( {authMode === 'register' && (
<input <input
type="text" type="text"
value={displayName} value={displayName}
onChange={(e) => setDisplayName(e.target.value)} onChange={(e) => setDisplayName(e.target.value)}
placeholder="Anzeigename" 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 required
/> />
)} )}
@@ -509,7 +510,7 @@ export const App: React.FC = () => {
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="E-Mail" 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 required
/> />
<input <input
@@ -517,15 +518,15 @@ export const App: React.FC = () => {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Passwort" 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 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 <button
type="submit" 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'} {authMode === 'login' ? 'Anmelden' : 'Registrieren'}
</button> </button>
frontend/src/features/capture/InstantCaptureBar.tsx
+16 -18
View File
@@ -131,18 +131,18 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
}; };
return ( return (
<div className="w-full max-w-3xl mx-auto"> <div className="w-full">
<form onSubmit={handleSubmit} className="relative"> <form onSubmit={handleSubmit} className="relative">
{/* Capsule Input Bar */} {/* Capture Input Bar */}
<div <div
className={`flex items-center h-14 px-3.5 sm:px-4 rounded-2xl bg-[#222428] border transition-colors duration-150 ${ className={`flex items-center h-11 pl-2 pr-1.5 bg-[#222428] border rounded-full transition-colors duration-150 ${
isListening isListening
? 'border-[#1d8cf8] bg-[#222428]' ? 'border-[#1d8cf8] bg-[#222428]'
: 'border-white/[0.08] focus-within:border-[#1d8cf8]/80' : 'border-white/[0.08] focus-within:border-[#1d8cf8]'
}`} }`}
> >
<div className="w-8 h-8 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center mr-3 flex-shrink-0"> <div className="w-7 h-7 rounded-full bg-[#1d8cf8] text-white flex items-center justify-center mr-2 flex-shrink-0">
<Sparkles className="w-4 h-4" /> <Sparkles className="w-3.5 h-3.5" />
</div> </div>
<input <input
@@ -155,7 +155,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
? 'Ich höre zu…' ? 'Ich höre zu…'
: 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)' : 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
} }
className="w-full bg-transparent text-white placeholder-zinc-500 text-sm sm:text-base focus:outline-none" className="w-full bg-transparent text-white placeholder-zinc-500 text-xs sm:text-sm focus:outline-none"
autoComplete="off" autoComplete="off"
/> />
@@ -165,7 +165,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
type="button" type="button"
onClick={() => setShowOptions((prev) => !prev)} onClick={() => setShowOptions((prev) => !prev)}
title="Priorität & Fälligkeit" title="Priorität & Fälligkeit"
className={`h-8 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${ className={`h-7 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
showOptions || priority !== 'normal' || dueDate showOptions || priority !== 'normal' || dueDate
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40' ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
: 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]' : 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
@@ -182,20 +182,20 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
type="button" type="button"
onClick={toggleVoiceDictation} onClick={toggleVoiceDictation}
title="Spracheingabe" title="Spracheingabe"
className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${ className={`w-7 h-7 rounded-full flex items-center justify-center transition-colors ${
isListening isListening
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]' ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]' : 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
}`} }`}
> >
{isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />} {isListening ? <MicOff className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
</button> </button>
{/* Instant Send Button */} {/* Instant Send Button */}
<button <button
type="submit" type="submit"
disabled={!content.trim() || isSubmitting} disabled={!content.trim() || isSubmitting}
className={`h-9 px-4 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${ className={`h-7 px-3 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
content.trim() content.trim()
? 'bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white cursor-pointer shadow-sm' ? 'bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white cursor-pointer shadow-sm'
: 'bg-[#2b2d33] text-zinc-500 cursor-not-allowed' : 'bg-[#2b2d33] text-zinc-500 cursor-not-allowed'
@@ -216,9 +216,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
</div> </div>
</div> </div>
{/* Expandable Quick Metadata Pills */} {/* Expandable Quick Metadata */}
{showOptions && ( {showOptions && (
<div className="mt-2.5 px-4 py-3 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-2 text-xs"> <div className="mt-1 px-3 py-2 bg-[#1c1e22] border border-white/[0.08] flex flex-wrap items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<span className="text-zinc-400 mr-1">Priorität:</span> <span className="text-zinc-400 mr-1">Priorität:</span>
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => { {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
@@ -234,11 +234,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
key={p} key={p}
type="button" type="button"
onClick={() => setPriority(p)} onClick={() => setPriority(p)}
className={`px-3 py-1 rounded-full transition-colors ${ className={`px-2.5 py-0.5 rounded-full transition-colors text-xs ${
active active
? p === 'urgent' ? 'bg-[#1d8cf8] text-white font-medium'
? 'bg-[#ef4444] text-white font-medium'
: 'bg-[#1d8cf8] text-white font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]' : 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
}`} }`}
> >
@@ -254,7 +252,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
type="date" type="date"
value={dueDate} value={dueDate}
onChange={(e) => setDueDate(e.target.value)} onChange={(e) => setDueDate(e.target.value)}
className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]" className="bg-[#16171a] text-white px-2 py-0.5 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
/> />
</div> </div>
</div> </div>
frontend/src/features/lists/SharedListsView.tsx
+53 -53
View File
@@ -264,18 +264,18 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
const completedItems = activeList?.items.filter((i) => i.isCompleted) || []; const completedItems = activeList?.items.filter((i) => i.isCompleted) || [];
return ( return (
<div className="max-w-4xl mx-auto space-y-6"> <div className="w-full space-y-3">
{/* Top Space Bar & Realtime Indicator */} {/* Top Space Bar & Realtime Indicator */}
<div className="p-4 sm:p-5 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3"> <div className="px-3 py-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-1.5">
{spaces.map((sp) => ( {spaces.map((sp) => (
<button <button
key={sp.id} key={sp.id}
onClick={() => setActiveSpace(sp)} onClick={() => setActiveSpace(sp)}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors ${ className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-colors border ${
activeSpace?.id === sp.id activeSpace?.id === sp.id
? 'bg-[#1d8cf8] text-white shadow-sm' ? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-300 hover:text-white border border-white/[0.06]' : 'bg-[#16171a] text-zinc-300 hover:text-white border-white/[0.08]'
}`} }`}
> >
<span>{sp.icon}</span> <span>{sp.icon}</span>
@@ -285,14 +285,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button <button
onClick={() => setShowNewSpaceModal((prev) => !prev)} onClick={() => setShowNewSpaceModal((prev) => !prev)}
className="h-9 px-3.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<Plus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Space <Plus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Space
</button> </button>
<button <button
onClick={() => setShowJoinModal((prev) => !prev)} onClick={() => setShowJoinModal((prev) => !prev)}
className="h-9 px-3.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<UserPlus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Code einlösen <UserPlus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Code einlösen
</button> </button>
@@ -302,7 +302,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{activeSpace && ( {activeSpace && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div <div
className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 ${ className={`h-8 px-3 text-xs flex items-center gap-1.5 ${
wsConnected wsConnected
? 'bg-[#22c55e]/15 text-[#22c55e] border border-[#22c55e]/30' ? 'bg-[#22c55e]/15 text-[#22c55e] border border-[#22c55e]/30'
: 'bg-[#2b2d33] text-zinc-400 border border-white/[0.06]' : 'bg-[#2b2d33] text-zinc-400 border border-white/[0.06]'
@@ -333,19 +333,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewSpaceModal && ( {showNewSpaceModal && (
<form <form
onSubmit={handleCreateSpace} onSubmit={handleCreateSpace}
className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3" className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
> >
<input <input
type="text" type="text"
value={newSpaceName} value={newSpaceName}
onChange={(e) => setNewSpaceName(e.target.value)} onChange={(e) => setNewSpaceName(e.target.value)}
placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…" placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors" className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
autoFocus autoFocus
/> />
<button <button
type="submit" type="submit"
className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm" className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
> >
Space anlegen Space anlegen
</button> </button>
@@ -355,19 +355,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showJoinModal && ( {showJoinModal && (
<form <form
onSubmit={handleJoinSpace} onSubmit={handleJoinSpace}
className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3" className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
> >
<input <input
type="text" type="text"
value={joinCode} value={joinCode}
onChange={(e) => setJoinCode(e.target.value)} onChange={(e) => setJoinCode(e.target.value)}
placeholder="Invite-Code des Partners eingeben…" placeholder="Invite-Code des Partners eingeben…"
className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] uppercase transition-colors" className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] uppercase transition-colors"
autoFocus autoFocus
/> />
<button <button
type="submit" type="submit"
className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm" className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
> >
Beitreten Beitreten
</button> </button>
@@ -375,7 +375,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
)} )}
{/* List Tabs within Active Space */} {/* List Tabs within Active Space */}
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-1.5">
{lists.map((lst) => { {lists.map((lst) => {
const openCount = lst.items.filter((i) => !i.isCompleted).length; const openCount = lst.items.filter((i) => !i.isCompleted).length;
const isSelected = activeList?.id === lst.id; const isSelected = activeList?.id === lst.id;
@@ -383,15 +383,15 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button <button
key={lst.id} key={lst.id}
onClick={() => setActiveListId(lst.id)} onClick={() => setActiveListId(lst.id)}
className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-all ${ className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-all border ${
isSelected isSelected
? 'bg-[#1d8cf8] text-white shadow-sm' ? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
: 'bg-[#222428] text-zinc-300 hover:text-white border border-white/[0.06]' : 'bg-[#222428] text-zinc-300 hover:text-white border-white/[0.08]'
}`} }`}
> >
<span>{lst.icon}</span> <span>{lst.icon}</span>
<span>{lst.title}</span> <span>{lst.title}</span>
<span className={`px-2 py-0.2 rounded-full text-xs ${ <span className={`px-1.5 py-0.2 text-[10px] font-semibold ${
isSelected ? 'bg-white/20 text-white' : 'bg-[#16171a] text-zinc-400' isSelected ? 'bg-white/20 text-white' : 'bg-[#16171a] text-zinc-400'
}`}> }`}>
{openCount} {openCount}
@@ -402,9 +402,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button <button
onClick={() => setShowNewListModal((prev) => !prev)} onClick={() => setShowNewListModal((prev) => !prev)}
className="h-10 px-4 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.06] text-xs sm:text-sm text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-8 px-3 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<Plus className="w-4 h-4 text-[#1d8cf8]" /> <Plus className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Neue Liste</span> <span>Neue Liste</span>
</button> </button>
</div> </div>
@@ -412,7 +412,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewListModal && ( {showNewListModal && (
<form <form
onSubmit={handleCreateList} onSubmit={handleCreateList}
className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-3" className="p-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-2"
> >
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
{['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => ( {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
@@ -435,12 +435,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newListTitle} value={newListTitle}
onChange={(e) => setNewListTitle(e.target.value)} onChange={(e) => setNewListTitle(e.target.value)}
placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…" placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
className="flex-1 h-10 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors" className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
autoFocus autoFocus
/> />
<button <button
type="submit" type="submit"
className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm" className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
> >
Liste erstellen Liste erstellen
</button> </button>
@@ -449,16 +449,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Active Shared List Card */} {/* Active Shared List Card */}
{activeList ? ( {activeList ? (
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]"> <div className="p-3 bg-[#222428] border border-white/[0.08]">
{/* Quick-Add Pill Form */} {/* Quick-Add Pill Form */}
<form onSubmit={handleAddItem} className="space-y-3 mb-6"> <form onSubmit={handleAddItem} className="space-y-2 mb-3">
<div className="flex flex-col sm:flex-row gap-2.5"> <div className="flex flex-col sm:flex-row gap-2">
<input <input
type="text" type="text"
value={newItemText} value={newItemText}
onChange={(e) => setNewItemText(e.target.value)} onChange={(e) => setNewItemText(e.target.value)}
placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`} placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
className="flex-1 h-11 px-5 rounded-full bg-[#16171a] text-sm sm:text-base text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors" className="flex-1 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/> />
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
@@ -466,12 +466,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemQty} value={newItemQty}
onChange={(e) => setNewItemQty(e.target.value)} onChange={(e) => setNewItemQty(e.target.value)}
placeholder="Menge (z.B. 2x)" placeholder="Menge (z.B. 2x)"
className="w-32 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors" className="w-32 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/> />
<button <button
type="submit" type="submit"
disabled={!newItemText.trim()} disabled={!newItemText.trim()}
className="h-11 px-5 rounded-full bg-[#1d8cf8] disabled:bg-[#2b2d33] text-white disabled:text-zinc-500 font-medium text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm" className="h-10 px-5 rounded-full bg-[#1d8cf8] disabled:bg-[#2b2d33] text-white disabled:text-zinc-500 font-medium text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Hinzufügen</span> <span>Hinzufügen</span>
@@ -487,10 +487,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
key={cat} key={cat}
type="button" type="button"
onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))} onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
className={`px-3 py-1 rounded-full text-xs transition-colors ${ className={`px-2.5 py-0.5 text-xs transition-colors border ${
newItemCategory === cat newItemCategory === cat
? 'bg-[#1d8cf8] text-white font-medium' ? 'bg-[#1d8cf8] text-white border-[#1d8cf8] font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]' : 'bg-[#16171a] text-zinc-400 hover:text-white border-white/[0.08]'
}`} }`}
> >
{cat} {cat}
@@ -500,10 +500,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
</form> </form>
{/* Open Items */} {/* Open Items */}
<div className="space-y-2"> <div className="border border-white/[0.08] divide-y divide-white/[0.06]">
{openItems.length === 0 ? ( {openItems.length === 0 ? (
<div className="py-8 text-center text-zinc-400 text-sm flex flex-col items-center gap-2"> <div className="py-6 text-center text-zinc-400 text-sm flex flex-col items-center gap-1.5">
<Sparkles className="w-5 h-5 text-[#22c55e]" /> <Sparkles className="w-4 h-4 text-[#1d8cf8]" />
<span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span> <span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
</div> </div>
) : ( ) : (
@@ -511,20 +511,20 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div <div
key={item.id} key={item.id}
onClick={() => handleToggleItem(item)} onClick={() => handleToggleItem(item)}
className="p-3.5 sm:p-4 rounded-2xl bg-[#16171a] hover:bg-[#282a2f] border border-white/[0.06] flex items-center justify-between gap-3 cursor-pointer transition-colors group" className="px-3 py-2 bg-[#16171a] hover:bg-[#282a2f] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
> >
<div className="flex items-center gap-3.5 min-w-0"> <div className="flex items-center gap-2.5 min-w-0">
<Circle className="w-5 h-5 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" /> <Circle className="w-4 h-4 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" />
<span className="text-sm sm:text-base font-normal text-white truncate"> <span className="text-sm font-normal text-white truncate">
{item.content} {item.content}
</span> </span>
{item.quantity && ( {item.quantity && (
<span className="px-2.5 py-0.5 rounded-full bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold"> <span className="px-2 py-0.2 bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold">
{item.quantity} {item.quantity}
</span> </span>
)} )}
{item.category && ( {item.category && (
<span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#222428] text-zinc-400 text-xs"> <span className="hidden sm:inline px-2 py-0.2 bg-[#222428] text-zinc-400 text-xs">
{item.category} {item.category}
</span> </span>
)} )}
@@ -536,9 +536,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation(); e.stopPropagation();
handleDeleteItem(item.id); handleDeleteItem(item.id);
}} }}
className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors" className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3 h-3" />
</button> </button>
</div> </div>
)) ))
@@ -547,28 +547,28 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Completed Items Section */} {/* Completed Items Section */}
{completedItems.length > 0 && ( {completedItems.length > 0 && (
<div className="mt-8 pt-6 border-t border-white/[0.06]"> <div className="mt-3 pt-2.5 border-t border-white/[0.06]">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-2">
<span className="text-xs font-medium uppercase tracking-wider text-zinc-400"> <span className="text-xs font-medium uppercase tracking-wider text-zinc-400">
Bereits im Einkaufswagen / Erledigt ({completedItems.length}) Erledigt ({completedItems.length})
</span> </span>
<button <button
onClick={handleClearCompleted} onClick={handleClearCompleted}
className="px-3.5 py-1 rounded-full bg-[#16171a] hover:bg-[#ef4444]/15 border border-white/[0.06] text-xs text-zinc-400 hover:text-[#ef4444] transition-colors" className="px-3 py-0.5 rounded-full bg-[#16171a] hover:bg-white/[0.08] border border-white/[0.06] text-xs text-zinc-400 hover:text-white transition-colors"
> >
Erledigte aufräumen Erledigte aufräumen
</button> </button>
</div> </div>
<div className="space-y-1.5 opacity-75"> <div className="border border-white/[0.06] divide-y divide-white/[0.04] opacity-75">
{completedItems.map((item) => ( {completedItems.map((item) => (
<div <div
key={item.id} key={item.id}
onClick={() => handleToggleItem(item)} onClick={() => handleToggleItem(item)}
className="p-3 rounded-2xl bg-[#16171a]/50 border border-white/[0.04] hover:bg-[#16171a]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors" className="px-3 py-1.5 bg-[#16171a]/50 hover:bg-[#16171a]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
> >
<div className="flex items-center gap-3 min-w-0"> <div className="flex items-center gap-2.5 min-w-0">
<CheckCircle2 className="w-5 h-5 text-[#22c55e] flex-shrink-0" /> <CheckCircle2 className="w-4 h-4 text-[#1d8cf8] flex-shrink-0" />
<span className="text-sm text-zinc-400 line-through truncate"> <span className="text-sm text-zinc-400 line-through truncate">
{item.content} {item.content}
</span> </span>
frontend/src/features/settings/EcosystemView.tsx
+32 -32
View File
@@ -92,15 +92,15 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
const baseUrl = window.location.origin; const baseUrl = window.location.origin;
return ( return (
<div className="max-w-4xl mx-auto space-y-6"> <div className="w-full bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.08]">
{/* Section 1: API Keys for Smarthome & Automation */} {/* Section 1: API Keys for Smarthome & Automation */}
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]"> <div className="p-4">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">
<div className="w-10 h-10 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm"> <div className="w-8 h-8 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
<Key className="w-5 h-5" /> <Key className="w-4 h-4" />
</div> </div>
<div> <div>
<h3 className="text-lg font-bold text-white"> <h3 className="text-base font-bold text-white">
Webhooks & Ingestion API-Schlüssel Webhooks & Ingestion API-Schlüssel
</h3> </h3>
<p className="text-xs sm:text-sm text-zinc-400"> <p className="text-xs sm:text-sm text-zinc-400">
@@ -109,17 +109,17 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
</div> </div>
<form onSubmit={handleCreateKey} className="mt-5 flex flex-col sm:flex-row gap-2.5"> <form onSubmit={handleCreateKey} className="mt-3 flex flex-col sm:flex-row gap-2">
<input <input
type="text" type="text"
value={newKeyName} value={newKeyName}
onChange={(e) => setNewKeyName(e.target.value)} onChange={(e) => setNewKeyName(e.target.value)}
placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…" placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors" className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/> />
<button <button
type="submit" type="submit"
className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm" className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>API-Key erzeugen</span> <span>API-Key erzeugen</span>
@@ -127,9 +127,9 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</form> </form>
{newlyCreatedKey && ( {newlyCreatedKey && (
<div className="mt-4 p-4 rounded-2xl bg-[#22c55e]/15 border border-[#22c55e]/30 flex flex-wrap items-center justify-between gap-3"> <div className="mt-3 p-3 bg-[#1d8cf8]/15 border border-[#1d8cf8]/30 flex flex-wrap items-center justify-between gap-3">
<div className="min-w-0"> <div className="min-w-0">
<p className="text-xs font-semibold text-[#22c55e] mb-1"> <p className="text-xs font-semibold text-[#1d8cf8] mb-1">
Neuer API-Schlüssel erstellt (bitte jetzt kopieren): Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
</p> </p>
<code className="text-xs sm:text-sm font-mono text-white break-all"> <code className="text-xs sm:text-sm font-mono text-white break-all">
@@ -138,7 +138,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
<button <button
onClick={() => handleCopy(newlyCreatedKey)} onClick={() => handleCopy(newlyCreatedKey)}
className="h-9 px-4 rounded-full bg-[#22c55e] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#16a34a] transition-colors shadow-sm" className="h-8 px-3 rounded-full bg-[#1d8cf8] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
> >
{copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />} {copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
<span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span> <span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -147,16 +147,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
)} )}
{/* Active Keys List */} {/* Active Keys List */}
<div className="mt-5 space-y-2"> <div className="mt-3 border border-white/[0.06] divide-y divide-white/[0.06]">
{keys.length === 0 ? ( {keys.length === 0 ? (
<p className="text-xs text-zinc-500 py-2"> <p className="text-xs text-zinc-500 px-3 py-2">
Noch keine dedizierten API-Schlüssel hinterlegt. Noch keine dedizierten API-Schlüssel hinterlegt.
</p> </p>
) : ( ) : (
keys.map((k) => ( keys.map((k) => (
<div <div
key={k.id} key={k.id}
className="p-3.5 rounded-2xl bg-[#16171a] border border-white/[0.06] flex items-center justify-between gap-3" className="px-3 py-1.5 bg-[#16171a] flex items-center justify-between gap-3"
> >
<div> <div>
<span className="text-sm font-medium text-white">{k.name}</span> <span className="text-sm font-medium text-white">{k.name}</span>
@@ -169,7 +169,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
<button <button
onClick={() => handleDeleteKey(k.id)} onClick={() => handleDeleteKey(k.id)}
className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors" className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
@@ -180,13 +180,13 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
{/* Section 2: Interactive Smarthome Webhook Simulator */} {/* Section 2: Interactive Smarthome Webhook Simulator */}
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]"> <div className="p-4">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 rounded-xl bg-[#a855f7] text-white flex items-center justify-center shadow-sm"> <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
<Webhook className="w-5 h-5" /> <Webhook className="w-4 h-4" />
</div> </div>
<div> <div>
<h3 className="text-lg font-bold text-white"> <h3 className="text-base font-bold text-white">
Live Smarthome Webhook-Simulator Live Smarthome Webhook-Simulator
</h3> </h3>
<p className="text-xs sm:text-sm text-zinc-400"> <p className="text-xs sm:text-sm text-zinc-400">
@@ -195,7 +195,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
</div> </div>
<div className="flex flex-wrap gap-2 mb-4"> <div className="flex flex-wrap gap-1.5 mb-3">
{[ {[
{ label: '🧺 Waschmaschine fertig', text: 'Waschmaschine im Keller ist fertig – Wäsche aufhängen!', prio: 'high' as PriorityLevel }, { label: '🧺 Waschmaschine fertig', text: 'Waschmaschine im Keller ist fertig – Wäsche aufhängen!', prio: 'high' as PriorityLevel },
{ label: '🚨 Rauchmelder Batterie', text: 'Rauchmelder Dachgeschoss meldet niedrige Batterie (12%)', prio: 'urgent' as PriorityLevel }, { label: '🚨 Rauchmelder Batterie', text: 'Rauchmelder Dachgeschoss meldet niedrige Batterie (12%)', prio: 'urgent' as PriorityLevel },
@@ -208,24 +208,24 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
setSimTitle(preset.text); setSimTitle(preset.text);
setSimPriority(preset.prio); setSimPriority(preset.prio);
}} }}
className="px-3.5 py-1.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors" className="px-3 py-1 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
> >
{preset.label} {preset.label}
</button> </button>
))} ))}
</div> </div>
<div className="flex flex-col sm:flex-row gap-2.5"> <div className="flex flex-col sm:flex-row gap-2">
<input <input
type="text" type="text"
value={simTitle} value={simTitle}
onChange={(e) => setSimTitle(e.target.value)} onChange={(e) => setSimTitle(e.target.value)}
className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors" className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/> />
<button <button
type="button" type="button"
onClick={handleSimulateWebhook} onClick={handleSimulateWebhook}
className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm" className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
> >
<Zap className="w-4 h-4" /> <Zap className="w-4 h-4" />
<span>Webhook jetzt abfeuern</span> <span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
{simStatus && ( {simStatus && (
<p className="mt-3 text-xs font-medium text-[#22c55e]">{simStatus}</p> <p className="mt-3 text-xs font-medium text-[#1d8cf8]">{simStatus}</p>
)} )}
{/* Code Example Snippets */} {/* Code Example Snippets */}
<div className="mt-6 space-y-3"> <div className="mt-4 space-y-2">
<div className="flex items-center gap-2 text-xs font-medium text-zinc-400"> <div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
<Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" /> <Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>cURL / Home Assistant REST Command:</span> <span>cURL / Home Assistant REST Command:</span>
</div> </div>
<pre className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.06] font-mono text-xs text-[#22c55e] overflow-x-auto"> <pre className="p-3 bg-[#16171a] border border-white/[0.06] font-mono text-xs text-zinc-300 overflow-x-auto">
{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\ {`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
-H "Content-Type: application/json" \\ -H "Content-Type: application/json" \\
-d '{ -d '{
@@ -255,10 +255,10 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
{/* Section 3: Data Sovereignty & Export */} {/* Section 3: Data Sovereignty & Export */}
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div className="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-[#22c55e] text-white flex items-center justify-center flex-shrink-0 shadow-sm"> <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
<ShieldCheck className="w-5 h-5" /> <ShieldCheck className="w-4 h-4" />
</div> </div>
<div> <div>
<h3 className="text-base font-bold text-white"> <h3 className="text-base font-bold text-white">
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
<button <button
onClick={handleFullExport} onClick={handleFullExport}
className="h-11 px-6 rounded-full bg-[#22c55e] hover:bg-[#16a34a] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm" className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
> >
<Download className="w-4 h-4" /> <Download className="w-4 h-4" />
<span>Komplett-Backup (.json)</span> <span>Komplett-Backup (.json)</span>
frontend/src/features/triage/TasksView.tsx
+106 -131
View File
@@ -92,27 +92,27 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
const doneTasks = tasks.filter((t) => t.isCompleted); const doneTasks = tasks.filter((t) => t.isCompleted);
return ( return (
<div className="max-w-3xl mx-auto space-y-4"> <div className="w-full space-y-2">
{/* Filter Pills */} {/* Filter Tabs */}
<div className="flex flex-wrap items-center justify-between gap-3 mb-2"> <div className="flex flex-wrap items-center justify-between gap-2 mb-1">
<div className="flex items-center gap-1.5"> <div className="flex items-center border border-white/[0.08] bg-[#16171a]">
<button <button
onClick={() => setFilter('open')} onClick={() => setFilter('open')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${ className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
filter === 'open' filter === 'open'
? 'bg-[#1d8cf8] text-white shadow-sm' ? 'bg-[#222428] text-white'
: 'text-zinc-400 hover:text-white hover:bg-[#222428]' : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`} }`}
> >
Alle Offenen ({openTasks.length}) Offen ({openTasks.length})
</button> </button>
<button <button
onClick={() => setFilter('done')} onClick={() => setFilter('done')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${ className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
filter === 'done' filter === 'done'
? 'bg-[#1d8cf8] text-white shadow-sm' ? 'bg-[#222428] text-white'
: 'text-zinc-400 hover:text-white hover:bg-[#222428]' : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`} }`}
> >
Erledigt ({doneTasks.length}) Erledigt ({doneTasks.length})
@@ -120,20 +120,20 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<button <button
onClick={() => setFilter('discarded')} onClick={() => setFilter('discarded')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${ className={`h-8 px-3.5 text-xs font-medium transition-colors ${
filter === 'discarded' filter === 'discarded'
? 'bg-[#1d8cf8] text-white shadow-sm' ? 'bg-[#222428] text-white'
: 'text-zinc-400 hover:text-white hover:bg-[#222428]' : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`} }`}
> >
Verworfen ({discarded.length}) Papierkorb ({discarded.length})
</button> </button>
</div> </div>
{filter === 'discarded' && discarded.length > 0 && ( {filter === 'discarded' && discarded.length > 0 && (
<button <button
onClick={handlePurgeAllDiscarded} onClick={handlePurgeAllDiscarded}
className="h-8 px-3.5 rounded-full bg-[#ef4444]/15 hover:bg-[#ef4444]/25 text-[#ef4444] text-xs font-medium flex items-center gap-1.5 transition-colors" className="h-7 px-3 rounded-full bg-white/[0.06] hover:bg-white/[0.12] text-zinc-300 hover:text-white text-xs font-medium flex items-center gap-1.5 transition-colors"
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
Papierkorb leeren Papierkorb leeren
@@ -142,37 +142,35 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
</div> </div>
{loading ? ( {loading ? (
<div className="p-8 text-center text-zinc-500 text-sm">Lade Aufgaben…</div> <div className="p-6 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
) : filter === 'discarded' ? ( ) : filter === 'discarded' ? (
<div className="space-y-2.5"> <div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
{discarded.length === 0 ? ( {discarded.length === 0 ? (
<div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm"> <div className="px-4 py-6 text-center text-zinc-400 text-sm">
Keine verworfenen Gedanken im Papierkorb. Keine verworfenen Gedanken im Papierkorb.
</div> </div>
) : ( ) : (
discarded.map((item) => ( discarded.map((item) => (
<div <div
key={item.id} key={item.id}
className="p-3.5 sm:p-4 rounded-2xl bg-[#222428] border border-white/[0.06] flex items-center justify-between gap-4" className="px-3 py-2 flex items-center justify-between gap-3 hover:bg-white/[0.02]"
> >
<div className="flex items-center gap-3 min-w-0 flex-1"> <div className="flex items-center gap-2.5 min-w-0 flex-1">
<div className="w-9 h-9 rounded-xl bg-zinc-700 text-zinc-300 flex items-center justify-center flex-shrink-0"> <Trash2 className="w-4 h-4 text-zinc-500 flex-shrink-0" />
<Trash2 className="w-4 h-4" />
</div>
<p className="text-sm text-zinc-400 line-through truncate">{item.content}</p> <p className="text-sm text-zinc-400 line-through truncate">{item.content}</p>
</div> </div>
<div className="flex items-center gap-2 flex-shrink-0"> <div className="flex items-center gap-2 flex-shrink-0">
<button <button
onClick={() => handleRestore(item)} onClick={() => handleRestore(item)}
className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors" className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
> >
<RotateCcw className="w-3.5 h-3.5" /> Zurück <RotateCcw className="w-3 h-3" /> Zurück
</button> </button>
<button <button
onClick={() => handleDeletePermanent(item.id)} onClick={() => handleDeletePermanent(item.id)}
className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors" className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3 h-3" />
</button> </button>
</div> </div>
</div> </div>
@@ -180,121 +178,98 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
)} )}
</div> </div>
) : ( ) : (
<div className="space-y-2.5"> <div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
{(filter === 'open' ? openTasks : doneTasks).length === 0 ? ( {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
<div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm"> <div className="px-4 py-6 text-center text-zinc-400 text-sm">
{filter === 'open' {filter === 'open'
? 'Keine offenen Aufgaben vorhanden.' ? 'Keine offenen Aufgaben vorhanden.'
: 'Noch keine erledigten Aufgaben.'} : 'Noch keine erledigten Aufgaben.'}
</div> </div>
) : ( ) : (
(filter === 'open' ? openTasks : doneTasks).map((task, idx) => { (filter === 'open' ? openTasks : doneTasks).map((task) => (
// Alternate squircle colors matching template: blue, green, purple, orange, violet <div
const squircleColors = [ key={task.id}
'bg-[#1d8cf8]', // electric blue className={`px-3 py-2 flex flex-col sm:flex-row sm:items-center justify-between gap-2 transition-colors hover:bg-white/[0.02] ${
'bg-[#22c55e]', // vibrant green task.isCompleted ? 'opacity-65' : ''
'bg-[#a855f7]', // purple }`}
'bg-[#f97316]', // orange >
'bg-[#8b5cf6]', // violet <div className="flex items-center gap-3 min-w-0 flex-1">
]; {/* Square minimalist checkbox */}
const squircleBg = task.priority === 'urgent' <button
? 'bg-[#ef4444]' onClick={() => handleToggleDone(task)}
: task.isCompleted className={`w-4 h-4 flex items-center justify-center flex-shrink-0 transition-colors border ${
? 'bg-[#a855f7]' task.isCompleted
: squircleColors[idx % squircleColors.length]; ? 'bg-[#1d8cf8] border-[#1d8cf8] text-white'
: 'border-zinc-500 hover:border-[#1d8cf8] text-transparent'
}`}
title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
>
<Check className="w-3 h-3 stroke-[3]" />
</button>
// In template: active/top items have a thin bright green outline <div className="min-w-0 flex-1">
const isHighlightGreen = !task.isCompleted && idx < 3; <p
className={`text-sm break-words leading-tight ${
return ( task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
<div }`}
key={task.id}
className={`p-3.5 sm:p-4 rounded-2xl bg-[#222428] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors ${
isHighlightGreen
? 'border border-[#22c55e]/80 shadow-[0_0_12px_-4px_rgba(34,197,94,0.3)]'
: 'border border-white/[0.06]'
} ${task.isCompleted ? 'opacity-75' : ''}`}
>
<div className="flex items-center gap-3.5 min-w-0 flex-1">
{/* Template Squircle Icon */}
<button
onClick={() => handleToggleDone(task)}
className={`w-10 h-10 rounded-xl ${squircleBg} text-white flex items-center justify-center flex-shrink-0 shadow-sm transition-transform active:scale-95`}
title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
> >
{task.isCompleted ? ( {task.content}
<Check className="w-5 h-5 stroke-[2.5]" /> </p>
) : task.priority === 'urgent' ? (
<AlertCircle className="w-5 h-5" /> <div className="flex flex-wrap items-center gap-1.5 mt-0.5 empty:hidden">
) : ( {task.priority === 'urgent' && (
<CheckCircle2 className="w-5 h-5" /> <span className="px-1.5 py-0.2 border border-[#1d8cf8] text-[#1d8cf8] text-[10px] font-semibold">
Dringend
</span>
)} )}
</button> {task.priority === 'high' && (
<span className="px-1.5 py-0.2 border border-white/20 text-zinc-300 text-[10px] font-medium">
<div className="min-w-0 flex-1"> Wichtig
<p </span>
className={`text-sm sm:text-base font-medium break-words leading-snug ${ )}
task.isCompleted ? 'line-through text-zinc-500' : 'text-white' {task.tags?.map((tag) => (
}`} <span
> key={tag}
{task.content} className="px-1.5 py-0.2 bg-[#16171a] text-zinc-400 text-[10px]"
</p> >
#{tag}
<div className="flex flex-wrap items-center gap-2 mt-1"> </span>
{task.priority === 'urgent' && ( ))}
<span className="px-2 py-0.5 rounded-full bg-[#ef4444]/20 text-[#ef4444] text-[11px] font-semibold">
Dringend
</span>
)}
{task.priority === 'high' && (
<span className="px-2 py-0.5 rounded-full bg-[#f97316]/20 text-[#f97316] text-[11px] font-semibold">
Wichtig
</span>
)}
{task.tags?.map((tag) => (
<span
key={tag}
className="px-2 py-0.5 rounded-full bg-[#16171a] text-zinc-400 text-[11px] flex items-center gap-1"
>
#{tag}
</span>
))}
</div>
</div> </div>
</div> </div>
{/* Action Controls */}
<div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
<div className="relative flex items-center">
<Calendar className="w-3.5 h-3.5 text-zinc-400 absolute left-3 pointer-events-none" />
<input
type="date"
value={task.dueDate || ''}
onChange={(e) => handleDueDateChange(task, e.target.value)}
className="pl-8 pr-3 py-1 rounded-full bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/>
</div>
<button
onClick={() => handleConvertToDoc(task)}
title="Als Notiz / Projekt vertiefen"
className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
>
<FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span className="hidden md:inline">Vertiefen</span>
</button>
<button
onClick={() => handleDeletePermanent(task.id)}
title="Löschen"
className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
</div>
</div> </div>
);
}) {/* Action Controls */}
<div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
<div className="relative flex items-center">
<Calendar className="w-3 h-3 text-zinc-400 absolute left-2 pointer-events-none" />
<input
type="date"
value={task.dueDate || ''}
onChange={(e) => handleDueDateChange(task, e.target.value)}
className="h-7 pl-6 pr-2 bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/>
</div>
<button
onClick={() => handleConvertToDoc(task)}
title="Als Notiz / Projekt vertiefen"
className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
>
<FileText className="w-3 h-3 text-[#1d8cf8]" />
<span className="hidden md:inline">Vertiefen</span>
</button>
<button
onClick={() => handleDeletePermanent(task.id)}
title="Löschen"
className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
>
<Trash2 className="w-3 h-3" />
</button>
</div>
</div>
))
)} )}
</div> </div>
)} )}
frontend/src/features/triage/TriageDeck.tsx
+28 -28
View File
@@ -134,19 +134,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
switch (priority) { switch (priority) {
case 'urgent': case 'urgent':
return ( return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#ef4444] text-white"> <span className="px-2 py-0.2 text-xs font-semibold border border-[#1d8cf8] text-[#1d8cf8]">
Dringend Dringend
</span> </span>
); );
case 'high': case 'high':
return ( return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#f97316] text-white"> <span className="px-2 py-0.2 text-xs font-medium border border-white/20 text-zinc-300">
Wichtig Wichtig
</span> </span>
); );
default: default:
return ( return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#2b2d33] text-zinc-400"> <span className="px-2 py-0.2 text-xs font-medium bg-[#2b2d33] text-zinc-400">
Gedanke Gedanke
</span> </span>
); );
@@ -156,15 +156,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
const sourceBadge = (source: string) => { const sourceBadge = (source: string) => {
if (source === 'voice') { if (source === 'voice') {
return ( return (
<span className="px-2.5 py-0.5 rounded-full text-xs bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1"> <span className="px-2 py-0.2 text-xs bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1">
<Mic className="w-3 h-3" /> Diktat <Mic className="w-3 h-3" /> Diktat
</span> </span>
); );
} }
if (source === 'webhook') { if (source === 'webhook') {
return ( return (
<span className="px-2.5 py-0.5 rounded-full text-xs bg-[#16171a] text-[#22c55e] border border-white/[0.06] flex items-center gap-1"> <span className="px-2 py-0.2 text-xs bg-[#16171a] text-zinc-300 border border-white/[0.06] flex items-center gap-1">
<Webhook className="w-3 h-3" /> Webhook <Webhook className="w-3 h-3 text-[#1d8cf8]" /> Webhook
</span> </span>
); );
} }
@@ -173,12 +173,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
if (!activeCard) { if (!activeCard) {
return ( return (
<div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#222428] border border-white/[0.08] text-center shadow-card"> <div className="max-w-xl mx-auto mt-2 p-6 bg-[#222428] border border-white/[0.08] text-center">
<div className="w-12 h-12 rounded-2xl bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm"> <div className="w-12 h-12 bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm">
<Sparkles className="w-6 h-6" /> <Sparkles className="w-6 h-6" />
</div> </div>
<h2 className="text-xl font-bold text-white mb-1.5">Inbox Zero</h2> <h2 className="text-xl font-bold text-white mb-1.5">Inbox Zero</h2>
<p className="text-zinc-400 text-sm max-w-sm mx-auto mb-6"> <p className="text-zinc-400 text-sm max-w-sm mx-auto mb-4">
Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei. Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
</p> </p>
@@ -235,7 +235,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{nextCard && ( {nextCard && (
<div <div
key={nextCard.id + '-preview'} key={nextCard.id + '-preview'}
className="absolute inset-x-3 top-4 bottom-0 rounded-3xl bg-[#222428]/60 border border-white/[0.06] p-6 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between" className="absolute inset-x-3 top-4 bottom-0 bg-[#222428]/60 border border-white/[0.06] p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
> >
<div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div> <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
<p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p> <p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
@@ -262,19 +262,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
initial={{ scale: 0.96, opacity: 0, y: 12 }} initial={{ scale: 0.96, opacity: 0, y: 12 }}
animate={{ scale: 1, opacity: 1, y: 0 }} animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.92, opacity: 0 }} exit={{ scale: 0.92, opacity: 0 }}
className="relative w-full h-full rounded-3xl bg-[#222428] border p-6 sm:p-7 shadow-card cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden" className="relative w-full h-full bg-[#222428] border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
> >
{/* Dynamic Swipe Overlays */} {/* Dynamic Swipe Overlays */}
<motion.div <motion.div
style={{ opacity: keepOpacity }} style={{ opacity: keepOpacity }}
className="pointer-events-none absolute top-5 right-5 px-3 py-1 rounded-full bg-[#22c55e]/20 border border-[#22c55e] text-[#22c55e] font-semibold text-xs tracking-wide uppercase" className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8] font-semibold text-xs tracking-wide uppercase"
> >
Behalten 👉 Behalten 👉
</motion.div> </motion.div>
<motion.div <motion.div
style={{ opacity: discardOpacity }} style={{ opacity: discardOpacity }}
className="pointer-events-none absolute top-5 left-5 px-3 py-1 rounded-full bg-[#ef4444]/20 border border-[#ef4444] text-[#ef4444] font-semibold text-xs tracking-wide uppercase" className="pointer-events-none absolute top-4 left-4 px-2.5 py-1 bg-white/10 border border-white/30 text-zinc-300 font-semibold text-xs tracking-wide uppercase"
> >
👈 Weg damit 👈 Weg damit
</motion.div> </motion.div>
@@ -310,7 +310,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
activeCard.tags.map((tag) => ( activeCard.tags.map((tag) => (
<span <span
key={tag} key={tag}
className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] text-xs flex items-center gap-1 font-medium" className="px-2.5 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] text-xs flex items-center gap-1 font-medium"
> >
<Tag className="w-2.5 h-2.5" />#{tag} <Tag className="w-2.5 h-2.5" />#{tag}
</span> </span>
@@ -321,7 +321,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div> </div>
{activeCard.dueDate && ( {activeCard.dueDate && (
<span className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs"> <span className="px-2.5 py-0.5 bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
📅 {activeCard.dueDate} 📅 {activeCard.dueDate}
</span> </span>
)} )}
@@ -332,7 +332,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Task Date Picker Popover */} {/* Convert to Task Date Picker Popover */}
{showDateModal && ( {showDateModal && (
<div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3"> <div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-2 text-xs text-zinc-300"> <div className="flex items-center gap-2 text-xs text-zinc-300">
<Calendar className="w-4 h-4 text-[#1d8cf8]" /> <Calendar className="w-4 h-4 text-[#1d8cf8]" />
<span>Fälligkeitsdatum für Aufgabe:</span> <span>Fälligkeitsdatum für Aufgabe:</span>
@@ -342,7 +342,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
type="date" type="date"
value={taskDueDate} value={taskDueDate}
onChange={(e) => setTaskDueDate(e.target.value)} onChange={(e) => setTaskDueDate(e.target.value)}
className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]" className="bg-[#16171a] text-white px-3 py-1 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
/> />
<button <button
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })} onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
@@ -356,7 +356,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Shopping List Item Popover */} {/* Convert to Shopping List Item Popover */}
{showListSelector && ( {showListSelector && (
<div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08]"> <div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08]">
<p className="text-xs text-zinc-400 mb-2"> <p className="text-xs text-zinc-400 mb-2">
In welche Liste verschieben? In welche Liste verschieben?
</p> </p>
@@ -382,12 +382,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
)} )}
{/* Primary Triage Action Pills */} {/* Primary Triage Action Pills */}
<div className="mt-5 flex flex-wrap items-center justify-center gap-2 sm:gap-2.5"> <div className="mt-3 flex flex-wrap items-center justify-center gap-2">
{/* Swipe Left: Discard */} {/* Swipe Left: Discard */}
<button <button
onClick={() => handleAction('discard')} onClick={() => handleAction('discard')}
title="Verwerfen (Taste H oder Pfeil links)" title="Verwerfen (Taste H oder Pfeil links)"
className="h-10 px-4 rounded-full border border-[#ef4444]/40 text-[#ef4444] hover:bg-[#ef4444]/15 font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95" className="h-9 px-3.5 rounded-full border border-white/20 text-zinc-300 hover:text-white hover:bg-white/[0.06] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
> >
<X className="w-4 h-4" /> <X className="w-4 h-4" />
<span>Weg damit</span> <span>Weg damit</span>
@@ -400,10 +400,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowDateModal((prev) => !prev); setShowDateModal((prev) => !prev);
}} }}
title="Als Aufgabe mit Datum (Taste T)" title="Als Aufgabe mit Datum (Taste T)"
className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${ className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
showDateModal showDateModal
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium' ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
: 'bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border-white/[0.06]' : 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
}`} }`}
> >
<Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" /> <Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" />
@@ -414,7 +414,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<button <button
onClick={() => handleAction('keep', { convertTo: 'document' })} onClick={() => handleAction('keep', { convertTo: 'document' })}
title="In Notiz / Projekt umwandeln (Taste D)" title="In Notiz / Projekt umwandeln (Taste D)"
className="h-10 px-3.5 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-zinc-300 hover:text-white text-xs sm:text-sm flex items-center gap-1.5 transition-colors" className="h-9 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-zinc-300 hover:text-white text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
> >
<FileText className="w-3.5 h-3.5 text-[#1d8cf8]" /> <FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Als Notiz</span> <span>Als Notiz</span>
@@ -427,13 +427,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowListSelector((prev) => !prev); setShowListSelector((prev) => !prev);
}} }}
title="Auf eine geteilte Liste setzen" title="Auf eine geteilte Liste setzen"
className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${ className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
showListSelector showListSelector
? 'bg-[#22c55e]/20 text-[#22c55e] border-[#22c55e]/40 font-medium' ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
: 'bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border-white/[0.06]' : 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
}`} }`}
> >
<ShoppingCart className="w-3.5 h-3.5 text-[#22c55e]" /> <ShoppingCart className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Auf Liste</span> <span>Auf Liste</span>
</button> </button>
@@ -441,7 +441,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<button <button
onClick={() => handleAction('keep')} onClick={() => handleAction('keep')}
title="Behalten & sichern (Taste L oder Pfeil rechts)" title="Behalten & sichern (Taste L oder Pfeil rechts)"
className="h-10 px-5 rounded-full bg-[#22c55e] hover:bg-[#16a34a] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 shadow-sm transition-colors active:scale-95" className="h-9 px-4 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 shadow-sm transition-colors active:scale-95"
> >
<Check className="w-4 h-4" /> <Check className="w-4 h-4" />
<span>Behalten</span> <span>Behalten</span>
frontend/src/features/workspace/WorkspaceView.tsx
+36 -36
View File
@@ -204,10 +204,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
); );
return ( return (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-6xl mx-auto"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
{/* Left Document List Sidebar */} {/* Left Document List Sidebar */}
<div className="lg:col-span-4 space-y-3"> <div className="lg:col-span-4 bg-[#222428] border border-white/[0.08] flex flex-col self-start">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 p-2 border-b border-white/[0.06]">
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="w-4 h-4 text-zinc-400 absolute left-3.5 top-1/2 -translate-y-1/2" /> <Search className="w-4 h-4 text-zinc-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
<input <input
@@ -215,34 +215,34 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Notizen durchsuchen…" placeholder="Notizen durchsuchen…"
className="w-full h-11 pl-9 pr-4 rounded-2xl bg-[#222428] text-xs sm:text-sm text-white placeholder-zinc-500 border border-white/[0.06] focus:outline-none focus:border-[#1d8cf8] transition-colors" className="w-full h-9 pl-9 pr-3 bg-[#16171a] text-xs sm:text-sm text-white placeholder-zinc-500 border border-white/[0.06] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/> />
</div> </div>
<button <button
onClick={handleCreateDoc} onClick={handleCreateDoc}
className="h-11 px-4 rounded-full bg-[#1d8cf8] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors flex-shrink-0 shadow-sm" className="h-9 px-4 rounded-full bg-[#1d8cf8] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors flex-shrink-0"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Neu</span> <span>Neu</span>
</button> </button>
</div> </div>
<div className="space-y-2 max-h-[540px] overflow-y-auto pr-1"> <div className="divide-y divide-white/[0.06] max-h-[calc(100vh-240px)] overflow-y-auto">
{filteredDocs.map((doc) => { {filteredDocs.map((doc) => {
const active = selectedDoc?.id === doc.id; const active = selectedDoc?.id === doc.id;
return ( return (
<button <button
key={doc.id} key={doc.id}
onClick={() => setSelectedDoc(doc)} onClick={() => setSelectedDoc(doc)}
className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-all flex items-start justify-between gap-3 ${ className={`w-full text-left pl-2.5 pr-3 py-2 transition-colors flex items-start justify-between gap-3 border-l-2 ${
active active
? 'bg-[#282a2f] border border-[#1d8cf8]/70 shadow-sm' ? 'bg-[#282a2f] border-l-[#1d8cf8]'
: 'bg-[#222428] hover:bg-[#282a2f] border border-white/[0.06]' : 'border-l-transparent hover:bg-[#282a2f]'
}`} }`}
> >
<div className="flex items-start gap-3 min-w-0"> <div className="flex items-start gap-2.5 min-w-0">
<span className="text-2xl flex-shrink-0">{doc.icon}</span> <span className="text-lg leading-6 flex-shrink-0">{doc.icon}</span>
<div className="min-w-0"> <div className="min-w-0">
<h4 className="font-medium text-sm text-white truncate">{doc.title}</h4> <h4 className="font-medium text-sm text-white truncate">{doc.title}</h4>
<p className="text-xs text-zinc-400 truncate mt-0.5"> <p className="text-xs text-zinc-400 truncate mt-0.5">
@@ -260,13 +260,13 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Right Block Editor */} {/* Right Block Editor */}
<div className="lg:col-span-8"> <div className="lg:col-span-8">
{selectedDoc ? ( {selectedDoc ? (
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]"> <div className="p-4 bg-[#222428] border border-white/[0.08]">
{/* Document Top Action Bar */} {/* Document Top Action Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-6 border-b border-white/[0.06]"> <div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 border-b border-white/[0.06]">
<div className="flex items-center gap-2 text-xs text-zinc-400"> <div className="flex items-center gap-2 text-xs text-zinc-400">
<span className="px-3 py-1 rounded-full bg-[#16171a] text-[#22c55e] border border-white/[0.06] flex items-center gap-1 font-medium"> <span className="px-2 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1 font-medium">
<Check className="w-3 h-3" /> <Check className="w-3 h-3" />
{saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'} {saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
</span> </span>
<span>• {selectedDoc.blocks.length} Blöcke</span> <span>• {selectedDoc.blocks.length} Blöcke</span>
</div> </div>
@@ -304,18 +304,18 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
</div> </div>
{/* Document Icon & Title */} {/* Document Icon & Title */}
<div className="flex items-center gap-3 mb-6 relative"> <div className="flex items-center gap-3 mb-4 relative">
<button <button
type="button" type="button"
onClick={() => setShowIconPicker((prev) => !prev)} onClick={() => setShowIconPicker((prev) => !prev)}
className="w-12 h-12 rounded-2xl bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors" className="w-12 h-12 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
title="Icon ändern" title="Icon ändern"
> >
{selectedDoc.icon} {selectedDoc.icon}
</button> </button>
{showIconPicker && ( {showIconPicker && (
<div className="absolute top-14 left-0 z-20 p-2.5 rounded-2xl bg-[#222428] border border-white/[0.12] shadow-card flex flex-wrap gap-1.5 w-64"> <div className="absolute top-14 left-0 z-20 p-2.5 bg-[#222428] border border-white/[0.12] flex flex-wrap gap-1 w-64">
{ICONS.map((ic) => ( {ICONS.map((ic) => (
<button <button
key={ic} key={ic}
@@ -383,7 +383,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
type="checkbox" type="checkbox"
checked={!!block.checked} checked={!!block.checked}
onChange={(e) => updateBlock(block.id, { checked: e.target.checked })} onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
className="w-4 h-4 rounded accent-[#22c55e] cursor-pointer" className="w-4 h-4 accent-[#1d8cf8] cursor-pointer"
/> />
<input <input
type="text" type="text"
@@ -399,7 +399,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{block.type === 'bullet' && ( {block.type === 'bullet' && (
<div className="flex items-center gap-3 py-0.5"> <div className="flex items-center gap-3 py-0.5">
<span className="w-1.5 h-1.5 rounded-full bg-[#1d8cf8] flex-shrink-0" /> <span className="w-1.5 h-1.5 bg-[#1d8cf8] flex-shrink-0" />
<input <input
type="text" type="text"
value={block.content} value={block.content}
@@ -411,8 +411,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)} )}
{block.type === 'callout' && ( {block.type === 'callout' && (
<div className="p-4 rounded-2xl bg-[#16171a] border border-[#1d8cf8]/30 flex items-start gap-3"> <div className="p-3 bg-[#16171a] border border-[#1d8cf8]/40 flex items-start gap-2.5">
<Sparkles className="w-4 h-4 text-[#1d8cf8] flex-shrink-0 mt-1" /> <Sparkles className="w-4 h-4 text-[#1d8cf8] flex-shrink-0 mt-0.5" />
<textarea <textarea
rows={2} rows={2}
value={block.content} value={block.content}
@@ -424,7 +424,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)} )}
{block.type === 'code' && ( {block.type === 'code' && (
<div className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#22c55e]"> <div className="p-3 bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-zinc-200">
<textarea <textarea
rows={Math.max(2, block.content.split('\n').length)} rows={Math.max(2, block.content.split('\n').length)}
value={block.content} value={block.content}
@@ -467,14 +467,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
))} ))}
</div> </div>
{/* Add Block Pill Toolbar */} {/* Add Block Toolbar */}
<div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2"> <div className="mt-4 pt-3 border-t border-white/[0.06] flex flex-wrap items-center gap-1.5">
<span className="text-xs text-zinc-400 mr-1">+ Block einfügen:</span> <span className="text-xs text-zinc-400 mr-1">+ Block einfügen:</span>
<button <button
type="button" type="button"
onClick={() => addBlock('paragraph')} onClick={() => addBlock('paragraph')}
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<AlignLeft className="w-3.5 h-3.5 text-[#1d8cf8]" /> Text <AlignLeft className="w-3.5 h-3.5 text-[#1d8cf8]" /> Text
</button> </button>
@@ -482,7 +482,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button <button
type="button" type="button"
onClick={() => addBlock('h2')} onClick={() => addBlock('h2')}
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<Heading2 className="w-3.5 h-3.5 text-[#1d8cf8]" /> Überschrift <Heading2 className="w-3.5 h-3.5 text-[#1d8cf8]" /> Überschrift
</button> </button>
@@ -490,15 +490,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button <button
type="button" type="button"
onClick={() => addBlock('todo')} onClick={() => addBlock('todo')}
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<CheckSquare className="w-3.5 h-3.5 text-[#22c55e]" /> Checkliste <CheckSquare className="w-3.5 h-3.5 text-[#1d8cf8]" /> Checkliste
</button> </button>
<button <button
type="button" type="button"
onClick={() => addBlock('bullet')} onClick={() => addBlock('bullet')}
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<List className="w-3.5 h-3.5 text-[#1d8cf8]" /> Aufzählung <List className="w-3.5 h-3.5 text-[#1d8cf8]" /> Aufzählung
</button> </button>
@@ -506,30 +506,30 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button <button
type="button" type="button"
onClick={() => addBlock('callout')} onClick={() => addBlock('callout')}
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<Sparkles className="w-3.5 h-3.5 text-[#a855f7]" /> Callout <Sparkles className="w-3.5 h-3.5 text-[#1d8cf8]" /> Callout
</button> </button>
<button <button
type="button" type="button"
onClick={() => addBlock('code')} onClick={() => addBlock('code')}
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<Code className="w-3.5 h-3.5 text-[#22c55e]" /> Codeblock <Code className="w-3.5 h-3.5 text-[#1d8cf8]" /> Codeblock
</button> </button>
<button <button
type="button" type="button"
onClick={() => addBlock('h1')} onClick={() => addBlock('h1')}
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors" className="h-7 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
> >
<Heading1 className="w-3.5 h-3.5 text-[#1d8cf8]" /> H1 <Heading1 className="w-3.5 h-3.5 text-[#1d8cf8]" /> H1
</button> </button>
</div> </div>
</div> </div>
) : ( ) : (
<div className="p-12 rounded-3xl bg-[#222428] border border-white/[0.08] text-center text-zinc-400"> <div className="p-8 bg-[#222428] border border-white/[0.08] text-center text-zinc-400">
Wähle links ein Dokument aus oder erstelle ein neues Projekt. Wähle links ein Dokument aus oder erstelle ein neues Projekt.
</div> </div>
)} )}