style: align UI with mobile productivity template and remove Google/Gemini references
This commit is contained in:
sandrodach committed
1 parent
31aa43c460
commit
c99b6c3a49
11 files changed
+698
-495
No files matched your search
@@ -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-[#8e918f] absolute left-3.5 top-1/2 -translate-y-1/2" />
|
||||
<Search className="w-4 h-4 text-zinc-400 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-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleCreateDoc}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Neu</span>
|
||||
@@ -235,36 +235,36 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
<button
|
||||
key={doc.id}
|
||||
onClick={() => setSelectedDoc(doc)}
|
||||
className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-colors flex items-start justify-between gap-3 ${
|
||||
className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-all flex items-start justify-between gap-3 ${
|
||||
active
|
||||
? 'bg-[#282a2c] border border-white/[0.12]'
|
||||
: 'bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-transparent'
|
||||
? 'bg-[#282a2f] border border-[#1d8cf8]/70 shadow-sm'
|
||||
: 'bg-[#222428] hover:bg-[#282a2f] border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<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-medium text-sm text-[#e3e3e3] truncate">{doc.title}</h4>
|
||||
<p className="text-xs text-[#8e918f] truncate mt-0.5">
|
||||
<h4 className="font-medium text-sm text-white truncate">{doc.title}</h4>
|
||||
<p className="text-xs text-zinc-400 truncate mt-0.5">
|
||||
{doc.blocks?.[0]?.content || 'Leeres Dokument'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#a8c7fa] flex-shrink-0 mt-1" />}
|
||||
{doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0 mt-1" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Notion-Flair Block Editor */}
|
||||
{/* Right Block Editor */}
|
||||
<div className="lg:col-span-8">
|
||||
{selectedDoc ? (
|
||||
<div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
|
||||
<div className="p-6 sm:p-8 rounded-3xl 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 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">
|
||||
<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">
|
||||
<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-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25'
|
||||
: 'bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3]'
|
||||
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
|
||||
: 'bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-zinc-300 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<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] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
|
||||
className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-xs text-zinc-200 hover:text-white flex items-center gap-1.5 transition-colors"
|
||||
>
|
||||
<Download className="w-3.5 h-3.5 text-[#a8c7fa]" />
|
||||
<Download className="w-3.5 h-3.5 text-[#1d8cf8]" />
|
||||
<span>Markdown (.md)</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleDeleteDoc(selectedDoc.id)}
|
||||
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"
|
||||
className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 border border-white/[0.06] text-zinc-400 hover:text-[#ef4444] 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] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
|
||||
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"
|
||||
title="Icon ändern"
|
||||
>
|
||||
{selectedDoc.icon}
|
||||
</button>
|
||||
|
||||
{showIconPicker && (
|
||||
<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">
|
||||
<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">
|
||||
{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 transition-colors"
|
||||
className="w-9 h-9 rounded-full hover:bg-[#2b2d33] 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-semibold text-[#e3e3e3] focus:outline-none"
|
||||
className="w-full bg-transparent text-2xl sm:text-3xl font-bold text-white 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-semibold text-[#e3e3e3] focus:outline-none py-1"
|
||||
className="w-full bg-transparent text-2xl font-bold text-white 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-medium text-[#a8c7fa] focus:outline-none pt-2 pb-1"
|
||||
className="w-full bg-transparent text-lg font-semibold text-[#1d8cf8] 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 font-normal"
|
||||
className="w-full bg-transparent text-sm sm:text-base text-zinc-200 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-[#a8dab5] cursor-pointer"
|
||||
className="w-4 h-4 rounded accent-[#22c55e] 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-[#8e918f]' : 'text-[#e3e3e3]'
|
||||
block.checked ? 'line-through text-zinc-500' : 'text-white'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
@@ -399,32 +399,32 @@ 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-[#a8c7fa] flex-shrink-0" />
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#1d8cf8] flex-shrink-0" />
|
||||
<input
|
||||
type="text"
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="Listenpunkt…"
|
||||
className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] focus:outline-none"
|
||||
className="w-full bg-transparent text-sm sm:text-base text-zinc-200 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{block.type === 'callout' && (
|
||||
<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" />
|
||||
<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" />
|
||||
<textarea
|
||||
rows={2}
|
||||
value={block.content}
|
||||
onChange={(e) => updateBlock(block.id, { content: e.target.value })}
|
||||
placeholder="Wichtiger Hinweis oder Zusammenfassung…"
|
||||
className="w-full bg-transparent text-sm text-[#e3e3e3] focus:outline-none resize-none"
|
||||
className="w-full bg-transparent text-sm text-zinc-200 focus:outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{block.type === 'code' && (
|
||||
<div className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#a8dab5]">
|
||||
<div className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#22c55e]">
|
||||
<textarea
|
||||
rows={Math.max(2, block.content.split('\n').length)}
|
||||
value={block.content}
|
||||
@@ -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-[#8e918f] hover:text-[#e3e3e3] transition-colors"
|
||||
className="p-1 rounded-full hover:bg-[#2b2d33] text-zinc-400 hover:text-white 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-[#8e918f] hover:text-[#e3e3e3] transition-colors"
|
||||
className="p-1 rounded-full hover:bg-[#2b2d33] text-zinc-400 hover:text-white 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-[#8e918f] hover:text-[#f28b82] transition-colors"
|
||||
className="p-1 rounded-full hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] 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-[#8e918f] mr-1">+ Block einfügen:</span>
|
||||
<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-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
|
||||
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"
|
||||
>
|
||||
<AlignLeft className="w-3.5 h-3.5 text-[#a8c7fa]" /> Text
|
||||
<AlignLeft className="w-3.5 h-3.5 text-[#1d8cf8]" /> Text
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('h2')}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<Heading2 className="w-3.5 h-3.5 text-[#a8c7fa]" /> Überschrift
|
||||
<Heading2 className="w-3.5 h-3.5 text-[#1d8cf8]" /> Überschrift
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('todo')}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<CheckSquare className="w-3.5 h-3.5 text-[#a8dab5]" /> Checkliste
|
||||
<CheckSquare className="w-3.5 h-3.5 text-[#22c55e]" /> Checkliste
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('bullet')}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<List className="w-3.5 h-3.5 text-[#a8c7fa]" /> Aufzählung
|
||||
<List className="w-3.5 h-3.5 text-[#1d8cf8]" /> Aufzählung
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('callout')}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<Sparkles className="w-3.5 h-3.5 text-[#a8c7fa]" /> Callout
|
||||
<Sparkles className="w-3.5 h-3.5 text-[#a855f7]" /> Callout
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('code')}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<Code className="w-3.5 h-3.5 text-[#a8dab5]" /> Codeblock
|
||||
<Code className="w-3.5 h-3.5 text-[#22c55e]" /> Codeblock
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addBlock('h1')}
|
||||
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"
|
||||
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"
|
||||
>
|
||||
<Heading1 className="w-3.5 h-3.5 text-[#a8c7fa]" /> H1
|
||||
<Heading1 className="w-3.5 h-3.5 text-[#1d8cf8]" /> H1
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-12 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f]">
|
||||
<div className="p-12 rounded-3xl bg-[#222428] border border-white/[0.08] text-center text-zinc-400">
|
||||
Wähle links ein Dokument aus oder erstelle ein neues Projekt.
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user