@agent-native/core-corpus 0.213.1 → 0.216.0

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

@@ -32,6 +32,7 @@ import {
   type ContentDatabaseFilterMode,
   type ContentDatabaseFilterOperator,
   type ContentDatabaseFormQuestion,
+  type ContentDatabaseItemLayout,
   type ContentDatabaseOpenPagesIn,
   type ContentDatabaseRowDensity,
   type ContentDatabaseSort,
@@ -46,11 +47,16 @@ import {
 } from "@shared/api";
 import { contentRecentHref } from "@shared/content-personal-navigation";
 import { contentDatabaseFormQuestions } from "@shared/database-form";
+import { contentDatabaseItemLayoutField } from "@shared/database-item-layout";
 import {
   applyContentDatabaseTableQuery,
   contentDatabaseFilterDateRangeValues,
+  contentDatabaseFilterGroupMode,
   contentDatabaseFilterOperatorNeedsValue,
   contentDatabaseFilterOperatorsForType,
+  contentDatabaseRequiredFilters,
+  materializeContentDatabaseFilterGroupModes,
+  withContentDatabaseFilterGroupMode,
 } from "@shared/database-query";
 import {
   databaseTableColumnIds,
@@ -332,6 +338,7 @@ import { DatabaseGalleryView } from "./GalleryView";
 import type { GitHubCollectionPlace } from "./github-availability";
 import { GitHubSourcePanel, useGitHubSourcesRow } from "./GitHubSourcePanel";
 import { GitHubSourceStatusLine } from "./GitHubSourceStatusLine";
+import { DatabaseListRowsSetting } from "./ListItemLayout";
 import { DatabaseListView } from "./ListView";
 import {
   DATABASE_NAVIGATION_VISIBLE_ITEM_LIMIT,
@@ -1125,6 +1132,9 @@ function DatabaseTable({
   >(null);
   const [searchOpen, setSearchOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [editingListRowsViewId, setEditingListRowsViewId] = useState<
+    string | null
+  >(null);
   const settingsTriggerRef = useRef<HTMLButtonElement | null>(null);
   const [preserveSourceNavigationOnClose, setPreserveSourceNavigationOnClose] =
     useState(false);
@@ -2279,7 +2289,15 @@ function DatabaseTable({
   }
 
   function setFilterMode(filterMode: DatabaseFilterMode) {
-    updatePersonalQueryView((view) => ({ ...view, filterMode }));
+    updatePersonalQueryView((view) =>
+      databaseViewWithFilterMode(view, filterMode),
+    );
+  }
+
+  function setFilterGroupMode(groupId: string, mode: DatabaseFilterMode) {
+    updatePersonalQueryView((view) =>
+      databaseViewWithFilterGroupMode(view, groupId, mode),
+    );
   }
 
   function updatePersonalQueryView(
@@ -2549,6 +2567,10 @@ function DatabaseTable({
     updateActiveView((view) => ({ ...view, formQuestions }));
   }
 
+  function setItemLayout(itemLayout: ContentDatabaseItemLayout | null) {
+    updateActiveView((view) => ({ ...view, itemLayout }));
+  }
+
   function setGroupCollapsed(groupId: string, collapsed: boolean) {
     updateActiveView((view) =>
       setDatabaseViewCollapsedGroup(view, groupId, collapsed),
@@ -3278,11 +3300,12 @@ function DatabaseTable({
               onAddAdvancedFilter={(key, label) => {
                 setActiveFilters([
                   ...filters,
-                  createDatabaseFilterForField(
+                  createDatabaseAdvancedFilterForField(
                     key,
                     label,
                     orderedProperties,
-                    true,
+                    filters,
+                    filterMode,
                   ),
                 ]);
                 setInlineFilterControlsOpen(true);
@@ -3445,6 +3468,7 @@ function DatabaseTable({
           onFiltersChange={setActiveFilters}
           onSortsChange={setActiveSorts}
           onFilterModeChange={setFilterMode}
+          onFilterGroupModeChange={setFilterGroupMode}
           onClearAll={() => {
             setSearchQuery("");
             setSearchOpen(false);
@@ -3591,8 +3615,15 @@ function DatabaseTable({
         <DatabaseListView
           properties={tableProperties}
           groupableProperties={orderedProperties}
+          layoutProperties={databaseListLayoutProperties(
+            orderedProperties,
+            activeView,
+          )}
           items={visibleItems}
+          databaseId={databaseId}
           databaseDocumentId={document.id}
+          itemLayout={activeView.itemLayout ?? null}
+          editingRows={editingListRowsViewId === activeView.id}
           canEdit={effectiveCanEdit}
           canCreateItems={canCreateItems}
           isLoading={isDatabaseViewLoading}
@@ -3610,6 +3641,10 @@ function DatabaseTable({
           onPreview={previewItemPage}
           onDeletedPreviewItem={handleDeletedPreviewItem}
           onOpenPage={openItemPage}
+          onItemLayoutChange={setItemLayout}
+          onEditingRowsChange={(editing) =>
+            setEditingListRowsViewId(editing ? activeView.id : null)
+          }
         />
       ) : activeView.type === "gallery" ? (
         <DatabaseGalleryView
@@ -4053,6 +4088,12 @@ function DatabaseTable({
         onWrapCellsChange={setWrapCells}
         onOpenPagesInChange={setOpenPagesIn}
         onFormQuestionsChange={setFormQuestions}
+        editingListRows={editingListRowsViewId === activeView.id}
+        onItemLayoutChange={setItemLayout}
+        onEditListRows={() => {
+          setEditingListRowsViewId(activeView.id);
+          closeDatabaseSettings();
+        }}
         onPropertyHiddenChange={setPropertyHiddenInActiveView}
         onPropertiesHiddenChange={setPropertiesHiddenInActiveView}
         onGroupByChange={(propertyId) =>
@@ -4180,6 +4221,7 @@ export function databaseNavigationState({
     | "tableColumnOrderIds"
     | "rowDensity"
     | "openPagesIn"
+    | "itemLayout"
   >;
   effectiveFrozenColumnIds?: string[];
   searchQuery?: string;
@@ -4294,6 +4336,8 @@ export function databaseNavigationState({
       activeView.openPagesIn === "full_page"
         ? activeView.openPagesIn
         : undefined,
+    databaseItemLayout:
+      activeView.type === "list" ? (activeView.itemLayout ?? null) : undefined,
     databaseVisibleItemCount: visibleItemCount,
     databaseTotalItemCount: totalItemCount,
     databaseVisibleItems: databaseVisibleItemSummaries(
@@ -6534,7 +6578,7 @@ export function databaseConstraintsBarIsVisible(args: {
   );
 }
 
-function DatabaseActiveConstraintsBar({
+export function DatabaseActiveConstraintsBar({
   documentId,
   items,
   searchQuery,
@@ -6560,6 +6604,7 @@ function DatabaseActiveConstraintsBar({
   onSortsChange,
   onFiltersChange,
   onFilterModeChange,
+  onFilterGroupModeChange,
   onClearAll,
   onResetPersonalChanges,
   onSaveForEveryone,
@@ -6589,6 +6634,7 @@ function DatabaseActiveConstraintsBar({
   onSortsChange: (sorts: DatabaseSort[]) => void;
   onFiltersChange: (filters: DatabaseFilter[]) => void;
   onFilterModeChange: (filterMode: DatabaseFilterMode) => void;
+  onFilterGroupModeChange: (groupId: string, mode: DatabaseFilterMode) => void;
   onClearAll: () => void;
   onResetPersonalChanges: () => void;
   onSaveForEveryone: () => void;
@@ -6612,6 +6658,10 @@ function DatabaseActiveConstraintsBar({
   const regularFilterEntries = filterEntries.filter(
     ({ filter }) => !isAdvancedDatabaseFilter(filter),
   );
+  // The view's All/Any combines the chips with the advanced filter as one more
+  // member; the advanced filter's own rules use its And/Or.
+  const viewFilterMemberCount =
+    regularFilterEntries.length + (advancedFilterEntries.length > 0 ? 1 : 0);
   const hasSortFilterDivider = sorts.length > 0 && filterEntries.length > 0;
   const showClearAll = hasSearchOrSortConstraints && !hasPersonalQueryChanges;
 
@@ -6703,7 +6753,7 @@ function DatabaseActiveConstraintsBar({
       {hasSortFilterDivider ? (
         <div aria-hidden="true" className="mx-1 h-4 w-px shrink-0 bg-border" />
       ) : null}
-      {advancedFilterEntries.length === 0 && regularFilterEntries.length > 1 ? (
+      {viewFilterMemberCount > 1 ? (
         <DatabaseFilterModeButton
           filterMode={filterMode}
           onFilterModeChange={onFilterModeChange}
@@ -6721,7 +6771,7 @@ function DatabaseActiveConstraintsBar({
           showUnsavedIndicator={hasPersonalQueryChanges}
           onOpenChange={onAdvancedFilterOpenChange}
           onFiltersChange={onFiltersChange}
-          onFilterModeChange={onFilterModeChange}
+          onFilterGroupModeChange={onFilterGroupModeChange}
         />
       ) : null}
       {regularFilterEntries.map(({ filter, index }) => (
@@ -6756,7 +6806,13 @@ function DatabaseActiveConstraintsBar({
         onAddAdvancedFilter={(key, label) => {
           onFiltersChange([
             ...filters,
-            createDatabaseFilterForField(key, label, properties, true),
+            createDatabaseAdvancedFilterForField(
+              key,
+              label,
+              properties,
+              filters,
+              filterMode,
+            ),
           ]);
           onAddFilterOpenChange(false);
           onAdvancedFilterOpenChange(true);
@@ -6821,8 +6877,8 @@ function DatabaseInlineSortControl({
           size="sm"
           variant="ghost"
           className={cn(
-            "relative h-7 max-w-[16rem] rounded border border-[#2383e2]/30 bg-[#2383e2]/10 px-2 text-xs font-normal text-[#0f5ea8] shadow-none hover:bg-[#2383e2]/15 focus-visible:border-[#2383e2]/40 focus-visible:ring-[#2383e2]/25 dark:border-[#529cca]/35 dark:bg-[#529cca]/15 dark:text-[#8ec7ff] dark:hover:bg-[#529cca]/20",
-            open && "border-[#2383e2]/40 bg-[#2383e2]/15",
+            "relative h-7 max-w-[16rem] rounded border border-database-chip/30 bg-database-chip/10 px-2 text-xs font-normal text-database-chip-foreground shadow-none hover:bg-database-chip/15 focus-visible:border-database-blue/40 focus-visible:ring-database-blue/25 dark:border-database-chip/35 dark:bg-database-chip/15 dark:hover:bg-database-chip/20",
+            open && "border-database-blue/40 bg-database-blue/15",
           )}
         >
           {sort.direction === "asc" ? (
@@ -7048,7 +7104,7 @@ function DatabaseAdvancedFilterGroupControl({
   showUnsavedIndicator,
   onOpenChange,
   onFiltersChange,
-  onFilterModeChange,
+  onFilterGroupModeChange,
 }: {
   documentId: string;
   items: ContentDatabaseItem[];
@@ -7060,7 +7116,7 @@ function DatabaseAdvancedFilterGroupControl({
   showUnsavedIndicator: boolean;
   onOpenChange: (open: boolean) => void;
   onFiltersChange: (filters: DatabaseFilter[]) => void;
-  onFilterModeChange: (filterMode: DatabaseFilterMode) => void;
+  onFilterGroupModeChange: (groupId: string, mode: DatabaseFilterMode) => void;
 }) {
   const advancedFilters = filterEntries.map((entry) => entry.filter);
   const rootFilterEntries = filterEntries.filter(
@@ -7071,6 +7127,13 @@ function DatabaseAdvancedFilterGroupControl({
     properties,
     advancedFilters,
   );
+  const advancedMode = contentDatabaseFilterGroupMode(
+    filters,
+    DATABASE_ADVANCED_FILTER_GROUP_ID,
+    filterMode,
+  );
+  const setAdvancedMode = (mode: DatabaseFilterMode) =>
+    onFilterGroupModeChange(DATABASE_ADVANCED_FILTER_GROUP_ID, mode);
 
   function updateFilterAt(index: number, next: Partial<DatabaseFilter>) {
     const nextFilters = [...filters];
@@ -7092,17 +7155,13 @@ function DatabaseAdvancedFilterGroupControl({
   function addAdvancedRule(key: "name" | (string & {}), label: string) {
     onFiltersChange([
       ...filters,
-      createDatabaseFilterForField(key, label, properties, true),
-    ]);
-  }
-
-  function addNestedFilterGroup(key: "name" | (string & {}), label: string) {
-    onFiltersChange([
-      ...filters,
-      createDatabaseFilterForField(key, label, properties, {
-        filterGroupId: createAdvancedNestedFilterGroupId(),
-        parentFilterGroupId: DATABASE_ADVANCED_FILTER_GROUP_ID,
-      }),
+      createDatabaseAdvancedFilterForField(
+        key,
+        label,
+        properties,
+        filters,
+        filterMode,
+      ),
     ]);
   }
 
@@ -7116,10 +7175,20 @@ function DatabaseAdvancedFilterGroupControl({
       createDatabaseFilterForField(key, label, properties, {
         filterGroupId: groupId,
         parentFilterGroupId: DATABASE_ADVANCED_FILTER_GROUP_ID,
+        filterGroupMode: databaseFilterGroupModeForNewRule(
+          filters,
+          groupId,
+          filterMode,
+        ),
+        parentFilterGroupMode: advancedMode,
       }),
     ]);
   }
 
+  function addNestedFilterGroup(key: "name" | (string & {}), label: string) {
+    addNestedFilterRule(createAdvancedNestedFilterGroupId(), key, label);
+  }
+
   function removeFilterAt(index: number) {
     onFiltersChange(filters.filter((_, filterIndex) => filterIndex !== index));
     if (filterEntries.length <= 1) onOpenChange(false);
@@ -7139,8 +7208,8 @@ function DatabaseAdvancedFilterGroupControl({
           size="sm"
           variant="ghost"
           className={cn(
-            "relative h-7 rounded border border-[#2383e2]/30 bg-[#2383e2]/10 px-2 text-xs font-normal text-[#0f5ea8] shadow-none hover:bg-[#2383e2]/15 focus-visible:border-[#2383e2]/40 focus-visible:ring-[#2383e2]/25 dark:border-[#529cca]/35 dark:bg-[#529cca]/15 dark:text-[#8ec7ff] dark:hover:bg-[#529cca]/20",
-            open && "border-[#2383e2]/40 bg-[#2383e2]/15",
+            "relative h-7 rounded border border-database-chip/30 bg-database-chip/10 px-2 text-xs font-normal text-database-chip-foreground shadow-none hover:bg-database-chip/15 focus-visible:border-database-blue/40 focus-visible:ring-database-blue/25 dark:border-database-chip/35 dark:bg-database-chip/15 dark:hover:bg-database-chip/20",
+            open && "border-database-blue/40 bg-database-blue/15",
           )}
         >
           <IconFilter className="size-3.5 shrink-0" />
@@ -7170,10 +7239,10 @@ function DatabaseAdvancedFilterGroupControl({
               filters={filters}
               filterIndex={index}
               ruleIndex={ruleIndex}
-              filterMode={filterMode}
+              filterMode={advancedMode}
               items={items}
               properties={properties}
-              onFilterModeChange={onFilterModeChange}
+              onFilterModeChange={setAdvancedMode}
               onUpdateFilter={(next) => updateFilterAt(index, next)}
               onRemove={() => removeFilterAt(index)}
             />
@@ -7186,9 +7255,17 @@ function DatabaseAdvancedFilterGroupControl({
               filters={filters}
               group={group}
               ruleIndex={rootFilterEntries.length + groupIndex}
-              filterMode={filterMode}
+              filterMode={advancedMode}
+              groupFilterMode={contentDatabaseFilterGroupMode(
+                filters,
+                group.id,
+                filterMode,
+              )}
               properties={properties}
-              onFilterModeChange={onFilterModeChange}
+              onFilterModeChange={setAdvancedMode}
+              onGroupFilterModeChange={(mode) =>
+                onFilterGroupModeChange(group.id, mode)
+              }
               onUpdateFilter={updateFilterAt}
               onAddNestedFilterRule={addNestedFilterRule}
               onRemoveFilter={removeFilterAt}
@@ -7434,8 +7511,10 @@ function DatabaseAdvancedNestedFilterGroup({
   group,
   ruleIndex,
   filterMode,
+  groupFilterMode,
   properties,
   onFilterModeChange,
+  onGroupFilterModeChange,
   onUpdateFilter,
   onAddNestedFilterRule,
   onRemoveFilter,
@@ -7446,9 +7525,13 @@ function DatabaseAdvancedNestedFilterGroup({
   filters: DatabaseFilter[];
   group: DatabaseNestedFilterGroupEntry;
   ruleIndex: number;
+  /** How this group combines with the advanced filter's other members. */
   filterMode: DatabaseFilterMode;
+  /** How this group's own rules combine. */
+  groupFilterMode: DatabaseFilterMode;
   properties: DocumentProperty[];
   onFilterModeChange: (filterMode: DatabaseFilterMode) => void;
+  onGroupFilterModeChange: (filterMode: DatabaseFilterMode) => void;
   onUpdateFilter: (index: number, next: Partial<DatabaseFilter>) => void;
   onAddNestedFilterRule: (
     groupId: string,
@@ -7465,37 +7548,43 @@ function DatabaseAdvancedNestedFilterGroup({
 
   return (
     <div className="flex items-start gap-2">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button
-            type="button"
-            className="flex h-9 w-16 items-center rounded px-2 text-xs hover:bg-muted data-[state=open]:bg-muted"
-          >
-            <span className="flex-1 text-left">
-              {databaseFilterModeConjunctionLabel(filterMode)}
-            </span>
-            <IconChevronDown className="ml-1 size-3 shrink-0 text-muted-foreground" />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="w-32">
-          {DATABASE_FILTER_MODES.map((mode) => (
-            <DropdownMenuItem
-              key={mode}
-              onSelect={(event) => {
-                event.preventDefault();
-                onFilterModeChange(mode);
-              }}
+      {ruleIndex === 0 ? (
+        <div className="flex h-9 w-16 shrink-0 items-center px-2 text-xs text-foreground">
+          {dbText("where")}
+        </div>
+      ) : (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="flex h-9 w-16 items-center rounded px-2 text-xs hover:bg-muted data-[state=open]:bg-muted"
             >
-              <span className="flex-1">
-                {databaseFilterModeConjunctionLabel(mode)}
+              <span className="flex-1 text-left">
+                {databaseFilterModeConjunctionLabel(filterMode)}
               </span>
-              {filterMode === mode ? (
-                <IconCheck className="size-4 text-muted-foreground" />
-              ) : null}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+              <IconChevronDown className="ml-1 size-3 shrink-0 text-muted-foreground" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-32">
+            {DATABASE_FILTER_MODES.map((mode) => (
+              <DropdownMenuItem
+                key={mode}
+                onSelect={(event) => {
+                  event.preventDefault();
+                  onFilterModeChange(mode);
+                }}
+              >
+                <span className="flex-1">
+                  {databaseFilterModeConjunctionLabel(mode)}
+                </span>
+                {filterMode === mode ? (
+                  <IconCheck className="size-4 text-muted-foreground" />
+                ) : null}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
 
       <div className="grid min-w-0 flex-1 gap-1 rounded border border-border/70 bg-muted/30 p-1.5">
         {group.entries.map(({ filter, index }, nestedRuleIndex) => (
@@ -7506,10 +7595,10 @@ function DatabaseAdvancedNestedFilterGroup({
             filters={filters}
             filterIndex={index}
             ruleIndex={nestedRuleIndex}
-            filterMode={filterMode}
+            filterMode={groupFilterMode}
             items={items}
             properties={properties}
-            onFilterModeChange={onFilterModeChange}
+            onFilterModeChange={onGroupFilterModeChange}
             onUpdateFilter={(next) =>
               onUpdateFilter(index, {
                 ...next,
@@ -7640,10 +7729,10 @@ function DatabaseInlineFilterControl({
           size="sm"
           variant="ghost"
           className={cn(
-            "relative h-7 max-w-[16rem] rounded border border-border/70 bg-background px-2 text-xs font-normal text-foreground shadow-none hover:bg-muted focus-visible:border-[#2383e2]/40 focus-visible:ring-[#2383e2]/25",
+            "relative h-7 max-w-[16rem] rounded border border-border/70 bg-background px-2 text-xs font-normal text-foreground shadow-none hover:bg-muted focus-visible:border-database-blue/40 focus-visible:ring-database-blue/25",
             filterIsComplete &&
-              "border-[#2383e2]/30 bg-[#2383e2]/10 text-[#0f5ea8] hover:bg-[#2383e2]/15 dark:border-[#529cca]/35 dark:bg-[#529cca]/15 dark:text-[#8ec7ff] dark:hover:bg-[#529cca]/20",
-            open && "border-[#2383e2]/40 bg-[#2383e2]/15",
+              "border-database-chip/30 bg-database-chip/10 text-database-chip-foreground hover:bg-database-chip/15 dark:border-database-chip/35 dark:bg-database-chip/15 dark:hover:bg-database-chip/20",
+            open && "border-database-blue/40 bg-database-blue/15",
             !filterIsComplete && "text-muted-foreground",
           )}
         >
@@ -7922,6 +8011,9 @@ function DatabaseSettingsPanelSheet({
   onWrapCellsChange,
   onOpenPagesInChange,
   onFormQuestionsChange,
+  editingListRows,
+  onItemLayoutChange,
+  onEditListRows,
   onPropertyHiddenChange,
   onPropertiesHiddenChange,
   onGroupByChange,
@@ -7972,6 +8064,9 @@ function DatabaseSettingsPanelSheet({
   onWrapCellsChange: (wrapCells: boolean) => void;
   onOpenPagesInChange: (openPagesIn: ContentDatabaseOpenPagesIn) => void;
   onFormQuestionsChange: (formQuestions: ContentDatabaseFormQuestion[]) => void;
+  editingListRows: boolean;
+  onItemLayoutChange: (itemLayout: ContentDatabaseItemLayout | null) => void;
+  onEditListRows: () => void;
   onPropertyHiddenChange: (propertyId: string, hidden: boolean) => void;
   onPropertiesHiddenChange: (propertyIds: string[], hidden: boolean) => void;
   onGroupByChange: (propertyId: string | null) => void;
@@ -8134,10 +8229,14 @@ function DatabaseSettingsPanelSheet({
             <DatabaseSettingsLayoutPanel
               activeView={activeView}
               properties={properties}
+              items={items}
+              editingListRows={editingListRows}
               onViewTypeChange={onViewTypeChange}
               onWrapCellsChange={onWrapCellsChange}
               onOpenPagesInChange={onOpenPagesInChange}
               onFormQuestionsChange={onFormQuestionsChange}
+              onItemLayoutChange={onItemLayoutChange}
+              onEditListRows={onEditListRows}
             />
           ) : panel === "property_visibility" ? (
             <DatabaseSettingsPropertyVisibilityPanel
@@ -9081,7 +9180,7 @@ function DatabaseSettingsSourcePanel({
                     className={cn(
                       "min-w-0 rounded px-2 py-1.5 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:opacity-60",
                       selected
-                        ? "bg-[#2383e2] text-white shadow-sm"
+                        ? "bg-database-blue text-database-blue-foreground shadow-sm"
                         : "text-muted-foreground hover:bg-background hover:text-foreground",
                     )}
                     onClick={() =>
@@ -9122,7 +9221,7 @@ function DatabaseSettingsSourcePanel({
                   className={cn(
                     "mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded border",
                     liveWriteControl.allowPublicationTransitions
-                      ? "border-[#2383e2] bg-[#2383e2] text-white"
+                      ? "border-database-blue bg-database-blue text-database-blue-foreground"
                       : "border-muted-foreground/40 bg-background text-transparent",
                   )}
                 >
@@ -10536,7 +10635,7 @@ function SourceDetailsFieldPicker({
                   className={cn(
                     "flex size-4 shrink-0 items-center justify-center rounded border",
                     selected.has(field.id)
-                      ? "border-[#2383e2] bg-[#2383e2] text-white"
+                      ? "border-database-blue bg-database-blue text-database-blue-foreground"
                       : "border-muted-foreground/40 text-transparent",
                   )}
                 >
@@ -11229,7 +11328,7 @@ function DatabaseSettingsSwitch({
       <span
         className={cn(
           "relative h-5 w-9 rounded-full transition-colors",
-          checked ? "bg-[#2383e2]" : "bg-muted-foreground/25",
+          checked ? "bg-database-blue" : "bg-muted-foreground/25",
         )}
       >
         <span
@@ -11246,17 +11345,25 @@ function DatabaseSettingsSwitch({
 function DatabaseSettingsLayoutPanel({
   activeView,
   properties,
+  items,
+  editingListRows,
   onViewTypeChange,
   onWrapCellsChange,
   onOpenPagesInChange,
   onFormQuestionsChange,
+  onItemLayoutChange,
+  onEditListRows,
 }: {
   activeView: ContentDatabaseView;
   properties: DocumentProperty[];
+  items: ContentDatabaseItem[];
+  editingListRows: boolean;
   onViewTypeChange: (type: ContentDatabaseViewType) => void;
   onWrapCellsChange: (wrapCells: boolean) => void;
   onOpenPagesInChange: (openPagesIn: ContentDatabaseOpenPagesIn) => void;
   onFormQuestionsChange: (formQuestions: ContentDatabaseFormQuestion[]) => void;
+  onItemLayoutChange: (itemLayout: ContentDatabaseItemLayout | null) => void;
+  onEditListRows: () => void;
 }) {
   const wrapCells = activeView.wrapCells === true;
   const openPagesIn = activeView.openPagesIn ?? "preview";
@@ -11272,7 +11379,7 @@ function DatabaseSettingsLayoutPanel({
             className={cn(
               "flex h-16 flex-col items-center justify-center gap-1 rounded-md border text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               activeView.type === type
-                ? "border-[#2383e2] bg-[#2383e2]/5 text-[#2383e2]"
+                ? "border-database-blue bg-database-blue/5 text-database-blue"
                 : "border-border text-muted-foreground hover:bg-muted hover:text-foreground",
             )}
             onClick={() => onViewTypeChange(type)}
@@ -11301,6 +11408,18 @@ function DatabaseSettingsLayoutPanel({
           onChange={onFormQuestionsChange}
         />
       ) : null}
+      {activeView.type === "list" ? (
+        <DatabaseListRowsSetting
+          itemLayout={activeView.itemLayout ?? null}
+          properties={databaseListLayoutProperties(properties, activeView)}
+          visibleProperties={properties.filter((property) =>
+            isDatabasePropertyVisibleInView(property, items, activeView),
+          )}
+          editingOnList={editingListRows}
+          onChange={onItemLayoutChange}
+          onEditOnList={onEditListRows}
+        />
+      ) : null}
     </div>
   );
 }
@@ -13868,6 +13987,7 @@ export function createDatabaseView(
     rowDensity: normalizeClientDatabaseRowDensity(values.rowDensity),
     openPagesIn: normalizeClientDatabaseOpenPagesIn(values.openPagesIn),
     formQuestions: normalizeClientDatabaseFormQuestions(values.formQuestions),
+    ...contentDatabaseItemLayoutField(values.itemLayout),
   };
 }
 
@@ -14137,6 +14257,7 @@ export function duplicateDatabaseView(
       rowDensity: view.rowDensity,
       openPagesIn: view.openPagesIn,
       formQuestions: view.formQuestions,
+      itemLayout: view.itemLayout,
     },
     view.type,
   );
@@ -14279,6 +14400,7 @@ function normalizeClientDatabaseView(
       rowDensity: normalizeClientDatabaseRowDensity(value.rowDensity),
       openPagesIn: normalizeClientDatabaseOpenPagesIn(value.openPagesIn),
       formQuestions: normalizeClientDatabaseFormQuestions(value.formQuestions),
+      itemLayout: value.itemLayout,
     },
     type,
   );
@@ -14636,6 +14758,18 @@ export function isDatabasePropertyVisibleInView(
   );
 }
 
+/**
+ * The properties a list's custom rows can show: all but those hidden in this
+ * view. Always-hidden properties are left out by the row layout itself.
+ */
+function databaseListLayoutProperties(
+  properties: DocumentProperty[],
+  view: Pick<ContentDatabaseView, "hiddenPropertyIds">,
+) {
+  const hidden = new Set(view.hiddenPropertyIds ?? []);
+  return properties.filter((property) => !hidden.has(property.definition.id));
+}
+
 export function setDatabaseViewHiddenPropertyIds(
   view: ContentDatabaseView,
   propertyIds: string[],
@@ -17220,28 +17354,100 @@ function createDatabaseFilterForField(
   key: ColumnKey,
   label: string,
   properties: DocumentProperty[],
-  advanced:
-    | boolean
-    | { filterGroupId: string; parentFilterGroupId?: string } = false,
+  group?: Pick<
+    DatabaseFilter,
+    | "filterGroupId"
+    | "parentFilterGroupId"
+    | "filterGroupMode"
+    | "parentFilterGroupMode"
+  >,
 ): DatabaseFilter {
-  const group =
-    typeof advanced === "object"
-      ? advanced
-      : advanced
-        ? { filterGroupId: DATABASE_ADVANCED_FILTER_GROUP_ID }
-        : null;
   return {
     key,
     label,
     operator: defaultFilterOperatorForKey(key, properties),
     value: "",
-    ...(group ? { filterGroupId: group.filterGroupId } : {}),
+    ...(group?.filterGroupId ? { filterGroupId: group.filterGroupId } : {}),
     ...(group?.parentFilterGroupId
       ? { parentFilterGroupId: group.parentFilterGroupId }
       : {}),
+    ...(group?.filterGroupMode
+      ? { filterGroupMode: group.filterGroupMode }
+      : {}),
+    ...(group?.parentFilterGroupMode
+      ? { parentFilterGroupMode: group.parentFilterGroupMode }
+      : {}),
   };
 }
 
+// Any mode change first writes every group's current mode onto its rules, so
+// groups that were inheriting the view's mode keep it from then on.
+export function databaseViewWithFilterMode(
+  view: ContentDatabaseView,
+  filterMode: DatabaseFilterMode,
+): ContentDatabaseView {
+  return {
+    ...view,
+    filters: materializeContentDatabaseFilterGroupModes(
+      view.filters,
+      view.filterMode ?? "and",
+    ),
+    filterMode,
+  };
+}
+
+export function databaseViewWithFilterGroupMode(
+  view: ContentDatabaseView,
+  groupId: string,
+  mode: DatabaseFilterMode,
+): ContentDatabaseView {
+  return {
+    ...view,
+    filters: withContentDatabaseFilterGroupMode(
+      materializeContentDatabaseFilterGroupModes(
+        view.filters,
+        view.filterMode ?? "and",
+      ),
+      groupId,
+      mode,
+    ),
+  };
+}
+
+function createDatabaseAdvancedFilterForField(
+  key: ColumnKey,
+  label: string,
+  properties: DocumentProperty[],
+  filters: DatabaseFilter[],
+  filterMode: DatabaseFilterMode,
+): DatabaseFilter {
+  return createDatabaseFilterForField(key, label, properties, {
+    filterGroupId: DATABASE_ADVANCED_FILTER_GROUP_ID,
+    filterGroupMode: databaseFilterGroupModeForNewRule(
+      filters,
+      DATABASE_ADVANCED_FILTER_GROUP_ID,
+      filterMode,
+    ),
+  });
+}
+
+// A rule added to a group takes the group's current mode. A new group starts
+// with "and": the view's All/Any combines it with its neighbors, not its rules.
+export function databaseFilterGroupModeForNewRule(
+  filters: DatabaseFilter[],
+  groupId: string,
+  filterMode: DatabaseFilterMode,
+): DatabaseFilterMode {
+  const groupExists = filters.some(
+    (filter) =>
+      filter.filterGroupId === groupId ||
+      filter.parentFilterGroupId === groupId,
+  );
+  return groupExists
+    ? contentDatabaseFilterGroupMode(filters, groupId, filterMode)
+    : "and";
+}
+
 function isAdvancedDatabaseFilter(filter: DatabaseFilter) {
   return (
     filter.filterGroupId === DATABASE_ADVANCED_FILTER_GROUP_ID ||
@@ -17447,13 +17653,16 @@ export function databasePropertyValuesForNewItem(
   filterMode: DatabaseFilterMode = "and",
 ): Record<string, DocumentPropertyValue> {
   const propertyValues: Record<string, DocumentPropertyValue> = {};
-  const activeFilters = filters.filter(isActiveFilter);
-  if (filterMode === "or" && activeFilters.length > 1) {
-    return propertyValues;
-  }
+  // A rule under an "or" with other members is optional, so seeding it would
+  // give the new row a value the view does not ask for.
+  const requiredFilters = contentDatabaseRequiredFilters(
+    filters,
+    filterMode,
+    isActiveFilter,
+  );
 
-  for (const filter of activeFilters) {
-    if (filter.key === "name") continue;
+  for (const filter of filters) {
+    if (!requiredFilters.has(filter) || filter.key === "name") continue;
 
     const property = properties.find(
       (candidate) => candidate.definition.id === filter.key,
@@ -17992,7 +18201,7 @@ function DatabaseFilterValueControl({
     return (
       <div className="overflow-hidden rounded-sm">
         <div className="px-1 pb-1">
-          <div className="flex min-h-9 flex-wrap items-center gap-1 rounded border border-input bg-background px-2 py-1 focus-within:border-[#2383e2] focus-within:ring-2 focus-within:ring-[#2383e2]/25">
+          <div className="flex min-h-9 flex-wrap items-center gap-1 rounded border border-input bg-background px-2 py-1 focus-within:border-database-blue focus-within:ring-2 focus-within:ring-database-blue/25">
             {showCompactOptionValueInput ? null : (
               <IconSearch className="size-3.5 shrink-0 text-muted-foreground" />
             )}
@@ -18114,7 +18323,7 @@ function DatabaseFilterValueControl({
       value={filter.value}
       placeholder={filterValuePlaceholder(filter.key, properties)}
       onChange={(event) => onValueChange(event.target.value)}
-      className="h-9 text-sm focus-visible:border-[#2383e2] focus-visible:ring-[#2383e2]/25"
+      className="h-9 text-sm focus-visible:border-database-blue focus-visible:ring-database-blue/25"
     />
   );
 }
@@ -18255,7 +18464,7 @@ function DatabaseBetweenDateFilterValueControl({
         value={start}
         aria-label={`Start ${filter.label} filter date`}
         onChange={(event) => updateRange(event.target.value, end)}
-        className="h-9 text-sm focus-visible:border-[#2383e2] focus-visible:ring-[#2383e2]/25"
+        className="h-9 text-sm focus-visible:border-database-blue focus-visible:ring-database-blue/25"
       />
       <span className="text-xs text-muted-foreground">to</span>
       <Input
@@ -18263,7 +18472,7 @@ function DatabaseBetweenDateFilterValueControl({
         value={end}
         aria-label={`End ${filter.label} filter date`}
         onChange={(event) => updateRange(start, event.target.value)}
-        className="h-9 text-sm focus-visible:border-[#2383e2] focus-visible:ring-[#2383e2]/25"
+        className="h-9 text-sm focus-visible:border-database-blue focus-visible:ring-database-blue/25"
       />
     </div>
   );