Dev #1
No files matched your search
+13
-4
@@ -39,6 +39,7 @@ export const App: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<ActiveTab>('triage');
|
||||
const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
|
||||
const [captureFocusCount, setCaptureFocusCount] = useState(0);
|
||||
const [refreshRevision, setRefreshRevision] = useState(0);
|
||||
|
||||
// Profile & Auth Modal State (aligned with Template Screen 2)
|
||||
const [showProfileModal, setShowProfileModal] = useState(false);
|
||||
@@ -101,9 +102,18 @@ export const App: React.FC = () => {
|
||||
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]);
|
||||
setStats((prev) => ({ ...prev, inboxCount: prev.inboxCount + 1 }));
|
||||
} else if (target === 'document' && thought.convertedRefId) {
|
||||
setSelectedDocId(thought.convertedRefId);
|
||||
setActiveTab('workspace');
|
||||
}
|
||||
setRefreshRevision((r) => r + 1);
|
||||
refreshAll();
|
||||
};
|
||||
|
||||
@@ -177,6 +187,7 @@ export const App: React.FC = () => {
|
||||
<div className="flex-1 max-w-xl mx-auto">
|
||||
<InstantCaptureBar
|
||||
onCaptured={handleCaptured}
|
||||
lists={lists}
|
||||
autoFocusTrigger={captureFocusCount}
|
||||
/>
|
||||
</div>
|
||||
@@ -275,9 +286,6 @@ export const App: React.FC = () => {
|
||||
|
||||
{/* Main Container */}
|
||||
<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 */}
|
||||
<section>
|
||||
{activeTab === 'triage' && (
|
||||
@@ -294,6 +302,7 @@ export const App: React.FC = () => {
|
||||
<TasksView
|
||||
onRefreshStats={refreshAll}
|
||||
onOpenDocument={handleOpenDocument}
|
||||
refreshTrigger={refreshRevision}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,40 +1,76 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Mic, MicOff, ArrowUp, Sparkles, Calendar, Check } from 'lucide-react';
|
||||
import { PriorityLevel, Thought } from '../../lib/types';
|
||||
import {
|
||||
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';
|
||||
|
||||
export type CaptureTarget = 'inbox' | 'task' | 'list_item' | 'document';
|
||||
|
||||
interface InstantCaptureBarProps {
|
||||
onCaptured: (thought: Thought) => void;
|
||||
onCaptured: (thought: Thought, target?: CaptureTarget) => void;
|
||||
lists?: SharedList[];
|
||||
autoFocusTrigger?: number;
|
||||
}
|
||||
|
||||
export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
onCaptured,
|
||||
lists = [],
|
||||
autoFocusTrigger = 0,
|
||||
}) => {
|
||||
const [content, setContent] = useState('');
|
||||
const [priority, setPriority] = useState<PriorityLevel>('normal');
|
||||
const [dueDate, setDueDate] = useState('');
|
||||
const [target, setTarget] = useState<CaptureTarget>('inbox');
|
||||
const [targetListId, setTargetListId] = useState<string>('');
|
||||
const [showOptions, setShowOptions] = useState(false);
|
||||
const [isListening, setIsListening] = 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 containerRef = useRef<HTMLFormElement>(null);
|
||||
const recognitionRef = useRef<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, [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
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
const el = e.target as HTMLElement;
|
||||
const isEditing =
|
||||
target.tagName === 'INPUT' ||
|
||||
target.tagName === 'TEXTAREA' ||
|
||||
target.isContentEditable;
|
||||
el.tagName === 'INPUT' ||
|
||||
el.tagName === 'TEXTAREA' ||
|
||||
el.isContentEditable;
|
||||
|
||||
if (!isEditing && (e.key === 'c' || e.key === 'C' || e.key === '/')) {
|
||||
e.preventDefault();
|
||||
@@ -102,11 +138,17 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e?: React.FormEvent) => {
|
||||
if (e) e.preventDefault();
|
||||
const executeCapture = async (
|
||||
overrideTarget?: CaptureTarget,
|
||||
overrideListId?: string
|
||||
) => {
|
||||
const trimmed = content.trim();
|
||||
if (!trimmed || isSubmitting) return;
|
||||
|
||||
const effectiveTarget = overrideTarget || target;
|
||||
const effectiveListId =
|
||||
overrideListId || targetListId || (lists.length > 0 ? lists[0].id : '');
|
||||
|
||||
setIsSubmitting(true);
|
||||
triggerHaptic(15);
|
||||
|
||||
@@ -115,25 +157,54 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
trimmed,
|
||||
priority,
|
||||
isListening ? 'voice' : 'manual',
|
||||
dueDate
|
||||
dueDate,
|
||||
{
|
||||
target: effectiveTarget,
|
||||
targetListId: effectiveTarget === 'list_item' ? effectiveListId : '',
|
||||
}
|
||||
);
|
||||
setContent('');
|
||||
setPriority('normal');
|
||||
setDueDate('');
|
||||
setTarget('inbox');
|
||||
setShowOptions(false);
|
||||
setJustSaved(true);
|
||||
setTimeout(() => setJustSaved(false), 1600);
|
||||
onCaptured(created);
|
||||
|
||||
const savedMsg =
|
||||
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();
|
||||
} finally {
|
||||
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 (
|
||||
<div className="w-full">
|
||||
<form onSubmit={handleSubmit} className="relative">
|
||||
{/* Capture Input Bar */}
|
||||
<form ref={containerRef} onSubmit={handleSubmit} className="relative">
|
||||
{/* Round Quick-Capture Input Bar */}
|
||||
<div
|
||||
className={`flex items-center h-9 pl-1.5 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${
|
||||
isListening
|
||||
@@ -153,28 +224,44 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
placeholder={
|
||||
isListening
|
||||
? '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"
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-1.5 ml-2 flex-shrink-0">
|
||||
{/* Options Toggle Pill (Due Date / Priority) */}
|
||||
<div className="flex items-center gap-1 ml-2 flex-shrink-0">
|
||||
{/* Target & Options Toggle Pill */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowOptions((prev) => !prev)}
|
||||
title="Priorität & Fälligkeit"
|
||||
className={`h-6 px-2 rounded-full text-[11px] flex items-center gap-1 transition-colors ${
|
||||
showOptions || priority !== 'normal' || dueDate
|
||||
title="Ziel wählen (Quick Dump, direkt als Aufgabe, auf Liste oder als Notiz) & Optionen"
|
||||
className={`h-6 px-2.5 rounded-full text-[11px] flex items-center gap-1 transition-colors ${
|
||||
showOptions || target !== 'inbox' || priority !== 'normal' || dueDate
|
||||
? '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" />
|
||||
<span className="hidden sm:inline">
|
||||
{dueDate ? dueDate : priority !== 'normal' ? priority.toUpperCase() : 'Optionen'}
|
||||
{target === 'task' ? (
|
||||
<CheckSquare className="w-3 h-3" />
|
||||
) : 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>
|
||||
{dueDate && <span className="hidden lg:inline text-[10px] opacity-80">• {dueDate.slice(5)}</span>}
|
||||
<ChevronDown className="w-3 h-3 opacity-70" />
|
||||
</button>
|
||||
|
||||
{/* Voice Dictation Button */}
|
||||
@@ -201,24 +288,158 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
: 'bg-panel-elevated text-zinc-500 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{justSaved ? (
|
||||
{justSavedLabel ? (
|
||||
<>
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expandable Quick Metadata (Floating Dropdown) */}
|
||||
{/* Expandable Target & Metadata Panel (Square Monochromatic Dropdown) */}
|
||||
{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">
|
||||
<span className="text-zinc-400 mr-1">Priorität:</span>
|
||||
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
|
||||
@@ -234,10 +455,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
key={p}
|
||||
type="button"
|
||||
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
|
||||
? 'bg-accent text-white font-medium'
|
||||
: 'bg-canvas text-zinc-400 hover:text-white border border-border'
|
||||
? 'bg-accent text-white border-accent font-medium'
|
||||
: 'bg-canvas text-zinc-400 hover:text-white border-border'
|
||||
}`}
|
||||
>
|
||||
{labels[p]}
|
||||
@@ -247,7 +468,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
</div>
|
||||
|
||||
<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
|
||||
type="date"
|
||||
value={dueDate}
|
||||
@@ -256,6 +480,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -16,9 +16,14 @@ import { api, triggerHaptic } from '../../lib/api';
|
||||
interface TasksViewProps {
|
||||
onRefreshStats: () => 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 [tasks, setTasks] = useState<Thought[]>([]);
|
||||
const [discarded, setDiscarded] = useState<Thought[]>([]);
|
||||
@@ -40,7 +45,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
}, [refreshTrigger]);
|
||||
|
||||
const handleToggleDone = async (task: Thought) => {
|
||||
triggerHaptic(15);
|
||||
|
||||
@@ -3,6 +3,7 @@ import { motion, useMotionValue, useTransform, AnimatePresence } from 'framer-mo
|
||||
import {
|
||||
X,
|
||||
Check,
|
||||
CheckSquare,
|
||||
Calendar,
|
||||
FileText,
|
||||
ShoppingCart,
|
||||
@@ -13,6 +14,9 @@ import {
|
||||
Keyboard,
|
||||
Tag,
|
||||
Clock,
|
||||
SkipForward,
|
||||
Edit3,
|
||||
Layers,
|
||||
} from 'lucide-react';
|
||||
import { SharedList, Thought } from '../../lib/types';
|
||||
import { api, triggerHaptic } from '../../lib/api';
|
||||
@@ -41,6 +45,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
});
|
||||
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(() => {
|
||||
setCards(deck);
|
||||
}, [deck]);
|
||||
@@ -48,14 +56,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
const activeCard = cards[0];
|
||||
const nextCard = cards[1];
|
||||
|
||||
useEffect(() => {
|
||||
setIsEditingCard(false);
|
||||
setEditDraft(activeCard?.content || '');
|
||||
}, [activeCard?.id]);
|
||||
|
||||
const x = useMotionValue(0);
|
||||
const rotate = useTransform(x, [-220, 0, 220], [-10, 0, 10]);
|
||||
const keepOpacity = useTransform(x, [25, 120], [0, 1]);
|
||||
const discardOpacity = useTransform(x, [-120, -25], [1, 0]);
|
||||
const rotate = useTransform(x, [-220, 0, 220], [-8, 0, 8]);
|
||||
const keepOpacity = useTransform(x, [25, 110], [0, 1]);
|
||||
const discardOpacity = useTransform(x, [-110, -25], [1, 0]);
|
||||
const cardBorderColor = useTransform(
|
||||
x,
|
||||
[-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 (
|
||||
@@ -64,22 +77,28 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
convertTo?: 'task' | 'document' | 'list_item';
|
||||
targetListId?: 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);
|
||||
|
||||
// Optimistic removal from deck
|
||||
setCards((prev) => prev.slice(1));
|
||||
setLastTriaged(current);
|
||||
// Optimistic removal from local deck
|
||||
setCards((prev) => prev.filter((c) => c.id !== targetCard.id));
|
||||
setLastTriaged(targetCard);
|
||||
setShowDateModal(false);
|
||||
setShowListSelector(false);
|
||||
setIsEditingCard(false);
|
||||
x.set(0);
|
||||
|
||||
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();
|
||||
if (options?.convertTo === 'document' && 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 () => {
|
||||
if (!lastTriaged) return;
|
||||
triggerHaptic(15);
|
||||
@@ -116,38 +171,42 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
handleAction('discard');
|
||||
} else if (e.key === 'ArrowRight' || e.key === 'l' || e.key === 'L') {
|
||||
e.preventDefault();
|
||||
handleAction('keep');
|
||||
handleAction('keep', { convertTo: 'task' });
|
||||
} else if (e.key === 't' || e.key === 'T') {
|
||||
e.preventDefault();
|
||||
setShowListSelector(false);
|
||||
setShowDateModal((prev) => !prev);
|
||||
} else if (e.key === 'd' || e.key === 'D') {
|
||||
e.preventDefault();
|
||||
handleAction('keep', { convertTo: 'document' });
|
||||
} else if (e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleSkipCard();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
return () => window.removeEventListener('keydown', onKeyDown);
|
||||
}, [activeCard]);
|
||||
}, [activeCard, cards.length]);
|
||||
|
||||
const priorityBadge = (priority: string) => {
|
||||
switch (priority) {
|
||||
case 'urgent':
|
||||
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
|
||||
</span>
|
||||
);
|
||||
case 'high':
|
||||
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
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="px-2 py-0.2 text-xs font-medium bg-[#2b2d33] text-zinc-400">
|
||||
Gedanke
|
||||
<span className="px-2 py-0.5 text-[11px] font-medium bg-panel-elevated text-zinc-400 border border-border">
|
||||
Quick Dump
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -156,15 +215,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
const sourceBadge = (source: string) => {
|
||||
if (source === 'voice') {
|
||||
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
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (source === 'webhook') {
|
||||
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">
|
||||
<Webhook className="w-3 h-3 text-[#1d8cf8]" /> Webhook
|
||||
<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-accent" /> Webhook
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -173,30 +232,30 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
|
||||
if (!activeCard) {
|
||||
return (
|
||||
<div className="max-w-xl mx-auto mt-2 p-6 bg-[#222428] border border-white/[0.08] text-center">
|
||||
<div className="w-12 h-12 bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm">
|
||||
<Sparkles className="w-6 h-6" />
|
||||
<div className="max-w-xl mx-auto mt-2 p-6 bg-panel border border-border text-center">
|
||||
<div className="w-11 h-11 bg-accent text-white flex items-center justify-center mx-auto mb-3 shadow-sm">
|
||||
<Sparkles className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white mb-1.5">Inbox Zero</h2>
|
||||
<p className="text-zinc-400 text-sm max-w-sm mx-auto mb-4">
|
||||
Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
|
||||
<h2 className="text-lg font-bold text-white mb-1">Triage-Deck ist leer</h2>
|
||||
<p className="text-zinc-400 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 <kbd className="px-1.5 py-0.5 bg-canvas border border-border text-zinc-300">C</kbd>), um neue Gedanken reinzurotzen.
|
||||
</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
|
||||
onClick={onFocusCapture}
|
||||
className="btn-primary h-9 px-4"
|
||||
className="btn-primary h-8 px-4"
|
||||
>
|
||||
+ Neuer Gedanke
|
||||
+ Quick Dump erfassen
|
||||
</button>
|
||||
|
||||
{lastTriaged && (
|
||||
<button
|
||||
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" />
|
||||
Rückgängig
|
||||
Letzte Aktion rückgängig
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -205,16 +264,16 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
}
|
||||
|
||||
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 */}
|
||||
<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">
|
||||
<span className="text-xs text-zinc-400">
|
||||
{cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend
|
||||
<span className="badge-accent">
|
||||
{cards.length} {cards.length === 1 ? 'Quick Dump' : 'Quick Dumps'} offen
|
||||
</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">
|
||||
<Keyboard className="w-3 h-3" /> H / L oder ← / →
|
||||
<Keyboard className="w-3 h-3" /> ← Wegwerfen • → Aufgabe • D Notiz • Leertaste Später
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -230,16 +289,16 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
{nextCard && (
|
||||
<div
|
||||
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>
|
||||
<p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
|
||||
<div className="text-xs text-zinc-500">Nächste Karte…</div>
|
||||
<p className="text-sm text-zinc-400 line-clamp-2">{nextCard.content}</p>
|
||||
<div className="text-[11px] text-zinc-500">Nächster Quick Dump…</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -248,45 +307,58 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
<motion.div
|
||||
key={activeCard.id}
|
||||
style={{ x, rotate, borderColor: cardBorderColor }}
|
||||
drag="x"
|
||||
drag={isEditingCard ? false : 'x'}
|
||||
dragConstraints={{ left: 0, right: 0 }}
|
||||
dragElastic={0.8}
|
||||
transition={{ type: 'spring', stiffness: 350, damping: 25 }}
|
||||
onDragEnd={(_, info) => {
|
||||
if (info.offset.x > 110 || info.velocity.x > 550) {
|
||||
handleAction('keep');
|
||||
} else if (info.offset.x < -110 || info.velocity.x < -550) {
|
||||
if (info.offset.x > 105 || info.velocity.x > 520) {
|
||||
handleAction('keep', { convertTo: 'task' });
|
||||
} else if (info.offset.x < -105 || info.velocity.x < -520) {
|
||||
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 }}
|
||||
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"
|
||||
>
|
||||
{/* Dynamic Swipe Overlays */}
|
||||
<motion.div
|
||||
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
|
||||
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>
|
||||
|
||||
{/* Card Header */}
|
||||
<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)}
|
||||
{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 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">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
<Clock className="w-3 h-3" />
|
||||
{new Date(activeCard.createdAt).toLocaleString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
@@ -295,33 +367,61 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
})}
|
||||
</span>
|
||||
</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>
|
||||
|
||||
{/* Card Footer: Tags & Due Date */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-border">
|
||||
{/* Card Body */}
|
||||
<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">
|
||||
{activeCard.tags && activeCard.tags.length > 0 ? (
|
||||
activeCard.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="badge-accent"
|
||||
>
|
||||
<span key={tag} className="badge-accent">
|
||||
<Tag className="w-2.5 h-2.5" />#{tag}
|
||||
</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>
|
||||
|
||||
{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}
|
||||
</span>
|
||||
)}
|
||||
@@ -330,35 +430,35 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Convert to Task Date Picker Popover */}
|
||||
{/* Convert to Task with Due Date Popover */}
|
||||
{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">
|
||||
<Calendar className="w-4 h-4 text-accent" />
|
||||
<span>Fälligkeitsdatum für Aufgabe:</span>
|
||||
<span>Aufgabe mit Fälligkeitsdatum anlegen:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={taskDueDate}
|
||||
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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Convert to Shared Shopping List Item Popover */}
|
||||
{/* Convert to Shared List Item Popover */}
|
||||
{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">
|
||||
In welche Liste verschieben?
|
||||
Quick Dump direkt einer Liste zuordnen:
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{lists.length > 0 ? (
|
||||
@@ -368,7 +468,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
onClick={() =>
|
||||
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.title}</span>
|
||||
@@ -381,64 +481,168 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Primary Triage Action Buttons */}
|
||||
<div className="mt-3 flex flex-wrap items-center justify-center gap-2">
|
||||
{/* Swipe Left: Discard */}
|
||||
{/* Primary Triage Decision Bar */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-6 gap-1.5">
|
||||
{/* 1. Swipe Left: Discard */}
|
||||
<button
|
||||
onClick={() => handleAction('discard')}
|
||||
title="Verwerfen (Taste H oder Pfeil links)"
|
||||
className="btn-action h-8 px-3"
|
||||
title="Wegwerfen (Taste H oder Pfeil links)"
|
||||
className="btn-action h-8 px-2.5 justify-center"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
<span>Weg damit</span>
|
||||
<X className="w-3.5 h-3.5 text-zinc-400" />
|
||||
<span>Wegwerfen</span>
|
||||
</button>
|
||||
|
||||
{/* Convert to Task with Due Date */}
|
||||
{/* 2. Skip / Later */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowListSelector(false);
|
||||
setShowDateModal((prev) => !prev);
|
||||
}}
|
||||
title="Als Aufgabe mit Datum (Taste T)"
|
||||
className={`btn-action h-8 px-3 ${showDateModal ? 'border-accent text-accent bg-accent/20' : ''}`}
|
||||
onClick={handleSkipCard}
|
||||
disabled={cards.length <= 1}
|
||||
title="Später entscheiden – ans Ende schieben (Leertaste)"
|
||||
className={`btn-action h-8 px-2.5 justify-center ${
|
||||
cards.length <= 1 ? 'opacity-40 cursor-not-allowed' : ''
|
||||
}`}
|
||||
>
|
||||
<Calendar className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Termin-To-Do</span>
|
||||
<SkipForward className="w-3.5 h-3.5 text-zinc-400" />
|
||||
<span>Später</span>
|
||||
</button>
|
||||
|
||||
{/* Convert to Workspace Document */}
|
||||
<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 */}
|
||||
{/* 3. Assign to List */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowDateModal(false);
|
||||
setShowListSelector((prev) => !prev);
|
||||
}}
|
||||
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" />
|
||||
<span>Auf Liste</span>
|
||||
</button>
|
||||
|
||||
{/* Swipe Right: Keep */}
|
||||
{/* 4. Convert to Workspace Note */}
|
||||
<button
|
||||
onClick={() => handleAction('keep')}
|
||||
title="Behalten & sichern (Taste L oder Pfeil rechts)"
|
||||
className="btn-primary h-8 px-4"
|
||||
onClick={() => handleAction('keep', { convertTo: 'document' })}
|
||||
title="In eine Workspace-Notiz umwandeln (Taste D)"
|
||||
className="btn-action h-8 px-2.5 justify-center"
|
||||
>
|
||||
<Check className="w-4 h-4" />
|
||||
<span>Behalten</span>
|
||||
<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 ${
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+32
-3
@@ -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 headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -52,6 +52,24 @@ async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||
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) {
|
||||
let errMsg = `HTTP ${res.status}`;
|
||||
try {
|
||||
@@ -107,12 +125,23 @@ export const api = {
|
||||
content: string,
|
||||
priority: PriorityLevel = 'normal',
|
||||
source: 'manual' | 'voice' = 'manual',
|
||||
dueDate = ''
|
||||
dueDate = '',
|
||||
options?: {
|
||||
target?: 'inbox' | 'task' | 'list_item' | 'document';
|
||||
targetListId?: string;
|
||||
}
|
||||
): Promise<Thought> {
|
||||
try {
|
||||
const thought = await request<Thought>('/api/v1/inbox', {
|
||||
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;
|
||||
} catch (err) {
|
||||
|
||||
@@ -28,9 +28,11 @@ export default {
|
||||
hover: 'var(--accent-hover)',
|
||||
dark: 'var(--accent-primary)',
|
||||
},
|
||||
border: 'var(--border-color)',
|
||||
},
|
||||
borderColor: {
|
||||
DEFAULT: 'var(--border-color)',
|
||||
border: 'var(--border-color)',
|
||||
subtle: 'var(--border-subtle)',
|
||||
},
|
||||
borderRadius: {
|
||||
|
||||
+26
-1
@@ -149,7 +149,13 @@ func (s *Server) authMiddleware(next http.Handler) http.Handler {
|
||||
}
|
||||
claims, err := auth.ValidateToken(s.cfg.JWTSecret, tokenStr)
|
||||
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
|
||||
}
|
||||
}
|
||||
@@ -309,6 +315,9 @@ func (s *Server) handleCaptureInbox(w http.ResponseWriter, r *http.Request) {
|
||||
Source string `json:"source"`
|
||||
DueDate string `json:"dueDate"`
|
||||
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 {
|
||||
writeError(w, http.StatusBadRequest, "Ungültiges JSON")
|
||||
@@ -318,6 +327,10 @@ func (s *Server) handleCaptureInbox(w http.ResponseWriter, r *http.Request) {
|
||||
if dueDate == "" {
|
||||
dueDate = req.DueDate2
|
||||
}
|
||||
targetListID := req.TargetListID
|
||||
if targetListID == "" {
|
||||
targetListID = req.TargetList2
|
||||
}
|
||||
|
||||
thought, err := s.store.CreateThought(userID, req.Content, req.Priority, req.Source, dueDate)
|
||||
if err != nil {
|
||||
@@ -325,6 +338,18 @@ func (s *Server) handleCaptureInbox(w http.ResponseWriter, r *http.Request) {
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user