diff --git a/apps/client/src/features/base/components/base-table.tsx b/apps/client/src/features/base/components/base-table.tsx index cfd81beb5..17a8b5250 100644 --- a/apps/client/src/features/base/components/base-table.tsx +++ b/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} diff --git a/apps/client/src/features/base/components/base-toolbar.tsx b/apps/client/src/features/base/components/base-toolbar.tsx index fe39dd3d1..953c50bd6 100644 --- a/apps/client/src/features/base/components/base-toolbar.tsx +++ b/apps/client/src/features/base/components/base-toolbar.tsx @@ -163,7 +163,7 @@ export function BaseToolbar({ diff --git a/apps/client/src/features/base/components/cells/cell-file.tsx b/apps/client/src/features/base/components/cells/cell-file.tsx index 72a8f793c..ce4d5cb2c 100644 --- a/apps/client/src/features/base/components/cells/cell-file.tsx +++ b/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( "/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( diff --git a/apps/client/src/features/base/components/cells/cell-multi-select.tsx b/apps/client/src/features/base/components/cells/cell-multi-select.tsx index 74fb3c37a..59f5e1588 100644 --- a/apps/client/src/features/base/components/cells/cell-multi-select.tsx +++ b/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, diff --git a/apps/client/src/features/base/components/cells/cell-page.tsx b/apps/client/src/features/base/components/cells/cell-page.tsx index 536b2d2a4..025521c90 100644 --- a/apps/client/src/features/base/components/cells/cell-page.tsx +++ b/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); diff --git a/apps/client/src/features/base/components/cells/cell-select.tsx b/apps/client/src/features/base/components/cells/cell-select.tsx index 441cebcaa..8d1f09fcb 100644 --- a/apps/client/src/features/base/components/cells/cell-select.tsx +++ b/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, diff --git a/apps/client/src/features/base/components/grid/grid-container.tsx b/apps/client/src/features/base/components/grid/grid-container.tsx index 41e716c08..3f396fad3 100644 --- a/apps/client/src/features/base/components/grid/grid-container.tsx +++ b/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({ > - {baseId && } + {pageId && } diff --git a/apps/client/src/features/base/components/grid/grid-header.tsx b/apps/client/src/features/base/components/grid/grid-header.tsx index c934419db..6c0585935 100644 --- a/apps/client/src/features/base/components/grid/grid-header.tsx +++ b/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; - 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 && ( diff --git a/apps/client/src/features/base/components/grid/selection-action-bar.tsx b/apps/client/src/features/base/components/grid/selection-action-bar.tsx index f9ba1b984..adab15301 100644 --- a/apps/client/src/features/base/components/grid/selection-action-bar.tsx +++ b/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; diff --git a/apps/client/src/features/base/components/property/create-property-popover.tsx b/apps/client/src/features/base/components/property/create-property-popover.tsx index 1120fc4a9..5a12125cc 100644 --- a/apps/client/src/features/base/components/property/create-property-popover.tsx +++ b/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([ "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("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: { diff --git a/apps/client/src/features/base/components/property/property-menu.tsx b/apps/client/src/features/base/components/property/property-menu.tsx index b2e0d2189..322922326 100644 --- a/apps/client/src/features/base/components/property/property-menu.tsx +++ b/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) => { 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]); diff --git a/apps/client/src/features/base/components/views/view-tabs.tsx b/apps/client/src/features/base/components/views/view-tabs.tsx index 4f9ef7697..75d2b6a77 100644 --- a/apps/client/src/features/base/components/views/view-tabs.tsx +++ b/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 (