First draft

frontend/src/features/triage/TasksView.tsx

@@ -0,0 +1,272 @@
+import React, { useEffect, useState } from 'react';
+import {
+  CheckCircle2,
+  Circle,
+  Calendar,
+  Trash2,
+  RotateCcw,
+  FileText,
+  Tag,
+  AlertCircle,
+} from 'lucide-react';
+import { Thought } from '../../lib/types';
+import { api, triggerHaptic } from '../../lib/api';
+
+interface TasksViewProps {
+  onRefreshStats: () => void;
+  onOpenDocument: (docId: string) => void;
+}
+
+export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocument }) => {
+  const [filter, setFilter] = useState<'open' | 'done' | 'discarded'>('open');
+  const [tasks, setTasks] = useState<Thought[]>([]);
+  const [discarded, setDiscarded] = useState<Thought[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [allTasks, allDiscarded] = await Promise.all([
+        api.getTasks(),
+        api.getThoughts('discarded'),
+      ]);
+      setTasks(allTasks);
+      setDiscarded(allDiscarded);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const handleToggleDone = async (task: Thought) => {
+    triggerHaptic(15);
+    const nextState = !task.isCompleted;
+    setTasks((prev) =>
+      prev.map((t) => (t.id === task.id ? { ...t, isCompleted: nextState } : t))
+    );
+    await api.updateThought(task.id, { isCompleted: nextState });
+    onRefreshStats();
+  };
+
+  const handleDueDateChange = async (task: Thought, newDate: string) => {
+    setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, dueDate: newDate } : t)));
+    await api.updateThought(task.id, { dueDate: newDate });
+  };
+
+  const handleConvertToDoc = async (task: Thought) => {
+    triggerHaptic(20);
+    const updated = await api.triageAction(task.id, 'keep', { convertTo: 'document' });
+    onRefreshStats();
+    if (updated.convertedRefId) {
+      onOpenDocument(updated.convertedRefId);
+    } else {
+      loadData();
+    }
+  };
+
+  const handleRestore = async (item: Thought) => {
+    triggerHaptic(15);
+    await api.triageAction(item.id, 'restore');
+    await loadData();
+    onRefreshStats();
+  };
+
+  const handleDeletePermanent = async (id: string) => {
+    triggerHaptic(20);
+    await api.deleteThought(id);
+    await loadData();
+    onRefreshStats();
+  };
+
+  const handlePurgeAllDiscarded = async () => {
+    await api.purgeDiscarded();
+    await loadData();
+    onRefreshStats();
+  };
+
+  const openTasks = tasks.filter((t) => !t.isCompleted);
+  const doneTasks = tasks.filter((t) => t.isCompleted);
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      {/* Filter Pills */}
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setFilter('open')}
+            className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+              filter === 'open'
+                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
+                : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+            }`}
+          >
+            Offene Aufgaben ({openTasks.length})
+          </button>
+
+          <button
+            onClick={() => setFilter('done')}
+            className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+              filter === 'done'
+                ? 'bg-[#81c995] text-[#0b0f19] font-semibold'
+                : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+            }`}
+          >
+            Erledigt ({doneTasks.length})
+          </button>
+
+          <button
+            onClick={() => setFilter('discarded')}
+            className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+              filter === 'discarded'
+                ? 'bg-[#f28b82] text-[#0b0f19] font-semibold'
+                : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+            }`}
+          >
+            Verworfen ({discarded.length})
+          </button>
+        </div>
+
+        {filter === 'discarded' && discarded.length > 0 && (
+          <button
+            onClick={handlePurgeAllDiscarded}
+            className="h-9 px-4 rounded-full bg-[#f28b82]/15 hover:bg-[#f28b82]/25 text-[#f28b82] text-xs font-medium flex items-center gap-1.5 transition-colors"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            Papierkorb leeren
+          </button>
+        )}
+      </div>
+
+      {loading ? (
+        <div className="p-8 text-center text-[#9aa0a6] text-sm">Lade Aufgaben…</div>
+      ) : filter === 'discarded' ? (
+        <div className="space-y-2.5">
+          {discarded.length === 0 ? (
+            <div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
+              Keine verworfenen Gedanken im Papierkorb.
+            </div>
+          ) : (
+            discarded.map((item) => (
+              <div
+                key={item.id}
+                className="p-4 rounded-3xl bg-[#1e1f20] gemini-border flex items-center justify-between gap-4"
+              >
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm text-[#9aa0a6] line-through truncate">{item.content}</p>
+                </div>
+                <div className="flex items-center gap-2 flex-shrink-0">
+                  <button
+                    onClick={() => handleRestore(item)}
+                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] text-xs text-[#8ab4f8] flex items-center gap-1"
+                  >
+                    <RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox
+                  </button>
+                  <button
+                    onClick={() => handleDeletePermanent(item.id)}
+                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#f28b82] flex items-center justify-center"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      ) : (
+        <div className="space-y-2.5">
+          {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
+            <div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
+              {filter === 'open'
+                ? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen!'
+                : 'Noch keine erledigten Aufgaben.'}
+            </div>
+          ) : (
+            (filter === 'open' ? openTasks : doneTasks).map((task) => (
+              <div
+                key={task.id}
+                className="p-4 sm:p-5 rounded-3xl bg-[#1e1f20] hover:bg-[#242628] gemini-border flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors"
+              >
+                <div className="flex items-start gap-3.5 min-w-0 flex-1">
+                  <button
+                    onClick={() => handleToggleDone(task)}
+                    className="mt-0.5 flex-shrink-0 text-[#8ab4f8] hover:scale-110 transition-transform"
+                  >
+                    {task.isCompleted ? (
+                      <CheckCircle2 className="w-5 h-5 text-[#81c995]" />
+                    ) : (
+                      <Circle className="w-5 h-5 text-[#9aa0a6] hover:text-[#8ab4f8]" />
+                    )}
+                  </button>
+
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={`text-sm sm:text-base font-medium break-words ${
+                        task.isCompleted ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]'
+                      }`}
+                    >
+                      {task.content}
+                    </p>
+
+                    <div className="flex flex-wrap items-center gap-2 mt-2">
+                      {task.priority === 'urgent' && (
+                        <span className="px-2.5 py-0.5 rounded-full bg-[#f28b82]/20 text-[#f28b82] text-xs flex items-center gap-1">
+                          <AlertCircle className="w-3 h-3" /> Dringend
+                        </span>
+                      )}
+                      {task.priority === 'high' && (
+                        <span className="px-2.5 py-0.5 rounded-full bg-[#8ab4f8]/20 text-[#8ab4f8] text-xs">
+                          Hoch
+                        </span>
+                      )}
+                      {task.tags?.map((tag) => (
+                        <span
+                          key={tag}
+                          className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1"
+                        >
+                          <Tag className="w-2.5 h-2.5" />#{tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Action Controls */}
+                <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
+                  <div className="relative flex items-center">
+                    <Calendar className="w-3.5 h-3.5 text-[#8ab4f8] absolute left-3 pointer-events-none" />
+                    <input
+                      type="date"
+                      value={task.dueDate || ''}
+                      onChange={(e) => handleDueDateChange(task, e.target.value)}
+                      className="pl-8 pr-3 py-1 rounded-full bg-[#131314] text-[#e3e3e3] text-xs gemini-border focus:outline-none focus:border-[#8ab4f8]"
+                    />
+                  </div>
+
+                  <button
+                    onClick={() => handleConvertToDoc(task)}
+                    title="Im Workspace als Projekt-Dokument vertiefen"
+                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323538] text-xs text-[#c58af9] flex items-center gap-1"
+                  >
+                    <FileText className="w-3.5 h-3.5" />
+                    <span className="hidden md:inline">Vertiefen</span>
+                  </button>
+
+                  <button
+                    onClick={() => handleDeletePermanent(task.id)}
+                    title="Löschen"
+                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/features/triage/TriageDeck.tsx

@@ -0,0 +1,457 @@
+import React, { useEffect, useState } from 'react';
+import { motion, useMotionValue, useTransform, AnimatePresence } from 'framer-motion';
+import {
+  X,
+  Check,
+  Calendar,
+  FileText,
+  ShoppingCart,
+  RotateCcw,
+  Sparkles,
+  Mic,
+  Webhook,
+  Keyboard,
+  Tag,
+  Clock,
+} from 'lucide-react';
+import { SharedList, Thought } from '../../lib/types';
+import { api, triggerHaptic } from '../../lib/api';
+
+interface TriageDeckProps {
+  deck: Thought[];
+  lists: SharedList[];
+  onDeckChange: () => void;
+  onOpenDocument: (docId: string) => void;
+  onFocusCapture: () => void;
+}
+
+export const TriageDeck: React.FC<TriageDeckProps> = ({
+  deck,
+  lists,
+  onDeckChange,
+  onOpenDocument,
+  onFocusCapture,
+}) => {
+  const [cards, setCards] = useState<Thought[]>(deck);
+  const [lastTriaged, setLastTriaged] = useState<Thought | null>(null);
+  const [showDateModal, setShowDateModal] = useState(false);
+  const [taskDueDate, setTaskDueDate] = useState(() => {
+    const tomorrow = new Date(Date.now() + 86400000);
+    return tomorrow.toISOString().slice(0, 10);
+  });
+  const [showListSelector, setShowListSelector] = useState(false);
+
+  useEffect(() => {
+    setCards(deck);
+  }, [deck]);
+
+  const activeCard = cards[0];
+  const nextCard = cards[1];
+
+  const x = useMotionValue(0);
+  const rotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
+  const keepOpacity = useTransform(x, [25, 130], [0, 1]);
+  const discardOpacity = useTransform(x, [-130, -25], [1, 0]);
+  const cardBorderColor = useTransform(
+    x,
+    [-140, 0, 140],
+    ['rgba(242, 139, 130, 0.65)', 'rgba(255, 255, 255, 0.08)', 'rgba(129, 201, 149, 0.65)']
+  );
+
+  const handleAction = async (
+    action: 'keep' | 'discard',
+    options?: {
+      convertTo?: 'task' | 'document' | 'list_item';
+      targetListId?: string;
+      dueDate?: string;
+    }
+  ) => {
+    if (!activeCard) return;
+
+    const current = activeCard;
+    triggerHaptic(action === 'keep' ? [12, 25] : 18);
+
+    // Optimistic removal from deck
+    setCards((prev) => prev.slice(1));
+    setLastTriaged(current);
+    setShowDateModal(false);
+    setShowListSelector(false);
+    x.set(0);
+
+    try {
+      const updated = await api.triageAction(current.id, action, options);
+      onDeckChange();
+      if (options?.convertTo === 'document' && updated.convertedRefId) {
+        onOpenDocument(updated.convertedRefId);
+      }
+    } catch {
+      onDeckChange();
+    }
+  };
+
+  const handleUndo = async () => {
+    if (!lastTriaged) return;
+    triggerHaptic(15);
+    const toRestore = lastTriaged;
+    setLastTriaged(null);
+    await api.triageAction(toRestore.id, 'restore');
+    onDeckChange();
+  };
+
+  // Keyboard shortcuts for desktop power users (BRAIN.md Section 5)
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable ||
+        !activeCard
+      ) {
+        return;
+      }
+
+      if (e.key === 'ArrowLeft' || e.key === 'h' || e.key === 'H') {
+        e.preventDefault();
+        handleAction('discard');
+      } else if (e.key === 'ArrowRight' || e.key === 'l' || e.key === 'L') {
+        e.preventDefault();
+        handleAction('keep');
+      } else if (e.key === 't' || e.key === 'T') {
+        e.preventDefault();
+        setShowDateModal((prev) => !prev);
+      } else if (e.key === 'd' || e.key === 'D') {
+        e.preventDefault();
+        handleAction('keep', { convertTo: 'document' });
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [activeCard]);
+
+  const priorityBadge = (priority: string) => {
+    switch (priority) {
+      case 'urgent':
+        return (
+          <span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40">
+            🚨 Dringend
+          </span>
+        );
+      case 'high':
+        return (
+          <span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40">
+            ⚡ Priorität Hoch
+          </span>
+        );
+      case 'low':
+        return (
+          <span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
+            Später / Niedrig
+          </span>
+        );
+      default:
+        return (
+          <span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
+            Gedanke
+          </span>
+        );
+    }
+  };
+
+  const sourceBadge = (source: string) => {
+    if (source === 'voice') {
+      return (
+        <span className="px-3 py-1 rounded-full text-xs bg-[#c58af9]/15 text-[#c58af9] flex items-center gap-1">
+          <Mic className="w-3 h-3" /> Sprachnotiz
+        </span>
+      );
+    }
+    if (source === 'webhook') {
+      return (
+        <span className="px-3 py-1 rounded-full text-xs bg-[#81c995]/15 text-[#81c995] flex items-center gap-1">
+          <Webhook className="w-3 h-3" /> Smarthome Webhook
+        </span>
+      );
+    }
+    return null;
+  };
+
+  if (!activeCard) {
+    return (
+      <div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center shadow-card-depth">
+        <div className="w-16 h-16 rounded-full bg-[#81c995]/15 border border-[#81c995]/30 flex items-center justify-center mx-auto mb-5">
+          <Sparkles className="w-8 h-8 text-[#81c995]" />
+        </div>
+        <h2 className="text-2xl font-bold text-[#e3e3e3] mb-2">Inbox Zero erreicht!</h2>
+        <p className="text-[#9aa0a6] text-sm sm:text-base max-w-md mx-auto mb-6">
+          Dein Kopf ist komplett frei. Alle eingefrorenen Gedanken wurden gesichtet, verworfen oder in echte Projekte und Aufgaben verwandelt.
+        </p>
+
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          <button
+            onClick={onFocusCapture}
+            className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors"
+          >
+            + Neuen Gedanken einfrieren
+          </button>
+
+          {lastTriaged && (
+            <button
+              onClick={handleUndo}
+              className="h-11 px-5 rounded-full bg-[#282a2c] text-[#e3e3e3] hover:bg-[#333639] text-sm flex items-center gap-2 transition-colors"
+            >
+              <RotateCcw className="w-4 h-4 text-[#8ab4f8]" />
+              Letzten Swipe rückgängig machen
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-xl mx-auto select-none">
+      {/* Top Deck Status & Undo Bar */}
+      <div className="flex items-center justify-between mb-4 px-2">
+        <div className="flex items-center gap-2">
+          <span className="px-3.5 py-1 rounded-full bg-[#1e1f20] gemini-border text-xs font-medium text-[#8ab4f8]">
+            🃏 Noch {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} im Deck
+          </span>
+          <span className="hidden sm:flex items-center gap-1 text-xs text-[#5f6368]">
+            <Keyboard className="w-3.5 h-3.5" /> Pfeiltasten ← / → oder H / L
+          </span>
+        </div>
+
+        {lastTriaged && (
+          <button
+            onClick={handleUndo}
+            className="px-3.5 py-1 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#9aa0a6] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+          >
+            <RotateCcw className="w-3.5 h-3.5 text-[#8ab4f8]" />
+            Rückgängig
+          </button>
+        )}
+      </div>
+
+      {/* Card Stack Container */}
+      <div className="relative h-[340px] sm:h-[360px] w-full flex items-center justify-center">
+        {/* Background Preview Card */}
+        {nextCard && (
+          <div
+            key={nextCard.id + '-preview'}
+            className="absolute inset-x-4 top-5 bottom-0 rounded-3xl bg-[#18191b] gemini-border p-6 opacity-50 scale-[0.95] pointer-events-none flex flex-col justify-between"
+          >
+            <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
+            <p className="text-lg text-[#9aa0a6] line-clamp-3">{nextCard.content}</p>
+            <div className="text-xs text-[#5f6368]">Nächste Karte…</div>
+          </div>
+        )}
+
+        {/* Active Draggable Card */}
+        <AnimatePresence mode="popLayout">
+          <motion.div
+            key={activeCard.id}
+            style={{ x, rotate, borderColor: cardBorderColor }}
+            drag="x"
+            dragConstraints={{ left: 0, right: 0 }}
+            dragElastic={0.85}
+            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) {
+                handleAction('discard');
+              }
+            }}
+            initial={{ scale: 0.94, opacity: 0, y: 16 }}
+            animate={{ scale: 1, opacity: 1, y: 0 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            className="relative w-full h-full rounded-3xl bg-[#1e1f20] border p-6 sm:p-8 shadow-card-depth 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-6 right-6 px-4 py-1.5 rounded-full bg-[#81c995]/20 border-2 border-[#81c995] text-[#81c995] font-bold text-xs tracking-wider uppercase"
+            >
+              Behalten 👉
+            </motion.div>
+
+            <motion.div
+              style={{ opacity: discardOpacity }}
+              className="pointer-events-none absolute top-6 left-6 px-4 py-1.5 rounded-full bg-[#f28b82]/20 border-2 border-[#f28b82] text-[#f28b82] font-bold text-xs tracking-wider uppercase"
+            >
+              👈 Weg damit
+            </motion.div>
+
+            {/* Card Header */}
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                {priorityBadge(activeCard.priority)}
+                {sourceBadge(activeCard.source)}
+              </div>
+              <span className="text-xs text-[#5f6368] 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>
+
+            {/* Card Body: The Thought */}
+            <div className="my-auto py-4">
+              <p className="text-xl sm:text-2xl font-medium text-[#e3e3e3] 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-white/[0.06]">
+              <div className="flex flex-wrap items-center gap-1.5">
+                {activeCard.tags && activeCard.tags.length > 0 ? (
+                  activeCard.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-3 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1"
+                    >
+                      <Tag className="w-3 h-3" />#{tag}
+                    </span>
+                  ))
+                ) : (
+                  <span className="text-xs text-[#5f6368]">Wische links zum Verwerfen, rechts zum Behalten</span>
+                )}
+              </div>
+
+              {activeCard.dueDate && (
+                <span className="px-3 py-0.5 rounded-full bg-[#8ab4f8]/15 text-[#8ab4f8] text-xs">
+                  📅 {activeCard.dueDate}
+                </span>
+              )}
+            </div>
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      {/* Convert to Task Date Picker Popover */}
+      {showDateModal && (
+        <div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-2 text-sm text-[#e3e3e3]">
+            <Calendar className="w-4 h-4 text-[#8ab4f8]" />
+            <span>Als To-Do 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="bg-[#1e1f20] text-[#e3e3e3] px-3.5 py-1.5 rounded-full gemini-border text-xs focus:outline-none"
+            />
+            <button
+              onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
+              className="px-4 py-1.5 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs hover:opacity-90"
+            >
+              Aufgabe speichern
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Convert to Shopping List Item Popover */}
+      {showListSelector && (
+        <div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border">
+          <p className="text-xs text-[#9aa0a6] mb-2.5">
+            In welche geteilte Liste soll dieser Gedanke verschoben werden?
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {lists.length > 0 ? (
+              lists.map((lst) => (
+                <button
+                  key={lst.id}
+                  onClick={() =>
+                    handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
+                  }
+                  className="px-4 py-2 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                >
+                  <span>{lst.icon}</span>
+                  <span>{lst.title}</span>
+                </button>
+              ))
+            ) : (
+              <span className="text-xs text-[#5f6368]">Noch keine Listen vorhanden.</span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Primary Triage Action Pills */}
+      <div className="mt-6 flex flex-wrap items-center justify-center gap-2.5 sm:gap-3">
+        {/* Swipe Left: Discard */}
+        <button
+          onClick={() => handleAction('discard')}
+          title="Verwerfen (Taste H oder Pfeil links)"
+          className="h-12 px-5 rounded-full bg-[#1e1f20] hover:bg-[#f28b82]/20 border border-[#f28b82]/30 text-[#f28b82] font-medium text-sm flex items-center gap-2 transition-all active:scale-95"
+        >
+          <X className="w-4 h-4" />
+          <span>Weg damit</span>
+        </button>
+
+        {/* Convert to Task with Due Date */}
+        <button
+          onClick={() => {
+            setShowListSelector(false);
+            setShowDateModal((prev) => !prev);
+          }}
+          title="Als Aufgabe mit Datum (Taste T)"
+          className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+            showDateModal
+              ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
+              : 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
+          }`}
+        >
+          <Calendar className="w-4 h-4 text-[#8ab4f8]" />
+          <span>Termin-To-Do</span>
+        </button>
+
+        {/* Convert to Workspace Document */}
+        <button
+          onClick={() => handleAction('keep', { convertTo: 'document' })}
+          title="In ein Workspace-Dokument verwandeln (Taste D)"
+          className="h-12 px-4 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-all"
+        >
+          <FileText className="w-4 h-4 text-[#c58af9]" />
+          <span>Als Projekt-Notiz</span>
+        </button>
+
+        {/* Convert to Shared Shopping List Item */}
+        <button
+          onClick={() => {
+            setShowDateModal(false);
+            setShowListSelector((prev) => !prev);
+          }}
+          title="Auf eine geteilte Einkaufsliste setzen"
+          className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+            showListSelector
+              ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
+              : 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
+          }`}
+        >
+          <ShoppingCart className="w-4 h-4 text-[#81c995]" />
+          <span>Auf Liste</span>
+        </button>
+
+        {/* Swipe Right: Keep */}
+        <button
+          onClick={() => handleAction('keep')}
+          title="Behalten & als Aufgabe sichern (Taste L oder Pfeil rechts)"
+          className="h-12 px-5 rounded-full bg-[#81c995]/20 hover:bg-[#81c995]/30 border border-[#81c995]/40 text-[#81c995] font-semibold text-sm flex items-center gap-2 transition-all active:scale-95"
+        >
+          <Check className="w-4 h-4" />
+          <span>Behalten</span>
+        </button>
+      </div>
+    </div>
+  );
+};