feat(triage): implement Quick Dump notes, direct task/list assignment, and fix stale JWT user resolution
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 53s

This commit is contained in:
sandrodach committed 2026-10-24 21:05:31 +02:00
1 parent 2d4a2bde41
commit d6bc2976d9
7 files changed
+653 -154

No files matched your search

+13 -4
View File
@@ -39,6 +39,7 @@ export const App: React.FC = () => {
const [activeTab, setActiveTab] = useState<ActiveTab>('triage'); const [activeTab, setActiveTab] = useState<ActiveTab>('triage');
const [selectedDocId, setSelectedDocId] = useState<string | null>(null); const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
const [captureFocusCount, setCaptureFocusCount] = useState(0); const [captureFocusCount, setCaptureFocusCount] = useState(0);
const [refreshRevision, setRefreshRevision] = useState(0);
// Profile & Auth Modal State (aligned with Template Screen 2) // Profile & Auth Modal State (aligned with Template Screen 2)
const [showProfileModal, setShowProfileModal] = useState(false); const [showProfileModal, setShowProfileModal] = useState(false);
@@ -101,9 +102,18 @@ export const App: React.FC = () => {
return () => window.removeEventListener('online', onOnline); return () => window.removeEventListener('online', onOnline);
}, []); }, []);
const handleCaptured = (thought: Thought) => { const handleCaptured = (
thought: Thought,
target: 'inbox' | 'task' | 'list_item' | 'document' = 'inbox'
) => {
if (target === 'inbox' && thought.status === 'inbox') {
setDeck((prev) => [thought, ...prev]); setDeck((prev) => [thought, ...prev]);
setStats((prev) => ({ ...prev, inboxCount: prev.inboxCount + 1 })); setStats((prev) => ({ ...prev, inboxCount: prev.inboxCount + 1 }));
} else if (target === 'document' && thought.convertedRefId) {
setSelectedDocId(thought.convertedRefId);
setActiveTab('workspace');
}
setRefreshRevision((r) => r + 1);
refreshAll(); refreshAll();
}; };
@@ -177,6 +187,7 @@ export const App: React.FC = () => {
<div className="flex-1 max-w-xl mx-auto"> <div className="flex-1 max-w-xl mx-auto">
<InstantCaptureBar <InstantCaptureBar
onCaptured={handleCaptured} onCaptured={handleCaptured}
lists={lists}
autoFocusTrigger={captureFocusCount} autoFocusTrigger={captureFocusCount}
/> />
</div> </div>
@@ -275,9 +286,6 @@ export const App: React.FC = () => {
{/* Main Container */} {/* Main Container */}
<main className="flex-1 max-w-6xl w-full mx-auto px-3 sm:px-4 pt-3 pb-6"> <main className="flex-1 max-w-6xl w-full mx-auto px-3 sm:px-4 pt-3 pb-6">
{/* Tab View Content */}
{/* Tab View Content */} {/* Tab View Content */}
<section> <section>
{activeTab === 'triage' && ( {activeTab === 'triage' && (
@@ -294,6 +302,7 @@ export const App: React.FC = () => {
<TasksView <TasksView
onRefreshStats={refreshAll} onRefreshStats={refreshAll}
onOpenDocument={handleOpenDocument} onOpenDocument={handleOpenDocument}
refreshTrigger={refreshRevision}
/> />
)} )}
@@ -1,40 +1,76 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Mic, MicOff, ArrowUp, Sparkles, Calendar, Check } from 'lucide-react'; import {
import { PriorityLevel, Thought } from '../../lib/types'; Mic,
MicOff,
ArrowUp,
Sparkles,
Calendar,
Check,
CheckSquare,
ShoppingCart,
FileText,
Layers,
ChevronDown,
} from 'lucide-react';
import { PriorityLevel, SharedList, Thought } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api'; import { api, triggerHaptic } from '../../lib/api';
export type CaptureTarget = 'inbox' | 'task' | 'list_item' | 'document';
interface InstantCaptureBarProps { interface InstantCaptureBarProps {
onCaptured: (thought: Thought) => void; onCaptured: (thought: Thought, target?: CaptureTarget) => void;
lists?: SharedList[];
autoFocusTrigger?: number; autoFocusTrigger?: number;
} }
export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
onCaptured, onCaptured,
lists = [],
autoFocusTrigger = 0, autoFocusTrigger = 0,
}) => { }) => {
const [content, setContent] = useState(''); const [content, setContent] = useState('');
const [priority, setPriority] = useState<PriorityLevel>('normal'); const [priority, setPriority] = useState<PriorityLevel>('normal');
const [dueDate, setDueDate] = useState(''); const [dueDate, setDueDate] = useState('');
const [target, setTarget] = useState<CaptureTarget>('inbox');
const [targetListId, setTargetListId] = useState<string>('');
const [showOptions, setShowOptions] = useState(false); const [showOptions, setShowOptions] = useState(false);
const [isListening, setIsListening] = useState(false); const [isListening, setIsListening] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [justSaved, setJustSaved] = useState(false); const [justSavedLabel, setJustSavedLabel] = useState<string | null>(null);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const containerRef = useRef<HTMLFormElement>(null);
const recognitionRef = useRef<any>(null); const recognitionRef = useRef<any>(null);
useEffect(() => { useEffect(() => {
inputRef.current?.focus(); inputRef.current?.focus();
}, [autoFocusTrigger]); }, [autoFocusTrigger]);
useEffect(() => {
if (!targetListId && lists.length > 0) {
setTargetListId(lists[0].id);
}
}, [lists, targetListId]);
// Close dropdown on outside click
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setShowOptions(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
// Global keyboard shortcut: 'c' or '/' focuses the Instant Capture input immediately // Global keyboard shortcut: 'c' or '/' focuses the Instant Capture input immediately
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
const target = e.target as HTMLElement; const el = e.target as HTMLElement;
const isEditing = const isEditing =
target.tagName === 'INPUT' || el.tagName === 'INPUT' ||
target.tagName === 'TEXTAREA' || el.tagName === 'TEXTAREA' ||
target.isContentEditable; el.isContentEditable;
if (!isEditing && (e.key === 'c' || e.key === 'C' || e.key === '/')) { if (!isEditing && (e.key === 'c' || e.key === 'C' || e.key === '/')) {
e.preventDefault(); e.preventDefault();
@@ -102,11 +138,17 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
} }
}; };
const handleSubmit = async (e?: React.FormEvent) => { const executeCapture = async (
if (e) e.preventDefault(); overrideTarget?: CaptureTarget,
overrideListId?: string
) => {
const trimmed = content.trim(); const trimmed = content.trim();
if (!trimmed || isSubmitting) return; if (!trimmed || isSubmitting) return;
const effectiveTarget = overrideTarget || target;
const effectiveListId =
overrideListId || targetListId || (lists.length > 0 ? lists[0].id : '');
setIsSubmitting(true); setIsSubmitting(true);
triggerHaptic(15); triggerHaptic(15);
@@ -115,25 +157,54 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
trimmed, trimmed,
priority, priority,
isListening ? 'voice' : 'manual', isListening ? 'voice' : 'manual',
dueDate dueDate,
{
target: effectiveTarget,
targetListId: effectiveTarget === 'list_item' ? effectiveListId : '',
}
); );
setContent(''); setContent('');
setPriority('normal'); setPriority('normal');
setDueDate(''); setDueDate('');
setTarget('inbox');
setShowOptions(false); setShowOptions(false);
setJustSaved(true);
setTimeout(() => setJustSaved(false), 1600); const savedMsg =
onCaptured(created); effectiveTarget === 'task'
? 'Als Aufgabe!'
: effectiveTarget === 'list_item'
? 'Auf Liste!'
: effectiveTarget === 'document'
? 'Als Notiz!'
: 'Im Dump!';
setJustSavedLabel(savedMsg);
setTimeout(() => setJustSavedLabel(null), 1600);
onCaptured(created, effectiveTarget);
inputRef.current?.focus(); inputRef.current?.focus();
} finally { } finally {
setIsSubmitting(false); setIsSubmitting(false);
} }
}; };
const handleSubmit = async (e?: React.FormEvent) => {
if (e) e.preventDefault();
await executeCapture();
};
const selectedList = lists.find((l) => l.id === targetListId) || lists[0];
const getTargetLabel = () => {
if (target === 'task') return 'Direkt-Aufgabe';
if (target === 'list_item') return selectedList ? `${selectedList.icon} ${selectedList.title}` : 'Auf Liste';
if (target === 'document') return 'Direkt-Notiz';
return 'Quick Dump';
};
return ( return (
<div className="w-full"> <div className="w-full">
<form onSubmit={handleSubmit} className="relative"> <form ref={containerRef} onSubmit={handleSubmit} className="relative">
{/* Capture Input Bar */} {/* Round Quick-Capture Input Bar */}
<div <div
className={`flex items-center h-9 pl-1.5 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${ className={`flex items-center h-9 pl-1.5 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${
isListening isListening
@@ -153,28 +224,44 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
placeholder={ placeholder={
isListening isListening
? 'Ich höre zu…' ? 'Ich höre zu…'
: 'Schnell-Notiz: Gedanke oder Zutat erfassen… (Taste C oder /)' : target === 'task'
? 'Neue Aufgabe direkt anlegen… (Enter)'
: target === 'list_item'
? `Eintrag direkt zu "${selectedList?.title || 'Liste'}" hinzufügen…`
: target === 'document'
? 'Neue Workspace-Notiz direkt anlegen…'
: 'Quick Dump: Gedanke einfach reinrotzen & später swipen… (C / Enter)'
} }
className="w-full bg-transparent text-white placeholder-zinc-500 text-xs sm:text-sm focus:outline-none" className="w-full bg-transparent text-white placeholder-zinc-500 text-xs sm:text-sm focus:outline-none"
autoComplete="off" autoComplete="off"
/> />
<div className="flex items-center gap-1.5 ml-2 flex-shrink-0"> <div className="flex items-center gap-1 ml-2 flex-shrink-0">
{/* Options Toggle Pill (Due Date / Priority) */} {/* Target & Options Toggle Pill */}
<button <button
type="button" type="button"
onClick={() => setShowOptions((prev) => !prev)} onClick={() => setShowOptions((prev) => !prev)}
title="Priorität & Fälligkeit" title="Ziel wählen (Quick Dump, direkt als Aufgabe, auf Liste oder als Notiz) & Optionen"
className={`h-6 px-2 rounded-full text-[11px] flex items-center gap-1 transition-colors ${ className={`h-6 px-2.5 rounded-full text-[11px] flex items-center gap-1 transition-colors ${
showOptions || priority !== 'normal' || dueDate showOptions || target !== 'inbox' || priority !== 'normal' || dueDate
? 'bg-accent/20 text-accent border border-accent/40 font-medium' ? 'bg-accent/20 text-accent border border-accent/40 font-medium'
: 'text-zinc-400 hover:text-white hover:bg-panel-elevated' : 'text-zinc-400 hover:text-white hover:bg-panel-elevated border border-transparent'
}`} }`}
> >
<Calendar className="w-3 h-3" /> {target === 'task' ? (
<span className="hidden sm:inline"> <CheckSquare className="w-3 h-3" />
{dueDate ? dueDate : priority !== 'normal' ? priority.toUpperCase() : 'Optionen'} ) : target === 'list_item' ? (
<ShoppingCart className="w-3 h-3" />
) : target === 'document' ? (
<FileText className="w-3 h-3" />
) : (
<Layers className="w-3 h-3" />
)}
<span className="hidden md:inline max-w-[110px] truncate">
{getTargetLabel()}
</span> </span>
{dueDate && <span className="hidden lg:inline text-[10px] opacity-80">• {dueDate.slice(5)}</span>}
<ChevronDown className="w-3 h-3 opacity-70" />
</button> </button>
{/* Voice Dictation Button */} {/* Voice Dictation Button */}
@@ -201,24 +288,158 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
: 'bg-panel-elevated text-zinc-500 cursor-not-allowed' : 'bg-panel-elevated text-zinc-500 cursor-not-allowed'
}`} }`}
> >
{justSaved ? ( {justSavedLabel ? (
<> <>
<Check className="w-3 h-3" /> <Check className="w-3 h-3" />
<span className="hidden sm:inline">Gespeichert</span> <span className="hidden sm:inline">{justSavedLabel}</span>
</> </>
) : ( ) : (
<> <>
<ArrowUp className="w-3 h-3" /> <ArrowUp className="w-3 h-3" />
<span className="hidden sm:inline">Sichern</span> <span className="hidden sm:inline">
{target === 'task'
? 'Als Aufgabe'
: target === 'list_item'
? 'Auf Liste'
: target === 'document'
? 'Als Notiz'
: 'Dump'}
</span>
</> </>
)} )}
</button> </button>
</div> </div>
</div> </div>
{/* Expandable Quick Metadata (Floating Dropdown) */} {/* Expandable Target & Metadata Panel (Square Monochromatic Dropdown) */}
{showOptions && ( {showOptions && (
<div className="absolute top-full left-0 right-0 mt-1.5 z-50 p-2.5 bg-panel border border-border shadow-2xl flex flex-wrap items-center justify-between gap-2 text-xs"> <div className="absolute top-full left-0 right-0 mt-1.5 z-50 p-3 bg-panel border border-border shadow-2xl space-y-3 text-xs">
{/* Row 1: Where should this entry go? */}
<div>
<div className="flex items-center justify-between mb-1.5">
<span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
Wohin damit? {content.trim() ? '(Klick speichert sofort oder wählt Ziel)' : '(Ziel für Eingabe wählen)'}
</span>
<span className="text-[11px] text-zinc-500">
Standard: Quick Dump für späteres Swipen
</span>
</div>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-1.5">
{/* Option 1: Quick Dump (Triage) */}
<button
type="button"
onClick={() => {
setTarget('inbox');
if (content.trim()) {
executeCapture('inbox');
}
}}
className={`h-8 px-2.5 border flex items-center gap-1.5 text-left transition-colors ${
target === 'inbox'
? 'bg-accent/20 border-accent text-white font-medium'
: 'bg-canvas border-border text-zinc-300 hover:bg-panel-hover'
}`}
>
<Layers className="w-3.5 h-3.5 text-accent flex-shrink-0" />
<span className="truncate">Quick Dump (Triage)</span>
</button>
{/* Option 2: Direct Task */}
<button
type="button"
onClick={() => {
setTarget('task');
if (content.trim()) {
executeCapture('task');
}
}}
className={`h-8 px-2.5 border flex items-center gap-1.5 text-left transition-colors ${
target === 'task'
? 'bg-accent/20 border-accent text-white font-medium'
: 'bg-canvas border-border text-zinc-300 hover:bg-panel-hover'
}`}
>
<CheckSquare className="w-3.5 h-3.5 text-accent flex-shrink-0" />
<span className="truncate">Direkt als Aufgabe</span>
</button>
{/* Option 3: Direct List Item */}
<button
type="button"
onClick={() => {
setTarget('list_item');
if (!targetListId && lists.length > 0) {
setTargetListId(lists[0].id);
}
}}
className={`h-8 px-2.5 border flex items-center gap-1.5 text-left transition-colors ${
target === 'list_item'
? 'bg-accent/20 border-accent text-white font-medium'
: 'bg-canvas border-border text-zinc-300 hover:bg-panel-hover'
}`}
>
<ShoppingCart className="w-3.5 h-3.5 text-accent flex-shrink-0" />
<span className="truncate">Direkt auf Liste…</span>
</button>
{/* Option 4: Direct Workspace Note */}
<button
type="button"
onClick={() => {
setTarget('document');
if (content.trim()) {
executeCapture('document');
}
}}
className={`h-8 px-2.5 border flex items-center gap-1.5 text-left transition-colors ${
target === 'document'
? 'bg-accent/20 border-accent text-white font-medium'
: 'bg-canvas border-border text-zinc-300 hover:bg-panel-hover'
}`}
>
<FileText className="w-3.5 h-3.5 text-accent flex-shrink-0" />
<span className="truncate">Direkt als Notiz</span>
</button>
</div>
</div>
{/* Optional Sub-Row: Shared List Picker (always shown if lists exist so 1-click list assignment is instant) */}
{lists.length > 0 && (
<div className="pt-2 border-t border-border flex flex-wrap items-center gap-1.5">
<span className="text-zinc-400 mr-1 flex items-center gap-1">
<ShoppingCart className="w-3 h-3 text-accent" />
Liste:
</span>
{lists.map((lst) => {
const isSelected = target === 'list_item' && targetListId === lst.id;
return (
<button
key={lst.id}
type="button"
onClick={() => {
setTarget('list_item');
setTargetListId(lst.id);
if (content.trim()) {
executeCapture('list_item', lst.id);
}
}}
className={`h-7 px-2.5 border text-xs flex items-center gap-1.5 transition-colors ${
isSelected
? 'bg-accent text-white border-accent font-medium'
: 'bg-canvas border-border text-zinc-300 hover:text-white hover:bg-panel-hover'
}`}
>
<span>{lst.icon}</span>
<span>{lst.title}</span>
</button>
);
})}
</div>
)}
{/* Row 2: Priority & Due Date */}
<div className="pt-2 border-t border-border flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<span className="text-zinc-400 mr-1">Priorität:</span> <span className="text-zinc-400 mr-1">Priorität:</span>
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => { {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
@@ -234,10 +455,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
key={p} key={p}
type="button" type="button"
onClick={() => setPriority(p)} onClick={() => setPriority(p)}
className={`px-2.5 py-0.5 rounded-full transition-colors text-xs ${ className={`px-2.5 py-0.5 border transition-colors text-xs ${
active active
? 'bg-accent text-white font-medium' ? 'bg-accent text-white border-accent font-medium'
: 'bg-canvas text-zinc-400 hover:text-white border border-border' : 'bg-canvas text-zinc-400 hover:text-white border-border'
}`} }`}
> >
{labels[p]} {labels[p]}
@@ -247,7 +468,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-zinc-400">Fällig am:</span> <span className="text-zinc-400 flex items-center gap-1">
<Calendar className="w-3 h-3 text-accent" />
Fällig am:
</span>
<input <input
type="date" type="date"
value={dueDate} value={dueDate}
@@ -256,6 +480,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
/> />
</div> </div>
</div> </div>
</div>
)} )}
</form> </form>
</div> </div>
+7 -2
View File
@@ -16,9 +16,14 @@ import { api, triggerHaptic } from '../../lib/api';
interface TasksViewProps { interface TasksViewProps {
onRefreshStats: () => void; onRefreshStats: () => void;
onOpenDocument: (docId: string) => void; onOpenDocument: (docId: string) => void;
refreshTrigger?: number;
} }
export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocument }) => { export const TasksView: React.FC<TasksViewProps> = ({
onRefreshStats,
onOpenDocument,
refreshTrigger = 0,
}) => {
const [filter, setFilter] = useState<'open' | 'done' | 'discarded'>('open'); const [filter, setFilter] = useState<'open' | 'done' | 'discarded'>('open');
const [tasks, setTasks] = useState<Thought[]>([]); const [tasks, setTasks] = useState<Thought[]>([]);
const [discarded, setDiscarded] = useState<Thought[]>([]); const [discarded, setDiscarded] = useState<Thought[]>([]);
@@ -40,7 +45,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
useEffect(() => { useEffect(() => {
loadData(); loadData();
}, []); }, [refreshTrigger]);
const handleToggleDone = async (task: Thought) => { const handleToggleDone = async (task: Thought) => {
triggerHaptic(15); triggerHaptic(15);
+313 -109
View File
@@ -3,6 +3,7 @@ import { motion, useMotionValue, useTransform, AnimatePresence } from 'framer-mo
import { import {
X, X,
Check, Check,
CheckSquare,
Calendar, Calendar,
FileText, FileText,
ShoppingCart, ShoppingCart,
@@ -13,6 +14,9 @@ import {
Keyboard, Keyboard,
Tag, Tag,
Clock, Clock,
SkipForward,
Edit3,
Layers,
} from 'lucide-react'; } from 'lucide-react';
import { SharedList, Thought } from '../../lib/types'; import { SharedList, Thought } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api'; import { api, triggerHaptic } from '../../lib/api';
@@ -41,6 +45,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
}); });
const [showListSelector, setShowListSelector] = useState(false); const [showListSelector, setShowListSelector] = useState(false);
// Inline edit state for cleaning up a hasty Quick Dump note before converting
const [isEditingCard, setIsEditingCard] = useState(false);
const [editDraft, setEditDraft] = useState('');
useEffect(() => { useEffect(() => {
setCards(deck); setCards(deck);
}, [deck]); }, [deck]);
@@ -48,14 +56,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
const activeCard = cards[0]; const activeCard = cards[0];
const nextCard = cards[1]; const nextCard = cards[1];
useEffect(() => {
setIsEditingCard(false);
setEditDraft(activeCard?.content || '');
}, [activeCard?.id]);
const x = useMotionValue(0); const x = useMotionValue(0);
const rotate = useTransform(x, [-220, 0, 220], [-10, 0, 10]); const rotate = useTransform(x, [-220, 0, 220], [-8, 0, 8]);
const keepOpacity = useTransform(x, [25, 120], [0, 1]); const keepOpacity = useTransform(x, [25, 110], [0, 1]);
const discardOpacity = useTransform(x, [-120, -25], [1, 0]); const discardOpacity = useTransform(x, [-110, -25], [1, 0]);
const cardBorderColor = useTransform( const cardBorderColor = useTransform(
x, x,
[-140, 0, 140], [-140, 0, 140],
['rgba(239, 68, 68, 0.7)', 'rgba(255, 255, 255, 0.08)', 'rgba(34, 197, 94, 0.7)'] ['rgba(239, 68, 68, 0.7)', 'rgba(255, 255, 255, 0.08)', 'rgba(29, 140, 248, 0.8)']
); );
const handleAction = async ( const handleAction = async (
@@ -64,22 +77,28 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
convertTo?: 'task' | 'document' | 'list_item'; convertTo?: 'task' | 'document' | 'list_item';
targetListId?: string; targetListId?: string;
dueDate?: string; dueDate?: string;
thoughtOverride?: Thought;
} }
) => { ) => {
if (!activeCard) return; const targetCard = options?.thoughtOverride || activeCard;
if (!targetCard) return;
const current = activeCard;
triggerHaptic(action === 'keep' ? [10, 20] : 15); triggerHaptic(action === 'keep' ? [10, 20] : 15);
// Optimistic removal from deck // Optimistic removal from local deck
setCards((prev) => prev.slice(1)); setCards((prev) => prev.filter((c) => c.id !== targetCard.id));
setLastTriaged(current); setLastTriaged(targetCard);
setShowDateModal(false); setShowDateModal(false);
setShowListSelector(false); setShowListSelector(false);
setIsEditingCard(false);
x.set(0); x.set(0);
try { try {
const updated = await api.triageAction(current.id, action, options); const updated = await api.triageAction(targetCard.id, action, {
convertTo: options?.convertTo,
targetListId: options?.targetListId,
dueDate: options?.dueDate,
});
onDeckChange(); onDeckChange();
if (options?.convertTo === 'document' && updated.convertedRefId) { if (options?.convertTo === 'document' && updated.convertedRefId) {
onOpenDocument(updated.convertedRefId); onOpenDocument(updated.convertedRefId);
@@ -89,6 +108,42 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
} }
}; };
const handleSkipCard = () => {
if (cards.length <= 1) return;
triggerHaptic(10);
setShowDateModal(false);
setShowListSelector(false);
setIsEditingCard(false);
x.set(0);
setCards((prev) => [...prev.slice(1), prev[0]]);
};
const handleBringToFront = (thoughtId: string) => {
triggerHaptic(10);
setCards((prev) => {
const chosen = prev.find((c) => c.id === thoughtId);
if (!chosen) return prev;
return [chosen, ...prev.filter((c) => c.id !== thoughtId)];
});
};
const handleSaveInlineEdit = async () => {
if (!activeCard) return;
const trimmed = editDraft.trim();
if (!trimmed || trimmed === activeCard.content) {
setIsEditingCard(false);
return;
}
try {
const updated = await api.updateThought(activeCard.id, { content: trimmed });
setCards((prev) => prev.map((c) => (c.id === activeCard.id ? updated : c)));
setIsEditingCard(false);
onDeckChange();
} catch {
setIsEditingCard(false);
}
};
const handleUndo = async () => { const handleUndo = async () => {
if (!lastTriaged) return; if (!lastTriaged) return;
triggerHaptic(15); triggerHaptic(15);
@@ -116,38 +171,42 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
handleAction('discard'); handleAction('discard');
} else if (e.key === 'ArrowRight' || e.key === 'l' || e.key === 'L') { } else if (e.key === 'ArrowRight' || e.key === 'l' || e.key === 'L') {
e.preventDefault(); e.preventDefault();
handleAction('keep'); handleAction('keep', { convertTo: 'task' });
} else if (e.key === 't' || e.key === 'T') { } else if (e.key === 't' || e.key === 'T') {
e.preventDefault(); e.preventDefault();
setShowListSelector(false);
setShowDateModal((prev) => !prev); setShowDateModal((prev) => !prev);
} else if (e.key === 'd' || e.key === 'D') { } else if (e.key === 'd' || e.key === 'D') {
e.preventDefault(); e.preventDefault();
handleAction('keep', { convertTo: 'document' }); handleAction('keep', { convertTo: 'document' });
} else if (e.key === ' ') {
e.preventDefault();
handleSkipCard();
} }
}; };
window.addEventListener('keydown', onKeyDown); window.addEventListener('keydown', onKeyDown);
return () => window.removeEventListener('keydown', onKeyDown); return () => window.removeEventListener('keydown', onKeyDown);
}, [activeCard]); }, [activeCard, cards.length]);
const priorityBadge = (priority: string) => { const priorityBadge = (priority: string) => {
switch (priority) { switch (priority) {
case 'urgent': case 'urgent':
return ( return (
<span className="px-2 py-0.2 text-xs font-semibold border border-[#1d8cf8] text-[#1d8cf8]"> <span className="px-2 py-0.5 text-[11px] font-semibold border border-accent text-accent">
Dringend Dringend
</span> </span>
); );
case 'high': case 'high':
return ( return (
<span className="px-2 py-0.2 text-xs font-medium border border-white/20 text-zinc-300"> <span className="px-2 py-0.5 text-[11px] font-medium border border-white/20 text-zinc-200">
Wichtig Wichtig
</span> </span>
); );
default: default:
return ( return (
<span className="px-2 py-0.2 text-xs font-medium bg-[#2b2d33] text-zinc-400"> <span className="px-2 py-0.5 text-[11px] font-medium bg-panel-elevated text-zinc-400 border border-border">
Gedanke Quick Dump
</span> </span>
); );
} }
@@ -156,15 +215,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
const sourceBadge = (source: string) => { const sourceBadge = (source: string) => {
if (source === 'voice') { if (source === 'voice') {
return ( return (
<span className="px-2 py-0.2 text-xs bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1"> <span className="px-2 py-0.5 text-[11px] bg-canvas text-accent border border-border flex items-center gap-1">
<Mic className="w-3 h-3" /> Diktat <Mic className="w-3 h-3" /> Diktat
</span> </span>
); );
} }
if (source === 'webhook') { if (source === 'webhook') {
return ( return (
<span className="px-2 py-0.2 text-xs bg-[#16171a] text-zinc-300 border border-white/[0.06] flex items-center gap-1"> <span className="px-2 py-0.5 text-[11px] bg-canvas text-zinc-300 border border-border flex items-center gap-1">
<Webhook className="w-3 h-3 text-[#1d8cf8]" /> Webhook <Webhook className="w-3 h-3 text-accent" /> Webhook
</span> </span>
); );
} }
@@ -173,30 +232,30 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
if (!activeCard) { if (!activeCard) {
return ( return (
<div className="max-w-xl mx-auto mt-2 p-6 bg-[#222428] border border-white/[0.08] text-center"> <div className="max-w-xl mx-auto mt-2 p-6 bg-panel border border-border text-center">
<div className="w-12 h-12 bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm"> <div className="w-11 h-11 bg-accent text-white flex items-center justify-center mx-auto mb-3 shadow-sm">
<Sparkles className="w-6 h-6" /> <Sparkles className="w-5 h-5" />
</div> </div>
<h2 className="text-xl font-bold text-white mb-1.5">Inbox Zero</h2> <h2 className="text-lg font-bold text-white mb-1">Triage-Deck ist leer</h2>
<p className="text-zinc-400 text-sm max-w-sm mx-auto mb-4"> <p className="text-zinc-400 text-xs sm:text-sm max-w-md mx-auto mb-4">
Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei. Alle Quick Dump Notizen sind einsortiert oder verworfen. Tippe oben in die Leiste (Taste <kbd className="px-1.5 py-0.5 bg-canvas border border-border text-zinc-300">C</kbd>), um neue Gedanken reinzurotzen.
</p> </p>
<div className="flex flex-wrap items-center justify-center gap-2.5"> <div className="flex flex-wrap items-center justify-center gap-2">
<button <button
onClick={onFocusCapture} onClick={onFocusCapture}
className="btn-primary h-9 px-4" className="btn-primary h-8 px-4"
> >
+ Neuer Gedanke + Quick Dump erfassen
</button> </button>
{lastTriaged && ( {lastTriaged && (
<button <button
onClick={handleUndo} onClick={handleUndo}
className="btn-action h-9 px-3.5" className="btn-action h-8 px-3"
> >
<RotateCcw className="w-3.5 h-3.5 text-accent" /> <RotateCcw className="w-3.5 h-3.5 text-accent" />
Rückgängig Letzte Aktion rückgängig
</button> </button>
)} )}
</div> </div>
@@ -205,16 +264,16 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
} }
return ( return (
<div className="max-w-xl mx-auto select-none"> <div className="max-w-2xl mx-auto select-none space-y-4">
{/* Top Deck Status & Undo Bar */} {/* Top Deck Status & Undo Bar */}
<div className="flex items-center justify-between mb-3 px-1"> <div className="flex items-center justify-between px-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-xs text-zinc-400"> <span className="badge-accent">
{cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend {cards.length} {cards.length === 1 ? 'Quick Dump' : 'Quick Dumps'} offen
</span> </span>
<span className="hidden sm:inline text-xs text-zinc-600">•</span> <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"> <span className="hidden sm:flex items-center gap-1 text-xs text-zinc-400">
<Keyboard className="w-3 h-3" /> H / L oder ← / → <Keyboard className="w-3 h-3" /> ← Wegwerfen • → Aufgabe • D Notiz • Leertaste Später
</span> </span>
</div> </div>
@@ -230,16 +289,16 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div> </div>
{/* Card Stack Container */} {/* Card Stack Container */}
<div className="relative h-[320px] sm:h-[340px] w-full flex items-center justify-center"> <div className="relative h-[280px] sm:h-[300px] w-full flex items-center justify-center">
{/* Background Preview Card */} {/* Background Preview Card */}
{nextCard && ( {nextCard && (
<div <div
key={nextCard.id + '-preview'} key={nextCard.id + '-preview'}
className="absolute inset-x-3 top-4 bottom-0 bg-panel/60 border border-border p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between" className="absolute inset-x-3 top-3 bottom-0 bg-panel/60 border border-border p-4 opacity-40 scale-[0.97] pointer-events-none flex flex-col justify-between"
> >
<div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div> <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
<p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p> <p className="text-sm text-zinc-400 line-clamp-2">{nextCard.content}</p>
<div className="text-xs text-zinc-500">Nächste Karte…</div> <div className="text-[11px] text-zinc-500">Nächster Quick Dump…</div>
</div> </div>
)} )}
@@ -248,45 +307,58 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
<motion.div <motion.div
key={activeCard.id} key={activeCard.id}
style={{ x, rotate, borderColor: cardBorderColor }} style={{ x, rotate, borderColor: cardBorderColor }}
drag="x" drag={isEditingCard ? false : 'x'}
dragConstraints={{ left: 0, right: 0 }} dragConstraints={{ left: 0, right: 0 }}
dragElastic={0.8} dragElastic={0.8}
transition={{ type: 'spring', stiffness: 350, damping: 25 }} transition={{ type: 'spring', stiffness: 350, damping: 25 }}
onDragEnd={(_, info) => { onDragEnd={(_, info) => {
if (info.offset.x > 110 || info.velocity.x > 550) { if (info.offset.x > 105 || info.velocity.x > 520) {
handleAction('keep'); handleAction('keep', { convertTo: 'task' });
} else if (info.offset.x < -110 || info.velocity.x < -550) { } else if (info.offset.x < -105 || info.velocity.x < -520) {
handleAction('discard'); handleAction('discard');
} }
}} }}
initial={{ scale: 0.96, opacity: 0, y: 12 }} initial={{ scale: 0.97, opacity: 0, y: 10 }}
animate={{ scale: 1, opacity: 1, y: 0 }} animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.92, opacity: 0 }} exit={{ scale: 0.93, opacity: 0 }}
className="relative w-full h-full bg-panel border border-border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden" className="relative w-full h-full bg-panel border border-border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
> >
{/* Dynamic Swipe Overlays */} {/* Dynamic Swipe Overlays */}
<motion.div <motion.div
style={{ opacity: keepOpacity }} style={{ opacity: keepOpacity }}
className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-accent/20 border border-accent text-accent font-semibold text-xs tracking-wide uppercase" className="pointer-events-none absolute top-3.5 right-3.5 px-2.5 py-1 bg-accent/20 border border-accent text-accent font-semibold text-xs tracking-wide uppercase"
> >
Behalten 👉 Als Aufgabe 👉
</motion.div> </motion.div>
<motion.div <motion.div
style={{ opacity: discardOpacity }} style={{ opacity: discardOpacity }}
className="pointer-events-none absolute top-4 left-4 px-2.5 py-1 bg-white/10 border border-white/30 text-zinc-300 font-semibold text-xs tracking-wide uppercase" className="pointer-events-none absolute top-3.5 left-3.5 px-2.5 py-1 bg-white/10 border border-white/30 text-zinc-200 font-semibold text-xs tracking-wide uppercase"
> >
👈 Weg damit 👈 Wegwerfen
</motion.div> </motion.div>
{/* Card Header */} {/* Card Header */}
<div className="flex flex-wrap items-center justify-between gap-2"> <div className="flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-1.5">
{priorityBadge(activeCard.priority)} {priorityBadge(activeCard.priority)}
{sourceBadge(activeCard.source)} {sourceBadge(activeCard.source)}
</div> </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 text-[11px] text-zinc-400 hover:text-white flex items-center gap-1"
>
<Edit3 className="w-3 h-3" />
<span>Bearbeiten</span>
</button>
<span className="text-xs text-zinc-400 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" /> <Clock className="w-3 h-3" />
{new Date(activeCard.createdAt).toLocaleString('de-DE', { {new Date(activeCard.createdAt).toLocaleString('de-DE', {
day: '2-digit', day: '2-digit',
month: '2-digit', month: '2-digit',
@@ -295,33 +367,61 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
})} })}
</span> </span>
</div> </div>
{/* Card Body */}
<div className="my-auto py-3">
<p className="text-lg sm:text-xl font-medium text-white leading-relaxed break-words">
{activeCard.content}
</p>
</div> </div>
{/* Card Footer: Tags & Due Date */} {/* Card Body */}
<div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-border"> <div className="my-auto py-2">
{isEditingCard ? (
<div className="space-y-2">
<textarea
value={editDraft}
onChange={(e) => setEditDraft(e.target.value)}
rows={3}
autoFocus
className="w-full input-field p-2 text-sm text-white resize-none"
/>
<div className="flex items-center justify-end gap-1.5">
<button
type="button"
onClick={() => setIsEditingCard(false)}
className="btn-action h-7 px-2.5 text-xs"
>
Abbrechen
</button>
<button
type="button"
onClick={handleSaveInlineEdit}
className="btn-primary h-7 px-3 text-xs"
>
Text speichern
</button>
</div>
</div>
) : (
<p className="text-base sm:text-xl font-medium text-white leading-relaxed break-words">
{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">
<div className="flex flex-wrap items-center gap-1.5"> <div className="flex flex-wrap items-center gap-1.5">
{activeCard.tags && activeCard.tags.length > 0 ? ( {activeCard.tags && activeCard.tags.length > 0 ? (
activeCard.tags.map((tag) => ( activeCard.tags.map((tag) => (
<span <span key={tag} className="badge-accent">
key={tag}
className="badge-accent"
>
<Tag className="w-2.5 h-2.5" />#{tag} <Tag className="w-2.5 h-2.5" />#{tag}
</span> </span>
)) ))
) : ( ) : (
<span className="text-xs text-zinc-400">Wische links oder rechts</span> <span className="text-xs text-zinc-500">
Links wischen = Wegwerfen • Rechts wischen = Als Aufgabe sichern
</span>
)} )}
</div> </div>
{activeCard.dueDate && ( {activeCard.dueDate && (
<span className="px-2.5 py-0.5 bg-canvas text-zinc-300 border border-border text-xs"> <span className="px-2 py-0.5 bg-canvas text-zinc-300 border border-border text-xs">
📅 {activeCard.dueDate} 📅 {activeCard.dueDate}
</span> </span>
)} )}
@@ -330,35 +430,35 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</AnimatePresence> </AnimatePresence>
</div> </div>
{/* Convert to Task Date Picker Popover */} {/* Convert to Task with Due Date Popover */}
{showDateModal && ( {showDateModal && (
<div className="p-3 bg-panel border border-t-0 border-border flex flex-wrap items-center justify-between gap-3"> <div className="p-3 bg-panel border border-border flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-2 text-xs text-zinc-300"> <div className="flex items-center gap-2 text-xs text-zinc-300">
<Calendar className="w-4 h-4 text-accent" /> <Calendar className="w-4 h-4 text-accent" />
<span>Fälligkeitsdatum für Aufgabe:</span> <span>Aufgabe mit Fälligkeitsdatum anlegen:</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <input
type="date" type="date"
value={taskDueDate} value={taskDueDate}
onChange={(e) => setTaskDueDate(e.target.value)} onChange={(e) => setTaskDueDate(e.target.value)}
className="input-field px-3 py-1 text-xs" className="input-field px-2.5 py-1 text-xs"
/> />
<button <button
onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })} onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
className="btn-primary" className="btn-primary h-7 px-3 text-xs"
> >
Speichern Als Termin-Aufgabe speichern
</button> </button>
</div> </div>
</div> </div>
)} )}
{/* Convert to Shared Shopping List Item Popover */} {/* Convert to Shared List Item Popover */}
{showListSelector && ( {showListSelector && (
<div className="p-3 bg-panel border border-t-0 border-border"> <div className="p-3 bg-panel border border-border">
<p className="text-xs text-zinc-400 mb-2"> <p className="text-xs text-zinc-400 mb-2">
In welche Liste verschieben? Quick Dump direkt einer Liste zuordnen:
</p> </p>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
{lists.length > 0 ? ( {lists.length > 0 ? (
@@ -368,7 +468,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
onClick={() => onClick={() =>
handleAction('keep', { convertTo: 'list_item', targetListId: lst.id }) handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
} }
className="btn-action" className="btn-action h-7 px-2.5 text-xs"
> >
<span>{lst.icon}</span> <span>{lst.icon}</span>
<span>{lst.title}</span> <span>{lst.title}</span>
@@ -381,64 +481,168 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
</div> </div>
)} )}
{/* Primary Triage Action Buttons */} {/* Primary Triage Decision Bar */}
<div className="mt-3 flex flex-wrap items-center justify-center gap-2"> <div className="grid grid-cols-2 sm:grid-cols-6 gap-1.5">
{/* Swipe Left: Discard */} {/* 1. Swipe Left: Discard */}
<button <button
onClick={() => handleAction('discard')} onClick={() => handleAction('discard')}
title="Verwerfen (Taste H oder Pfeil links)" title="Wegwerfen (Taste H oder Pfeil links)"
className="btn-action h-8 px-3" className="btn-action h-8 px-2.5 justify-center"
> >
<X className="w-4 h-4" /> <X className="w-3.5 h-3.5 text-zinc-400" />
<span>Weg damit</span> <span>Wegwerfen</span>
</button> </button>
{/* Convert to Task with Due Date */} {/* 2. Skip / Later */}
<button <button
onClick={() => { onClick={handleSkipCard}
setShowListSelector(false); disabled={cards.length <= 1}
setShowDateModal((prev) => !prev); title="Später entscheiden – ans Ende schieben (Leertaste)"
}} className={`btn-action h-8 px-2.5 justify-center ${
title="Als Aufgabe mit Datum (Taste T)" cards.length <= 1 ? 'opacity-40 cursor-not-allowed' : ''
className={`btn-action h-8 px-3 ${showDateModal ? 'border-accent text-accent bg-accent/20' : ''}`} }`}
> >
<Calendar className="w-3.5 h-3.5 text-accent" /> <SkipForward className="w-3.5 h-3.5 text-zinc-400" />
<span>Termin-To-Do</span> <span>Später</span>
</button> </button>
{/* Convert to Workspace Document */} {/* 3. Assign to List */}
<button
onClick={() => handleAction('keep', { convertTo: 'document' })}
title="In Notiz / Projekt umwandeln (Taste D)"
className="btn-action h-8 px-3"
>
<FileText className="w-3.5 h-3.5 text-accent" />
<span>Als Notiz</span>
</button>
{/* Convert to Shared Shopping List Item */}
<button <button
onClick={() => { onClick={() => {
setShowDateModal(false); setShowDateModal(false);
setShowListSelector((prev) => !prev); setShowListSelector((prev) => !prev);
}} }}
title="Auf eine geteilte Liste setzen" title="Auf eine geteilte Liste setzen"
className={`btn-action h-8 px-3 ${showListSelector ? 'border-accent text-accent bg-accent/20' : ''}`} className={`btn-action h-8 px-2.5 justify-center ${
showListSelector ? 'border-accent text-accent bg-accent/20' : ''
}`}
> >
<ShoppingCart className="w-3.5 h-3.5 text-accent" /> <ShoppingCart className="w-3.5 h-3.5 text-accent" />
<span>Auf Liste</span> <span>Auf Liste</span>
</button> </button>
{/* Swipe Right: Keep */} {/* 4. Convert to Workspace Note */}
<button <button
onClick={() => handleAction('keep')} onClick={() => handleAction('keep', { convertTo: 'document' })}
title="Behalten & sichern (Taste L oder Pfeil rechts)" title="In eine Workspace-Notiz umwandeln (Taste D)"
className="btn-primary h-8 px-4" className="btn-action h-8 px-2.5 justify-center"
> >
<Check className="w-4 h-4" /> <FileText className="w-3.5 h-3.5 text-accent" />
<span>Behalten</span> <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 ${
showDateModal ? 'border-accent text-accent bg-accent/20' : ''
}`}
>
<Calendar className="w-3.5 h-3.5 text-accent" />
<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"
>
<CheckSquare className="w-3.5 h-3.5" />
<span>Als Aufgabe</span>
</button>
</div>
{/* Waiting Quick Dump Queue List */}
{cards.length > 1 && (
<div className="pt-2">
<div className="flex items-center justify-between mb-1.5 px-0.5">
<span className="text-xs font-semibold uppercase tracking-wider text-zinc-400 flex items-center gap-1.5">
<Layers className="w-3.5 h-3.5 text-accent" />
Warteschlange ({cards.length - 1} weitere Quick Dumps)
</span>
<span className="text-[11px] text-zinc-500">
Klicken zum Vorholen oder direkt zuordnen
</span>
</div>
<div className="bg-panel border border-border divide-y divide-border max-h-60 overflow-y-auto">
{cards.slice(1).map((item) => (
<div
key={item.id}
className="px-3 py-2 flex items-center justify-between gap-2 hover:bg-panel-hover transition-colors group"
>
<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-zinc-200 truncate group-hover:text-white">
{item.content}
</span>
</div>
<div className="flex items-center gap-1 flex-shrink-0">
<button
type="button"
onClick={() =>
handleAction('keep', { convertTo: 'task', thoughtOverride: item })
}
title="Direkt zur Aufgabe machen"
className="h-6 px-2 bg-canvas hover:bg-accent hover:text-white border border-border text-[11px] text-zinc-300 flex items-center gap-1 transition-colors"
>
<Check className="w-3 h-3" />
<span className="hidden sm:inline">Aufgabe</span>
</button>
<button
type="button"
onClick={() =>
handleAction('keep', { convertTo: 'document', thoughtOverride: item })
}
title="Direkt als Workspace-Notiz anlegen"
className="h-6 px-2 bg-canvas hover:bg-panel-elevated border border-border text-[11px] text-zinc-300 flex items-center gap-1 transition-colors"
>
<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 text-[11px] text-zinc-300 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 text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
>
<X className="w-3 h-3" />
</button> </button>
</div> </div>
</div> </div>
))}
</div>
</div>
)}
</div>
); );
}; };
+32 -3
View File
@@ -36,7 +36,7 @@ export function triggerHaptic(pattern: number | number[] = 15): void {
} }
} }
async function request<T>(path: string, options: RequestInit = {}): Promise<T> { async function request<T>(path: string, options: RequestInit = {}, isRetry = false): Promise<T> {
const token = getToken(); const token = getToken();
const headers: Record<string, string> = { const headers: Record<string, string> = {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@@ -52,6 +52,24 @@ async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
headers, headers,
}); });
if (res.status === 401 && !isRetry && !path.includes('/auth/login') && !path.includes('/auth/quickstart')) {
try {
const qsRes = await fetch('/api/v1/auth/quickstart', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
});
if (qsRes.ok) {
const qsData = await qsRes.json();
if (qsData.token) {
setToken(qsData.token);
return request<T>(path, options, true);
}
}
} catch {
// ignore and fall through to standard error handling
}
}
if (!res.ok) { if (!res.ok) {
let errMsg = `HTTP ${res.status}`; let errMsg = `HTTP ${res.status}`;
try { try {
@@ -107,12 +125,23 @@ export const api = {
content: string, content: string,
priority: PriorityLevel = 'normal', priority: PriorityLevel = 'normal',
source: 'manual' | 'voice' = 'manual', source: 'manual' | 'voice' = 'manual',
dueDate = '' dueDate = '',
options?: {
target?: 'inbox' | 'task' | 'list_item' | 'document';
targetListId?: string;
}
): Promise<Thought> { ): Promise<Thought> {
try { try {
const thought = await request<Thought>('/api/v1/inbox', { const thought = await request<Thought>('/api/v1/inbox', {
method: 'POST', method: 'POST',
body: JSON.stringify({ content, priority, source, dueDate }), body: JSON.stringify({
content,
priority,
source,
dueDate,
target: options?.target || 'inbox',
targetListId: options?.targetListId || '',
}),
}); });
return thought; return thought;
} catch (err) { } catch (err) {
+2
View File
@@ -28,9 +28,11 @@ export default {
hover: 'var(--accent-hover)', hover: 'var(--accent-hover)',
dark: 'var(--accent-primary)', dark: 'var(--accent-primary)',
}, },
border: 'var(--border-color)',
}, },
borderColor: { borderColor: {
DEFAULT: 'var(--border-color)', DEFAULT: 'var(--border-color)',
border: 'var(--border-color)',
subtle: 'var(--border-subtle)', subtle: 'var(--border-subtle)',
}, },
borderRadius: { borderRadius: {
+26 -1
View File
@@ -149,7 +149,13 @@ func (s *Server) authMiddleware(next http.Handler) http.Handler {
} }
claims, err := auth.ValidateToken(s.cfg.JWTSecret, tokenStr) claims, err := auth.ValidateToken(s.cfg.JWTSecret, tokenStr)
if err == nil && claims != nil { if err == nil && claims != nil {
next.ServeHTTP(w, r.WithContext(auth.WithUserID(r.Context(), claims.UserID))) userID := claims.UserID
if _, userErr := s.store.GetUserByID(userID); userErr != nil {
if defUser, defErr := s.store.EnsureDefaultUser(); defErr == nil && defUser != nil {
userID = defUser.ID
}
}
next.ServeHTTP(w, r.WithContext(auth.WithUserID(r.Context(), userID)))
return return
} }
} }
@@ -309,6 +315,9 @@ func (s *Server) handleCaptureInbox(w http.ResponseWriter, r *http.Request) {
Source string `json:"source"` Source string `json:"source"`
DueDate string `json:"dueDate"` DueDate string `json:"dueDate"`
DueDate2 string `json:"due_date"` // Compatibility with snake_case README example DueDate2 string `json:"due_date"` // Compatibility with snake_case README example
Target string `json:"target"` // inbox | task | list_item | document
TargetListID string `json:"targetListId"`
TargetList2 string `json:"target_list_id"`
} }
if err := json.NewDecoder(r.Body).Decode(&req); err != nil { if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
writeError(w, http.StatusBadRequest, "Ungültiges JSON") writeError(w, http.StatusBadRequest, "Ungültiges JSON")
@@ -318,6 +327,10 @@ func (s *Server) handleCaptureInbox(w http.ResponseWriter, r *http.Request) {
if dueDate == "" { if dueDate == "" {
dueDate = req.DueDate2 dueDate = req.DueDate2
} }
targetListID := req.TargetListID
if targetListID == "" {
targetListID = req.TargetList2
}
thought, err := s.store.CreateThought(userID, req.Content, req.Priority, req.Source, dueDate) thought, err := s.store.CreateThought(userID, req.Content, req.Priority, req.Source, dueDate)
if err != nil { if err != nil {
@@ -325,6 +338,18 @@ func (s *Server) handleCaptureInbox(w http.ResponseWriter, r *http.Request) {
return return
} }
target := strings.TrimSpace(req.Target)
if target == "task" || target == "document" || (target == "list_item" && targetListID != "") {
if converted, convErr := s.store.UpdateThoughtTriage(userID, thought.ID, "keep", target, targetListID, dueDate); convErr == nil && converted != nil {
thought = converted
if target == "list_item" && targetListID != "" {
if lst, lErr := s.store.GetListByID(targetListID); lErr == nil && lst != nil {
s.wsHub.Broadcast(lst.SpaceID, lst.ID, "ITEM_CREATED", lst)
}
}
}
}
writeJSON(w, http.StatusCreated, thought) writeJSON(w, http.StatusCreated, thought)
} }