Dev #5

Merged
sandrodach merged 19 commits from dev into main 2026-10-26 13:35:00 +01:00
4 changed files with 128 additions and 58 deletions
Showing only changes of commit baac20ea10 - Show all commits

No files matched your search

+6 -2
View File
@@ -1034,9 +1034,11 @@ export const App: React.FC = () => {
<div className="flex items-center justify-between pb-3 border-b border-border mb-3">
<div className="flex items-center gap-2">
<div className="w-6 h-6 rounded-btn bg-accent/15 text-accent flex items-center justify-center">
<Plus className="w-4 h-4" />
{activeTab === 'triage' ? <Layers className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
</div>
<h3 className="text-sm font-semibold text-main">Schnell erfassen</h3>
<h3 className="text-sm font-semibold text-main">
{activeTab === 'triage' ? 'Quick Dump erfassen' : 'Schnell erfassen'}
</h3>
</div>
<button
type="button"
@@ -1052,6 +1054,8 @@ export const App: React.FC = () => {
<InstantCaptureBar
inlineOptions={true}
defaultShowOptions={true}
hideTargetPicker={activeTab === 'triage'}
fixedTarget={activeTab === 'triage' ? 'inbox' : undefined}
onCaptured={(thought, target) => {
handleCaptured(thought, target);
setShowMobileCapture(false);
@@ -11,6 +11,8 @@ import {
FileText,
Layers,
ChevronDown,
AlertTriangle,
Flame,
} from 'lucide-react';
import { PriorityLevel, SharedList, Thought } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';
@@ -23,6 +25,8 @@ interface InstantCaptureBarProps {
autoFocusTrigger?: number;
inlineOptions?: boolean;
defaultShowOptions?: boolean;
hideTargetPicker?: boolean;
fixedTarget?: CaptureTarget;
}
export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
@@ -31,13 +35,15 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
autoFocusTrigger = 0,
inlineOptions = false,
defaultShowOptions = false,
hideTargetPicker = false,
fixedTarget,
}) => {
const [content, setContent] = useState('');
const [priority, setPriority] = useState<PriorityLevel>('normal');
const [dueDate, setDueDate] = useState('');
const [target, setTarget] = useState<CaptureTarget>('inbox');
const [target, setTarget] = useState<CaptureTarget>(fixedTarget || 'inbox');
const [targetListId, setTargetListId] = useState<string>('');
const [showOptions, setShowOptions] = useState(defaultShowOptions);
const [showOptions, setShowOptions] = useState(defaultShowOptions || hideTargetPicker);
const [isListening, setIsListening] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [justSavedLabel, setJustSavedLabel] = useState<string | null>(null);
@@ -169,7 +175,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
const trimmed = content.trim();
if (!trimmed || isSubmitting) return;
const effectiveTarget = overrideTarget || target;
const effectiveTarget = fixedTarget || overrideTarget || target;
const effectiveListId =
overrideListId || targetListId || (lists.length > 0 ? lists[0].id : '');
const capturedPriority = priority;
@@ -181,8 +187,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
setIsMultiline(false);
setPriority('normal');
setDueDate('');
setTarget('inbox');
setShowOptions(false);
setTarget(fixedTarget || 'inbox');
setShowOptions(defaultShowOptions || hideTargetPicker);
setIsSubmitting(true);
triggerHaptic(15);
if (inputRef.current) {
@@ -196,7 +202,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
? 'Auf Liste!'
: effectiveTarget === 'document'
? 'Als Notiz!'
: 'Im Dump!';
: 'In Triage!';
setJustSavedLabel(savedMsg);
setTimeout(() => setJustSavedLabel(null), 1600);
inputRef.current?.focus();
@@ -275,6 +281,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
placeholder={
isListening
? 'Ich höre zu…'
: hideTargetPicker || fixedTarget === 'inbox'
? 'Quick Dump erfassen… (Enter zum Speichern)'
: target === 'task'
? 'Neue Aufgabe direkt anlegen… (Enter / Shift+Enter für Mehrzeiler)'
: target === 'list_item'
@@ -293,7 +301,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
isMultiline ? 'self-end mb-0.5' : ''
}`}
>
{/* Target & Options Toggle Pill */}
{/* Target & Options Toggle Pill (Hidden when target picker is disabled) */}
{!hideTargetPicker && (
<button
type="button"
onClick={() => setShowOptions((prev) => !prev)}
@@ -319,6 +328,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
{dueDate && <span className="hidden lg:inline text-[10px] opacity-80">• {dueDate.slice(5)}</span>}
<ChevronDown className={`w-3 h-3 opacity-70 transition-transform ${showOptions ? 'rotate-180' : ''}`} />
</button>
)}
{/* Voice Dictation Button */}
<button
@@ -347,13 +357,15 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
{justSavedLabel ? (
<>
<Check className="w-3 h-3" />
<span className="hidden sm:inline">{justSavedLabel}</span>
<span className="inline">{justSavedLabel}</span>
</>
) : (
<>
<ArrowUp className="w-3 h-3" />
<span className="hidden sm:inline">
{target === 'task'
<span className="inline">
{hideTargetPicker || (fixedTarget || target) === 'inbox'
? 'Quick Dump'
: target === 'task'
? 'Als Aufgabe'
: target === 'list_item'
? 'Auf Liste'
@@ -376,7 +388,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
: 'absolute top-full left-0 right-0 mt-1.5 z-50 p-3 panel-surface shadow-panel space-y-3 text-xs'
}
>
{/* Row 1: Where should this entry go? */}
{/* Row 1: Where should this entry go? (Omitted when hideTargetPicker is true) */}
{!hideTargetPicker && (
<>
<div>
<div className="flex items-center justify-between mb-1.5">
<span className="text-[11px] font-semibold uppercase tracking-wider text-muted">
@@ -499,39 +513,46 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
})}
</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-muted mr-1">Priorität:</span>
<div className={`${!hideTargetPicker ? 'pt-2 border-t border-border' : ''} flex flex-wrap items-center justify-between gap-2.5`}>
<div className="flex flex-wrap items-center gap-1.5">
<span className="text-muted text-[11px] font-semibold 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 config: Record<PriorityLevel, { label: string; icon?: React.ReactNode; activeClass: string }> = {
low: { label: 'Niedrig', activeClass: 'bg-canvas border-strong text-main font-semibold shadow-xs' },
normal: { label: 'Normal', activeClass: 'bg-accent/15 border-accent text-accent font-semibold shadow-xs' },
high: { label: 'Wichtig', icon: <AlertTriangle className="w-3 h-3 text-status-warn" />, activeClass: 'bg-status-warn/15 border-status-warn text-status-warn font-semibold shadow-xs' },
urgent: { label: 'Dringend', icon: <Flame className="w-3 h-3 text-status-err" />, activeClass: 'bg-status-err/15 border-status-err text-status-err font-semibold shadow-xs' },
};
const active = priority === p;
const item = config[p];
return (
<button
key={p}
type="button"
onClick={() => setPriority(p)}
className={`min-h-[30px] px-2.5 py-1 border rounded-btn transition-colors text-xs cursor-pointer ${
onClick={() => {
triggerHaptic(10);
setPriority(p);
}}
className={`min-h-[30px] px-2.5 py-1 border rounded-btn text-xs flex items-center gap-1 transition-colors cursor-pointer ${
active
? 'bg-accent text-on-accent border-accent font-medium'
? item.activeClass
: 'bg-canvas text-muted hover:text-main border-border'
}`}
>
{labels[p]}
{item.icon}
<span>{item.label}</span>
</button>
);
})}
</div>
<div className="flex items-center gap-2">
<span className="text-muted flex items-center gap-1">
<Calendar className="w-3 h-3 text-accent" />
<div className="flex items-center gap-1.5">
<span className="text-muted text-[11px] font-semibold flex items-center gap-1">
<Calendar className="w-3.5 h-3.5 text-accent" />
Fällig am:
</span>
<input
@@ -335,29 +335,49 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
</div>
</div>
{/* Priority Buttons */}
{/* Priority Buttons (4 Buttons) */}
<div className="space-y-1.5 pt-1 border-t border-border">
<label className="block text-xs font-semibold text-main">
Priorität:
</label>
<div className="flex flex-wrap items-center gap-1.5">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-1.5">
<button
type="button"
onClick={() => onUpdatePriority(task, 'normal')}
className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border ${
!task.priority || task.priority === 'normal' || task.priority === 'low'
? 'bg-panel border-accent text-main font-semibold'
onClick={() => {
triggerHaptic(10);
onUpdatePriority(task, 'low');
}}
className={`h-8 px-2 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
task.priority === 'low'
? 'bg-canvas border-strong text-main font-semibold shadow-xs'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
Normal / Keine
<span>Niedrig</span>
</button>
<button
type="button"
onClick={() => onUpdatePriority(task, 'high')}
className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border flex items-center gap-1 ${
onClick={() => {
triggerHaptic(10);
onUpdatePriority(task, 'normal');
}}
className={`h-8 px-2 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
!task.priority || task.priority === 'normal'
? 'bg-accent/15 border-accent text-accent font-semibold shadow-xs'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
<span>Normal</span>
</button>
<button
type="button"
onClick={() => {
triggerHaptic(10);
onUpdatePriority(task, 'high');
}}
className={`h-8 px-2 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
task.priority === 'high'
? 'bg-status-warn/15 border-status-warn text-status-warn font-semibold'
? 'bg-status-warn/15 border-status-warn text-status-warn font-semibold shadow-xs'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
@@ -366,10 +386,13 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
</button>
<button
type="button"
onClick={() => onUpdatePriority(task, 'urgent')}
className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border flex items-center gap-1 ${
onClick={() => {
triggerHaptic(10);
onUpdatePriority(task, 'urgent');
}}
className={`h-8 px-2 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
task.priority === 'urgent'
? 'bg-status-err/15 border-status-err text-status-err font-semibold'
? 'bg-status-err/15 border-status-err text-status-err font-semibold shadow-xs'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
+39 -17
View File
@@ -1660,32 +1660,54 @@ export const TasksView: React.FC<TasksViewProps> = ({
</div>
)}
{/* Priority & Due Date */}
<div className="grid grid-cols-2 gap-2 pt-1">
<div>
<label className="text-[11px] font-semibold text-muted block mb-1">Priorität</label>
<select
value={mobileCreatePriority}
onChange={(e) => setMobileCreatePriority(e.target.value as PriorityLevel)}
className="w-full input-field px-2 py-2 text-xs bg-panel"
{/* Priority - 4 Buttons */}
<div className="space-y-1.5 pt-1">
<label className="text-[11px] font-semibold text-muted block">Priorität</label>
<div className="grid grid-cols-4 gap-1.5">
{(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
const config: Record<PriorityLevel, { label: string; icon?: React.ReactNode; activeClass: string }> = {
low: { label: 'Niedrig', activeClass: 'bg-canvas border-strong text-main font-semibold shadow-xs' },
normal: { label: 'Normal', activeClass: 'bg-accent/15 border-accent text-accent font-semibold shadow-xs' },
high: { label: 'Wichtig', icon: <AlertTriangle className="w-3 h-3 text-status-warn" />, activeClass: 'bg-status-warn/15 border-status-warn text-status-warn font-semibold shadow-xs' },
urgent: { label: 'Dringend', icon: <Flame className="w-3 h-3 text-status-err" />, activeClass: 'bg-status-err/15 border-status-err text-status-err font-semibold shadow-xs' },
};
const active = mobileCreatePriority === p;
const item = config[p];
return (
<button
key={p}
type="button"
onClick={() => {
triggerHaptic(10);
setMobileCreatePriority(p);
}}
className={`h-9 px-1 text-xs rounded-btn font-medium transition-colors border flex items-center justify-center gap-1 cursor-pointer ${
active
? item.activeClass
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
<option value="normal">Normal</option>
<option value="high">⚠️ Wichtig</option>
<option value="urgent">🔥 Dringend</option>
<option value="low">Niedrig</option>
</select>
{item.icon}
<span className="truncate">{item.label}</span>
</button>
);
})}
</div>
</div>
<div>
<label className="text-[11px] font-semibold text-muted block mb-1">Fällig am</label>
{/* Due Date */}
<div className="space-y-1 pt-1">
<label className="text-[11px] font-semibold text-muted flex items-center gap-1">
<Calendar className="w-3.5 h-3.5 text-accent" />
<span>Fällig am</span>
</label>
<input
type="date"
value={mobileCreateDueDate}
onChange={(e) => setMobileCreateDueDate(e.target.value)}
className="w-full input-field px-2 py-2 text-xs"
className="w-full input-field px-3 py-2 text-xs"
/>
</div>
</div>
<div className="pt-2 flex justify-end gap-2">
<button