refactor(base): rename baseId to pageId in client components

apps/client/src/features/base/components/base-table.tsx

@@ -42,15 +42,15 @@ import { BaseTableSkeleton } from "@/features/base/components/base-table-skeleto
 import classes from "@/features/base/styles/grid.module.css";
 
 type BaseTableProps = {
-  baseId: string;
+  pageId: string;
 };
 
-export function BaseTable({ baseId }: BaseTableProps) {
+export function BaseTable({ pageId }: BaseTableProps) {
   const { t } = useTranslation();
   // Subscribe to the base's realtime room so other clients' edits,
   // schema changes, and async-job completions reconcile into our cache.
-  useBaseSocket(baseId);
-  const { data: base, isLoading: baseLoading, error: baseError } = useBaseQuery(baseId);
+  useBaseSocket(pageId);
+  const { data: base, isLoading: baseLoading, error: baseError } = useBaseQuery(pageId);
 
   const [activeViewId, setActiveViewId] = useAtom(activeViewIdAtom) as unknown as [string | null, (val: string | null) => void];
 
@@ -72,7 +72,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
     buildPromotedConfig,
   } = useViewDraft({
     userId: currentUser?.user.id,
-    baseId,
+    pageId,
     viewId: activeView?.id,
     baselineFilter: activeView?.config?.filter,
     baselineSorts: activeView?.config?.sorts,
@@ -119,7 +119,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
   // active view's config resolves — doubling network traffic on every
   // base open for any view that has sort or filter.
   const { data: rowsData, isLoading: rowsLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    useBaseRowsQuery(base ? baseId : undefined, activeFilter, activeSorts);
+    useBaseRowsQuery(base ? pageId : undefined, activeFilter, activeSorts);
 
   // Fire the count request alongside the rows query. Not rendered yet —
   // this mounts the query so its cache is warm for when the toolbar
@@ -129,7 +129,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
   // filter and fire with baseline-only (or nothing).
   const canFetchCount = !!base && !!currentUser;
   useBaseRowsCountQuery(
-    canFetchCount ? baseId : undefined,
+    canFetchCount ? pageId : undefined,
     activeFilter,
   );
 
@@ -148,7 +148,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
   const { clear: clearSelection } = useRowSelection();
   useEffect(() => {
     clearSelection();
-  }, [baseId, activeView?.id, clearSelection]);
+  }, [pageId, activeView?.id, clearSelection]);
 
   const rows = useMemo(() => {
     const flat = flattenRows(rowsData);
@@ -175,16 +175,16 @@ export function BaseTable({ baseId }: BaseTableProps) {
     (rowId: string, propertyId: string, value: unknown) => {
       updateRowMutation.mutate({
         rowId,
-        baseId,
+        pageId,
         cells: { [propertyId]: value },
       });
     },
-    [baseId, updateRowMutation],
+    [pageId, updateRowMutation],
   );
 
   const handleAddRow = useCallback(() => {
-    createRowMutation.mutate({ baseId });
-  }, [baseId, createRowMutation]);
+    createRowMutation.mutate({ pageId });
+  }, [pageId, createRowMutation]);
 
   const handleViewChange = useCallback(
     (viewId: string) => {
@@ -195,11 +195,11 @@ export function BaseTable({ baseId }: BaseTableProps) {
 
   const handleAddView = useCallback(() => {
     createViewMutation.mutate({
-      baseId,
+      pageId,
       name: t("New view"),
       type: "table",
     });
-  }, [baseId, createViewMutation, t]);
+  }, [pageId, createViewMutation, t]);
 
   const handleColumnReorder = useCallback(
     (activeId: string, overId: string) => {
@@ -242,7 +242,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
     try {
       await updateViewMutation.mutateAsync({
         viewId: activeView.id,
-        baseId: base.id,
+        pageId: base.id,
         config,
       });
       resetDraft();
@@ -288,14 +288,14 @@ export function BaseTable({ baseId }: BaseTableProps) {
 
         reorderRowMutation.mutate({
           rowId,
-          baseId,
+          pageId,
           position: newPosition,
         });
       } catch {
         // Position computation failed — skip silently
       }
     },
-    [rows, baseId, reorderRowMutation],
+    [rows, pageId, reorderRowMutation],
   );
 
   if (baseLoading || rowsLoading) {
@@ -338,7 +338,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
         properties={base.properties}
         onCellUpdate={handleCellUpdate}
         onAddRow={handleAddRow}
-        baseId={baseId}
+        pageId={pageId}
         onColumnReorder={handleColumnReorder}
         onResizeEnd={handleResizeEnd}
         onRowReorder={handleRowReorder}

apps/client/src/features/base/components/base-toolbar.tsx

@@ -163,7 +163,7 @@ export function BaseToolbar({
       <ViewTabs
         views={views}
         activeViewId={activeView?.id}
-        baseId={base.id}
+        pageId={base.id}
         onViewChange={onViewChange}
         onAddView={onAddView}
       />

apps/client/src/features/base/components/cells/cell-file.tsx

@@ -72,7 +72,7 @@ export function CellFile({
         try {
           const formData = new FormData();
           formData.append("file", file);
-          formData.append("baseId", property.baseId);
+          formData.append("pageId", property.pageId);
 
           const res = await api.post<FileValue>(
             "/bases/files/upload",
@@ -98,7 +98,7 @@ export function CellFile({
       setUploading(false);
       onCommit(newFiles.length > 0 ? newFiles : null);
     },
-    [files, property.baseId, onCommit],
+    [files, property.pageId, onCommit],
   );
 
   const handleKeyDown = useCallback(

apps/client/src/features/base/components/cells/cell-multi-select.tsx

@@ -105,7 +105,7 @@ export function CellMultiSelect({
     const newChoices = [...choices, newChoice];
     updatePropertyMutation.mutate({
       propertyId: property.id,
-      baseId: property.baseId,
+      pageId: property.pageId,
       typeOptions: {
         ...typeOptions,
         choices: newChoices,

apps/client/src/features/base/components/cells/cell-page.tsx

@@ -44,7 +44,7 @@ export function CellPage({
   onCancel,
 }: CellPageProps) {
   const pageId = parsePageId(value);
-  const { data: base } = useBaseQuery(property.baseId);
+  const { data: base } = useBaseQuery(property.pageId);
 
   const ids = useMemo(() => (pageId ? [pageId] : []), [pageId]);
   const { pages } = useResolvedPages(ids);

apps/client/src/features/base/components/cells/cell-select.tsx

@@ -102,7 +102,7 @@ export function CellSelect({
     const newChoices = [...choices, newChoice];
     updatePropertyMutation.mutate({
       propertyId: property.id,
-      baseId: property.baseId,
+      pageId: property.pageId,
       typeOptions: {
         ...typeOptions,
         choices: newChoices,

apps/client/src/features/base/components/grid/grid-container.tsx

@@ -37,7 +37,7 @@ type GridContainerProps = {
   properties: IBaseProperty[];
   onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
   onAddRow?: () => void;
-  baseId?: string;
+  pageId?: string;
   onColumnReorder?: (columnId: string, overColumnId: string) => void;
   onResizeEnd?: () => void;
   onRowReorder?: (rowId: string, targetRowId: string, position: "above" | "below") => void;
@@ -51,7 +51,7 @@ export function GridContainer({
   properties,
   onCellUpdate,
   onAddRow,
-  baseId,
+  pageId,
   onColumnReorder,
   onResizeEnd,
   onRowReorder,
@@ -72,7 +72,7 @@ export function GridContainer({
   const closeRequestCounterRef = useRef(0);
 
   const { selectionCount, clear: clearSelection } = useRowSelection();
-  const { deleteSelected } = useDeleteSelectedRows(baseId ?? "");
+  const { deleteSelected } = useDeleteSelectedRows(pageId ?? "");
 
   useEffect(() => {
     const handleMouseDown = (e: MouseEvent) => {
@@ -134,7 +134,7 @@ export function GridContainer({
 
   useEffect(() => {
     const el = scrollRef.current;
-    if (!el || !baseId) return;
+    if (!el || !pageId) return;
     const handler = (e: KeyboardEvent) => {
       if (editingCell) return;
       const active = document.activeElement as HTMLElement | null;
@@ -154,13 +154,13 @@ export function GridContainer({
     };
     el.addEventListener("keydown", handler);
     return () => el.removeEventListener("keydown", handler);
-  }, [editingCell, selectionCount, clearSelection, deleteSelected, baseId]);
+  }, [editingCell, selectionCount, clearSelection, deleteSelected, pageId]);
 
   const gridTemplateColumns = useMemo(() => {
     const visibleColumns = table.getVisibleLeafColumns();
     const columnWidths = visibleColumns.map((col) => `${col.getSize()}px`);
-    return columnWidths.join(" ") + (baseId ? " 40px" : "");
-  }, [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, baseId]);
+    return columnWidths.join(" ") + (pageId ? " 40px" : "");
+  }, [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, pageId]);
 
   const totalHeight = virtualizer.getTotalSize();
 
@@ -252,7 +252,7 @@ export function GridContainer({
           >
             <GridHeader
               table={table}
-              baseId={baseId}
+              pageId={pageId}
               columnOrder={table.getState().columnOrder}
               columnVisibility={table.getState().columnVisibility}
               properties={properties}
@@ -298,7 +298,7 @@ export function GridContainer({
           )}
 
           <AddRowButton onClick={handleAddRow} />
-          {baseId && <SelectionActionBar baseId={baseId} />}
+          {pageId && <SelectionActionBar pageId={pageId} />}
         </div>
       </div>
     </DndContext>

apps/client/src/features/base/components/grid/grid-header.tsx

@@ -7,7 +7,7 @@ import classes from "@/features/base/styles/grid.module.css";
 
 type GridHeaderProps = {
   table: Table<IBaseRow>;
-  baseId?: string;
+  pageId?: string;
   // Passed explicitly to break memo when columns change
   // (table ref is stable from useReactTable, so memo won't fire without these)
   columnOrder: ColumnOrderState;
@@ -19,7 +19,7 @@ type GridHeaderProps = {
 
 export const GridHeader = memo(function GridHeader({
   table,
-  baseId,
+  pageId,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   columnOrder: _columnOrder,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -45,9 +45,9 @@ export const GridHeader = memo(function GridHeader({
           loadedRowIds={loadedRowIds}
         />
       ))}
-      {baseId && (
+      {pageId && (
         <CreatePropertyPopover
-          baseId={baseId}
+          pageId={pageId}
           properties={properties}
           onPropertyCreated={onPropertyCreated}
         />

apps/client/src/features/base/components/grid/selection-action-bar.tsx

@@ -7,15 +7,15 @@ import { useDeleteSelectedRows } from "@/features/base/hooks/use-delete-selected
 import classes from "@/features/base/styles/grid.module.css";
 
 type SelectionActionBarProps = {
-  baseId: string;
+  pageId: string;
 };
 
 export const SelectionActionBar = memo(function SelectionActionBar({
-  baseId,
+  pageId,
 }: SelectionActionBarProps) {
   const { t } = useTranslation();
   const { selectionCount, clear } = useRowSelection();
-  const { deleteSelected, isPending } = useDeleteSelectedRows(baseId);
+  const { deleteSelected, isPending } = useDeleteSelectedRows(pageId);
 
   const isOpen = selectionCount > 0;
 

apps/client/src/features/base/components/property/create-property-popover.tsx

@@ -25,7 +25,7 @@ import { FormulaEditor } from "../formula/formula-editor";
 import classes from "@/features/base/styles/grid.module.css";
 
 type CreatePropertyPopoverProps = {
-  baseId: string;
+  pageId: string;
   properties?: IBaseProperty[];
   onPropertyCreated?: () => void;
 };
@@ -44,7 +44,7 @@ const typesWithOptions = new Set<BasePropertyType>([
   "person",
 ]);
 
-export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }: CreatePropertyPopoverProps) {
+export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }: CreatePropertyPopoverProps) {
   const { t } = useTranslation();
   const [opened, setOpened] = useState(false);
   const [panel, setPanel] = useState<Panel>("typePicker");
@@ -141,7 +141,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
     const finalName = name.trim() || fallbackName;
     createPropertyMutation.mutate(
       {
-        baseId,
+        pageId,
         name: finalName,
         type: selectedType,
         typeOptions: Object.keys(typeOptions).length > 0
@@ -155,7 +155,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
       },
     );
     handleClose();
-  }, [selectedType, nameTaken, name, fallbackName, typeOptions, baseId, createPropertyMutation, handleClose, onPropertyCreated]);
+  }, [selectedType, nameTaken, name, fallbackName, typeOptions, pageId, createPropertyMutation, handleClose, onPropertyCreated]);
 
   const handleBackToTypePicker = useCallback(() => {
     setPanel("typePicker");
@@ -198,7 +198,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
 
   const syntheticProperty: IBaseProperty = useMemo(() => ({
     id: "",
-    baseId,
+    pageId,
     name: name || "",
     type: selectedType ?? "text",
     position: "",
@@ -207,7 +207,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
     workspaceId: "",
     createdAt: "",
     updatedAt: "",
-  }), [baseId, name, selectedType, typeOptions]);
+  }), [pageId, name, selectedType, typeOptions]);
 
   const TypeIcon = selectedTypeIcon;
   const showOptions = selectedType && typesWithOptions.has(selectedType);
@@ -279,7 +279,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
                   if (nameTaken) return;
                   createPropertyMutation.mutate(
                     {
-                      baseId,
+                      pageId,
                       name: name.trim() || fallbackName,
                       type: "formula",
                       typeOptions: {

apps/client/src/features/base/components/property/property-menu.tsx

@@ -94,7 +94,7 @@ export function PropertyMenuContent({
     if (trimmed && trimmed !== property.name) {
       updatePropertyMutation.mutate({
         propertyId: property.id,
-        baseId: property.baseId,
+        pageId: property.pageId,
         name: trimmed,
       });
     }
@@ -138,7 +138,7 @@ export function PropertyMenuContent({
     (typeOptions: Record<string, unknown>) => {
       updatePropertyMutation.mutate({
         propertyId: property.id,
-        baseId: property.baseId,
+        pageId: property.pageId,
         typeOptions,
       });
       setOptionsDirty(false);
@@ -149,7 +149,7 @@ export function PropertyMenuContent({
   const handleDelete = useCallback(() => {
     deletePropertyMutation.mutate({
       propertyId: property.id,
-      baseId: property.baseId,
+      pageId: property.pageId,
     });
     onClose();
   }, [property, deletePropertyMutation, onClose]);

apps/client/src/features/base/components/views/view-tabs.tsx

@@ -22,7 +22,7 @@ import cellClasses from "@/features/base/styles/cells.module.css";
 type ViewTabsProps = {
   views: IBaseView[];
   activeViewId: string | undefined;
-  baseId: string;
+  pageId: string;
   onViewChange: (viewId: string) => void;
   onAddView?: () => void;
 };
@@ -30,7 +30,7 @@ type ViewTabsProps = {
 export function ViewTabs({
   views,
   activeViewId,
-  baseId,
+  pageId,
   onViewChange,
   onAddView,
 }: ViewTabsProps) {
@@ -56,12 +56,12 @@ export function ViewTabs({
     if (trimmed && view && trimmed !== view.name) {
       updateViewMutation.mutate({
         viewId: editingViewId,
-        baseId,
+        pageId,
         name: trimmed,
       });
     }
     setEditingViewId(null);
-  }, [editingViewId, editingName, views, baseId, updateViewMutation]);
+  }, [editingViewId, editingName, views, pageId, updateViewMutation]);
 
   const handleRenameKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -80,13 +80,13 @@ export function ViewTabs({
   const handleDelete = useCallback(
     (viewId: string) => {
       if (views.length <= 1) return;
-      deleteViewMutation.mutate({ viewId, baseId });
+      deleteViewMutation.mutate({ viewId, pageId });
       if (viewId === activeViewId && views.length > 1) {
         const remaining = views.filter((v) => v.id !== viewId);
         onViewChange(remaining[0].id);
       }
     },
-    [views, baseId, activeViewId, deleteViewMutation, onViewChange],
+    [views, pageId, activeViewId, deleteViewMutation, onViewChange],
   );
 
   return (