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

style: align UI with mobile productivity template and remove Google/Gemini references
MindSift CI & Docker Release / Lint, Build & Unit Tests (push) Failing after 2m16s
Details
MindSift CI & Docker Release / Build & Push Docker Image (push) Skipped
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 18:59:00 +02:00
1 parent 31aa43c460
commit c99b6c3a49
11 files changed
+698 -495
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/App.tsx
+275 -116
View File
@@ -8,9 +8,14 @@ import {
Brain,
LogOut,
User as UserIcon,
Plus,
Bell,
Shield,
ChevronRight,
Sparkles,
} from 'lucide-react';
import { DashboardStats, SharedList, Thought, User } from './lib/types';
import { api, clearToken, getToken } from './lib/api';
import { api, clearToken, getToken, triggerHaptic } from './lib/api';
import { InstantCaptureBar } from './features/capture/InstantCaptureBar';
import { TriageDeck } from './features/triage/TriageDeck';
import { TasksView } from './features/triage/TasksView';
@@ -36,13 +41,14 @@ export const App: React.FC = () => {
const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
const [captureFocusCount, setCaptureFocusCount] = useState(0);
// Auth Modal State for switching or registering additional family members
const [showAuthModal, setShowAuthModal] = useState(false);
// Profile & Auth Modal State (aligned with Template Screen 2)
const [showProfileModal, setShowProfileModal] = useState(false);
const [authMode, setAuthMode] = useState<'login' | 'register'>('login');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [displayName, setDisplayName] = useState('');
const [authError, setAuthError] = useState('');
const [notificationsEnabled, setNotificationsEnabled] = useState(true);
const refreshAll = async () => {
try {
@@ -107,16 +113,24 @@ export const App: React.FC = () => {
setActiveTab('workspace');
};
const handleTriggerAddButton = () => {
triggerHaptic(20);
// Scroll smoothly to top and focus capture bar
window.scrollTo({ top: 0, behavior: 'smooth' });
setCaptureFocusCount((c) => c + 1);
};
const handleAuthSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setAuthError('');
triggerHaptic(15);
try {
if (authMode === 'login') {
await api.login(email, password);
} else {
await api.register(email, password, displayName);
}
setShowAuthModal(false);
setShowProfileModal(false);
setEmail('');
setPassword('');
setDisplayName('');
@@ -126,49 +140,62 @@ export const App: React.FC = () => {
}
};
const handleLogout = async () => {
triggerHaptic(20);
clearToken();
await api.quickStart();
await refreshAll();
setShowProfileModal(false);
};
return (
<div className="min-h-screen bg-[#131314] text-[#e3e3e3] flex flex-col font-sans">
{/* Header Bar */}
<header className="sticky top-0 z-30 bg-[#131314]/95 backdrop-blur-md border-b border-white/[0.08]">
<div className="min-h-screen bg-[#16171a] text-white flex flex-col font-sans selection:bg-[#1d8cf8]/30">
{/* Top Header Bar */}
<header className="sticky top-0 z-30 bg-[#16171a]/95 backdrop-blur-md border-b border-white/[0.08]">
<div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
{/* Brand Logo */}
{/* Logo & Headline */}
<div
onClick={() => {
setActiveTab('triage');
setCaptureFocusCount((c) => c + 1);
handleTriggerAddButton();
}}
className="flex items-center gap-2.5 cursor-pointer group select-none"
className="flex items-center gap-3 cursor-pointer group select-none"
>
<div className="w-8 h-8 rounded-full bg-[#1e1f20] border border-white/[0.08] flex items-center justify-center group-hover:border-[#a8c7fa]/50 transition-colors">
<Brain className="w-4 h-4 text-[#a8c7fa]" />
<div className="w-9 h-9 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm group-hover:scale-105 transition-transform">
<Brain className="w-5 h-5" />
</div>
<div className="flex items-baseline gap-2">
<span className="font-semibold text-base sm:text-lg text-[#e3e3e3] tracking-tight">
<div className="flex flex-col">
<span className="font-bold text-base sm:text-lg text-white tracking-tight leading-none">
MindSift
</span>
<span className="hidden md:inline-block text-xs text-[#8e918f]">
<span className="text-[11px] text-zinc-400 mt-0.5 hidden sm:inline-block">
Der Kopf frei in drei Sekunden
</span>
</div>
</div>
{/* Right User Pill */}
{/* User Profile Pill matching Template Screen 2 */}
<div className="flex items-center gap-2">
<button
onClick={() => setShowAuthModal(true)}
className="h-8 px-3 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] border border-white/[0.08] text-xs font-normal text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-2 transition-colors"
title="Benutzer wechseln oder Profil anpassen"
onClick={() => {
triggerHaptic(10);
setShowProfileModal(true);
}}
className="h-9 px-3.5 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2.5 transition-colors shadow-sm"
title="Profil & Einstellungen"
>
<UserIcon className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span>{user?.displayName || 'Lokal'}</span>
<div className="w-5 h-5 rounded-full bg-[#1d8cf8] text-white text-[10px] font-bold flex items-center justify-center">
{user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div>
<span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
</button>
</div>
</div>
</header>
{/* Main Content Container */}
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-20">
{/* Global Instant Capture Section */}
{/* Main Container */}
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-5 pb-28">
{/* Instant Capture Section */}
<section className="mb-6">
<InstantCaptureBar
onCaptured={handleCaptured}
@@ -176,83 +203,116 @@ export const App: React.FC = () => {
/>
</section>
{/* Google Material 3 Navigation Chips */}
<nav className="flex items-center justify-start sm:justify-center gap-1.5 overflow-x-auto pb-2 mb-8 no-scrollbar">
{/* Top Filter / Tab Pills matching Template Screen 3 */}
<nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar">
<button
onClick={() => setActiveTab('triage')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
onClick={() => {
triggerHaptic(10);
setActiveTab('triage');
}}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
activeTab === 'triage'
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
}`}
>
<Layers className="w-4 h-4 text-[#a8c7fa]" />
<span>Triage-Deck</span>
<Layers className="w-4 h-4" />
<span>Triage</span>
{stats.inboxCount > 0 && (
<span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06]">
<span
className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
activeTab === 'triage'
? 'bg-white text-[#1d8cf8]'
: 'bg-[#16171a] text-[#1d8cf8]'
}`}
>
{stats.inboxCount}
</span>
)}
</button>
<button
onClick={() => setActiveTab('tasks')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
onClick={() => {
triggerHaptic(10);
setActiveTab('tasks');
}}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
activeTab === 'tasks'
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
}`}
>
<CheckSquare className="w-4 h-4 text-[#a8dab5]" />
<CheckSquare className="w-4 h-4" />
<span>Aufgaben</span>
{stats.tasksOpenCount > 0 && (
<span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8dab5] border border-white/[0.06]">
<span
className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
activeTab === 'tasks'
? 'bg-white text-[#1d8cf8]'
: 'bg-[#16171a] text-[#22c55e]'
}`}
>
{stats.tasksOpenCount}
</span>
)}
</button>
<button
onClick={() => setActiveTab('workspace')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
onClick={() => {
triggerHaptic(10);
setActiveTab('workspace');
}}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
activeTab === 'workspace'
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
}`}
>
<FileText className="w-4 h-4 text-[#a8c7fa]" />
<FileText className="w-4 h-4" />
<span>Workspace</span>
<span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#8e918f] border border-white/[0.06]">
<span
className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
activeTab === 'workspace'
? 'bg-white text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400'
}`}
>
{stats.docsCount}
</span>
</button>
<button
onClick={() => setActiveTab('lists')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
onClick={() => {
triggerHaptic(10);
setActiveTab('lists');
}}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
activeTab === 'lists'
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
}`}
>
<ShoppingCart className="w-4 h-4 text-[#a8dab5]" />
<ShoppingCart className="w-4 h-4" />
<span>Geteilte Listen</span>
</button>
<button
onClick={() => setActiveTab('ecosystem')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
onClick={() => {
triggerHaptic(10);
setActiveTab('ecosystem');
}}
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
activeTab === 'ecosystem'
? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
}`}
>
<Webhook className="w-4 h-4 text-[#fdd663]" />
<Webhook className="w-4 h-4" />
<span>Webhooks & Export</span>
</button>
</nav>
{/* Active View Content */}
{/* Tab View Content */}
<section>
{activeTab === 'triage' && (
<TriageDeck
@@ -260,7 +320,7 @@ export const App: React.FC = () => {
lists={lists}
onDeckChange={refreshAll}
onOpenDocument={handleOpenDocument}
onFocusCapture={() => setCaptureFocusCount((c) => c + 1)}
onFocusCapture={handleTriggerAddButton}
/>
)}
@@ -288,77 +348,157 @@ export const App: React.FC = () => {
</section>
</main>
{/* Account Switcher / Registration Modal */}
{showAuthModal && (
<div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
<div className="w-full max-w-md p-6 rounded-3xl bg-[#1e1f20] border border-[#3c4043] shadow-card">
<div className="flex items-center justify-between mb-5">
<h3 className="text-base font-semibold text-[#e3e3e3]">
{authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
</h3>
{/* Floating Bottom Navigation Dock matching Template Screen 3 */}
<footer className="fixed bottom-0 left-0 right-0 z-40 bg-[#1c1e22]/95 backdrop-blur-lg border-t border-white/[0.08] px-4 py-2 sm:py-3 shadow-2xl">
<div className="max-w-md mx-auto flex items-center justify-between relative px-2">
{/* Triage / Inbox */}
<button
onClick={() => {
triggerHaptic(10);
setActiveTab('triage');
}}
className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`}
title="Triage Deck"
>
<Layers className="w-5 h-5" />
<span className="text-[10px] mt-1 font-medium">Triage</span>
</button>
{/* Tasks */}
<button
onClick={() => {
triggerHaptic(10);
setActiveTab('tasks');
}}
className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`}
title="Aufgaben"
>
<CheckSquare className="w-5 h-5" />
<span className="text-[10px] mt-1 font-medium">Aufgaben</span>
</button>
{/* Center Floating Action Button matching Template + Button */}
<div className="relative -top-5 flex flex-col items-center">
<button
onClick={handleTriggerAddButton}
className="w-13 h-13 sm:w-14 sm:h-14 rounded-full bg-[#1d8cf8] hover:bg-[#1877d5] active:scale-95 text-white flex items-center justify-center shadow-lg shadow-blue-500/30 border-4 border-[#16171a] transition-all"
title="Gedanke erfassen"
>
<Plus className="w-6 h-6 stroke-[2.5]" />
</button>
<span className="text-[10px] font-medium text-zinc-300 mt-1">Erfassen</span>
</div>
{/* Lists */}
<button
onClick={() => {
triggerHaptic(10);
setActiveTab('lists');
}}
className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`}
title="Listen"
>
<ShoppingCart className="w-5 h-5" />
<span className="text-[10px] mt-1 font-medium">Listen</span>
</button>
{/* Workspace */}
<button
onClick={() => {
triggerHaptic(10);
setActiveTab('workspace');
}}
className={`flex flex-col items-center justify-center p-2 rounded-xl transition-colors ${
activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400 hover:text-white'
}`}
title="Workspace"
>
<FileText className="w-5 h-5" />
<span className="text-[10px] mt-1 font-medium">Workspace</span>
</button>
</div>
</footer>
{/* Profile & Settings Modal styled identically to Template Screen 2 */}
{showProfileModal && (
<div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
<div className="w-full max-w-sm rounded-3xl bg-[#222428] border border-white/[0.08] shadow-2xl p-6 overflow-hidden">
{/* Screen 2: Top Profile Card */}
<div className="flex flex-col items-center text-center mb-6">
<div className="w-20 h-20 rounded-full bg-[#1d8cf8] text-white text-2xl font-bold flex items-center justify-center shadow-lg mb-3 ring-4 ring-white/[0.05]">
{user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div>
<h2 className="text-xl font-bold text-white tracking-tight">
{user?.displayName || 'Standard Benutzer'}
</h2>
<p className="text-xs text-zinc-400 mt-0.5">
{user?.email || 'lokal@mindsift.local'}
</p>
{/* Template Screen 2: Blue Pill Edit Button */}
<button
onClick={() => setShowAuthModal(false)}
className="px-2.5 py-1 rounded-full bg-[#282a2c] text-xs text-[#c4c7c5] hover:text-[#e3e3e3]"
onClick={() => setAuthMode(authMode === 'login' ? 'register' : 'login')}
className="mt-3 px-5 py-1.5 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white text-xs font-semibold shadow-sm transition-all"
>
Schließen
{authMode === 'login' ? 'Konto wechseln' : 'Neues Konto anlegen'}
</button>
</div>
{user && (
<div className="mb-4 p-3 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between">
<div className="text-xs">
<span className="text-[#8e918f]">Aktiv: </span>
<strong className="text-[#e3e3e3]">{user.displayName}</strong>
<span className="text-[#8e918f] ml-1">({user.email})</span>
{/* Template Screen 2: Capsule Settings Sections */}
<div className="space-y-3 mb-6">
{/* Notification toggle capsule */}
<div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-[#22c55e]/20 text-[#22c55e] flex items-center justify-center">
<Bell className="w-4 h-4" />
</div>
<span className="text-xs font-medium text-white">Benachrichtigungen</span>
</div>
<button
type="button"
onClick={async () => {
clearToken();
await api.quickStart();
await refreshAll();
setShowAuthModal(false);
}}
className="text-xs text-[#a8c7fa] hover:underline flex items-center gap-1"
onClick={() => setNotificationsEnabled(!notificationsEnabled)}
className={`w-11 h-6 rounded-full transition-colors relative p-0.5 ${
notificationsEnabled ? 'bg-[#1d8cf8]' : 'bg-zinc-600'
}`}
>
<LogOut className="w-3 h-3" /> Standard
<div
className={`w-5 h-5 rounded-full bg-white transition-transform ${
notificationsEnabled ? 'translate-x-5' : 'translate-x-0'
}`}
/>
</button>
</div>
)}
<div className="flex gap-2 mb-4">
<button
type="button"
onClick={() => setAuthMode('login')}
className={`flex-1 h-8 rounded-full text-xs font-medium ${
authMode === 'login'
? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
: 'text-[#8e918f] hover:text-[#e3e3e3]'
}`}
>
Anmelden
</button>
<button
type="button"
onClick={() => setAuthMode('register')}
className={`flex-1 h-8 rounded-full text-xs font-medium ${
authMode === 'register'
? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
: 'text-[#8e918f] hover:text-[#e3e3e3]'
}`}
>
Registrieren
</button>
{/* Security info capsule */}
<div className="p-3.5 rounded-2xl bg-[#282a2f] border border-white/[0.04] flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-[#1d8cf8]/20 text-[#1d8cf8] flex items-center justify-center">
<Shield className="w-4 h-4" />
</div>
<div>
<span className="text-xs font-medium text-white block">Sicherheit</span>
<span className="text-[10px] text-zinc-400">Lokale SQLite Verschlüsselung</span>
</div>
</div>
<ChevronRight className="w-4 h-4 text-zinc-500" />
</div>
</div>
<form onSubmit={handleAuthSubmit} className="space-y-3">
{/* Auth Switcher Form if switching accounts */}
<form onSubmit={handleAuthSubmit} className="space-y-2.5 mb-4">
{authMode === 'register' && (
<input
type="text"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
placeholder="Anzeigename (z. B. Lisa)"
className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
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"
required
/>
)}
@@ -366,28 +506,47 @@ export const App: React.FC = () => {
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="E-Mail-Adresse"
className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
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"
required
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Passwort (mind. 4 Zeichen)"
className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
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"
required
/>
{authError && <p className="text-xs text-[#f28b82] px-2">{authError}</p>}
{authError && <p className="text-xs text-[#ef4444] px-1">{authError}</p>}
<button
type="submit"
className="w-full h-10 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm hover:bg-[#b8d4ff] transition-colors"
className="w-full h-10 rounded-full bg-[#1d8cf8] hover:bg-[#167ad6] text-white font-semibold text-xs transition-colors shadow-sm"
>
{authMode === 'login' ? 'Einloggen' : 'Konto erstellen'}
{authMode === 'login' ? 'Anmelden' : 'Registrieren'}
</button>
</form>
{/* Log Out Row matching Template Screen 2 */}
<div className="pt-2 border-t border-white/[0.06] flex items-center justify-between">
<button
type="button"
onClick={handleLogout}
className="text-xs text-[#ef4444] hover:underline flex items-center gap-1.5 font-medium py-1"
>
<LogOut className="w-3.5 h-3.5" />
<span>Abmelden</span>
</button>
<button
type="button"
onClick={() => setShowProfileModal(false)}
className="px-4 py-1.5 rounded-full bg-[#282a2f] hover:bg-[#32353a] text-xs text-zinc-300 font-medium transition-colors"
>
Fertig
</button>
</div>
</div>
</div>
)}
frontend/src/features/capture/InstantCaptureBar.tsx
+22 -20
View File
@@ -133,15 +133,17 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
return (
<div className="w-full max-w-3xl mx-auto">
<form onSubmit={handleSubmit} className="relative">
{/* Google Gemini Style Input Capsule */}
{/* Capsule Input Bar */}
<div
className={`flex items-center h-14 px-4 sm:px-5 rounded-full bg-[#1e1f20] border transition-colors duration-150 ${
className={`flex items-center h-14 px-3.5 sm:px-4 rounded-2xl bg-[#222428] border transition-colors duration-150 ${
isListening
? 'border-[#a8c7fa] bg-[#1e1f20]'
: 'border-[#3c4043] focus-within:border-[#a8c7fa]'
? 'border-[#1d8cf8] bg-[#222428]'
: 'border-white/[0.08] focus-within:border-[#1d8cf8]/80'
}`}
>
<Sparkles className="w-4 h-4 mr-3 flex-shrink-0 text-[#a8c7fa]" />
<div className="w-8 h-8 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center mr-3 flex-shrink-0">
<Sparkles className="w-4 h-4" />
</div>
<input
ref={inputRef}
@@ -153,7 +155,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
? 'Ich höre zu…'
: 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
}
className="w-full bg-transparent text-[#e3e3e3] placeholder-[#8e918f] text-sm sm:text-base focus:outline-none"
className="w-full bg-transparent text-white placeholder-zinc-500 text-sm sm:text-base focus:outline-none"
autoComplete="off"
/>
@@ -165,8 +167,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
title="Priorität & Fälligkeit"
className={`h-8 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
showOptions || priority !== 'normal' || dueDate
? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
: 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
: 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
}`}
>
<Calendar className="w-3.5 h-3.5" />
@@ -182,8 +184,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
title="Spracheingabe"
className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
isListening
? 'bg-[#004a77]/50 text-[#a8c7fa]'
: 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
}`}
>
{isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
@@ -193,10 +195,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
<button
type="submit"
disabled={!content.trim() || isSubmitting}
className={`h-8 px-3.5 rounded-full font-medium text-xs flex items-center gap-1.5 transition-colors ${
className={`h-9 px-4 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
content.trim()
? 'bg-[#a8c7fa] text-[#041e49] hover:bg-[#b8d4ff] cursor-pointer'
: 'bg-[#282a2c] text-[#8e918f] cursor-not-allowed'
? 'bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white cursor-pointer shadow-sm'
: 'bg-[#2b2d33] text-zinc-500 cursor-not-allowed'
}`}
>
{justSaved ? (
@@ -216,9 +218,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
{/* Expandable Quick Metadata Pills */}
{showOptions && (
<div className="mt-2 px-4 py-2.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043] flex flex-wrap items-center justify-between gap-2 text-xs">
<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="flex items-center gap-1.5">
<span className="text-[#8e918f] mr-1">Priorität:</span>
<span className="text-zinc-400 mr-1">Priorität:</span>
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
const labels: Record<PriorityLevel, string> = {
low: 'Niedrig',
@@ -235,9 +237,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
className={`px-3 py-1 rounded-full transition-colors ${
active
? p === 'urgent'
? 'bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40 font-medium'
: 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30 font-medium'
: 'bg-[#131314] text-[#8e918f] hover:text-[#e3e3e3]'
? '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]'
}`}
>
{labels[p]}
@@ -247,12 +249,12 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
</div>
<div className="flex items-center gap-2">
<span className="text-[#8e918f]">Fällig am:</span>
<span className="text-zinc-400">Fällig am:</span>
<input
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none focus:border-[#a8c7fa]"
className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
/>
</div>
</div>
frontend/src/features/lists/SharedListsView.tsx
+54 -52
View File
@@ -266,7 +266,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
return (
<div className="max-w-4xl mx-auto space-y-6">
{/* Top Space Bar & Realtime Indicator */}
<div className="p-4 sm:p-5 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
<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="flex flex-wrap items-center gap-2">
{spaces.map((sp) => (
<button
@@ -274,8 +274,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onClick={() => setActiveSpace(sp)}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors ${
activeSpace?.id === sp.id
? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
: 'bg-[#131314] text-[#c4c7c5] hover:text-[#e3e3e3] border border-white/[0.08]'
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'bg-[#16171a] text-zinc-300 hover:text-white border border-white/[0.06]'
}`}
>
<span>{sp.icon}</span>
@@ -285,16 +285,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
onClick={() => setShowNewSpaceModal((prev) => !prev)}
className="h-9 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
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"
>
<Plus className="w-3.5 h-3.5 text-[#a8c7fa]" /> Space
<Plus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Space
</button>
<button
onClick={() => setShowJoinModal((prev) => !prev)}
className="h-9 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
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"
>
<UserPlus className="w-3.5 h-3.5 text-[#a8c7fa]" /> Code einlösen
<UserPlus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Code einlösen
</button>
</div>
@@ -304,8 +304,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div
className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 ${
wsConnected
? 'bg-[#a8dab5]/10 text-[#a8dab5] border border-[#a8dab5]/25'
: 'bg-[#282a2c] text-[#8e918f] border border-white/[0.08]'
? 'bg-[#22c55e]/15 text-[#22c55e] border border-[#22c55e]/30'
: 'bg-[#2b2d33] text-zinc-400 border border-white/[0.06]'
}`}
>
<Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
@@ -315,14 +315,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
onClick={copyInviteCode}
title="Einladungscode für Partner oder Familie kopieren"
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
className="h-8 px-3 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"
>
<Users className="w-3.5 h-3.5 text-[#a8c7fa]" />
<Users className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Code: {activeSpace.inviteCode}</span>
{copiedInvite ? (
<Check className="w-3.5 h-3.5 text-[#a8dab5]" />
<Check className="w-3.5 h-3.5 text-[#22c55e]" />
) : (
<Copy className="w-3 h-3 text-[#8e918f]" />
<Copy className="w-3 h-3 text-zinc-400" />
)}
</button>
</div>
@@ -333,19 +333,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewSpaceModal && (
<form
onSubmit={handleCreateSpace}
className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center gap-3"
className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3"
>
<input
type="text"
value={newSpaceName}
onChange={(e) => setNewSpaceName(e.target.value)}
placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
className="flex-1 h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
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"
autoFocus
/>
<button
type="submit"
className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
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"
>
Space anlegen
</button>
@@ -355,19 +355,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showJoinModal && (
<form
onSubmit={handleJoinSpace}
className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center gap-3"
className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex items-center gap-3"
>
<input
type="text"
value={joinCode}
onChange={(e) => setJoinCode(e.target.value)}
placeholder="Invite-Code des Partners eingeben…"
className="flex-1 h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] uppercase transition-colors"
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"
autoFocus
/>
<button
type="submit"
className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
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"
>
Beitreten
</button>
@@ -383,15 +383,17 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
key={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-colors ${
className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-all ${
isSelected
? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
: 'bg-[#131314] text-[#c4c7c5] hover:text-[#e3e3e3] border border-white/[0.08]'
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'bg-[#222428] text-zinc-300 hover:text-white border border-white/[0.06]'
}`}
>
<span>{lst.icon}</span>
<span>{lst.title}</span>
<span className="px-2 py-0.2 rounded-full bg-[#131314] text-xs text-[#a8c7fa] border border-white/[0.06]">
<span className={`px-2 py-0.2 rounded-full text-xs ${
isSelected ? 'bg-white/20 text-white' : 'bg-[#16171a] text-zinc-400'
}`}>
{openCount}
</span>
</button>
@@ -400,9 +402,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
onClick={() => setShowNewListModal((prev) => !prev)}
className="h-10 px-4 rounded-full bg-[#131314] hover:bg-[#1e1f20] border border-white/[0.08] text-xs sm:text-sm text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
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"
>
<Plus className="w-4 h-4 text-[#a8c7fa]" />
<Plus className="w-4 h-4 text-[#1d8cf8]" />
<span>Neue Liste</span>
</button>
</div>
@@ -410,7 +412,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewListModal && (
<form
onSubmit={handleCreateList}
className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-wrap items-center gap-3"
className="p-4 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-3"
>
<div className="flex items-center gap-1.5">
{['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
@@ -420,8 +422,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onClick={() => setNewListIcon(ic)}
className={`w-9 h-9 rounded-full flex items-center justify-center transition-colors ${
newListIcon === ic
? 'bg-[#a8c7fa]/20 border border-[#a8c7fa]/40 text-[#a8c7fa]'
: 'bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08]'
? 'bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8]'
: 'bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06]'
}`}
>
{ic}
@@ -433,12 +435,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newListTitle}
onChange={(e) => setNewListTitle(e.target.value)}
placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
className="flex-1 h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
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"
autoFocus
/>
<button
type="submit"
className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
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"
>
Liste erstellen
</button>
@@ -447,7 +449,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Active Shared List Card */}
{activeList ? (
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
{/* Quick-Add Pill Form */}
<form onSubmit={handleAddItem} className="space-y-3 mb-6">
<div className="flex flex-col sm:flex-row gap-2.5">
@@ -456,7 +458,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemText}
onChange={(e) => setNewItemText(e.target.value)}
placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
className="flex-1 h-11 px-5 rounded-full bg-[#131314] text-sm sm:text-base text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
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"
/>
<div className="flex gap-2">
<input
@@ -464,12 +466,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemQty}
onChange={(e) => setNewItemQty(e.target.value)}
placeholder="Menge (z.B. 2x)"
className="w-32 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
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"
/>
<button
type="submit"
disabled={!newItemText.trim()}
className="h-11 px-5 rounded-full bg-[#a8c7fa] disabled:bg-[#282a2c] text-[#041e49] disabled:text-[#8e918f] font-medium text-sm flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
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"
>
<Plus className="w-4 h-4" />
<span>Hinzufügen</span>
@@ -479,7 +481,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Category Quick-Select Pills */}
<div className="flex flex-wrap items-center gap-1.5">
<span className="text-xs text-[#8e918f] mr-1">Kategorie:</span>
<span className="text-xs text-zinc-400 mr-1">Kategorie:</span>
{CATEGORIES.map((cat) => (
<button
key={cat}
@@ -487,8 +489,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
className={`px-3 py-1 rounded-full text-xs transition-colors ${
newItemCategory === cat
? 'bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25 font-medium'
: 'bg-[#131314] text-[#8e918f] hover:text-[#c4c7c5] border border-white/[0.08]'
? 'bg-[#1d8cf8] text-white font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
}`}
>
{cat}
@@ -500,8 +502,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Open Items */}
<div className="space-y-2">
{openItems.length === 0 ? (
<div className="py-8 text-center text-[#8e918f] text-sm flex flex-col items-center gap-2">
<Sparkles className="w-5 h-5 text-[#a8dab5]" />
<div className="py-8 text-center text-zinc-400 text-sm flex flex-col items-center gap-2">
<Sparkles className="w-5 h-5 text-[#22c55e]" />
<span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
</div>
) : (
@@ -509,20 +511,20 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div
key={item.id}
onClick={() => handleToggleItem(item)}
className="p-3.5 sm:p-4 rounded-2xl bg-[#131314] hover:bg-[#282a2c]/60 border border-white/[0.08] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
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"
>
<div className="flex items-center gap-3.5 min-w-0">
<Circle className="w-5 h-5 text-[#8e918f] group-hover:text-[#a8c7fa] flex-shrink-0 transition-colors" />
<span className="text-sm sm:text-base font-normal text-[#e3e3e3] truncate">
<Circle className="w-5 h-5 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" />
<span className="text-sm sm:text-base font-normal text-white truncate">
{item.content}
</span>
{item.quantity && (
<span className="px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06] text-xs font-medium">
<span className="px-2.5 py-0.5 rounded-full bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold">
{item.quantity}
</span>
)}
{item.category && (
<span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#8e918f] text-xs">
<span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#222428] text-zinc-400 text-xs">
{item.category}
</span>
)}
@@ -534,7 +536,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation();
handleDeleteItem(item.id);
}}
className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
@@ -547,12 +549,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{completedItems.length > 0 && (
<div className="mt-8 pt-6 border-t border-white/[0.06]">
<div className="flex items-center justify-between mb-3">
<span className="text-xs font-medium uppercase tracking-wider text-[#8e918f]">
<span className="text-xs font-medium uppercase tracking-wider text-zinc-400">
Bereits im Einkaufswagen / Erledigt ({completedItems.length})
</span>
<button
onClick={handleClearCompleted}
className="px-3.5 py-1 rounded-full bg-[#131314] hover:bg-[#f28b82]/15 border border-white/[0.08] text-xs text-[#8e918f] hover:text-[#f28b82] transition-colors"
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"
>
Erledigte aufräumen
</button>
@@ -563,19 +565,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div
key={item.id}
onClick={() => handleToggleItem(item)}
className="p-3 rounded-2xl bg-[#131314]/50 border border-white/[0.04] hover:bg-[#131314]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
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"
>
<div className="flex items-center gap-3 min-w-0">
<CheckCircle2 className="w-5 h-5 text-[#a8dab5] flex-shrink-0" />
<span className="text-sm text-[#8e918f] line-through truncate">
<CheckCircle2 className="w-5 h-5 text-[#22c55e] flex-shrink-0" />
<span className="text-sm text-zinc-400 line-through truncate">
{item.content}
</span>
{item.quantity && (
<span className="text-xs text-[#8e918f]">({item.quantity})</span>
<span className="text-xs text-zinc-500">({item.quantity})</span>
)}
</div>
{item.completedByName && (
<span className="text-xs text-[#8e918f]">✓ {item.completedByName}</span>
<span className="text-xs text-zinc-500">✓ {item.completedByName}</span>
)}
</div>
))}
frontend/src/features/settings/EcosystemView.tsx
+35 -35
View File
@@ -94,16 +94,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
return (
<div className="max-w-4xl mx-auto space-y-6">
{/* Section 1: API Keys for Smarthome & Automation */}
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
<div className="flex items-center gap-3 mb-2">
<div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
<Key className="w-5 h-5 text-[#a8c7fa]" />
<div className="w-10 h-10 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm">
<Key className="w-5 h-5" />
</div>
<div>
<h3 className="text-lg font-medium text-[#e3e3e3]">
<h3 className="text-lg font-bold text-white">
Webhooks & Ingestion API-Schlüssel
</h3>
<p className="text-xs sm:text-sm text-[#8e918f]">
<p className="text-xs sm:text-sm text-zinc-400">
Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs direkt mit deiner MindSift Inbox.
</p>
</div>
@@ -115,11 +115,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
value={newKeyName}
onChange={(e) => setNewKeyName(e.target.value)}
placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
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"
/>
<button
type="submit"
className="h-11 px-6 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm flex items-center justify-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
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"
>
<Plus className="w-4 h-4" />
<span>API-Key erzeugen</span>
@@ -127,18 +127,18 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</form>
{newlyCreatedKey && (
<div className="mt-4 p-4 rounded-2xl bg-[#a8dab5]/10 border border-[#a8dab5]/30 flex flex-wrap items-center justify-between gap-3">
<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="min-w-0">
<p className="text-xs font-medium text-[#a8dab5] mb-1">
<p className="text-xs font-semibold text-[#22c55e] mb-1">
Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
</p>
<code className="text-xs sm:text-sm font-mono text-[#e3e3e3] break-all">
<code className="text-xs sm:text-sm font-mono text-white break-all">
{newlyCreatedKey}
</code>
</div>
<button
onClick={() => handleCopy(newlyCreatedKey)}
className="h-9 px-4 rounded-full bg-[#a8dab5] text-[#041e49] font-medium text-xs flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
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"
>
{copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
<span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -149,27 +149,27 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
{/* Active Keys List */}
<div className="mt-5 space-y-2">
{keys.length === 0 ? (
<p className="text-xs text-[#8e918f] py-2">
<p className="text-xs text-zinc-500 py-2">
Noch keine dedizierten API-Schlüssel hinterlegt.
</p>
) : (
keys.map((k) => (
<div
key={k.id}
className="p-3.5 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between gap-3"
className="p-3.5 rounded-2xl bg-[#16171a] border border-white/[0.06] flex items-center justify-between gap-3"
>
<div>
<span className="text-sm font-medium text-[#e3e3e3]">{k.name}</span>
<span className="ml-3 text-xs font-mono text-[#a8c7fa]">{k.keyPrefix}</span>
<span className="text-sm font-medium text-white">{k.name}</span>
<span className="ml-3 text-xs font-mono text-[#1d8cf8]">{k.keyPrefix}</span>
{k.lastUsedAt && (
<span className="ml-3 text-xs text-[#8e918f]">
<span className="ml-3 text-xs text-zinc-500">
Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
</span>
)}
</div>
<button
onClick={() => handleDeleteKey(k.id)}
className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
@@ -180,16 +180,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
{/* Section 2: Interactive Smarthome Webhook Simulator */}
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
<Webhook className="w-5 h-5 text-[#a8c7fa]" />
<div className="w-10 h-10 rounded-xl bg-[#a855f7] text-white flex items-center justify-center shadow-sm">
<Webhook className="w-5 h-5" />
</div>
<div>
<h3 className="text-lg font-medium text-[#e3e3e3]">
<h3 className="text-lg font-bold text-white">
Live Smarthome Webhook-Simulator
</h3>
<p className="text-xs sm:text-sm text-[#8e918f]">
<p className="text-xs sm:text-sm text-zinc-400">
Teste den Webhook-Endpunkt direkt hier – das Event landet sofort als Karte im Triage-Deck.
</p>
</div>
@@ -208,7 +208,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
setSimTitle(preset.text);
setSimPriority(preset.prio);
}}
className="px-3.5 py-1.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] transition-colors"
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"
>
{preset.label}
</button>
@@ -220,12 +220,12 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
type="text"
value={simTitle}
onChange={(e) => setSimTitle(e.target.value)}
className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
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"
/>
<button
type="button"
onClick={handleSimulateWebhook}
className="h-11 px-6 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm flex items-center justify-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
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"
>
<Zap className="w-4 h-4" />
<span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
{simStatus && (
<p className="mt-3 text-xs font-medium text-[#a8dab5]">{simStatus}</p>
<p className="mt-3 text-xs font-medium text-[#22c55e]">{simStatus}</p>
)}
{/* Code Example Snippets */}
<div className="mt-6 space-y-3">
<div className="flex items-center gap-2 text-xs font-medium text-[#8e918f]">
<Terminal className="w-3.5 h-3.5 text-[#a8c7fa]" />
<div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
<Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>cURL / Home Assistant REST Command:</span>
</div>
<pre className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs text-[#a8dab5] overflow-x-auto">
<pre className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.06] font-mono text-xs text-[#22c55e] overflow-x-auto">
{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
-H "Content-Type: application/json" \\
-d '{
@@ -255,16 +255,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
{/* Section 3: Data Sovereignty & Export */}
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<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="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-[#a8dab5]/15 flex items-center justify-center flex-shrink-0">
<ShieldCheck className="w-5 h-5 text-[#a8dab5]" />
<div className="w-10 h-10 rounded-xl bg-[#22c55e] text-white flex items-center justify-center flex-shrink-0 shadow-sm">
<ShieldCheck className="w-5 h-5" />
</div>
<div>
<h3 className="text-base font-medium text-[#e3e3e3]">
<h3 className="text-base font-bold text-white">
100 % Datensouveränität & Komplett-Export
</h3>
<p className="text-xs sm:text-sm text-[#8e918f]">
<p className="text-xs sm:text-sm text-zinc-400">
Exportiere jederzeit alle Gedanken, Aufgaben, Dokumente und geteilten Listen als portables JSON-Archiv.
</p>
</div>
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
<button
onClick={handleFullExport}
className="h-11 px-6 rounded-full bg-[#a8dab5] text-[#041e49] font-medium text-sm flex items-center gap-2 hover:bg-[#c2e7ff] transition-colors flex-shrink-0"
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"
>
<Download className="w-4 h-4" />
<span>Komplett-Backup (.json)</span>
frontend/src/features/triage/TasksView.tsx
+126 -96
View File
@@ -91,27 +91,27 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
const doneTasks = tasks.filter((t) => t.isCompleted);
return (
<div className="max-w-3xl mx-auto">
<div className="max-w-3xl mx-auto space-y-4">
{/* Filter Pills */}
<div className="flex flex-wrap items-center justify-between gap-3 mb-6">
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center justify-between gap-3 mb-2">
<div className="flex items-center gap-1.5">
<button
onClick={() => setFilter('open')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
filter === 'open'
? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'text-zinc-400 hover:text-white hover:bg-[#222428]'
}`}
>
Offene Aufgaben ({openTasks.length})
Alle Offenen ({openTasks.length})
</button>
<button
onClick={() => setFilter('done')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
filter === 'done'
? 'bg-[#282a2c] text-[#a8dab5] border border-[#a8dab5]/30'
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'text-zinc-400 hover:text-white hover:bg-[#222428]'
}`}
>
Erledigt ({doneTasks.length})
@@ -119,10 +119,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<button
onClick={() => setFilter('discarded')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
filter === 'discarded'
? 'bg-[#282a2c] text-[#f28b82] border border-[#f28b82]/30'
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'text-zinc-400 hover:text-white hover:bg-[#222428]'
}`}
>
Verworfen ({discarded.length})
@@ -132,7 +132,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
{filter === 'discarded' && discarded.length > 0 && (
<button
onClick={handlePurgeAllDiscarded}
className="h-8 px-3.5 rounded-full bg-[#f28b82]/10 hover:bg-[#f28b82]/20 border border-[#f28b82]/25 text-[#f28b82] text-xs font-medium flex items-center gap-1.5 transition-colors"
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"
>
<Trash2 className="w-3.5 h-3.5" />
Papierkorb leeren
@@ -141,32 +141,35 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
</div>
{loading ? (
<div className="p-8 text-center text-[#8e918f] text-sm">Lade Aufgaben…</div>
<div className="p-8 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
) : filter === 'discarded' ? (
<div className="space-y-2.5">
{discarded.length === 0 ? (
<div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
<div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
Keine verworfenen Gedanken im Papierkorb.
</div>
) : (
discarded.map((item) => (
<div
key={item.id}
className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center justify-between gap-4"
className="p-3.5 sm:p-4 rounded-2xl bg-[#222428] border border-white/[0.06] flex items-center justify-between gap-4"
>
<div className="min-w-0 flex-1">
<p className="text-sm text-[#8e918f] line-through truncate">{item.content}</p>
<div className="flex items-center gap-3 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" />
</div>
<p className="text-sm text-zinc-400 line-through truncate">{item.content}</p>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
<button
onClick={() => handleRestore(item)}
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#a8c7fa] flex items-center gap-1.5 transition-colors"
className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
>
<RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox
<RotateCcw className="w-3.5 h-3.5" /> Zurück
</button>
<button
onClick={() => handleDeletePermanent(item.id)}
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
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>
@@ -178,92 +181,119 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
) : (
<div className="space-y-2.5">
{(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
<div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
<div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
{filter === 'open'
? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen.'
? 'Keine offenen Aufgaben vorhanden.'
: 'Noch keine erledigten Aufgaben.'}
</div>
) : (
(filter === 'open' ? openTasks : doneTasks).map((task) => (
<div
key={task.id}
className="p-4 sm:p-5 rounded-2xl bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-white/[0.08] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors"
>
<div className="flex items-start gap-3.5 min-w-0 flex-1">
<button
onClick={() => handleToggleDone(task)}
className="mt-0.5 flex-shrink-0 text-[#8e918f] hover:text-[#a8c7fa] transition-colors"
>
{task.isCompleted ? (
<CheckCircle2 className="w-5 h-5 text-[#a8dab5]" />
) : (
<Circle className="w-5 h-5" />
)}
</button>
(filter === 'open' ? openTasks : doneTasks).map((task, idx) => {
// Alternate squircle colors matching template: blue, green, purple, orange, violet
const squircleColors = [
'bg-[#1d8cf8]', // electric blue
'bg-[#22c55e]', // vibrant green
'bg-[#a855f7]', // purple
'bg-[#f97316]', // orange
'bg-[#8b5cf6]', // violet
];
const squircleBg = task.priority === 'urgent'
? 'bg-[#ef4444]'
: task.isCompleted
? 'bg-[#a855f7]'
: squircleColors[idx % squircleColors.length];
<div className="min-w-0 flex-1">
<p
className={`text-sm sm:text-base font-normal break-words ${
task.isCompleted ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
}`}
// In template: active/top items have a thin bright green outline
const isHighlightGreen = !task.isCompleted && idx < 3;
return (
<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.content}
</p>
{task.isCompleted ? (
<Check className="w-5 h-5 stroke-[2.5]" />
) : task.priority === 'urgent' ? (
<AlertCircle className="w-5 h-5" />
) : (
<CheckCircle2 className="w-5 h-5" />
)}
</button>
<div className="flex flex-wrap items-center gap-2 mt-2">
{task.priority === 'urgent' && (
<span className="px-2.5 py-0.5 rounded-full bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/25 text-xs flex items-center gap-1 font-medium">
<AlertCircle className="w-3 h-3" /> Dringend
</span>
)}
{task.priority === 'high' && (
<span className="px-2.5 py-0.5 rounded-full bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25 text-xs font-medium">
Hoch
</span>
)}
{task.tags?.map((tag) => (
<span
key={tag}
className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.08] text-xs flex items-center gap-1"
>
<Tag className="w-2.5 h-2.5 text-[#8e918f]" />#{tag}
</span>
))}
<div className="min-w-0 flex-1">
<p
className={`text-sm sm:text-base font-medium break-words leading-snug ${
task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
}`}
>
{task.content}
</p>
<div className="flex flex-wrap items-center gap-2 mt-1">
{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>
{/* 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-[#a8c7fa] 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-[#131314] text-[#e3e3e3] text-xs border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
/>
{/* 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>
<button
onClick={() => handleConvertToDoc(task)}
title="Im Workspace als Dokument vertiefen"
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
>
<FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span className="hidden md:inline">Vertiefen</span>
</button>
<button
onClick={() => handleDeletePermanent(task.id)}
title="Löschen"
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
</div>
</div>
))
);
})
)}
</div>
)}
frontend/src/features/triage/TriageDeck.tsx
+53 -53
View File
@@ -55,7 +55,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
const cardBorderColor = useTransform(
x,
[-140, 0, 140],
['rgba(242, 139, 130, 0.6)', '#3c4043', 'rgba(168, 218, 181, 0.6)']
['rgba(239, 68, 68, 0.7)', 'rgba(255, 255, 255, 0.08)', 'rgba(34, 197, 94, 0.7)']
);
const handleAction = async (
@@ -98,7 +98,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
onDeckChange();
};
// Keyboard shortcuts for desktop power users (BRAIN.md Section 5)
// Keyboard shortcuts for desktop power users
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
const target = e.target as HTMLElement;
@@ -134,19 +134,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
switch (priority) {
case 'urgent':
return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/30">
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#ef4444] text-white">
Dringend
</span>
);
case 'high':
return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#fdd663]/15 text-[#fdd663] border border-[#fdd663]/30">
Hoch
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#f97316] text-white">
Wichtig
</span>
);
default:
return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#282a2c] text-[#8e918f] border border-white/[0.06]">
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#2b2d33] text-zinc-400">
Gedanke
</span>
);
@@ -156,14 +156,14 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
const sourceBadge = (source: string) => {
if (source === 'voice') {
return (
<span className="px-2.5 py-0.5 rounded-full text-xs bg-[#131314] text-[#a8c7fa] border border-white/[0.06] flex items-center gap-1">
<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">
<Mic className="w-3 h-3" /> Diktat
</span>
);
}
if (source === 'webhook') {
return (
<span className="px-2.5 py-0.5 rounded-full text-xs bg-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1">
<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">
<Webhook className="w-3 h-3" /> Webhook
</span>
);
@@ -173,19 +173,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
if (!activeCard) {
return (
<div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#1e1f20] border border-[#3c4043] text-center shadow-card">
<div className="w-12 h-12 rounded-full bg-[#a8dab5]/15 flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-[#a8dab5]" />
<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="w-12 h-12 rounded-2xl bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm">
<Sparkles className="w-6 h-6" />
</div>
<h2 className="text-xl font-medium text-[#e3e3e3] mb-1.5">Inbox Zero</h2>
<p className="text-[#8e918f] text-sm max-w-sm mx-auto mb-6">
<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">
Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
</p>
<div className="flex flex-wrap items-center justify-center gap-2.5">
<button
onClick={onFocusCapture}
className="h-9 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#b8d4ff] transition-colors"
className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm shadow-sm transition-colors"
>
+ Neuer Gedanke
</button>
@@ -193,9 +193,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{lastTriaged && (
<button
onClick={handleUndo}
className="h-9 px-4 rounded-full bg-[#282a2c] text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#333537] border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
className="h-10 px-4 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
>
<RotateCcw className="w-3.5 h-3.5" />
<RotateCcw className="w-3.5 h-3.5 text-[#1d8cf8]" />
Rückgängig
</button>
)}
@@ -209,11 +209,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Top Deck Status & Undo Bar */}
<div className="flex items-center justify-between mb-3 px-1">
<div className="flex items-center gap-2">
<span className="text-xs text-[#8e918f]">
<span className="text-xs text-zinc-400">
{cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend
</span>
<span className="hidden sm:inline text-xs text-[#8e918f]">•</span>
<span className="hidden sm:flex items-center gap-1 text-xs text-[#8e918f]">
<span className="hidden sm:inline text-xs text-zinc-600">•</span>
<span className="hidden sm:flex items-center gap-1 text-xs text-zinc-400">
<Keyboard className="w-3 h-3" /> H / L oder ← / →
</span>
</div>
@@ -221,9 +221,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{lastTriaged && (
<button
onClick={handleUndo}
className="h-7 px-2.5 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
className="h-7 px-2.5 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"
>
<RotateCcw className="w-3 h-3 text-[#a8c7fa]" />
<RotateCcw className="w-3 h-3 text-[#1d8cf8]" />
Rückgängig
</button>
)}
@@ -235,11 +235,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{nextCard && (
<div
key={nextCard.id + '-preview'}
className="absolute inset-x-3 top-4 bottom-0 rounded-3xl bg-[#1e1f20]/60 border border-[#3c4043]/40 p-6 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
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"
>
<div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
<p className="text-base text-[#8e918f] line-clamp-3">{nextCard.content}</p>
<div className="text-xs text-[#8e918f]">Nächste Karte…</div>
<p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
<div className="text-xs text-zinc-500">Nächste Karte…</div>
</div>
)}
@@ -262,19 +262,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
initial={{ scale: 0.96, opacity: 0, y: 12 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.92, opacity: 0 }}
className="relative w-full h-full rounded-3xl bg-[#1e1f20] 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 rounded-3xl bg-[#222428] border p-6 sm:p-7 shadow-card cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
>
{/* Dynamic Swipe Overlays */}
<motion.div
style={{ opacity: keepOpacity }}
className="pointer-events-none absolute top-5 right-5 px-3 py-1 rounded-full bg-[#a8dab5]/15 border border-[#a8dab5]/50 text-[#a8dab5] font-medium text-xs tracking-wide uppercase"
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"
>
Behalten 👉
</motion.div>
<motion.div
style={{ opacity: discardOpacity }}
className="pointer-events-none absolute top-5 left-5 px-3 py-1 rounded-full bg-[#f28b82]/15 border border-[#f28b82]/50 text-[#f28b82] font-medium text-xs tracking-wide uppercase"
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"
>
👈 Weg damit
</motion.div>
@@ -285,7 +285,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{priorityBadge(activeCard.priority)}
{sourceBadge(activeCard.source)}
</div>
<span className="text-xs text-[#8e918f] flex items-center gap-1">
<span className="text-xs text-zinc-400 flex items-center gap-1">
<Clock className="w-3.5 h-3.5" />
{new Date(activeCard.createdAt).toLocaleString('de-DE', {
day: '2-digit',
@@ -298,7 +298,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Card Body */}
<div className="my-auto py-3">
<p className="text-lg sm:text-xl font-normal text-[#e3e3e3] leading-relaxed break-words">
<p className="text-lg sm:text-xl font-medium text-white leading-relaxed break-words">
{activeCard.content}
</p>
</div>
@@ -310,18 +310,18 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
activeCard.tags.map((tag) => (
<span
key={tag}
className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#a8c7fa] border border-white/[0.06] text-xs flex items-center gap-1"
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"
>
<Tag className="w-2.5 h-2.5" />#{tag}
</span>
))
) : (
<span className="text-xs text-[#8e918f]">Wische links oder rechts</span>
<span className="text-xs text-zinc-400">Wische links oder rechts</span>
)}
</div>
{activeCard.dueDate && (
<span className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.06] text-xs">
<span className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
📅 {activeCard.dueDate}
</span>
)}
@@ -332,9 +332,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Task Date Picker Popover */}
{showDateModal && (
<div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043] flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-2 text-xs text-[#c4c7c5]">
<Calendar className="w-4 h-4 text-[#a8c7fa]" />
<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="flex items-center gap-2 text-xs text-zinc-300">
<Calendar className="w-4 h-4 text-[#1d8cf8]" />
<span>Fälligkeitsdatum für Aufgabe:</span>
</div>
<div className="flex items-center gap-2">
@@ -342,11 +342,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
type="date"
value={taskDueDate}
onChange={(e) => setTaskDueDate(e.target.value)}
className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none"
className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
/>
<button
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
className="px-3.5 py-1 rounded-full bg-[#a8dab5] text-[#072711] font-medium text-xs hover:bg-[#b8e3c3]"
className="px-3.5 py-1 rounded-full bg-[#22c55e] text-white font-medium text-xs hover:bg-[#16a34a] transition-colors"
>
Speichern
</button>
@@ -356,8 +356,8 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Shopping List Item Popover */}
{showListSelector && (
<div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043]">
<p className="text-xs text-[#8e918f] mb-2">
<div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08]">
<p className="text-xs text-zinc-400 mb-2">
In welche Liste verschieben?
</p>
<div className="flex flex-wrap gap-1.5">
@@ -368,26 +368,26 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
onClick={() =>
handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
}
className="px-3 py-1.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.06] text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
className="px-3 py-1.5 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-xs text-zinc-200 flex items-center gap-1.5 transition-colors"
>
<span>{lst.icon}</span>
<span>{lst.title}</span>
</button>
))
) : (
<span className="text-xs text-[#8e918f]">Keine Listen vorhanden.</span>
<span className="text-xs text-zinc-400">Keine Listen vorhanden.</span>
)}
</div>
</div>
)}
{/* Primary Triage Action Pills (Material 3 Tonal & Outlined) */}
{/* Primary Triage Action Pills */}
<div className="mt-5 flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
{/* Swipe Left: Discard */}
<button
onClick={() => handleAction('discard')}
title="Verwerfen (Taste H oder Pfeil links)"
className="h-10 px-4 rounded-full border border-[#f28b82]/30 text-[#f28b82] hover:bg-[#f28b82]/10 font-normal text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
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"
>
<X className="w-4 h-4" />
<span>Weg damit</span>
@@ -402,21 +402,21 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
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 ${
showDateModal
? 'bg-[#282a2c] text-[#a8c7fa] border-[#a8c7fa]/40 font-medium'
: 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
? '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]'
}`}
>
<Calendar className="w-3.5 h-3.5 text-[#a8c7fa]" />
<Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Termin-To-Do</span>
</button>
{/* Convert to Workspace Document */}
<button
onClick={() => handleAction('keep', { convertTo: 'document' })}
title="In Workspace-Notiz umwandeln (Taste D)"
className="h-10 px-3.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
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"
>
<FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
<FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Als Notiz</span>
</button>
@@ -429,11 +429,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
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 ${
showListSelector
? 'bg-[#282a2c] text-[#a8dab5] border-[#a8dab5]/40 font-medium'
: 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
? 'bg-[#22c55e]/20 text-[#22c55e] border-[#22c55e]/40 font-medium'
: 'bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border-white/[0.06]'
}`}
>
<ShoppingCart className="w-3.5 h-3.5 text-[#a8dab5]" />
<ShoppingCart className="w-3.5 h-3.5 text-[#22c55e]" />
<span>Auf Liste</span>
</button>
@@ -441,7 +441,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<button
onClick={() => handleAction('keep')}
title="Behalten & sichern (Taste L oder Pfeil rechts)"
className="h-10 px-4 rounded-full bg-[#a8dab5] hover:bg-[#b8e3c3] text-[#072711] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
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"
>
<Check className="w-4 h-4" />
<span>Behalten</span>
frontend/src/features/workspace/WorkspaceView.tsx
+52 -52
View File
@@ -209,19 +209,19 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<div className="lg:col-span-4 space-y-3">
<div className="flex items-center gap-2">
<div className="relative flex-1">
<Search className="w-4 h-4 text-[#8e918f] 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
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Notizen durchsuchen…"
className="w-full h-10 pl-9 pr-4 rounded-full bg-[#1e1f20] text-xs sm:text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
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"
/>
</div>
<button
onClick={handleCreateDoc}
className="h-10 px-4 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors flex-shrink-0"
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"
>
<Plus className="w-4 h-4" />
<span>Neu</span>
@@ -235,36 +235,36 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
key={doc.id}
onClick={() => setSelectedDoc(doc)}
className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-colors flex items-start justify-between gap-3 ${
className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-all flex items-start justify-between gap-3 ${
active
? 'bg-[#282a2c] border border-white/[0.12]'
: 'bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-transparent'
? 'bg-[#282a2f] border border-[#1d8cf8]/70 shadow-sm'
: 'bg-[#222428] hover:bg-[#282a2f] border border-white/[0.06]'
}`}
>
<div className="flex items-start gap-3 min-w-0">
<span className="text-2xl flex-shrink-0">{doc.icon}</span>
<div className="min-w-0">
<h4 className="font-medium text-sm text-[#e3e3e3] truncate">{doc.title}</h4>
<p className="text-xs text-[#8e918f] truncate mt-0.5">
<h4 className="font-medium text-sm text-white truncate">{doc.title}</h4>
<p className="text-xs text-zinc-400 truncate mt-0.5">
{doc.blocks?.[0]?.content || 'Leeres Dokument'}
</p>
</div>
</div>
{doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#a8c7fa] flex-shrink-0 mt-1" />}
{doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0 mt-1" />}
</button>
);
})}
</div>
</div>
{/* Right Notion-Flair Block Editor */}
{/* Right Block Editor */}
<div className="lg:col-span-8">
{selectedDoc ? (
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
{/* 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 items-center gap-2 text-xs text-[#8e918f]">
<span className="px-3 py-1 rounded-full bg-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1 font-medium">
<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">
<Check className="w-3 h-3" />
{saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'}
</span>
@@ -278,8 +278,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
}
className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
selectedDoc.isPinned
? 'bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25'
: 'bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3]'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
: 'bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-zinc-300 hover:text-white'
}`}
>
<Pin className="w-3.5 h-3.5" />
@@ -288,15 +288,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
onClick={handleExportMarkdown}
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-xs text-zinc-200 hover:text-white flex items-center gap-1.5 transition-colors"
>
<Download className="w-3.5 h-3.5 text-[#a8c7fa]" />
<Download className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Markdown (.md)</span>
</button>
<button
onClick={() => handleDeleteDoc(selectedDoc.id)}
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 border border-white/[0.06] text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
@@ -308,14 +308,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => setShowIconPicker((prev) => !prev)}
className="w-12 h-12 rounded-2xl bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
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"
title="Icon ändern"
>
{selectedDoc.icon}
</button>
{showIconPicker && (
<div className="absolute top-14 left-0 z-20 p-2.5 rounded-2xl bg-[#1e1f20] border border-white/[0.12] shadow-lg flex flex-wrap gap-1.5 w-64">
<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">
{ICONS.map((ic) => (
<button
key={ic}
@@ -324,7 +324,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
persistDocument({ ...selectedDoc, icon: ic });
setShowIconPicker(false);
}}
className="w-9 h-9 rounded-full hover:bg-[#282a2c] text-lg flex items-center justify-center transition-colors"
className="w-9 h-9 rounded-full hover:bg-[#2b2d33] text-lg flex items-center justify-center transition-colors"
>
{ic}
</button>
@@ -337,7 +337,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={selectedDoc.title}
onChange={(e) => persistDocument({ ...selectedDoc, title: e.target.value })}
placeholder="Dokument-Titel…"
className="w-full bg-transparent text-2xl sm:text-3xl font-semibold text-[#e3e3e3] focus:outline-none"
className="w-full bg-transparent text-2xl sm:text-3xl font-bold text-white focus:outline-none"
/>
</div>
@@ -353,7 +353,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Überschrift 1…"
className="w-full bg-transparent text-2xl font-semibold text-[#e3e3e3] focus:outline-none py-1"
className="w-full bg-transparent text-2xl font-bold text-white focus:outline-none py-1"
/>
)}
@@ -363,7 +363,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Abschnitts-Überschrift…"
className="w-full bg-transparent text-lg font-medium text-[#a8c7fa] focus:outline-none pt-2 pb-1"
className="w-full bg-transparent text-lg font-semibold text-[#1d8cf8] focus:outline-none pt-2 pb-1"
/>
)}
@@ -373,7 +373,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Text schreiben…"
className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] leading-relaxed focus:outline-none resize-none font-normal"
className="w-full bg-transparent text-sm sm:text-base text-zinc-200 leading-relaxed focus:outline-none resize-none font-normal"
/>
)}
@@ -383,7 +383,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
type="checkbox"
checked={!!block.checked}
onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
className="w-4 h-4 rounded accent-[#a8dab5] cursor-pointer"
className="w-4 h-4 rounded accent-[#22c55e] cursor-pointer"
/>
<input
type="text"
@@ -391,7 +391,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="To-Do Punkt…"
className={`w-full bg-transparent text-sm sm:text-base focus:outline-none ${
block.checked ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
block.checked ? 'line-through text-zinc-500' : 'text-white'
}`}
/>
</div>
@@ -399,32 +399,32 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{block.type === 'bullet' && (
<div className="flex items-center gap-3 py-0.5">
<span className="w-1.5 h-1.5 rounded-full bg-[#a8c7fa] flex-shrink-0" />
<span className="w-1.5 h-1.5 rounded-full bg-[#1d8cf8] flex-shrink-0" />
<input
type="text"
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Listenpunkt…"
className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] focus:outline-none"
className="w-full bg-transparent text-sm sm:text-base text-zinc-200 focus:outline-none"
/>
</div>
)}
{block.type === 'callout' && (
<div className="p-4 rounded-2xl bg-[#131314] border border-[#a8c7fa]/25 flex items-start gap-3">
<Sparkles className="w-4 h-4 text-[#a8c7fa] flex-shrink-0 mt-1" />
<div className="p-4 rounded-2xl bg-[#16171a] border border-[#1d8cf8]/30 flex items-start gap-3">
<Sparkles className="w-4 h-4 text-[#1d8cf8] flex-shrink-0 mt-1" />
<textarea
rows={2}
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Wichtiger Hinweis oder Zusammenfassung…"
className="w-full bg-transparent text-sm text-[#e3e3e3] focus:outline-none resize-none"
className="w-full bg-transparent text-sm text-zinc-200 focus:outline-none resize-none"
/>
</div>
)}
{block.type === 'code' && (
<div className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#a8dab5]">
<div className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#22c55e]">
<textarea
rows={Math.max(2, block.content.split('\n').length)}
value={block.content}
@@ -441,7 +441,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, -1)}
className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
className="p-1 rounded-full hover:bg-[#2b2d33] text-zinc-400 hover:text-white transition-colors"
title="Nach oben"
>
<ArrowUp className="w-3.5 h-3.5" />
@@ -449,7 +449,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, 1)}
className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
className="p-1 rounded-full hover:bg-[#2b2d33] text-zinc-400 hover:text-white transition-colors"
title="Nach unten"
>
<ArrowDown className="w-3.5 h-3.5" />
@@ -457,7 +457,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => removeBlock(block.id)}
className="p-1 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] transition-colors"
className="p-1 rounded-full hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] transition-colors"
title="Block entfernen"
>
<Trash2 className="w-3.5 h-3.5" />
@@ -469,67 +469,67 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Add Block Pill Toolbar */}
<div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2">
<span className="text-xs text-[#8e918f] mr-1">+ Block einfügen:</span>
<span className="text-xs text-zinc-400 mr-1">+ Block einfügen:</span>
<button
type="button"
onClick={() => addBlock('paragraph')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] 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"
>
<AlignLeft className="w-3.5 h-3.5 text-[#a8c7fa]" /> Text
<AlignLeft className="w-3.5 h-3.5 text-[#1d8cf8]" /> Text
</button>
<button
type="button"
onClick={() => addBlock('h2')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] 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"
>
<Heading2 className="w-3.5 h-3.5 text-[#a8c7fa]" /> Überschrift
<Heading2 className="w-3.5 h-3.5 text-[#1d8cf8]" /> Überschrift
</button>
<button
type="button"
onClick={() => addBlock('todo')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] 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"
>
<CheckSquare className="w-3.5 h-3.5 text-[#a8dab5]" /> Checkliste
<CheckSquare className="w-3.5 h-3.5 text-[#22c55e]" /> Checkliste
</button>
<button
type="button"
onClick={() => addBlock('bullet')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] 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"
>
<List className="w-3.5 h-3.5 text-[#a8c7fa]" /> Aufzählung
<List className="w-3.5 h-3.5 text-[#1d8cf8]" /> Aufzählung
</button>
<button
type="button"
onClick={() => addBlock('callout')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] 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"
>
<Sparkles className="w-3.5 h-3.5 text-[#a8c7fa]" /> Callout
<Sparkles className="w-3.5 h-3.5 text-[#a855f7]" /> Callout
</button>
<button
type="button"
onClick={() => addBlock('code')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] 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"
>
<Code className="w-3.5 h-3.5 text-[#a8dab5]" /> Codeblock
<Code className="w-3.5 h-3.5 text-[#22c55e]" /> Codeblock
</button>
<button
type="button"
onClick={() => addBlock('h1')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] 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"
>
<Heading1 className="w-3.5 h-3.5 text-[#a8c7fa]" /> H1
<Heading1 className="w-3.5 h-3.5 text-[#1d8cf8]" /> H1
</button>
</div>
</div>
) : (
<div className="p-12 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f]">
<div className="p-12 rounded-3xl bg-[#222428] border border-white/[0.08] text-center text-zinc-400">
Wähle links ein Dokument aus oder erstelle ein neues Projekt.
</div>
)}
frontend/src/index.css
+23 -21
View File
@@ -3,27 +3,28 @@
@tailwind utilities;
:root {
/* Google Gemini / Material 3 Dark Palette */
--bg-canvas: #131314;
--bg-surface: #1e1f20;
--bg-surface-elevated: #282a2c;
--bg-surface-hover: #333537;
/* Template Dark Palette */
--bg-canvas: #16171a;
--bg-surface: #222428;
--bg-surface-elevated: #282a2f;
--bg-surface-hover: #32353b;
--border-subtle: rgba(255, 255, 255, 0.08);
--border-medium: #3c4043;
--border-focus: #a8c7fa;
--border-subtle: rgba(255, 255, 255, 0.07);
--border-active-green: rgba(34, 197, 94, 0.65);
--border-focus: #1d8cf8;
--color-primary: #a8c7fa;
--color-primary-container: #004a77;
--color-on-primary-container: #d3e3fd;
--color-primary: #1d8cf8;
--color-primary-hover: #3b9cfc;
--color-on-primary: #ffffff;
--color-success: #a8dab5;
--color-danger: #f28b82;
--color-warning: #fdd663;
--color-success: #22c55e;
--color-danger: #ef4444;
--color-warning: #f97316;
--color-purple: #a855f7;
--text-primary: #e3e3e3;
--text-secondary: #c4c7c5;
--text-tertiary: #8e918f;
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--text-tertiary: #71717a;
}
* {
@@ -38,7 +39,7 @@ body {
overflow-x: hidden;
}
/* Subtle Material scrollbar */
/* Subtle clean scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
@@ -57,10 +58,11 @@ body {
background: rgba(255, 255, 255, 0.22);
}
.gemini-border {
.border-subtle {
border: 1px solid var(--border-subtle);
}
.gemini-border-medium {
border: 1px solid var(--border-medium);
.card-surface {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
}
frontend/tailwind.config.js
+19 -16
View File
@@ -5,22 +5,24 @@ export default {
theme: {
extend: {
colors: {
gemini: {
canvas: '#131314',
surface: '#1e1f20',
elevated: '#282a2c',
hover: '#333537',
border: '#3c4043',
subtle: 'rgba(255, 255, 255, 0.08)',
blue: '#a8c7fa',
blueContainer: '#004a77',
blueOnContainer: '#d3e3fd',
green: '#a8dab5',
red: '#f28b82',
yellow: '#fdd663',
text: '#e3e3e3',
secondary: '#c4c7c5',
tertiary: '#8e918f',
canvas: '#16171a',
surface: {
DEFAULT: '#222428',
elevated: '#282a2f',
hover: '#32353b',
border: 'rgba(255, 255, 255, 0.07)',
},
brand: {
DEFAULT: '#1d8cf8',
hover: '#3b9cfc',
dark: '#0066cc',
},
accent: {
green: '#22c55e',
orange: '#f97316',
purple: '#a855f7',
red: '#ef4444',
yellow: '#eab308',
},
},
fontFamily: {
@@ -30,6 +32,7 @@ export default {
boxShadow: {
soft: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2)',
card: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)',
glowBlue: '0 0 20px -3px rgba(29, 140, 248, 0.35)',
},
},
},