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

style: reduce padding, adopt crisp square tabs/cards, keep round buttons and single accent
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 51s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 19:43:59 +02:00
1 parent 3263b07e72
commit da82caf82c
7 files changed
+345 -371
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/workspace/WorkspaceView.tsx
+36 -36
View File
@@ -204,10 +204,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
);
return (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-6xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
{/* Left Document List Sidebar */}
<div className="lg:col-span-4 space-y-3">
<div className="flex items-center gap-2">
<div className="lg:col-span-4 bg-[#222428] border border-white/[0.08] flex flex-col self-start">
<div className="flex items-center gap-2 p-2 border-b border-white/[0.06]">
<div className="relative flex-1">
<Search className="w-4 h-4 text-zinc-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
<input
@@ -215,34 +215,34 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Notizen durchsuchen…"
className="w-full h-11 pl-9 pr-4 rounded-2xl bg-[#222428] text-xs sm:text-sm text-white placeholder-zinc-500 border border-white/[0.06] focus:outline-none focus:border-[#1d8cf8] transition-colors"
className="w-full h-9 pl-9 pr-3 bg-[#16171a] text-xs sm:text-sm text-white placeholder-zinc-500 border border-white/[0.06] focus:outline-none focus:border-[#1d8cf8] transition-colors"
/>
</div>
<button
onClick={handleCreateDoc}
className="h-11 px-4 rounded-full bg-[#1d8cf8] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors flex-shrink-0 shadow-sm"
className="h-9 px-4 rounded-full bg-[#1d8cf8] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors flex-shrink-0"
>
<Plus className="w-4 h-4" />
<span>Neu</span>
</button>
</div>
<div className="space-y-2 max-h-[540px] overflow-y-auto pr-1">
<div className="divide-y divide-white/[0.06] max-h-[calc(100vh-240px)] overflow-y-auto">
{filteredDocs.map((doc) => {
const active = selectedDoc?.id === doc.id;
return (
<button
key={doc.id}
onClick={() => setSelectedDoc(doc)}
className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-all flex items-start justify-between gap-3 ${
className={`w-full text-left pl-2.5 pr-3 py-2 transition-colors flex items-start justify-between gap-3 border-l-2 ${
active
? 'bg-[#282a2f] border border-[#1d8cf8]/70 shadow-sm'
: 'bg-[#222428] hover:bg-[#282a2f] border border-white/[0.06]'
? 'bg-[#282a2f] border-l-[#1d8cf8]'
: 'border-l-transparent hover:bg-[#282a2f]'
}`}
>
<div className="flex items-start gap-3 min-w-0">
<span className="text-2xl flex-shrink-0">{doc.icon}</span>
<div className="flex items-start gap-2.5 min-w-0">
<span className="text-lg leading-6 flex-shrink-0">{doc.icon}</span>
<div className="min-w-0">
<h4 className="font-medium text-sm text-white truncate">{doc.title}</h4>
<p className="text-xs text-zinc-400 truncate mt-0.5">
@@ -260,13 +260,13 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Right Block Editor */}
<div className="lg:col-span-8">
{selectedDoc ? (
<div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
<div className="p-4 bg-[#222428] 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 flex-wrap items-center justify-between gap-3 pb-3 mb-3 border-b border-white/[0.06]">
<div className="flex items-center gap-2 text-xs text-zinc-400">
<span className="px-3 py-1 rounded-full bg-[#16171a] text-[#22c55e] border border-white/[0.06] flex items-center gap-1 font-medium">
<span className="px-2 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1 font-medium">
<Check className="w-3 h-3" />
{saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'}
{saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
</span>
<span>• {selectedDoc.blocks.length} Blöcke</span>
</div>
@@ -304,18 +304,18 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
</div>
{/* Document Icon & Title */}
<div className="flex items-center gap-3 mb-6 relative">
<div className="flex items-center gap-3 mb-4 relative">
<button
type="button"
onClick={() => setShowIconPicker((prev) => !prev)}
className="w-12 h-12 rounded-2xl bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
className="w-12 h-12 rounded-full bg-[#16171a] hover:bg-[#2b2d33] 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-2xl bg-[#222428] border border-white/[0.12] shadow-card flex flex-wrap gap-1.5 w-64">
<div className="absolute top-14 left-0 z-20 p-2.5 bg-[#222428] border border-white/[0.12] flex flex-wrap gap-1 w-64">
{ICONS.map((ic) => (
<button
key={ic}
@@ -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-[#22c55e] cursor-pointer"
className="w-4 h-4 accent-[#1d8cf8] cursor-pointer"
/>
<input
type="text"
@@ -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-[#1d8cf8] flex-shrink-0" />
<span className="w-1.5 h-1.5 bg-[#1d8cf8] 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-[#16171a] border border-[#1d8cf8]/30 flex items-start gap-3">
<Sparkles className="w-4 h-4 text-[#1d8cf8] flex-shrink-0 mt-1" />
<div className="p-3 bg-[#16171a] border border-[#1d8cf8]/40 flex items-start gap-2.5">
<Sparkles className="w-4 h-4 text-[#1d8cf8] flex-shrink-0 mt-0.5" />
<textarea
rows={2}
value={block.content}
@@ -424,7 +424,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
)}
{block.type === 'code' && (
<div className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#22c55e]">
<div className="p-3 bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-zinc-200">
<textarea
rows={Math.max(2, block.content.split('\n').length)}
value={block.content}
@@ -467,14 +467,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
))}
</div>
{/* Add Block Pill Toolbar */}
<div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2">
{/* Add Block Toolbar */}
<div className="mt-4 pt-3 border-t border-white/[0.06] flex flex-wrap items-center gap-1.5">
<span className="text-xs text-zinc-400 mr-1">+ Block einfügen:</span>
<button
type="button"
onClick={() => addBlock('paragraph')}
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="h-7 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"
>
<AlignLeft className="w-3.5 h-3.5 text-[#1d8cf8]" /> Text
</button>
@@ -482,7 +482,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => addBlock('h2')}
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="h-7 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"
>
<Heading2 className="w-3.5 h-3.5 text-[#1d8cf8]" /> Überschrift
</button>
@@ -490,15 +490,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => addBlock('todo')}
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="h-7 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"
>
<CheckSquare className="w-3.5 h-3.5 text-[#22c55e]" /> Checkliste
<CheckSquare className="w-3.5 h-3.5 text-[#1d8cf8]" /> Checkliste
</button>
<button
type="button"
onClick={() => addBlock('bullet')}
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="h-7 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"
>
<List className="w-3.5 h-3.5 text-[#1d8cf8]" /> Aufzählung
</button>
@@ -506,30 +506,30 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
<button
type="button"
onClick={() => addBlock('callout')}
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="h-7 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"
>
<Sparkles className="w-3.5 h-3.5 text-[#a855f7]" /> Callout
<Sparkles className="w-3.5 h-3.5 text-[#1d8cf8]" /> Callout
</button>
<button
type="button"
onClick={() => addBlock('code')}
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="h-7 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"
>
<Code className="w-3.5 h-3.5 text-[#22c55e]" /> Codeblock
<Code className="w-3.5 h-3.5 text-[#1d8cf8]" /> Codeblock
</button>
<button
type="button"
onClick={() => addBlock('h1')}
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="h-7 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"
>
<Heading1 className="w-3.5 h-3.5 text-[#1d8cf8]" /> H1
</button>
</div>
</div>
) : (
<div className="p-12 rounded-3xl bg-[#222428] border border-white/[0.08] text-center text-zinc-400">
<div className="p-8 bg-[#222428] border border-white/[0.08] text-center text-zinc-400">
Wähle links ein Dokument aus oder erstelle ein neues Projekt.
</div>
)}