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

feat(design): centralize design system with CSS variables and semantic classes in index.css
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 52s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 20:07:27 +02:00
1 parent 94123c9424
commit ec9ba8fd9f
9 files changed
+428 -304
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/triage/TriageDeck.tsx
+27 -35
View File
@@ -185,7 +185,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<div className="flex flex-wrap items-center justify-center gap-2.5">
<button
onClick={onFocusCapture}
className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm shadow-sm transition-colors"
className="btn-primary h-9 px-4"
>
+ Neuer Gedanke
</button>
@@ -193,9 +193,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{lastTriaged && (
<button
onClick={handleUndo}
className="h-10 px-4 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
className="btn-action h-9 px-3.5"
>
<RotateCcw className="w-3.5 h-3.5 text-[#1d8cf8]" />
<RotateCcw className="w-3.5 h-3.5 text-accent" />
Rückgängig
</button>
)}
@@ -221,9 +221,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{lastTriaged && (
<button
onClick={handleUndo}
className="h-7 px-2.5 rounded-full bg-[#222428] 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="btn-action h-7 px-2.5 text-xs"
>
<RotateCcw className="w-3 h-3 text-[#1d8cf8]" />
<RotateCcw className="w-3 h-3 text-accent" />
Rückgängig
</button>
)}
@@ -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 bg-[#222428]/60 border border-white/[0.06] p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
className="absolute inset-x-3 top-4 bottom-0 bg-panel/60 border border-border 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,12 +262,12 @@ 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 bg-[#222428] border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
className="relative w-full h-full bg-panel border border-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-4 right-4 px-2.5 py-1 bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8] font-semibold text-xs tracking-wide uppercase"
className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-accent/20 border border-accent text-accent font-semibold text-xs tracking-wide uppercase"
>
Behalten 👉
</motion.div>
@@ -304,13 +304,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div>
{/* Card Footer: Tags & Due Date */}
<div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-white/[0.06]">
<div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-border">
<div className="flex flex-wrap items-center gap-1.5">
{activeCard.tags && activeCard.tags.length > 0 ? (
activeCard.tags.map((tag) => (
<span
key={tag}
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"
className="badge-accent"
>
<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 bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
<span className="px-2.5 py-0.5 bg-canvas text-zinc-300 border border-border text-xs">
📅 {activeCard.dueDate}
</span>
)}
@@ -332,9 +332,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Task Date Picker Popover */}
{showDateModal && (
<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="p-3 bg-panel border border-t-0 border-border 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]" />
<Calendar className="w-4 h-4 text-accent" />
<span>Fälligkeitsdatum für Aufgabe:</span>
</div>
<div className="flex items-center gap-2">
@@ -342,11 +342,11 @@ 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 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
className="input-field px-3 py-1 text-xs"
/>
<button
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
className="px-3.5 py-1 rounded-full bg-[#22c55e] text-white font-medium text-xs hover:bg-[#16a34a] transition-colors"
className="btn-primary"
>
Speichern
</button>
@@ -354,9 +354,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div>
)}
{/* Convert to Shopping List Item Popover */}
{/* Convert to Shared Shopping List Item Popover */}
{showListSelector && (
<div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08]">
<div className="p-3 bg-panel border border-t-0 border-border">
<p className="text-xs text-zinc-400 mb-2">
In welche Liste verschieben?
</p>
@@ -368,7 +368,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
onClick={() =>
handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
}
className="px-3 py-1.5 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-xs text-zinc-200 flex items-center gap-1.5 transition-colors"
className="btn-action"
>
<span>{lst.icon}</span>
<span>{lst.title}</span>
@@ -381,13 +381,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div>
)}
{/* Primary Triage Action Pills */}
{/* Primary Triage Action Buttons */}
<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-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"
className="btn-action h-8 px-3"
>
<X className="w-4 h-4" />
<span>Weg damit</span>
@@ -400,13 +400,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowDateModal((prev) => !prev);
}}
title="Als Aufgabe mit Datum (Taste T)"
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-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
}`}
className={`btn-action h-8 px-3 ${showDateModal ? 'border-accent text-accent bg-accent/20' : ''}`}
>
<Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" />
<Calendar className="w-3.5 h-3.5 text-accent" />
<span>Termin-To-Do</span>
</button>
@@ -414,9 +410,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<button
onClick={() => handleAction('keep', { convertTo: 'document' })}
title="In Notiz / Projekt umwandeln (Taste D)"
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"
className="btn-action h-8 px-3"
>
<FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
<FileText className="w-3.5 h-3.5 text-accent" />
<span>Als Notiz</span>
</button>
@@ -427,13 +423,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
setShowListSelector((prev) => !prev);
}}
title="Auf eine geteilte Liste setzen"
className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
showListSelector
? '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]'
}`}
className={`btn-action h-8 px-3 ${showListSelector ? 'border-accent text-accent bg-accent/20' : ''}`}
>
<ShoppingCart className="w-3.5 h-3.5 text-[#1d8cf8]" />
<ShoppingCart className="w-3.5 h-3.5 text-accent" />
<span>Auf Liste</span>
</button>
@@ -441,7 +433,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<button
onClick={() => handleAction('keep')}
title="Behalten & sichern (Taste L oder Pfeil rechts)"
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"
className="btn-primary h-8 px-4"
>
<Check className="w-4 h-4" />
<span>Behalten</span>