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

feat(design): centralize design system with CSS variables and semantic classes in index.css
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 52s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 20:07:27 +02:00
1 parent 94123c9424
commit ec9ba8fd9f
9 files changed
+427 -303
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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