Dev #3
No files matched your search
+86
-73
@@ -330,24 +330,44 @@ export const App: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-canvas text-main flex flex-col font-sans selection:bg-accent/30">
|
||||
{/* Top Header Bar */}
|
||||
<header className="sticky top-0 z-30 bg-panel border-b border-border shadow-sm">
|
||||
{/* Mobile Header: Centered Logo & Instance Title */}
|
||||
<div className="sm:hidden flex items-center justify-center relative h-11 px-4">
|
||||
<div
|
||||
{/* Top Header Bar: Floating on mobile, solid panel on desktop */}
|
||||
<header className="sticky top-0 z-30 bg-canvas/85 backdrop-blur-md sm:bg-panel sm:border-b sm:border-border sm:shadow-sm">
|
||||
{/* Mobile Header: Floating Bar with Larger Logo Left (Triage Home) & Profile Avatar Right */}
|
||||
<div className="sm:hidden flex items-center justify-between h-14 px-4 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('triage');
|
||||
}}
|
||||
className="flex items-center gap-2 cursor-pointer select-none"
|
||||
className="h-11 px-2 -ml-2 rounded-xl flex items-center gap-2.5 cursor-pointer select-none active:scale-95 transition-transform"
|
||||
title="Zur Startseite (Triage)"
|
||||
>
|
||||
<div className="w-6 h-6 bg-accent text-on-accent rounded-btn flex items-center justify-center">
|
||||
<Brain className="w-3.5 h-3.5" />
|
||||
<div className="w-8 h-8 bg-accent text-on-accent rounded-xl shadow-sm flex items-center justify-center">
|
||||
<Brain className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold text-sm text-main tracking-tight">
|
||||
<span className="font-bold text-base text-main tracking-tight">
|
||||
{authStatus.instanceName || 'MindSift'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setShowMobileProfile(true);
|
||||
}}
|
||||
className={`w-11 h-11 -mr-1.5 rounded-full flex items-center justify-center transition-transform active:scale-95 cursor-pointer ${
|
||||
activeTab === 'user_settings' || activeTab === 'admin_settings' || activeTab === 'help'
|
||||
? 'ring-2 ring-accent'
|
||||
: ''
|
||||
}`}
|
||||
title="Profil & Einstellungen"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-accent text-on-accent text-xs font-bold shadow-sm flex items-center justify-center">
|
||||
{user.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Desktop Header: 3-column Layout (Logo, InstantCaptureBar, Profile Pill) */}
|
||||
@@ -648,113 +668,106 @@ export const App: React.FC = () => {
|
||||
</ViewErrorBoundary>
|
||||
</main>
|
||||
|
||||
{/* MOBILE BOTTOM NAVIGATION BAR */}
|
||||
<nav className="sm:hidden fixed bottom-0 left-0 right-0 z-40 bg-panel/95 backdrop-blur-md border-t border-border px-3 py-1 flex items-center justify-around pb-[calc(0.4rem+env(safe-area-inset-bottom))] shadow-panel">
|
||||
{/* Tab 1: Triage */}
|
||||
{/* MOBILE BOTTOM NAVIGATION BAR (5 equal columns -> + FAB is dead-center) */}
|
||||
<nav className="sm:hidden fixed bottom-0 left-0 right-0 z-40 bg-panel/95 backdrop-blur-md border-t border-border px-2 pt-1.5 pb-[calc(0.5rem+env(safe-area-inset-bottom))] grid grid-cols-5 items-center shadow-panel">
|
||||
{/* Col 1: Triage */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('triage');
|
||||
}}
|
||||
className={`p-2 rounded-btn flex flex-col items-center justify-center transition-colors relative cursor-pointer ${
|
||||
activeTab === 'triage' ? 'text-accent' : 'text-muted hover:text-main'
|
||||
className={`min-h-[48px] rounded-xl flex flex-col items-center justify-center gap-0.5 transition-colors relative cursor-pointer active:scale-95 ${
|
||||
activeTab === 'triage' ? 'text-accent font-semibold' : 'text-muted hover:text-main'
|
||||
}`}
|
||||
title="Triage"
|
||||
>
|
||||
<Layers className="w-5 h-5" />
|
||||
{stats.inboxCount > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 min-w-[15px] h-[15px] px-0.5 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
|
||||
{stats.inboxCount}
|
||||
</span>
|
||||
)}
|
||||
<div className="relative">
|
||||
<Layers className="w-5 h-5" />
|
||||
{stats.inboxCount > 0 && (
|
||||
<span className="absolute -top-1.5 -right-2.5 min-w-[16px] h-[16px] px-1 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
|
||||
{stats.inboxCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] leading-tight">Triage</span>
|
||||
</button>
|
||||
|
||||
{/* Tab 2: Aufgaben */}
|
||||
{/* Col 2: Aufgaben */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('tasks');
|
||||
}}
|
||||
className={`p-2 rounded-btn flex flex-col items-center justify-center transition-colors relative cursor-pointer ${
|
||||
activeTab === 'tasks' ? 'text-accent' : 'text-muted hover:text-main'
|
||||
className={`min-h-[48px] rounded-xl flex flex-col items-center justify-center gap-0.5 transition-colors relative cursor-pointer active:scale-95 ${
|
||||
activeTab === 'tasks' ? 'text-accent font-semibold' : 'text-muted hover:text-main'
|
||||
}`}
|
||||
title="Aufgaben"
|
||||
>
|
||||
<CheckSquare className="w-5 h-5" />
|
||||
{stats.tasksOpenCount > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 min-w-[15px] h-[15px] px-0.5 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
|
||||
{stats.tasksOpenCount}
|
||||
</span>
|
||||
)}
|
||||
<div className="relative">
|
||||
<CheckSquare className="w-5 h-5" />
|
||||
{stats.tasksOpenCount > 0 && (
|
||||
<span className="absolute -top-1.5 -right-2.5 min-w-[16px] h-[16px] px-1 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
|
||||
{stats.tasksOpenCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] leading-tight">Aufgaben</span>
|
||||
</button>
|
||||
|
||||
{/* CENTER ACTION: + Quick-Add FAB */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(15);
|
||||
setShowMobileCapture(true);
|
||||
}}
|
||||
className="w-12 h-12 -mt-5 rounded-full bg-accent text-on-accent shadow-lg flex items-center justify-center active:scale-90 transition-transform border-4 border-panel cursor-pointer"
|
||||
title="Schnell erfassen (+)"
|
||||
>
|
||||
<Plus className="w-6 h-6 stroke-[2.5]" />
|
||||
</button>
|
||||
{/* Col 3 (EXACT CENTER): + Quick-Add FAB */}
|
||||
<div className="flex items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(15);
|
||||
setShowMobileCapture(true);
|
||||
}}
|
||||
className="w-14 h-14 -mt-6 rounded-full bg-accent text-on-accent shadow-lg flex items-center justify-center active:scale-90 transition-transform border-4 border-panel cursor-pointer"
|
||||
title="Schnell erfassen (+)"
|
||||
>
|
||||
<Plus className="w-7 h-7 stroke-[2.5]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab 3: Workspace */}
|
||||
{/* Col 4: Workspace */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('workspace');
|
||||
}}
|
||||
className={`p-2 rounded-btn flex flex-col items-center justify-center transition-colors relative cursor-pointer ${
|
||||
activeTab === 'workspace' ? 'text-accent' : 'text-muted hover:text-main'
|
||||
className={`min-h-[48px] rounded-xl flex flex-col items-center justify-center gap-0.5 transition-colors relative cursor-pointer active:scale-95 ${
|
||||
activeTab === 'workspace' ? 'text-accent font-semibold' : 'text-muted hover:text-main'
|
||||
}`}
|
||||
title="Workspace"
|
||||
>
|
||||
<FileText className="w-5 h-5" />
|
||||
{(stats.docsTodosOpenCount ?? 0) > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 min-w-[15px] h-[15px] px-0.5 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
|
||||
{stats.docsTodosOpenCount}
|
||||
</span>
|
||||
)}
|
||||
<div className="relative">
|
||||
<FileText className="w-5 h-5" />
|
||||
{(stats.docsTodosOpenCount ?? 0) > 0 && (
|
||||
<span className="absolute -top-1.5 -right-2.5 min-w-[16px] h-[16px] px-1 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
|
||||
{stats.docsTodosOpenCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] leading-tight">Workspace</span>
|
||||
</button>
|
||||
|
||||
{/* Tab 4: Listen */}
|
||||
{/* Col 5: Listen */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('lists');
|
||||
}}
|
||||
className={`p-2 rounded-btn flex flex-col items-center justify-center transition-colors relative cursor-pointer ${
|
||||
activeTab === 'lists' ? 'text-accent' : 'text-muted hover:text-main'
|
||||
className={`min-h-[48px] rounded-xl flex flex-col items-center justify-center gap-0.5 transition-colors relative cursor-pointer active:scale-95 ${
|
||||
activeTab === 'lists' ? 'text-accent font-semibold' : 'text-muted hover:text-main'
|
||||
}`}
|
||||
title="Listen"
|
||||
>
|
||||
<ShoppingCart className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{/* User Profile Avatar */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setShowMobileProfile(true);
|
||||
}}
|
||||
className={`p-1.5 rounded-btn flex items-center justify-center transition-colors cursor-pointer ${
|
||||
activeTab === 'user_settings' || activeTab === 'admin_settings' || activeTab === 'help'
|
||||
? 'ring-2 ring-accent'
|
||||
: 'opacity-85 hover:opacity-100'
|
||||
}`}
|
||||
title="Profil & Einstellungen"
|
||||
>
|
||||
<div className="w-6 h-6 rounded-full bg-accent text-on-accent text-[11px] font-bold flex items-center justify-center">
|
||||
{user.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
|
||||
</div>
|
||||
<span className="text-[10px] leading-tight">Listen</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { motion, useMotionValue, useTransform, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
X,
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
SkipForward,
|
||||
Edit3,
|
||||
Layers,
|
||||
MoreHorizontal,
|
||||
} from 'lucide-react';
|
||||
import { SharedList, Thought } from '../../lib/types';
|
||||
import { api, triggerHaptic } from '../../lib/api';
|
||||
@@ -29,11 +30,184 @@ interface TriageDeckProps {
|
||||
onFocusCapture: () => void;
|
||||
}
|
||||
|
||||
interface SwipeableQueueItemProps {
|
||||
item: Thought;
|
||||
lists: SharedList[];
|
||||
onBringToFront: (id: string) => void;
|
||||
onOpenActionSheet: (item: Thought) => void;
|
||||
onAction: (
|
||||
action: 'keep' | 'discard',
|
||||
options?: {
|
||||
convertTo?: 'task' | 'document' | 'list_item';
|
||||
targetListId?: string;
|
||||
dueDate?: string;
|
||||
thoughtOverride?: Thought;
|
||||
}
|
||||
) => void;
|
||||
}
|
||||
|
||||
const SwipeableQueueItem: React.FC<SwipeableQueueItemProps> = ({
|
||||
item,
|
||||
lists,
|
||||
onBringToFront,
|
||||
onOpenActionSheet,
|
||||
onAction,
|
||||
}) => {
|
||||
const qx = useMotionValue(0);
|
||||
const rightBgOpacity = useTransform(qx, [20, 85], [0, 1]);
|
||||
const leftBgOpacity = useTransform(qx, [-85, -20], [1, 0]);
|
||||
const didDragRef = useRef(false);
|
||||
const holdTimerRef = useRef<number | null>(null);
|
||||
const startPosRef = useRef<{ x: number; y: number } | null>(null);
|
||||
|
||||
const clearHoldTimer = () => {
|
||||
if (holdTimerRef.current !== null) {
|
||||
window.clearTimeout(holdTimerRef.current);
|
||||
holdTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden select-none">
|
||||
{/* Swipe Right Background Indicator (Als Aufgabe) */}
|
||||
<motion.div
|
||||
style={{ opacity: rightBgOpacity }}
|
||||
className="pointer-events-none absolute inset-0 bg-accent/20 flex items-center justify-start px-4 text-accent font-semibold text-xs uppercase tracking-wide"
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<CheckSquare className="w-4 h-4" />
|
||||
<span>Als Aufgabe 👉</span>
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Swipe Left Background Indicator (Wegwerfen) */}
|
||||
<motion.div
|
||||
style={{ opacity: leftBgOpacity }}
|
||||
className="pointer-events-none absolute inset-0 bg-status-err-bg flex items-center justify-end px-4 text-status-err font-semibold text-xs uppercase tracking-wide"
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span>👈 Wegwerfen</span>
|
||||
<X className="w-4 h-4" />
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
style={{ x: qx }}
|
||||
drag="x"
|
||||
dragDirectionLock
|
||||
dragConstraints={{ left: 0, right: 0 }}
|
||||
dragElastic={0.65}
|
||||
onPointerDown={(e) => {
|
||||
didDragRef.current = false;
|
||||
startPosRef.current = { x: e.clientX, y: e.clientY };
|
||||
clearHoldTimer();
|
||||
holdTimerRef.current = window.setTimeout(() => {
|
||||
if (!didDragRef.current) {
|
||||
didDragRef.current = true;
|
||||
triggerHaptic([20, 40]);
|
||||
onOpenActionSheet(item);
|
||||
}
|
||||
}, 420);
|
||||
}}
|
||||
onPointerMove={(e) => {
|
||||
if (startPosRef.current) {
|
||||
const dx = Math.abs(e.clientX - startPosRef.current.x);
|
||||
const dy = Math.abs(e.clientY - startPosRef.current.y);
|
||||
if (dx > 10 || dy > 10) {
|
||||
clearHoldTimer();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onPointerUp={clearHoldTimer}
|
||||
onPointerCancel={clearHoldTimer}
|
||||
onDragStart={() => {
|
||||
didDragRef.current = true;
|
||||
clearHoldTimer();
|
||||
}}
|
||||
onDragEnd={(_, info) => {
|
||||
clearHoldTimer();
|
||||
if (info.offset.x > 85 || info.velocity.x > 450) {
|
||||
onAction('keep', { convertTo: 'task', thoughtOverride: item });
|
||||
} else if (info.offset.x < -85 || info.velocity.x < -450) {
|
||||
onAction('discard', { thoughtOverride: item });
|
||||
}
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!didDragRef.current) {
|
||||
onBringToFront(item.id);
|
||||
}
|
||||
}}
|
||||
className="relative bg-panel px-4 py-3.5 sm:px-3.5 sm:py-2.5 min-h-[56px] sm:min-h-[44px] flex items-center justify-between gap-3 hover:bg-panel-hover transition-colors group cursor-pointer"
|
||||
>
|
||||
<div className="flex-1 min-w-0 flex items-center gap-3">
|
||||
<span className="w-2 h-2 rounded-full bg-accent flex-shrink-0" />
|
||||
<span className="text-sm sm:text-xs font-medium text-main line-clamp-2 sm:truncate">
|
||||
{item.content}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Desktop quick buttons (hidden on mobile so queue items are clean & easy to tap/swipe) */}
|
||||
<div
|
||||
className="hidden sm:flex items-center gap-1.5 flex-shrink-0"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onAction('keep', { convertTo: 'task', thoughtOverride: item })}
|
||||
title="Direkt zur Aufgabe machen"
|
||||
className="h-7 px-2.5 bg-canvas hover:bg-accent hover:text-on-accent border border-border rounded-btn text-xs text-muted flex items-center gap-1 transition-colors cursor-pointer"
|
||||
>
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
<span>Aufgabe</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onAction('keep', { convertTo: 'document', thoughtOverride: item })}
|
||||
title="Direkt als Workspace-Notiz anlegen"
|
||||
className="h-7 px-2.5 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-xs text-muted hover:text-main flex items-center gap-1 transition-colors cursor-pointer"
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Notiz</span>
|
||||
</button>
|
||||
|
||||
{lists.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
onAction('keep', {
|
||||
convertTo: 'list_item',
|
||||
targetListId: lists[0].id,
|
||||
thoughtOverride: item,
|
||||
})
|
||||
}
|
||||
title={`Direkt auf Liste "${lists[0].title}" setzen`}
|
||||
className="h-7 px-2.5 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-xs text-muted hover:text-main flex items-center gap-1 transition-colors cursor-pointer"
|
||||
>
|
||||
<ShoppingCart className="w-3.5 h-3.5 text-accent" />
|
||||
<span className="hidden md:inline">{lists[0].title}</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onAction('discard', { thoughtOverride: item })}
|
||||
title="Wegwerfen"
|
||||
className="h-7 w-7 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-muted hover:text-main flex items-center justify-center transition-colors cursor-pointer"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
deck,
|
||||
lists,
|
||||
onDeckChange,
|
||||
onOpenDocument,
|
||||
onFocusCapture,
|
||||
}) => {
|
||||
const [cards, setCards] = useState<Thought[]>(deck);
|
||||
@@ -45,6 +219,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
});
|
||||
const [showListSelector, setShowListSelector] = useState(false);
|
||||
|
||||
// Long-Press Action Sheet state (for Triage Card or Queue Item)
|
||||
const [actionSheetCard, setActionSheetCard] = useState<Thought | null>(null);
|
||||
const [sheetMode, setSheetMode] = useState<'main' | 'date' | 'list'>('main');
|
||||
const cardHoldTimerRef = useRef<number | null>(null);
|
||||
const cardPointerStartRef = useRef<{ x: number; y: number } | null>(null);
|
||||
|
||||
// Inline edit state for cleaning up a hasty Quick Dump note before converting
|
||||
const [isEditingCard, setIsEditingCard] = useState(false);
|
||||
const [editDraft, setEditDraft] = useState('');
|
||||
@@ -61,6 +241,18 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
setEditDraft(activeCard?.content || '');
|
||||
}, [activeCard?.id]);
|
||||
|
||||
const clearCardHoldTimer = () => {
|
||||
if (cardHoldTimerRef.current !== null) {
|
||||
window.clearTimeout(cardHoldTimerRef.current);
|
||||
cardHoldTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const openActionSheetForCard = (card: Thought) => {
|
||||
setSheetMode('main');
|
||||
setActionSheetCard(card);
|
||||
};
|
||||
|
||||
const x = useMotionValue(0);
|
||||
const rotate = useTransform(x, [-220, 0, 220], [-8, 0, 8]);
|
||||
const keepOpacity = useTransform(x, [25, 110], [0, 1]);
|
||||
@@ -90,6 +282,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
setLastTriaged(targetCard);
|
||||
setShowDateModal(false);
|
||||
setShowListSelector(false);
|
||||
setActionSheetCard(null);
|
||||
setIsEditingCard(false);
|
||||
x.set(0);
|
||||
|
||||
@@ -105,14 +298,23 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleSkipCard = () => {
|
||||
const handleSkipCard = (targetId?: string) => {
|
||||
if (cards.length <= 1) return;
|
||||
triggerHaptic(10);
|
||||
setShowDateModal(false);
|
||||
setShowListSelector(false);
|
||||
setActionSheetCard(null);
|
||||
setIsEditingCard(false);
|
||||
x.set(0);
|
||||
setCards((prev) => [...prev.slice(1), prev[0]]);
|
||||
if (targetId && targetId !== cards[0]?.id) {
|
||||
setCards((prev) => {
|
||||
const chosen = prev.find((c) => c.id === targetId);
|
||||
if (!chosen) return prev;
|
||||
return [...prev.filter((c) => c.id !== targetId), chosen];
|
||||
});
|
||||
} else {
|
||||
setCards((prev) => [...prev.slice(1), prev[0]]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBringToFront = (thoughtId: string) => {
|
||||
@@ -179,12 +381,14 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
} else if (e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleSkipCard();
|
||||
} else if (e.key === 'Escape' && actionSheetCard) {
|
||||
setActionSheetCard(null);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
return () => window.removeEventListener('keydown', onKeyDown);
|
||||
}, [activeCard, cards.length]);
|
||||
}, [activeCard, cards.length, actionSheetCard]);
|
||||
|
||||
const priorityBadge = (priority: string) => {
|
||||
switch (priority) {
|
||||
@@ -230,12 +434,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
if (!activeCard) {
|
||||
return (
|
||||
<div className="max-w-xl mx-auto mt-2 p-6 panel-surface text-center">
|
||||
<div className="w-11 h-11 bg-accent text-on-accent rounded-btn flex items-center justify-center mx-auto mb-3 shadow-sm">
|
||||
<Sparkles className="w-5 h-5" />
|
||||
<div className="w-12 h-12 bg-accent text-on-accent rounded-xl flex items-center justify-center mx-auto mb-3 shadow-sm">
|
||||
<Sparkles className="w-6 h-6" />
|
||||
</div>
|
||||
<h2 className="text-lg font-bold text-main mb-1">Triage-Deck ist leer</h2>
|
||||
<p className="text-muted text-xs sm:text-sm max-w-md mx-auto mb-4">
|
||||
Alle Quick Dump Notizen sind einsortiert oder verworfen. Tippe oben in die Leiste (Taste{' '}
|
||||
Alle Quick Dump Notizen sind einsortiert oder verworfen. Tippe auf das{' '}
|
||||
<strong className="text-main">+</strong> unten in der Mitte (oder Taste{' '}
|
||||
<kbd className="px-1.5 py-0.5 bg-canvas border border-border rounded-btn text-main">C</kbd>
|
||||
), um neue Gedanken reinzurotzen.
|
||||
</p>
|
||||
@@ -243,7 +448,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||
<button
|
||||
onClick={onFocusCapture}
|
||||
className="btn-primary h-8 px-4"
|
||||
className="btn-primary h-10 px-5 text-sm"
|
||||
>
|
||||
+ Quick Dump erfassen
|
||||
</button>
|
||||
@@ -251,9 +456,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
{lastTriaged && (
|
||||
<button
|
||||
onClick={handleUndo}
|
||||
className="btn-action h-8 px-3"
|
||||
className="btn-action h-10 px-4 text-sm"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5 text-accent" />
|
||||
<RotateCcw className="w-4 h-4 text-accent" />
|
||||
Letzte Aktion rückgängig
|
||||
</button>
|
||||
)}
|
||||
@@ -267,7 +472,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
{/* Top Deck Status & Undo Bar */}
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="badge-accent">
|
||||
<span className="badge-accent text-xs py-1 px-2.5">
|
||||
{cards.length} {cards.length === 1 ? 'Quick Dump' : 'Quick Dumps'} offen
|
||||
</span>
|
||||
<span className="hidden sm:inline text-xs text-faint">•</span>
|
||||
@@ -279,16 +484,16 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
{lastTriaged && (
|
||||
<button
|
||||
onClick={handleUndo}
|
||||
className="btn-action h-7 px-2.5 text-xs"
|
||||
className="btn-action h-8 px-3 text-xs"
|
||||
>
|
||||
<RotateCcw className="w-3 h-3 text-accent" />
|
||||
<RotateCcw className="w-3.5 h-3.5 text-accent" />
|
||||
Rückgängig
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card Stack Container */}
|
||||
<div className="relative h-[280px] sm:h-[300px] w-full flex items-center justify-center">
|
||||
<div className="relative h-[290px] sm:h-[300px] w-full flex items-center justify-center">
|
||||
{/* Background Preview Card */}
|
||||
{nextCard && (
|
||||
<div
|
||||
@@ -301,7 +506,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Active Draggable Card */}
|
||||
{/* Active Draggable & Long-Pressable Card */}
|
||||
<AnimatePresence mode="popLayout">
|
||||
<motion.div
|
||||
key={activeCard.id}
|
||||
@@ -310,7 +515,29 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
dragConstraints={{ left: 0, right: 0 }}
|
||||
dragElastic={0.8}
|
||||
transition={{ type: 'spring', stiffness: 350, damping: 25 }}
|
||||
onPointerDown={(e) => {
|
||||
if (isEditingCard) return;
|
||||
cardPointerStartRef.current = { x: e.clientX, y: e.clientY };
|
||||
clearCardHoldTimer();
|
||||
cardHoldTimerRef.current = window.setTimeout(() => {
|
||||
triggerHaptic([20, 40]);
|
||||
openActionSheetForCard(activeCard);
|
||||
}, 420);
|
||||
}}
|
||||
onPointerMove={(e) => {
|
||||
if (cardPointerStartRef.current) {
|
||||
const dx = Math.abs(e.clientX - cardPointerStartRef.current.x);
|
||||
const dy = Math.abs(e.clientY - cardPointerStartRef.current.y);
|
||||
if (dx > 12 || dy > 12) {
|
||||
clearCardHoldTimer();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onPointerUp={clearCardHoldTimer}
|
||||
onPointerCancel={clearCardHoldTimer}
|
||||
onDragStart={clearCardHoldTimer}
|
||||
onDragEnd={(_, info) => {
|
||||
clearCardHoldTimer();
|
||||
if (info.offset.x > 105 || info.velocity.x > 520) {
|
||||
handleAction('keep', { convertTo: 'task' });
|
||||
} else if (info.offset.x < -105 || info.velocity.x < -520) {
|
||||
@@ -320,19 +547,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
initial={{ scale: 0.97, opacity: 0, y: 10 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.93, opacity: 0 }}
|
||||
className="relative w-full h-full panel-surface p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
|
||||
className="relative w-full h-full panel-surface 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-3.5 right-3.5 px-2.5 py-1 bg-accent-dim border border-accent rounded-btn text-accent font-semibold text-xs tracking-wide uppercase"
|
||||
className="pointer-events-none absolute top-3.5 right-3.5 px-3 py-1.5 bg-accent-dim border border-accent rounded-btn text-accent font-semibold text-xs tracking-wide uppercase"
|
||||
>
|
||||
Als Aufgabe 👉
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
style={{ opacity: discardOpacity }}
|
||||
className="pointer-events-none absolute top-3.5 left-3.5 px-2.5 py-1 bg-panel-elevated border border-strong rounded-btn text-main font-semibold text-xs tracking-wide uppercase"
|
||||
className="pointer-events-none absolute top-3.5 left-3.5 px-3 py-1.5 bg-panel-elevated border border-strong rounded-btn text-main font-semibold text-xs tracking-wide uppercase"
|
||||
>
|
||||
👈 Wegwerfen
|
||||
</motion.div>
|
||||
@@ -343,19 +570,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
{priorityBadge(activeCard.priority)}
|
||||
{sourceBadge(activeCard.source)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEditDraft(activeCard.content);
|
||||
setIsEditingCard((prev) => !prev);
|
||||
}}
|
||||
title="Quick Dump Text vor dem Zuordnen anpassen"
|
||||
className="h-6 px-2 bg-canvas hover:bg-panel-hover border border-border rounded-btn text-[11px] text-muted hover:text-main flex items-center gap-1"
|
||||
>
|
||||
<Edit3 className="w-3 h-3" />
|
||||
<span>Bearbeiten</span>
|
||||
</button>
|
||||
<div
|
||||
className="flex items-center gap-2"
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<span className="text-xs text-muted flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{new Date(activeCard.createdAt).toLocaleString('de-DE', {
|
||||
@@ -365,46 +583,59 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openActionSheetForCard(activeCard)}
|
||||
title="Weitere Optionen (oder Karte gedrückt halten)"
|
||||
className="h-8 w-8 bg-canvas hover:bg-panel-hover border border-border rounded-btn text-muted hover:text-main flex items-center justify-center cursor-pointer"
|
||||
>
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Body */}
|
||||
<div className="my-auto py-2">
|
||||
<div
|
||||
className="my-auto py-2"
|
||||
onPointerDown={(e) => {
|
||||
if (isEditingCard) e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{isEditingCard ? (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-2.5">
|
||||
<textarea
|
||||
value={editDraft}
|
||||
onChange={(e) => setEditDraft(e.target.value)}
|
||||
rows={3}
|
||||
autoFocus
|
||||
className="w-full input-field p-2 text-sm resize-none"
|
||||
className="w-full input-field p-2.5 text-sm resize-none"
|
||||
/>
|
||||
<div className="flex items-center justify-end gap-1.5">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsEditingCard(false)}
|
||||
className="btn-action h-7 px-2.5 text-xs"
|
||||
className="btn-action h-9 px-3.5 text-xs"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSaveInlineEdit}
|
||||
className="btn-primary h-7 px-3 text-xs"
|
||||
className="btn-primary h-9 px-4 text-xs"
|
||||
>
|
||||
Text speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-base sm:text-xl font-medium text-main leading-relaxed break-words whitespace-pre-wrap">
|
||||
<p className="text-lg sm:text-xl font-medium text-main leading-relaxed break-words whitespace-pre-wrap">
|
||||
{activeCard.content}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card Footer: Tags & Hints */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 pt-2.5 border-t border-border">
|
||||
{/* Card Footer: Tags & Touch Gesture Hints */}
|
||||
<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) => (
|
||||
@@ -414,7 +645,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
))
|
||||
) : (
|
||||
<span className="text-xs text-faint">
|
||||
Links wischen = Wegwerfen • Rechts wischen = Als Aufgabe sichern
|
||||
👈 Wegwerfen · 👉 Aufgabe · Gedrückt halten = Mehr Optionen
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -429,9 +660,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Convert to Task with Due Date Popover */}
|
||||
{/* Desktop-only Popovers */}
|
||||
{showDateModal && (
|
||||
<div className="p-3 panel-surface flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="hidden sm:flex p-3 panel-surface flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 text-xs text-muted">
|
||||
<Calendar className="w-4 h-4 text-accent" />
|
||||
<span>Aufgabe mit Fälligkeitsdatum anlegen:</span>
|
||||
@@ -445,7 +676,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
|
||||
className="btn-primary h-7 px-3 text-xs"
|
||||
className="btn-primary h-8 px-3 text-xs"
|
||||
>
|
||||
Als Termin-Aufgabe speichern
|
||||
</button>
|
||||
@@ -453,9 +684,8 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Convert to Shared List Item Popover */}
|
||||
{showListSelector && (
|
||||
<div className="p-3 panel-surface">
|
||||
<div className="hidden sm:block p-3 panel-surface">
|
||||
<p className="text-xs text-muted mb-2">
|
||||
Quick Dump direkt einer Liste zuordnen:
|
||||
</p>
|
||||
@@ -467,7 +697,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
onClick={() =>
|
||||
handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
|
||||
}
|
||||
className="btn-action h-7 px-2.5 text-xs"
|
||||
className="btn-action h-8 px-3 text-xs"
|
||||
>
|
||||
<span>{lst.icon}</span>
|
||||
<span>{lst.title}</span>
|
||||
@@ -480,24 +710,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Primary Triage Decision Bar */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-6 gap-1.5">
|
||||
{/* 1. Swipe Left: Discard */}
|
||||
{/* Primary Triage Decision Bar: Hidden on mobile (handled via Swipe + Long-Press), shown on Desktop */}
|
||||
<div className="hidden sm:grid sm:grid-cols-6 gap-1.5">
|
||||
<button
|
||||
onClick={() => handleAction('discard')}
|
||||
title="Wegwerfen (Taste H oder Pfeil links)"
|
||||
className="btn-action h-8 px-2.5 justify-center"
|
||||
className="btn-action h-9 px-2.5 justify-center"
|
||||
>
|
||||
<X className="w-3.5 h-3.5 text-muted" />
|
||||
<span>Wegwerfen</span>
|
||||
</button>
|
||||
|
||||
{/* 2. Skip / Later */}
|
||||
<button
|
||||
onClick={handleSkipCard}
|
||||
onClick={() => handleSkipCard()}
|
||||
disabled={cards.length <= 1}
|
||||
title="Später entscheiden – ans Ende schieben (Leertaste)"
|
||||
className={`btn-action h-8 px-2.5 justify-center ${
|
||||
className={`btn-action h-9 px-2.5 justify-center ${
|
||||
cards.length <= 1 ? 'opacity-40 cursor-not-allowed' : ''
|
||||
}`}
|
||||
>
|
||||
@@ -505,14 +733,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
<span>Später</span>
|
||||
</button>
|
||||
|
||||
{/* 3. Assign to List */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowDateModal(false);
|
||||
setShowListSelector((prev) => !prev);
|
||||
}}
|
||||
title="Auf eine geteilte Liste setzen"
|
||||
className={`btn-action h-8 px-2.5 justify-center ${
|
||||
className={`btn-action h-9 px-2.5 justify-center ${
|
||||
showListSelector ? 'border-accent text-accent bg-accent-dim' : ''
|
||||
}`}
|
||||
>
|
||||
@@ -520,24 +747,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
<span>Auf Liste</span>
|
||||
</button>
|
||||
|
||||
{/* 4. Convert to Workspace Note */}
|
||||
<button
|
||||
onClick={() => handleAction('keep', { convertTo: 'document' })}
|
||||
title="In eine Workspace-Notiz umwandeln (Taste D)"
|
||||
className="btn-action h-8 px-2.5 justify-center"
|
||||
className="btn-action h-9 px-2.5 justify-center"
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Als Notiz</span>
|
||||
</button>
|
||||
|
||||
{/* 5. Task with Date */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowListSelector(false);
|
||||
setShowDateModal((prev) => !prev);
|
||||
}}
|
||||
title="Als Aufgabe mit Fälligkeitsdatum (Taste T)"
|
||||
className={`btn-action h-8 px-2.5 justify-center ${
|
||||
className={`btn-action h-9 px-2.5 justify-center ${
|
||||
showDateModal ? 'border-accent text-accent bg-accent-dim' : ''
|
||||
}`}
|
||||
>
|
||||
@@ -545,103 +770,260 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
<span>Mit Termin</span>
|
||||
</button>
|
||||
|
||||
{/* 6. Swipe Right: Immediate Task */}
|
||||
<button
|
||||
onClick={() => handleAction('keep', { convertTo: 'task' })}
|
||||
title="Sofort als Aufgabe übernehmen (Taste L oder Pfeil rechts)"
|
||||
className="btn-primary h-8 px-3 justify-center"
|
||||
className="btn-primary h-9 px-3 justify-center"
|
||||
>
|
||||
<CheckSquare className="w-3.5 h-3.5" />
|
||||
<span>Als Aufgabe</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Waiting Quick Dump Queue List */}
|
||||
{/* Waiting Quick Dump Queue List (Touch-sized & Swipeable Left/Right) */}
|
||||
{cards.length > 1 && (
|
||||
<div className="pt-2">
|
||||
<div className="flex items-center justify-between mb-1.5 px-0.5">
|
||||
<div className="flex items-center justify-between mb-2 px-1">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-muted flex items-center gap-1.5">
|
||||
<Layers className="w-3.5 h-3.5 text-accent" />
|
||||
Warteschlange ({cards.length - 1} weitere Quick Dumps)
|
||||
Warteschlange ({cards.length - 1})
|
||||
</span>
|
||||
<span className="text-[11px] text-faint">
|
||||
Klicken zum Vorholen oder direkt zuordnen
|
||||
Tippen = Vorholen · 👈 Wegwerfen · 👉 Aufgabe
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="panel-surface divide-y divide-border max-h-60 overflow-y-auto">
|
||||
<div className="panel-surface divide-y divide-border max-h-80 overflow-y-auto overflow-x-hidden">
|
||||
{cards.slice(1).map((item) => (
|
||||
<div
|
||||
<SwipeableQueueItem
|
||||
key={item.id}
|
||||
className="px-3 py-2 flex items-center justify-between gap-2 hover:bg-panel-hover transition-colors group"
|
||||
item={item}
|
||||
lists={lists}
|
||||
onBringToFront={handleBringToFront}
|
||||
onOpenActionSheet={openActionSheetForCard}
|
||||
onAction={handleAction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* LONG-PRESS / MORE OPTIONS ACTION SHEET (For Triage Card & Queue Items) */}
|
||||
{actionSheetCard && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-xs p-0 sm:p-4 animate-in fade-in duration-150"
|
||||
onClick={() => setActionSheetCard(null)}
|
||||
>
|
||||
<div
|
||||
className="w-full sm:max-w-md bg-panel border-t sm:border border-border rounded-t-2xl sm:rounded-2xl shadow-panel p-4 pb-[calc(1.5rem+env(safe-area-inset-bottom))] sm:pb-4 space-y-3 animate-in slide-in-from-bottom duration-200"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Sheet Header with Preview */}
|
||||
<div className="flex items-start justify-between gap-3 pb-2.5 border-b border-border">
|
||||
<div className="min-w-0">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-accent">
|
||||
Quick Dump zuordnen
|
||||
</span>
|
||||
<p className="text-sm font-medium text-main line-clamp-2 mt-0.5">
|
||||
{actionSheetCard.content}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActionSheetCard(null)}
|
||||
className="p-1.5 text-faint hover:text-main rounded-btn cursor-pointer"
|
||||
>
|
||||
<div
|
||||
onClick={() => handleBringToFront(item.id)}
|
||||
className="flex-1 min-w-0 cursor-pointer flex items-center gap-2"
|
||||
>
|
||||
<span className="w-1.5 h-1.5 bg-accent flex-shrink-0" />
|
||||
<span className="text-xs text-muted truncate group-hover:text-main">
|
||||
{item.content}
|
||||
</span>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{sheetMode === 'main' && (
|
||||
<div className="space-y-2">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSheetMode('list')}
|
||||
className="min-h-[52px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border text-left flex items-center gap-3 transition-colors cursor-pointer active:scale-98"
|
||||
>
|
||||
<ShoppingCart className="w-5 h-5 text-accent flex-shrink-0" />
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-main">Auf Liste</div>
|
||||
<div className="text-[11px] text-muted">Einkauf / Geteilt</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSheetMode('date')}
|
||||
className="min-h-[52px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border text-left flex items-center gap-3 transition-colors cursor-pointer active:scale-98"
|
||||
>
|
||||
<Calendar className="w-5 h-5 text-accent flex-shrink-0" />
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-main">Mit Termin</div>
|
||||
<div className="text-[11px] text-muted">Datum wählen</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleAction('keep', {
|
||||
convertTo: 'document',
|
||||
thoughtOverride: actionSheetCard,
|
||||
})
|
||||
}
|
||||
className="min-h-[52px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border text-left flex items-center gap-3 transition-colors cursor-pointer active:scale-98"
|
||||
>
|
||||
<FileText className="w-5 h-5 text-accent flex-shrink-0" />
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-main">Als Notiz</div>
|
||||
<div className="text-[11px] text-muted">Im Workspace</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={cards.length <= 1}
|
||||
onClick={() => handleSkipCard(actionSheetCard.id)}
|
||||
className={`min-h-[52px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border text-left flex items-center gap-3 transition-colors cursor-pointer active:scale-98 ${
|
||||
cards.length <= 1 ? 'opacity-40 cursor-not-allowed' : ''
|
||||
}`}
|
||||
>
|
||||
<SkipForward className="w-5 h-5 text-muted flex-shrink-0" />
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-main">Später</div>
|
||||
<div className="text-[11px] text-muted">Ans Ende schieben</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{/* Edit Text Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const target = actionSheetCard;
|
||||
setActionSheetCard(null);
|
||||
if (target.id !== activeCard.id) {
|
||||
handleBringToFront(target.id);
|
||||
}
|
||||
setEditDraft(target.content);
|
||||
setIsEditingCard(true);
|
||||
}}
|
||||
className="w-full min-h-[46px] px-3.5 py-2 rounded-xl bg-canvas hover:bg-panel-elevated border border-border flex items-center justify-center gap-2 text-sm font-medium text-main transition-colors cursor-pointer"
|
||||
>
|
||||
<Edit3 className="w-4 h-4 text-accent" />
|
||||
<span>Text vor dem Zuordnen bearbeiten</span>
|
||||
</button>
|
||||
|
||||
{/* Primary Swipe Equivalents */}
|
||||
<div className="grid grid-cols-2 gap-2 pt-1 border-t border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleAction('keep', { convertTo: 'task', thoughtOverride: item })
|
||||
handleAction('discard', { thoughtOverride: actionSheetCard })
|
||||
}
|
||||
title="Direkt zur Aufgabe machen"
|
||||
className="h-6 px-2 bg-canvas hover:bg-accent hover:text-on-accent border border-border rounded-btn text-[11px] text-muted flex items-center gap-1 transition-colors"
|
||||
className="min-h-[46px] px-3 py-2 rounded-xl bg-status-err-bg border border-status-err/30 text-status-err text-sm font-semibold flex items-center justify-center gap-2 cursor-pointer"
|
||||
>
|
||||
<Check className="w-3 h-3" />
|
||||
<span className="hidden sm:inline">Aufgabe</span>
|
||||
<X className="w-4 h-4" />
|
||||
<span>Wegwerfen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleAction('keep', { convertTo: 'document', thoughtOverride: item })
|
||||
handleAction('keep', {
|
||||
convertTo: 'task',
|
||||
thoughtOverride: actionSheetCard,
|
||||
})
|
||||
}
|
||||
title="Direkt als Workspace-Notiz anlegen"
|
||||
className="h-6 px-2 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-[11px] text-muted hover:text-main flex items-center gap-1 transition-colors"
|
||||
className="min-h-[46px] px-3 py-2 rounded-xl bg-accent text-on-accent text-sm font-semibold flex items-center justify-center gap-2 cursor-pointer"
|
||||
>
|
||||
<FileText className="w-3 h-3 text-accent" />
|
||||
<span className="hidden sm:inline">Notiz</span>
|
||||
</button>
|
||||
|
||||
{lists.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleAction('keep', {
|
||||
convertTo: 'list_item',
|
||||
targetListId: lists[0].id,
|
||||
thoughtOverride: item,
|
||||
})
|
||||
}
|
||||
title={`Direkt auf Liste "${lists[0].title}" setzen`}
|
||||
className="h-6 px-2 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-[11px] text-muted hover:text-main flex items-center gap-1 transition-colors"
|
||||
>
|
||||
<ShoppingCart className="w-3 h-3 text-accent" />
|
||||
<span className="hidden md:inline">{lists[0].title}</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleAction('discard', { thoughtOverride: item })}
|
||||
title="Wegwerfen"
|
||||
className="h-6 w-6 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-muted hover:text-main flex items-center justify-center transition-colors"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
<CheckSquare className="w-4 h-4" />
|
||||
<span>Als Aufgabe</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
|
||||
{sheetMode === 'date' && (
|
||||
<div className="space-y-3">
|
||||
<label className="block text-xs font-medium text-muted">
|
||||
Fälligkeitsdatum für die Aufgabe wählen:
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={taskDueDate}
|
||||
onChange={(e) => setTaskDueDate(e.target.value)}
|
||||
className="input-field w-full h-11 px-3 text-sm"
|
||||
/>
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSheetMode('main')}
|
||||
className="btn-action flex-1 h-11 text-sm"
|
||||
>
|
||||
Zurück
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleAction('keep', {
|
||||
convertTo: 'task',
|
||||
dueDate: taskDueDate,
|
||||
thoughtOverride: actionSheetCard,
|
||||
})
|
||||
}
|
||||
className="btn-primary flex-1 h-11 text-sm font-semibold"
|
||||
>
|
||||
Mit Termin speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sheetMode === 'list' && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-medium text-muted">
|
||||
Auf welche Liste soll dieser Punkt gesetzt werden?
|
||||
</p>
|
||||
<div className="max-h-60 overflow-y-auto space-y-1.5">
|
||||
{lists.length > 0 ? (
|
||||
lists.map((lst) => (
|
||||
<button
|
||||
key={lst.id}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleAction('keep', {
|
||||
convertTo: 'list_item',
|
||||
targetListId: lst.id,
|
||||
thoughtOverride: actionSheetCard,
|
||||
})
|
||||
}
|
||||
className="w-full min-h-[48px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border flex items-center gap-3 text-sm font-medium text-main transition-colors cursor-pointer"
|
||||
>
|
||||
<span className="text-lg">{lst.icon}</span>
|
||||
<span>{lst.title}</span>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="py-4 text-center text-xs text-muted">
|
||||
Keine Listen vorhanden.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSheetMode('main')}
|
||||
className="btn-action w-full h-10 text-xs"
|
||||
>
|
||||
Zurück
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user