spb/note-spboucher-ai

1"use client";2import { Plus } from "lucide-react";3import { cn } from "@/lib/utils";4import { isEmpty } from "@/lib/databases/values";5import { useDb } from "../hooks";6import { CellDisplay } from "../cells/Cell";7import { groupRows } from "../group";8import { OPTION_CLASS } from "../colors";910export function ListView() {11  const ctx = useDb(); const gb = ctx.props.find((p) => p.id === ctx.view.config.groupBy); const groups = groupRows(ctx.rows, gb);12  const side = ctx.visibleProps.filter((p) => p.type !== "title" && p.id !== gb?.id);13  return (14    <div className="space-y-3">15      {groups.map((g) => (g.rows.length || !gb) ? (16        <div key={g.key}>17          {gb && <div className="mb-1 flex items-center gap-1.5"><span className={cn("rounded-md px-1.5 py-0.5 text-[12px] font-medium", OPTION_CLASS[g.color])}>{g.label}</span><span className="text-[12px] text-fg-faint">{g.rows.length}</span></div>}18          <div className="divide-y divide-line rounded-lg border border-line bg-bg-elev">19            {g.rows.map((r) => <button key={r.id} type="button" onClick={() => ctx.open(r.id)} className="flex min-h-10 w-full items-center gap-3 px-3 py-1.5 text-left hover:bg-bg-sunk"><span className="min-w-0 flex-1 truncate text-[13px] font-medium">{r.icon ? `${r.icon} ` : ""}{r.title || <span className="font-normal text-fg-faint">Untitled</span>}</span><span className="flex shrink-0 items-center gap-2 text-[12px] text-fg-muted">{side.filter((p) => !isEmpty(r.values[p.id])).slice(0, ctx.isMobile ? 2 : 5).map((p) => <span key={p.id} className="max-w-[10rem] truncate"><CellDisplay p={p} value={r.values[p.id]} compact /></span>)}</span></button>)}20            <button type="button" onClick={() => ctx.addRow(gb && g.value !== undefined ? { [gb.id]: g.value } : {})} className="flex h-9 w-full items-center gap-1 px-3 text-[12px] text-fg-faint hover:bg-bg-sunk hover:text-fg"><Plus className="size-3.5" /> New</button>21          </div>22        </div>) : null)}23    </div>24  );25}26