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

feat(theme): implement single-file CSS theming engine with dark, light, high-contrast, and soft themes
MindSift CI & Docker Release / Build, Test in Container & Push (push) Failing after 16s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 23:26:31 +02:00
1 parent 0f24cbdbf4
commit b3e651b3b9
18 files changed
+1455 -804
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/workspace/WorkspaceView.tsx
+80 -83
View File
@@ -6,15 +6,12 @@ import {
FolderOpen,
ChevronRight,
ChevronDown,
FileText,
Search,
Pin,
Trash2,
Download,
CheckSquare,
Heading1,
Heading2,
Heading3,
List,
Code,
Sparkles,
@@ -389,10 +386,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
e.stopPropagation();
if (target) setSelectedDoc(target);
}}
className={`inline-flex items-center gap-1 px-1.5 py-0.2 mx-0.5 border text-xs font-medium cursor-pointer transition-colors ${
className={`inline-flex items-center gap-1 px-1.5 py-0.2 mx-0.5 border text-xs font-medium cursor-pointer rounded-btn transition-colors ${
target
? 'bg-accent/20 border-accent/40 text-accent hover:bg-accent/30'
: 'bg-zinc-800 border-zinc-700 text-zinc-400 hover:text-white'
: 'badge-neutral hover:text-main'
}`}
title={target ? `Öffne: ${target.title}` : `Dokument "${linkTitle}" existiert noch nicht`}
>
@@ -467,8 +464,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
style={{ paddingLeft: `${depth * 14 + 16}px` }}
className={`group flex items-center justify-between py-1.5 pr-2 border-l-2 transition-colors cursor-pointer text-xs ${
isSelected
? 'bg-panel-elevated border-accent text-white font-medium'
: 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
? 'bg-panel-elevated border-accent text-main font-medium'
: 'border-transparent text-muted hover:text-main hover:bg-canvas/50'
}`}
>
<div className="flex items-center gap-2 min-w-0 flex-1">
@@ -490,10 +487,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<div
onClick={() => toggleFolder(node.path)}
style={{ paddingLeft: `${node.depth * 14 + 8}px` }}
className="group flex items-center justify-between py-1.5 pr-2 hover:bg-panel-elevated 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-muted"
>
<div className="flex items-center gap-1.5 min-w-0">
<span className="text-zinc-500 hover:text-zinc-300">
<span className="text-faint hover:text-muted">
{isExpanded ? (
<ChevronDown className="w-3 h-3 flex-shrink-0" />
) : (
@@ -503,10 +500,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{isExpanded ? (
<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-muted flex-shrink-0" />
)}
<span className="font-medium text-xs text-zinc-200 truncate">{node.name}</span>
<span className="text-[10px] text-zinc-500 font-mono">({totalItems})</span>
<span className="font-medium text-xs text-main truncate">{node.name}</span>
<span className="text-[10px] text-faint font-mono">({totalItems})</span>
</div>
<div className="opacity-0 group-hover:opacity-100 flex items-center gap-1 transition-opacity">
@@ -516,7 +513,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
e.stopPropagation();
handleCreateDoc(node.path);
}}
className="p-1 hover:bg-panel-hover text-zinc-400 hover:text-white"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
title="Neue Datei in diesem Ordner"
>
<FilePlus className="w-3 h-3" />
@@ -527,7 +524,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
e.stopPropagation();
handleStartCreateFolder(node.path);
}}
className="p-1 hover:bg-panel-hover text-zinc-400 hover:text-white"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
title="Neuer Unterordner"
>
<FolderPlus className="w-3 h-3" />
@@ -540,7 +537,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
style={{ paddingLeft: `${(node.depth + 1) * 14 + 8}px` }}
className="py-1 pr-2 flex items-center gap-1 bg-canvas"
>
<Folder className="w-3 h-3 text-zinc-400 flex-shrink-0" />
<Folder className="w-3 h-3 text-muted flex-shrink-0" />
<input
type="text"
autoFocus
@@ -556,7 +553,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={handleConfirmCreateFolder}
className="p-1 text-accent hover:text-white"
className="p-1 text-accent hover:text-main rounded-btn"
title="Bestätigen"
>
<Check className="w-3.5 h-3.5" />
@@ -564,7 +561,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => setIsCreatingFolder(false)}
className="p-1 text-zinc-400 hover:text-white"
className="p-1 text-muted hover:text-main rounded-btn"
title="Abbrechen"
>
<X className="w-3.5 h-3.5" />
@@ -579,7 +576,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{node.subfolders.length === 0 && node.docs.length === 0 && !isCreatingSubfolder && (
<div
style={{ paddingLeft: `${(node.depth + 1) * 14 + 14}px` }}
className="py-1 text-[11px] text-zinc-600 italic"
className="py-1 text-[11px] text-faint italic"
>
(leer)
</div>
@@ -598,13 +595,13 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<div className="lg:col-span-4 panel-surface flex flex-col self-start">
<div className="p-2 panel-header space-y-2">
<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-muted absolute left-2.5 top-1/2 -translate-y-1/2" />
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Dateien durchsuchen…"
className="w-full h-7 pl-7 pr-2 input-field"
className="w-full h-7 pl-7 pr-2 input-field text-xs"
/>
</div>
@@ -615,7 +612,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
className="flex-1 btn-action"
title="Neue Datei erstellen"
>
<FilePlus className="w-3.5 h-3.5 text-zinc-400" />
<FilePlus className="w-3.5 h-3.5 text-muted" />
<span>Neue Datei</span>
</button>
@@ -625,7 +622,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
className="flex-1 btn-action"
title="Neuen Ordner erstellen"
>
<FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
<FolderPlus className="w-3.5 h-3.5 text-muted" />
<span>Neuer Ordner</span>
</button>
</div>
@@ -633,7 +630,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{isCreatingFolder && newFolderParent === null && (
<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-muted flex-shrink-0" />
<input
type="text"
autoFocus
@@ -644,12 +641,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
if (e.key === 'Escape') setIsCreatingFolder(false);
}}
placeholder="Neuer Ordnername…"
className="flex-1 h-6 px-1.5 input-field"
className="flex-1 h-6 px-1.5 input-field text-xs"
/>
<button
type="button"
onClick={handleConfirmCreateFolder}
className="p-1 text-accent hover:text-white"
className="p-1 text-accent hover:text-main rounded-btn"
title="Bestätigen"
>
<Check className="w-3.5 h-3.5" />
@@ -657,7 +654,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => setIsCreatingFolder(false)}
className="p-1 text-zinc-400 hover:text-white"
className="p-1 text-muted hover:text-main rounded-btn"
title="Abbrechen"
>
<X className="w-3.5 h-3.5" />
@@ -666,10 +663,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
{isEmpty ? (
<div className="p-6 my-3 mx-2 border border-dashed border-border bg-canvas/50 text-center">
<Folder className="w-7 h-7 text-zinc-600 mx-auto mb-2" />
<h5 className="text-xs font-semibold text-zinc-300 mb-1">Keine Dateien vorhanden</h5>
<p className="text-[11px] text-zinc-500 mb-3 max-w-xs mx-auto leading-relaxed">
<div className="p-6 my-3 mx-2 border border-dashed border-border bg-canvas/50 text-center rounded-card">
<Folder className="w-7 h-7 text-faint mx-auto mb-2" />
<h5 className="text-xs font-semibold text-muted mb-1">Keine Dateien vorhanden</h5>
<p className="text-[11px] text-faint mb-3 max-w-xs mx-auto leading-relaxed">
Erstelle eine neue Datei oder lege Ordner an, um deine Dokumente übersichtlich zu strukturieren.
</p>
<div className="flex items-center justify-center gap-2">
@@ -678,7 +675,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
onClick={() => handleCreateDoc(null)}
className="btn-action"
>
<FilePlus className="w-3.5 h-3.5 text-zinc-400" />
<FilePlus className="w-3.5 h-3.5 text-muted" />
<span>Neue Datei</span>
</button>
<button
@@ -686,7 +683,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
onClick={() => handleStartCreateFolder(null)}
className="btn-action"
>
<FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
<FolderPlus className="w-3.5 h-3.5 text-muted" />
<span>Neuer Ordner</span>
</button>
</div>
@@ -696,7 +693,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{rootTree.map(renderFolder)}
{rootDocs.map((doc) => renderDocItem(doc, 0))}
{filteredDocs.length === 0 && searchQuery && (
<div className="p-4 text-center text-xs text-zinc-500">
<div className="p-4 text-center text-xs text-faint">
Keine Dateien gefunden für &quot;{searchQuery}&quot;
</div>
)}
@@ -710,14 +707,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<div className="p-4 panel-surface space-y-3">
{/* Document Header & Metadata */}
<div className="flex flex-wrap items-center justify-between gap-3 pb-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-muted">
<span className="badge-accent">
<Check className="w-3 h-3" />
{saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
</span>
<div className="flex items-center gap-1.5">
<Folder className="w-3.5 h-3.5 text-zinc-500" />
<Folder className="w-3.5 h-3.5 text-faint" />
<select
value={getDocFolder(selectedDoc)}
onChange={(e) => handleChangeDocFolder(e.target.value)}
@@ -773,14 +770,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => setShowIconPicker((prev) => !prev)}
className="w-10 h-10 panel-surface hover:bg-panel-elevated 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 rounded-card"
title="Icon ändern"
>
{selectedDoc.icon}
</button>
{showIconPicker && (
<div className="absolute top-12 left-0 z-20 p-2.5 panel-surface flex flex-wrap gap-1 w-64 shadow-xl border border-border">
<div className="absolute top-12 left-0 z-20 p-2.5 panel-surface flex flex-wrap gap-1 w-64 shadow-panel border border-border rounded-card">
{ICONS.map((ic) => (
<button
key={ic}
@@ -789,7 +786,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
persistDocument({ ...selectedDoc, icon: ic });
setShowIconPicker(false);
}}
className="w-8 h-8 hover:bg-panel-elevated 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 rounded-btn transition-colors"
>
{ic}
</button>
@@ -802,17 +799,17 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={selectedDoc.title}
onChange={(e) => persistDocument({ ...selectedDoc, title: e.target.value })}
placeholder="Dokument-Titel…"
className="w-full bg-transparent text-xl sm:text-2xl font-bold text-white focus:outline-none"
className="w-full bg-transparent text-xl sm:text-2xl font-bold text-main focus:outline-none placeholder:text-faint"
/>
</div>
{/* NOTION / WORD RICH FORMATTING TOOLBAR */}
<div className="p-1.5 bg-canvas border border-border flex flex-wrap items-center gap-1 text-xs">
<div className="p-1.5 bg-canvas border border-border rounded-card flex flex-wrap items-center gap-1 text-xs">
{/* Text styling buttons */}
<button
type="button"
onClick={() => applyInlineFormat('**')}
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
title="Fett (**text**)"
>
<Bold className="w-3.5 h-3.5" />
@@ -820,7 +817,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => applyInlineFormat('*')}
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
title="Kursiv (*text*)"
>
<Italic className="w-3.5 h-3.5" />
@@ -828,7 +825,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => applyInlineFormat('~~')}
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
title="Durchgestrichen (~~text~~)"
>
<Strikethrough className="w-3.5 h-3.5" />
@@ -836,7 +833,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => applyInlineFormat('`')}
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
title="Inline Code (`code`)"
>
<Code className="w-3.5 h-3.5" />
@@ -844,7 +841,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => applyInlineFormat('[Link](', ')')}
className="p-1 hover:bg-panel text-zinc-300 hover:text-white"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
title="Link einfügen"
>
<Link className="w-3.5 h-3.5" />
@@ -857,14 +854,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => setShowWikiLinkMenu((prev) => !prev)}
className="px-2 py-0.5 bg-panel border border-border text-[11px] text-accent flex items-center gap-1 hover:bg-panel-hover"
className="px-2 py-0.5 bg-panel border border-border text-[11px] text-accent flex items-center gap-1 hover:bg-panel-elevated rounded-btn"
title="Auf anderes Dokument verlinken ([[Dokumentname]])"
>
<span>[[ Wiki-Link ]]</span>
</button>
{showWikiLinkMenu && (
<div className="absolute top-7 left-0 z-30 w-56 bg-panel border border-border p-1.5 shadow-2xl space-y-1">
<p className="text-[10px] text-zinc-400 px-1.5 pb-1 border-b border-border">
<div className="absolute top-7 left-0 z-30 w-56 bg-panel border border-border p-1.5 shadow-panel rounded-card space-y-1">
<p className="text-[10px] text-muted px-1.5 pb-1 border-b border-border">
Dokument zum Verlinken wählen:
</p>
<div className="max-h-48 overflow-y-auto">
@@ -875,14 +872,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
key={d.id}
type="button"
onClick={() => insertWikiLink(d.title)}
className="w-full text-left px-2 py-1 text-xs text-zinc-300 hover:text-white hover:bg-panel-hover truncate flex items-center gap-1.5"
className="w-full text-left px-2 py-1 text-xs text-muted hover:text-main hover:bg-panel-elevated rounded-btn truncate flex items-center gap-1.5"
>
<span>{d.icon}</span>
<span className="truncate">{d.title}</span>
</button>
))}
{docs.length <= 1 && (
<div className="p-2 text-center text-[11px] text-zinc-500">
<div className="p-2 text-center text-[11px] text-faint">
Keine weiteren Dokumente vorhanden
</div>
)}
@@ -903,7 +900,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
'| Spalte 1 | Spalte 2 | Spalte 3 |\n|---|---|---|\n| Inhalt A | Inhalt B | Inhalt C |\n| Wert 1 | Wert 2 | Wert 3 |'
)
}
className="px-2 py-0.5 bg-panel border border-border text-[11px] text-zinc-300 hover:text-white flex items-center gap-1"
className="px-2 py-0.5 bg-panel border border-border text-[11px] text-muted hover:text-main rounded-btn flex items-center gap-1"
title="Tabelle einfügen"
>
<TableIcon className="w-3 h-3 text-accent" />
@@ -913,7 +910,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => addBlock('progress', undefined, '50')}
className="px-2 py-0.5 bg-panel border border-border text-[11px] text-zinc-300 hover:text-white flex items-center gap-1"
className="px-2 py-0.5 bg-panel border border-border text-[11px] text-muted hover:text-main rounded-btn flex items-center gap-1"
title="Fortschrittsbalken einfügen"
>
<Percent className="w-3 h-3 text-accent" />
@@ -923,7 +920,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => addBlock('divider')}
className="p-1 hover:bg-panel text-zinc-400 hover:text-white"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn"
title="Trennlinie"
>
<Minus className="w-3.5 h-3.5" />
@@ -946,7 +943,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Überschrift 1…"
className="w-full bg-transparent text-xl font-bold text-white focus:outline-none py-1"
className="w-full bg-transparent text-xl font-bold text-main focus:outline-none py-1 placeholder:text-faint"
/>
)}
@@ -957,7 +954,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Abschnitts-Überschrift…"
className="w-full bg-transparent text-base font-semibold text-accent 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 placeholder:text-faint"
/>
)}
@@ -968,7 +965,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Unterabschnitt…"
className="w-full bg-transparent text-sm font-semibold text-zinc-200 focus:outline-none pt-1"
className="w-full bg-transparent text-sm font-semibold text-main focus:outline-none pt-1 placeholder:text-faint"
/>
)}
@@ -980,10 +977,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Text schreiben… (nutze [[Dokument]] für Wiki-Links)"
className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 leading-relaxed focus:outline-none resize-none font-normal"
className="w-full bg-transparent text-xs sm:text-sm text-main leading-relaxed focus:outline-none resize-none font-normal placeholder:text-faint"
/>
{block.content.includes('[[') && (
<div className="text-xs text-zinc-400 pt-0.5">
<div className="text-xs text-muted pt-0.5">
{renderTextWithWikiLinks(block.content)}
</div>
)}
@@ -997,7 +994,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
type="checkbox"
checked={!!block.checked}
onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
className="w-3.5 h-3.5 accent-accent cursor-pointer"
className="w-4 h-4 checkbox-square cursor-pointer"
/>
<div className="flex-1">
<input
@@ -1005,12 +1002,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="To-Do Punkt…"
className={`w-full bg-transparent text-xs sm:text-sm focus:outline-none ${
block.checked ? 'line-through text-zinc-500' : 'text-white'
className={`w-full bg-transparent text-xs sm:text-sm focus:outline-none placeholder:text-faint ${
block.checked ? 'line-through text-faint' : 'text-main'
}`}
/>
{block.content.includes('[[') && (
<div className="text-xs text-zinc-400">
<div className="text-xs text-muted">
{renderTextWithWikiLinks(block.content)}
</div>
)}
@@ -1021,17 +1018,17 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* BULLET */}
{block.type === 'bullet' && (
<div className="flex items-center gap-2.5 py-0.5">
<span className="w-1.5 h-1.5 bg-accent flex-shrink-0" />
<span className="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0" />
<div className="flex-1">
<input
type="text"
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Listenpunkt…"
className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 focus:outline-none"
className="w-full bg-transparent text-xs sm:text-sm text-main focus:outline-none placeholder:text-faint"
/>
{block.content.includes('[[') && (
<div className="text-xs text-zinc-400">
<div className="text-xs text-muted">
{renderTextWithWikiLinks(block.content)}
</div>
)}
@@ -1041,7 +1038,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* CALLOUT */}
{block.type === 'callout' && (
<div className="p-2.5 bg-canvas border border-accent/40 flex items-start gap-2">
<div className="p-2.5 bg-canvas border border-accent/40 rounded-card flex items-start gap-2">
<Sparkles className="w-3.5 h-3.5 text-accent flex-shrink-0 mt-0.5" />
<div className="flex-1 space-y-1">
<textarea
@@ -1049,10 +1046,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Wichtiger Hinweis oder Zusammenfassung…"
className="w-full bg-transparent text-xs sm:text-sm text-zinc-200 focus:outline-none resize-none"
className="w-full bg-transparent text-xs sm:text-sm text-main focus:outline-none resize-none placeholder:text-faint"
/>
{block.content.includes('[[') && (
<div className="text-xs text-zinc-400">
<div className="text-xs text-muted">
{renderTextWithWikiLinks(block.content)}
</div>
)}
@@ -1062,22 +1059,22 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* CODE */}
{block.type === 'code' && (
<div className="p-2.5 bg-canvas border border-border font-mono text-xs text-zinc-200">
<div className="p-2.5 code-block">
<textarea
rows={Math.max(2, (block.content || '').split('\n').length)}
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="// Code oder Shell-Kommando…"
className="w-full bg-transparent focus:outline-none resize-none font-mono"
className="w-full bg-transparent focus:outline-none resize-none font-mono text-xs text-main placeholder:text-faint"
/>
</div>
)}
{/* TABLE */}
{block.type === 'table' && (
<div className="p-2.5 bg-canvas border border-border space-y-2">
<div className="flex items-center justify-between text-[11px] text-zinc-400 border-b border-border pb-1">
<span className="flex items-center gap-1 font-semibold text-zinc-300">
<div className="p-2.5 bg-canvas border border-border rounded-card space-y-2">
<div className="flex items-center justify-between text-[11px] text-muted border-b border-border pb-1">
<span className="flex items-center gap-1 font-semibold text-main">
<TableIcon className="w-3 h-3 text-accent" /> Markdown Tabelle
</span>
</div>
@@ -1086,25 +1083,25 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="| Spalte 1 | Spalte 2 |\n|---|---|\n| Inhalt | Wert |"
className="w-full bg-transparent font-mono text-xs text-zinc-200 focus:outline-none resize-none"
className="w-full bg-transparent font-mono text-xs text-main focus:outline-none resize-none placeholder:text-faint"
/>
</div>
)}
{/* PROGRESS BAR */}
{block.type === 'progress' && (
<div className="p-2.5 bg-canvas border border-border space-y-2">
<div className="p-2.5 bg-canvas border border-border rounded-card space-y-2">
<div className="flex items-center justify-between text-xs">
<span className="text-zinc-300 font-medium flex items-center gap-1">
<span className="text-main font-medium flex items-center gap-1">
<Percent className="w-3 h-3 text-accent" /> Fortschritt
</span>
<span className="font-mono text-accent font-semibold">
{parseInt(block.content) || 0}%
</span>
</div>
<div className="w-full bg-panel h-2.5 overflow-hidden border border-border">
<div className="w-full bg-panel h-2.5 overflow-hidden border border-border rounded-pill">
<div
className="bg-accent h-full transition-all"
className="bg-accent h-full transition-all rounded-pill"
style={{ width: `${Math.min(100, Math.max(0, parseInt(block.content) || 0))}%` }}
/>
</div>
@@ -1132,7 +1129,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, -1)}
className="p-1 hover:bg-panel-elevated text-zinc-400 hover:text-white transition-colors"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn transition-colors"
title="Nach oben"
>
<ArrowUp className="w-3 h-3" />
@@ -1140,7 +1137,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, 1)}
className="p-1 hover:bg-panel-elevated text-zinc-400 hover:text-white transition-colors"
className="p-1 hover:bg-panel-elevated text-muted hover:text-main rounded-btn transition-colors"
title="Nach unten"
>
<ArrowDown className="w-3 h-3" />
@@ -1148,7 +1145,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => removeBlock(block.id)}
className="p-1 hover:bg-red-500/20 text-zinc-400 hover:text-red-400 transition-colors"
className="p-1 hover:bg-status-err/20 text-muted hover:text-status-err rounded-btn transition-colors"
title="Block entfernen"
>
<Trash2 className="w-3 h-3" />
@@ -1160,7 +1157,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Bottom Add Block Toolbar */}
<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">+ Neuer Block:</span>
<span className="text-xs text-muted mr-1">+ Neuer Block:</span>
<button
type="button"
@@ -1242,7 +1239,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
</div>
</div>
) : (
<div className="p-8 panel-surface text-center text-zinc-400 text-xs">
<div className="p-8 panel-surface text-center text-muted text-xs">
Wähle links eine Datei im Datei-Explorer aus oder erstelle eine neue Datei.
</div>
)}