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

style: overhaul design to authentic Google Gemini Material 3 Dark theme
MindSift CI & Docker Release / Lint, Build & Unit Tests (push) Successful in 2m8s
Details
MindSift CI & Docker Release / Build & Push Docker Image (push) Successful in 1m45s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 18:32:03 +02:00
1 parent 10323867e9
commit 31aa43c460
11 files changed
+413 -444
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/workspace/WorkspaceView.tsx
+50 -50
View File
@@ -209,19 +209,19 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<div className="lg:col-span-4 space-y-3">
<div className="flex items-center gap-2">
<div className="relative flex-1">
<Search className="w-4 h-4 text-[#9aa0a6] absolute left-3.5 top-1/2 -translate-y-1/2" />
<Search className="w-4 h-4 text-[#8e918f] absolute left-3.5 top-1/2 -translate-y-1/2" />
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Notizen durchsuchen…"
className="w-full h-10 pl-9 pr-4 rounded-full bg-[#1e1f20] text-xs sm:text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
className="w-full h-10 pl-9 pr-4 rounded-full bg-[#1e1f20] text-xs sm:text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
/>
</div>
<button
onClick={handleCreateDoc}
className="h-10 px-4 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#a1c2fa] transition-colors flex-shrink-0"
className="h-10 px-4 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors flex-shrink-0"
>
<Plus className="w-4 h-4" />
<span>Neu</span>
@@ -235,22 +235,22 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
key={doc.id}
onClick={() => setSelectedDoc(doc)}
className={`w-full text-left p-4 rounded-3xl transition-all flex items-start justify-between gap-3 ${
className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-colors flex items-start justify-between gap-3 ${
active
? 'bg-[#1e1f20] border border-[#8ab4f8]/50 shadow-gemini-glow'
: 'bg-[#131314] hover:bg-[#1e1f20] gemini-border'
? 'bg-[#282a2c] border border-white/[0.12]'
: 'bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-transparent'
}`}
>
<div className="flex items-start gap-3 min-w-0">
<span className="text-2xl flex-shrink-0">{doc.icon}</span>
<div className="min-w-0">
<h4 className="font-semibold text-sm text-[#e3e3e3] truncate">{doc.title}</h4>
<p className="text-xs text-[#9aa0a6] truncate mt-0.5">
<h4 className="font-medium text-sm text-[#e3e3e3] truncate">{doc.title}</h4>
<p className="text-xs text-[#8e918f] truncate mt-0.5">
{doc.blocks?.[0]?.content || 'Leeres Dokument'}
</p>
</div>
</div>
{doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#8ab4f8] flex-shrink-0 mt-1" />}
{doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#a8c7fa] flex-shrink-0 mt-1" />}
</button>
);
})}
@@ -260,11 +260,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Right Notion-Flair Block Editor */}
<div className="lg:col-span-8">
{selectedDoc ? (
<div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
{/* Document Top Action Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-6 border-b border-white/[0.06]">
<div className="flex items-center gap-2 text-xs text-[#9aa0a6]">
<span className="px-3 py-1 rounded-full bg-[#131314] text-[#81c995] flex items-center gap-1">
<div className="flex items-center gap-2 text-xs text-[#8e918f]">
<span className="px-3 py-1 rounded-full bg-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1 font-medium">
<Check className="w-3 h-3" />
{saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'}
</span>
@@ -278,8 +278,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
}
className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
selectedDoc.isPinned
? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40'
: 'bg-[#282a2c] text-[#9aa0a6] hover:text-[#e3e3e3]'
? 'bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25'
: 'bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3]'
}`}
>
<Pin className="w-3.5 h-3.5" />
@@ -288,15 +288,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
onClick={handleExportMarkdown}
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
>
<Download className="w-3.5 h-3.5 text-[#8ab4f8]" />
<Download className="w-3.5 h-3.5 text-[#a8c7fa]" />
<span>Markdown (.md)</span>
</button>
<button
onClick={() => handleDeleteDoc(selectedDoc.id)}
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center transition-colors"
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
@@ -308,14 +308,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => setShowIconPicker((prev) => !prev)}
className="w-12 h-12 rounded-2xl bg-[#131314] hover:bg-[#282a2c] gemini-border text-2xl flex items-center justify-center flex-shrink-0"
className="w-12 h-12 rounded-2xl bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
title="Icon ändern"
>
{selectedDoc.icon}
</button>
{showIconPicker && (
<div className="absolute top-14 left-0 z-20 p-2.5 rounded-3xl bg-[#131314] gemini-border shadow-card-depth flex flex-wrap gap-1.5 w-64">
<div className="absolute top-14 left-0 z-20 p-2.5 rounded-2xl bg-[#1e1f20] border border-white/[0.12] shadow-lg flex flex-wrap gap-1.5 w-64">
{ICONS.map((ic) => (
<button
key={ic}
@@ -324,7 +324,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
persistDocument({ ...selectedDoc, icon: ic });
setShowIconPicker(false);
}}
className="w-9 h-9 rounded-full hover:bg-[#282a2c] text-lg flex items-center justify-center"
className="w-9 h-9 rounded-full hover:bg-[#282a2c] text-lg flex items-center justify-center transition-colors"
>
{ic}
</button>
@@ -337,7 +337,7 @@ 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-2xl sm:text-3xl font-bold text-[#e3e3e3] focus:outline-none"
className="w-full bg-transparent text-2xl sm:text-3xl font-semibold text-[#e3e3e3] focus:outline-none"
/>
</div>
@@ -353,7 +353,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-2xl font-bold text-[#e3e3e3] focus:outline-none py-1"
className="w-full bg-transparent text-2xl font-semibold text-[#e3e3e3] focus:outline-none py-1"
/>
)}
@@ -363,7 +363,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Abschnitts-Überschrift…"
className="w-full bg-transparent text-lg font-semibold text-[#8ab4f8] focus:outline-none pt-2 pb-1"
className="w-full bg-transparent text-lg font-medium text-[#a8c7fa] focus:outline-none pt-2 pb-1"
/>
)}
@@ -373,7 +373,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={block.content}
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="Text schreiben…"
className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] leading-relaxed focus:outline-none resize-none"
className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] leading-relaxed focus:outline-none resize-none font-normal"
/>
)}
@@ -383,7 +383,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
type="checkbox"
checked={!!block.checked}
onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
className="w-4 h-4 rounded accent-[#81c995] cursor-pointer"
className="w-4 h-4 rounded accent-[#a8dab5] cursor-pointer"
/>
<input
type="text"
@@ -391,7 +391,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
placeholder="To-Do Punkt…"
className={`w-full bg-transparent text-sm sm:text-base focus:outline-none ${
block.checked ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]'
block.checked ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
}`}
/>
</div>
@@ -399,7 +399,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{block.type === 'bullet' && (
<div className="flex items-center gap-3 py-0.5">
<span className="w-1.5 h-1.5 rounded-full bg-[#8ab4f8] flex-shrink-0" />
<span className="w-1.5 h-1.5 rounded-full bg-[#a8c7fa] flex-shrink-0" />
<input
type="text"
value={block.content}
@@ -411,8 +411,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
{block.type === 'callout' && (
<div className="p-4 rounded-2xl bg-[#131314] border border-[#8ab4f8]/30 flex items-start gap-3">
<Sparkles className="w-4 h-4 text-[#8ab4f8] flex-shrink-0 mt-1" />
<div className="p-4 rounded-2xl bg-[#131314] border border-[#a8c7fa]/25 flex items-start gap-3">
<Sparkles className="w-4 h-4 text-[#a8c7fa] flex-shrink-0 mt-1" />
<textarea
rows={2}
value={block.content}
@@ -424,13 +424,13 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
{block.type === 'code' && (
<div className="p-4 rounded-2xl bg-[#0b0f19] gemini-border font-mono text-xs sm:text-sm text-[#81c995]">
<div className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#a8dab5]">
<textarea
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"
className="w-full bg-transparent focus:outline-none resize-none font-mono"
/>
</div>
)}
@@ -441,7 +441,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, -1)}
className="p-1 rounded-full hover:bg-[#282a2c] text-[#9aa0a6]"
className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
title="Nach oben"
>
<ArrowUp className="w-3.5 h-3.5" />
@@ -449,7 +449,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => moveBlock(idx, 1)}
className="p-1 rounded-full hover:bg-[#282a2c] text-[#9aa0a6]"
className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
title="Nach unten"
>
<ArrowDown className="w-3.5 h-3.5" />
@@ -457,7 +457,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => removeBlock(block.id)}
className="p-1 rounded-full hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82]"
className="p-1 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] transition-colors"
title="Block entfernen"
>
<Trash2 className="w-3.5 h-3.5" />
@@ -469,67 +469,67 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Add Block Pill Toolbar */}
<div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2">
<span className="text-xs text-[#9aa0a6] mr-1">+ Block einfügen:</span>
<span className="text-xs text-[#8e918f] mr-1">+ Block einfügen:</span>
<button
type="button"
onClick={() => addBlock('paragraph')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
>
<AlignLeft className="w-3.5 h-3.5 text-[#8ab4f8]" /> Text
<AlignLeft className="w-3.5 h-3.5 text-[#a8c7fa]" /> Text
</button>
<button
type="button"
onClick={() => addBlock('h2')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
>
<Heading2 className="w-3.5 h-3.5 text-[#8ab4f8]" /> Überschrift
<Heading2 className="w-3.5 h-3.5 text-[#a8c7fa]" /> Überschrift
</button>
<button
type="button"
onClick={() => addBlock('todo')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
>
<CheckSquare className="w-3.5 h-3.5 text-[#81c995]" /> Checkliste
<CheckSquare className="w-3.5 h-3.5 text-[#a8dab5]" /> Checkliste
</button>
<button
type="button"
onClick={() => addBlock('bullet')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
>
<List className="w-3.5 h-3.5 text-[#8ab4f8]" /> Aufzählung
<List className="w-3.5 h-3.5 text-[#a8c7fa]" /> Aufzählung
</button>
<button
type="button"
onClick={() => addBlock('callout')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
>
<Sparkles className="w-3.5 h-3.5 text-[#c58af9]" /> Callout
<Sparkles className="w-3.5 h-3.5 text-[#a8c7fa]" /> Callout
</button>
<button
type="button"
onClick={() => addBlock('code')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
>
<Code className="w-3.5 h-3.5 text-[#81c995]" /> Codeblock
<Code className="w-3.5 h-3.5 text-[#a8dab5]" /> Codeblock
</button>
<button
type="button"
onClick={() => addBlock('h1')}
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
>
<Heading1 className="w-3.5 h-3.5 text-[#8ab4f8]" /> H1
<Heading1 className="w-3.5 h-3.5 text-[#a8c7fa]" /> H1
</button>
</div>
</div>
) : (
<div className="p-12 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6]">
<div className="p-12 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f]">
Wähle links ein Dokument aus oder erstelle ein neues Projekt.
</div>
)}