feat(triage): implement Quick Dump notes, direct task/list assignment, and fix stale JWT user resolution

frontend/src/features/capture/InstantCaptureBar.tsx

@@ -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,59 +288,197 @@ 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="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 rounded-full transition-colors text-xs ${
-                      active
-                        ? 'bg-accent text-white font-medium'
-                        : 'bg-canvas text-zinc-400 hover:text-white border border-border'
-                    }`}
-                  >
-                    {labels[p]}
-                  </button>
-                );
-              })}
+          <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>
 
-            <div className="flex items-center gap-2">
-              <span className="text-zinc-400">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"
-              />
+            {/* 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) => {
+                  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>
         )}