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

frontend/src/features/triage/TasksView.tsx

@@ -16,9 +16,14 @@ import { api, triggerHaptic } from '../../lib/api';
 interface TasksViewProps {
   onRefreshStats: () => void;
   onOpenDocument: (docId: string) => void;
+  refreshTrigger?: number;
 }
 
-export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocument }) => {
+export const TasksView: React.FC<TasksViewProps> = ({
+  onRefreshStats,
+  onOpenDocument,
+  refreshTrigger = 0,
+}) => {
   const [filter, setFilter] = useState<'open' | 'done' | 'discarded'>('open');
   const [tasks, setTasks] = useState<Thought[]>([]);
   const [discarded, setDiscarded] = useState<Thought[]>([]);
@@ -40,7 +45,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
 
   useEffect(() => {
     loadData();
-  }, []);
+  }, [refreshTrigger]);
 
   const handleToggleDone = async (task: Thought) => {
     triggerHaptic(15);

frontend/src/features/triage/TriageDeck.tsx

@@ -3,6 +3,7 @@ import { motion, useMotionValue, useTransform, AnimatePresence } from 'framer-mo
 import {
   X,
   Check,
+  CheckSquare,
   Calendar,
   FileText,
   ShoppingCart,
@@ -13,6 +14,9 @@ import {
   Keyboard,
   Tag,
   Clock,
+  SkipForward,
+  Edit3,
+  Layers,
 } from 'lucide-react';
 import { SharedList, Thought } from '../../lib/types';
 import { api, triggerHaptic } from '../../lib/api';
@@ -41,6 +45,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   });
   const [showListSelector, setShowListSelector] = useState(false);
 
+  // Inline edit state for cleaning up a hasty Quick Dump note before converting
+  const [isEditingCard, setIsEditingCard] = useState(false);
+  const [editDraft, setEditDraft] = useState('');
+
   useEffect(() => {
     setCards(deck);
   }, [deck]);
@@ -48,14 +56,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   const activeCard = cards[0];
   const nextCard = cards[1];
 
+  useEffect(() => {
+    setIsEditingCard(false);
+    setEditDraft(activeCard?.content || '');
+  }, [activeCard?.id]);
+
   const x = useMotionValue(0);
