style: overhaul design to authentic Google Gemini Material 3 Dark theme
This commit is contained in:
sandrodach committed
1 parent
10323867e9
commit
31aa43c460
11 files changed
+413
-444
No files matched your search
@@ -97,10 +97,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setFilter('open')}
|
||||
className={`h-10 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-colors ${
|
||||
filter === 'open'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
|
||||
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
|
||||
}`}
|
||||
>
|
||||
Offene Aufgaben ({openTasks.length})
|
||||
@@ -108,10 +108,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
|
||||
<button
|
||||
onClick={() => setFilter('done')}
|
||||
className={`h-10 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-colors ${
|
||||
filter === 'done'
|
||||
? 'bg-[#81c995] text-[#0b0f19] font-semibold'
|
||||
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
? 'bg-[#282a2c] text-[#a8dab5] border border-[#a8dab5]/30'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
|
||||
}`}
|
||||
>
|
||||
Erledigt ({doneTasks.length})
|
||||
@@ -119,10 +119,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
|
||||
<button
|
||||
onClick={() => setFilter('discarded')}
|
||||
className={`h-10 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-colors ${
|
||||
filter === 'discarded'
|
||||
? 'bg-[#f28b82] text-[#0b0f19] font-semibold'
|
||||
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
? 'bg-[#282a2c] text-[#f28b82] border border-[#f28b82]/30'
|
||||
: 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
|
||||
}`}
|
||||
>
|
||||
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-9 px-4 rounded-full bg-[#f28b82]/15 hover:bg-[#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-[#f28b82]/10 hover:bg-[#f28b82]/20 border border-[#f28b82]/25 text-[#f28b82] 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,32 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="p-8 text-center text-[#9aa0a6] text-sm">Lade Aufgaben…</div>
|
||||
<div className="p-8 text-center text-[#8e918f] text-sm">Lade Aufgaben…</div>
|
||||
) : filter === 'discarded' ? (
|
||||
<div className="space-y-2.5">
|
||||
{discarded.length === 0 ? (
|
||||
<div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
|
||||
<div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
|
||||
Keine verworfenen Gedanken im Papierkorb.
|
||||
</div>
|
||||
) : (
|
||||
discarded.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="p-4 rounded-3xl bg-[#1e1f20] gemini-border flex items-center justify-between gap-4"
|
||||
className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center justify-between gap-4"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm text-[#9aa0a6] line-through truncate">{item.content}</p>
|
||||
<p className="text-sm text-[#8e918f] 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] text-xs text-[#8ab4f8] flex items-center gap-1"
|
||||
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"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeletePermanent(item.id)}
|
||||
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#f28b82] flex items-center justify-center"
|
||||
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>
|
||||
@@ -178,33 +178,33 @@ 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-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
|
||||
<div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
|
||||
{filter === 'open'
|
||||
? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen!'
|
||||
? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen.'
|
||||
: 'Noch keine erledigten Aufgaben.'}
|
||||
</div>
|
||||
) : (
|
||||
(filter === 'open' ? openTasks : doneTasks).map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="p-4 sm:p-5 rounded-3xl bg-[#1e1f20] hover:bg-[#242628] gemini-border flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors"
|
||||
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-[#8ab4f8] hover:scale-110 transition-transform"
|
||||
className="mt-0.5 flex-shrink-0 text-[#8e918f] hover:text-[#a8c7fa] transition-colors"
|
||||
>
|
||||
{task.isCompleted ? (
|
||||
<CheckCircle2 className="w-5 h-5 text-[#81c995]" />
|
||||
<CheckCircle2 className="w-5 h-5 text-[#a8dab5]" />
|
||||
) : (
|
||||
<Circle className="w-5 h-5 text-[#9aa0a6] hover:text-[#8ab4f8]" />
|
||||
<Circle className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<p
|
||||
className={`text-sm sm:text-base font-medium break-words ${
|
||||
task.isCompleted ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]'
|
||||
className={`text-sm sm:text-base font-normal break-words ${
|
||||
task.isCompleted ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
|
||||
}`}
|
||||
>
|
||||
{task.content}
|
||||
@@ -212,21 +212,21 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
|
||||
<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]/20 text-[#f28b82] text-xs flex items-center gap-1">
|
||||
<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-[#8ab4f8]/20 text-[#8ab4f8] text-xs">
|
||||
<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-[#8ab4f8] text-xs flex items-center gap-1"
|
||||
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" />#{tag}
|
||||
<Tag className="w-2.5 h-2.5 text-[#8e918f]" />#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
@@ -236,28 +236,28 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
{/* 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-[#8ab4f8] absolute left-3 pointer-events-none" />
|
||||
<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 gemini-border focus:outline-none focus:border-[#8ab4f8]"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleConvertToDoc(task)}
|
||||
title="Im Workspace als Projekt-Dokument vertiefen"
|
||||
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323538] text-xs text-[#c58af9] flex items-center gap-1"
|
||||
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" />
|
||||
<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 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center"
|
||||
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>
|
||||
|
||||
@@ -49,13 +49,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
const nextCard = cards[1];
|
||||
|
||||
const x = useMotionValue(0);
|
||||
const rotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
|
||||
const keepOpacity = useTransform(x, [25, 130], [0, 1]);
|
||||
const discardOpacity = useTransform(x, [-130, -25], [1, 0]);
|
||||
const rotate = useTransform(x, [-220, 0, 220], [-10, 0, 10]);
|
||||
const keepOpacity = useTransform(x, [25, 120], [0, 1]);
|
||||
const discardOpacity = useTransform(x, [-120, -25], [1, 0]);
|
||||
const cardBorderColor = useTransform(
|
||||
x,
|
||||
[-140, 0, 140],
|
||||
['rgba(242, 139, 130, 0.65)', 'rgba(255, 255, 255, 0.08)', 'rgba(129, 201, 149, 0.65)']
|
||||
['rgba(242, 139, 130, 0.6)', '#3c4043', 'rgba(168, 218, 181, 0.6)']
|
||||
);
|
||||
|
||||
const handleAction = async (
|
||||
@@ -69,7 +69,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
if (!activeCard) return;
|
||||
|
||||
const current = activeCard;
|
||||
triggerHaptic(action === 'keep' ? [12, 25] : 18);
|
||||
triggerHaptic(action === 'keep' ? [10, 20] : 15);
|
||||
|
||||
// Optimistic removal from deck
|
||||
setCards((prev) => prev.slice(1));
|
||||
@@ -134,25 +134,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
switch (priority) {
|
||||
case 'urgent':
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40">
|
||||
🚨 Dringend
|
||||
<span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/30">
|
||||
Dringend
|
||||
</span>
|
||||
);
|
||||
case 'high':
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40">
|
||||
⚡ Priorität Hoch
|
||||
</span>
|
||||
);
|
||||
case 'low':
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
|
||||
Später / Niedrig
|
||||
<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>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
|
||||
<span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#282a2c] text-[#8e918f] border border-white/[0.06]">
|
||||
Gedanke
|
||||
</span>
|
||||
);
|
||||
@@ -162,15 +156,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
const sourceBadge = (source: string) => {
|
||||
if (source === 'voice') {
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-full text-xs bg-[#c58af9]/15 text-[#c58af9] flex items-center gap-1">
|
||||
<Mic className="w-3 h-3" /> Sprachnotiz
|
||||
<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">
|
||||
<Mic className="w-3 h-3" /> Diktat
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (source === 'webhook') {
|
||||
return (
|
||||
<span className="px-3 py-1 rounded-full text-xs bg-[#81c995]/15 text-[#81c995] flex items-center gap-1">
|
||||
<Webhook className="w-3 h-3" /> Smarthome Webhook
|
||||
<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">
|
||||
<Webhook className="w-3 h-3" /> Webhook
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -179,30 +173,30 @@ 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] gemini-border text-center shadow-card-depth">
|
||||
<div className="w-16 h-16 rounded-full bg-[#81c995]/15 border border-[#81c995]/30 flex items-center justify-center mx-auto mb-5">
|
||||
<Sparkles className="w-8 h-8 text-[#81c995]" />
|
||||
<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>
|
||||
<h2 className="text-2xl font-bold text-[#e3e3e3] mb-2">Inbox Zero erreicht!</h2>
|
||||
<p className="text-[#9aa0a6] text-sm sm:text-base max-w-md mx-auto mb-6">
|
||||
Dein Kopf ist komplett frei. Alle eingefrorenen Gedanken wurden gesichtet, verworfen oder in echte Projekte und Aufgaben verwandelt.
|
||||
<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">
|
||||
Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||||
<div className="flex flex-wrap items-center justify-center gap-2.5">
|
||||
<button
|
||||
onClick={onFocusCapture}
|
||||
className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors"
|
||||
className="h-9 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#b8d4ff] transition-colors"
|
||||
>
|
||||
+ Neuen Gedanken einfrieren
|
||||
+ Neuer Gedanke
|
||||
</button>
|
||||
|
||||
{lastTriaged && (
|
||||
<button
|
||||
onClick={handleUndo}
|
||||
className="h-11 px-5 rounded-full bg-[#282a2c] text-[#e3e3e3] hover:bg-[#333639] text-sm flex items-center gap-2 transition-colors"
|
||||
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"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 text-[#8ab4f8]" />
|
||||
Letzten Swipe rückgängig machen
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
Rückgängig
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -213,38 +207,39 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
return (
|
||||
<div className="max-w-xl mx-auto select-none">
|
||||
{/* Top Deck Status & Undo Bar */}
|
||||
<div className="flex items-center justify-between mb-4 px-2">
|
||||
<div className="flex items-center justify-between mb-3 px-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="px-3.5 py-1 rounded-full bg-[#1e1f20] gemini-border text-xs font-medium text-[#8ab4f8]">
|
||||
🃏 Noch {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} im Deck
|
||||
<span className="text-xs text-[#8e918f]">
|
||||
{cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend
|
||||
</span>
|
||||
<span className="hidden sm:flex items-center gap-1 text-xs text-[#5f6368]">
|
||||
<Keyboard className="w-3.5 h-3.5" /> Pfeiltasten ← / → oder H / L
|
||||
<span className="hidden sm:inline text-xs text-[#8e918f]">•</span>
|
||||
<span className="hidden sm:flex items-center gap-1 text-xs text-[#8e918f]">
|
||||
<Keyboard className="w-3 h-3" /> H / L oder ← / →
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{lastTriaged && (
|
||||
<button
|
||||
onClick={handleUndo}
|
||||
className="px-3.5 py-1 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#9aa0a6] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
|
||||
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"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5 text-[#8ab4f8]" />
|
||||
<RotateCcw className="w-3 h-3 text-[#a8c7fa]" />
|
||||
Rückgängig
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card Stack Container */}
|
||||
<div className="relative h-[340px] sm:h-[360px] w-full flex items-center justify-center">
|
||||
<div className="relative h-[320px] sm:h-[340px] w-full flex items-center justify-center">
|
||||
{/* Background Preview Card */}
|
||||
{nextCard && (
|
||||
<div
|
||||
key={nextCard.id + '-preview'}
|
||||
className="absolute inset-x-4 top-5 bottom-0 rounded-3xl bg-[#18191b] gemini-border p-6 opacity-50 scale-[0.95] pointer-events-none flex flex-col justify-between"
|
||||
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"
|
||||
>
|
||||
<div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
|
||||
<p className="text-lg text-[#9aa0a6] line-clamp-3">{nextCard.content}</p>
|
||||
<div className="text-xs text-[#5f6368]">Nächste Karte…</div>
|
||||
<p className="text-base text-[#8e918f] line-clamp-3">{nextCard.content}</p>
|
||||
<div className="text-xs text-[#8e918f]">Nächste Karte…</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -255,7 +250,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
style={{ x, rotate, borderColor: cardBorderColor }}
|
||||
drag="x"
|
||||
dragConstraints={{ left: 0, right: 0 }}
|
||||
dragElastic={0.85}
|
||||
dragElastic={0.8}
|
||||
transition={{ type: 'spring', stiffness: 350, damping: 25 }}
|
||||
onDragEnd={(_, info) => {
|
||||
if (info.offset.x > 110 || info.velocity.x > 550) {
|
||||
@@ -264,22 +259,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
handleAction('discard');
|
||||
}
|
||||
}}
|
||||
initial={{ scale: 0.94, opacity: 0, y: 16 }}
|
||||
initial={{ scale: 0.96, opacity: 0, y: 12 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
className="relative w-full h-full rounded-3xl bg-[#1e1f20] border p-6 sm:p-8 shadow-card-depth cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
|
||||
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"
|
||||
>
|
||||
{/* Dynamic Swipe Overlays */}
|
||||
<motion.div
|
||||
style={{ opacity: keepOpacity }}
|
||||
className="pointer-events-none absolute top-6 right-6 px-4 py-1.5 rounded-full bg-[#81c995]/20 border-2 border-[#81c995] text-[#81c995] font-bold text-xs tracking-wider uppercase"
|
||||
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"
|
||||
>
|
||||
Behalten 👉
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
style={{ opacity: discardOpacity }}
|
||||
className="pointer-events-none absolute top-6 left-6 px-4 py-1.5 rounded-full bg-[#f28b82]/20 border-2 border-[#f28b82] text-[#f28b82] font-bold text-xs tracking-wider uppercase"
|
||||
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"
|
||||
>
|
||||
👈 Weg damit
|
||||
</motion.div>
|
||||
@@ -290,7 +285,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
{priorityBadge(activeCard.priority)}
|
||||
{sourceBadge(activeCard.source)}
|
||||
</div>
|
||||
<span className="text-xs text-[#5f6368] flex items-center gap-1">
|
||||
<span className="text-xs text-[#8e918f] flex items-center gap-1">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
{new Date(activeCard.createdAt).toLocaleString('de-DE', {
|
||||
day: '2-digit',
|
||||
@@ -301,9 +296,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Card Body: The Thought */}
|
||||
<div className="my-auto py-4">
|
||||
<p className="text-xl sm:text-2xl font-medium text-[#e3e3e3] leading-relaxed break-words">
|
||||
{/* Card Body */}
|
||||
<div className="my-auto py-3">
|
||||
<p className="text-lg sm:text-xl font-normal text-[#e3e3e3] leading-relaxed break-words">
|
||||
{activeCard.content}
|
||||
</p>
|
||||
</div>
|
||||
@@ -315,18 +310,18 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
activeCard.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-3 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1"
|
||||
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"
|
||||
>
|
||||
<Tag className="w-3 h-3" />#{tag}
|
||||
<Tag className="w-2.5 h-2.5" />#{tag}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-xs text-[#5f6368]">Wische links zum Verwerfen, rechts zum Behalten</span>
|
||||
<span className="text-xs text-[#8e918f]">Wische links oder rechts</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{activeCard.dueDate && (
|
||||
<span className="px-3 py-0.5 rounded-full bg-[#8ab4f8]/15 text-[#8ab4f8] text-xs">
|
||||
<span className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.06] text-xs">
|
||||
📅 {activeCard.dueDate}
|
||||
</span>
|
||||
)}
|
||||
@@ -337,23 +332,23 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
|
||||
{/* Convert to Task Date Picker Popover */}
|
||||
{showDateModal && (
|
||||
<div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 text-sm text-[#e3e3e3]">
|
||||
<Calendar className="w-4 h-4 text-[#8ab4f8]" />
|
||||
<span>Als To-Do mit Fälligkeitsdatum anlegen:</span>
|
||||
<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]" />
|
||||
<span>Fälligkeitsdatum für Aufgabe:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={taskDueDate}
|
||||
onChange={(e) => setTaskDueDate(e.target.value)}
|
||||
className="bg-[#1e1f20] text-[#e3e3e3] px-3.5 py-1.5 rounded-full gemini-border text-xs focus:outline-none"
|
||||
className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
|
||||
className="px-4 py-1.5 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs hover:opacity-90"
|
||||
className="px-3.5 py-1 rounded-full bg-[#a8dab5] text-[#072711] font-medium text-xs hover:bg-[#b8e3c3]"
|
||||
>
|
||||
Aufgabe speichern
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -361,11 +356,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
|
||||
{/* Convert to Shopping List Item Popover */}
|
||||
{showListSelector && (
|
||||
<div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border">
|
||||
<p className="text-xs text-[#9aa0a6] mb-2.5">
|
||||
In welche geteilte Liste soll dieser Gedanke verschoben werden?
|
||||
<div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043]">
|
||||
<p className="text-xs text-[#8e918f] mb-2">
|
||||
In welche Liste verschieben?
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{lists.length > 0 ? (
|
||||
lists.map((lst) => (
|
||||
<button
|
||||
@@ -373,26 +368,26 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
onClick={() =>
|
||||
handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
|
||||
}
|
||||
className="px-4 py-2 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
|
||||
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"
|
||||
>
|
||||
<span>{lst.icon}</span>
|
||||
<span>{lst.title}</span>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<span className="text-xs text-[#5f6368]">Noch keine Listen vorhanden.</span>
|
||||
<span className="text-xs text-[#8e918f]">Keine Listen vorhanden.</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Primary Triage Action Pills */}
|
||||
<div className="mt-6 flex flex-wrap items-center justify-center gap-2.5 sm:gap-3">
|
||||
{/* Primary Triage Action Pills (Material 3 Tonal & Outlined) */}
|
||||
<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-12 px-5 rounded-full bg-[#1e1f20] hover:bg-[#f28b82]/20 border border-[#f28b82]/30 text-[#f28b82] font-medium text-sm flex items-center gap-2 transition-all active:scale-95"
|
||||
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"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
<span>Weg damit</span>
|
||||
@@ -405,24 +400,24 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
setShowDateModal((prev) => !prev);
|
||||
}}
|
||||
title="Als Aufgabe mit Datum (Taste T)"
|
||||
className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
|
||||
className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
|
||||
showDateModal
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
|
||||
: 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
|
||||
? 'bg-[#282a2c] text-[#a8c7fa] border-[#a8c7fa]/40 font-medium'
|
||||
: 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
|
||||
}`}
|
||||
>
|
||||
<Calendar className="w-4 h-4 text-[#8ab4f8]" />
|
||||
<Calendar className="w-3.5 h-3.5 text-[#a8c7fa]" />
|
||||
<span>Termin-To-Do</span>
|
||||
</button>
|
||||
|
||||
{/* Convert to Workspace Document */}
|
||||
<button
|
||||
onClick={() => handleAction('keep', { convertTo: 'document' })}
|
||||
title="In ein Workspace-Dokument verwandeln (Taste D)"
|
||||
className="h-12 px-4 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-all"
|
||||
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"
|
||||
>
|
||||
<FileText className="w-4 h-4 text-[#c58af9]" />
|
||||
<span>Als Projekt-Notiz</span>
|
||||
<FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
|
||||
<span>Als Notiz</span>
|
||||
</button>
|
||||
|
||||
{/* Convert to Shared Shopping List Item */}
|
||||
@@ -431,22 +426,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
setShowDateModal(false);
|
||||
setShowListSelector((prev) => !prev);
|
||||
}}
|
||||
title="Auf eine geteilte Einkaufsliste setzen"
|
||||
className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
|
||||
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-[#8ab4f8] text-[#0b0f19] font-semibold'
|
||||
: 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
|
||||
? 'bg-[#282a2c] text-[#a8dab5] border-[#a8dab5]/40 font-medium'
|
||||
: 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
|
||||
}`}
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4 text-[#81c995]" />
|
||||
<ShoppingCart className="w-3.5 h-3.5 text-[#a8dab5]" />
|
||||
<span>Auf Liste</span>
|
||||
</button>
|
||||
|
||||
{/* Swipe Right: Keep */}
|
||||
<button
|
||||
onClick={() => handleAction('keep')}
|
||||
title="Behalten & als Aufgabe sichern (Taste L oder Pfeil rechts)"
|
||||
className="h-12 px-5 rounded-full bg-[#81c995]/20 hover:bg-[#81c995]/30 border border-[#81c995]/40 text-[#81c995] font-semibold text-sm flex items-center gap-2 transition-all active:scale-95"
|
||||
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"
|
||||
>
|
||||
<Check className="w-4 h-4" />
|
||||
<span>Behalten</span>
|
||||
|
||||
Reference in new issue
Block a user