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

style: align UI with mobile productivity template and remove Google/Gemini references
MindSift CI & Docker Release / Lint, Build & Unit Tests (push) Failing after 2m16s
Details
MindSift CI & Docker Release / Build & Push Docker Image (push) Skipped
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 18:59:00 +02:00
1 parent 31aa43c460
commit c99b6c3a49
11 files changed
+698 -495
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/triage/TriageDeck.tsx
+53 -53
View File
@@ -55,7 +55,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
const cardBorderColor = useTransform(
x,
[-140, 0, 140],
['rgba(242, 139, 130, 0.6)', '#3c4043', 'rgba(168, 218, 181, 0.6)']
['rgba(239, 68, 68, 0.7)', 'rgba(255, 255, 255, 0.08)', 'rgba(34, 197, 94, 0.7)']
);
const handleAction = async (
@@ -98,7 +98,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
onDeckChange();
};
// Keyboard shortcuts for desktop power users (BRAIN.md Section 5)
// Keyboard shortcuts for desktop power users
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
const target = e.target as HTMLElement;
@@ -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-normal bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/30">
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#ef4444] text-white">
Dringend
</span>
);
case 'high':
return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#fdd663]/15 text-[#fdd663] border border-[#fdd663]/30">
Hoch
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#f97316] text-white">
Wichtig
</span>
);
default:
return (
<span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#282a2c] text-[#8e918f] border border-white/[0.06]">
<span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#2b2d33] text-zinc-400">
Gedanke
</span>
);
@@ -156,14 +156,14 @@ 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-[#131314] text-[#a8c7fa] border border-white/[0.06] flex items-center gap-1">
<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">
<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-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1">
<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>
);
@@ -173,19 +173,19 @@ 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-[#1e1f20] border border-[#3c4043] text-center shadow-card">
<div className="w-12 h-12 rounded-full bg-[#a8dab5]/15 flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-[#a8dab5]" />
<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">
<Sparkles className="w-6 h-6" />
</div>
<h2 className="text-xl font-medium text-[#e3e3e3] mb-1.5">Inbox Zero</h2>
<p className="text-[#8e918f] text-sm max-w-sm mx-auto mb-6">
<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">
Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
</p>
<div className="flex flex-wrap items-center justify-center gap-2.5">
<button
onClick={onFocusCapture}
className="h-9 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#b8d4ff] transition-colors"
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"
>
+ Neuer Gedanke
</button>
@@ -193,9 +193,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{lastTriaged && (
<button
onClick={handleUndo}
className="h-9 px-4 rounded-full bg-[#282a2c] text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#333537] border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
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"
>
<RotateCcw className="w-3.5 h-3.5" />
<RotateCcw className="w-3.5 h-3.5 text-[#1d8cf8]" />
Rückgängig
</button>
)}
@@ -209,11 +209,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Top Deck Status & Undo Bar */}
<div className="flex items-center justify-between mb-3 px-1">
<div className="flex items-center gap-2">
<span className="text-xs text-[#8e918f]">
<span className="text-xs text-zinc-400">
{cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend
</span>
<span className="hidden sm:inline text-xs text-[#8e918f]">•</span>
<span className="hidden sm:flex items-center gap-1 text-xs text-[#8e918f]">
<span className="hidden sm:inline text-xs text-zinc-600">•</span>
<span className="hidden sm:flex items-center gap-1 text-xs text-zinc-400">
<Keyboard className="w-3 h-3" /> H / L oder ← / →
</span>
</div>
@@ -221,9 +221,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{lastTriaged && (
<button
onClick={handleUndo}
className="h-7 px-2.5 rounded-full bg-[#1e1f20] 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-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"
>
<RotateCcw className="w-3 h-3 text-[#a8c7fa]" />
<RotateCcw className="w-3 h-3 text-[#1d8cf8]" />
Rückgängig
</button>
)}
@@ -235,11 +235,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{nextCard && (
<div
key={nextCard.id + '-preview'}
className="absolute inset-x-3 top-4 bottom-0 rounded-3xl bg-[#1e1f20]/60 border border-[#3c4043]/40 p-6 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
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"
>
<div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
<p className="text-base text-[#8e918f] line-clamp-3">{nextCard.content}</p>
<div className="text-xs text-[#8e918f]">Nächste Karte…</div>
<p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
<div className="text-xs text-zinc-500">Nächste Karte…</div>
</div>
)}
@@ -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-[#1e1f20] 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 rounded-3xl bg-[#222428] border p-6 sm:p-7 shadow-card 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-[#a8dab5]/15 border border-[#a8dab5]/50 text-[#a8dab5] font-medium text-xs tracking-wide uppercase"
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"
>
Behalten 👉
</motion.div>
<motion.div
style={{ opacity: discardOpacity }}
className="pointer-events-none absolute top-5 left-5 px-3 py-1 rounded-full bg-[#f28b82]/15 border border-[#f28b82]/50 text-[#f28b82] font-medium text-xs tracking-wide uppercase"
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"
>
👈 Weg damit
</motion.div>
@@ -285,7 +285,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{priorityBadge(activeCard.priority)}
{sourceBadge(activeCard.source)}
</div>
<span className="text-xs text-[#8e918f] flex items-center gap-1">
<span className="text-xs text-zinc-400 flex items-center gap-1">
<Clock className="w-3.5 h-3.5" />
{new Date(activeCard.createdAt).toLocaleString('de-DE', {
day: '2-digit',
@@ -298,7 +298,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Card Body */}
<div className="my-auto py-3">
<p className="text-lg sm:text-xl font-normal text-[#e3e3e3] leading-relaxed break-words">
<p className="text-lg sm:text-xl font-medium text-white leading-relaxed break-words">
{activeCard.content}
</p>
</div>
@@ -310,18 +310,18 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
activeCard.tags.map((tag) => (
<span
key={tag}
className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#a8c7fa] border border-white/[0.06] text-xs flex items-center gap-1"
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"
>
<Tag className="w-2.5 h-2.5" />#{tag}
</span>
))
) : (
<span className="text-xs text-[#8e918f]">Wische links oder rechts</span>
<span className="text-xs text-zinc-400">Wische links oder rechts</span>
)}
</div>
{activeCard.dueDate && (
<span className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.06] text-xs">
<span className="px-2.5 py-0.5 rounded-full bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
📅 {activeCard.dueDate}
</span>
)}
@@ -332,9 +332,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Task Date Picker Popover */}
{showDateModal && (
<div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043] flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-2 text-xs text-[#c4c7c5]">
<Calendar className="w-4 h-4 text-[#a8c7fa]" />
<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="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>
</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-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none"
className="bg-[#16171a] text-white px-3 py-1 rounded-full border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
/>
<button
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
className="px-3.5 py-1 rounded-full bg-[#a8dab5] text-[#072711] font-medium text-xs hover:bg-[#b8e3c3]"
className="px-3.5 py-1 rounded-full bg-[#22c55e] text-white font-medium text-xs hover:bg-[#16a34a] transition-colors"
>
Speichern
</button>
@@ -356,8 +356,8 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* Convert to Shopping List Item Popover */}
{showListSelector && (
<div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043]">
<p className="text-xs text-[#8e918f] mb-2">
<div className="mt-3 p-3.5 rounded-2xl bg-[#222428] border border-white/[0.08]">
<p className="text-xs text-zinc-400 mb-2">
In welche Liste verschieben?
</p>
<div className="flex flex-wrap gap-1.5">
@@ -368,26 +368,26 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
onClick={() =>
handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
}
className="px-3 py-1.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.06] text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
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"
>
<span>{lst.icon}</span>
<span>{lst.title}</span>
</button>
))
) : (
<span className="text-xs text-[#8e918f]">Keine Listen vorhanden.</span>
<span className="text-xs text-zinc-400">Keine Listen vorhanden.</span>
)}
</div>
</div>
)}
{/* Primary Triage Action Pills (Material 3 Tonal & Outlined) */}
{/* Primary Triage Action Pills */}
<div className="mt-5 flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
{/* Swipe Left: Discard */}
<button
onClick={() => handleAction('discard')}
title="Verwerfen (Taste H oder Pfeil links)"
className="h-10 px-4 rounded-full border border-[#f28b82]/30 text-[#f28b82] hover:bg-[#f28b82]/10 font-normal text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
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"
>
<X className="w-4 h-4" />
<span>Weg damit</span>
@@ -402,21 +402,21 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
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 ${
showDateModal
? 'bg-[#282a2c] text-[#a8c7fa] border-[#a8c7fa]/40 font-medium'
: 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
? '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]'
}`}
>
<Calendar className="w-3.5 h-3.5 text-[#a8c7fa]" />
<Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Termin-To-Do</span>
</button>
{/* Convert to Workspace Document */}
<button
onClick={() => handleAction('keep', { convertTo: 'document' })}
title="In Workspace-Notiz umwandeln (Taste D)"
className="h-10 px-3.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
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"
>
<FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
<FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
<span>Als Notiz</span>
</button>
@@ -429,11 +429,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
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 ${
showListSelector
? 'bg-[#282a2c] text-[#a8dab5] border-[#a8dab5]/40 font-medium'
: 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
? '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]'
}`}
>
<ShoppingCart className="w-3.5 h-3.5 text-[#a8dab5]" />
<ShoppingCart className="w-3.5 h-3.5 text-[#22c55e]" />
<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-4 rounded-full bg-[#a8dab5] hover:bg-[#b8e3c3] text-[#072711] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
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"
>
<Check className="w-4 h-4" />
<span>Behalten</span>