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.

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

@@ -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>