Delay item disappearance after check-off; add setting in Settings

Items on the lists page and dashboard widget now show as crossed-out for
a configurable duration (default 3s) before vanishing. Unchecking within
the window cancels the removal. The delay is stored in localStorage and
configurable via Settings → Lists (options: 1s / 3s / 5s / 10s / 30s).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/modules/lists/components/lists-index.tsx

@@ -2,10 +2,11 @@
 
 import Link from "next/link";
 import { ChevronDown, ChevronRight, ExternalLink, Plus } from "lucide-react";
-import { useMemo, useState, useTransition } from "react";
+import { useMemo, useRef, useState, useTransition } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { useCompletionDelay } from "@/hooks/use-completion-delay";
 import type { ListIndexItem, ListWithItemsDto } from "../server/queries";
 import { createList, toggleItem } from "../server/actions";
 
@@ -14,6 +15,8 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
   const [type, setType] = useState("shopping");
   const [name, setName] = useState("");
   const [, startTransition] = useTransition();
+  const { delay } = useCompletionDelay();
+  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
 
   const grouped = useMemo(() => {
     const groups = new Map<string, ListWithItemsDto[]>();
@@ -44,18 +47,55 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
   }
 
   function handleToggle(listId: string, item: ListIndexItem, done: boolean) {
-    setListRows((current) =>
-      current.map((list) =>
-        list.id !== listId
-          ? list
-          : {
-              ...list,
-              openCount: list.openCount + (done ? -1 : 1),
-              doneCount: list.doneCount + (done ? 1 : -1),
-              items: list.items.filter((i) => i.id !== item.id),
-            },
-      ),
-    );
+    const timerId = `${listId}:${item.id}`;
+
+    if (done) {
+      // Mark done immediately (strikethrough) and schedule removal
+      setListRows((current) =>
+        current.map((list) =>
+          list.id !== listId
+            ? list
+            : {
+                ...list,
+                openCount: list.openCount - 1,
+                doneCount: list.doneCount + 1,
+                items: list.items.map((i) => (i.id === item.id ? { ...i, done: true } : i)),
+              },
+        ),
+      );
+
+      const t = setTimeout(() => {
+        setListRows((current) =>
+          current.map((list) =>
+            list.id !== listId
+              ? list
+              : { ...list, items: list.items.filter((i) => i.id !== item.id) },
+          ),
+        );
+        timers.current.delete(timerId);
+      }, delay);
+      timers.current.set(timerId, t);
+    } else {
+      // Cancel pending removal and restore item
+      const existing = timers.current.get(timerId);
+      if (existing) {
+        clearTimeout(existing);
+        timers.current.delete(timerId);
+      }
+      setListRows((current) =>
+        current.map((list) =>
+          list.id !== listId
+            ? list
+            : {
+                ...list,
+                openCount: list.openCount + 1,
+                doneCount: list.doneCount - 1,
+                items: list.items.map((i) => (i.id === item.id ? { ...i, done: false } : i)),
+              },
+        ),
+      );
+    }
+
     startTransition(async () => {
       await toggleItem({ id: item.id, done });
     });
@@ -162,16 +202,22 @@ function ListCard({
                     checked={item.done}
                     onChange={(e) => onToggle(list.id, item, e.target.checked)}
                   />
-                  <span className="text-sm truncate">{item.text}</span>
+                  <span
+                    className={`text-sm truncate transition-colors ${
+                      item.done ? "text-muted-foreground line-through" : ""
+                    }`}
+                  >
+                    {item.text}
+                  </span>
                 </li>
               ))}
-              {list.openCount > list.items.length && (
+              {list.openCount > list.items.filter((i) => !i.done).length && (
                 <li className="px-4 py-2">
                   <Link
                     href={`/lists/${list.id}`}
                     className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                   >
-                    +{list.openCount - list.items.length} more — open list
+                    +{list.openCount - list.items.filter((i) => !i.done).length} more — open list
                   </Link>
                 </li>
               )}