feat: p2 batch 28-31 reminders lists comments bang stats

Calendar events support multiple reminder offsets with presets and per-user defaults. Lists index adds inline task entry and list property editing. Generic entity comments on list detail. New bangs.stats dashboard widget. Closes Gitea #28, #29, #30, #31. Migrations 0022 and 0023.
2026-07-04 22:17:35 -05:00
parent 7714b1187c
commit e1c2a090fb
31 changed files with 1287 additions and 92 deletions
@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import { Archive, Plus, Trash2 } from "lucide-react";
 import { useEffect, useRef, useState, useTransition } from "react";
 import { DetailBackLink } from "@/components/detail-back-link";
+import { EntityComments } from "@/components/comments/entity-comments";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ShareButton } from "@/components/share-button";
@@ -18,7 +19,13 @@ import {
  updateItem,
 } from "../server/actions";

-export function ListDetail({ initialList }: { initialList: ListDetailDto }) {
+export function ListDetail({
+  initialList,
+  currentUserId,
+}: {
+  initialList: ListDetailDto;
+  currentUserId: string;
+}) {
  const router = useRouter();
  const [list, setList] = useState(initialList);
  const [draft, setDraft] = useState("");
@@ -156,6 +163,7 @@ export function ListDetail({ initialList }: { initialList: ListDetailDto }) {
          <ListItemRow
            key={item.id}
            item={item}
+            currentUserId={currentUserId}
            onToggle={(done) => setItemDone(item, done)}
            onEdit={(text) => editItemText(item, text)}
            onCommit={() => commitItemText(item)}
@@ -170,6 +178,7 @@ export function ListDetail({ initialList }: { initialList: ListDetailDto }) {
              <ListItemRow
                key={item.id}
                item={item}
+                currentUserId={currentUserId}
                onToggle={(done) => setItemDone(item, done)}
                onEdit={(text) => editItemText(item, text)}
                onCommit={() => commitItemText(item)}
@@ -179,18 +188,22 @@ export function ListDetail({ initialList }: { initialList: ListDetailDto }) {
          </>
        )}
      </div>
+
+      <EntityComments entityType="lists.list" entityId={list.id} currentUserId={currentUserId} />
    </div>
  );
 }

 function ListItemRow({
  item,
+  currentUserId,
  onToggle,
  onEdit,
  onCommit,
  onRemove,
 }: {
  item: ListItemDto;
+  currentUserId: string;
  onToggle: (done: boolean) => void;
  onEdit: (text: string) => void;
  onCommit: () => void;
@@ -333,6 +346,14 @@ function ListItemRow({
          <Trash2 className="size-3.5" />
        </Button>
      </div>
+      <div className="px-[14px] pb-2">
+        <EntityComments
+          entityType="lists.item"
+          entityId={item.id}
+          currentUserId={currentUserId}
+          compact
+        />
+      </div>
    </div>
  );
 }
@@ -1,13 +1,13 @@
 "use client";

 import Link from "next/link";
-import { ChevronDown, ChevronRight, ExternalLink, Plus } from "lucide-react";
+import { ChevronDown, ChevronRight, ExternalLink, Pencil, 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 { ListIndexItem, ListWithItemsDto } from "../server/queries";
-import { createList, toggleItem } from "../server/actions";
+import { addItem, createList, toggleItem, updateListProperties } from "../server/actions";

 export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
  const [listRows, setListRows] = useState(lists);
@@ -61,6 +61,44 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
    });
  }

+  function handleAddItem(listId: string, text: string) {
+    setListRows((current) =>
+      current.map((list) =>
+        list.id !== listId
+          ? list
+          : {
+              ...list,
+              openCount: list.openCount + 1,
+              items: [
+                ...list.items,
+                {
+                  id: `temp-${Date.now()}`,
+                  text,
+                  done: false,
+                  position: list.items.length,
+                },
+              ],
+            },
+      ),
+    );
+
+    startTransition(async () => {
+      await addItem({ listId, text });
+      const { listListsWithItems } = await import("../server/queries");
+      const refreshed = await listListsWithItems();
+      setListRows(refreshed);
+    });
+  }
+
+  function handleUpdateList(listId: string, patch: { name?: string; type?: string }) {
+    setListRows((current) =>
+      current.map((list) => (list.id === listId ? { ...list, ...patch } : list)),
+    );
+    startTransition(async () => {
+      await updateListProperties({ id: listId, ...patch });
+    });
+  }
+
  return (
    <div className="mx-auto grid w-full max-w-5xl gap-6">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
@@ -101,7 +139,13 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
            <div className="eyebrow">{groupType}</div>
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {groupLists.map((list) => (
-                <ListCard key={list.id} list={list} onToggle={handleToggle} />
+                <ListCard
+                  key={list.id}
+                  list={list}
+                  onToggle={handleToggle}
+                  onAddItem={handleAddItem}
+                  onUpdateList={handleUpdateList}
+                />
              ))}
            </div>
          </section>
@@ -114,11 +158,34 @@ export function ListsIndex({ lists }: { lists: ListWithItemsDto[] }) {
 function ListCard({
  list,
  onToggle,
+  onAddItem,
+  onUpdateList,
 }: {
  list: ListWithItemsDto;
  onToggle: (listId: string, item: ListIndexItem, done: boolean) => void;
+  onAddItem: (listId: string, text: string) => void;
+  onUpdateList: (listId: string, patch: { name?: string; type?: string }) => void;
 }) {
  const [expanded, setExpanded] = useState(true);
+  const [editing, setEditing] = useState(false);
+  const [draftName, setDraftName] = useState(list.name);
+  const [draftType, setDraftType] = useState(list.type);
+  const [itemDraft, setItemDraft] = useState("");
+
+  function saveListProperties() {
+    const name = draftName.trim();
+    const type = draftType.trim();
+    if (!name || !type) return;
+    onUpdateList(list.id, { name, type });
+    setEditing(false);
+  }
+
+  function submitItem() {
+    const text = itemDraft.trim();
+    if (!text) return;
+    onAddItem(list.id, text);
+    setItemDraft("");
+  }

  return (
    <div
@@ -135,22 +202,60 @@ function ListCard({
          >
            {expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
          </button>
-          <div className="min-w-0">
-            <h3 className="serif text-[15px] truncate text-[var(--ink)] m-0 font-medium">
-              {list.name}
-            </h3>
-            <div className="meta">
-              {list.openCount} open · {list.doneCount} done
-            </div>
+          <div className="min-w-0 flex-1">
+            {editing ? (
+              <div className="grid gap-2">
+                <Input value={draftName} onChange={(e) => setDraftName(e.target.value)} />
+                <Input value={draftType} onChange={(e) => setDraftType(e.target.value)} />
+                <div className="flex gap-2">
+                  <Button type="button" size="sm" onClick={saveListProperties}>
+                    Save
+                  </Button>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => {
+                      setDraftName(list.name);
+                      setDraftType(list.type);
+                      setEditing(false);
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <>
+                <h3 className="serif text-[15px] truncate text-[var(--ink)] m-0 font-medium">
+                  {list.name}
+                </h3>
+                <div className="meta">
+                  {list.type} · {list.openCount} open · {list.doneCount} done
+                </div>
+              </>
+            )}
          </div>
        </div>
-        <Link
-          href={`/lists/${list.id}`}
-          className="shrink-0 text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
-          aria-label={`Open ${list.name}`}
-        >
-          <ExternalLink className="size-4" />
-        </Link>
+        <div className="flex shrink-0 items-center gap-1">
+          {!editing && (
+            <button
+              type="button"
+              onClick={() => setEditing(true)}
+              className="text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
+              aria-label={`Edit ${list.name}`}
+            >
+              <Pencil className="size-4" />
+            </button>
+          )}
+          <Link
+            href={`/lists/${list.id}`}
+            className="text-[var(--ink-mute)] hover:text-[var(--ink)] transition-colors"
+            aria-label={`Open ${list.name}`}
+          >
+            <ExternalLink className="size-4" />
+          </Link>
+        </div>
      </div>

      {expanded && (
@@ -204,6 +309,23 @@ function ListCard({
              )}
            </div>
          )}
+
+          <div className="flex gap-2 px-[14px] py-3 border-t border-[var(--hair)]">
+            <Input
+              value={itemDraft}
+              onChange={(e) => setItemDraft(e.target.value)}
+              placeholder="Add a task…"
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  submitItem();
+                }
+              }}
+            />
+            <Button type="button" size="sm" disabled={!itemDraft.trim()} onClick={submitItem}>
+              Add
+            </Button>
+          </div>
        </div>
      )}
    </div>
@@ -59,16 +59,20 @@ export async function updateListForScope(
    .update(lists)
    .set({
      name: parsed.name,
+      type: parsed.type,
      archived: parsed.archived,
    })
    .where(eq(lists.id, parsed.id));

-  if (parsed.name) {
+  if (parsed.name || parsed.type) {
    await logActivityForScope(toScope(scope), {
      entityType: "lists.list",
      entityId: parsed.id,
      action: "update",
-      payload: { name: parsed.name },
+      payload: {
+        ...(parsed.name ? { name: parsed.name } : {}),
+        ...(parsed.type ? { type: parsed.type } : {}),
+      },
    });
  }
  if (parsed.archived === true) {
@@ -93,6 +97,20 @@ export async function renameList(input: { id: string; name: string }) {
  revalidatePath(`/lists/${parsed.id}`);
 }

+export async function updateListProperties(input: { id: string; name?: string; type?: string }) {
+  const parsed = z
+    .object({
+      id: z.string().uuid(),
+      name: listInput.shape.name.optional(),
+      type: listInput.shape.type.optional(),
+    })
+    .parse(input);
+  const { household, user } = await getCurrentSession();
+  await updateListForScope({ householdId: household.id, userId: user.id, role: null }, parsed);
+  revalidatePath("/lists");
+  revalidatePath(`/lists/${parsed.id}`);
+}
+
 export async function archiveList(input: { id: string }) {
  const parsed = z.object({ id: z.string().uuid() }).parse(input);
  const { household, user } = await getCurrentSession();
@@ -7,6 +7,7 @@ export const listInput = z.object({

 export const listUpdateInput = z.object({
  name: listInput.shape.name.optional(),
+  type: listInput.shape.type.optional(),
  archived: z.boolean().optional(),
 });