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>
2026-05-06 14:57:01 -05:00
parent 734268cb75
commit 8fda3e47dd
5 changed files with 239 additions and 43 deletions
@@ -1,7 +1,7 @@
 import { ListsIndex } from "@/modules/lists/components/lists-index";
-import { listLists } from "@/modules/lists/server/queries";
+import { listListsWithItems } from "@/modules/lists/server/queries";

 export default async function ListsPage() {
-  const lists = await listLists();
+  const lists = await listListsWithItems();
  return <ListsIndex lists={lists} />;
 }
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -3,6 +3,7 @@ import { z } from "zod";
 import { listLists, listWidgetItems, searchItems, searchLists } from "./server/queries";
 import { loadListForShare, type ListShareData } from "./server/share-queries";
 import { ListSharedView } from "./components/shared-view";
+import { ListWidget } from "./components/list-widget";

 const listIdsSchema = z.union([z.literal("all"), z.array(z.string().uuid())]);

@@ -12,37 +13,14 @@ const listWidgetConfigSchema = z.object({
  limit: z.number().int().min(1).max(50).optional(),
 });

-async function ListWidget({ config }: { config: unknown; ctx: WidgetContext }) {
+async function ListWidgetServer({ config }: { config: unknown; ctx: WidgetContext }) {
  const parsed = listWidgetConfigSchema.parse(config);
  const items = await listWidgetItems({
    listIds: parsed.listIds,
    showCompleted: parsed.showCompleted,
    limit: parsed.limit ?? 10,
  });
-
-  if (items.length === 0) {
-    return (
-      <p className="text-sm text-muted-foreground">
-        {parsed.showCompleted ? "No items" : "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">
-          <span
-            className={`h-4 w-4 shrink-0 rounded-sm border border-border ${item.done ? "bg-muted" : ""}`}
-          />
-          <span className={`truncate ${item.done ? "text-muted-foreground line-through" : ""}`}>
-            {item.text}
-          </span>
-          <span className="ml-auto shrink-0 text-xs text-muted-foreground">{item.listName}</span>
-        </li>
-      ))}
-    </ul>
-  );
+  return <ListWidget initialItems={items} />;
 }

 const manifest: ModuleManifest = {
@@ -109,7 +87,7 @@ const manifest: ModuleManifest = {
          name: list.name,
        })),
      }),
-      render: (props) => <ListWidget {...props} />,
+      render: (props) => <ListWidgetServer {...props} />,
    },
  ],
  quickAdds: [
@@ -156,6 +156,84 @@ export async function searchItems(query: string, householdId: string) {
  }));
 }

+export type ListIndexItem = {
+  id: string;
+  text: string;
+  done: boolean;
+  position: number;
+};
+
+export type ListWithItemsDto = ListDto & { items: ListIndexItem[] };
+
+export async function listListsWithItems(): Promise<ListWithItemsDto[]> {
+  const { household } = await getCurrentSession();
+  await ensureDefaultListsForHousehold(household.id);
+
+  const listsRows = await db
+    .select()
+    .from(lists)
+    .where(and(eq(lists.householdId, household.id), eq(lists.archived, false)))
+    .orderBy(asc(lists.type), asc(lists.name));
+
+  if (listsRows.length === 0) return [];
+
+  const listIds = listsRows.map((l) => l.id);
+
+  // Fetch all open items for these lists, ordered so we can take top 10 per list in JS
+  const itemRows = await db
+    .select({
+      id: listItems.id,
+      listId: listItems.listId,
+      text: listItems.text,
+      done: listItems.done,
+      position: listItems.position,
+      createdAt: listItems.createdAt,
+    })
+    .from(listItems)
+    .where(and(inArray(listItems.listId, listIds), eq(listItems.done, false)))
+    .orderBy(asc(listItems.position), asc(listItems.createdAt));
+
+  const itemsByList = new Map<string, ListIndexItem[]>();
+  for (const item of itemRows) {
+    const existing = itemsByList.get(item.listId) ?? [];
+    if (existing.length < 10) {
+      existing.push({ id: item.id, text: item.text, done: item.done, position: item.position });
+    }
+    itemsByList.set(item.listId, existing);
+  }
+
+  // Count all items (open + done) per list
+  const countRows = await db
+    .select({
+      listId: listItems.listId,
+      done: listItems.done,
+    })
+    .from(listItems)
+    .where(inArray(listItems.listId, listIds));
+
+  const counts = new Map<string, { open: number; done: number }>();
+  for (const row of countRows) {
+    const c = counts.get(row.listId) ?? { open: 0, done: 0 };
+    if (row.done) c.done += 1;
+    else c.open += 1;
+    counts.set(row.listId, c);
+  }
+
+  return listsRows.map((list) => {
+    const c = counts.get(list.id) ?? { open: 0, done: 0 };
+    return {
+      id: list.id,
+      type: list.type,
+      name: list.name,
+      archived: list.archived,
+      openCount: c.open,
+      doneCount: c.done,
+      createdAt: list.createdAt.toISOString(),
+      items: itemsByList.get(list.id) ?? [],
+    };
+  });
+}
+
 export async function listWidgetItems(input: {
  listIds: "all" | string[];
  showCompleted: boolean;
@@ -184,6 +262,7 @@ export async function listWidgetItems(input: {
      id: listItems.id,
      text: listItems.text,
      done: listItems.done,
+      listId: listItems.listId,
      listName: lists.name,
    })
    .from(listItems)