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/triage/TasksView.tsx
+106 -131
View File
@@ -92,27 +92,27 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
const doneTasks = tasks.filter((t) => t.isCompleted);
return (
<div className="max-w-3xl mx-auto space-y-4">
{/* Filter Pills */}
<div className="flex flex-wrap items-center justify-between gap-3 mb-2">
<div className="flex items-center gap-1.5">
<div className="w-full space-y-2">
{/* Filter Tabs */}
<div className="flex flex-wrap items-center justify-between gap-2 mb-1">
<div className="flex items-center border border-white/[0.08] bg-[#16171a]">
<button
onClick={() => setFilter('open')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
filter === 'open'
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'text-zinc-400 hover:text-white hover:bg-[#222428]'
? 'bg-[#222428] text-white'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
Alle Offenen ({openTasks.length})
Offen ({openTasks.length})
</button>
<button
onClick={() => setFilter('done')}
className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
filter === 'done'
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'text-zinc-400 hover:text-white hover:bg-[#222428]'
? 'bg-[#222428] text-white'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
Erledigt ({doneTasks.length})
@@ -120,20 +120,20 @@ 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-all ${
className={`h-8 px-3.5 text-xs font-medium transition-colors ${
filter === 'discarded'
? 'bg-[#1d8cf8] text-white shadow-sm'
: 'text-zinc-400 hover:text-white hover:bg-[#222428]'
? 'bg-[#222428] text-white'
: 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
}`}
>
Verworfen ({discarded.length})
Papierkorb ({discarded.length})
</button>
</div>
{filter === 'discarded' && discarded.length > 0 && (
<button
onClick={handlePurgeAllDiscarded}
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"
className="h-7 px-3 rounded-full bg-white/[0.06] hover:bg-white/[0.12] text-zinc-300 hover:text-white text-xs font-medium flex items-center gap-1.5 transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
Papierkorb leeren
@@ -142,37 +142,35 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
</div>
{loading ? (
<div className="p-8 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
<div className="p-6 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
) : filter === 'discarded' ? (
<div className="space-y-2.5">
<div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
{discarded.length === 0 ? (
<div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
<div className="px-4 py-6 text-center text-zinc-400 text-sm">
Keine verworfenen Gedanken im Papierkorb.
</div>
) : (
discarded.map((item) => (
<div
key={item.id}
className="p-3.5 sm:p-4 rounded-2xl bg-[#222428] border border-white/[0.06] flex items-center justify-between gap-4"
className="px-3 py-2 flex items-center justify-between gap-3 hover:bg-white/[0.02]"
>
<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>
<div className="flex items-center gap-2.5 min-w-0 flex-1">
<Trash2 className="w-4 h-4 text-zinc-500 flex-shrink-0" />
<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-[#2b2d33] hover:bg-[#32353b] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
>
<RotateCcw className="w-3.5 h-3.5" /> Zurück
<RotateCcw className="w-3 h-3" /> Zurück
</button>
<button
onClick={() => handleDeletePermanent(item.id)}
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"
className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
<Trash2 className="w-3 h-3" />
</button>
</div>
</div>
@@ -180,121 +178,98 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
)}
</div>
) : (
<div className="space-y-2.5">
<div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
{(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
<div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
<div className="px-4 py-6 text-center text-zinc-400 text-sm">
{filter === 'open'
? 'Keine offenen Aufgaben vorhanden.'
: 'Noch keine erledigten Aufgaben.'}
</div>
) : (
(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];
(filter === 'open' ? openTasks : doneTasks).map((task) => (
<div
key={task.id}
className={`px-3 py-2 flex flex-col sm:flex-row sm:items-center justify-between gap-2 transition-colors hover:bg-white/[0.02] ${
task.isCompleted ? 'opacity-65' : ''
}`}
>
<div className="flex items-center gap-3 min-w-0 flex-1">
{/* Square minimalist checkbox */}
<button
onClick={() => handleToggleDone(task)}
className={`w-4 h-4 flex items-center justify-center flex-shrink-0 transition-colors border ${
task.isCompleted
? 'bg-[#1d8cf8] border-[#1d8cf8] text-white'
: 'border-zinc-500 hover:border-[#1d8cf8] text-transparent'
}`}
title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
>
<Check className="w-3 h-3 stroke-[3]" />
</button>
// 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'}
<div className="min-w-0 flex-1">
<p
className={`text-sm break-words leading-tight ${
task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
}`}
>
{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" />
{task.content}
</p>
<div className="flex flex-wrap items-center gap-1.5 mt-0.5 empty:hidden">
{task.priority === 'urgent' && (
<span className="px-1.5 py-0.2 border border-[#1d8cf8] text-[#1d8cf8] text-[10px] font-semibold">
Dringend
</span>
)}
</button>
<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>
{task.priority === 'high' && (
<span className="px-1.5 py-0.2 border border-white/20 text-zinc-300 text-[10px] font-medium">
Wichtig
</span>
)}
{task.tags?.map((tag) => (
<span
key={tag}
className="px-1.5 py-0.2 bg-[#16171a] text-zinc-400 text-[10px]"
>
#{tag}
</span>
))}
</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-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>
</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 h-3 text-zinc-400 absolute left-2 pointer-events-none" />
<input
type="date"
value={task.dueDate || ''}
onChange={(e) => handleDueDateChange(task, e.target.value)}
className="h-7 pl-6 pr-2 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-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
>
<FileText className="w-3 h-3 text-[#1d8cf8]" />
<span className="hidden md:inline">Vertiefen</span>
</button>
<button
onClick={() => handleDeletePermanent(task.id)}
title="Löschen"
className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
>
<Trash2 className="w-3 h-3" />
</button>
</div>
</div>
))
)}
</div>
)}
frontend/src/features/triage/TriageDeck.tsx
+28 -28
View File
@@ -134,19 +134,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
switch (priority) {
case 'urgent':
return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#ef4444] text-white">
<span className="px-2 py-0.2 text-xs font-semibold border border-[#1d8cf8] text-[#1d8cf8]">
Dringend
</span>
);
case 'high':
return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#f97316] text-white">
<span className="px-2 py-0.2 text-xs font-medium border border-white/20 text-zinc-300">
Wichtig
</span>
);
default:
return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#2b2d33] text-zinc-400">
<span className="px-2 py-0.2 text-xs font-medium bg-[#2b2d33] text-zinc-400">
Gedanke
</span>
);
@@ -156,15 +156,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
const sourceBadge = (source: string) => {
if (source === 'voice') {
return (
<span className="px-2.5 py-0.5 rounded-full text-xs bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1">
<span className="px-2 py-0.2 text-xs bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1">
<Mic className="w-3 h-3" /> Diktat
</span>
);
}
if (source === 'webhook') {
return (
<span className="px-2.5 py-0.5 rounded-full text-xs bg-[#16171a] text-[#22c55e] border border-white/[0.06] flex items-center gap-1">
<Webhook className="w-3 h-3" /> Webhook
<span className="px-2 py-0.2 text-xs bg-[#16171a] text-zinc-300 border border-white/[0.06] flex items-center gap-1">
<Webhook className="w-3 h-3 text-[#1d8cf8]" /> Webhook
</span>
);
}
@@ -173,12 +173,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
if (!activeCard) {
return (
<div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#222428] border border-white/[0.08] text-center shadow-card">
<div className="w-12 h-12 rounded-2xl bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm">
<div className="max-w-xl mx-auto mt-2 p-6 bg-[#222428] border border-white/[0.08] text-center">
<div className="w-12 h-12 bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm">
<Sparkles className="w-6 h-6" />
</div>
<h2 className="text-xl font-bold text-white mb-1.5">Inbox Zero</h2>
<p className="text-zinc-400 text-sm max-w-sm mx-auto mb-6">
<p className="text-zinc-400 text-sm max-w-sm mx-auto mb-4">
Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
</p>
@@ -235,7 +235,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{nextCard && (
<div
key={nextCard.id + '-preview'}
className="absolute inset-x-3 top-4 bottom-0 rounded-3xl bg-[#222428]/60 border border-white/[0.06] p-6 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
className="absolute inset-x-3 top-4 bottom-0 bg-[#222428]/60 border border-white/[0.06] p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
>
<div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
<p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
@@ -262,19 +262,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
initial={{ scale: 0.96, opacity: 0, y: 12 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.92, opacity: 0 }}
className="relative w-full h-full rounded-3xl bg-[#222428] border p-6 sm:p-7 shadow-card cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
className="relative w-full h-full bg-[#222428] border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
>
{/* Dynamic Swipe Overlays */}
<motion.div
style={{ opacity: keepOpacity }}
className="pointer-events-none absolute top-5 right-5 px-3 py-1 rounded-full bg-[#22c55e]/20 border border-[#22c55e] text-[#22c55e] font-semibold text-xs tracking-wide uppercase"
className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8] font-semibold text-xs tracking-wide uppercase"
>
Behalten 👉
</motion.div>
<motion.div
style={{ opacity: discardOpacity }}
className="pointer-events-none absolute top-5 left-5 px-3 py-1 rounded-full bg-[#ef4444]/20 border border-[#ef4444] text-[#ef4444] font-semibold text-xs tracking-wide uppercase"
className="pointer-events-none absolute top-4 left-4 px-2.5 py-1 bg-white/10 border border-white/30 text-zinc-300 font-semibold text-xs tracking-wide uppercase"
>
👈 Weg damit
</motion.div>
@@ -310,7 +310,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
activeCard.tags.map((tag) => (
<span
key={tag}
className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] text-xs flex items-center gap-1 font-medium"
className="px-2.5 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] text-xs flex items-center gap-1 font-medium"
>
<Tag className="w-2.5 h-2.5" />#{tag}
</span>
@@ -321,7 +321,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div>
{activeCard.dueDate && (
<span className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
<span className="px-2.5 py-0.5 bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
📅 {activeCard.dueDate}
</span>
)}
@@ -332,7 +332,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Task Date Picker Popover */}
{showDateModal && (
<div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
<div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-2 text-xs text-zinc-300">
<Calendar className="w-4 h-4 text-[#1d8cf8]" />
<span>Fälligkeitsdatum für Aufgabe:</span>
@@ -342,7 +342,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
type="date"
value={taskDueDate}
onChange={(e) => setTaskDueDate(e.target.value)}
className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
className="bg-[#16171a] text-white px-3 py-1 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
/>
<button
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
@@ -356,7 +356,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Shopping List Item Popover */}
{showListSelector && (
<div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08]">
<div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08]">
<p className="text-xs text-zinc-400 mb-2">
In welche Liste verschieben?
</p>
@@ -382,12 +382,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
)}
{/* Primary Triage Action Pills */}
<div className="mt-5 flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
<div className="mt-3 flex flex-wrap items-center justify-center gap-2">
{/* Swipe Left: Discard */}
<button
onClick={() => handleAction('discard')}
title="Verwerfen (Taste H oder Pfeil links)"
className="h-10 px-4 rounded-full border border-[#ef4444]/40 text-[#ef4444] hover:bg-[#ef4444]/15 font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
className="h-9 px-3.5 rounded-full border border-white/20 text-zinc-300 hover:text-white hover:bg-white/[0.06] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
>
<X className="w-4 h-4" />
<span>Weg damit</span>
@@ -400,10 +400,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowDateModal((prev) => !prev);
}}
title="Als Aufgabe mit Datum (Taste T)"
className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
showDateModal
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
: 'bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border-white/[0.06]'
: 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
}`}
>
<Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" />
@@ -414,7 +414,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<button
onClick={() => handleAction('keep', { convertTo: 'document' })}
title="In Notiz / Projekt umwandeln (Taste D)"
className="h-10 px-3.5 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-zinc-300 hover:text-white text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
className="h-9 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-zinc-300 hover:text-white text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
>
<FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Als Notiz</span>
@@ -427,13 +427,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowListSelector((prev) => !prev);
}}
title="Auf eine geteilte Liste setzen"
className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
showListSelector
? 'bg-[#22c55e]/20 text-[#22c55e] border-[#22c55e]/40 font-medium'
: 'bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border-white/[0.06]'
? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
: 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
}`}
>
<ShoppingCart className="w-3.5 h-3.5 text-[#22c55e]" />
<ShoppingCart className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Auf Liste</span>
</button>
@@ -441,7 +441,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<button
onClick={() => handleAction('keep')}
title="Behalten & sichern (Taste L oder Pfeil rechts)"
className="h-10 px-5 rounded-full bg-[#22c55e] hover:bg-[#16a34a] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 shadow-sm transition-colors active:scale-95"
className="h-9 px-4 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 shadow-sm transition-colors active:scale-95"
>
<Check className="w-4 h-4" />
<span>Behalten</span>