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
+428 -304
9 changed files with 428 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ec9ba8fd9f - Show all commits

No files matched your search

frontend/src/App.tsx
+19 -57
View File
@@ -148,9 +148,9 @@ export const App: React.FC = () => {
};
return (
<div className="min-h-screen bg-[#16171a] text-white flex flex-col font-sans selection:bg-[#1d8cf8]/30">
<div className="min-h-screen bg-canvas text-white flex flex-col font-sans selection:bg-accent/30">
{/* Top Header Bar */}
<header className="sticky top-0 z-30 bg-[#16171a]/95 backdrop-blur-md border-b border-white/[0.08]">
<header className="sticky top-0 z-30 bg-panel/95 backdrop-blur-md border-b border-border">
<div className="max-w-6xl mx-auto px-3 sm:px-4 h-12 flex items-center justify-between gap-4">
{/* Logo & Headline */}
<div
@@ -160,7 +160,7 @@ export const App: React.FC = () => {
}}
className="flex items-center gap-2.5 cursor-pointer group select-none"
>
<div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center">
<div className="w-7 h-7 bg-accent text-white flex items-center justify-center">
<Brain className="w-4 h-4" />
</div>
<div className="flex flex-col">
@@ -180,10 +180,10 @@ export const App: React.FC = () => {
triggerHaptic(10);
setShowProfileModal(true);
}}
className="h-8 pl-1 pr-3 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2 transition-colors"
className="h-8 pl-1 pr-3 rounded-full bg-panel hover:bg-panel-elevated border border-border text-xs font-medium text-white flex items-center gap-2 transition-colors"
title="Profil & Einstellungen"
>
<div className="w-6 h-6 rounded-full bg-[#1d8cf8] text-white text-[10px] font-bold flex items-center justify-center">
<div className="w-6 h-6 rounded-full bg-accent text-white text-[10px] font-bold flex items-center justify-center">
{user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
</div>
<span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
@@ -192,29 +192,19 @@ export const App: React.FC = () => {
</div>
{/* Monochrome square tabs attached to header */}
<nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-white/[0.06]">
<nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-border">
<div className="flex items-stretch">
<button
onClick={() => {
triggerHaptic(10);
setActiveTab('triage');
}}
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'triage'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
className={`tab-btn ${activeTab === 'triage' ? 'tab-btn-active' : ''}`}
>
<Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<Layers className="w-4 h-4" />
<span>Triage</span>
{stats.inboxCount > 0 && (
<span
className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
activeTab === 'triage'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`}
>
<span className={activeTab === 'triage' ? 'badge-accent' : 'px-1.5 py-0.5 text-[10px] bg-canvas text-zinc-400 border border-border'}>
{stats.inboxCount}
</span>
)}
@@ -225,22 +215,12 @@ export const App: React.FC = () => {
triggerHaptic(10);
setActiveTab('tasks');
}}
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'tasks'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
className={`tab-btn ${activeTab === 'tasks' ? 'tab-btn-active' : ''}`}
>
<CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<CheckSquare className="w-4 h-4" />
<span>Aufgaben</span>
{stats.tasksOpenCount > 0 && (
<span
className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
activeTab === 'tasks'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`}
>
<span className={activeTab === 'tasks' ? 'badge-accent' : 'px-1.5 py-0.5 text-[10px] bg-canvas text-zinc-400 border border-border'}>
{stats.tasksOpenCount}
</span>
)}
@@ -251,21 +231,11 @@ export const App: React.FC = () => {
triggerHaptic(10);
setActiveTab('workspace');
}}
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'workspace'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
className={`tab-btn ${activeTab === 'workspace' ? 'tab-btn-active' : ''}`}
>
<FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<FileText className="w-4 h-4" />
<span>Workspace</span>
<span
className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
activeTab === 'workspace'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
}`}
>
<span className={activeTab === 'workspace' ? 'badge-accent' : 'px-1.5 py-0.5 text-[10px] bg-canvas text-zinc-400 border border-border'}>
{stats.docsCount}
</span>
</button>
@@ -275,13 +245,9 @@ export const App: React.FC = () => {
triggerHaptic(10);
setActiveTab('lists');
}}
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'lists'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
className={`tab-btn ${activeTab === 'lists' ? 'tab-btn-active' : ''}`}
>
<ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<ShoppingCart className="w-4 h-4" />
<span>Geteilte Listen</span>
</button>
@@ -290,13 +256,9 @@ export const App: React.FC = () => {
triggerHaptic(10);
setActiveTab('ecosystem');
}}
className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
activeTab === 'ecosystem'
? 'border-[#1d8cf8] text-white bg-white/[0.04]'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.03]'
}`}
className={`tab-btn ${activeTab === 'ecosystem' ? 'tab-btn-active' : ''}`}
>
<Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
<Webhook className="w-4 h-4" />
<span>Webhooks & Export</span>
</button>
</div>
frontend/src/features/capture/InstantCaptureBar.tsx
+14 -14
View File
@@ -135,13 +135,13 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
<form onSubmit={handleSubmit} className="relative">
{/* Capture Input Bar */}
<div
className={`flex items-center h-11 pl-2 pr-1.5 bg-[#222428] border rounded-full transition-colors duration-150 ${
className={`flex items-center h-11 pl-2 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${
isListening
? 'border-[#1d8cf8] bg-[#222428]'
: 'border-white/[0.08] focus-within:border-[#1d8cf8]'
? 'border-accent bg-panel'
: 'border-border focus-within:border-accent'
}`}
>
<div className="w-7 h-7 rounded-full bg-[#1d8cf8] text-white flex items-center justify-center mr-2 flex-shrink-0">
<div className="w-7 h-7 rounded-full bg-accent text-white flex items-center justify-center mr-2 flex-shrink-0">
<Sparkles className="w-3.5 h-3.5" />
</div>
@@ -167,8 +167,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
title="Priorität & Fälligkeit"
className={`h-7 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
showOptions || priority !== 'normal' || dueDate
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
: 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
? 'bg-accent/20 text-accent border border-accent/40'
: 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
}`}
>
<Calendar className="w-3.5 h-3.5" />
@@ -184,8 +184,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
title="Spracheingabe"
className={`w-7 h-7 rounded-full flex items-center justify-center transition-colors ${
isListening
? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
: 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
? 'bg-accent/20 text-accent'
: 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
}`}
>
{isListening ? <MicOff className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
@@ -197,8 +197,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
disabled={!content.trim() || isSubmitting}
className={`h-7 px-3 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
content.trim()
? 'bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white cursor-pointer shadow-sm'
: 'bg-[#2b2d33] text-zinc-500 cursor-not-allowed'
? 'bg-accent hover:bg-accent-hover text-white cursor-pointer shadow-sm'
: 'bg-panel-elevated text-zinc-500 cursor-not-allowed'
}`}
>
{justSaved ? (
@@ -218,7 +218,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
{/* Expandable Quick Metadata */}
{showOptions && (
<div className="mt-1 px-3 py-2 bg-[#1c1e22] border border-white/[0.08] flex flex-wrap items-center justify-between gap-2 text-xs">
<div className="mt-1 px-3 py-2 bg-panel border border-border flex flex-wrap items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-1.5">
<span className="text-zinc-400 mr-1">Priorität:</span>
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
@@ -236,8 +236,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
onClick={() => setPriority(p)}
className={`px-2.5 py-0.5 rounded-full transition-colors text-xs ${
active
? 'bg-[#1d8cf8] text-white font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
? 'bg-accent text-white font-medium'
: 'bg-canvas text-zinc-400 hover:text-white border border-border'
}`}
>
{labels[p]}
@@ -252,7 +252,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
className="bg-[#16171a] text-white px-2 py-0.5 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
className="input-field px-2 py-0.5 text-xs"
/>
</div>
</div>
frontend/src/features/lists/SharedListsView.tsx
+45 -45
View File
@@ -266,7 +266,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
return (
<div className="w-full space-y-3">
{/* Top Space Bar & Realtime Indicator */}
<div className="px-3 py-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
<div className="px-3 py-2 panel-surface flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap items-center gap-1.5">
{spaces.map((sp) => (
<button
@@ -274,8 +274,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onClick={() => setActiveSpace(sp)}
className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-colors border ${
activeSpace?.id === sp.id
? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
: 'bg-[#16171a] text-zinc-300 hover:text-white border-white/[0.08]'
? 'bg-accent text-white border-accent'
: 'bg-canvas text-zinc-300 hover:text-white border-border'
}`}
>
<span>{sp.icon}</span>
@@ -285,16 +285,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
onClick={() => setShowNewSpaceModal((prev) => !prev)}
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-8"
>
<Plus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Space
<Plus className="w-3.5 h-3.5 text-accent" /> Space
</button>
<button
onClick={() => setShowJoinModal((prev) => !prev)}
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-8"
>
<UserPlus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Code einlösen
<UserPlus className="w-3.5 h-3.5 text-accent" /> Code einlösen
</button>
</div>
@@ -305,7 +305,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
className={`h-8 px-3 text-xs flex items-center gap-1.5 ${
wsConnected
? 'bg-[#22c55e]/15 text-[#22c55e] border border-[#22c55e]/30'
: 'bg-[#2b2d33] text-zinc-400 border border-white/[0.06]'
: 'bg-panel-elevated text-zinc-400 border border-border'
}`}
>
<Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
@@ -315,9 +315,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
onClick={copyInviteCode}
title="Einladungscode für Partner oder Familie kopieren"
className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-8"
>
<Users className="w-3.5 h-3.5 text-[#1d8cf8]" />
<Users className="w-3.5 h-3.5 text-accent" />
<span>Code: {activeSpace.inviteCode}</span>
{copiedInvite ? (
<Check className="w-3.5 h-3.5 text-[#22c55e]" />
@@ -333,19 +333,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewSpaceModal && (
<form
onSubmit={handleCreateSpace}
className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
className="p-2 panel-surface flex items-center gap-2"
>
<input
type="text"
value={newSpaceName}
onChange={(e) => setNewSpaceName(e.target.value)}
placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="flex-1 h-9 px-3 input-field text-sm"
autoFocus
/>
<button
type="submit"
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
className="btn-primary h-9 px-4 text-xs sm:text-sm"
>
Space anlegen
</button>
@@ -355,19 +355,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showJoinModal && (
<form
onSubmit={handleJoinSpace}
className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
className="p-2 panel-surface flex items-center gap-2"
>
<input
type="text"
value={joinCode}
onChange={(e) => setJoinCode(e.target.value)}
placeholder="Invite-Code des Partners eingeben…"
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] uppercase transition-colors"
className="flex-1 h-9 px-3 input-field text-sm uppercase"
autoFocus
/>
<button
type="submit"
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
className="btn-primary h-9 px-4 text-xs sm:text-sm"
>
Beitreten
</button>
@@ -385,14 +385,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onClick={() => setActiveListId(lst.id)}
className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-all border ${
isSelected
? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
: 'bg-[#222428] text-zinc-300 hover:text-white border-white/[0.08]'
? 'bg-accent text-white border-accent'
: 'bg-panel text-zinc-300 hover:text-white border-border'
}`}
>
<span>{lst.icon}</span>
<span>{lst.title}</span>
<span className={`px-1.5 py-0.2 text-[10px] font-semibold ${
isSelected ? 'bg-white/20 text-white' : 'bg-[#16171a] text-zinc-400'
isSelected ? 'bg-white/20 text-white' : 'bg-canvas text-zinc-400'
}`}>
{openCount}
</span>
@@ -402,9 +402,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<button
onClick={() => setShowNewListModal((prev) => !prev)}
className="h-8 px-3 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-8"
>
<Plus className="w-3.5 h-3.5 text-[#1d8cf8]" />
<Plus className="w-3.5 h-3.5 text-accent" />
<span>Neue Liste</span>
</button>
</div>
@@ -412,7 +412,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{showNewListModal && (
<form
onSubmit={handleCreateList}
className="p-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-2"
className="p-2 panel-surface flex flex-wrap items-center gap-2"
>
<div className="flex items-center gap-1.5">
{['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
@@ -420,10 +420,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
key={ic}
type="button"
onClick={() => setNewListIcon(ic)}
className={`w-9 h-9 rounded-full flex items-center justify-center transition-colors ${
className={`w-9 h-9 flex items-center justify-center transition-colors ${
newListIcon === ic
? 'bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8]'
: 'bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06]'
? 'bg-accent/20 border border-accent text-accent'
: 'bg-canvas hover:bg-panel-elevated border border-border'
}`}
>
{ic}
@@ -435,12 +435,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newListTitle}
onChange={(e) => setNewListTitle(e.target.value)}
placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="flex-1 h-9 px-3 input-field text-sm"
autoFocus
/>
<button
type="submit"
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
className="btn-primary h-9 px-4 text-xs sm:text-sm"
>
Liste erstellen
</button>
@@ -449,7 +449,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Active Shared List Card */}
{activeList ? (
<div className="p-3 bg-[#222428] border border-white/[0.08]">
<div className="p-3 panel-surface">
{/* Quick-Add Pill Form */}
<form onSubmit={handleAddItem} className="space-y-2 mb-3">
<div className="flex flex-col sm:flex-row gap-2">
@@ -458,7 +458,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemText}
onChange={(e) => setNewItemText(e.target.value)}
placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
className="flex-1 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="flex-1 h-9 px-3 input-field text-sm"
/>
<div className="flex gap-2">
<input
@@ -466,12 +466,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemQty}
onChange={(e) => setNewItemQty(e.target.value)}
placeholder="Menge (z.B. 2x)"
className="w-32 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="w-32 h-9 px-3 input-field text-sm"
/>
<button
type="submit"
disabled={!newItemText.trim()}
className="h-10 px-5 rounded-full bg-[#1d8cf8] disabled:bg-[#2b2d33] text-white disabled:text-zinc-500 font-medium text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
className="btn-primary h-9 px-4 disabled:opacity-40 disabled:cursor-not-allowed text-xs sm:text-sm flex items-center gap-1.5"
>
<Plus className="w-4 h-4" />
<span>Hinzufügen</span>
@@ -489,8 +489,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
className={`px-2.5 py-0.5 text-xs transition-colors border ${
newItemCategory === cat
? 'bg-[#1d8cf8] text-white border-[#1d8cf8] font-medium'
: 'bg-[#16171a] text-zinc-400 hover:text-white border-white/[0.08]'
? 'bg-accent text-white border-accent font-medium'
: 'bg-canvas text-zinc-400 hover:text-white border-border'
}`}
>
{cat}
@@ -500,10 +500,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
</form>
{/* Open Items */}
<div className="border border-white/[0.08] divide-y divide-white/[0.06]">
<div className="border border-border divide-y divide-border">
{openItems.length === 0 ? (
<div className="py-6 text-center text-zinc-400 text-sm flex flex-col items-center gap-1.5">
<Sparkles className="w-4 h-4 text-[#1d8cf8]" />
<Sparkles className="w-4 h-4 text-accent" />
<span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
</div>
) : (
@@ -511,20 +511,20 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
<div
key={item.id}
onClick={() => handleToggleItem(item)}
className="px-3 py-2 bg-[#16171a] hover:bg-[#282a2f] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
className="px-3 py-2 bg-canvas hover:bg-panel-elevated flex items-center justify-between gap-3 cursor-pointer transition-colors group"
>
<div className="flex items-center gap-2.5 min-w-0">
<Circle className="w-4 h-4 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" />
<Circle className="w-4 h-4 text-zinc-500 group-hover:text-accent flex-shrink-0 transition-colors" />
<span className="text-sm font-normal text-white truncate">
{item.content}
</span>
{item.quantity && (
<span className="px-2 py-0.2 bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold">
<span className="badge-accent">
{item.quantity}
</span>
)}
{item.category && (
<span className="hidden sm:inline px-2 py-0.2 bg-[#222428] text-zinc-400 text-xs">
<span className="hidden sm:inline px-2 py-0.2 bg-panel text-zinc-400 text-xs">
{item.category}
</span>
)}
@@ -536,7 +536,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
e.stopPropagation();
handleDeleteItem(item.id);
}}
className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
className="btn-icon btn-icon-danger w-6 h-6"
>
<Trash2 className="w-3 h-3" />
</button>
@@ -547,28 +547,28 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
{/* Completed Items Section */}
{completedItems.length > 0 && (
<div className="mt-3 pt-2.5 border-t border-white/[0.06]">
<div className="mt-3 pt-2.5 border-t border-border">
<div className="flex items-center justify-between mb-2">
<span className="text-xs font-medium uppercase tracking-wider text-zinc-400">
Erledigt ({completedItems.length})
</span>
<button
onClick={handleClearCompleted}
className="px-3 py-0.5 rounded-full bg-[#16171a] hover:bg-white/[0.08] border border-white/[0.06] text-xs text-zinc-400 hover:text-white transition-colors"
className="btn-action text-xs"
>
Erledigte aufräumen
</button>
</div>
<div className="border border-white/[0.06] divide-y divide-white/[0.04] opacity-75">
<div className="border border-border divide-y divide-border opacity-75">
{completedItems.map((item) => (
<div
key={item.id}
onClick={() => handleToggleItem(item)}
className="px-3 py-1.5 bg-[#16171a]/50 hover:bg-[#16171a]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
className="px-3 py-1.5 bg-canvas/50 hover:bg-canvas/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
>
<div className="flex items-center gap-2.5 min-w-0">
<CheckCircle2 className="w-4 h-4 text-[#1d8cf8] flex-shrink-0" />
<CheckCircle2 className="w-4 h-4 text-accent flex-shrink-0" />
<span className="text-sm text-zinc-400 line-through truncate">
{item.content}
</span>
frontend/src/features/settings/EcosystemView.tsx
+20 -20
View File
@@ -92,11 +92,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
const baseUrl = window.location.origin;
return (
<div className="w-full bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.08]">
<div className="w-full panel-surface divide-y divide-border">
{/* Section 1: API Keys for Smarthome & Automation */}
<div className="p-4">
<div className="flex items-center gap-3 mb-2">
<div className="w-8 h-8 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
<div className="w-8 h-8 bg-accent text-white flex items-center justify-center flex-shrink-0">
<Key className="w-4 h-4" />
</div>
<div>
@@ -115,11 +115,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
value={newKeyName}
onChange={(e) => setNewKeyName(e.target.value)}
placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="flex-1 h-9 px-3 input-field text-sm"
/>
<button
type="submit"
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
className="btn-primary h-9 px-4 text-xs sm:text-sm"
>
<Plus className="w-4 h-4" />
<span>API-Key erzeugen</span>
@@ -127,9 +127,9 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</form>
{newlyCreatedKey && (
<div className="mt-3 p-3 bg-[#1d8cf8]/15 border border-[#1d8cf8]/30 flex flex-wrap items-center justify-between gap-3">
<div className="mt-3 p-3 bg-accent/15 border border-accent/30 flex flex-wrap items-center justify-between gap-3">
<div className="min-w-0">
<p className="text-xs font-semibold text-[#1d8cf8] mb-1">
<p className="text-xs font-semibold text-accent mb-1">
Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
</p>
<code className="text-xs sm:text-sm font-mono text-white break-all">
@@ -138,7 +138,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
<button
onClick={() => handleCopy(newlyCreatedKey)}
className="h-8 px-3 rounded-full bg-[#1d8cf8] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
className="btn-primary h-8 px-3 text-xs"
>
{copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
<span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -147,7 +147,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
)}
{/* Active Keys List */}
<div className="mt-3 border border-white/[0.06] divide-y divide-white/[0.06]">
<div className="mt-3 border border-border divide-y divide-border">
{keys.length === 0 ? (
<p className="text-xs text-zinc-500 px-3 py-2">
Noch keine dedizierten API-Schlüssel hinterlegt.
@@ -156,11 +156,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
keys.map((k) => (
<div
key={k.id}
className="px-3 py-1.5 bg-[#16171a] flex items-center justify-between gap-3"
className="px-3 py-1.5 bg-canvas flex items-center justify-between gap-3"
>
<div>
<span className="text-sm font-medium text-white">{k.name}</span>
<span className="ml-3 text-xs font-mono text-[#1d8cf8]">{k.keyPrefix}</span>
<span className="ml-3 text-xs font-mono text-accent">{k.keyPrefix}</span>
{k.lastUsedAt && (
<span className="ml-3 text-xs text-zinc-500">
Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
@@ -169,7 +169,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
<button
onClick={() => handleDeleteKey(k.id)}
className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
className="btn-icon btn-icon-danger w-7 h-7"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
@@ -182,7 +182,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
{/* Section 2: Interactive Smarthome Webhook Simulator */}
<div className="p-4">
<div className="flex items-center gap-3 mb-3">
<div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
<div className="w-7 h-7 bg-accent text-white flex items-center justify-center flex-shrink-0">
<Webhook className="w-4 h-4" />
</div>
<div>
@@ -208,7 +208,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
setSimTitle(preset.text);
setSimPriority(preset.prio);
}}
className="px-3 py-1 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
className="btn-action text-xs"
>
{preset.label}
</button>
@@ -220,12 +220,12 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
type="text"
value={simTitle}
onChange={(e) => setSimTitle(e.target.value)}
className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="flex-1 h-9 px-3 input-field text-sm"
/>
<button
type="button"
onClick={handleSimulateWebhook}
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
className="btn-primary h-9 px-4 text-xs sm:text-sm flex items-center gap-1.5"
>
<Zap className="w-4 h-4" />
<span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
</div>
{simStatus && (
<p className="mt-3 text-xs font-medium text-[#1d8cf8]">{simStatus}</p>
<p className="mt-3 text-xs font-medium text-accent">{simStatus}</p>
)}
{/* Code Example Snippets */}
<div className="mt-4 space-y-2">
<div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
<Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" />
<Terminal className="w-3.5 h-3.5 text-accent" />
<span>cURL / Home Assistant REST Command:</span>
</div>
<pre className="p-3 bg-[#16171a] border border-white/[0.06] font-mono text-xs text-zinc-300 overflow-x-auto">
<pre className="p-3 bg-canvas border border-border font-mono text-xs text-zinc-300 overflow-x-auto">
{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
-H "Content-Type: application/json" \\
-d '{
@@ -257,7 +257,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
{/* Section 3: Data Sovereignty & Export */}
<div className="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div className="flex items-center gap-3">
<div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
<div className="w-7 h-7 bg-accent text-white flex items-center justify-center flex-shrink-0">
<ShieldCheck className="w-4 h-4" />
</div>
<div>
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
<button
onClick={handleFullExport}
className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
className="btn-primary h-9 px-4 text-xs sm:text-sm flex items-center gap-2"
>
<Download className="w-4 h-4" />
<span>Komplett-Backup (.json)</span>
frontend/src/features/triage/TasksView.tsx
+21 -20
View File
@@ -95,12 +95,12 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<div className="w-full space-y-2">
{/* Filter Tabs */}
<div className="flex flex-wrap items-center justify-between gap-2 mb-1">
<div className="flex items-center border border-white/[0.08] bg-[#16171a]">
<div className="flex items-center border border-border bg-canvas">
<button
onClick={() => setFilter('open')}
className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
className={`h-8 px-3.5 text-xs font-medium border-r border-border transition-colors ${
filter === 'open'
? 'bg-[#222428] text-white'
? 'bg-panel text-white'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
@@ -109,9 +109,9 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<button
onClick={() => setFilter('done')}
className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
className={`h-8 px-3.5 text-xs font-medium border-r border-border transition-colors ${
filter === 'done'
? 'bg-[#222428] text-white'
? 'bg-panel text-white'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
@@ -122,7 +122,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
onClick={() => setFilter('discarded')}
className={`h-8 px-3.5 text-xs font-medium transition-colors ${
filter === 'discarded'
? 'bg-[#222428] text-white'
? 'bg-panel text-white'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
@@ -133,7 +133,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
{filter === 'discarded' && discarded.length > 0 && (
<button
onClick={handlePurgeAllDiscarded}
className="h-7 px-3 rounded-full bg-white/[0.06] hover:bg-white/[0.12] text-zinc-300 hover:text-white text-xs font-medium flex items-center gap-1.5 transition-colors"
className="btn-action"
>
<Trash2 className="w-3.5 h-3.5" />
Papierkorb leeren
@@ -144,7 +144,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
{loading ? (
<div className="p-6 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
) : filter === 'discarded' ? (
<div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
<div className="panel-surface divide-y divide-border">
{discarded.length === 0 ? (
<div className="px-4 py-6 text-center text-zinc-400 text-sm">
Keine verworfenen Gedanken im Papierkorb.
@@ -162,13 +162,14 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<div className="flex items-center gap-2 flex-shrink-0">
<button
onClick={() => handleRestore(item)}
className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
className="btn-action"
>
<RotateCcw className="w-3 h-3" /> Zurück
<RotateCcw className="w-3 h-3 text-accent" /> Zurück
</button>
<button
onClick={() => handleDeletePermanent(item.id)}
className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
className="btn-icon btn-icon-danger"
title="Endgültig löschen"
>
<Trash2 className="w-3 h-3" />
</button>
@@ -178,7 +179,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
)}
</div>
) : (
<div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
<div className="panel-surface divide-y divide-border">
{(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
<div className="px-4 py-6 text-center text-zinc-400 text-sm">
{filter === 'open'
@@ -199,8 +200,8 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
onClick={() => handleToggleDone(task)}
className={`w-4 h-4 flex items-center justify-center flex-shrink-0 transition-colors border ${
task.isCompleted
? 'bg-[#1d8cf8] border-[#1d8cf8] text-white'
: 'border-zinc-500 hover:border-[#1d8cf8] text-transparent'
? 'bg-accent border-accent text-white'
: 'border-zinc-500 hover:border-accent text-transparent'
}`}
title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
>
@@ -218,7 +219,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
<div className="flex flex-wrap items-center gap-1.5 mt-0.5 empty:hidden">
{task.priority === 'urgent' && (
<span className="px-1.5 py-0.2 border border-[#1d8cf8] text-[#1d8cf8] text-[10px] font-semibold">
<span className="badge-accent">
Dringend
</span>
)}
@@ -230,7 +231,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
{task.tags?.map((tag) => (
<span
key={tag}
className="px-1.5 py-0.2 bg-[#16171a] text-zinc-400 text-[10px]"
className="px-1.5 py-0.2 bg-canvas text-zinc-400 text-[10px]"
>
#{tag}
</span>
@@ -247,23 +248,23 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
type="date"
value={task.dueDate || ''}
onChange={(e) => handleDueDateChange(task, e.target.value)}
className="h-7 pl-6 pr-2 bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="h-7 pl-6 pr-2 input-field text-xs"
/>
</div>
<button
onClick={() => handleConvertToDoc(task)}
title="Als Notiz / Projekt vertiefen"
className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action"
>
<FileText className="w-3 h-3 text-[#1d8cf8]" />
<FileText className="w-3 h-3 text-accent" />
<span className="hidden md:inline">Vertiefen</span>
</button>
<button
onClick={() => handleDeletePermanent(task.id)}
title="Löschen"
className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
className="btn-icon btn-icon-danger"
>
<Trash2 className="w-3 h-3" />
</button>
frontend/src/features/triage/TriageDeck.tsx
+27 -35
View File
@@ -185,7 +185,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<div className="flex flex-wrap items-center justify-center gap-2.5">
<button
onClick={onFocusCapture}
className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm shadow-sm transition-colors"
className="btn-primary h-9 px-4"
>
+ Neuer Gedanke
</button>
@@ -193,9 +193,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{lastTriaged && (
<button
onClick={handleUndo}
className="h-10 px-4 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
className="btn-action h-9 px-3.5"
>
<RotateCcw className="w-3.5 h-3.5 text-[#1d8cf8]" />
<RotateCcw className="w-3.5 h-3.5 text-accent" />
Rückgängig
</button>
)}
@@ -221,9 +221,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{lastTriaged && (
<button
onClick={handleUndo}
className="h-7 px-2.5 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-7 px-2.5 text-xs"
>
<RotateCcw className="w-3 h-3 text-[#1d8cf8]" />
<RotateCcw className="w-3 h-3 text-accent" />
Rückgängig
</button>
)}
@@ -235,7 +235,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{nextCard && (
<div
key={nextCard.id + '-preview'}
className="absolute inset-x-3 top-4 bottom-0 bg-[#222428]/60 border border-white/[0.06] p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
className="absolute inset-x-3 top-4 bottom-0 bg-panel/60 border border-border p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
>
<div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
<p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
@@ -262,12 +262,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
initial={{ scale: 0.96, opacity: 0, y: 12 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.92, opacity: 0 }}
className="relative w-full h-full bg-[#222428] border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
className="relative w-full h-full bg-panel border border-border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
>
{/* Dynamic Swipe Overlays */}
<motion.div
style={{ opacity: keepOpacity }}
className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8] font-semibold text-xs tracking-wide uppercase"
className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-accent/20 border border-accent text-accent font-semibold text-xs tracking-wide uppercase"
>
Behalten 👉
</motion.div>
@@ -304,13 +304,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div>
{/* Card Footer: Tags & Due Date */}
<div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-white/[0.06]">
<div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-border">
<div className="flex flex-wrap items-center gap-1.5">
{activeCard.tags && activeCard.tags.length > 0 ? (
activeCard.tags.map((tag) => (
<span
key={tag}
className="px-2.5 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] text-xs flex items-center gap-1 font-medium"
className="badge-accent"
>
<Tag className="w-2.5 h-2.5" />#{tag}
</span>
@@ -321,7 +321,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div>
{activeCard.dueDate && (
<span className="px-2.5 py-0.5 bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
<span className="px-2.5 py-0.5 bg-canvas text-zinc-300 border border-border text-xs">
📅 {activeCard.dueDate}
</span>
)}
@@ -332,9 +332,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Task Date Picker Popover */}
{showDateModal && (
<div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
<div className="p-3 bg-panel border border-t-0 border-border flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-2 text-xs text-zinc-300">
<Calendar className="w-4 h-4 text-[#1d8cf8]" />
<Calendar className="w-4 h-4 text-accent" />
<span>Fälligkeitsdatum für Aufgabe:</span>
</div>
<div className="flex items-center gap-2">
@@ -342,11 +342,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
type="date"
value={taskDueDate}
onChange={(e) => setTaskDueDate(e.target.value)}
className="bg-[#16171a] text-white px-3 py-1 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
className="input-field px-3 py-1 text-xs"
/>
<button
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
className="px-3.5 py-1 rounded-full bg-[#22c55e] text-white font-medium text-xs hover:bg-[#16a34a] transition-colors"
className="btn-primary"
>
Speichern
</button>
@@ -354,9 +354,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div>
)}
{/* Convert to Shopping List Item Popover */}
{/* Convert to Shared Shopping List Item Popover */}
{showListSelector && (
<div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08]">
<div className="p-3 bg-panel border border-t-0 border-border">
<p className="text-xs text-zinc-400 mb-2">
In welche Liste verschieben?
</p>
@@ -368,7 +368,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
onClick={() =>
handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
}
className="px-3 py-1.5 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-xs text-zinc-200 flex items-center gap-1.5 transition-colors"
className="btn-action"
>
<span>{lst.icon}</span>
<span>{lst.title}</span>
@@ -381,13 +381,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div>
)}
{/* Primary Triage Action Pills */}
{/* Primary Triage Action Buttons */}
<div className="mt-3 flex flex-wrap items-center justify-center gap-2">
{/* Swipe Left: Discard */}
<button
onClick={() => handleAction('discard')}
title="Verwerfen (Taste H oder Pfeil links)"
className="h-9 px-3.5 rounded-full border border-white/20 text-zinc-300 hover:text-white hover:bg-white/[0.06] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
className="btn-action h-8 px-3"
>
<X className="w-4 h-4" />
<span>Weg damit</span>
@@ -400,13 +400,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowDateModal((prev) => !prev);
}}
title="Als Aufgabe mit Datum (Taste T)"
className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
showDateModal
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
: 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
}`}
className={`btn-action h-8 px-3 ${showDateModal ? 'border-accent text-accent bg-accent/20' : ''}`}
>
<Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" />
<Calendar className="w-3.5 h-3.5 text-accent" />
<span>Termin-To-Do</span>
</button>
@@ -414,9 +410,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<button
onClick={() => handleAction('keep', { convertTo: 'document' })}
title="In Notiz / Projekt umwandeln (Taste D)"
className="h-9 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-zinc-300 hover:text-white text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
className="btn-action h-8 px-3"
>
<FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
<FileText className="w-3.5 h-3.5 text-accent" />
<span>Als Notiz</span>
</button>
@@ -427,13 +423,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowListSelector((prev) => !prev);
}}
title="Auf eine geteilte Liste setzen"
className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
showListSelector
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
: 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
}`}
className={`btn-action h-8 px-3 ${showListSelector ? 'border-accent text-accent bg-accent/20' : ''}`}
>
<ShoppingCart className="w-3.5 h-3.5 text-[#1d8cf8]" />
<ShoppingCart className="w-3.5 h-3.5 text-accent" />
<span>Auf Liste</span>
</button>
@@ -441,7 +433,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<button
onClick={() => handleAction('keep')}
title="Behalten & sichern (Taste L oder Pfeil rechts)"
className="h-9 px-4 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 shadow-sm transition-colors active:scale-95"
className="btn-primary h-8 px-4"
>
<Check className="w-4 h-4" />
<span>Behalten</span>
frontend/src/features/workspace/WorkspaceView.tsx
+62 -66
View File
@@ -51,7 +51,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
const [saveState, setSaveState] = useState<'saved' | 'saving'>('saved');
const [showIconPicker, setShowIconPicker] = useState(false);
// Folder management
// Folder state
const [customFolders, setCustomFolders] = useState<string[]>(() => {
try {
const stored = localStorage.getItem('mindsift_workspace_folders');
@@ -109,7 +109,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
return tag ? tag.replace('folder:', '') : '';
};
// Compute all available folders (persisted custom folders + tags on documents)
// Compute all unique folder paths
const allFolderPaths = useMemo(() => {
const set = new Set<string>(customFolders);
docs.forEach((doc) => {
@@ -126,7 +126,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
return Array.from(set).sort((a, b) => a.localeCompare(b));
}, [customFolders, docs]);
// Ensure newly discovered folders start expanded so users see their files
// Keep folders expanded by default
useEffect(() => {
setExpandedFolders((prev) => {
const next = new Set(prev);
@@ -215,7 +215,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
try {
localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
} catch {
// local storage fallback
// fallback
}
}
setExpandedFolders((prev) => {
@@ -239,10 +239,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
try {
localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
} catch {
// local storage fallback
// fallback
}
// Keep docs safe: remove folder prefix so they revert to root
// Keep docs safe: drop folder prefix so they fall back to root
docs.forEach((d) => {
const f = getDocFolder(d);
if (f === folderPath || f.startsWith(folderPath + '/')) {
@@ -392,8 +392,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
style={{ paddingLeft: `${depth * 14 + 10}px` }}
className={`w-full text-left py-1.5 pr-2 transition-colors flex items-center justify-between gap-2 border-l-2 ${
active
? 'bg-[#282a2f] border-l-[#1d8cf8] text-white'
: 'border-l-transparent text-zinc-300 hover:bg-[#282a2f] hover:text-white'
? 'tree-node-active'
: 'border-l-transparent text-zinc-300 hover:bg-panel-elevated hover:text-white'
}`}
>
<div className="flex items-center gap-1.5 min-w-0">
@@ -402,7 +402,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
</span>
<span className="text-xs truncate font-normal">{doc.title || 'Ohne Titel'}</span>
</div>
{doc.isPinned && <Pin className="w-3 h-3 text-[#1d8cf8] flex-shrink-0" />}
{doc.isPinned && <Pin className="w-3 h-3 text-accent flex-shrink-0" />}
</button>
);
};
@@ -420,7 +420,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<div
onClick={() => toggleFolder(node.path)}
style={{ paddingLeft: `${node.depth * 14 + 8}px` }}
className="group flex items-center justify-between py-1.5 pr-2 hover:bg-[#282a2f] cursor-pointer transition-colors text-xs text-zinc-300"
className="group flex items-center justify-between py-1.5 pr-2 hover:bg-panel-elevated cursor-pointer transition-colors text-xs text-zinc-300"
>
<div className="flex items-center gap-1.5 min-w-0">
<span className="text-zinc-500 hover:text-zinc-300">
@@ -431,7 +431,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
</span>
{isExpanded ? (
<FolderOpen className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0" />
<FolderOpen className="w-3.5 h-3.5 text-accent flex-shrink-0" />
) : (
<Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
)}
@@ -447,7 +447,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
e.stopPropagation();
handleCreateDoc(node.path);
}}
className="p-1 hover:bg-[#32353b] text-zinc-400 hover:text-white"
className="p-1 hover:bg-panel-hover text-zinc-400 hover:text-white"
title="Neue Datei in diesem Ordner"
>
<FilePlus className="w-3 h-3" />
@@ -458,7 +458,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
e.stopPropagation();
handleStartCreateFolder(node.path);
}}
className="p-1 hover:bg-[#32353b] text-zinc-400 hover:text-white"
className="p-1 hover:bg-panel-hover text-zinc-400 hover:text-white"
title="Neuer Unterordner"
>
<FolderPlus className="w-3 h-3" />
@@ -478,7 +478,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{isCreatingSubfolder && (
<div
style={{ paddingLeft: `${(node.depth + 1) * 14 + 8}px` }}
className="py-1 pr-2 flex items-center gap-1.5 bg-[#16171a]"
className="py-1 pr-2 flex items-center gap-1.5 bg-canvas"
>
<Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
<input
@@ -491,12 +491,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
if (e.key === 'Escape') setIsCreatingFolder(false);
}}
placeholder="Unterordnername…"
className="flex-1 h-6 px-1.5 bg-[#222428] text-xs text-white border border-white/20 focus:outline-none focus:border-[#1d8cf8]"
className="flex-1 h-6 px-1.5 input-field"
/>
<button
type="button"
onClick={handleConfirmCreateFolder}
className="p-1 text-[#1d8cf8] hover:text-white"
className="p-1 text-accent hover:text-white"
title="Bestätigen"
>
<Check className="w-3.5 h-3.5" />
@@ -536,9 +536,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
return (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
{/* Left Document & Folder Explorer Tree */}
<div className="lg:col-span-4 bg-[#222428] border border-white/[0.08] flex flex-col self-start">
<div className="lg:col-span-4 panel-surface flex flex-col self-start">
{/* Top Explorer Action Bar */}
<div className="p-2 border-b border-white/[0.08] space-y-2">
<div className="p-2 panel-header space-y-2">
{/* Quick Search */}
<div className="relative">
<Search className="w-3.5 h-3.5 text-zinc-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
@@ -547,7 +547,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Dateien durchsuchen…"
className="w-full h-7 pl-7 pr-2 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="w-full h-7 pl-7 pr-2 input-field"
/>
</div>
@@ -556,7 +556,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => handleCreateDoc(null)}
className="flex-1 h-7 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-zinc-300 hover:text-white text-xs font-medium flex items-center justify-center gap-1.5 transition-colors"
className="flex-1 btn-action"
title="Neue Datei erstellen"
>
<FilePlus className="w-3.5 h-3.5 text-zinc-400" />
@@ -566,7 +566,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => handleStartCreateFolder(null)}
className="flex-1 h-7 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-zinc-300 hover:text-white text-xs font-medium flex items-center justify-center gap-1.5 transition-colors"
className="flex-1 btn-action"
title="Neuen Ordner erstellen"
>
<FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
@@ -577,7 +577,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Root Folder Creation Input */}
{isCreatingFolder && newFolderParent === null && (
<div className="p-2 border-b border-white/[0.08] bg-[#16171a] flex items-center gap-1.5">
<div className="p-2 panel-header bg-canvas flex items-center gap-1.5">
<Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
<input
type="text"
@@ -589,12 +589,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
if (e.key === 'Escape') setIsCreatingFolder(false);
}}
placeholder="Neuer Ordnername…"
className="flex-1 h-6 px-1.5 bg-[#222428] text-xs text-white border border-white/20 focus:outline-none focus:border-[#1d8cf8]"
className="flex-1 h-6 px-1.5 input-field"
/>
<button
type="button"
onClick={handleConfirmCreateFolder}
className="p-1 text-[#1d8cf8] hover:text-white"
className="p-1 text-accent hover:text-white"
title="Bestätigen"
>
<Check className="w-3.5 h-3.5" />
@@ -612,7 +612,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Empty State */}
{isEmpty ? (
<div className="p-6 my-3 mx-2 border border-dashed border-white/10 bg-[#16171a]/50 text-center">
<div className="p-6 my-3 mx-2 border border-dashed border-border bg-canvas/50 text-center">
<Folder className="w-7 h-7 text-zinc-600 mx-auto mb-2" />
<h5 className="text-xs font-semibold text-zinc-300 mb-1">Keine Dateien vorhanden</h5>
<p className="text-[11px] text-zinc-500 mb-3 max-w-xs mx-auto leading-relaxed">
@@ -622,7 +622,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => handleCreateDoc(null)}
className="h-7 px-2.5 border border-white/10 bg-[#222428] hover:bg-[#2c2f35] text-zinc-200 text-xs flex items-center gap-1.5 font-medium transition-colors"
className="btn-action"
>
<FilePlus className="w-3.5 h-3.5 text-zinc-400" />
<span>Neue Datei</span>
@@ -630,7 +630,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => handleStartCreateFolder(null)}
className="h-7 px-2.5 border border-white/10 bg-[#222428] hover:bg-[#2c2f35] text-zinc-200 text-xs flex items-center gap-1.5 font-medium transition-colors"
className="btn-action"
>
<FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
<span>Neuer Ordner</span>
@@ -654,11 +654,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Right Block Editor */}
<div className="lg:col-span-8">
{selectedDoc ? (
<div className="p-4 bg-[#222428] border border-white/[0.08]">
<div className="p-4 panel-surface">
{/* Document Top Action Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 border-b border-white/[0.06]">
<div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 panel-header">
<div className="flex flex-wrap items-center gap-2 text-xs text-zinc-400">
<span className="px-2 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1 font-medium">
<span className="badge-accent">
<Check className="w-3 h-3" />
{saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
</span>
@@ -669,7 +669,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<select
value={getDocFolder(selectedDoc)}
onChange={(e) => handleChangeDocFolder(e.target.value)}
className="bg-[#16171a] border border-white/[0.08] text-zinc-300 text-xs px-2 py-0.5 focus:outline-none focus:border-[#1d8cf8]"
className="input-field px-2 py-0.5"
>
<option value="">(Kein Ordner / Root)</option>
{allFolderPaths.map((fp) => (
@@ -689,11 +689,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
onClick={() =>
persistDocument({ ...selectedDoc, isPinned: !selectedDoc.isPinned })
}
className={`h-7 px-2.5 border text-xs flex items-center gap-1.5 transition-colors ${
selectedDoc.isPinned
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40'
: 'bg-[#16171a] hover:bg-[#282a2f] border-white/[0.08] text-zinc-300 hover:text-white'
}`}
className={selectedDoc.isPinned ? 'btn-action text-accent border-accent/40' : 'btn-action'}
>
<Pin className="w-3.5 h-3.5" />
<span>{selectedDoc.isPinned ? 'Angepinnt' : 'Anpinnen'}</span>
@@ -702,16 +698,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={handleExportMarkdown}
className="h-7 px-2.5 bg-[#16171a] hover:bg-[#282a2f] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action"
>
<Download className="w-3.5 h-3.5 text-[#1d8cf8]" />
<Download className="w-3.5 h-3.5 text-accent" />
<span>Markdown (.md)</span>
</button>
<button
type="button"
onClick={() => handleDeleteDoc(selectedDoc.id)}
className="w-7 h-7 bg-[#16171a] hover:bg-red-500/20 border border-white/[0.08] text-zinc-400 hover:text-red-400 flex items-center justify-center transition-colors"
className="btn-icon btn-icon-danger"
title="Dokument löschen"
>
<Trash2 className="w-3.5 h-3.5" />
@@ -724,14 +720,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => setShowIconPicker((prev) => !prev)}
className="w-10 h-10 bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xl flex items-center justify-center flex-shrink-0 transition-colors"
className="w-10 h-10 panel-surface hover:bg-panel-elevated text-xl flex items-center justify-center flex-shrink-0 transition-colors"
title="Icon ändern"
>
{selectedDoc.icon}
</button>
{showIconPicker && (
<div className="absolute top-12 left-0 z-20 p-2.5 bg-[#222428] border border-white/[0.12] flex flex-wrap gap-1 w-64 shadow-xl">
<div className="absolute top-12 left-0 z-20 p-2.5 panel-surface flex flex-wrap gap-1 w-64 shadow-xl">
{ICONS.map((ic) => (
<button
key={ic}
@@ -740,7 +736,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
persistDocument({ ...selectedDoc, icon: ic });
setShowIconPicker(false);
}}
className="w-8 h-8 hover:bg-[#2b2d33] text-base flex items-center justify-center transition-colors"
className="w-8 h-8 hover:bg-panel-elevated text-base flex items-center justify-center transition-colors"
>
{ic}
</button>
@@ -779,7 +775,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Abschnitts-Überschrift…"
className="w-full bg-transparent text-base font-semibold text-[#1d8cf8] focus:outline-none pt-2 pb-1"
className="w-full bg-transparent text-base font-semibold text-accent focus:outline-none pt-2 pb-1"
/>
)}
@@ -799,7 +795,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
type="checkbox"
checked={!!block.checked}
onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
className="w-3.5 h-3.5 accent-[#1d8cf8] cursor-pointer"
className="w-3.5 h-3.5 accent-accent cursor-pointer"
/>
<input
type="text"
@@ -815,7 +811,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{block.type === 'bullet' && (
<div className="flex items-center gap-2.5 py-0.5">
<span className="w-1.5 h-1.5 bg-[#1d8cf8] flex-shrink-0" />
<span className="w-1.5 h-1.5 bg-accent flex-shrink-0" />
<input
type="text"
value={block.content}
@@ -827,8 +823,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
{block.type === 'callout' && (
<div className="p-2.5 bg-[#16171a] border border-[#1d8cf8]/40 flex items-start gap-2">
<Sparkles className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0 mt-0.5" />
<div className="p-2.5 bg-canvas border border-accent/40 flex items-start gap-2">
<Sparkles className="w-3.5 h-3.5 text-accent flex-shrink-0 mt-0.5" />
<textarea
rows={2}
value={block.content}
@@ -840,7 +836,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
{block.type === 'code' && (
<div className="p-2.5 bg-[#16171a] border border-white/[0.08] font-mono text-xs text-zinc-200">
<div className="p-2.5 bg-canvas border border-border font-mono text-xs text-zinc-200">
<textarea
rows={Math.max(2, block.content.split('\n').length)}
value={block.content}
@@ -857,7 +853,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, -1)}
className="p-1 hover:bg-[#282a2f] text-zinc-400 hover:text-white transition-colors"
className="p-1 hover:bg-panel-elevated text-zinc-400 hover:text-white transition-colors"
title="Nach oben"
>
<ArrowUp className="w-3 h-3" />
@@ -865,7 +861,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, 1)}
className="p-1 hover:bg-[#282a2f] text-zinc-400 hover:text-white transition-colors"
className="p-1 hover:bg-panel-elevated text-zinc-400 hover:text-white transition-colors"
title="Nach unten"
>
<ArrowDown className="w-3 h-3" />
@@ -884,68 +880,68 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
</div>
{/* Add Block Toolbar */}
<div className="mt-4 pt-3 border-t border-white/[0.06] flex flex-wrap items-center gap-1.5">
<div className="mt-4 pt-3 border-t border-border flex flex-wrap items-center gap-1.5">
<span className="text-xs text-zinc-400 mr-1">+ Block:</span>
<button
type="button"
onClick={() => addBlock('paragraph')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<AlignLeft className="w-3 h-3 text-[#1d8cf8]" /> Text
<AlignLeft className="w-3 h-3 text-accent" /> Text
</button>
<button
type="button"
onClick={() => addBlock('h2')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<Heading2 className="w-3 h-3 text-[#1d8cf8]" /> Überschrift
<Heading2 className="w-3 h-3 text-accent" /> Überschrift
</button>
<button
type="button"
onClick={() => addBlock('todo')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<CheckSquare className="w-3 h-3 text-[#1d8cf8]" /> To-Do
<CheckSquare className="w-3 h-3 text-accent" /> To-Do
</button>
<button
type="button"
onClick={() => addBlock('bullet')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<List className="w-3 h-3 text-[#1d8cf8]" /> Liste
<List className="w-3 h-3 text-accent" /> Liste
</button>
<button
type="button"
onClick={() => addBlock('callout')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<Sparkles className="w-3 h-3 text-[#1d8cf8]" /> Callout
<Sparkles className="w-3 h-3 text-accent" /> Callout
</button>
<button
type="button"
onClick={() => addBlock('code')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<Code className="w-3 h-3 text-[#1d8cf8]" /> Code
<Code className="w-3 h-3 text-accent" /> Code
</button>
<button
type="button"
onClick={() => addBlock('h1')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<Heading1 className="w-3 h-3 text-[#1d8cf8]" /> H1
<Heading1 className="w-3 h-3 text-accent" /> H1
</button>
</div>
</div>
) : (
<div className="p-8 bg-[#222428] border border-white/[0.08] text-center text-zinc-400 text-xs">
<div className="p-8 panel-surface text-center text-zinc-400 text-xs">
Wähle links eine Datei im Datei-Explorer aus oder erstelle eine neue Datei.
</div>
)}
frontend/src/index.css
+192 -27
View File
@@ -2,29 +2,44 @@
@tailwind components;
@tailwind utilities;
/* ==========================================================================
MINDFSIFT DESIGN SYSTEM - ZENTRALE STEUERUNG
Hier können Farben, Blauton, Kontraste und Rundungen zentral angepasst werden!
========================================================================== */
:root {
/* Template Dark Palette */
--bg-canvas: #16171a;
--bg-surface: #222428;
--bg-surface-elevated: #282a2f;
--bg-surface-hover: #32353b;
/* --- 1. AKZENTFARBE (Blauton hier regeln) --- */
--accent-primary: #1d8cf8; /* Haupt-Akzentblau */
--accent-hover: #3b9cfc; /* Hellere Nuance beim Hover */
--accent-dim: rgba(29, 140, 248, 0.14); /* Dezenter Hintergrund für Badges */
--accent-border: rgba(29, 140, 248, 0.35);/* Rand für aktive Badges */
--border-subtle: rgba(255, 255, 255, 0.07);
--border-active-green: rgba(34, 197, 94, 0.65);
--border-focus: #1d8cf8;
/* --- 2. OBERFLÄCHEN & HINTERGRÜNDE --- */
--bg-app: #16171a; /* Gesamte Canvas-Hintergrundfarbe */
--bg-panel: #222428; /* Karten, Sidebar, Header, Modals */
--bg-panel-elevated: #282a2f; /* Ausgewählte Menüpunkte, Toolbars, Hover */
--bg-panel-hover: #32353b; /* Stärkerer Hover-Effekt */
--bg-input: #16171a; /* Eingabefelder und Quick-Inputs */
--color-primary: #1d8cf8;
--color-primary-hover: #3b9cfc;
--color-on-primary: #ffffff;
/* --- 3. RAHMEN & TRENNLINIEN --- */
--border-color: rgba(255, 255, 255, 0.08); /* Subtile Linien & Kanten */
--border-subtle: rgba(255, 255, 255, 0.05);
/* --- 4. TEXTFARBEN --- */
--text-main: #ffffff; /* Haupttext */
--text-muted: #a1a1aa; /* Sekundärtext (Grau) */
--text-faint: #71717a; /* Platzhalter & Hilfetexte */
/* --- 5. STATUS- UND SIGNALFARBEN --- */
--color-success: #22c55e;
--color-danger: #ef4444;
--color-warning: #f97316;
--color-purple: #a855f7;
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--text-tertiary: #71717a;
/* --- 6. RUNDUNGEN (Zentral konfigurierbar) --- */
--radius-card: 0px; /* Karten & Panels (0px = eckig) */
--radius-btn: 0px; /* Standard-Buttons & Tabs */
--radius-input: 0px; /* Textfelder für Optionen & Eigenschaften */
--radius-pill: 9999px; /* Runde Elemente (z.B. Quick-Capture) */
}
* {
@@ -33,16 +48,16 @@
}
body {
background-color: var(--bg-canvas);
color: var(--text-primary);
background-color: var(--bg-app);
color: var(--text-main);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow-x: hidden;
}
/* Subtle clean scrollbar */
/* Subtiler monochromer Scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
@@ -51,18 +66,168 @@ body {
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 9999px;
border-radius: var(--radius-btn);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.22);
}
.border-subtle {
border: 1px solid var(--border-subtle);
}
/* ==========================================================================
WIEDERVERWENDBARE SEMANTISCHE KLASSEN
========================================================================== */
.card-surface {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
@layer components {
/* Haupt-Karten, Sidebars und Container */
.panel-surface {
background-color: var(--bg-panel);
border: 1px solid var(--border-color);
border-radius: var(--radius-card);
}
.panel-header {
border-bottom: 1px solid var(--border-color);
}
/* Monochromer, eckiger Standard-Aktionsbutton */
.btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
height: 1.75rem;
padding-left: 0.625rem;
padding-right: 0.625rem;
background-color: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-btn);
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 500;
transition: all 120ms ease;
cursor: pointer;
}
.btn-action:hover {
background-color: var(--bg-panel-elevated);
color: var(--text-main);
}
/* Primärer Akzent-Button */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
height: 1.75rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
background-color: var(--accent-primary);
border-radius: var(--radius-btn);
color: #ffffff;
font-size: 0.75rem;
font-weight: 500;
transition: all 120ms ease;
cursor: pointer;
}
.btn-primary:hover {
background-color: var(--accent-hover);
}
/* Kleiner eckiger Icon-Button */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
background-color: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-btn);
color: var(--text-muted);
transition: all 120ms ease;
cursor: pointer;
}
.btn-icon:hover {
background-color: var(--bg-panel-elevated);
color: var(--text-main);
}
.btn-icon-danger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
background-color: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-btn);
color: var(--text-muted);
transition: all 120ms ease;
cursor: pointer;
}
.btn-icon-danger:hover {
background-color: rgba(239, 68, 68, 0.15);
color: var(--color-danger);
border-color: rgba(239, 68, 68, 0.3);
}
/* Zentrales Texteingabefeld */
.input-field {
background-color: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-input);
color: var(--text-main);
font-size: 0.75rem;
transition: border-color 120ms ease;
}
.input-field:focus {
outline: none;
border-color: var(--accent-primary);
}
.input-field::placeholder {
color: var(--text-faint);
}
/* Header Tabs */
.tab-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-muted);
border-bottom: 2px solid transparent;
transition: all 120ms ease;
cursor: pointer;
}
.tab-btn:hover {
color: var(--text-main);
background-color: var(--bg-panel-elevated);
}
.tab-btn-active {
color: var(--accent-primary);
border-bottom-color: var(--accent-primary);
background-color: var(--bg-panel-elevated);
}
/* Status Badge */
.badge-accent {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
background-color: var(--accent-dim);
border: 1px solid var(--accent-border);
color: var(--accent-primary);
font-size: 0.75rem;
font-weight: 500;
}
/* File Tree Item */
.tree-node-active {
background-color: var(--bg-panel-elevated);
border-left: 2px solid var(--accent-primary);
color: var(--text-main);
}
}
frontend/tailwind.config.js
+28 -20
View File
@@ -5,35 +5,43 @@ export default {
theme: {
extend: {
colors: {
canvas: '#16171a',
surface: {
DEFAULT: '#222428',
elevated: '#282a2f',
hover: '#32353b',
border: 'rgba(255, 255, 255, 0.07)',
canvas: 'var(--bg-app)',
panel: {
DEFAULT: 'var(--bg-panel)',
elevated: 'var(--bg-panel-elevated)',
hover: 'var(--bg-panel-hover)',
},
brand: {
DEFAULT: '#1d8cf8',
hover: '#3b9cfc',
dark: '#0066cc',
surface: {
DEFAULT: 'var(--bg-panel)',
elevated: 'var(--bg-panel-elevated)',
hover: 'var(--bg-panel-hover)',
border: 'var(--border-color)',
},
accent: {
green: '#22c55e',
orange: '#f97316',
purple: '#a855f7',
red: '#ef4444',
yellow: '#eab308',
DEFAULT: 'var(--accent-primary)',
hover: 'var(--accent-hover)',
dim: 'var(--accent-dim)',
border: 'var(--accent-border)',
},
brand: {
DEFAULT: 'var(--accent-primary)',
hover: 'var(--accent-hover)',
dark: 'var(--accent-primary)',
},
},
borderColor: {
DEFAULT: 'var(--border-color)',
subtle: 'var(--border-subtle)',
},
borderRadius: {
card: 'var(--radius-card)',
btn: 'var(--radius-btn)',
input: 'var(--radius-input)',
},
fontFamily: {
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
},
boxShadow: {
soft: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2)',
card: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)',
glowBlue: '0 0 20px -3px rgba(29, 140, 248, 0.35)',
},
},
},
plugins: [],