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
+428 -304
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/workspace/WorkspaceView.tsx
+62 -66
View File
@@ -51,7 +51,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
const [saveState, setSaveState] = useState<'saved' | 'saving'>('saved');
const [showIconPicker, setShowIconPicker] = useState(false);
// Folder management
// Folder state
const [customFolders, setCustomFolders] = useState<string[]>(() => {
try {
const stored = localStorage.getItem('mindsift_workspace_folders');
@@ -109,7 +109,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
return tag ? tag.replace('folder:', '') : '';
};
// Compute all available folders (persisted custom folders + tags on documents)
// Compute all unique folder paths
const allFolderPaths = useMemo(() => {
const set = new Set<string>(customFolders);
docs.forEach((doc) => {
@@ -126,7 +126,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
return Array.from(set).sort((a, b) => a.localeCompare(b));
}, [customFolders, docs]);
// Ensure newly discovered folders start expanded so users see their files
// Keep folders expanded by default
useEffect(() => {
setExpandedFolders((prev) => {
const next = new Set(prev);
@@ -215,7 +215,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
try {
localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
} catch {
// local storage fallback
// fallback
}
}
setExpandedFolders((prev) => {
@@ -239,10 +239,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
try {
localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
} catch {
// local storage fallback
// fallback
}
// Keep docs safe: remove folder prefix so they revert to root
// Keep docs safe: drop folder prefix so they fall back to root
docs.forEach((d) => {
const f = getDocFolder(d);
if (f === folderPath || f.startsWith(folderPath + '/')) {
@@ -392,8 +392,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
style={{ paddingLeft: `${depth * 14 + 10}px` }}
className={`w-full text-left py-1.5 pr-2 transition-colors flex items-center justify-between gap-2 border-l-2 ${
active
? 'bg-[#282a2f] border-l-[#1d8cf8] text-white'
: 'border-l-transparent text-zinc-300 hover:bg-[#282a2f] hover:text-white'
? 'tree-node-active'
: 'border-l-transparent text-zinc-300 hover:bg-panel-elevated hover:text-white'
}`}
>
<div className="flex items-center gap-1.5 min-w-0">
@@ -402,7 +402,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
</span>
<span className="text-xs truncate font-normal">{doc.title || 'Ohne Titel'}</span>
</div>
{doc.isPinned && <Pin className="w-3 h-3 text-[#1d8cf8] flex-shrink-0" />}
{doc.isPinned && <Pin className="w-3 h-3 text-accent flex-shrink-0" />}
</button>
);
};
@@ -420,7 +420,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<div
onClick={() => toggleFolder(node.path)}
style={{ paddingLeft: `${node.depth * 14 + 8}px` }}
className="group flex items-center justify-between py-1.5 pr-2 hover:bg-[#282a2f] cursor-pointer transition-colors text-xs text-zinc-300"
className="group flex items-center justify-between py-1.5 pr-2 hover:bg-panel-elevated cursor-pointer transition-colors text-xs text-zinc-300"
>
<div className="flex items-center gap-1.5 min-w-0">
<span className="text-zinc-500 hover:text-zinc-300">
@@ -431,7 +431,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
</span>
{isExpanded ? (
<FolderOpen className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0" />
<FolderOpen className="w-3.5 h-3.5 text-accent flex-shrink-0" />
) : (
<Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
)}
@@ -447,7 +447,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
e.stopPropagation();
handleCreateDoc(node.path);
}}
className="p-1 hover:bg-[#32353b] text-zinc-400 hover:text-white"
className="p-1 hover:bg-panel-hover text-zinc-400 hover:text-white"
title="Neue Datei in diesem Ordner"
>
<FilePlus className="w-3 h-3" />
@@ -458,7 +458,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
e.stopPropagation();
handleStartCreateFolder(node.path);
}}
className="p-1 hover:bg-[#32353b] text-zinc-400 hover:text-white"
className="p-1 hover:bg-panel-hover text-zinc-400 hover:text-white"
title="Neuer Unterordner"
>
<FolderPlus className="w-3 h-3" />
@@ -478,7 +478,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{isCreatingSubfolder && (
<div
style={{ paddingLeft: `${(node.depth + 1) * 14 + 8}px` }}
className="py-1 pr-2 flex items-center gap-1.5 bg-[#16171a]"
className="py-1 pr-2 flex items-center gap-1.5 bg-canvas"
>
<Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
<input
@@ -491,12 +491,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
if (e.key === 'Escape') setIsCreatingFolder(false);
}}
placeholder="Unterordnername…"
className="flex-1 h-6 px-1.5 bg-[#222428] text-xs text-white border border-white/20 focus:outline-none focus:border-[#1d8cf8]"
className="flex-1 h-6 px-1.5 input-field"
/>
<button
type="button"
onClick={handleConfirmCreateFolder}
className="p-1 text-[#1d8cf8] hover:text-white"
className="p-1 text-accent hover:text-white"
title="Bestätigen"
>
<Check className="w-3.5 h-3.5" />
@@ -536,9 +536,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
return (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
{/* Left Document & Folder Explorer Tree */}
<div className="lg:col-span-4 bg-[#222428] border border-white/[0.08] flex flex-col self-start">
<div className="lg:col-span-4 panel-surface flex flex-col self-start">
{/* Top Explorer Action Bar */}
<div className="p-2 border-b border-white/[0.08] space-y-2">
<div className="p-2 panel-header space-y-2">
{/* Quick Search */}
<div className="relative">
<Search className="w-3.5 h-3.5 text-zinc-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
@@ -547,7 +547,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Dateien durchsuchen…"
className="w-full h-7 pl-7 pr-2 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="w-full h-7 pl-7 pr-2 input-field"
/>
</div>
@@ -556,7 +556,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => handleCreateDoc(null)}
className="flex-1 h-7 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-zinc-300 hover:text-white text-xs font-medium flex items-center justify-center gap-1.5 transition-colors"
className="flex-1 btn-action"
title="Neue Datei erstellen"
>
<FilePlus className="w-3.5 h-3.5 text-zinc-400" />
@@ -566,7 +566,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => handleStartCreateFolder(null)}
className="flex-1 h-7 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-zinc-300 hover:text-white text-xs font-medium flex items-center justify-center gap-1.5 transition-colors"
className="flex-1 btn-action"
title="Neuen Ordner erstellen"
>
<FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
@@ -577,7 +577,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Root Folder Creation Input */}
{isCreatingFolder && newFolderParent === null && (
<div className="p-2 border-b border-white/[0.08] bg-[#16171a] flex items-center gap-1.5">
<div className="p-2 panel-header bg-canvas flex items-center gap-1.5">
<Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
<input
type="text"
@@ -589,12 +589,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
if (e.key === 'Escape') setIsCreatingFolder(false);
}}
placeholder="Neuer Ordnername…"
className="flex-1 h-6 px-1.5 bg-[#222428] text-xs text-white border border-white/20 focus:outline-none focus:border-[#1d8cf8]"
className="flex-1 h-6 px-1.5 input-field"
/>
<button
type="button"
onClick={handleConfirmCreateFolder}
className="p-1 text-[#1d8cf8] hover:text-white"
className="p-1 text-accent hover:text-white"
title="Bestätigen"
>
<Check className="w-3.5 h-3.5" />
@@ -612,7 +612,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Empty State */}
{isEmpty ? (
<div className="p-6 my-3 mx-2 border border-dashed border-white/10 bg-[#16171a]/50 text-center">
<div className="p-6 my-3 mx-2 border border-dashed border-border bg-canvas/50 text-center">
<Folder className="w-7 h-7 text-zinc-600 mx-auto mb-2" />
<h5 className="text-xs font-semibold text-zinc-300 mb-1">Keine Dateien vorhanden</h5>
<p className="text-[11px] text-zinc-500 mb-3 max-w-xs mx-auto leading-relaxed">
@@ -622,7 +622,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => handleCreateDoc(null)}
className="h-7 px-2.5 border border-white/10 bg-[#222428] hover:bg-[#2c2f35] text-zinc-200 text-xs flex items-center gap-1.5 font-medium transition-colors"
className="btn-action"
>
<FilePlus className="w-3.5 h-3.5 text-zinc-400" />
<span>Neue Datei</span>
@@ -630,7 +630,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => handleStartCreateFolder(null)}
className="h-7 px-2.5 border border-white/10 bg-[#222428] hover:bg-[#2c2f35] text-zinc-200 text-xs flex items-center gap-1.5 font-medium transition-colors"
className="btn-action"
>
<FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
<span>Neuer Ordner</span>
@@ -654,11 +654,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Right Block Editor */}
<div className="lg:col-span-8">
{selectedDoc ? (
<div className="p-4 bg-[#222428] border border-white/[0.08]">
<div className="p-4 panel-surface">
{/* Document Top Action Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 border-b border-white/[0.06]">
<div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 panel-header">
<div className="flex flex-wrap items-center gap-2 text-xs text-zinc-400">
<span className="px-2 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1 font-medium">
<span className="badge-accent">
<Check className="w-3 h-3" />
{saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
</span>
@@ -669,7 +669,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<select
value={getDocFolder(selectedDoc)}
onChange={(e) => handleChangeDocFolder(e.target.value)}
className="bg-[#16171a] border border-white/[0.08] text-zinc-300 text-xs px-2 py-0.5 focus:outline-none focus:border-[#1d8cf8]"
className="input-field px-2 py-0.5"
>
<option value="">(Kein Ordner / Root)</option>
{allFolderPaths.map((fp) => (
@@ -689,11 +689,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
onClick={() =>
persistDocument({ ...selectedDoc, isPinned: !selectedDoc.isPinned })
}
className={`h-7 px-2.5 border text-xs flex items-center gap-1.5 transition-colors ${
selectedDoc.isPinned
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40'
: 'bg-[#16171a] hover:bg-[#282a2f] border-white/[0.08] text-zinc-300 hover:text-white'
}`}
className={selectedDoc.isPinned ? 'btn-action text-accent border-accent/40' : 'btn-action'}
>
<Pin className="w-3.5 h-3.5" />
<span>{selectedDoc.isPinned ? 'Angepinnt' : 'Anpinnen'}</span>
@@ -702,16 +698,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={handleExportMarkdown}
className="h-7 px-2.5 bg-[#16171a] hover:bg-[#282a2f] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action"
>
<Download className="w-3.5 h-3.5 text-[#1d8cf8]" />
<Download className="w-3.5 h-3.5 text-accent" />
<span>Markdown (.md)</span>
</button>
<button
type="button"
onClick={() => handleDeleteDoc(selectedDoc.id)}
className="w-7 h-7 bg-[#16171a] hover:bg-red-500/20 border border-white/[0.08] text-zinc-400 hover:text-red-400 flex items-center justify-center transition-colors"
className="btn-icon btn-icon-danger"
title="Dokument löschen"
>
<Trash2 className="w-3.5 h-3.5" />
@@ -724,14 +720,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => setShowIconPicker((prev) => !prev)}
className="w-10 h-10 bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xl flex items-center justify-center flex-shrink-0 transition-colors"
className="w-10 h-10 panel-surface hover:bg-panel-elevated text-xl flex items-center justify-center flex-shrink-0 transition-colors"
title="Icon ändern"
>
{selectedDoc.icon}
</button>
{showIconPicker && (
<div className="absolute top-12 left-0 z-20 p-2.5 bg-[#222428] border border-white/[0.12] flex flex-wrap gap-1 w-64 shadow-xl">
<div className="absolute top-12 left-0 z-20 p-2.5 panel-surface flex flex-wrap gap-1 w-64 shadow-xl">
{ICONS.map((ic) => (
<button
key={ic}
@@ -740,7 +736,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
persistDocument({ ...selectedDoc, icon: ic });
setShowIconPicker(false);
}}
className="w-8 h-8 hover:bg-[#2b2d33] text-base flex items-center justify-center transition-colors"
className="w-8 h-8 hover:bg-panel-elevated text-base flex items-center justify-center transition-colors"
>
{ic}
</button>
@@ -779,7 +775,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Abschnitts-Überschrift…"
className="w-full bg-transparent text-base font-semibold text-[#1d8cf8] focus:outline-none pt-2 pb-1"
className="w-full bg-transparent text-base font-semibold text-accent focus:outline-none pt-2 pb-1"
/>
)}
@@ -799,7 +795,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
type="checkbox"
checked={!!block.checked}
onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
className="w-3.5 h-3.5 accent-[#1d8cf8] cursor-pointer"
className="w-3.5 h-3.5 accent-accent cursor-pointer"
/>
<input
type="text"
@@ -815,7 +811,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{block.type === 'bullet' && (
<div className="flex items-center gap-2.5 py-0.5">
<span className="w-1.5 h-1.5 bg-[#1d8cf8] flex-shrink-0" />
<span className="w-1.5 h-1.5 bg-accent flex-shrink-0" />
<input
type="text"
value={block.content}
@@ -827,8 +823,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
{block.type === 'callout' && (
<div className="p-2.5 bg-[#16171a] border border-[#1d8cf8]/40 flex items-start gap-2">
<Sparkles className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0 mt-0.5" />
<div className="p-2.5 bg-canvas border border-accent/40 flex items-start gap-2">
<Sparkles className="w-3.5 h-3.5 text-accent flex-shrink-0 mt-0.5" />
<textarea
rows={2}
value={block.content}
@@ -840,7 +836,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
{block.type === 'code' && (
<div className="p-2.5 bg-[#16171a] border border-white/[0.08] font-mono text-xs text-zinc-200">
<div className="p-2.5 bg-canvas border border-border font-mono text-xs text-zinc-200">
<textarea
rows={Math.max(2, block.content.split('\n').length)}
value={block.content}
@@ -857,7 +853,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, -1)}
className="p-1 hover:bg-[#282a2f] text-zinc-400 hover:text-white transition-colors"
className="p-1 hover:bg-panel-elevated text-zinc-400 hover:text-white transition-colors"
title="Nach oben"
>
<ArrowUp className="w-3 h-3" />
@@ -865,7 +861,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, 1)}
className="p-1 hover:bg-[#282a2f] text-zinc-400 hover:text-white transition-colors"
className="p-1 hover:bg-panel-elevated text-zinc-400 hover:text-white transition-colors"
title="Nach unten"
>
<ArrowDown className="w-3 h-3" />
@@ -884,68 +880,68 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
</div>
{/* Add Block Toolbar */}
<div className="mt-4 pt-3 border-t border-white/[0.06] flex flex-wrap items-center gap-1.5">
<div className="mt-4 pt-3 border-t border-border flex flex-wrap items-center gap-1.5">
<span className="text-xs text-zinc-400 mr-1">+ Block:</span>
<button
type="button"
onClick={() => addBlock('paragraph')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<AlignLeft className="w-3 h-3 text-[#1d8cf8]" /> Text
<AlignLeft className="w-3 h-3 text-accent" /> Text
</button>
<button
type="button"
onClick={() => addBlock('h2')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<Heading2 className="w-3 h-3 text-[#1d8cf8]" /> Überschrift
<Heading2 className="w-3 h-3 text-accent" /> Überschrift
</button>
<button
type="button"
onClick={() => addBlock('todo')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<CheckSquare className="w-3 h-3 text-[#1d8cf8]" /> To-Do
<CheckSquare className="w-3 h-3 text-accent" /> To-Do
</button>
<button
type="button"
onClick={() => addBlock('bullet')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<List className="w-3 h-3 text-[#1d8cf8]" /> Liste
<List className="w-3 h-3 text-accent" /> Liste
</button>
<button
type="button"
onClick={() => addBlock('callout')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<Sparkles className="w-3 h-3 text-[#1d8cf8]" /> Callout
<Sparkles className="w-3 h-3 text-accent" /> Callout
</button>
<button
type="button"
onClick={() => addBlock('code')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<Code className="w-3 h-3 text-[#1d8cf8]" /> Code
<Code className="w-3 h-3 text-accent" /> Code
</button>
<button
type="button"
onClick={() => addBlock('h1')}
className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
className="btn-action h-6 px-2 text-xs"
>
<Heading1 className="w-3 h-3 text-[#1d8cf8]" /> H1
<Heading1 className="w-3 h-3 text-accent" /> H1
</button>
</div>
</div>
) : (
<div className="p-8 bg-[#222428] border border-white/[0.08] text-center text-zinc-400 text-xs">
<div className="p-8 panel-surface text-center text-zinc-400 text-xs">
Wähle links eine Datei im Datei-Explorer aus oder erstelle eine neue Datei.
</div>
)}