@agent-native/core-corpus 0.213.1 → 0.214.0

package/corpus/templates/content/app/components/editor/database/ListItemRow.tsx

@@ -0,0 +1,426 @@
+import type {
+  ContentDatabaseItem,
+  ContentDatabaseItemLayout,
+  DocumentProperty,
+} from "@shared/api";
+import type {
+  ContentDatabaseItemLayoutSlot,
+  ResolvedContentDatabaseItemLayout,
+} from "@shared/database-item-layout";
+import { stripMarkdownForPreview } from "@shared/og-description";
+import {
+  isEmptyPropertyValue,
+  type DocumentPropertyOptionColor,
+} from "@shared/properties";
+import { IconCheck } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+import { displayValue, PropertyValuePopover } from "../DocumentProperties";
+import { DatabaseItemPageIcon, dbText } from "./DatabaseView";
+import {
+  ListItemLayoutSlotEditor,
+  listItemLayoutSlotLabel,
+} from "./ListItemLayout";
+
+export interface ListItemRowLayout {
+  /** The layout being edited: the saved one or the default rows' equivalent. */
+  layout: ContentDatabaseItemLayout;
+  resolved: ResolvedContentDatabaseItemLayout<DocumentProperty>;
+  properties: DocumentProperty[];
+  editing: boolean;
+  onLayoutChange: (layout: ContentDatabaseItemLayout) => void;
+  onToggleCheckbox: (
+    item: ContentDatabaseItem,
+    property: DocumentProperty,
+  ) => void;
+}
+
+const STATUS_DOT_CLASSES: Record<DocumentPropertyOptionColor, string> = {
+  gray: "border-muted-foreground/50 bg-muted-foreground/10 dark:border-muted-foreground dark:bg-muted-foreground/20",
+  brown: "border-amber-700 bg-amber-700/25",
+  orange: "border-orange-500 bg-orange-500/25",
+  yellow: "border-yellow-500 bg-yellow-500/30",
+  green: "border-emerald-500 bg-emerald-500",
+  blue: "border-sky-500 bg-sky-500/30",
+  purple: "border-violet-500 bg-violet-500/30",
+  pink: "border-pink-500 bg-pink-500/30",
+  red: "border-rose-500 bg-rose-500/30",
+};
+
+const LINE_CLAMP_CLASSES = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+} as const;
+
+const TITLE_WEIGHT_CLASSES = {
+  regular: "font-normal",
+  medium: "font-medium",
+  bold: "font-semibold",
+} as const;
+
+function itemValue(item: ContentDatabaseItem, property: DocumentProperty) {
+  return (
+    item.properties.find(
+      (candidate) => candidate.definition.id === property.definition.id,
+    ) ?? { ...property, value: null }
+  );
+}
+
+/**
+ * Values a row leaves out entirely, so empty slots take no space. An
+ * unchecked box is a checkbox's empty value; a checked one shows by name.
+ */
+function isBlankValue(property: DocumentProperty) {
+  return (
+    isEmptyPropertyValue(property.value) ||
+    (property.definition.type === "checkbox" && property.value !== true)
+  );
+}
+
+function line2Text(property: DocumentProperty) {
+  const value = property.value;
+  if (typeof value !== "string") return "";
+  return property.definition.type === "blocks"
+    ? stripMarkdownForPreview(value)
+    : value.trim();
+}
+
+/** The fields a slot shows, which can be set but blank on a given row. */
+function slotFieldNames(
+  resolved: ResolvedContentDatabaseItemLayout<DocumentProperty>,
+  slot: ContentDatabaseItemLayoutSlot,
+) {
+  const fields =
+    slot === "line2"
+      ? resolved.line2.property
+        ? [resolved.line2.property]
+        : []
+      : slot === "line3" || slot === "trailing"
+        ? resolved[slot]
+        : [];
+  return fields.map((property) => property.definition.name);
+}
+
+function SlotZone({
+  slot,
+  row,
+  showPlaceholder,
+  empty,
+  className,
+  children,
+}: {
+  slot: ContentDatabaseItemLayoutSlot;
+  row: ListItemRowLayout;
+  showPlaceholder: boolean;
+  empty: boolean;
+  className?: string;
+  children: ReactNode;
+}) {
+  if (!row.editing) return empty ? null : <>{children}</>;
+  if (empty && !showPlaceholder) return null;
+  const label = listItemLayoutSlotLabel(slot);
+  const fields = slotFieldNames(row.resolved, slot);
+  const unset = empty && fields.length === 0;
+  const action = dbText(unset ? "listRowsAddSlot" : "listRowsChangeSlot", {
+    slot: label,
+  });
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={unset ? action : undefined}
+          className={cn(
+            "rounded-md border border-dashed border-database-blue/50 text-left transition-colors hover:border-database-blue hover:bg-database-blue/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-database-blue data-[state=open]:bg-database-blue/10",
+            empty ? "px-2 py-0.5 text-xs text-database-blue/80" : "px-1 py-0.5",
+            className,
+          )}
+        >
+          {unset ? (
+            `+ ${label}`
+          ) : (
+            <>
+              {/* Screen readers hear the action, then what the slot shows. */}
+              <span className="sr-only">{action}: </span>
+              {empty ? (
+                <>
+                  {label}
+                  <span className="ml-1 text-muted-foreground">
+                    {fields.join(", ")}
+                  </span>
+                </>
+              ) : (
+                children
+              )}
+            </>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start">
+        <div className="mb-2 text-xs font-medium text-muted-foreground">
+          {label}
+        </div>
+        <ListItemLayoutSlotEditor
+          slot={slot}
+          layout={row.layout}
+          properties={row.properties}
+          onChange={row.onLayoutChange}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function MetaValues({ values }: { values: DocumentProperty[] }) {
+  return values.map((property) => (
+    <span
+      key={property.definition.id}
+      className="inline-flex max-w-48 min-w-0 items-center truncate"
+    >
+      {property.definition.type === "checkbox" ? (
+        <span className="inline-flex min-w-0 items-center gap-1 text-foreground">
+          <IconCheck className="size-3.5 shrink-0" />
+          <span className="truncate">{property.definition.name}</span>
+        </span>
+      ) : (
+        displayValue(property)
+      )}
+    </span>
+  ));
+}
+
+/** A list row whose parts follow the view's item layout. */
+export function DatabaseLayoutListRow({
+  row,
+  isFirst,
+  item,
+  databaseDocumentId,
+  canEdit,
+  onPreview,
+  actions,
+}: {
+  row: ListItemRowLayout;
+  isFirst: boolean;
+  item: ContentDatabaseItem;
+  databaseDocumentId: string;
+  canEdit: boolean;
+  onPreview: () => void;
+  actions: ReactNode;
+}) {
+  const { resolved, editing } = row;
+  const title = item.document.title || "Untitled";
+  const leadingProperty = resolved.leading.property
+    ? itemValue(item, resolved.leading.property)
+    : null;
+  const checked =
+    resolved.leading.kind === "checkbox" && leadingProperty?.value === true;
+  const interactive = canEdit && !editing && leadingProperty?.editable === true;
+
+  let leading: ReactNode = null;
+  if (resolved.leading.kind === "page_icon") {
+    leading = (
+      <DatabaseItemPageIcon
+        document={item.document}
+        className="size-4 text-sm"
+        fallbackClassName="size-4"
+      />
+    );
+  } else if (resolved.leading.kind === "checkbox" && leadingProperty) {
+    const box = cn(
+      "flex size-4 items-center justify-center rounded border-2 transition-colors",
+      checked
+        ? "border-database-blue bg-database-blue text-database-blue-foreground"
+        : "border-muted-foreground/60",
+    );
+    const mark = checked ? (
+      <IconCheck aria-hidden="true" className="size-3" stroke={3} />
+    ) : null;
+    // In Edit rows the whole slot is a button, so the box is only a picture,
+    // with its field and state as text for screen readers.
+    leading = editing ? (
+      <span className={box}>
+        {mark}
+        <span className="sr-only">
+          {`${leadingProperty.definition.name}: ${dbText(checked ? "checked" : "unchecked")}`}
+        </span>
+      </span>
+    ) : (
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={checked}
+        aria-label={`${leadingProperty.definition.name}: ${title}`}
+        disabled={!interactive}
+        className={cn(
+          box,
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default",
+          !checked && "enabled:hover:border-foreground",
+        )}
+        onClick={() => row.onToggleCheckbox(item, leadingProperty)}
+      >
+        {mark}
+      </button>
+    );
+  } else if (resolved.leading.kind === "status" && leadingProperty) {
+    const option = (leadingProperty.definition.options.options ?? []).find(
+      (candidate) => candidate.id === leadingProperty.value,
+    );
+    const statusName = option?.name ?? dbText("listRowsNoStatus");
+    const dot = (
+      <span
+        title={statusName}
+        className={cn(
+          "block size-3.5 shrink-0 rounded-full border-2",
+          option
+            ? STATUS_DOT_CLASSES[option.color]
+            : "border-dashed border-muted-foreground/60",
+        )}
+      >
+        <span className="sr-only">{statusName}</span>
+      </span>
+    );
+    leading = interactive ? (
+      <span className="flex w-6 justify-center">
+        <PropertyValuePopover
+          property={leadingProperty}
+          documentId={item.document.id}
+          databaseDocumentId={databaseDocumentId}
+        >
+          {dot}
+        </PropertyValuePopover>
+      </span>
+    ) : (
+      dot
+    );
+  }
+
+  const line2Property = resolved.line2.property
+    ? itemValue(item, resolved.line2.property)
+    : null;
+  const line2 = line2Property ? line2Text(line2Property) : "";
+  const filled = (properties: DocumentProperty[]) =>
+    properties
+      .map((property) => itemValue(item, property))
+      .filter((property) => !isBlankValue(property));
+  const line3 = filled(resolved.line3);
+  const trailing = filled(resolved.trailing);
+
+  const body = (
+    <>
+      <SlotZone
+        slot="title"
+        row={row}
+        showPlaceholder={false}
+        empty={false}
+        className="block max-w-full"
+      >
+        <span
+          className={cn(
+            "block min-w-0 truncate text-sm",
+            TITLE_WEIGHT_CLASSES[resolved.titleWeight],
+            checked &&
+              "text-muted-foreground line-through decoration-muted-foreground/70",
+          )}
+        >
+          {title}
+        </span>
+      </SlotZone>
+      <SlotZone
+        slot="line2"
+        row={row}
+        showPlaceholder={isFirst}
+        empty={!line2}
+        className="mt-0.5 block w-full"
+      >
+        <span
+          className={cn(
+            "text-xs leading-relaxed whitespace-pre-line text-muted-foreground",
+            LINE_CLAMP_CLASSES[resolved.line2.lines],
+          )}
+        >
+          {line2}
+        </span>
+      </SlotZone>
+      <SlotZone
+        slot="line3"
+        row={row}
+        showPlaceholder={isFirst}
+        empty={line3.length === 0}
+        className="mt-1 inline-flex max-w-full"
+      >
+        <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+          <MetaValues values={line3} />
+        </span>
+      </SlotZone>
+      {/* On phones End sits under the title, so it's edited there too. */}
+      <SlotZone
+        slot="trailing"
+        row={row}
+        showPlaceholder={isFirst}
+        empty={trailing.length === 0}
+        className="mt-1 inline-flex max-w-full sm:hidden"
+      >
+        <span
+          className={cn(
+            "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground",
+            !editing && "mt-1 sm:hidden",
+          )}
+        >
+          <MetaValues values={trailing} />
+        </span>
+      </SlotZone>
+    </>
+  );
+
+  return (
+    <div
+      className={cn(
+        "group flex min-h-10 items-start gap-2 border-t border-border px-1 py-1.5",
+        !editing && "hover:bg-muted/40",
+      )}
+    >
+      <SlotZone
+        slot="leading"
+        row={row}
+        showPlaceholder={isFirst}
+        empty={!leading}
+        className="mt-1 shrink-0"
+      >
+        <span className="flex min-w-5 h-5 items-center justify-center">
+          {leading}
+        </span>
+      </SlotZone>
+      {editing ? (
+        <div className="min-w-0 flex-1 px-1.5 py-0.5">{body}</div>
+      ) : (
+        <button
+          type="button"
+          className="block min-w-0 flex-1 rounded px-1.5 py-0.5 text-left hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onClick={onPreview}
+        >
+          {body}
+        </button>
+      )}
+      <SlotZone
+        slot="trailing"
+        row={row}
+        showPlaceholder={isFirst}
+        empty={trailing.length === 0}
+        className="mt-0.5 hidden shrink-0 sm:inline-flex"
+      >
+        <span className="mt-1 hidden max-w-xs min-w-0 flex-wrap items-center justify-end gap-2 text-xs text-muted-foreground sm:flex">
+          <MetaValues values={trailing} />
+        </span>
+      </SlotZone>
+      {editing ? null : actions}
+    </div>
+  );
+}

package/corpus/templates/content/app/components/editor/database/ListView.tsx

@@ -1,8 +1,19 @@
-import type { ContentDatabaseItem, DocumentProperty } from "@shared/api";
-import { IconList, IconPlus } from "@tabler/icons-react";
+import type {
+  ContentDatabaseItem,
+  ContentDatabaseItemLayout,
+  DocumentProperty,
+} from "@shared/api";
+import {
+  resolveContentDatabaseItemLayout,
+  startingContentDatabaseItemLayout,
+} from "@shared/database-item-layout";
+import { IconCheck, IconList, IconPencil, IconPlus } from "@tabler/icons-react";
 import { useRef, useState } from "react";
+import { toast } from "sonner";
 
 import { Spinner } from "@/components/ui/spinner";
+import { useSetDocumentProperty } from "@/hooks/use-document-properties";
+import { cn } from "@/lib/utils";
 
 import { displayValue } from "../DocumentProperties";
 import {
@@ -20,12 +31,18 @@ import {
   type DatabaseBoardGroup,
   type DatabaseFilter,
 } from "./DatabaseView";
+import { ListItemLayoutPresets } from "./ListItemLayout";
+import { DatabaseLayoutListRow, type ListItemRowLayout } from "./ListItemRow";
 
 export function DatabaseListView({
   properties,
   groupableProperties,
+  layoutProperties,
   items,
+  databaseId,
   databaseDocumentId,
+  itemLayout,
+  editingRows,
   canEdit,
   canCreateItems,
   isLoading,
@@ -43,11 +60,18 @@ export function DatabaseListView({
   onPreview,
   onDeletedPreviewItem,
   onOpenPage,
+  onItemLayoutChange,
+  onEditingRowsChange,
 }: {
   properties: DocumentProperty[];
   groupableProperties: DocumentProperty[];
+  /** What custom rows can show: properties not hidden in this view. */
+  layoutProperties: DocumentProperty[];
   items: ContentDatabaseItem[];
+  databaseId: string;
   databaseDocumentId: string;
+  itemLayout: ContentDatabaseItemLayout | null;
+  editingRows: boolean;
   canEdit: boolean;
   canCreateItems: boolean;
   isLoading: boolean;
@@ -68,7 +92,44 @@ export function DatabaseListView({
   onPreview: (item: ContentDatabaseItem) => void;
   onDeletedPreviewItem: (item: ContentDatabaseItem) => boolean;
   onOpenPage: (item: ContentDatabaseItem) => void;
+  onItemLayoutChange: (layout: ContentDatabaseItemLayout | null) => void;
+  onEditingRowsChange: (editing: boolean) => void;
 }) {
+  const setProperty = useSetDocumentProperty(
+    databaseDocumentId,
+    databaseId,
+    databaseDocumentId,
+    { errorNotification: "caller" },
+  );
+  const editing = canEdit && editingRows;
+  const layout =
+    itemLayout ??
+    (editing ? startingContentDatabaseItemLayout(properties) : null);
+  const layoutRow: ListItemRowLayout | null = layout
+    ? {
+        layout,
+        resolved: resolveContentDatabaseItemLayout(layout, layoutProperties),
+        properties: layoutProperties,
+        editing,
+        onLayoutChange: onItemLayoutChange,
+        onToggleCheckbox: (item, property) => {
+          setProperty
+            .mutateAsync({
+              documentId: item.document.id,
+              propertyId: property.definition.id,
+              value: property.value !== true,
+            })
+            .catch((err: unknown) => {
+              toast.error(dbText("failedToUpdateCheckbox"), {
+                description:
+                  err instanceof Error
+                    ? err.message
+                    : dbText("somethingWentWrong"),
+              });
+            });
+        },
+      }
+    : null;
   const groups = databaseVisibleGroups(
     databaseViewItemGroups(items, groupableProperties, groupByPropertyId),
     hideEmptyGroups,
@@ -83,14 +144,44 @@ export function DatabaseListView({
       <div className="flex min-h-9 items-center gap-2 border-t border-border px-1 text-xs text-muted-foreground">
         <IconList className="size-4 shrink-0" />
         <span>List</span>
+        {canEdit ? (
+          <button
+            type="button"
+            aria-pressed={editing}
+            className={cn(
+              "ml-auto flex h-7 items-center gap-1.5 rounded-md px-2 text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              editing
+                ? "bg-database-blue text-database-blue-foreground"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+            onClick={() => onEditingRowsChange(!editing)}
+          >
+            {editing ? (
+              <IconCheck className="size-3.5" />
+            ) : (
+              <IconPencil className="size-3.5" />
+            )}
+            {dbText(editing ? "listRowsDone" : "listRowsEdit")}
+          </button>
+        ) : null}
       </div>
+      {editing ? (
+        <div className="flex flex-wrap items-center gap-2 border-t border-dashed border-database-blue/40 bg-database-blue/5 px-2 py-2 text-xs text-muted-foreground">
+          <ListItemLayoutPresets
+            layout={itemLayout}
+            properties={layoutProperties}
+            onChange={onItemLayoutChange}
+          />
+          <span>{dbText("listRowsEditHint")}</span>
+        </div>
+      ) : null}
       {isLoading ? (
         <div className="flex h-16 items-center gap-2 px-2 text-sm text-muted-foreground">
           <Spinner className="size-4" />
           {dbText("loadingList")}
         </div>
       ) : (
-        <div className="grid">
+        <div className="grid grid-cols-1">
           {databaseViewHasNoMatchingPages(
             items.length,
             hasSearch,
@@ -102,6 +193,7 @@ export function DatabaseListView({
             ? groups.map((group) => (
                 <DatabaseGroupedListSection
                   key={group.id}
+                  layoutRow={layoutRow}
                   group={group}
                   properties={properties}
                   databaseDocumentId={databaseDocumentId}
@@ -124,6 +216,8 @@ export function DatabaseListView({
             : items.map((item, index) => (
                 <DatabaseListRow
                   key={item.id}
+                  layoutRow={layoutRow}
+                  isFirst={index === 0}
                   item={item}
                   properties={properties}
                   databaseDocumentId={databaseDocumentId}
@@ -140,7 +234,7 @@ export function DatabaseListView({
                   onOpenPage={() => onOpenPage(item)}
                 />
               ))}
-          {canEdit && canCreateItems && !grouped ? (
+          {canEdit && canCreateItems && !grouped && !editing ? (
             <NewListRow
               disabled={isCreating}
               isPending={isCreating}
@@ -154,6 +248,7 @@ export function DatabaseListView({
 }
 
 function DatabaseGroupedListSection({
+  layoutRow,
   group,
   properties,
   databaseDocumentId,
@@ -167,6 +262,7 @@ function DatabaseGroupedListSection({
   onDeletedPreviewItem,
   onOpenPage,
 }: {
+  layoutRow: ListItemRowLayout | null;
   group: DatabaseBoardGroup;
   properties: DocumentProperty[];
   databaseDocumentId: string;
@@ -195,6 +291,8 @@ function DatabaseGroupedListSection({
           {group.items.map((item, index) => (
             <DatabaseListRow
               key={`${group.id}-${item.id}`}
+              layoutRow={layoutRow}
+              isFirst={index === 0}
               item={item}
               properties={properties}
               databaseDocumentId={databaseDocumentId}
@@ -209,7 +307,7 @@ function DatabaseGroupedListSection({
               onOpenPage={() => onOpenPage(item)}
             />
           ))}
-          {canEdit && canCreateItems ? (
+          {canEdit && canCreateItems && !layoutRow?.editing ? (
             <NewListRow
               disabled={isCreating}
               isPending={isCreating}
@@ -223,6 +321,8 @@ function DatabaseGroupedListSection({
 }
 
 function DatabaseListRow({
+  layoutRow,
+  isFirst,
   item,
   properties,
   databaseDocumentId,
@@ -236,6 +336,8 @@ function DatabaseListRow({
   onPreview,
   onOpenPage,
 }: {
+  layoutRow: ListItemRowLayout | null;
+  isFirst: boolean;
   item: ContentDatabaseItem;
   properties: DocumentProperty[];
   databaseDocumentId: string;
@@ -249,6 +351,34 @@ function DatabaseListRow({
   onPreview: () => void;
   onOpenPage: () => void;
 }) {
+  const actions = canEdit ? (
+    <RowActionsCell
+      item={item}
+      databaseDocumentId={databaseDocumentId}
+      rowIndex={rowIndex}
+      canReorder={canReorder}
+      canMoveUp={canMoveUp}
+      canMoveDown={canMoveDown}
+      onPreviewItem={onPreviewItem}
+      onDeletedPreviewItem={onDeletedPreviewItem}
+      onOpenPage={onOpenPage}
+    />
+  ) : null;
+
+  if (layoutRow) {
+    return (
+      <DatabaseLayoutListRow
+        row={layoutRow}
+        isFirst={isFirst}
+        item={item}
+        databaseDocumentId={databaseDocumentId}
+        canEdit={canEdit}
+        onPreview={onPreview}
+        actions={actions}
+      />
+    );
+  }
+
   const visibleProperties = properties.slice(0, 4);
 
   return (
@@ -286,19 +416,7 @@ function DatabaseListRow({
           </span>
         ) : null}
       </button>
-      {canEdit ? (
-        <RowActionsCell
-          item={item}
-          databaseDocumentId={databaseDocumentId}
-          rowIndex={rowIndex}
-          canReorder={canReorder}
-          canMoveUp={canMoveUp}
-          canMoveDown={canMoveDown}
-          onPreviewItem={onPreviewItem}
-          onDeletedPreviewItem={onDeletedPreviewItem}
-          onOpenPage={onOpenPage}
-        />
-      ) : null}
+      {actions}
     </div>
   );
 }