-  const rotate = useTransform(x, [-220, 0, 220], [-10, 0, 10]);
-  const keepOpacity = useTransform(x, [25, 120], [0, 1]);
-  const discardOpacity = useTransform(x, [-120, -25], [1, 0]);
+  const rotate = useTransform(x, [-220, 0, 220], [-8, 0, 8]);
+  const keepOpacity = useTransform(x, [25, 110], [0, 1]);
+  const discardOpacity = useTransform(x, [-110, -25], [1, 0]);
   const cardBorderColor = useTransform(
     x,
     [-140, 0, 140],
-    ['rgba(239, 68, 68, 0.7)', 'rgba(255, 255, 255, 0.08)', 'rgba(34, 197, 94, 0.7)']
+    ['rgba(239, 68, 68, 0.7)', 'rgba(255, 255, 255, 0.08)', 'rgba(29, 140, 248, 0.8)']
   );
 
   const handleAction = async (
@@ -64,22 +77,28 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
       convertTo?: 'task' | 'document' | 'list_item';
       targetListId?: string;
       dueDate?: string;
+      thoughtOverride?: Thought;
     }
   ) => {
-    if (!activeCard) return;
+    const targetCard = options?.thoughtOverride || activeCard;
+    if (!targetCard) return;
 
-    const current = activeCard;
     triggerHaptic(action === 'keep' ? [10, 20] : 15);
 
-    // Optimistic removal from deck
-    setCards((prev) => prev.slice(1));
-    setLastTriaged(current);
+    // Optimistic removal from local deck
+    setCards((prev) => prev.filter((c) => c.id !== targetCard.id));
+    setLastTriaged(targetCard);
     setShowDateModal(false);
     setShowListSelector(false);
+    setIsEditingCard(false);
     x.set(0);
 
     try {
-      const updated = await api.triageAction(current.id, action, options);
+      const updated = await api.triageAction(targetCard.id, action, {
+        convertTo: options?.convertTo,
+        targetListId: options?.targetListId,
+        dueDate: options?.dueDate,
+      });
       onDeckChange();
       if (options?.convertTo === 'document' && updated.convertedRefId) {
         onOpenDocument(updated.convertedRefId);
@@ -89,6 +108,42 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
     }
   };
 
+  const handleSkipCard = () => {
+    if (cards.length <= 1) return;
+    triggerHaptic(10);
+    setShowDateModal(false);
+    setShowListSelector(false);
+    setIsEditingCard(false);
+    x.set(0);
+    setCards((prev) => [...prev.slice(1), prev[0]]);
+  };
+
+  const handleBringToFront = (thoughtId: string) => {
+    triggerHaptic(10);
+    setCards((prev) => {
+      const chosen = prev.find((c) => c.id === thoughtId);
+      if (!chosen) return prev;
+      return [chosen, ...prev.filter((c) => c.id !== thoughtId)];
+    });
+  };
+
+  const handleSaveInlineEdit = async () => {
+    if (!activeCard) return;
+    const trimmed = editDraft.trim();
+    if (!trimmed || trimmed === activeCard.content) {
+      setIsEditingCard(false);
+      return;
+    }
+    try {
+      const updated = await api.updateThought(activeCard.id, { content: trimmed });
+      setCards((prev) => prev.map((c) => (c.id === activeCard.id ? updated : c)));
+      setIsEditingCard(false);
+      onDeckChange();
+    } catch {
+      setIsEditingCard(false);
+    }
+  };
+
   const handleUndo = async () => {
     if (!lastTriaged) return;
     triggerHaptic(15);
@@ -116,38 +171,42 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         handleAction('discard');
       } else if (e.key === 'ArrowRight' || e.key === 'l' || e.key === 'L') {
         e.preventDefault();
-        handleAction('keep');
+        handleAction('keep', { convertTo: 'task' });
       } else if (e.key === 't' || e.key === 'T') {
         e.preventDefault();
+        setShowListSelector(false);
         setShowDateModal((prev) => !prev);
       } else if (e.key === 'd' || e.key === 'D') {
         e.preventDefault();
         handleAction('keep', { convertTo: 'document' });
+      } else if (e.key === ' ') {
+        e.preventDefault();
+        handleSkipCard();
       }
     };
 
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [activeCard]);
+  }, [activeCard, cards.length]);
 
   const priorityBadge = (priority: string) => {
     switch (priority) {
       case 'urgent':
         return (
-          <span className="px-2 py-0.2 text-xs font-semibold border border-[#1d8cf8] text-[#1d8cf8]">
+          <span className="px-2 py-0.5 text-[11px] font-semibold border border-accent text-accent">
             Dringend
           </span>
         );
       case 'high':
         return (
-          <span className="px-2 py-0.2 text-xs font-medium border border-white/20 text-zinc-300">
+          <span className="px-2 py-0.5 text-[11px] font-medium border border-white/20 text-zinc-200">
             Wichtig
           </span>
         );
       default:
         return (
-          <span className="px-2 py-0.2 text-xs font-medium bg-[#2b2d33] text-zinc-400">
-            Gedanke
+          <span className="px-2 py-0.5 text-[11px] font-medium bg-panel-elevated text-zinc-400 border border-border">
+            Quick Dump
           </span>
         );
     }
@@ -156,15 +215,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   const sourceBadge = (source: string) => {
     if (source === 'voice') {
       return (
-        <span className="px-2 py-0.2 text-xs bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1">
+        <span className="px-2 py-0.5 text-[11px] bg-canvas text-accent border border-border flex items-center gap-1">
           <Mic className="w-3 h-3" /> Diktat
         </span>
       );
     }
     if (source === 'webhook') {
       return (
-        <span className="px-2 py-0.2 text-xs bg-[#16171a] text-zinc-300 border border-white/[0.06] flex items-center gap-1">
-          <Webhook className="w-3 h-3 text-[#1d8cf8]" /> Webhook
+        <span className="px-2 py-0.5 text-[11px] bg-canvas text-zinc-300 border border-border flex items-center gap-1">
+          <Webhook className="w-3 h-3 text-accent" /> Webhook
         </span>
       );
     }
@@ -173,30 +232,30 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
   if (!activeCard) {
     return (
-      <div className="max-w-xl mx-auto mt-2 p-6 bg-[#222428] border border-white/[0.08] text-center">
-        <div className="w-12 h-12 bg-[#1d8cf8] text-white flex items-center justify-center mx-auto mb-4 shadow-sm">
-          <Sparkles className="w-6 h-6" />
+      <div className="max-w-xl mx-auto mt-2 p-6 bg-panel border border-border text-center">
+        <div className="w-11 h-11 bg-accent text-white flex items-center justify-center mx-auto mb-3 shadow-sm">
+          <Sparkles className="w-5 h-5" />
         </div>
-        <h2 className="text-xl font-bold text-white mb-1.5">Inbox Zero</h2>
-        <p className="text-zinc-400 text-sm max-w-sm mx-auto mb-4">
-          Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
+        <h2 className="text-lg font-bold text-white mb-1">Triage-Deck ist leer</h2>
+        <p className="text-zinc-400 text-xs sm:text-sm max-w-md mx-auto mb-4">
+          Alle Quick Dump Notizen sind einsortiert oder verworfen. Tippe oben in die Leiste (Taste <kbd className="px-1.5 py-0.5 bg-canvas border border-border text-zinc-300">C</kbd>), um neue Gedanken reinzurotzen.
         </p>
 
-        <div className="flex flex-wrap items-center justify-center gap-2.5">
+        <div className="flex flex-wrap items-center justify-center gap-2">
           <button
             onClick={onFocusCapture}
-            className="btn-primary h-9 px-4"
+            className="btn-primary h-8 px-4"
           >
-            + Neuer Gedanke
+            + Quick Dump erfassen
           </button>
 
           {lastTriaged && (
             <button
               onClick={handleUndo}
-              className="btn-action h-9 px-3.5"
+              className="btn-action h-8 px-3"
             >
               <RotateCcw className="w-3.5 h-3.5 text-accent" />
-              Rückgängig
+              Letzte Aktion rückgängig
             </button>
           )}
         </div>
@@ -205,16 +264,16 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   }
 
   return (
-    <div className="max-w-xl mx-auto select-none">
+    <div className="max-w-2xl mx-auto select-none space-y-4">
       {/* Top Deck Status & Undo Bar */}
-      <div className="flex items-center justify-between mb-3 px-1">
+      <div className="flex items-center justify-between px-1">
         <div className="flex items-center gap-2">
-          <span className="text-xs text-zinc-400">
-            {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend
+          <span className="badge-accent">
+            {cards.length} {cards.length === 1 ? 'Quick Dump' : 'Quick Dumps'} offen
           </span>
           <span className="hidden sm:inline text-xs text-zinc-600">•</span>
           <span className="hidden sm:flex items-center gap-1 text-xs text-zinc-400">
-            <Keyboard className="w-3 h-3" /> H / L oder ← / →
+            <Keyboard className="w-3 h-3" /> ← Wegwerfen • → Aufgabe • D Notiz • Leertaste Später
           </span>
         </div>
 
@@ -230,16 +289,16 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
       </div>
 
       {/* Card Stack Container */}
-      <div className="relative h-[320px] sm:h-[340px] w-full flex items-center justify-center">
+      <div className="relative h-[280px] sm:h-[300px] w-full flex items-center justify-center">
         {/* Background Preview Card */}
         {nextCard && (
           <div
             key={nextCard.id + '-preview'}
-            className="absolute inset-x-3 top-4 bottom-0 bg-panel/60 border border-border p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
+            className="absolute inset-x-3 top-3 bottom-0 bg-panel/60 border border-border p-4 opacity-40 scale-[0.97] pointer-events-none flex flex-col justify-between"
           >
             <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
-            <p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
-            <div className="text-xs text-zinc-500">Nächste Karte…</div>
+            <p className="text-sm text-zinc-400 line-clamp-2">{nextCard.content}</p>
+            <div className="text-[11px] text-zinc-500">Nächster Quick Dump…</div>
           </div>
         )}
 
@@ -248,80 +307,121 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
           <motion.div
             key={activeCard.id}
             style={{ x, rotate, borderColor: cardBorderColor }}
-            drag="x"
+            drag={isEditingCard ? false : 'x'}
             dragConstraints={{ left: 0, right: 0 }}
             dragElastic={0.8}
             transition={{ type: 'spring', stiffness: 350, damping: 25 }}
             onDragEnd={(_, info) => {
-              if (info.offset.x > 110 || info.velocity.x > 550) {
-                handleAction('keep');
-              } else if (info.offset.x < -110 || info.velocity.x < -550) {
+              if (info.offset.x > 105 || info.velocity.x > 520) {
+                handleAction('keep', { convertTo: 'task' });
+              } else if (info.offset.x < -105 || info.velocity.x < -520) {
                 handleAction('discard');
               }
             }}
-            initial={{ scale: 0.96, opacity: 0, y: 12 }}
+            initial={{ scale: 0.97, opacity: 0, y: 10 }}
             animate={{ scale: 1, opacity: 1, y: 0 }}
-            exit={{ scale: 0.92, opacity: 0 }}
+            exit={{ scale: 0.93, opacity: 0 }}
             className="relative w-full h-full bg-panel border border-border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
           >
             {/* Dynamic Swipe Overlays */}
             <motion.div
               style={{ opacity: keepOpacity }}
-              className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-accent/20 border border-accent text-accent font-semibold text-xs tracking-wide uppercase"
+              className="pointer-events-none absolute top-3.5 right-3.5 px-2.5 py-1 bg-accent/20 border border-accent text-accent font-semibold text-xs tracking-wide uppercase"
             >
-              Behalten 👉
+              Als Aufgabe 👉
             </motion.div>
 
             <motion.div
               style={{ opacity: discardOpacity }}
-              className="pointer-events-none absolute top-4 left-4 px-2.5 py-1 bg-white/10 border border-white/30 text-zinc-300 font-semibold text-xs tracking-wide uppercase"
+              className="pointer-events-none absolute top-3.5 left-3.5 px-2.5 py-1 bg-white/10 border border-white/30 text-zinc-200 font-semibold text-xs tracking-wide uppercase"
             >
-              👈 Weg damit
+              👈 Wegwerfen
             </motion.div>
 
             {/* Card Header */}
             <div className="flex flex-wrap items-center justify-between gap-2">
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1.5">
                 {priorityBadge(activeCard.priority)}
                 {sourceBadge(activeCard.source)}
               </div>
-              <span className="text-xs text-zinc-400 flex items-center gap-1">
-                <Clock className="w-3.5 h-3.5" />
-                {new Date(activeCard.createdAt).toLocaleString('de-DE', {
-                  day: '2-digit',
-                  month: '2-digit',
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })}
-              </span>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setEditDraft(activeCard.content);
+                    setIsEditingCard((prev) => !prev);
+                  }}
+                  title="Quick Dump Text vor dem Zuordnen anpassen"
+                  className="h-6 px-2 bg-canvas hover:bg-panel-hover border border-border text-[11px] text-zinc-400 hover:text-white flex items-center gap-1"
+                >
+                  <Edit3 className="w-3 h-3" />
+                  <span>Bearbeiten</span>
+                </button>
+                <span className="text-xs text-zinc-400 flex items-center gap-1">
+                  <Clock className="w-3 h-3" />
+                  {new Date(activeCard.createdAt).toLocaleString('de-DE', {
+                    day: '2-digit',
+                    month: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  })}
+                </span>
+              </div>
             </div>
 
             {/* Card Body */}
-            <div className="my-auto py-3">
-              <p className="text-lg sm:text-xl font-medium text-white leading-relaxed break-words">
-                {activeCard.content}
-              </p>
+            <div className="my-auto py-2">
+              {isEditingCard ? (
+                <div className="space-y-2">
+                  <textarea
+                    value={editDraft}
+                    onChange={(e) => setEditDraft(e.target.value)}
+                    rows={3}
+                    autoFocus
+                    className="w-full input-field p-2 text-sm text-white resize-none"
+                  />
+                  <div className="flex items-center justify-end gap-1.5">
+                    <button
+                      type="button"
+                      onClick={() => setIsEditingCard(false)}
+                      className="btn-action h-7 px-2.5 text-xs"
+                    >
+                      Abbrechen
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleSaveInlineEdit}
+                      className="btn-primary h-7 px-3 text-xs"
+                    >
+                      Text speichern
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <p className="text-base sm:text-xl font-medium text-white leading-relaxed break-words">
+                  {activeCard.content}
+                </p>
+              )}
             </div>
 
-            {/* Card Footer: Tags & Due Date */}
-            <div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-border">
+            {/* Card Footer: Tags & Hints */}
+            <div className="flex flex-wrap items-center justify-between gap-2 pt-2.5 border-t border-border">
               <div className="flex flex-wrap items-center gap-1.5">
                 {activeCard.tags && activeCard.tags.length > 0 ? (
                   activeCard.tags.map((tag) => (
-                    <span
-                      key={tag}
-                      className="badge-accent"
-                    >
+                    <span key={tag} className="badge-accent">
                       <Tag className="w-2.5 h-2.5" />#{tag}
                     </span>
                   ))
                 ) : (
-                  <span className="text-xs text-zinc-400">Wische links oder rechts</span>
+                  <span className="text-xs text-zinc-500">
+                    Links wischen = Wegwerfen • Rechts wischen = Als Aufgabe sichern
+                  </span>
                 )}
               </div>
 
               {activeCard.dueDate && (
-                <span className="px-2.5 py-0.5 bg-canvas text-zinc-300 border border-border text-xs">
+                <span className="px-2 py-0.5 bg-canvas text-zinc-300 border border-border text-xs">
                   📅 {activeCard.dueDate}
                 </span>
               )}
@@ -330,35 +430,35 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         </AnimatePresence>
       </div>
 
-      {/* Convert to Task Date Picker Popover */}
+      {/* Convert to Task with Due Date Popover */}
       {showDateModal && (
-        <div className="p-3 bg-panel border border-t-0 border-border flex flex-wrap items-center justify-between gap-3">
+        <div className="p-3 bg-panel border border-border flex flex-wrap items-center justify-between gap-3">
           <div className="flex items-center gap-2 text-xs text-zinc-300">
             <Calendar className="w-4 h-4 text-accent" />
-            <span>Fälligkeitsdatum für Aufgabe:</span>
+            <span>Aufgabe mit Fälligkeitsdatum anlegen:</span>
           </div>
           <div className="flex items-center gap-2">
             <input
               type="date"
               value={taskDueDate}
               onChange={(e) => setTaskDueDate(e.target.value)}
-              className="input-field px-3 py-1 text-xs"
+              className="input-field px-2.5 py-1 text-xs"
             />
             <button
               onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
-              className="btn-primary"
+              className="btn-primary h-7 px-3 text-xs"
             >
-              Speichern
+              Als Termin-Aufgabe speichern
             </button>
           </div>
         </div>
       )}
 
-      {/* Convert to Shared Shopping List Item Popover */}
+      {/* Convert to Shared List Item Popover */}
       {showListSelector && (
-        <div className="p-3 bg-panel border border-t-0 border-border">
+        <div className="p-3 bg-panel border border-border">
           <p className="text-xs text-zinc-400 mb-2">
-            In welche Liste verschieben?
+            Quick Dump direkt einer Liste zuordnen:
           </p>
           <div className="flex flex-wrap gap-1.5">
             {lists.length > 0 ? (
@@ -368,7 +468,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                   onClick={() =>
                     handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
                   }
-                  className="btn-action"
+                  className="btn-action h-7 px-2.5 text-xs"
                 >
                   <span>{lst.icon}</span>
                   <span>{lst.title}</span>
@@ -381,64 +481,168 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         </div>
       )}
 
-      {/* Primary Triage Action Buttons */}
-      <div className="mt-3 flex flex-wrap items-center justify-center gap-2">
-        {/* Swipe Left: Discard */}
+      {/* Primary Triage Decision Bar */}
+      <div className="grid grid-cols-2 sm:grid-cols-6 gap-1.5">
+        {/* 1. Swipe Left: Discard */}
         <button
           onClick={() => handleAction('discard')}
-          title="Verwerfen (Taste H oder Pfeil links)"
-          className="btn-action h-8 px-3"
+          title="Wegwerfen (Taste H oder Pfeil links)"
+          className="btn-action h-8 px-2.5 justify-center"
         >
-          <X className="w-4 h-4" />
-          <span>Weg damit</span>
+          <X className="w-3.5 h-3.5 text-zinc-400" />
+          <span>Wegwerfen</span>
         </button>
 
-        {/* Convert to Task with Due Date */}
+        {/* 2. Skip / Later */}
         <button
-          onClick={() => {
-            setShowListSelector(false);
-            setShowDateModal((prev) => !prev);
-          }}
-          title="Als Aufgabe mit Datum (Taste T)"
-          className={`btn-action h-8 px-3 ${showDateModal ? 'border-accent text-accent bg-accent/20' : ''}`}
+          onClick={handleSkipCard}
+          disabled={cards.length <= 1}
+          title="Später entscheiden – ans Ende schieben (Leertaste)"
+          className={`btn-action h-8 px-2.5 justify-center ${
+            cards.length <= 1 ? 'opacity-40 cursor-not-allowed' : ''
+          }`}
         >
-          <Calendar className="w-3.5 h-3.5 text-accent" />
-          <span>Termin-To-Do</span>
+          <SkipForward className="w-3.5 h-3.5 text-zinc-400" />
+          <span>Später</span>
         </button>
 
-        {/* Convert to Workspace Document */}
-        <button
-          onClick={() => handleAction('keep', { convertTo: 'document' })}
-          title="In Notiz / Projekt umwandeln (Taste D)"
-          className="btn-action h-8 px-3"
-        >
-          <FileText className="w-3.5 h-3.5 text-accent" />
-          <span>Als Notiz</span>
-        </button>
-
-        {/* Convert to Shared Shopping List Item */}
+        {/* 3. Assign to List */}
         <button
           onClick={() => {
             setShowDateModal(false);
             setShowListSelector((prev) => !prev);
           }}
           title="Auf eine geteilte Liste setzen"
-          className={`btn-action h-8 px-3 ${showListSelector ? 'border-accent text-accent bg-accent/20' : ''}`}
+          className={`btn-action h-8 px-2.5 justify-center ${
+            showListSelector ? 'border-accent text-accent bg-accent/20' : ''
+          }`}
         >
           <ShoppingCart className="w-3.5 h-3.5 text-accent" />
           <span>Auf Liste</span>
         </button>
 
-        {/* Swipe Right: Keep */}
+        {/* 4. Convert to Workspace Note */}
         <button
-          onClick={() => handleAction('keep')}
-          title="Behalten & sichern (Taste L oder Pfeil rechts)"
-          className="btn-primary h-8 px-4"
+          onClick={() => handleAction('keep', { convertTo: 'document' })}
+          title="In eine Workspace-Notiz umwandeln (Taste D)"
+          className="btn-action h-8 px-2.5 justify-center"
         >
-          <Check className="w-4 h-4" />
-          <span>Behalten</span>
+          <FileText className="w-3.5 h-3.5 text-accent" />
+          <span>Als Notiz</span>
+        </button>
+
+        {/* 5. Task with Date */}
+        <button
+          onClick={() => {
+            setShowListSelector(false);
+            setShowDateModal((prev) => !prev);
+          }}
+          title="Als Aufgabe mit Fälligkeitsdatum (Taste T)"
+          className={`btn-action h-8 px-2.5 justify-center ${
+            showDateModal ? 'border-accent text-accent bg-accent/20' : ''
+          }`}
+        >
+          <Calendar className="w-3.5 h-3.5 text-accent" />
+          <span>Mit Termin</span>
+        </button>
+
+        {/* 6. Swipe Right: Immediate Task */}
+        <button
+          onClick={() => handleAction('keep', { convertTo: 'task' })}
+          title="Sofort als Aufgabe übernehmen (Taste L oder Pfeil rechts)"
+          className="btn-primary h-8 px-3 justify-center"
+        >
+          <CheckSquare className="w-3.5 h-3.5" />
+          <span>Als Aufgabe</span>
         </button>
       </div>
+
+      {/* Waiting Quick Dump Queue List */}
+      {cards.length > 1 && (
+        <div className="pt-2">
+          <div className="flex items-center justify-between mb-1.5 px-0.5">
+            <span className="text-xs font-semibold uppercase tracking-wider text-zinc-400 flex items-center gap-1.5">
+              <Layers className="w-3.5 h-3.5 text-accent" />
+              Warteschlange ({cards.length - 1} weitere Quick Dumps)
+            </span>
+            <span className="text-[11px] text-zinc-500">
+              Klicken zum Vorholen oder direkt zuordnen
+            </span>
+          </div>
+
+          <div className="bg-panel border border-border divide-y divide-border max-h-60 overflow-y-auto">
+            {cards.slice(1).map((item) => (
+              <div
+                key={item.id}
+                className="px-3 py-2 flex items-center justify-between gap-2 hover:bg-panel-hover transition-colors group"
+              >
+                <div
+                  onClick={() => handleBringToFront(item.id)}
+                  className="flex-1 min-w-0 cursor-pointer flex items-center gap-2"
+                >
+                  <span className="w-1.5 h-1.5 bg-accent flex-shrink-0" />
+                  <span className="text-xs text-zinc-200 truncate group-hover:text-white">
+                    {item.content}
+                  </span>
+                </div>
+
+                <div className="flex items-center gap-1 flex-shrink-0">
+                  <button
+                    type="button"
+                    onClick={() =>
+                      handleAction('keep', { convertTo: 'task', thoughtOverride: item })
+                    }
+                    title="Direkt zur Aufgabe machen"
+                    className="h-6 px-2 bg-canvas hover:bg-accent hover:text-white border border-border text-[11px] text-zinc-300 flex items-center gap-1 transition-colors"
+                  >
+                    <Check className="w-3 h-3" />
+                    <span className="hidden sm:inline">Aufgabe</span>
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() =>
+                      handleAction('keep', { convertTo: 'document', thoughtOverride: item })
+                    }
+                    title="Direkt als Workspace-Notiz anlegen"
+                    className="h-6 px-2 bg-canvas hover:bg-panel-elevated border border-border text-[11px] text-zinc-300 flex items-center gap-1 transition-colors"
+                  >
+                    <FileText className="w-3 h-3 text-accent" />
+                    <span className="hidden sm:inline">Notiz</span>
+                  </button>
+
+                  {lists.length > 0 && (
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleAction('keep', {
+                          convertTo: 'list_item',
+                          targetListId: lists[0].id,
+                          thoughtOverride: item,
+                        })
+                      }
+                      title={`Direkt auf Liste "${lists[0].title}" setzen`}
+                      className="h-6 px-2 bg-canvas hover:bg-panel-elevated border border-border text-[11px] text-zinc-300 flex items-center gap-1 transition-colors"
+                    >
+                      <ShoppingCart className="w-3 h-3 text-accent" />
+                      <span className="hidden md:inline">{lists[0].title}</span>
+                    </button>
+                  )}
+
+                  <button
+                    type="button"
+                    onClick={() => handleAction('discard', { thoughtOverride: item })}
+                    title="Wegwerfen"
+                    className="h-6 w-6 bg-canvas hover:bg-panel-elevated border border-border text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 };