Dev #1
No files matched your search
+15
-6
@@ -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 = (
|
||||||
setDeck((prev) => [thought, ...prev]);
|
thought: Thought,
|
||||||
setStats((prev) => ({ ...prev, inboxCount: prev.inboxCount + 1 }));
|
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();
|
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,59 +288,197 @@ 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">
|
||||||
<div className="flex items-center gap-1.5">
|
{/* Row 1: Where should this entry go? */}
|
||||||
<span className="text-zinc-400 mr-1">Priorität:</span>
|
<div>
|
||||||
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
|
<div className="flex items-center justify-between mb-1.5">
|
||||||
const labels: Record<PriorityLevel, string> = {
|
<span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
|
||||||
low: 'Niedrig',
|
Wohin damit? {content.trim() ? '(Klick speichert sofort oder wählt Ziel)' : '(Ziel für Eingabe wählen)'}
|
||||||
normal: 'Normal',
|
</span>
|
||||||
high: 'Hoch',
|
<span className="text-[11px] text-zinc-500">
|
||||||
urgent: 'Dringend',
|
Standard: Quick Dump für späteres Swipen
|
||||||
};
|
</span>
|
||||||
const active = priority === p;
|
</div>
|
||||||
return (
|
|
||||||
<button
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-1.5">
|
||||||
key={p}
|
{/* Option 1: Quick Dump (Triage) */}
|
||||||
type="button"
|
<button
|
||||||
onClick={() => setPriority(p)}
|
type="button"
|
||||||
className={`px-2.5 py-0.5 rounded-full transition-colors text-xs ${
|
onClick={() => {
|
||||||
active
|
setTarget('inbox');
|
||||||
? 'bg-accent text-white font-medium'
|
if (content.trim()) {
|
||||||
: 'bg-canvas text-zinc-400 hover:text-white border border-border'
|
executeCapture('inbox');
|
||||||
}`}
|
}
|
||||||
>
|
}}
|
||||||
{labels[p]}
|
className={`h-8 px-2.5 border flex items-center gap-1.5 text-left transition-colors ${
|
||||||
</button>
|
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>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
{/* Optional Sub-Row: Shared List Picker (always shown if lists exist so 1-click list assignment is instant) */}
|
||||||
<span className="text-zinc-400">Fällig am:</span>
|
{lists.length > 0 && (
|
||||||
<input
|
<div className="pt-2 border-t border-border flex flex-wrap items-center gap-1.5">
|
||||||
type="date"
|
<span className="text-zinc-400 mr-1 flex items-center gap-1">
|
||||||
value={dueDate}
|
<ShoppingCart className="w-3 h-3 text-accent" />
|
||||||
onChange={(e) => setDueDate(e.target.value)}
|
Liste:
|
||||||
className="input-field px-2 py-0.5 text-xs"
|
</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) => {
|
||||||
|
const labels: Record<PriorityLevel, string> = {
|
||||||
|
low: 'Niedrig',
|
||||||
|
normal: 'Normal',
|
||||||
|
high: 'Hoch',
|
||||||
|
urgent: 'Dringend',
|
||||||
|
};
|
||||||
|
const active = priority === p;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={p}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setPriority(p)}
|
||||||
|
className={`px-2.5 py-0.5 border transition-colors text-xs ${
|
||||||
|
active
|
||||||
|
? 'bg-accent text-white border-accent font-medium'
|
||||||
|
: 'bg-canvas text-zinc-400 hover:text-white border-border'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{labels[p]}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<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}
|
||||||
|
onChange={(e) => setDueDate(e.target.value)}
|
||||||
|
className="input-field px-2 py-0.5 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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,80 +307,121 @@ 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>
|
||||||
<span className="text-xs text-zinc-400 flex items-center gap-1">
|
<div className="flex items-center gap-2">
|
||||||
<Clock className="w-3.5 h-3.5" />
|
<button
|
||||||
{new Date(activeCard.createdAt).toLocaleString('de-DE', {
|
type="button"
|
||||||
day: '2-digit',
|
onClick={() => {
|
||||||
month: '2-digit',
|
setEditDraft(activeCard.content);
|
||||||
hour: '2-digit',
|
setIsEditingCard((prev) => !prev);
|
||||||
minute: '2-digit',
|
}}
|
||||||
})}
|
title="Quick Dump Text vor dem Zuordnen anpassen"
|
||||||
</span>
|
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 h-3" />
|
||||||
|
{new Date(activeCard.createdAt).toLocaleString('de-DE', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Card Body */}
|
{/* Card Body */}
|
||||||
<div className="my-auto py-3">
|
<div className="my-auto py-2">
|
||||||
<p className="text-lg sm:text-xl font-medium text-white leading-relaxed break-words">
|
{isEditingCard ? (
|
||||||
{activeCard.content}
|
<div className="space-y-2">
|
||||||
</p>
|
<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>
|
</div>
|
||||||
|
|
||||||
{/* Card Footer: Tags & Due Date */}
|
{/* Card Footer: Tags & Hints */}
|
||||||
<div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-border">
|
<div className="flex flex-wrap items-center 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>
|
</button>
|
||||||
</div>
|
</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>
|
</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 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) {
|
||||||
|
|||||||
@@ -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: {
|
||||||
|
|||||||
+31
-6
@@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -304,11 +310,14 @@ func (s *Server) handleStats(w http.ResponseWriter, r *http.Request) {
|
|||||||
func (s *Server) handleCaptureInbox(w http.ResponseWriter, r *http.Request) {
|
func (s *Server) handleCaptureInbox(w http.ResponseWriter, r *http.Request) {
|
||||||
userID := auth.GetUserID(r.Context())
|
userID := auth.GetUserID(r.Context())
|
||||||
var req struct {
|
var req struct {
|
||||||
Content string `json:"content"`
|
Content string `json:"content"`
|
||||||
Priority string `json:"priority"`
|
Priority string `json:"priority"`
|
||||||
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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user