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

Dev #1

Merged
sandrodach merged 20 commits from dev into main 2026-10-25 01:03:04 +02:00
Conversation 0 Commits 20 Files Changed 38
+413 -444
11 changed files with 413 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 31aa43c460 - Show all commits

No files matched your search

BRAIN.md
+22 -19
View File
@@ -5,34 +5,37 @@
## 🎨 1. Design-Tokens & Gemini-Dark-Theme (Copy & Paste) ## 🎨 1. Design-Tokens & Gemini-Dark-Theme (Copy & Paste)
### Farbpalette (Strict Hex Values) ### Farbpalette (Strict Hex Values - Google Gemini Material 3 Dark)
```css ```css
/* Backgrounds */ /* Backgrounds (Material 3 Dark Theme) */
--bg-app: #0b0f19; /* Tiefstes Obsidian / OLED Base */ --bg-canvas: #131314; /* Google Gemini Canvas */
--bg-surface: #131314; /* Leicht erhobene Panels, Sidebar */ --bg-surface: #1e1f20; /* Surface Container (Karten, Dialoge, Panels) */
--bg-card: #1e1f20; /* Swipe-Karten, Dialoge, Dropdowns */ --bg-elevated: #282a2c; /* Elevated Container / Tonal Chips / Hover */
--bg-card-hover: #282a2c; /* Hover-Zustände */ --bg-field: #131314; /* Input Field Fill */
/* Borders & Dividers */ /* Borders & Dividers */
--border-subtle: rgba(255, 255, 255, 0.08); /* 1px Standard-Kante */ --border-subtle: rgba(255, 255, 255, 0.08); /* 1px Hairline Kante */
--border-focus: rgba(138, 180, 248, 0.40); /* Gemini Blue Glow */ --border-focus: rgba(168, 199, 250, 0.40); /* Gemini Primary Blue Hairline */
/* Akzente & Status */ /* Akzente & Status (Material 3 Soft Pastels - KEINE grellen AI-Farbverläufe) */
--accent-blue: #8ab4f8; /* Gemini Primärblau (Buttons, Links, Active) */ --color-primary: #a8c7fa; /* Google Gemini Primary Blue */
--accent-purple: #c58af9; /* Gemini Voice / Magic Glow */ --color-on-pri: #041e49; /* Text on Primary Container */
--swipe-keep: #81c995; /* Swipe Rechts (Behalten / ToDo / Success) */ --color-success: #a8dab5; /* Soft Green (Check / Kept) */
--swipe-discard: #f28b82; /* Swipe Links (Verwerfen / Archive / Danger) */ --color-danger: #f28b82; /* Soft Coral Red (Discard / Delete) */
--color-warning: #fdd663; /* Warm Amber */
/* Typografie */ /* Typografie */
--text-primary: #e3e3e3; /* Haupttext (hoher Kontrast, augenschonend) */ --text-primary: #e3e3e3; /* High Emphasis */
--text-muted: #9aa0a6; /* Sekundärtexte, Metadaten, Placeholders */ --text-secondary: #c4c7c5; /* Medium Emphasis */
--text-subtle: #5f6368; /* Timestamps, Footer, Deaktiviert */ --text-muted: #8e918f; /* Low Emphasis / Subtle */
``` ```
### UI-Regeln & Radien ### UI-Regeln & Radien
* **Buttons / Pills:** Ausnahmslos `rounded-full` (`border-radius: 9999px`). * **Keine grellen Farbverläufe:** Niemals Blau-zu-Lila-Gradienten wie billige AI-Templates. Strikte neutrale Anthrazit-Flächen mit sanften Pastell-Akzenten.
* **Karten (Triage Deck):** `rounded-3xl` (`24px`), Padding `p-6`, Border `1px solid var(--border-subtle)`. * **Keine grellen Glow-Schatten:** Keine starken farbigen Drop-Shadows oder Neon-Glows. Feine `border: 1px solid rgba(255,255,255,0.08)` Hairlines nutzen.
* **Input-Feld (Instant Capture):** `rounded-full`, Höhe `h-14` (56px) für mobile Daumenbedienung, Autofokus bei Mount. * **Buttons / Pills:** `rounded-full` (`border-radius: 9999px`) für Filter, Actions und Navigation.
* **Karten:** `rounded-2xl` (`16px`) oder `rounded-3xl` (`24px`), Padding `p-5` bis `p-6`, Border `1px solid rgba(255, 255, 255, 0.08)`.
* **Input-Feld (Instant Capture):** Prompt-Box-Stil wie Google Gemini, Höhe `h-14` (56px) für mobile Daumenbedienung, Autofokus bei Mount.
* **Gesten-Physik (Framer Motion):** * **Gesten-Physik (Framer Motion):**
* Swipe-Schwellenwert: `dragConstraints={{ left: -150, right: 150 }}` * Swipe-Schwellenwert: `dragConstraints={{ left: -150, right: 150 }}`
* Spring-Config: `{ type: "spring", stiffness: 350, damping: 25 }` * Spring-Config: `{ type: "spring", stiffness: 350, damping: 25 }`
docker-compose.yml
+1 -1
View File
@@ -3,7 +3,7 @@ services:
build: build:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
image: git.dsit.me/sandrodach/mindsift:latest image: git.dsit.me/sandrodach/mindsift:dev
container_name: mindsift container_name: mindsift
restart: unless-stopped restart: unless-stopped
ports: ports:
frontend/src/App.tsx
+61 -86
View File
@@ -8,7 +8,6 @@ import {
Brain, Brain,
LogOut, LogOut,
User as UserIcon, User as UserIcon,
Sparkles,
} from 'lucide-react'; } from 'lucide-react';
import { DashboardStats, SharedList, Thought, User } from './lib/types'; import { DashboardStats, SharedList, Thought, User } from './lib/types';
import { api, clearToken, getToken } from './lib/api'; import { api, clearToken, getToken } from './lib/api';
@@ -128,12 +127,9 @@ export const App: React.FC = () => {
}; };
return ( return (
<div className="min-h-screen bg-[#0b0f19] text-[#e3e3e3] flex flex-col"> <div className="min-h-screen bg-[#131314] text-[#e3e3e3] flex flex-col font-sans">
{/* Ambient Top Gemini Glow */}
<div className="pointer-events-none fixed top-0 left-1/2 -translate-x-1/2 w-[560px] h-[180px] bg-gradient-to-r from-[#8ab4f8]/10 via-[#c58af9]/10 to-[#81c995]/10 blur-3xl -z-10" />
{/* Header Bar */} {/* Header Bar */}
<header className="sticky top-0 z-30 backdrop-blur-xl bg-[#0b0f19]/85 border-b border-white/[0.06]"> <header className="sticky top-0 z-30 bg-[#131314]/95 backdrop-blur-md border-b border-white/[0.08]">
<div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4"> <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
{/* Brand Logo */} {/* Brand Logo */}
<div <div
@@ -141,17 +137,17 @@ export const App: React.FC = () => {
setActiveTab('triage'); setActiveTab('triage');
setCaptureFocusCount((c) => c + 1); setCaptureFocusCount((c) => c + 1);
}} }}
className="flex items-center gap-2.5 cursor-pointer group" className="flex items-center gap-2.5 cursor-pointer group select-none"
> >
<div className="w-9 h-9 rounded-full bg-[#1e1f20] gemini-border flex items-center justify-center group-hover:border-[#8ab4f8]/50 transition-colors"> <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-5 h-5 text-[#8ab4f8]" /> <Brain className="w-4 h-4 text-[#a8c7fa]" />
</div> </div>
<div> <div className="flex items-baseline gap-2">
<span className="font-bold text-lg tracking-tight gemini-gradient-text"> <span className="font-semibold text-base sm:text-lg text-[#e3e3e3] tracking-tight">
MindSift MindSift
</span> </span>
<span className="hidden md:inline-block ml-2.5 text-xs text-[#9aa0a6]"> <span className="hidden md:inline-block text-xs text-[#8e918f]">
Der Kopf frei in drei Sekunden. Der Kopf frei in drei Sekunden
</span> </span>
</div> </div>
</div> </div>
@@ -160,10 +156,10 @@ export const App: React.FC = () => {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
onClick={() => setShowAuthModal(true)} onClick={() => setShowAuthModal(true)}
className="h-9 px-3.5 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs font-medium text-[#e3e3e3] flex items-center gap-2 transition-colors" 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 Familienmitglied registrieren" title="Benutzer wechseln oder Profil anpassen"
> >
<UserIcon className="w-3.5 h-3.5 text-[#8ab4f8]" /> <UserIcon className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span>{user?.displayName || 'Lokal'}</span> <span>{user?.displayName || 'Lokal'}</span>
</button> </button>
</div> </div>
@@ -171,35 +167,29 @@ export const App: React.FC = () => {
</header> </header>
{/* Main Content Container */} {/* Main Content Container */}
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-24"> <main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-20">
{/* Global Instant Capture Section (Always Ready at Top) */} {/* Global Instant Capture Section */}
<section className="mb-7"> <section className="mb-6">
<InstantCaptureBar <InstantCaptureBar
onCaptured={handleCaptured} onCaptured={handleCaptured}
autoFocusTrigger={captureFocusCount} autoFocusTrigger={captureFocusCount}
/> />
</section> </section>
{/* Pill Navigation Tabs */} {/* Google Material 3 Navigation Chips */}
<nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar"> <nav className="flex items-center justify-start sm:justify-center gap-1.5 overflow-x-auto pb-2 mb-8 no-scrollbar">
<button <button
onClick={() => setActiveTab('triage')} onClick={() => setActiveTab('triage')}
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${ className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
activeTab === 'triage' activeTab === 'triage'
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm' ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
}`} }`}
> >
<Layers className="w-4 h-4" /> <Layers className="w-4 h-4 text-[#a8c7fa]" />
<span>Triage-Deck</span> <span>Triage-Deck</span>
{stats.inboxCount > 0 && ( {stats.inboxCount > 0 && (
<span <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06]">
className={`px-2 py-0.5 rounded-full text-xs font-bold ${
activeTab === 'triage'
? 'bg-[#0b0f19] text-[#8ab4f8]'
: 'bg-[#8ab4f8]/20 text-[#8ab4f8]'
}`}
>
{stats.inboxCount} {stats.inboxCount}
</span> </span>
)} )}
@@ -207,22 +197,16 @@ export const App: React.FC = () => {
<button <button
onClick={() => setActiveTab('tasks')} onClick={() => setActiveTab('tasks')}
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${ className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
activeTab === 'tasks' activeTab === 'tasks'
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm' ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
}`} }`}
> >
<CheckSquare className="w-4 h-4" /> <CheckSquare className="w-4 h-4 text-[#a8dab5]" />
<span>Aufgaben</span> <span>Aufgaben</span>
{stats.tasksOpenCount > 0 && ( {stats.tasksOpenCount > 0 && (
<span <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8dab5] border border-white/[0.06]">
className={`px-2 py-0.5 rounded-full text-xs font-bold ${
activeTab === 'tasks'
? 'bg-[#0b0f19] text-[#8ab4f8]'
: 'bg-[#81c995]/20 text-[#81c995]'
}`}
>
{stats.tasksOpenCount} {stats.tasksOpenCount}
</span> </span>
)} )}
@@ -230,46 +214,40 @@ export const App: React.FC = () => {
<button <button
onClick={() => setActiveTab('workspace')} onClick={() => setActiveTab('workspace')}
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${ className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
activeTab === 'workspace' activeTab === 'workspace'
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm' ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
}`} }`}
> >
<FileText className="w-4 h-4" /> <FileText className="w-4 h-4 text-[#a8c7fa]" />
<span>Workspace</span> <span>Workspace</span>
<span <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#8e918f] border border-white/[0.06]">
className={`px-2 py-0.5 rounded-full text-xs ${
activeTab === 'workspace'
? 'bg-[#0b0f19] text-[#8ab4f8]'
: 'bg-[#1e1f20] text-[#9aa0a6]'
}`}
>
{stats.docsCount} {stats.docsCount}
</span> </span>
</button> </button>
<button <button
onClick={() => setActiveTab('lists')} onClick={() => setActiveTab('lists')}
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${ className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
activeTab === 'lists' activeTab === 'lists'
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm' ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
}`} }`}
> >
<ShoppingCart className="w-4 h-4" /> <ShoppingCart className="w-4 h-4 text-[#a8dab5]" />
<span>Geteilte Listen</span> <span>Geteilte Listen</span>
</button> </button>
<button <button
onClick={() => setActiveTab('ecosystem')} onClick={() => setActiveTab('ecosystem')}
className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${ className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
activeTab === 'ecosystem' activeTab === 'ecosystem'
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm' ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
: 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
}`} }`}
> >
<Webhook className="w-4 h-4" /> <Webhook className="w-4 h-4 text-[#fdd663]" />
<span>Webhooks & Export</span> <span>Webhooks & Export</span>
</button> </button>
</nav> </nav>
@@ -312,29 +290,26 @@ export const App: React.FC = () => {
{/* Account Switcher / Registration Modal */} {/* Account Switcher / Registration Modal */}
{showAuthModal && ( {showAuthModal && (
<div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4"> <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
<div className="w-full max-w-md p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth"> <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"> <div className="flex items-center justify-between mb-5">
<div className="flex items-center gap-2"> <h3 className="text-base font-semibold text-[#e3e3e3]">
<Sparkles className="w-5 h-5 text-[#8ab4f8]" /> {authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
<h3 className="text-lg font-bold text-[#e3e3e3]"> </h3>
{authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
</h3>
</div>
<button <button
onClick={() => setShowAuthModal(false)} onClick={() => setShowAuthModal(false)}
className="px-3 py-1 rounded-full bg-[#282a2c] text-xs text-[#9aa0a6] hover:text-[#e3e3e3]" className="px-2.5 py-1 rounded-full bg-[#282a2c] text-xs text-[#c4c7c5] hover:text-[#e3e3e3]"
> >
Schließen Schließen
</button> </button>
</div> </div>
{user && ( {user && (
<div className="mb-5 p-3.5 rounded-2xl bg-[#131314] gemini-border flex items-center justify-between"> <div className="mb-4 p-3 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between">
<div className="text-xs"> <div className="text-xs">
<span className="text-[#9aa0a6]">Aktuell aktiv: </span> <span className="text-[#8e918f]">Aktiv: </span>
<strong className="text-[#e3e3e3]">{user.displayName}</strong> <strong className="text-[#e3e3e3]">{user.displayName}</strong>
<span className="text-[#5f6368] ml-1">({user.email})</span> <span className="text-[#8e918f] ml-1">({user.email})</span>
</div> </div>
<button <button
type="button" type="button"
@@ -344,7 +319,7 @@ export const App: React.FC = () => {
await refreshAll(); await refreshAll();
setShowAuthModal(false); setShowAuthModal(false);
}} }}
className="text-xs text-[#8ab4f8] hover:underline flex items-center gap-1" className="text-xs text-[#a8c7fa] hover:underline flex items-center gap-1"
> >
<LogOut className="w-3 h-3" /> Standard <LogOut className="w-3 h-3" /> Standard
</button> </button>
@@ -355,10 +330,10 @@ export const App: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => setAuthMode('login')} onClick={() => setAuthMode('login')}
className={`flex-1 h-9 rounded-full text-xs font-semibold ${ className={`flex-1 h-8 rounded-full text-xs font-medium ${
authMode === 'login' authMode === 'login'
? 'bg-[#8ab4f8] text-[#0b0f19]' ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
: 'bg-[#131314] text-[#9aa0a6]' : 'text-[#8e918f] hover:text-[#e3e3e3]'
}`} }`}
> >
Anmelden Anmelden
@@ -366,10 +341,10 @@ export const App: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => setAuthMode('register')} onClick={() => setAuthMode('register')}
className={`flex-1 h-9 rounded-full text-xs font-semibold ${ className={`flex-1 h-8 rounded-full text-xs font-medium ${
authMode === 'register' authMode === 'register'
? 'bg-[#8ab4f8] text-[#0b0f19]' ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
: 'bg-[#131314] text-[#9aa0a6]' : 'text-[#8e918f] hover:text-[#e3e3e3]'
}`} }`}
> >
Registrieren Registrieren
@@ -383,7 +358,7 @@ export const App: React.FC = () => {
value={displayName} value={displayName}
onChange={(e) => setDisplayName(e.target.value)} onChange={(e) => setDisplayName(e.target.value)}
placeholder="Anzeigename (z. B. Lisa)" placeholder="Anzeigename (z. B. Lisa)"
className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none" 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"
required required
/> />
)} )}
@@ -392,7 +367,7 @@ export const App: React.FC = () => {
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="E-Mail-Adresse" placeholder="E-Mail-Adresse"
className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none" 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"
required required
/> />
<input <input
@@ -400,7 +375,7 @@ export const App: React.FC = () => {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Passwort (mind. 4 Zeichen)" placeholder="Passwort (mind. 4 Zeichen)"
className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none" 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"
required required
/> />
@@ -408,9 +383,9 @@ export const App: React.FC = () => {
<button <button
type="submit" type="submit"
className="w-full h-11 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors" className="w-full h-10 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm hover:bg-[#b8d4ff] transition-colors"
> >
{authMode === 'login' ? 'Einloggen' : 'Konto erstellen & starten'} {authMode === 'login' ? 'Einloggen' : 'Konto erstellen'}
</button> </button>
</form> </form>
</div> </div>
frontend/src/features/capture/InstantCaptureBar.tsx
+33 -39
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Mic, MicOff, Send, Sparkles, Calendar, AlertTriangle, CheckCircle2 } from 'lucide-react'; import { Mic, MicOff, ArrowUp, Sparkles, Calendar, Check } from 'lucide-react';
import { PriorityLevel, Thought } from '../../lib/types'; import { PriorityLevel, Thought } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api'; import { api, triggerHaptic } from '../../lib/api';
@@ -122,7 +122,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
setDueDate(''); setDueDate('');
setShowOptions(false); setShowOptions(false);
setJustSaved(true); setJustSaved(true);
setTimeout(() => setJustSaved(false), 1800); setTimeout(() => setJustSaved(false), 1600);
onCaptured(created); onCaptured(created);
inputRef.current?.focus(); inputRef.current?.focus();
} finally { } finally {
@@ -133,20 +133,15 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
return ( return (
<div className="w-full max-w-3xl mx-auto"> <div className="w-full max-w-3xl mx-auto">
<form onSubmit={handleSubmit} className="relative"> <form onSubmit={handleSubmit} className="relative">
{/* Google Gemini Style Input Capsule */}
<div <div
className={`flex items-center h-14 px-4 sm:px-5 rounded-full bg-[#1e1f20] gemini-border gemini-input-glow transition-all duration-200 ${ className={`flex items-center h-14 px-4 sm:px-5 rounded-full bg-[#1e1f20] border transition-colors duration-150 ${
isListening ? 'border-[#c58af9] shadow-purple-glow' : '' isListening
? 'border-[#a8c7fa] bg-[#1e1f20]'
: 'border-[#3c4043] focus-within:border-[#a8c7fa]'
}`} }`}
> >
<Sparkles <Sparkles className="w-4 h-4 mr-3 flex-shrink-0 text-[#a8c7fa]" />
className={`w-5 h-5 mr-3 flex-shrink-0 transition-colors ${
isListening
? 'text-[#c58af9] animate-pulse'
: justSaved
? 'text-[#81c995]'
: 'text-[#8ab4f8]'
}`}
/>
<input <input
ref={inputRef} ref={inputRef}
@@ -155,10 +150,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
onChange={(e) => setContent(e.target.value)} onChange={(e) => setContent(e.target.value)}
placeholder={ placeholder={
isListening isListening
? 'Ich höre zu… sprich deinen Gedanken aus' ? 'Ich höre zu…'
: 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)' : 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
} }
className="w-full bg-transparent text-[#e3e3e3] placeholder-[#9aa0a6] text-sm sm:text-base focus:outline-none" className="w-full bg-transparent text-[#e3e3e3] placeholder-[#8e918f] text-sm sm:text-base focus:outline-none"
autoComplete="off" autoComplete="off"
/> />
@@ -167,11 +162,11 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
<button <button
type="button" type="button"
onClick={() => setShowOptions((prev) => !prev)} onClick={() => setShowOptions((prev) => !prev)}
title="Priorität & Fälligkeitsdatum" title="Priorität & Fälligkeit"
className={`h-9 px-3 rounded-full text-xs font-medium flex items-center gap-1.5 transition-colors ${ className={`h-8 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
showOptions || priority !== 'normal' || dueDate showOptions || priority !== 'normal' || dueDate
? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40' ? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
: 'text-[#9aa0a6] hover:bg-[#282a2c] hover:text-[#e3e3e3]' : 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
}`} }`}
> >
<Calendar className="w-3.5 h-3.5" /> <Calendar className="w-3.5 h-3.5" />
@@ -180,39 +175,39 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
</span> </span>
</button> </button>
{/* Voice Dictation Pill Button */} {/* Voice Dictation Button */}
<button <button
type="button" type="button"
onClick={toggleVoiceDictation} onClick={toggleVoiceDictation}
title="Spracheingabe (Diktieren)" title="Spracheingabe"
className={`w-9 h-9 rounded-full flex items-center justify-center transition-all ${ className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
isListening isListening
? 'bg-[#c58af9] text-[#0b0f19] animate-pulse' ? 'bg-[#004a77]/50 text-[#a8c7fa]'
: 'bg-[#282a2c] text-[#9aa0a6] hover:text-[#e3e3e3] hover:bg-[#323538]' : 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
}`} }`}
> >
{isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />} {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
</button> </button>
{/* Instant Send Pill Button */} {/* Instant Send Button */}
<button <button
type="submit" type="submit"
disabled={!content.trim() || isSubmitting} disabled={!content.trim() || isSubmitting}
className={`h-9 px-4 rounded-full font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-all ${ className={`h-8 px-3.5 rounded-full font-medium text-xs flex items-center gap-1.5 transition-colors ${
content.trim() content.trim()
? 'bg-[#8ab4f8] text-[#0b0f19] hover:bg-[#a1c2fa] shadow-sm cursor-pointer' ? 'bg-[#a8c7fa] text-[#041e49] hover:bg-[#b8d4ff] cursor-pointer'
: 'bg-[#282a2c] text-[#5f6368] cursor-not-allowed' : 'bg-[#282a2c] text-[#8e918f] cursor-not-allowed'
}`} }`}
> >
{justSaved ? ( {justSaved ? (
<> <>
<CheckCircle2 className="w-4 h-4 text-[#0b0f19]" /> <Check className="w-3.5 h-3.5" />
<span className="hidden sm:inline">Gespeichert</span> <span className="hidden sm:inline">Gespeichert</span>
</> </>
) : ( ) : (
<> <>
<Send className="w-3.5 h-3.5" /> <ArrowUp className="w-3.5 h-3.5" />
<span className="hidden sm:inline">Einfrieren</span> <span className="hidden sm:inline">Sichern</span>
</> </>
)} )}
</button> </button>
@@ -221,10 +216,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
{/* Expandable Quick Metadata Pills */} {/* Expandable Quick Metadata Pills */}
{showOptions && ( {showOptions && (
<div className="mt-2.5 px-4 py-2.5 rounded-full bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-2 text-xs animate-fadeIn"> <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="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<AlertTriangle className="w-3.5 h-3.5 text-[#9aa0a6] mr-1" /> <span className="text-[#8e918f] mr-1">Priorität:</span>
<span className="text-[#9aa0a6] mr-1">Priorität:</span>
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => { {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
const labels: Record<PriorityLevel, string> = { const labels: Record<PriorityLevel, string> = {
low: 'Niedrig', low: 'Niedrig',
@@ -241,9 +235,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
className={`px-3 py-1 rounded-full transition-colors ${ className={`px-3 py-1 rounded-full transition-colors ${
active active
? p === 'urgent' ? p === 'urgent'
? 'bg-[#f28b82] text-[#0b0f19] font-semibold' ? 'bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40 font-medium'
: 'bg-[#8ab4f8] text-[#0b0f19] font-semibold' : 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30 font-medium'
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3]' : 'bg-[#131314] text-[#8e918f] hover:text-[#e3e3e3]'
}`} }`}
> >
{labels[p]} {labels[p]}
@@ -253,12 +247,12 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[#9aa0a6]">Fällig am:</span> <span className="text-[#8e918f]">Fällig am:</span>
<input <input
type="date" type="date"
value={dueDate} value={dueDate}
onChange={(e) => setDueDate(e.target.value)} onChange={(e) => setDueDate(e.target.value)}
className="bg-[#1e1f20] text-[#e3e3e3] px-3 py-1 rounded-full gemini-border text-xs focus:outline-none focus:border-[#8ab4f8]" className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none focus:border-[#a8c7fa]"
/> />
</div> </div>
</div> </div>
frontend/src/features/lists/SharedListsView.tsx
+58 -56
View File
@@ -266,16 +266,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
return ( return (
<div className="max-w-4xl mx-auto space-y-6"> <div className="max-w-4xl mx-auto space-y-6">
{/* Top Space Bar & Realtime Indicator */} {/* Top Space Bar & Realtime Indicator */}
<div className="p-4 sm:p-5 rounded-3xl bg-[#1e1f20] gemini-border flex flex-wrap items-center justify-between gap-3"> <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="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
{spaces.map((sp) => ( {spaces.map((sp) => (
<button <button
key={sp.id} key={sp.id}
onClick={() => setActiveSpace(sp)} onClick={() => setActiveSpace(sp)}
className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-all ${ 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 activeSpace?.id === sp.id
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm' ? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
: 'bg-[#131314] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'bg-[#131314] text-[#c4c7c5] hover:text-[#e3e3e3] border border-white/[0.08]'
}`} }`}
> >
<span>{sp.icon}</span> <span>{sp.icon}</span>
@@ -285,16 +285,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button <button
onClick={() => setShowNewSpaceModal((prev) => !prev)} onClick={() => setShowNewSpaceModal((prev) => !prev)}
className="h-10 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#8ab4f8] flex items-center gap-1" 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"
> >
<Plus className="w-3.5 h-3.5" /> Space <Plus className="w-3.5 h-3.5 text-[#a8c7fa]" /> Space
</button> </button>
<button <button
onClick={() => setShowJoinModal((prev) => !prev)} onClick={() => setShowJoinModal((prev) => !prev)}
className="h-10 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#c58af9] flex items-center gap-1" 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"
> >
<UserPlus className="w-3.5 h-3.5" /> Code einlösen <UserPlus className="w-3.5 h-3.5 text-[#a8c7fa]" /> Code einlösen
</button> </button>
</div> </div>
@@ -304,8 +304,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div <div
className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 ${ className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 ${
wsConnected wsConnected
? 'bg-[#81c995]/15 text-[#81c995] border border-[#81c995]/30' ? 'bg-[#a8dab5]/10 text-[#a8dab5] border border-[#a8dab5]/25'
: 'bg-[#282a2c] text-[#9aa0a6]' : 'bg-[#282a2c] text-[#8e918f] border border-white/[0.08]'
}`} }`}
> >
<Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} /> <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
@@ -315,14 +315,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button <button
onClick={copyInviteCode} onClick={copyInviteCode}
title="Einladungscode für Partner oder Familie kopieren" title="Einladungscode für Partner oder Familie kopieren"
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5" 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"
> >
<Users className="w-3.5 h-3.5 text-[#8ab4f8]" /> <Users className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span>Code: {activeSpace.inviteCode}</span> <span>Code: {activeSpace.inviteCode}</span>
{copiedInvite ? ( {copiedInvite ? (
<Check className="w-3.5 h-3.5 text-[#81c995]" /> <Check className="w-3.5 h-3.5 text-[#a8dab5]" />
) : ( ) : (
<Copy className="w-3 h-3 text-[#9aa0a6]" /> <Copy className="w-3 h-3 text-[#8e918f]" />
)} )}
</button> </button>
</div> </div>
@@ -333,19 +333,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewSpaceModal && ( {showNewSpaceModal && (
<form <form
onSubmit={handleCreateSpace} onSubmit={handleCreateSpace}
className="p-4 rounded-3xl bg-[#131314] gemini-border flex items-center gap-3" className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center gap-3"
> >
<input <input
type="text" type="text"
value={newSpaceName} value={newSpaceName}
onChange={(e) => setNewSpaceName(e.target.value)} onChange={(e) => setNewSpaceName(e.target.value)}
placeholder="Name des neuen Familien-/Team-Spaces (z. B. Sommerurlaub 2027)…" placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
className="flex-1 h-10 px-4 rounded-full bg-[#1e1f20] text-sm text-[#e3e3e3] gemini-border focus:outline-none" 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"
autoFocus autoFocus
/> />
<button <button
type="submit" type="submit"
className="h-10 px-5 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm" className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
> >
Space anlegen Space anlegen
</button> </button>
@@ -355,19 +355,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showJoinModal && ( {showJoinModal && (
<form <form
onSubmit={handleJoinSpace} onSubmit={handleJoinSpace}
className="p-4 rounded-3xl bg-[#131314] gemini-border flex items-center gap-3" className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center gap-3"
> >
<input <input
type="text" type="text"
value={joinCode} value={joinCode}
onChange={(e) => setJoinCode(e.target.value)} onChange={(e) => setJoinCode(e.target.value)}
placeholder="Invite-Code des Partners eingeben…" placeholder="Invite-Code des Partners eingeben…"
className="flex-1 h-10 px-4 rounded-full bg-[#1e1f20] text-sm text-[#e3e3e3] gemini-border focus:outline-none uppercase" 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"
autoFocus autoFocus
/> />
<button <button
type="submit" type="submit"
className="h-10 px-5 rounded-full bg-[#c58af9] text-[#0b0f19] font-semibold text-xs sm:text-sm" className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
> >
Beitreten Beitreten
</button> </button>
@@ -383,15 +383,15 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button <button
key={lst.id} key={lst.id}
onClick={() => setActiveListId(lst.id)} onClick={() => setActiveListId(lst.id)}
className={`h-11 px-5 rounded-full text-sm font-medium flex items-center gap-2 transition-all ${ className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors ${
isSelected isSelected
? 'bg-[#1e1f20] text-[#8ab4f8] border border-[#8ab4f8]/50 shadow-gemini-glow' ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
: 'bg-[#131314] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'bg-[#131314] text-[#c4c7c5] hover:text-[#e3e3e3] border border-white/[0.08]'
}`} }`}
> >
<span>{lst.icon}</span> <span>{lst.icon}</span>
<span>{lst.title}</span> <span>{lst.title}</span>
<span className="px-2 py-0.5 rounded-full bg-[#0b0f19] text-xs text-[#8ab4f8]"> <span className="px-2 py-0.2 rounded-full bg-[#131314] text-xs text-[#a8c7fa] border border-white/[0.06]">
{openCount} {openCount}
</span> </span>
</button> </button>
@@ -400,9 +400,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button <button
onClick={() => setShowNewListModal((prev) => !prev)} onClick={() => setShowNewListModal((prev) => !prev)}
className="h-11 px-4 rounded-full bg-[#131314] hover:bg-[#1e1f20] gemini-border text-xs sm:text-sm text-[#e3e3e3] flex items-center gap-1.5" 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"
> >
<Plus className="w-4 h-4 text-[#8ab4f8]" /> <Plus className="w-4 h-4 text-[#a8c7fa]" />
<span>Neue Liste</span> <span>Neue Liste</span>
</button> </button>
</div> </div>
@@ -410,7 +410,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewListModal && ( {showNewListModal && (
<form <form
onSubmit={handleCreateList} onSubmit={handleCreateList}
className="p-4 rounded-3xl bg-[#131314] gemini-border flex flex-wrap items-center gap-3" className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-wrap items-center gap-3"
> >
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
{['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => ( {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
@@ -418,8 +418,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
key={ic} key={ic}
type="button" type="button"
onClick={() => setNewListIcon(ic)} onClick={() => setNewListIcon(ic)}
className={`w-9 h-9 rounded-full flex items-center justify-center ${ className={`w-9 h-9 rounded-full flex items-center justify-center transition-colors ${
newListIcon === ic ? 'bg-[#8ab4f8]/25 border border-[#8ab4f8]' : 'bg-[#1e1f20]' newListIcon === ic
? 'bg-[#a8c7fa]/20 border border-[#a8c7fa]/40 text-[#a8c7fa]'
: 'bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08]'
}`} }`}
> >
{ic} {ic}
@@ -431,12 +433,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newListTitle} value={newListTitle}
onChange={(e) => setNewListTitle(e.target.value)} onChange={(e) => setNewListTitle(e.target.value)}
placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…" placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
className="flex-1 h-10 px-4 rounded-full bg-[#1e1f20] text-sm text-[#e3e3e3] gemini-border focus:outline-none" 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"
autoFocus autoFocus
/> />
<button <button
type="submit" type="submit"
className="h-10 px-5 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm" className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
> >
Liste erstellen Liste erstellen
</button> </button>
@@ -445,7 +447,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Active Shared List Card */} {/* Active Shared List Card */}
{activeList ? ( {activeList ? (
<div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth"> <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
{/* Quick-Add Pill Form */} {/* Quick-Add Pill Form */}
<form onSubmit={handleAddItem} className="space-y-3 mb-6"> <form onSubmit={handleAddItem} className="space-y-3 mb-6">
<div className="flex flex-col sm:flex-row gap-2.5"> <div className="flex flex-col sm:flex-row gap-2.5">
@@ -454,7 +456,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemText} value={newItemText}
onChange={(e) => setNewItemText(e.target.value)} onChange={(e) => setNewItemText(e.target.value)}
placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`} placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
className="flex-1 h-12 px-5 rounded-full bg-[#131314] text-sm sm:text-base text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]" 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"
/> />
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
@@ -462,12 +464,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemQty} value={newItemQty}
onChange={(e) => setNewItemQty(e.target.value)} onChange={(e) => setNewItemQty(e.target.value)}
placeholder="Menge (z.B. 2x)" placeholder="Menge (z.B. 2x)"
className="w-32 h-12 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]" 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"
/> />
<button <button
type="submit" type="submit"
disabled={!newItemText.trim()} disabled={!newItemText.trim()}
className="h-12 px-6 rounded-full bg-[#8ab4f8] disabled:bg-[#282a2c] text-[#0b0f19] disabled:text-[#5f6368] font-semibold text-sm flex items-center gap-1.5 transition-colors" 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"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Hinzufügen</span> <span>Hinzufügen</span>
@@ -477,7 +479,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Category Quick-Select Pills */} {/* Category Quick-Select Pills */}
<div className="flex flex-wrap items-center gap-1.5"> <div className="flex flex-wrap items-center gap-1.5">
<span className="text-xs text-[#9aa0a6] mr-1">Kategorie:</span> <span className="text-xs text-[#8e918f] mr-1">Kategorie:</span>
{CATEGORIES.map((cat) => ( {CATEGORIES.map((cat) => (
<button <button
key={cat} key={cat}
@@ -485,8 +487,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))} onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
className={`px-3 py-1 rounded-full text-xs transition-colors ${ className={`px-3 py-1 rounded-full text-xs transition-colors ${
newItemCategory === cat newItemCategory === cat
? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40' ? 'bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25 font-medium'
: 'bg-[#131314] text-[#9aa0a6] hover:text-[#e3e3e3]' : 'bg-[#131314] text-[#8e918f] hover:text-[#c4c7c5] border border-white/[0.08]'
}`} }`}
> >
{cat} {cat}
@@ -498,29 +500,29 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Open Items */} {/* Open Items */}
<div className="space-y-2"> <div className="space-y-2">
{openItems.length === 0 ? ( {openItems.length === 0 ? (
<div className="py-8 text-center text-[#9aa0a6] text-sm flex flex-col items-center gap-2"> <div className="py-8 text-center text-[#8e918f] text-sm flex flex-col items-center gap-2">
<Sparkles className="w-6 h-6 text-[#81c995]" /> <Sparkles className="w-5 h-5 text-[#a8dab5]" />
<span>Alles erledigt! Keine offenen Punkte auf dieser Liste.</span> <span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
</div> </div>
) : ( ) : (
openItems.map((item) => ( openItems.map((item) => (
<div <div
key={item.id} key={item.id}
onClick={() => handleToggleItem(item)} onClick={() => handleToggleItem(item)}
className="p-4 rounded-2xl bg-[#131314] hover:bg-[#242628] gemini-border flex items-center justify-between gap-3 cursor-pointer transition-all active:scale-[0.99]" 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"
> >
<div className="flex items-center gap-3.5 min-w-0"> <div className="flex items-center gap-3.5 min-w-0">
<Circle className="w-5 h-5 text-[#8ab4f8] flex-shrink-0" /> <Circle className="w-5 h-5 text-[#8e918f] group-hover:text-[#a8c7fa] flex-shrink-0 transition-colors" />
<span className="text-base font-medium text-[#e3e3e3] truncate"> <span className="text-sm sm:text-base font-normal text-[#e3e3e3] truncate">
{item.content} {item.content}
</span> </span>
{item.quantity && ( {item.quantity && (
<span className="px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#8ab4f8] text-xs font-medium"> <span className="px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06] text-xs font-medium">
{item.quantity} {item.quantity}
</span> </span>
)} )}
{item.category && ( {item.category && (
<span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#9aa0a6] text-xs"> <span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#8e918f] text-xs">
{item.category} {item.category}
</span> </span>
)} )}
@@ -532,7 +534,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation(); e.stopPropagation();
handleDeleteItem(item.id); handleDeleteItem(item.id);
}} }}
className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#5f6368] hover:text-[#f28b82] flex items-center justify-center" className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
@@ -545,35 +547,35 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{completedItems.length > 0 && ( {completedItems.length > 0 && (
<div className="mt-8 pt-6 border-t border-white/[0.06]"> <div className="mt-8 pt-6 border-t border-white/[0.06]">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs font-semibold uppercase tracking-wider text-[#9aa0a6]"> <span className="text-xs font-medium uppercase tracking-wider text-[#8e918f]">
Bereits im Einkaufswagen / Erledigt ({completedItems.length}) Bereits im Einkaufswagen / Erledigt ({completedItems.length})
</span> </span>
<button <button
onClick={handleClearCompleted} onClick={handleClearCompleted}
className="px-3.5 py-1 rounded-full bg-[#131314] hover:bg-[#f28b82]/20 text-xs text-[#9aa0a6] hover:text-[#f28b82] transition-colors" 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"
> >
Erledigte aufräumen Erledigte aufräumen
</button> </button>
</div> </div>
<div className="space-y-2 opacity-70"> <div className="space-y-1.5 opacity-75">
{completedItems.map((item) => ( {completedItems.map((item) => (
<div <div
key={item.id} key={item.id}
onClick={() => handleToggleItem(item)} onClick={() => handleToggleItem(item)}
className="p-3.5 rounded-2xl bg-[#131314]/60 gemini-border flex items-center justify-between gap-3 cursor-pointer" 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"
> >
<div className="flex items-center gap-3 min-w-0"> <div className="flex items-center gap-3 min-w-0">
<CheckCircle2 className="w-5 h-5 text-[#81c995] flex-shrink-0" /> <CheckCircle2 className="w-5 h-5 text-[#a8dab5] flex-shrink-0" />
<span className="text-sm text-[#9aa0a6] line-through truncate"> <span className="text-sm text-[#8e918f] line-through truncate">
{item.content} {item.content}
</span> </span>
{item.quantity && ( {item.quantity && (
<span className="text-xs text-[#5f6368]">({item.quantity})</span> <span className="text-xs text-[#8e918f]">({item.quantity})</span>
)} )}
</div> </div>
{item.completedByName && ( {item.completedByName && (
<span className="text-xs text-[#5f6368]">✓ {item.completedByName}</span> <span className="text-xs text-[#8e918f]">✓ {item.completedByName}</span>
)} )}
</div> </div>
))} ))}
frontend/src/features/settings/EcosystemView.tsx
+33 -33
View File
@@ -94,16 +94,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
return ( return (
<div className="max-w-4xl mx-auto space-y-6"> <div className="max-w-4xl mx-auto space-y-6">
{/* Section 1: API Keys for Smarthome & Automation */} {/* Section 1: API Keys for Smarthome & Automation */}
<div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth"> <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">
<div className="w-10 h-10 rounded-full bg-[#8ab4f8]/15 flex items-center justify-center"> <div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
<Key className="w-5 h-5 text-[#8ab4f8]" /> <Key className="w-5 h-5 text-[#a8c7fa]" />
</div> </div>
<div> <div>
<h3 className="text-lg font-bold text-[#e3e3e3]"> <h3 className="text-lg font-medium text-[#e3e3e3]">
Webhooks & Ingestion API-Schlüssel Webhooks & Ingestion API-Schlüssel
</h3> </h3>
<p className="text-xs sm:text-sm text-[#9aa0a6]"> <p className="text-xs sm:text-sm text-[#8e918f]">
Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs direkt mit deiner MindSift Inbox. Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs direkt mit deiner MindSift Inbox.
</p> </p>
</div> </div>
@@ -115,11 +115,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
value={newKeyName} value={newKeyName}
onChange={(e) => setNewKeyName(e.target.value)} onChange={(e) => setNewKeyName(e.target.value)}
placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…" placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]" 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"
/> />
<button <button
type="submit" type="submit"
className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm flex items-center justify-center gap-1.5 hover:bg-[#a1c2fa] transition-colors" 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"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>API-Key erzeugen</span> <span>API-Key erzeugen</span>
@@ -127,9 +127,9 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</form> </form>
{newlyCreatedKey && ( {newlyCreatedKey && (
<div className="mt-4 p-4 rounded-2xl bg-[#81c995]/15 border border-[#81c995]/40 flex flex-wrap items-center justify-between gap-3"> <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="min-w-0"> <div className="min-w-0">
<p className="text-xs font-semibold text-[#81c995] mb-1"> <p className="text-xs font-medium text-[#a8dab5] mb-1">
Neuer API-Schlüssel erstellt (bitte jetzt kopieren): Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
</p> </p>
<code className="text-xs sm:text-sm font-mono text-[#e3e3e3] break-all"> <code className="text-xs sm:text-sm font-mono text-[#e3e3e3] break-all">
@@ -138,7 +138,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
<button <button
onClick={() => handleCopy(newlyCreatedKey)} onClick={() => handleCopy(newlyCreatedKey)}
className="h-9 px-4 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs flex items-center gap-1.5" 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"
> >
{copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />} {copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
<span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span> <span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -149,27 +149,27 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
{/* Active Keys List */} {/* Active Keys List */}
<div className="mt-5 space-y-2"> <div className="mt-5 space-y-2">
{keys.length === 0 ? ( {keys.length === 0 ? (
<p className="text-xs text-[#5f6368] py-2"> <p className="text-xs text-[#8e918f] py-2">
Noch keine dedizierten API-Schlüssel hinterlegt. Noch keine dedizierten API-Schlüssel hinterlegt.
</p> </p>
) : ( ) : (
keys.map((k) => ( keys.map((k) => (
<div <div
key={k.id} key={k.id}
className="p-3.5 rounded-2xl bg-[#131314] gemini-border flex items-center justify-between gap-3" className="p-3.5 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between gap-3"
> >
<div> <div>
<span className="text-sm font-medium text-[#e3e3e3]">{k.name}</span> <span className="text-sm font-medium text-[#e3e3e3]">{k.name}</span>
<span className="ml-3 text-xs font-mono text-[#8ab4f8]">{k.keyPrefix}</span> <span className="ml-3 text-xs font-mono text-[#a8c7fa]">{k.keyPrefix}</span>
{k.lastUsedAt && ( {k.lastUsedAt && (
<span className="ml-3 text-xs text-[#5f6368]"> <span className="ml-3 text-xs text-[#8e918f]">
Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')} Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
</span> </span>
)} )}
</div> </div>
<button <button
onClick={() => handleDeleteKey(k.id)} onClick={() => handleDeleteKey(k.id)}
className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center" className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
@@ -180,16 +180,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
{/* Section 2: Interactive Smarthome Webhook Simulator */} {/* Section 2: Interactive Smarthome Webhook Simulator */}
<div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth"> <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-full bg-[#c58af9]/15 flex items-center justify-center"> <div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
<Webhook className="w-5 h-5 text-[#c58af9]" /> <Webhook className="w-5 h-5 text-[#a8c7fa]" />
</div> </div>
<div> <div>
<h3 className="text-lg font-bold text-[#e3e3e3]"> <h3 className="text-lg font-medium text-[#e3e3e3]">
Live Smarthome Webhook-Simulator Live Smarthome Webhook-Simulator
</h3> </h3>
<p className="text-xs sm:text-sm text-[#9aa0a6]"> <p className="text-xs sm:text-sm text-[#8e918f]">
Teste den Webhook-Endpunkt direkt hier – das Event landet sofort als Karte im Triage-Deck. Teste den Webhook-Endpunkt direkt hier – das Event landet sofort als Karte im Triage-Deck.
</p> </p>
</div> </div>
@@ -208,7 +208,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
setSimTitle(preset.text); setSimTitle(preset.text);
setSimPriority(preset.prio); setSimPriority(preset.prio);
}} }}
className="px-3.5 py-1.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3]" 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"
> >
{preset.label} {preset.label}
</button> </button>
@@ -220,12 +220,12 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
type="text" type="text"
value={simTitle} value={simTitle}
onChange={(e) => setSimTitle(e.target.value)} onChange={(e) => setSimTitle(e.target.value)}
className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none" 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"
/> />
<button <button
type="button" type="button"
onClick={handleSimulateWebhook} onClick={handleSimulateWebhook}
className="h-11 px-6 rounded-full bg-[#c58af9] text-[#0b0f19] font-semibold text-sm flex items-center justify-center gap-1.5 hover:opacity-90 transition-opacity" 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"
> >
<Zap className="w-4 h-4" /> <Zap className="w-4 h-4" />
<span>Webhook jetzt abfeuern</span> <span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
{simStatus && ( {simStatus && (
<p className="mt-3 text-xs font-medium text-[#81c995]">{simStatus}</p> <p className="mt-3 text-xs font-medium text-[#a8dab5]">{simStatus}</p>
)} )}
{/* Code Example Snippets */} {/* Code Example Snippets */}
<div className="mt-6 space-y-3"> <div className="mt-6 space-y-3">
<div className="flex items-center gap-2 text-xs font-semibold text-[#9aa0a6]"> <div className="flex items-center gap-2 text-xs font-medium text-[#8e918f]">
<Terminal className="w-3.5 h-3.5 text-[#8ab4f8]" /> <Terminal className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span>cURL / Home Assistant REST Command:</span> <span>cURL / Home Assistant REST Command:</span>
</div> </div>
<pre className="p-4 rounded-2xl bg-[#0b0f19] gemini-border font-mono text-xs text-[#8ab4f8] overflow-x-auto"> <pre className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs text-[#a8dab5] overflow-x-auto">
{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\ {`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
-H "Content-Type: application/json" \\ -H "Content-Type: application/json" \\
-d '{ -d '{
@@ -255,16 +255,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div> </div>
{/* Section 3: Data Sovereignty & Export */} {/* Section 3: Data Sovereignty & Export */}
<div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <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="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-[#81c995]/15 flex items-center justify-center flex-shrink-0"> <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-[#81c995]" /> <ShieldCheck className="w-5 h-5 text-[#a8dab5]" />
</div> </div>
<div> <div>
<h3 className="text-base font-bold text-[#e3e3e3]"> <h3 className="text-base font-medium text-[#e3e3e3]">
100 % Datensouveränität & Komplett-Export 100 % Datensouveränität & Komplett-Export
</h3> </h3>
<p className="text-xs sm:text-sm text-[#9aa0a6]"> <p className="text-xs sm:text-sm text-[#8e918f]">
Exportiere jederzeit alle Gedanken, Aufgaben, Dokumente und geteilten Listen als portables JSON-Archiv. Exportiere jederzeit alle Gedanken, Aufgaben, Dokumente und geteilten Listen als portables JSON-Archiv.
</p> </p>
</div> </div>
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
<button <button
onClick={handleFullExport} onClick={handleFullExport}
className="h-11 px-6 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-sm flex items-center gap-2 hover:opacity-90 flex-shrink-0" 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"
> >
<Download className="w-4 h-4" /> <Download className="w-4 h-4" />
<span>Komplett-Backup (.json)</span> <span>Komplett-Backup (.json)</span>
frontend/src/features/triage/TasksView.tsx
+34 -34
View File
@@ -97,10 +97,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
onClick={() => setFilter('open')} onClick={() => setFilter('open')}
className={`h-10 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-colors ${
filter === 'open' filter === 'open'
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold' ? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
}`} }`}
> >
Offene Aufgaben ({openTasks.length}) Offene Aufgaben ({openTasks.length})
@@ -108,10 +108,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<button <button
onClick={() => setFilter('done')} onClick={() => setFilter('done')}
className={`h-10 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-colors ${
filter === 'done' filter === 'done'
? 'bg-[#81c995] text-[#0b0f19] font-semibold' ? 'bg-[#282a2c] text-[#a8dab5] border border-[#a8dab5]/30'
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
}`} }`}
> >
Erledigt ({doneTasks.length}) Erledigt ({doneTasks.length})
@@ -119,10 +119,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<button <button
onClick={() => setFilter('discarded')} onClick={() => setFilter('discarded')}
className={`h-10 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-colors ${
filter === 'discarded' filter === 'discarded'
? 'bg-[#f28b82] text-[#0b0f19] font-semibold' ? 'bg-[#282a2c] text-[#f28b82] border border-[#f28b82]/30'
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border' : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
}`} }`}
> >
Verworfen ({discarded.length}) Verworfen ({discarded.length})
@@ -132,7 +132,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
{filter === 'discarded' && discarded.length > 0 && ( {filter === 'discarded' && discarded.length > 0 && (
<button <button
onClick={handlePurgeAllDiscarded} onClick={handlePurgeAllDiscarded}
className="h-9 px-4 rounded-full bg-[#f28b82]/15 hover:bg-[#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-[#f28b82]/10 hover:bg-[#f28b82]/20 border border-[#f28b82]/25 text-[#f28b82] text-xs font-medium flex items-center gap-1.5 transition-colors"
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
Papierkorb leeren Papierkorb leeren
@@ -141,32 +141,32 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
</div> </div>
{loading ? ( {loading ? (
<div className="p-8 text-center text-[#9aa0a6] text-sm">Lade Aufgaben…</div> <div className="p-8 text-center text-[#8e918f] text-sm">Lade Aufgaben…</div>
) : filter === 'discarded' ? ( ) : filter === 'discarded' ? (
<div className="space-y-2.5"> <div className="space-y-2.5">
{discarded.length === 0 ? ( {discarded.length === 0 ? (
<div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm"> <div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
Keine verworfenen Gedanken im Papierkorb. Keine verworfenen Gedanken im Papierkorb.
</div> </div>
) : ( ) : (
discarded.map((item) => ( discarded.map((item) => (
<div <div
key={item.id} key={item.id}
className="p-4 rounded-3xl bg-[#1e1f20] gemini-border flex items-center justify-between gap-4" className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center justify-between gap-4"
> >
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm text-[#9aa0a6] line-through truncate">{item.content}</p> <p className="text-sm text-[#8e918f] line-through truncate">{item.content}</p>
</div> </div>
<div className="flex items-center gap-2 flex-shrink-0"> <div className="flex items-center gap-2 flex-shrink-0">
<button <button
onClick={() => handleRestore(item)} onClick={() => handleRestore(item)}
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] text-xs text-[#8ab4f8] flex items-center gap-1" 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"
> >
<RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox <RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox
</button> </button>
<button <button
onClick={() => handleDeletePermanent(item.id)} onClick={() => handleDeletePermanent(item.id)}
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#f28b82] flex items-center justify-center" 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" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
@@ -178,33 +178,33 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
) : ( ) : (
<div className="space-y-2.5"> <div className="space-y-2.5">
{(filter === 'open' ? openTasks : doneTasks).length === 0 ? ( {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
<div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm"> <div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
{filter === 'open' {filter === 'open'
? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen!' ? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen.'
: 'Noch keine erledigten Aufgaben.'} : 'Noch keine erledigten Aufgaben.'}
</div> </div>
) : ( ) : (
(filter === 'open' ? openTasks : doneTasks).map((task) => ( (filter === 'open' ? openTasks : doneTasks).map((task) => (
<div <div
key={task.id} key={task.id}
className="p-4 sm:p-5 rounded-3xl bg-[#1e1f20] hover:bg-[#242628] gemini-border flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors" 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"> <div className="flex items-start gap-3.5 min-w-0 flex-1">
<button <button
onClick={() => handleToggleDone(task)} onClick={() => handleToggleDone(task)}
className="mt-0.5 flex-shrink-0 text-[#8ab4f8] hover:scale-110 transition-transform" className="mt-0.5 flex-shrink-0 text-[#8e918f] hover:text-[#a8c7fa] transition-colors"
> >
{task.isCompleted ? ( {task.isCompleted ? (
<CheckCircle2 className="w-5 h-5 text-[#81c995]" /> <CheckCircle2 className="w-5 h-5 text-[#a8dab5]" />
) : ( ) : (
<Circle className="w-5 h-5 text-[#9aa0a6] hover:text-[#8ab4f8]" /> <Circle className="w-5 h-5" />
)} )}
</button> </button>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p <p
className={`text-sm sm:text-base font-medium break-words ${ className={`text-sm sm:text-base font-normal break-words ${
task.isCompleted ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]' task.isCompleted ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
}`} }`}
> >
{task.content} {task.content}
@@ -212,21 +212,21 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<div className="flex flex-wrap items-center gap-2 mt-2"> <div className="flex flex-wrap items-center gap-2 mt-2">
{task.priority === 'urgent' && ( {task.priority === 'urgent' && (
<span className="px-2.5 py-0.5 rounded-full bg-[#f28b82]/20 text-[#f28b82] text-xs flex items-center gap-1"> <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 <AlertCircle className="w-3 h-3" /> Dringend
</span> </span>
)} )}
{task.priority === 'high' && ( {task.priority === 'high' && (
<span className="px-2.5 py-0.5 rounded-full bg-[#8ab4f8]/20 text-[#8ab4f8] text-xs"> <span className="px-2.5 py-0.5 rounded-full bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25 text-xs font-medium">
Hoch Hoch
</span> </span>
)} )}
{task.tags?.map((tag) => ( {task.tags?.map((tag) => (
<span <span
key={tag} key={tag}
className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1" 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" />#{tag} <Tag className="w-2.5 h-2.5 text-[#8e918f]" />#{tag}
</span> </span>
))} ))}
</div> </div>
@@ -236,28 +236,28 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
{/* Action Controls */} {/* Action Controls */}
<div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0"> <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
<div className="relative flex items-center"> <div className="relative flex items-center">
<Calendar className="w-3.5 h-3.5 text-[#8ab4f8] absolute left-3 pointer-events-none" /> <Calendar className="w-3.5 h-3.5 text-[#a8c7fa] absolute left-3 pointer-events-none" />
<input <input
type="date" type="date"
value={task.dueDate || ''} value={task.dueDate || ''}
onChange={(e) => handleDueDateChange(task, e.target.value)} onChange={(e) => handleDueDateChange(task, e.target.value)}
className="pl-8 pr-3 py-1 rounded-full bg-[#131314] text-[#e3e3e3] text-xs gemini-border focus:outline-none focus:border-[#8ab4f8]" 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"
/> />
</div> </div>
<button <button
onClick={() => handleConvertToDoc(task)} onClick={() => handleConvertToDoc(task)}
title="Im Workspace als Projekt-Dokument vertiefen" title="Im Workspace als Dokument vertiefen"
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323538] text-xs text-[#c58af9] flex items-center gap-1" 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" /> <FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span className="hidden md:inline">Vertiefen</span> <span className="hidden md:inline">Vertiefen</span>
</button> </button>
<button <button
onClick={() => handleDeletePermanent(task.id)} onClick={() => handleDeletePermanent(task.id)}
title="Löschen" title="Löschen"
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center" 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" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
frontend/src/features/triage/TriageDeck.tsx
+83 -88
View File
@@ -49,13 +49,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
const nextCard = cards[1]; const nextCard = cards[1];
const x = useMotionValue(0); const x = useMotionValue(0);
const rotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]); const rotate = useTransform(x, [-220, 0, 220], [-10, 0, 10]);
const keepOpacity = useTransform(x, [25, 130], [0, 1]); const keepOpacity = useTransform(x, [25, 120], [0, 1]);
const discardOpacity = useTransform(x, [-130, -25], [1, 0]); const discardOpacity = useTransform(x, [-120, -25], [1, 0]);
const cardBorderColor = useTransform( const cardBorderColor = useTransform(
x, x,
[-140, 0, 140], [-140, 0, 140],
['rgba(242, 139, 130, 0.65)', 'rgba(255, 255, 255, 0.08)', 'rgba(129, 201, 149, 0.65)'] ['rgba(242, 139, 130, 0.6)', '#3c4043', 'rgba(168, 218, 181, 0.6)']
); );
const handleAction = async ( const handleAction = async (
@@ -69,7 +69,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
if (!activeCard) return; if (!activeCard) return;
const current = activeCard; const current = activeCard;
triggerHaptic(action === 'keep' ? [12, 25] : 18); triggerHaptic(action === 'keep' ? [10, 20] : 15);
// Optimistic removal from deck // Optimistic removal from deck
setCards((prev) => prev.slice(1)); setCards((prev) => prev.slice(1));
@@ -134,25 +134,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
switch (priority) { switch (priority) {
case 'urgent': case 'urgent':
return ( return (
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40"> <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/30">
🚨 Dringend Dringend
</span> </span>
); );
case 'high': case 'high':
return ( return (
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40"> <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#fdd663]/15 text-[#fdd663] border border-[#fdd663]/30">
⚡ Priorität Hoch Hoch
</span>
);
case 'low':
return (
<span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
Später / Niedrig
</span> </span>
); );
default: default:
return ( return (
<span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]"> <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#282a2c] text-[#8e918f] border border-white/[0.06]">
Gedanke Gedanke
</span> </span>
); );
@@ -162,15 +156,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
const sourceBadge = (source: string) => { const sourceBadge = (source: string) => {
if (source === 'voice') { if (source === 'voice') {
return ( return (
<span className="px-3 py-1 rounded-full text-xs bg-[#c58af9]/15 text-[#c58af9] flex items-center gap-1"> <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">
<Mic className="w-3 h-3" /> Sprachnotiz <Mic className="w-3 h-3" /> Diktat
</span> </span>
); );
} }
if (source === 'webhook') { if (source === 'webhook') {
return ( return (
<span className="px-3 py-1 rounded-full text-xs bg-[#81c995]/15 text-[#81c995] flex items-center gap-1"> <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">
<Webhook className="w-3 h-3" /> Smarthome Webhook <Webhook className="w-3 h-3" /> Webhook
</span> </span>
); );
} }
@@ -179,30 +173,30 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
if (!activeCard) { if (!activeCard) {
return ( return (
<div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center shadow-card-depth"> <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-16 h-16 rounded-full bg-[#81c995]/15 border border-[#81c995]/30 flex items-center justify-center mx-auto mb-5"> <div className="w-12 h-12 rounded-full bg-[#a8dab5]/15 flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-8 h-8 text-[#81c995]" /> <Sparkles className="w-6 h-6 text-[#a8dab5]" />
</div> </div>
<h2 className="text-2xl font-bold text-[#e3e3e3] mb-2">Inbox Zero erreicht!</h2> <h2 className="text-xl font-medium text-[#e3e3e3] mb-1.5">Inbox Zero</h2>
<p className="text-[#9aa0a6] text-sm sm:text-base max-w-md mx-auto mb-6"> <p className="text-[#8e918f] text-sm max-w-sm mx-auto mb-6">
Dein Kopf ist komplett frei. Alle eingefrorenen Gedanken wurden gesichtet, verworfen oder in echte Projekte und Aufgaben verwandelt. Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
</p> </p>
<div className="flex flex-wrap items-center justify-center gap-3"> <div className="flex flex-wrap items-center justify-center gap-2.5">
<button <button
onClick={onFocusCapture} onClick={onFocusCapture}
className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors" className="h-9 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#b8d4ff] transition-colors"
> >
+ Neuen Gedanken einfrieren + Neuer Gedanke
</button> </button>
{lastTriaged && ( {lastTriaged && (
<button <button
onClick={handleUndo} onClick={handleUndo}
className="h-11 px-5 rounded-full bg-[#282a2c] text-[#e3e3e3] hover:bg-[#333639] text-sm flex items-center gap-2 transition-colors" 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"
> >
<RotateCcw className="w-4 h-4 text-[#8ab4f8]" /> <RotateCcw className="w-3.5 h-3.5" />
Letzten Swipe rückgängig machen Rückgängig
</button> </button>
)} )}
</div> </div>
@@ -213,38 +207,39 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
return ( return (
<div className="max-w-xl mx-auto select-none"> <div className="max-w-xl mx-auto select-none">
{/* Top Deck Status & Undo Bar */} {/* Top Deck Status & Undo Bar */}
<div className="flex items-center justify-between mb-4 px-2"> <div className="flex items-center justify-between mb-3 px-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="px-3.5 py-1 rounded-full bg-[#1e1f20] gemini-border text-xs font-medium text-[#8ab4f8]"> <span className="text-xs text-[#8e918f]">
🃏 Noch {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} im Deck {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend
</span> </span>
<span className="hidden sm:flex items-center gap-1 text-xs text-[#5f6368]"> <span className="hidden sm:inline text-xs text-[#8e918f]">•</span>
<Keyboard className="w-3.5 h-3.5" /> Pfeiltasten ← / → oder H / L <span className="hidden sm:flex items-center gap-1 text-xs text-[#8e918f]">
<Keyboard className="w-3 h-3" /> H / L oder ← / →
</span> </span>
</div> </div>
{lastTriaged && ( {lastTriaged && (
<button <button
onClick={handleUndo} onClick={handleUndo}
className="px-3.5 py-1 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#9aa0a6] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors" 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"
> >
<RotateCcw className="w-3.5 h-3.5 text-[#8ab4f8]" /> <RotateCcw className="w-3 h-3 text-[#a8c7fa]" />
Rückgängig Rückgängig
</button> </button>
)} )}
</div> </div>
{/* Card Stack Container */} {/* Card Stack Container */}
<div className="relative h-[340px] sm:h-[360px] w-full flex items-center justify-center"> <div className="relative h-[320px] sm:h-[340px] w-full flex items-center justify-center">
{/* Background Preview Card */} {/* Background Preview Card */}
{nextCard && ( {nextCard && (
<div <div
key={nextCard.id + '-preview'} key={nextCard.id + '-preview'}
className="absolute inset-x-4 top-5 bottom-0 rounded-3xl bg-[#18191b] gemini-border p-6 opacity-50 scale-[0.95] pointer-events-none flex flex-col justify-between" 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"
> >
<div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div> <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
<p className="text-lg text-[#9aa0a6] line-clamp-3">{nextCard.content}</p> <p className="text-base text-[#8e918f] line-clamp-3">{nextCard.content}</p>
<div className="text-xs text-[#5f6368]">Nächste Karte…</div> <div className="text-xs text-[#8e918f]">Nächste Karte…</div>
</div> </div>
)} )}
@@ -255,7 +250,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
style={{ x, rotate, borderColor: cardBorderColor }} style={{ x, rotate, borderColor: cardBorderColor }}
drag="x" drag="x"
dragConstraints={{ left: 0, right: 0 }} dragConstraints={{ left: 0, right: 0 }}
dragElastic={0.85} dragElastic={0.8}
transition={{ type: 'spring', stiffness: 350, damping: 25 }} transition={{ type: 'spring', stiffness: 350, damping: 25 }}
onDragEnd={(_, info) => { onDragEnd={(_, info) => {
if (info.offset.x > 110 || info.velocity.x > 550) { if (info.offset.x > 110 || info.velocity.x > 550) {
@@ -264,22 +259,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
handleAction('discard'); handleAction('discard');
} }
}} }}
initial={{ scale: 0.94, opacity: 0, y: 16 }} initial={{ scale: 0.96, opacity: 0, y: 12 }}
animate={{ scale: 1, opacity: 1, y: 0 }} animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.9, opacity: 0 }} exit={{ scale: 0.92, opacity: 0 }}
className="relative w-full h-full rounded-3xl bg-[#1e1f20] border p-6 sm:p-8 shadow-card-depth cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden" 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"
> >
{/* Dynamic Swipe Overlays */} {/* Dynamic Swipe Overlays */}
<motion.div <motion.div
style={{ opacity: keepOpacity }} style={{ opacity: keepOpacity }}
className="pointer-events-none absolute top-6 right-6 px-4 py-1.5 rounded-full bg-[#81c995]/20 border-2 border-[#81c995] text-[#81c995] font-bold text-xs tracking-wider uppercase" 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"
> >
Behalten 👉 Behalten 👉
</motion.div> </motion.div>
<motion.div <motion.div
style={{ opacity: discardOpacity }} style={{ opacity: discardOpacity }}
className="pointer-events-none absolute top-6 left-6 px-4 py-1.5 rounded-full bg-[#f28b82]/20 border-2 border-[#f28b82] text-[#f28b82] font-bold text-xs tracking-wider uppercase" 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"
> >
👈 Weg damit 👈 Weg damit
</motion.div> </motion.div>
@@ -290,7 +285,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{priorityBadge(activeCard.priority)} {priorityBadge(activeCard.priority)}
{sourceBadge(activeCard.source)} {sourceBadge(activeCard.source)}
</div> </div>
<span className="text-xs text-[#5f6368] flex items-center gap-1"> <span className="text-xs text-[#8e918f] flex items-center gap-1">
<Clock className="w-3.5 h-3.5" /> <Clock className="w-3.5 h-3.5" />
{new Date(activeCard.createdAt).toLocaleString('de-DE', { {new Date(activeCard.createdAt).toLocaleString('de-DE', {
day: '2-digit', day: '2-digit',
@@ -301,9 +296,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</span> </span>
</div> </div>
{/* Card Body: The Thought */} {/* Card Body */}
<div className="my-auto py-4"> <div className="my-auto py-3">
<p className="text-xl sm:text-2xl font-medium text-[#e3e3e3] leading-relaxed break-words"> <p className="text-lg sm:text-xl font-normal text-[#e3e3e3] leading-relaxed break-words">
{activeCard.content} {activeCard.content}
</p> </p>
</div> </div>
@@ -315,18 +310,18 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
activeCard.tags.map((tag) => ( activeCard.tags.map((tag) => (
<span <span
key={tag} key={tag}
className="px-3 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1" 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"
> >
<Tag className="w-3 h-3" />#{tag} <Tag className="w-2.5 h-2.5" />#{tag}
</span> </span>
)) ))
) : ( ) : (
<span className="text-xs text-[#5f6368]">Wische links zum Verwerfen, rechts zum Behalten</span> <span className="text-xs text-[#8e918f]">Wische links oder rechts</span>
)} )}
</div> </div>
{activeCard.dueDate && ( {activeCard.dueDate && (
<span className="px-3 py-0.5 rounded-full bg-[#8ab4f8]/15 text-[#8ab4f8] text-xs"> <span className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.06] text-xs">
📅 {activeCard.dueDate} 📅 {activeCard.dueDate}
</span> </span>
)} )}
@@ -337,23 +332,23 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Task Date Picker Popover */} {/* Convert to Task Date Picker Popover */}
{showDateModal && ( {showDateModal && (
<div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-3"> <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-sm text-[#e3e3e3]"> <div className="flex items-center gap-2 text-xs text-[#c4c7c5]">
<Calendar className="w-4 h-4 text-[#8ab4f8]" /> <Calendar className="w-4 h-4 text-[#a8c7fa]" />
<span>Als To-Do mit Fälligkeitsdatum anlegen:</span> <span>Fälligkeitsdatum für Aufgabe:</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <input
type="date" type="date"
value={taskDueDate} value={taskDueDate}
onChange={(e) => setTaskDueDate(e.target.value)} onChange={(e) => setTaskDueDate(e.target.value)}
className="bg-[#1e1f20] text-[#e3e3e3] px-3.5 py-1.5 rounded-full gemini-border text-xs focus:outline-none" className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none"
/> />
<button <button
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })} onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
className="px-4 py-1.5 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs hover:opacity-90" className="px-3.5 py-1 rounded-full bg-[#a8dab5] text-[#072711] font-medium text-xs hover:bg-[#b8e3c3]"
> >
Aufgabe speichern Speichern
</button> </button>
</div> </div>
</div> </div>
@@ -361,11 +356,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Shopping List Item Popover */} {/* Convert to Shopping List Item Popover */}
{showListSelector && ( {showListSelector && (
<div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border"> <div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043]">
<p className="text-xs text-[#9aa0a6] mb-2.5"> <p className="text-xs text-[#8e918f] mb-2">
In welche geteilte Liste soll dieser Gedanke verschoben werden? In welche Liste verschieben?
</p> </p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-1.5">
{lists.length > 0 ? ( {lists.length > 0 ? (
lists.map((lst) => ( lists.map((lst) => (
<button <button
@@ -373,26 +368,26 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
onClick={() => onClick={() =>
handleAction('keep', { convertTo: 'list_item', targetListId: lst.id }) handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
} }
className="px-4 py-2 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors" 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"
> >
<span>{lst.icon}</span> <span>{lst.icon}</span>
<span>{lst.title}</span> <span>{lst.title}</span>
</button> </button>
)) ))
) : ( ) : (
<span className="text-xs text-[#5f6368]">Noch keine Listen vorhanden.</span> <span className="text-xs text-[#8e918f]">Keine Listen vorhanden.</span>
)} )}
</div> </div>
</div> </div>
)} )}
{/* Primary Triage Action Pills */} {/* Primary Triage Action Pills (Material 3 Tonal & Outlined) */}
<div className="mt-6 flex flex-wrap items-center justify-center gap-2.5 sm:gap-3"> <div className="mt-5 flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
{/* Swipe Left: Discard */} {/* Swipe Left: Discard */}
<button <button
onClick={() => handleAction('discard')} onClick={() => handleAction('discard')}
title="Verwerfen (Taste H oder Pfeil links)" title="Verwerfen (Taste H oder Pfeil links)"
className="h-12 px-5 rounded-full bg-[#1e1f20] hover:bg-[#f28b82]/20 border border-[#f28b82]/30 text-[#f28b82] font-medium text-sm flex items-center gap-2 transition-all active:scale-95" 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"
> >
<X className="w-4 h-4" /> <X className="w-4 h-4" />
<span>Weg damit</span> <span>Weg damit</span>
@@ -405,24 +400,24 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowDateModal((prev) => !prev); setShowDateModal((prev) => !prev);
}} }}
title="Als Aufgabe mit Datum (Taste T)" title="Als Aufgabe mit Datum (Taste T)"
className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${ className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
showDateModal showDateModal
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold' ? 'bg-[#282a2c] text-[#a8c7fa] border-[#a8c7fa]/40 font-medium'
: 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]' : 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
}`} }`}
> >
<Calendar className="w-4 h-4 text-[#8ab4f8]" /> <Calendar className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span>Termin-To-Do</span> <span>Termin-To-Do</span>
</button> </button>
{/* Convert to Workspace Document */} {/* Convert to Workspace Document */}
<button <button
onClick={() => handleAction('keep', { convertTo: 'document' })} onClick={() => handleAction('keep', { convertTo: 'document' })}
title="In ein Workspace-Dokument verwandeln (Taste D)" title="In Workspace-Notiz umwandeln (Taste D)"
className="h-12 px-4 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-all" 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"
> >
<FileText className="w-4 h-4 text-[#c58af9]" /> <FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span>Als Projekt-Notiz</span> <span>Als Notiz</span>
</button> </button>
{/* Convert to Shared Shopping List Item */} {/* Convert to Shared Shopping List Item */}
@@ -431,22 +426,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowDateModal(false); setShowDateModal(false);
setShowListSelector((prev) => !prev); setShowListSelector((prev) => !prev);
}} }}
title="Auf eine geteilte Einkaufsliste setzen" title="Auf eine geteilte Liste setzen"
className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${ className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
showListSelector showListSelector
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold' ? 'bg-[#282a2c] text-[#a8dab5] border-[#a8dab5]/40 font-medium'
: 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]' : 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
}`} }`}
> >
<ShoppingCart className="w-4 h-4 text-[#81c995]" /> <ShoppingCart className="w-3.5 h-3.5 text-[#a8dab5]" />
<span>Auf Liste</span> <span>Auf Liste</span>
</button> </button>
{/* Swipe Right: Keep */} {/* Swipe Right: Keep */}
<button <button
onClick={() => handleAction('keep')} onClick={() => handleAction('keep')}
title="Behalten & als Aufgabe sichern (Taste L oder Pfeil rechts)" title="Behalten & sichern (Taste L oder Pfeil rechts)"
className="h-12 px-5 rounded-full bg-[#81c995]/20 hover:bg-[#81c995]/30 border border-[#81c995]/40 text-[#81c995] font-semibold text-sm flex items-center gap-2 transition-all active:scale-95" 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"
> >
<Check className="w-4 h-4" /> <Check className="w-4 h-4" />
<span>Behalten</span> <span>Behalten</span>
frontend/src/features/workspace/WorkspaceView.tsx
+50 -50
View File
@@ -209,19 +209,19 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<div className="lg:col-span-4 space-y-3"> <div className="lg:col-span-4 space-y-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="w-4 h-4 text-[#9aa0a6] absolute left-3.5 top-1/2 -translate-y-1/2" /> <Search className="w-4 h-4 text-[#8e918f] absolute left-3.5 top-1/2 -translate-y-1/2" />
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Notizen durchsuchen…" placeholder="Notizen durchsuchen…"
className="w-full h-10 pl-9 pr-4 rounded-full bg-[#1e1f20] text-xs sm:text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]" 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"
/> />
</div> </div>
<button <button
onClick={handleCreateDoc} onClick={handleCreateDoc}
className="h-10 px-4 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#a1c2fa] transition-colors flex-shrink-0" 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"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Neu</span> <span>Neu</span>
@@ -235,22 +235,22 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button <button
key={doc.id} key={doc.id}
onClick={() => setSelectedDoc(doc)} onClick={() => setSelectedDoc(doc)}
className={`w-full text-left p-4 rounded-3xl transition-all flex items-start justify-between gap-3 ${ className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-colors flex items-start justify-between gap-3 ${
active active
? 'bg-[#1e1f20] border border-[#8ab4f8]/50 shadow-gemini-glow' ? 'bg-[#282a2c] border border-white/[0.12]'
: 'bg-[#131314] hover:bg-[#1e1f20] gemini-border' : 'bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-transparent'
}`} }`}
> >
<div className="flex items-start gap-3 min-w-0"> <div className="flex items-start gap-3 min-w-0">
<span className="text-2xl flex-shrink-0">{doc.icon}</span> <span className="text-2xl flex-shrink-0">{doc.icon}</span>
<div className="min-w-0"> <div className="min-w-0">
<h4 className="font-semibold text-sm text-[#e3e3e3] truncate">{doc.title}</h4> <h4 className="font-medium text-sm text-[#e3e3e3] truncate">{doc.title}</h4>
<p className="text-xs text-[#9aa0a6] truncate mt-0.5"> <p className="text-xs text-[#8e918f] truncate mt-0.5">
{doc.blocks?.[0]?.content || 'Leeres Dokument'} {doc.blocks?.[0]?.content || 'Leeres Dokument'}
</p> </p>
</div> </div>
</div> </div>
{doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#8ab4f8] flex-shrink-0 mt-1" />} {doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#a8c7fa] flex-shrink-0 mt-1" />}
</button> </button>
); );
})} })}
@@ -260,11 +260,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Right Notion-Flair Block Editor */} {/* Right Notion-Flair Block Editor */}
<div className="lg:col-span-8"> <div className="lg:col-span-8">
{selectedDoc ? ( {selectedDoc ? (
<div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth"> <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
{/* Document Top Action Bar */} {/* Document Top Action Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-6 border-b border-white/[0.06]"> <div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-6 border-b border-white/[0.06]">
<div className="flex items-center gap-2 text-xs text-[#9aa0a6]"> <div className="flex items-center gap-2 text-xs text-[#8e918f]">
<span className="px-3 py-1 rounded-full bg-[#131314] text-[#81c995] flex items-center gap-1"> <span className="px-3 py-1 rounded-full bg-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1 font-medium">
<Check className="w-3 h-3" /> <Check className="w-3 h-3" />
{saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'} {saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'}
</span> </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 ${ className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
selectedDoc.isPinned selectedDoc.isPinned
? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40' ? 'bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25'
: 'bg-[#282a2c] text-[#9aa0a6] hover:text-[#e3e3e3]' : 'bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3]'
}`} }`}
> >
<Pin className="w-3.5 h-3.5" /> <Pin className="w-3.5 h-3.5" />
@@ -288,15 +288,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button <button
onClick={handleExportMarkdown} onClick={handleExportMarkdown}
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors" 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"
> >
<Download className="w-3.5 h-3.5 text-[#8ab4f8]" /> <Download className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span>Markdown (.md)</span> <span>Markdown (.md)</span>
</button> </button>
<button <button
onClick={() => handleDeleteDoc(selectedDoc.id)} onClick={() => handleDeleteDoc(selectedDoc.id)}
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center transition-colors" 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" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
@@ -308,14 +308,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button <button
type="button" type="button"
onClick={() => setShowIconPicker((prev) => !prev)} onClick={() => setShowIconPicker((prev) => !prev)}
className="w-12 h-12 rounded-2xl bg-[#131314] hover:bg-[#282a2c] gemini-border text-2xl flex items-center justify-center flex-shrink-0" 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"
title="Icon ändern" title="Icon ändern"
> >
{selectedDoc.icon} {selectedDoc.icon}
</button> </button>
{showIconPicker && ( {showIconPicker && (
<div className="absolute top-14 left-0 z-20 p-2.5 rounded-3xl bg-[#131314] gemini-border shadow-card-depth flex flex-wrap gap-1.5 w-64"> <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">
{ICONS.map((ic) => ( {ICONS.map((ic) => (
<button <button
key={ic} key={ic}
@@ -324,7 +324,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
persistDocument({ ...selectedDoc, icon: ic }); persistDocument({ ...selectedDoc, icon: ic });
setShowIconPicker(false); setShowIconPicker(false);
}} }}
className="w-9 h-9 rounded-full hover:bg-[#282a2c] text-lg flex items-center justify-center" className="w-9 h-9 rounded-full hover:bg-[#282a2c] text-lg flex items-center justify-center transition-colors"
> >
{ic} {ic}
</button> </button>
@@ -337,7 +337,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={selectedDoc.title} value={selectedDoc.title}
onChange={(e) => persistDocument({ ...selectedDoc, title: e.target.value })} onChange={(e) => persistDocument({ ...selectedDoc, title: e.target.value })}
placeholder="Dokument-Titel…" placeholder="Dokument-Titel…"
className="w-full bg-transparent text-2xl sm:text-3xl font-bold text-[#e3e3e3] focus:outline-none" className="w-full bg-transparent text-2xl sm:text-3xl font-semibold text-[#e3e3e3] focus:outline-none"
/> />
</div> </div>
@@ -353,7 +353,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content} value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })} onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Überschrift 1…" placeholder="Überschrift 1…"
className="w-full bg-transparent text-2xl font-bold text-[#e3e3e3] focus:outline-none py-1" className="w-full bg-transparent text-2xl font-semibold text-[#e3e3e3] focus:outline-none py-1"
/> />
)} )}
@@ -363,7 +363,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content} value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })} onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Abschnitts-Überschrift…" placeholder="Abschnitts-Überschrift…"
className="w-full bg-transparent text-lg font-semibold text-[#8ab4f8] focus:outline-none pt-2 pb-1" className="w-full bg-transparent text-lg font-medium text-[#a8c7fa] focus:outline-none pt-2 pb-1"
/> />
)} )}
@@ -373,7 +373,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content} value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })} onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Text schreiben…" placeholder="Text schreiben…"
className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] leading-relaxed focus:outline-none resize-none" className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] leading-relaxed focus:outline-none resize-none font-normal"
/> />
)} )}
@@ -383,7 +383,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
type="checkbox" type="checkbox"
checked={!!block.checked} checked={!!block.checked}
onChange={(e) => updateBlock(block.id, { checked: e.target.checked })} onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
className="w-4 h-4 rounded accent-[#81c995] cursor-pointer" className="w-4 h-4 rounded accent-[#a8dab5] cursor-pointer"
/> />
<input <input
type="text" type="text"
@@ -391,7 +391,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
onChange={(e) => updateBlock(block.id, { content: e.target.value })} onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="To-Do Punkt…" placeholder="To-Do Punkt…"
className={`w-full bg-transparent text-sm sm:text-base focus:outline-none ${ className={`w-full bg-transparent text-sm sm:text-base focus:outline-none ${
block.checked ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]' block.checked ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
}`} }`}
/> />
</div> </div>
@@ -399,7 +399,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{block.type === 'bullet' && ( {block.type === 'bullet' && (
<div className="flex items-center gap-3 py-0.5"> <div className="flex items-center gap-3 py-0.5">
<span className="w-1.5 h-1.5 rounded-full bg-[#8ab4f8] flex-shrink-0" /> <span className="w-1.5 h-1.5 rounded-full bg-[#a8c7fa] flex-shrink-0" />
<input <input
type="text" type="text"
value={block.content} value={block.content}
@@ -411,8 +411,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)} )}
{block.type === 'callout' && ( {block.type === 'callout' && (
<div className="p-4 rounded-2xl bg-[#131314] border border-[#8ab4f8]/30 flex items-start gap-3"> <div className="p-4 rounded-2xl bg-[#131314] border border-[#a8c7fa]/25 flex items-start gap-3">
<Sparkles className="w-4 h-4 text-[#8ab4f8] flex-shrink-0 mt-1" /> <Sparkles className="w-4 h-4 text-[#a8c7fa] flex-shrink-0 mt-1" />
<textarea <textarea
rows={2} rows={2}
value={block.content} value={block.content}
@@ -424,13 +424,13 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)} )}
{block.type === 'code' && ( {block.type === 'code' && (
<div className="p-4 rounded-2xl bg-[#0b0f19] gemini-border font-mono text-xs sm:text-sm text-[#81c995]"> <div className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#a8dab5]">
<textarea <textarea
rows={Math.max(2, block.content.split('\n').length)} rows={Math.max(2, block.content.split('\n').length)}
value={block.content} value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })} onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="// Code oder Shell-Kommando…" placeholder="// Code oder Shell-Kommando…"
className="w-full bg-transparent focus:outline-none resize-none" className="w-full bg-transparent focus:outline-none resize-none font-mono"
/> />
</div> </div>
)} )}
@@ -441,7 +441,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button <button
type="button" type="button"
onClick={() => moveBlock(idx, -1)} onClick={() => moveBlock(idx, -1)}
className="p-1 rounded-full hover:bg-[#282a2c] text-[#9aa0a6]" className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
title="Nach oben" title="Nach oben"
> >
<ArrowUp className="w-3.5 h-3.5" /> <ArrowUp className="w-3.5 h-3.5" />
@@ -449,7 +449,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button <button
type="button" type="button"
onClick={() => moveBlock(idx, 1)} onClick={() => moveBlock(idx, 1)}
className="p-1 rounded-full hover:bg-[#282a2c] text-[#9aa0a6]" className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
title="Nach unten" title="Nach unten"
> >
<ArrowDown className="w-3.5 h-3.5" /> <ArrowDown className="w-3.5 h-3.5" />
@@ -457,7 +457,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button <button
type="button" type="button"
onClick={() => removeBlock(block.id)} onClick={() => removeBlock(block.id)}
className="p-1 rounded-full hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82]" className="p-1 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] transition-colors"
title="Block entfernen" title="Block entfernen"
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
@@ -469,67 +469,67 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Add Block Pill Toolbar */} {/* Add Block Pill Toolbar */}
<div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2"> <div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2">
<span className="text-xs text-[#9aa0a6] mr-1">+ Block einfügen:</span> <span className="text-xs text-[#8e918f] mr-1">+ Block einfügen:</span>
<button <button
type="button" type="button"
onClick={() => addBlock('paragraph')} onClick={() => addBlock('paragraph')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5" 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"
> >
<AlignLeft className="w-3.5 h-3.5 text-[#8ab4f8]" /> Text <AlignLeft className="w-3.5 h-3.5 text-[#a8c7fa]" /> Text
</button> </button>
<button <button
type="button" type="button"
onClick={() => addBlock('h2')} onClick={() => addBlock('h2')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5" 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"
> >
<Heading2 className="w-3.5 h-3.5 text-[#8ab4f8]" /> Überschrift <Heading2 className="w-3.5 h-3.5 text-[#a8c7fa]" /> Überschrift
</button> </button>
<button <button
type="button" type="button"
onClick={() => addBlock('todo')} onClick={() => addBlock('todo')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5" 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"
> >
<CheckSquare className="w-3.5 h-3.5 text-[#81c995]" /> Checkliste <CheckSquare className="w-3.5 h-3.5 text-[#a8dab5]" /> Checkliste
</button> </button>
<button <button
type="button" type="button"
onClick={() => addBlock('bullet')} onClick={() => addBlock('bullet')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5" 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"
> >
<List className="w-3.5 h-3.5 text-[#8ab4f8]" /> Aufzählung <List className="w-3.5 h-3.5 text-[#a8c7fa]" /> Aufzählung
</button> </button>
<button <button
type="button" type="button"
onClick={() => addBlock('callout')} onClick={() => addBlock('callout')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5" 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"
> >
<Sparkles className="w-3.5 h-3.5 text-[#c58af9]" /> Callout <Sparkles className="w-3.5 h-3.5 text-[#a8c7fa]" /> Callout
</button> </button>
<button <button
type="button" type="button"
onClick={() => addBlock('code')} onClick={() => addBlock('code')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5" 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"
> >
<Code className="w-3.5 h-3.5 text-[#81c995]" /> Codeblock <Code className="w-3.5 h-3.5 text-[#a8dab5]" /> Codeblock
</button> </button>
<button <button
type="button" type="button"
onClick={() => addBlock('h1')} onClick={() => addBlock('h1')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5" 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"
> >
<Heading1 className="w-3.5 h-3.5 text-[#8ab4f8]" /> H1 <Heading1 className="w-3.5 h-3.5 text-[#a8c7fa]" /> H1
</button> </button>
</div> </div>
</div> </div>
) : ( ) : (
<div className="p-12 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6]"> <div className="p-12 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f]">
Wähle links ein Dokument aus oder erstelle ein neues Projekt. Wähle links ein Dokument aus oder erstelle ein neues Projekt.
</div> </div>
)} )}
frontend/src/index.css
+22 -25
View File
@@ -3,23 +3,27 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
/* BRAIN.md Strict Gemini Dark Theme Tokens */ /* Google Gemini / Material 3 Dark Palette */
--bg-app: #0b0f19; --bg-canvas: #131314;
--bg-surface: #131314; --bg-surface: #1e1f20;
--bg-card: #1e1f20; --bg-surface-elevated: #282a2c;
--bg-card-hover: #282a2c; --bg-surface-hover: #333537;
--border-subtle: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.08);
--border-focus: rgba(138, 180, 248, 0.40); --border-medium: #3c4043;
--border-focus: #a8c7fa;
--accent-blue: #8ab4f8; --color-primary: #a8c7fa;
--accent-purple: #c58af9; --color-primary-container: #004a77;
--swipe-keep: #81c995; --color-on-primary-container: #d3e3fd;
--swipe-discard: #f28b82;
--color-success: #a8dab5;
--color-danger: #f28b82;
--color-warning: #fdd663;
--text-primary: #e3e3e3; --text-primary: #e3e3e3;
--text-muted: #9aa0a6; --text-secondary: #c4c7c5;
--text-subtle: #5f6368; --text-tertiary: #8e918f;
} }
* { * {
@@ -28,13 +32,13 @@
} }
body { body {
background-color: var(--bg-app); background-color: var(--bg-canvas);
color: var(--text-primary); color: var(--text-primary);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow-x: hidden; overflow-x: hidden;
} }
/* Subtle custom dark scrollbar */ /* Subtle Material scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;
@@ -50,20 +54,13 @@ body {
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(138, 180, 248, 0.35); background: rgba(255, 255, 255, 0.22);
} }
.gemini-border { .gemini-border {
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
} }
.gemini-input-glow:focus-within { .gemini-border-medium {
border-color: rgba(138, 180, 248, 0.55); border: 1px solid var(--border-medium);
box-shadow: 0 0 32px -4px rgba(138, 180, 248, 0.25), 0 0 12px -2px rgba(197, 138, 249, 0.2);
}
.gemini-gradient-text {
background: linear-gradient(135deg, #8ab4f8 0%, #c58af9 55%, #81c995 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
frontend/tailwind.config.js
+16 -13
View File
@@ -6,17 +6,21 @@ export default {
extend: { extend: {
colors: { colors: {
gemini: { gemini: {
bg: '#0b0f19', canvas: '#131314',
surface: '#131314', surface: '#1e1f20',
card: '#1e1f20', elevated: '#282a2c',
hover: '#282a2c', hover: '#333537',
blue: '#8ab4f8', border: '#3c4043',
purple: '#c58af9', subtle: 'rgba(255, 255, 255, 0.08)',
keep: '#81c995', blue: '#a8c7fa',
discard: '#f28b82', blueContainer: '#004a77',
blueOnContainer: '#d3e3fd',
green: '#a8dab5',
red: '#f28b82',
yellow: '#fdd663',
text: '#e3e3e3', text: '#e3e3e3',
muted: '#9aa0a6', secondary: '#c4c7c5',
subtle: '#5f6368', tertiary: '#8e918f',
}, },
}, },
fontFamily: { fontFamily: {
@@ -24,9 +28,8 @@ export default {
mono: ['JetBrains Mono', 'Fira Code', 'monospace'], mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
}, },
boxShadow: { boxShadow: {
'gemini-glow': '0 0 28px -4px rgba(138, 180, 248, 0.22)', soft: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2)',
'purple-glow': '0 0 32px -4px rgba(197, 138, 249, 0.35)', card: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)',
'card-depth': '0 20px 50px -12px rgba(0, 0, 0, 0.7)',
}, },
}, },
}, },