From c02c7d20de8cb8ad33ef5b90afdfab50b33b97c3 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sun, 25 Oct 2026 14:10:13 +0100
Subject: [PATCH] feat(mobile): center bottom + FAB, floating header with left
 logo & right avatar, long-press triage sheet, and large swipeable queue

---
 frontend/src/App.tsx                        | 159 ++---
 frontend/src/features/triage/TriageDeck.tsx | 616 ++++++++++++++++----
 2 files changed, 585 insertions(+), 190 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5228159..e01fee9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -330,24 +330,44 @@ export const App: React.FC = () => {
 
   return (
     <div className="min-h-screen bg-canvas text-main flex flex-col font-sans selection:bg-accent/30">
-      {/* Top Header Bar */}
-      <header className="sticky top-0 z-30 bg-panel border-b border-border shadow-sm">
-        {/* Mobile Header: Centered Logo & Instance Title */}
-        <div className="sm:hidden flex items-center justify-center relative h-11 px-4">
-          <div
+      {/* Top Header Bar: Floating on mobile, solid panel on desktop */}
+      <header className="sticky top-0 z-30 bg-canvas/85 backdrop-blur-md sm:bg-panel sm:border-b sm:border-border sm:shadow-sm">
+        {/* Mobile Header: Floating Bar with Larger Logo Left (Triage Home) & Profile Avatar Right */}
+        <div className="sm:hidden flex items-center justify-between h-14 px-4 pt-1">
+          <button
+            type="button"
             onClick={() => {
               triggerHaptic(10);
               setActiveTab('triage');
             }}
-            className="flex items-center gap-2 cursor-pointer select-none"
+            className="h-11 px-2 -ml-2 rounded-xl flex items-center gap-2.5 cursor-pointer select-none active:scale-95 transition-transform"
+            title="Zur Startseite (Triage)"
           >
-            <div className="w-6 h-6 bg-accent text-on-accent rounded-btn flex items-center justify-center">
-              <Brain className="w-3.5 h-3.5" />
+            <div className="w-8 h-8 bg-accent text-on-accent rounded-xl shadow-sm flex items-center justify-center">
+              <Brain className="w-4 h-4" />
             </div>
-            <span className="font-bold text-sm text-main tracking-tight">
+            <span className="font-bold text-base text-main tracking-tight">
               {authStatus.instanceName || 'MindSift'}
             </span>
-          </div>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => {
+              triggerHaptic(10);
+              setShowMobileProfile(true);
+            }}
+            className={`w-11 h-11 -mr-1.5 rounded-full flex items-center justify-center transition-transform active:scale-95 cursor-pointer ${
+              activeTab === 'user_settings' || activeTab === 'admin_settings' || activeTab === 'help'
+                ? 'ring-2 ring-accent'
+                : ''
+            }`}
+            title="Profil & Einstellungen"
+          >
+            <div className="w-8 h-8 rounded-full bg-accent text-on-accent text-xs font-bold shadow-sm flex items-center justify-center">
+              {user.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
+            </div>
+          </button>
         </div>
 
         {/* Desktop Header: 3-column Layout (Logo, InstantCaptureBar, Profile Pill) */}
@@ -648,113 +668,106 @@ export const App: React.FC = () => {
         </ViewErrorBoundary>
       </main>
 
-      {/* MOBILE BOTTOM NAVIGATION BAR */}
-      <nav className="sm:hidden fixed bottom-0 left-0 right-0 z-40 bg-panel/95 backdrop-blur-md border-t border-border px-3 py-1 flex items-center justify-around pb-[calc(0.4rem+env(safe-area-inset-bottom))] shadow-panel">
-        {/* Tab 1: Triage */}
+      {/* MOBILE BOTTOM NAVIGATION BAR (5 equal columns -> + FAB is dead-center) */}
+      <nav className="sm:hidden fixed bottom-0 left-0 right-0 z-40 bg-panel/95 backdrop-blur-md border-t border-border px-2 pt-1.5 pb-[calc(0.5rem+env(safe-area-inset-bottom))] grid grid-cols-5 items-center shadow-panel">
+        {/* Col 1: Triage */}
         <button
           type="button"
           onClick={() => {
             triggerHaptic(10);
             setActiveTab('triage');
           }}
-          className={`p-2 rounded-btn flex flex-col items-center justify-center transition-colors relative cursor-pointer ${
-            activeTab === 'triage' ? 'text-accent' : 'text-muted hover:text-main'
+          className={`min-h-[48px] rounded-xl flex flex-col items-center justify-center gap-0.5 transition-colors relative cursor-pointer active:scale-95 ${
+            activeTab === 'triage' ? 'text-accent font-semibold' : 'text-muted hover:text-main'
           }`}
           title="Triage"
         >
-          <Layers className="w-5 h-5" />
-          {stats.inboxCount > 0 && (
-            <span className="absolute -top-0.5 -right-0.5 min-w-[15px] h-[15px] px-0.5 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
-              {stats.inboxCount}
-            </span>
-          )}
+          <div className="relative">
+            <Layers className="w-5 h-5" />
+            {stats.inboxCount > 0 && (
+              <span className="absolute -top-1.5 -right-2.5 min-w-[16px] h-[16px] px-1 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
+                {stats.inboxCount}
+              </span>
+            )}
+          </div>
+          <span className="text-[10px] leading-tight">Triage</span>
         </button>
 
-        {/* Tab 2: Aufgaben */}
+        {/* Col 2: Aufgaben */}
         <button
           type="button"
           onClick={() => {
             triggerHaptic(10);
             setActiveTab('tasks');
           }}
-          className={`p-2 rounded-btn flex flex-col items-center justify-center transition-colors relative cursor-pointer ${
-            activeTab === 'tasks' ? 'text-accent' : 'text-muted hover:text-main'
+          className={`min-h-[48px] rounded-xl flex flex-col items-center justify-center gap-0.5 transition-colors relative cursor-pointer active:scale-95 ${
+            activeTab === 'tasks' ? 'text-accent font-semibold' : 'text-muted hover:text-main'
           }`}
           title="Aufgaben"
         >
-          <CheckSquare className="w-5 h-5" />
-          {stats.tasksOpenCount > 0 && (
-            <span className="absolute -top-0.5 -right-0.5 min-w-[15px] h-[15px] px-0.5 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
-              {stats.tasksOpenCount}
-            </span>
-          )}
+          <div className="relative">
+            <CheckSquare className="w-5 h-5" />
+            {stats.tasksOpenCount > 0 && (
+              <span className="absolute -top-1.5 -right-2.5 min-w-[16px] h-[16px] px-1 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
+                {stats.tasksOpenCount}
+              </span>
+            )}
+          </div>
+          <span className="text-[10px] leading-tight">Aufgaben</span>
         </button>
 
-        {/* CENTER ACTION: + Quick-Add FAB */}
-        <button
-          type="button"
-          onClick={() => {
-            triggerHaptic(15);
-            setShowMobileCapture(true);
-          }}
-          className="w-12 h-12 -mt-5 rounded-full bg-accent text-on-accent shadow-lg flex items-center justify-center active:scale-90 transition-transform border-4 border-panel cursor-pointer"
-          title="Schnell erfassen (+)"
-        >
-          <Plus className="w-6 h-6 stroke-[2.5]" />
-        </button>
+        {/* Col 3 (EXACT CENTER): + Quick-Add FAB */}
+        <div className="flex items-center justify-center">
+          <button
+            type="button"
+            onClick={() => {
+              triggerHaptic(15);
+              setShowMobileCapture(true);
+            }}
+            className="w-14 h-14 -mt-6 rounded-full bg-accent text-on-accent shadow-lg flex items-center justify-center active:scale-90 transition-transform border-4 border-panel cursor-pointer"
+            title="Schnell erfassen (+)"
+          >
+            <Plus className="w-7 h-7 stroke-[2.5]" />
+          </button>
+        </div>
 
-        {/* Tab 3: Workspace */}
+        {/* Col 4: Workspace */}
         <button
           type="button"
           onClick={() => {
             triggerHaptic(10);
             setActiveTab('workspace');
           }}
-          className={`p-2 rounded-btn flex flex-col items-center justify-center transition-colors relative cursor-pointer ${
-            activeTab === 'workspace' ? 'text-accent' : 'text-muted hover:text-main'
+          className={`min-h-[48px] rounded-xl flex flex-col items-center justify-center gap-0.5 transition-colors relative cursor-pointer active:scale-95 ${
+            activeTab === 'workspace' ? 'text-accent font-semibold' : 'text-muted hover:text-main'
           }`}
           title="Workspace"
         >
-          <FileText className="w-5 h-5" />
-          {(stats.docsTodosOpenCount ?? 0) > 0 && (
-            <span className="absolute -top-0.5 -right-0.5 min-w-[15px] h-[15px] px-0.5 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
-              {stats.docsTodosOpenCount}
-            </span>
-          )}
+          <div className="relative">
+            <FileText className="w-5 h-5" />
+            {(stats.docsTodosOpenCount ?? 0) > 0 && (
+              <span className="absolute -top-1.5 -right-2.5 min-w-[16px] h-[16px] px-1 rounded-full text-[9px] font-bold leading-none bg-accent text-on-accent flex items-center justify-center shadow-xs pointer-events-none">
+                {stats.docsTodosOpenCount}
+              </span>
+            )}
+          </div>
+          <span className="text-[10px] leading-tight">Workspace</span>
         </button>
 
-        {/* Tab 4: Listen */}
+        {/* Col 5: Listen */}
         <button
           type="button"
           onClick={() => {
             triggerHaptic(10);
             setActiveTab('lists');
           }}
-          className={`p-2 rounded-btn flex flex-col items-center justify-center transition-colors relative cursor-pointer ${
-            activeTab === 'lists' ? 'text-accent' : 'text-muted hover:text-main'
+          className={`min-h-[48px] rounded-xl flex flex-col items-center justify-center gap-0.5 transition-colors relative cursor-pointer active:scale-95 ${
+            activeTab === 'lists' ? 'text-accent font-semibold' : 'text-muted hover:text-main'
           }`}
           title="Listen"
         >
           <ShoppingCart className="w-5 h-5" />
-        </button>
-
-        {/* User Profile Avatar */}
-        <button
-          type="button"
-          onClick={() => {
-            triggerHaptic(10);
-            setShowMobileProfile(true);
-          }}
-          className={`p-1.5 rounded-btn flex items-center justify-center transition-colors cursor-pointer ${
-            activeTab === 'user_settings' || activeTab === 'admin_settings' || activeTab === 'help'
-              ? 'ring-2 ring-accent'
-              : 'opacity-85 hover:opacity-100'
-          }`}
-          title="Profil & Einstellungen"
-        >
-          <div className="w-6 h-6 rounded-full bg-accent text-on-accent text-[11px] font-bold flex items-center justify-center">
-            {user.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
-          </div>
+          <span className="text-[10px] leading-tight">Listen</span>
         </button>
       </nav>
 
diff --git a/frontend/src/features/triage/TriageDeck.tsx b/frontend/src/features/triage/TriageDeck.tsx
index b0ddd9f..02b6ff5 100644
--- a/frontend/src/features/triage/TriageDeck.tsx
+++ b/frontend/src/features/triage/TriageDeck.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { motion, useMotionValue, useTransform, AnimatePresence } from 'framer-motion';
 import {
   X,
@@ -17,6 +17,7 @@ import {
   SkipForward,
   Edit3,
   Layers,
+  MoreHorizontal,
 } from 'lucide-react';
 import { SharedList, Thought } from '../../lib/types';
 import { api, triggerHaptic } from '../../lib/api';
@@ -29,11 +30,184 @@ interface TriageDeckProps {
   onFocusCapture: () => void;
 }
 
+interface SwipeableQueueItemProps {
+  item: Thought;
+  lists: SharedList[];
+  onBringToFront: (id: string) => void;
+  onOpenActionSheet: (item: Thought) => void;
+  onAction: (
+    action: 'keep' | 'discard',
+    options?: {
+      convertTo?: 'task' | 'document' | 'list_item';
+      targetListId?: string;
+      dueDate?: string;
+      thoughtOverride?: Thought;
+    }
+  ) => void;
+}
+
+const SwipeableQueueItem: React.FC<SwipeableQueueItemProps> = ({
+  item,
+  lists,
+  onBringToFront,
+  onOpenActionSheet,
+  onAction,
+}) => {
+  const qx = useMotionValue(0);
+  const rightBgOpacity = useTransform(qx, [20, 85], [0, 1]);
+  const leftBgOpacity = useTransform(qx, [-85, -20], [1, 0]);
+  const didDragRef = useRef(false);
+  const holdTimerRef = useRef<number | null>(null);
+  const startPosRef = useRef<{ x: number; y: number } | null>(null);
+
+  const clearHoldTimer = () => {
+    if (holdTimerRef.current !== null) {
+      window.clearTimeout(holdTimerRef.current);
+      holdTimerRef.current = null;
+    }
+  };
+
+  return (
+    <div className="relative overflow-hidden select-none">
+      {/* Swipe Right Background Indicator (Als Aufgabe) */}
+      <motion.div
+        style={{ opacity: rightBgOpacity }}
+        className="pointer-events-none absolute inset-0 bg-accent/20 flex items-center justify-start px-4 text-accent font-semibold text-xs uppercase tracking-wide"
+      >
+        <span className="flex items-center gap-1.5">
+          <CheckSquare className="w-4 h-4" />
+          <span>Als Aufgabe 👉</span>
+        </span>
+      </motion.div>
+
+      {/* Swipe Left Background Indicator (Wegwerfen) */}
+      <motion.div
+        style={{ opacity: leftBgOpacity }}
+        className="pointer-events-none absolute inset-0 bg-status-err-bg flex items-center justify-end px-4 text-status-err font-semibold text-xs uppercase tracking-wide"
+      >
+        <span className="flex items-center gap-1.5">
+          <span>👈 Wegwerfen</span>
+          <X className="w-4 h-4" />
+        </span>
+      </motion.div>
+
+      <motion.div
+        style={{ x: qx }}
+        drag="x"
+        dragDirectionLock
+        dragConstraints={{ left: 0, right: 0 }}
+        dragElastic={0.65}
+        onPointerDown={(e) => {
+          didDragRef.current = false;
+          startPosRef.current = { x: e.clientX, y: e.clientY };
+          clearHoldTimer();
+          holdTimerRef.current = window.setTimeout(() => {
+            if (!didDragRef.current) {
+              didDragRef.current = true;
+              triggerHaptic([20, 40]);
+              onOpenActionSheet(item);
+            }
+          }, 420);
+        }}
+        onPointerMove={(e) => {
+          if (startPosRef.current) {
+            const dx = Math.abs(e.clientX - startPosRef.current.x);
+            const dy = Math.abs(e.clientY - startPosRef.current.y);
+            if (dx > 10 || dy > 10) {
+              clearHoldTimer();
+            }
+          }
+        }}
+        onPointerUp={clearHoldTimer}
+        onPointerCancel={clearHoldTimer}
+        onDragStart={() => {
+          didDragRef.current = true;
+          clearHoldTimer();
+        }}
+        onDragEnd={(_, info) => {
+          clearHoldTimer();
+          if (info.offset.x > 85 || info.velocity.x > 450) {
+            onAction('keep', { convertTo: 'task', thoughtOverride: item });
+          } else if (info.offset.x < -85 || info.velocity.x < -450) {
+            onAction('discard', { thoughtOverride: item });
+          }
+        }}
+        onClick={() => {
+          if (!didDragRef.current) {
+            onBringToFront(item.id);
+          }
+        }}
+        className="relative bg-panel px-4 py-3.5 sm:px-3.5 sm:py-2.5 min-h-[56px] sm:min-h-[44px] flex items-center justify-between gap-3 hover:bg-panel-hover transition-colors group cursor-pointer"
+      >
+        <div className="flex-1 min-w-0 flex items-center gap-3">
+          <span className="w-2 h-2 rounded-full bg-accent flex-shrink-0" />
+          <span className="text-sm sm:text-xs font-medium text-main line-clamp-2 sm:truncate">
+            {item.content}
+          </span>
+        </div>
+
+        {/* Desktop quick buttons (hidden on mobile so queue items are clean & easy to tap/swipe) */}
+        <div
+          className="hidden sm:flex items-center gap-1.5 flex-shrink-0"
+          onClick={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          <button
+            type="button"
+            onClick={() => onAction('keep', { convertTo: 'task', thoughtOverride: item })}
+            title="Direkt zur Aufgabe machen"
+            className="h-7 px-2.5 bg-canvas hover:bg-accent hover:text-on-accent border border-border rounded-btn text-xs text-muted flex items-center gap-1 transition-colors cursor-pointer"
+          >
+            <Check className="w-3.5 h-3.5" />
+            <span>Aufgabe</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => onAction('keep', { convertTo: 'document', thoughtOverride: item })}
+            title="Direkt als Workspace-Notiz anlegen"
+            className="h-7 px-2.5 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-xs text-muted hover:text-main flex items-center gap-1 transition-colors cursor-pointer"
+          >
+            <FileText className="w-3.5 h-3.5 text-accent" />
+            <span>Notiz</span>
+          </button>
+
+          {lists.length > 0 && (
+            <button
+              type="button"
+              onClick={() =>
+                onAction('keep', {
+                  convertTo: 'list_item',
+                  targetListId: lists[0].id,
+                  thoughtOverride: item,
+                })
+              }
+              title={`Direkt auf Liste "${lists[0].title}" setzen`}
+              className="h-7 px-2.5 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-xs text-muted hover:text-main flex items-center gap-1 transition-colors cursor-pointer"
+            >
+              <ShoppingCart className="w-3.5 h-3.5 text-accent" />
+              <span className="hidden md:inline">{lists[0].title}</span>
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={() => onAction('discard', { thoughtOverride: item })}
+            title="Wegwerfen"
+            className="h-7 w-7 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-muted hover:text-main flex items-center justify-center transition-colors cursor-pointer"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
 export const TriageDeck: React.FC<TriageDeckProps> = ({
   deck,
   lists,
   onDeckChange,
-  onOpenDocument,
   onFocusCapture,
 }) => {
   const [cards, setCards] = useState<Thought[]>(deck);
@@ -45,6 +219,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   });
   const [showListSelector, setShowListSelector] = useState(false);
 
+  // Long-Press Action Sheet state (for Triage Card or Queue Item)
+  const [actionSheetCard, setActionSheetCard] = useState<Thought | null>(null);
+  const [sheetMode, setSheetMode] = useState<'main' | 'date' | 'list'>('main');
+  const cardHoldTimerRef = useRef<number | null>(null);
+  const cardPointerStartRef = useRef<{ x: number; y: number } | null>(null);
+
   // Inline edit state for cleaning up a hasty Quick Dump note before converting
   const [isEditingCard, setIsEditingCard] = useState(false);
   const [editDraft, setEditDraft] = useState('');
@@ -61,6 +241,18 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
     setEditDraft(activeCard?.content || '');
   }, [activeCard?.id]);
 
+  const clearCardHoldTimer = () => {
+    if (cardHoldTimerRef.current !== null) {
+      window.clearTimeout(cardHoldTimerRef.current);
+      cardHoldTimerRef.current = null;
+    }
+  };
+
+  const openActionSheetForCard = (card: Thought) => {
+    setSheetMode('main');
+    setActionSheetCard(card);
+  };
+
   const x = useMotionValue(0);
   const rotate = useTransform(x, [-220, 0, 220], [-8, 0, 8]);
   const keepOpacity = useTransform(x, [25, 110], [0, 1]);
@@ -90,6 +282,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
     setLastTriaged(targetCard);
     setShowDateModal(false);
     setShowListSelector(false);
+    setActionSheetCard(null);
     setIsEditingCard(false);
     x.set(0);
 
@@ -105,14 +298,23 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
     }
   };
 
-  const handleSkipCard = () => {
+  const handleSkipCard = (targetId?: string) => {
     if (cards.length <= 1) return;
     triggerHaptic(10);
     setShowDateModal(false);
     setShowListSelector(false);
+    setActionSheetCard(null);
     setIsEditingCard(false);
     x.set(0);
-    setCards((prev) => [...prev.slice(1), prev[0]]);
+    if (targetId && targetId !== cards[0]?.id) {
+      setCards((prev) => {
+        const chosen = prev.find((c) => c.id === targetId);
+        if (!chosen) return prev;
+        return [...prev.filter((c) => c.id !== targetId), chosen];
+      });
+    } else {
+      setCards((prev) => [...prev.slice(1), prev[0]]);
+    }
   };
 
   const handleBringToFront = (thoughtId: string) => {
@@ -179,12 +381,14 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
       } else if (e.key === ' ') {
         e.preventDefault();
         handleSkipCard();
+      } else if (e.key === 'Escape' && actionSheetCard) {
+        setActionSheetCard(null);
       }
     };
 
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [activeCard, cards.length]);
+  }, [activeCard, cards.length, actionSheetCard]);
 
   const priorityBadge = (priority: string) => {
     switch (priority) {
@@ -230,12 +434,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   if (!activeCard) {
     return (
       <div className="max-w-xl mx-auto mt-2 p-6 panel-surface text-center">
-        <div className="w-11 h-11 bg-accent text-on-accent rounded-btn flex items-center justify-center mx-auto mb-3 shadow-sm">
-          <Sparkles className="w-5 h-5" />
+        <div className="w-12 h-12 bg-accent text-on-accent rounded-xl flex items-center justify-center mx-auto mb-3 shadow-sm">
+          <Sparkles className="w-6 h-6" />
         </div>
         <h2 className="text-lg font-bold text-main mb-1">Triage-Deck ist leer</h2>
         <p className="text-muted 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{' '}
+          Alle Quick Dump Notizen sind einsortiert oder verworfen. Tippe auf das{' '}
+          <strong className="text-main">+</strong> unten in der Mitte (oder Taste{' '}
           <kbd className="px-1.5 py-0.5 bg-canvas border border-border rounded-btn text-main">C</kbd>
           ), um neue Gedanken reinzurotzen.
         </p>
@@ -243,7 +448,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         <div className="flex flex-wrap items-center justify-center gap-2">
           <button
             onClick={onFocusCapture}
-            className="btn-primary h-8 px-4"
+            className="btn-primary h-10 px-5 text-sm"
           >
             + Quick Dump erfassen
           </button>
@@ -251,9 +456,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
           {lastTriaged && (
             <button
               onClick={handleUndo}
-              className="btn-action h-8 px-3"
+              className="btn-action h-10 px-4 text-sm"
             >
-              <RotateCcw className="w-3.5 h-3.5 text-accent" />
+              <RotateCcw className="w-4 h-4 text-accent" />
               Letzte Aktion rückgängig
             </button>
           )}
@@ -267,7 +472,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
       {/* Top Deck Status & Undo Bar */}
       <div className="flex items-center justify-between px-1">
         <div className="flex items-center gap-2">
-          <span className="badge-accent">
+          <span className="badge-accent text-xs py-1 px-2.5">
             {cards.length} {cards.length === 1 ? 'Quick Dump' : 'Quick Dumps'} offen
           </span>
           <span className="hidden sm:inline text-xs text-faint">•</span>
@@ -279,16 +484,16 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         {lastTriaged && (
           <button
             onClick={handleUndo}
-            className="btn-action h-7 px-2.5 text-xs"
+            className="btn-action h-8 px-3 text-xs"
           >
-            <RotateCcw className="w-3 h-3 text-accent" />
+            <RotateCcw className="w-3.5 h-3.5 text-accent" />
             Rückgängig
           </button>
         )}
       </div>
 
       {/* Card Stack Container */}
-      <div className="relative h-[280px] sm:h-[300px] w-full flex items-center justify-center">
+      <div className="relative h-[290px] sm:h-[300px] w-full flex items-center justify-center">
         {/* Background Preview Card */}
         {nextCard && (
           <div
@@ -301,7 +506,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
           </div>
         )}
 
-        {/* Active Draggable Card */}
+        {/* Active Draggable & Long-Pressable Card */}
         <AnimatePresence mode="popLayout">
           <motion.div
             key={activeCard.id}
@@ -310,7 +515,29 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             dragConstraints={{ left: 0, right: 0 }}
             dragElastic={0.8}
             transition={{ type: 'spring', stiffness: 350, damping: 25 }}
+            onPointerDown={(e) => {
+              if (isEditingCard) return;
+              cardPointerStartRef.current = { x: e.clientX, y: e.clientY };
+              clearCardHoldTimer();
+              cardHoldTimerRef.current = window.setTimeout(() => {
+                triggerHaptic([20, 40]);
+                openActionSheetForCard(activeCard);
+              }, 420);
+            }}
+            onPointerMove={(e) => {
+              if (cardPointerStartRef.current) {
+                const dx = Math.abs(e.clientX - cardPointerStartRef.current.x);
+                const dy = Math.abs(e.clientY - cardPointerStartRef.current.y);
+                if (dx > 12 || dy > 12) {
+                  clearCardHoldTimer();
+                }
+              }
+            }}
+            onPointerUp={clearCardHoldTimer}
+            onPointerCancel={clearCardHoldTimer}
+            onDragStart={clearCardHoldTimer}
             onDragEnd={(_, info) => {
+              clearCardHoldTimer();
               if (info.offset.x > 105 || info.velocity.x > 520) {
                 handleAction('keep', { convertTo: 'task' });
               } else if (info.offset.x < -105 || info.velocity.x < -520) {
@@ -320,19 +547,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             initial={{ scale: 0.97, opacity: 0, y: 10 }}
             animate={{ scale: 1, opacity: 1, y: 0 }}
             exit={{ scale: 0.93, opacity: 0 }}
-            className="relative w-full h-full panel-surface p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
+            className="relative w-full h-full panel-surface 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-3.5 right-3.5 px-2.5 py-1 bg-accent-dim border border-accent rounded-btn text-accent font-semibold text-xs tracking-wide uppercase"
+              className="pointer-events-none absolute top-3.5 right-3.5 px-3 py-1.5 bg-accent-dim border border-accent rounded-btn text-accent font-semibold text-xs tracking-wide uppercase"
             >
               Als Aufgabe 👉
             </motion.div>
 
             <motion.div
               style={{ opacity: discardOpacity }}
-              className="pointer-events-none absolute top-3.5 left-3.5 px-2.5 py-1 bg-panel-elevated border border-strong rounded-btn text-main font-semibold text-xs tracking-wide uppercase"
+              className="pointer-events-none absolute top-3.5 left-3.5 px-3 py-1.5 bg-panel-elevated border border-strong rounded-btn text-main font-semibold text-xs tracking-wide uppercase"
             >
               👈 Wegwerfen
             </motion.div>
@@ -343,19 +570,10 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                 {priorityBadge(activeCard.priority)}
                 {sourceBadge(activeCard.source)}
               </div>
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setEditDraft(activeCard.content);
-                    setIsEditingCard((prev) => !prev);
-                  }}
-                  title="Quick Dump Text vor dem Zuordnen anpassen"
-                  className="h-6 px-2 bg-canvas hover:bg-panel-hover border border-border rounded-btn text-[11px] text-muted hover:text-main flex items-center gap-1"
-                >
-                  <Edit3 className="w-3 h-3" />
-                  <span>Bearbeiten</span>
-                </button>
+              <div
+                className="flex items-center gap-2"
+                onPointerDown={(e) => e.stopPropagation()}
+              >
                 <span className="text-xs text-muted flex items-center gap-1">
                   <Clock className="w-3 h-3" />
                   {new Date(activeCard.createdAt).toLocaleString('de-DE', {
@@ -365,46 +583,59 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                     minute: '2-digit',
                   })}
                 </span>
+                <button
+                  type="button"
+                  onClick={() => openActionSheetForCard(activeCard)}
+                  title="Weitere Optionen (oder Karte gedrückt halten)"
+                  className="h-8 w-8 bg-canvas hover:bg-panel-hover border border-border rounded-btn text-muted hover:text-main flex items-center justify-center cursor-pointer"
+                >
+                  <MoreHorizontal className="w-4 h-4" />
+                </button>
               </div>
             </div>
 
             {/* Card Body */}
-            <div className="my-auto py-2">
+            <div
+              className="my-auto py-2"
+              onPointerDown={(e) => {
+                if (isEditingCard) e.stopPropagation();
+              }}
+            >
               {isEditingCard ? (
-                <div className="space-y-2">
+                <div className="space-y-2.5">
                   <textarea
                     value={editDraft}
                     onChange={(e) => setEditDraft(e.target.value)}
                     rows={3}
                     autoFocus
-                    className="w-full input-field p-2 text-sm resize-none"
+                    className="w-full input-field p-2.5 text-sm resize-none"
                   />
-                  <div className="flex items-center justify-end gap-1.5">
+                  <div className="flex items-center justify-end gap-2">
                     <button
                       type="button"
                       onClick={() => setIsEditingCard(false)}
-                      className="btn-action h-7 px-2.5 text-xs"
+                      className="btn-action h-9 px-3.5 text-xs"
                     >
                       Abbrechen
                     </button>
                     <button
                       type="button"
                       onClick={handleSaveInlineEdit}
-                      className="btn-primary h-7 px-3 text-xs"
+                      className="btn-primary h-9 px-4 text-xs"
                     >
                       Text speichern
                     </button>
                   </div>
                 </div>
               ) : (
-                <p className="text-base sm:text-xl font-medium text-main leading-relaxed break-words whitespace-pre-wrap">
+                <p className="text-lg sm:text-xl font-medium text-main leading-relaxed break-words whitespace-pre-wrap">
                   {activeCard.content}
                 </p>
               )}
             </div>
 
-            {/* Card Footer: Tags & Hints */}
-            <div className="flex flex-wrap items-center justify-between gap-2 pt-2.5 border-t border-border">
+            {/* Card Footer: Tags & Touch Gesture 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 gap-1.5">
                 {activeCard.tags && activeCard.tags.length > 0 ? (
                   activeCard.tags.map((tag) => (
@@ -414,7 +645,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                   ))
                 ) : (
                   <span className="text-xs text-faint">
-                    Links wischen = Wegwerfen • Rechts wischen = Als Aufgabe sichern
+                    👈 Wegwerfen · 👉 Aufgabe · Gedrückt halten = Mehr Optionen
                   </span>
                 )}
               </div>
@@ -429,9 +660,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         </AnimatePresence>
       </div>
 
-      {/* Convert to Task with Due Date Popover */}
+      {/* Desktop-only Popovers */}
       {showDateModal && (
-        <div className="p-3 panel-surface flex flex-wrap items-center justify-between gap-3">
+        <div className="hidden sm:flex p-3 panel-surface flex-wrap items-center justify-between gap-3">
           <div className="flex items-center gap-2 text-xs text-muted">
             <Calendar className="w-4 h-4 text-accent" />
             <span>Aufgabe mit Fälligkeitsdatum anlegen:</span>
@@ -445,7 +676,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             />
             <button
               onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
-              className="btn-primary h-7 px-3 text-xs"
+              className="btn-primary h-8 px-3 text-xs"
             >
               Als Termin-Aufgabe speichern
             </button>
@@ -453,9 +684,8 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         </div>
       )}
 
-      {/* Convert to Shared List Item Popover */}
       {showListSelector && (
-        <div className="p-3 panel-surface">
+        <div className="hidden sm:block p-3 panel-surface">
           <p className="text-xs text-muted mb-2">
             Quick Dump direkt einer Liste zuordnen:
           </p>
@@ -467,7 +697,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                   onClick={() =>
                     handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
                   }
-                  className="btn-action h-7 px-2.5 text-xs"
+                  className="btn-action h-8 px-3 text-xs"
                 >
                   <span>{lst.icon}</span>
                   <span>{lst.title}</span>
@@ -480,24 +710,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         </div>
       )}
 
-      {/* Primary Triage Decision Bar */}
-      <div className="grid grid-cols-2 sm:grid-cols-6 gap-1.5">
-        {/* 1. Swipe Left: Discard */}
+      {/* Primary Triage Decision Bar: Hidden on mobile (handled via Swipe + Long-Press), shown on Desktop */}
+      <div className="hidden sm:grid sm:grid-cols-6 gap-1.5">
         <button
           onClick={() => handleAction('discard')}
           title="Wegwerfen (Taste H oder Pfeil links)"
-          className="btn-action h-8 px-2.5 justify-center"
+          className="btn-action h-9 px-2.5 justify-center"
         >
           <X className="w-3.5 h-3.5 text-muted" />
           <span>Wegwerfen</span>
         </button>
 
-        {/* 2. Skip / Later */}
         <button
-          onClick={handleSkipCard}
+          onClick={() => handleSkipCard()}
           disabled={cards.length <= 1}
           title="Später entscheiden – ans Ende schieben (Leertaste)"
-          className={`btn-action h-8 px-2.5 justify-center ${
+          className={`btn-action h-9 px-2.5 justify-center ${
             cards.length <= 1 ? 'opacity-40 cursor-not-allowed' : ''
           }`}
         >
@@ -505,14 +733,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
           <span>Später</span>
         </button>
 
-        {/* 3. Assign to List */}
         <button
           onClick={() => {
             setShowDateModal(false);
             setShowListSelector((prev) => !prev);
           }}
           title="Auf eine geteilte Liste setzen"
-          className={`btn-action h-8 px-2.5 justify-center ${
+          className={`btn-action h-9 px-2.5 justify-center ${
             showListSelector ? 'border-accent text-accent bg-accent-dim' : ''
           }`}
         >
@@ -520,24 +747,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
           <span>Auf Liste</span>
         </button>
 
-        {/* 4. Convert to Workspace Note */}
         <button
           onClick={() => handleAction('keep', { convertTo: 'document' })}
           title="In eine Workspace-Notiz umwandeln (Taste D)"
-          className="btn-action h-8 px-2.5 justify-center"
+          className="btn-action h-9 px-2.5 justify-center"
         >
           <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 ${
+          className={`btn-action h-9 px-2.5 justify-center ${
             showDateModal ? 'border-accent text-accent bg-accent-dim' : ''
           }`}
         >
@@ -545,103 +770,260 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
           <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"
+          className="btn-primary h-9 px-3 justify-center"
         >
           <CheckSquare className="w-3.5 h-3.5" />
           <span>Als Aufgabe</span>
         </button>
       </div>
 
-      {/* Waiting Quick Dump Queue List */}
+      {/* Waiting Quick Dump Queue List (Touch-sized & Swipeable Left/Right) */}
       {cards.length > 1 && (
         <div className="pt-2">
-          <div className="flex items-center justify-between mb-1.5 px-0.5">
+          <div className="flex items-center justify-between mb-2 px-1">
             <span className="text-xs font-semibold uppercase tracking-wider text-muted flex items-center gap-1.5">
               <Layers className="w-3.5 h-3.5 text-accent" />
-              Warteschlange ({cards.length - 1} weitere Quick Dumps)
+              Warteschlange ({cards.length - 1})
             </span>
             <span className="text-[11px] text-faint">
-              Klicken zum Vorholen oder direkt zuordnen
+              Tippen = Vorholen · 👈 Wegwerfen · 👉 Aufgabe
             </span>
           </div>
 
-          <div className="panel-surface divide-y divide-border max-h-60 overflow-y-auto">
+          <div className="panel-surface divide-y divide-border max-h-80 overflow-y-auto overflow-x-hidden">
             {cards.slice(1).map((item) => (
-              <div
+              <SwipeableQueueItem
                 key={item.id}
-                className="px-3 py-2 flex items-center justify-between gap-2 hover:bg-panel-hover transition-colors group"
+                item={item}
+                lists={lists}
+                onBringToFront={handleBringToFront}
+                onOpenActionSheet={openActionSheetForCard}
+                onAction={handleAction}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* LONG-PRESS / MORE OPTIONS ACTION SHEET (For Triage Card & Queue Items) */}
+      {actionSheetCard && (
+        <div
+          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-xs p-0 sm:p-4 animate-in fade-in duration-150"
+          onClick={() => setActionSheetCard(null)}
+        >
+          <div
+            className="w-full sm:max-w-md bg-panel border-t sm:border border-border rounded-t-2xl sm:rounded-2xl shadow-panel p-4 pb-[calc(1.5rem+env(safe-area-inset-bottom))] sm:pb-4 space-y-3 animate-in slide-in-from-bottom duration-200"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Sheet Header with Preview */}
+            <div className="flex items-start justify-between gap-3 pb-2.5 border-b border-border">
+              <div className="min-w-0">
+                <span className="text-[11px] font-semibold uppercase tracking-wider text-accent">
+                  Quick Dump zuordnen
+                </span>
+                <p className="text-sm font-medium text-main line-clamp-2 mt-0.5">
+                  {actionSheetCard.content}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => setActionSheetCard(null)}
+                className="p-1.5 text-faint hover:text-main rounded-btn cursor-pointer"
               >
-                <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-muted truncate group-hover:text-main">
-                    {item.content}
-                  </span>
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {sheetMode === 'main' && (
+              <div className="space-y-2">
+                <div className="grid grid-cols-2 gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setSheetMode('list')}
+                    className="min-h-[52px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border text-left flex items-center gap-3 transition-colors cursor-pointer active:scale-98"
+                  >
+                    <ShoppingCart className="w-5 h-5 text-accent flex-shrink-0" />
+                    <div>
+                      <div className="text-sm font-semibold text-main">Auf Liste</div>
+                      <div className="text-[11px] text-muted">Einkauf / Geteilt</div>
+                    </div>
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() => setSheetMode('date')}
+                    className="min-h-[52px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border text-left flex items-center gap-3 transition-colors cursor-pointer active:scale-98"
+                  >
+                    <Calendar className="w-5 h-5 text-accent flex-shrink-0" />
+                    <div>
+                      <div className="text-sm font-semibold text-main">Mit Termin</div>
+                      <div className="text-[11px] text-muted">Datum wählen</div>
+                    </div>
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() =>
+                      handleAction('keep', {
+                        convertTo: 'document',
+                        thoughtOverride: actionSheetCard,
+                      })
+                    }
+                    className="min-h-[52px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border text-left flex items-center gap-3 transition-colors cursor-pointer active:scale-98"
+                  >
+                    <FileText className="w-5 h-5 text-accent flex-shrink-0" />
+                    <div>
+                      <div className="text-sm font-semibold text-main">Als Notiz</div>
+                      <div className="text-[11px] text-muted">Im Workspace</div>
+                    </div>
+                  </button>
+
+                  <button
+                    type="button"
+                    disabled={cards.length <= 1}
+                    onClick={() => handleSkipCard(actionSheetCard.id)}
+                    className={`min-h-[52px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border text-left flex items-center gap-3 transition-colors cursor-pointer active:scale-98 ${
+                      cards.length <= 1 ? 'opacity-40 cursor-not-allowed' : ''
+                    }`}
+                  >
+                    <SkipForward className="w-5 h-5 text-muted flex-shrink-0" />
+                    <div>
+                      <div className="text-sm font-semibold text-main">Später</div>
+                      <div className="text-[11px] text-muted">Ans Ende schieben</div>
+                    </div>
+                  </button>
                 </div>
 
-                <div className="flex items-center gap-1 flex-shrink-0">
+                {/* Edit Text Button */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    const target = actionSheetCard;
+                    setActionSheetCard(null);
+                    if (target.id !== activeCard.id) {
+                      handleBringToFront(target.id);
+                    }
+                    setEditDraft(target.content);
+                    setIsEditingCard(true);
+                  }}
+                  className="w-full min-h-[46px] px-3.5 py-2 rounded-xl bg-canvas hover:bg-panel-elevated border border-border flex items-center justify-center gap-2 text-sm font-medium text-main transition-colors cursor-pointer"
+                >
+                  <Edit3 className="w-4 h-4 text-accent" />
+                  <span>Text vor dem Zuordnen bearbeiten</span>
+                </button>
+
+                {/* Primary Swipe Equivalents */}
+                <div className="grid grid-cols-2 gap-2 pt-1 border-t border-border">
                   <button
                     type="button"
                     onClick={() =>
-                      handleAction('keep', { convertTo: 'task', thoughtOverride: item })
+                      handleAction('discard', { thoughtOverride: actionSheetCard })
                     }
-                    title="Direkt zur Aufgabe machen"
-                    className="h-6 px-2 bg-canvas hover:bg-accent hover:text-on-accent border border-border rounded-btn text-[11px] text-muted flex items-center gap-1 transition-colors"
+                    className="min-h-[46px] px-3 py-2 rounded-xl bg-status-err-bg border border-status-err/30 text-status-err text-sm font-semibold flex items-center justify-center gap-2 cursor-pointer"
                   >
-                    <Check className="w-3 h-3" />
-                    <span className="hidden sm:inline">Aufgabe</span>
+                    <X className="w-4 h-4" />
+                    <span>Wegwerfen</span>
                   </button>
 
                   <button
                     type="button"
                     onClick={() =>
-                      handleAction('keep', { convertTo: 'document', thoughtOverride: item })
+                      handleAction('keep', {
+                        convertTo: 'task',
+                        thoughtOverride: actionSheetCard,
+                      })
                     }
-                    title="Direkt als Workspace-Notiz anlegen"
-                    className="h-6 px-2 bg-canvas hover:bg-panel-elevated border border-border rounded-btn text-[11px] text-muted hover:text-main flex items-center gap-1 transition-colors"
+                    className="min-h-[46px] px-3 py-2 rounded-xl bg-accent text-on-accent text-sm font-semibold flex items-center justify-center gap-2 cursor-pointer"
                   >
-                    <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 rounded-btn text-[11px] text-muted hover:text-main 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 rounded-btn text-muted hover:text-main flex items-center justify-center transition-colors"
-                  >
-                    <X className="w-3 h-3" />
+                    <CheckSquare className="w-4 h-4" />
+                    <span>Als Aufgabe</span>
                   </button>
                 </div>
               </div>
-            ))}
+            )}
+
+            {sheetMode === 'date' && (
+              <div className="space-y-3">
+                <label className="block text-xs font-medium text-muted">
+                  Fälligkeitsdatum für die Aufgabe wählen:
+                </label>
+                <input
+                  type="date"
+                  value={taskDueDate}
+                  onChange={(e) => setTaskDueDate(e.target.value)}
+                  className="input-field w-full h-11 px-3 text-sm"
+                />
+                <div className="flex items-center gap-2 pt-1">
+                  <button
+                    type="button"
+                    onClick={() => setSheetMode('main')}
+                    className="btn-action flex-1 h-11 text-sm"
+                  >
+                    Zurück
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      handleAction('keep', {
+                        convertTo: 'task',
+                        dueDate: taskDueDate,
+                        thoughtOverride: actionSheetCard,
+                      })
+                    }
+                    className="btn-primary flex-1 h-11 text-sm font-semibold"
+                  >
+                    Mit Termin speichern
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {sheetMode === 'list' && (
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-muted">
+                  Auf welche Liste soll dieser Punkt gesetzt werden?
+                </p>
+                <div className="max-h-60 overflow-y-auto space-y-1.5">
+                  {lists.length > 0 ? (
+                    lists.map((lst) => (
+                      <button
+                        key={lst.id}
+                        type="button"
+                        onClick={() =>
+                          handleAction('keep', {
+                            convertTo: 'list_item',
+                            targetListId: lst.id,
+                            thoughtOverride: actionSheetCard,
+                          })
+                        }
+                        className="w-full min-h-[48px] px-3.5 py-2.5 rounded-xl bg-canvas hover:bg-panel-elevated border border-border flex items-center gap-3 text-sm font-medium text-main transition-colors cursor-pointer"
+                      >
+                        <span className="text-lg">{lst.icon}</span>
+                        <span>{lst.title}</span>
+                      </button>
+                    ))
+                  ) : (
+                    <div className="py-4 text-center text-xs text-muted">
+                      Keine Listen vorhanden.
+                    </div>
+                  )}
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setSheetMode('main')}
+                  className="btn-action w-full h-10 text-xs"
+                >
+                  Zurück
+                </button>
+              </div>
+            )}
           </div>
         </div>
       )}
     </div>
   );
 };
+