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
@@ -91,27 +91,27 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
const doneTasks = tasks.filter((t) => t.isCompleted);
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
{/* Filter Pills */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 mb-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
onClick={() => setFilter('open')}
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
|
||||
filter === 'open'
|
||||
? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
|
||||
? 'bg-[#1d8cf8] text-white shadow-sm'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-[#222428]'
|
||||
}`}
|
||||
>
|
||||
Offene Aufgaben ({openTasks.length})
|
||||
Alle Offenen ({openTasks.length})
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setFilter('done')}
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
|
||||
filter === 'done'
|
||||
? 'bg-[#282a2c] text-[#a8dab5] border border-[#a8dab5]/30'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
|
||||
? 'bg-[#1d8cf8] text-white shadow-sm'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-[#222428]'
|
||||
}`}
|
||||
>
|
||||
Erledigt ({doneTasks.length})
|
||||
@@ -119,10 +119,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
|
||||
<button
|
||||
onClick={() => setFilter('discarded')}
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
|
||||
filter === 'discarded'
|
||||
? 'bg-[#282a2c] text-[#f28b82] border border-[#f28b82]/30'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
|
||||
? 'bg-[#1d8cf8] text-white shadow-sm'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-[#222428]'
|
||||
}`}
|
||||
>
|
||||
Verworfen ({discarded.length})
|
||||
@@ -132,7 +132,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
{filter === 'discarded' && discarded.length > 0 && (
|
||||
<button
|
||||
onClick={handlePurgeAllDiscarded}
|
||||
className="h-8 px-3.5 rounded-full bg-[#f28b82]/10 hover:bg-[#f28b82]/20 border border-[#f28b82]/25 text-[#f28b82] text-xs font-medium flex items-center gap-1.5 transition-colors"
|
||||
className="h-8 px-3.5 rounded-full bg-[#ef4444]/15 hover:bg-[#ef4444]/25 text-[#ef4444] text-xs font-medium flex items-center gap-1.5 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Papierkorb leeren
|
||||
@@ -141,32 +141,35 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="p-8 text-center text-[#8e918f] text-sm">Lade Aufgaben…</div>
|
||||
<div className="p-8 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
|
||||
) : filter === 'discarded' ? (
|
||||
<div className="space-y-2.5">
|
||||
{discarded.length === 0 ? (
|
||||
<div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
|
||||
<div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
|
||||
Keine verworfenen Gedanken im Papierkorb.
|
||||
</div>
|
||||
) : (
|
||||
discarded.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center justify-between gap-4"
|
||||
className="p-3.5 sm:p-4 rounded-2xl bg-[#222428] border border-white/[0.06] flex items-center justify-between gap-4"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm text-[#8e918f] line-through truncate">{item.content}</p>
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div className="w-9 h-9 rounded-xl bg-zinc-700 text-zinc-300 flex items-center justify-center flex-shrink-0">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</div>
|
||||
<p className="text-sm text-zinc-400 line-through truncate">{item.content}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleRestore(item)}
|
||||
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#a8c7fa] flex items-center gap-1.5 transition-colors"
|
||||
className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox
|
||||
<RotateCcw className="w-3.5 h-3.5" /> Zurück
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeletePermanent(item.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 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
@@ -178,92 +181,119 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
{(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
|
||||
<div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
|
||||
<div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
|
||||
{filter === 'open'
|
||||
? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen.'
|
||||
? 'Keine offenen Aufgaben vorhanden.'
|
||||
: 'Noch keine erledigten Aufgaben.'}
|
||||
</div>
|
||||
) : (
|
||||
(filter === 'open' ? openTasks : doneTasks).map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="p-4 sm:p-5 rounded-2xl bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-white/[0.08] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors"
|
||||
>
|
||||
<div className="flex items-start gap-3.5 min-w-0 flex-1">
|
||||
<button
|
||||
onClick={() => handleToggleDone(task)}
|
||||
className="mt-0.5 flex-shrink-0 text-[#8e918f] hover:text-[#a8c7fa] transition-colors"
|
||||
>
|
||||
{task.isCompleted ? (
|
||||
<CheckCircle2 className="w-5 h-5 text-[#a8dab5]" />
|
||||
) : (
|
||||
<Circle className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
(filter === 'open' ? openTasks : doneTasks).map((task, idx) => {
|
||||
// Alternate squircle colors matching template: blue, green, purple, orange, violet
|
||||
const squircleColors = [
|
||||
'bg-[#1d8cf8]', // electric blue
|
||||
'bg-[#22c55e]', // vibrant green
|
||||
'bg-[#a855f7]', // purple
|
||||
'bg-[#f97316]', // orange
|
||||
'bg-[#8b5cf6]', // violet
|
||||
];
|
||||
const squircleBg = task.priority === 'urgent'
|
||||
? 'bg-[#ef4444]'
|
||||
: task.isCompleted
|
||||
? 'bg-[#a855f7]'
|
||||
: squircleColors[idx % squircleColors.length];
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<p
|
||||
className={`text-sm sm:text-base font-normal break-words ${
|
||||
task.isCompleted ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
|
||||
}`}
|
||||
// In template: active/top items have a thin bright green outline
|
||||
const isHighlightGreen = !task.isCompleted && idx < 3;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
className={`p-3.5 sm:p-4 rounded-2xl bg-[#222428] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors ${
|
||||
isHighlightGreen
|
||||
? 'border border-[#22c55e]/80 shadow-[0_0_12px_-4px_rgba(34,197,94,0.3)]'
|
||||
: 'border border-white/[0.06]'
|
||||
} ${task.isCompleted ? 'opacity-75' : ''}`}
|
||||
>
|
||||
<div className="flex items-center gap-3.5 min-w-0 flex-1">
|
||||
{/* Template Squircle Icon */}
|
||||
<button
|
||||
onClick={() => handleToggleDone(task)}
|
||||
className={`w-10 h-10 rounded-xl ${squircleBg} text-white flex items-center justify-center flex-shrink-0 shadow-sm transition-transform active:scale-95`}
|
||||
title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
|
||||
>
|
||||
{task.content}
|
||||
</p>
|
||||
{task.isCompleted ? (
|
||||
<Check className="w-5 h-5 stroke-[2.5]" />
|
||||
) : task.priority === 'urgent' ? (
|
||||
<AlertCircle className="w-5 h-5" />
|
||||
) : (
|
||||
<CheckCircle2 className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 mt-2">
|
||||
{task.priority === 'urgent' && (
|
||||
<span className="px-2.5 py-0.5 rounded-full bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/25 text-xs flex items-center gap-1 font-medium">
|
||||
<AlertCircle className="w-3 h-3" /> Dringend
|
||||
</span>
|
||||
)}
|
||||
{task.priority === 'high' && (
|
||||
<span className="px-2.5 py-0.5 rounded-full bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25 text-xs font-medium">
|
||||
Hoch
|
||||
</span>
|
||||
)}
|
||||
{task.tags?.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.08] text-xs flex items-center gap-1"
|
||||
>
|
||||
<Tag className="w-2.5 h-2.5 text-[#8e918f]" />#{tag}
|
||||
</span>
|
||||
))}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p
|
||||
className={`text-sm sm:text-base font-medium break-words leading-snug ${
|
||||
task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
|
||||
}`}
|
||||
>
|
||||
{task.content}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 mt-1">
|
||||
{task.priority === 'urgent' && (
|
||||
<span className="px-2 py-0.5 rounded-full bg-[#ef4444]/20 text-[#ef4444] text-[11px] font-semibold">
|
||||
Dringend
|
||||
</span>
|
||||
)}
|
||||
{task.priority === 'high' && (
|
||||
<span className="px-2 py-0.5 rounded-full bg-[#f97316]/20 text-[#f97316] text-[11px] font-semibold">
|
||||
Wichtig
|
||||
</span>
|
||||
)}
|
||||
{task.tags?.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-0.5 rounded-full bg-[#16171a] text-zinc-400 text-[11px] flex items-center gap-1"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Controls */}
|
||||
<div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
|
||||
<div className="relative flex items-center">
|
||||
<Calendar className="w-3.5 h-3.5 text-[#a8c7fa] absolute left-3 pointer-events-none" />
|
||||
<input
|
||||
type="date"
|
||||
value={task.dueDate || ''}
|
||||
onChange={(e) => handleDueDateChange(task, e.target.value)}
|
||||
className="pl-8 pr-3 py-1 rounded-full bg-[#131314] text-[#e3e3e3] text-xs border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
|
||||
/>
|
||||
{/* Action Controls */}
|
||||
<div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
|
||||
<div className="relative flex items-center">
|
||||
<Calendar className="w-3.5 h-3.5 text-zinc-400 absolute left-3 pointer-events-none" />
|
||||
<input
|
||||
type="date"
|
||||
value={task.dueDate || ''}
|
||||
onChange={(e) => handleDueDateChange(task, e.target.value)}
|
||||
className="pl-8 pr-3 py-1 rounded-full bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleConvertToDoc(task)}
|
||||
title="Als Notiz / Projekt vertiefen"
|
||||
className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
|
||||
<span className="hidden md:inline">Vertiefen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleDeletePermanent(task.id)}
|
||||
title="Löschen"
|
||||
className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleConvertToDoc(task)}
|
||||
title="Im Workspace als Dokument vertiefen"
|
||||
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"
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
|
||||
<span className="hidden md:inline">Vertiefen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleDeletePermanent(task.id)}
|
||||
title="Löschen"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user