Inline items on lists page and interactive dashboard widget

- Lists page: show up to 10 open items per list in collapsible cards;
  items can be checked off directly without opening the list
- Dashboard widget: replace static span-checkboxes with a real client
  component using useOptimistic so items can be toggled from the dashboard
- listWidgetItems now returns listId for navigation links
- New listListsWithItems query fetches counts + top 10 open items per list

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

src/modules/lists/components/list-widget.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { useOptimistic, useTransition } from "react";
+import { toggleItem } from "../server/actions";
+
+type WidgetItem = {
+  id: string;
+  text: string;
+  done: boolean;
+  listName: string;
+  listId: string;
+};
+
+export function ListWidget({ initialItems }: { initialItems: WidgetItem[] }) {
+  const [items, setOptimistic] = useOptimistic(
+    initialItems,
+    (current: WidgetItem[], { id, done }: { id: string; done: boolean }) =>
+      current.map((item) => (item.id === id ? { ...item, done } : item)),
+  );
+  const [, startTransition] = useTransition();
+
+  function toggle(item: WidgetItem, done: boolean) {
+    startTransition(async () => {
+      setOptimistic({ id: item.id, done });
+      await toggleItem({ id: item.id, done });
+    });
+  }
+
+  if (items.length === 0) {
+    return <p className="text-sm text-muted-foreground">No open items</p>;
+  }
+
+  return (
+    <ul className="space-y-1">
+      {items.map((item) => (
+        <li key={item.id} className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            aria-label={`Complete ${item.text}`}
+            className="size-4 shrink-0 accent-primary"
+            checked={item.done}
+            onChange={(e) => toggle(item, e.target.checked)}
+          />
+          <Link
+            href={`/lists/${item.listId}`}
+            className={`truncate hover:underline ${item.done ? "text-muted-foreground line-through" : ""}`}
+          >
+            {item.text}
+          </Link>
+          <span className="ml-auto shrink-0 text-xs text-muted-foreground">{item.listName}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}

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

@@ -1,22 +1,22 @@
 "use client";
 
 import Link from "next/link";
-import { Plus } from "lucide-react";
+import { ChevronDown, ChevronRight, ExternalLink, Plus } from "lucide-react";
 import { useMemo, useState, useTransition } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import type { ListDto } from "../server/queries";
-import { createList } from "../server/actions";
+import type { ListIndexItem, ListWithItemsDto } from "../server/queries";
+import { createList, toggleItem } from "../server/actions";
 
-export function ListsIndex({ lists }: { lists: ListDto[] }) {
+export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
   const [listRows, setListRows] = useState(lists);
   const [type, setType] = useState("shopping");
   const [name, setName] = useState("");
   const [, startTransition] = useTransition();
 
   const grouped = useMemo(() => {
-    const groups = new Map<string, ListDto[]>();
+    const groups = new Map<string, ListWithItemsDto[]>();
     for (const list of listRows) {
       groups.set(list.type, [...(groups.get(list.type) ?? []), list]);
     }
@@ -36,12 +36,31 @@ export function ListsIndex({ lists }: { lists: ListDto[] }) {
           openCount: 0,
           doneCount: 0,
           createdAt: created.createdAt.toISOString(),
+          items: [],
         },
       ]);
       setName("");
     });
   }
 
+  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),
+            },
+      ),
+    );
+    startTransition(async () => {
+      await toggleItem({ id: item.id, done });
+    });
+  }
+
   return (
     <div className="mx-auto grid w-full max-w-5xl gap-6 p-4">
       <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
@@ -81,16 +100,7 @@ export function ListsIndex({ lists }: { lists: ListDto[] }) {
             </h2>
             <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
               {groupLists.map((list) => (
-                <Link
-                  key={list.id}
-                  href={`/lists/${list.id}`}
-                  className="rounded-lg border bg-card p-4 text-card-foreground transition-colors hover:bg-muted"
-                >
-                  <div className="font-medium">{list.name}</div>
-                  <div className="mt-2 text-sm text-muted-foreground">
-                    {list.openCount} open / {list.doneCount} done
-                  </div>
-                </Link>
+                <ListCard key={list.id} list={list} onToggle={handleToggle} />
               ))}
             </div>
           </section>
@@ -99,3 +109,76 @@ export function ListsIndex({ lists }: { lists: ListDto[] }) {
     </div>
   );
 }
+
+function ListCard({
+  list,
+  onToggle,
+}: {
+  list: ListWithItemsDto;
+  onToggle: (listId: string, item: ListIndexItem, done: boolean) => void;
+}) {
+  const [expanded, setExpanded] = useState(true);
+
+  return (
+    <div className="rounded-lg border bg-card text-card-foreground">
+      <div className="flex items-center gap-2 p-4">
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="text-muted-foreground hover:text-foreground transition-colors"
+          aria-label={expanded ? "Collapse" : "Expand"}
+        >
+          {expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+        </button>
+        <div className="min-w-0 flex-1">
+          <div className="font-medium truncate">{list.name}</div>
+          <div className="text-xs text-muted-foreground">
+            {list.openCount} open · {list.doneCount} done
+          </div>
+        </div>
+        <Link
+          href={`/lists/${list.id}`}
+          className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+          aria-label={`Open ${list.name}`}
+        >
+          <ExternalLink className="size-4" />
+        </Link>
+      </div>
+
+      {expanded && (
+        <div className="border-t">
+          {list.items.length === 0 ? (
+            <p className="px-4 py-3 text-sm text-muted-foreground">
+              {list.openCount === 0 ? "All done!" : "No items to show."}
+            </p>
+          ) : (
+            <ul className="divide-y">
+              {list.items.map((item) => (
+                <li key={item.id} className="flex items-center gap-3 px-4 py-2">
+                  <input
+                    type="checkbox"
+                    aria-label={`Complete ${item.text}`}
+                    className="size-4 accent-primary shrink-0"
+                    checked={item.done}
+                    onChange={(e) => onToggle(list.id, item, e.target.checked)}
+                  />
+                  <span className="text-sm truncate">{item.text}</span>
+                </li>
+              ))}
+              {list.openCount > list.items.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
+                  </Link>
+                </li>
+              )}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}