feat(bases): render editable property rows inside detail modal

apps/client/src/features/base/components/row-detail-modal/property-row.tsx

@@ -0,0 +1,53 @@
+import { useState, useCallback } from "react";
+import { Group, Text } from "@mantine/core";
+import { IBaseProperty, IBaseRow } from "@/features/base/types/base.types";
+import { CellRenderer } from "@/features/base/components/cells/cell-renderer";
+
+type PropertyRowProps = {
+  property: IBaseProperty;
+  row: IBaseRow;
+  onUpdate: (propertyId: string, value: unknown) => void;
+};
+
+export function PropertyRow({ property, row, onUpdate }: PropertyRowProps) {
+  const value = (row.cells ?? {})[property.id];
+  // The cell components key their edit state off `isEditing`. In the
+  // modal we treat the cell as always-active: click to commit a new
+  // value, blur/escape to commit-or-cancel the same way the grid does.
+  const [editing, setEditing] = useState(false);
+
+  const handleCommit = useCallback(
+    (next: unknown) => {
+      setEditing(false);
+      onUpdate(property.id, next);
+    },
+    [onUpdate, property.id],
+  );
+  const handleCancel = useCallback(() => setEditing(false), []);
+
+  return (
+    <Group
+      align="flex-start"
+      wrap="nowrap"
+      gap="md"
+      onClick={() => setEditing(true)}
+      style={{ cursor: "text" }}
+    >
+      <div style={{ width: 140, flex: "0 0 140px", paddingTop: 6 }}>
+        <Text size="sm" c="dimmed">
+          {property.name}
+        </Text>
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <CellRenderer
+          property={property}
+          rowId={row.id}
+          value={value}
+          isEditing={editing}
+          onCommit={handleCommit}
+          onCancel={handleCancel}
+        />
+      </div>
+    </Group>
+  );
+}

apps/client/src/features/base/components/row-detail-modal/row-detail-modal.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/features/base/types/base.types";
 import { useUpdateRowMutation } from "@/features/base/queries/base-row-query";
 import { RowDetailTitle } from "./row-detail-title";
+import { PropertyRow } from "./property-row";
 
 type RowDetailModalProps = {
   base: IBase;
@@ -63,7 +64,22 @@ export function RowDetailModal({
               });
             }}
           />
-          {/* Property list goes here in Task 19 */}
+          {base.properties
+            .filter((p) => !p.isPrimary)
+            .map((property) => (
+              <PropertyRow
+                key={property.id}
+                property={property}
+                row={row}
+                onUpdate={(propertyId, value) => {
+                  updateRowMutation.mutate({
+                    rowId: row.id,
+                    pageId: base.id,
+                    cells: { [propertyId]: value },
+                  });
+                }}
+              />
+            ))}
           {/* Add-property button goes here in Task 20 */}
         </Stack>
       ) : (