@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/collection_editor/useLocalCollectionsConfigController.tsx

@@ -2,42 +2,87 @@ import { CollectionsConfigController, SaveCollectionParams, UpdateCollectionPara
 import { Properties } from "@rebasepro/types";
 import { getSubcollections } from "@rebasepro/common";
 
-import React, { useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import type { AdminCollection } from "@rebasepro/admin-types";
+import { DEFAULT_API_PATH } from "@rebasepro/app";
+
+/**
+ * What the backend said about its schema editor, and how sure we are.
+ *
+ * `unknown` covers both "still asking" and "could not ask" — a backend too old
+ * to have the endpoint, or one that is unreachable. Those fall back to the
+ * build-mode guess below rather than locking the editor for someone whose
+ * editor used to work.
+ */
+type SchemaEditorAvailability =
+    | { state: "unknown" }
+    | { state: "known", enabled: boolean, reason?: string };
+
+/**
+ * The guess this hook used to make on its own.
+ *
+ * `process.env.NODE_ENV` here is the *frontend bundle's* build mode. Whether
+ * the schema editor exists is decided by a different process entirely — the
+ * server's own `NODE_ENV`, its `collectionsDir`, whether its collections were
+ * introspected, whether `ts-morph` is installed. The two disagree in every
+ * ordinary setup: a dev frontend against a deployed API, a `baas` project, a
+ * hosted console. When they did, the editor offered itself and every save came
+ * back `404 Not Found`. It is kept only as the answer for a backend too old to
+ * be asked.
+ */
+const buildModeGuess = (): boolean => process.env.NODE_ENV === "production";
+
 export function useLocalCollectionsConfigController(
     clientOrUrl: any,
     baseCollections: AdminCollection[] = [],
     options?: {
         readOnly?: boolean;
         getAuthToken?: () => Promise<string | null>;
+        /**
+         * Identity of the signed-in user, if any.
+         *
+         * Only used to re-ask the backend when it changes: whether the editor
+         * will accept a write depends on who is asking, and the answer to an
+         * anonymous probe does not survive a sign-in.
+         */
+        authKey?: string | null;
     }
 ): CollectionsConfigController {
 
     const parsedCollections = baseCollections;
-    
+
     // Store latest options in a ref to prevent stale closures in the `request` function
     // due to useMemo caching the saveCollection function.
     const optionsRef = useRef(options);
     optionsRef.current = options;
 
+    // `/api` only by default — a backend configured with another `basePath`
+    // mounts the schema editor under that instead.
+    const clientBaseUrl = typeof clientOrUrl === "string"
+        ? clientOrUrl
+        : (clientOrUrl?.baseUrl ?? "");
+    const clientApiPath = (typeof clientOrUrl === "object" && clientOrUrl !== null && clientOrUrl.apiPath)
+        || DEFAULT_API_PATH;
+    const editorUrl = `${String(clientBaseUrl).replace(/\/$/, "")}${clientApiPath}/schema-editor`;
+
+    const resolveToken = async (): Promise<string | null> => {
+        let token = optionsRef.current?.getAuthToken ? await optionsRef.current.getAuthToken() : null;
+        if (!token && typeof clientOrUrl === "object" && clientOrUrl !== null && clientOrUrl.resolveToken) {
+            token = await clientOrUrl.resolveToken();
+        }
+        return token ?? null;
+    };
+
     const request = async (endpoint: string, payload: Record<string, unknown>) => {
         try {
-            let token = optionsRef.current?.getAuthToken ? await optionsRef.current.getAuthToken() : null;
-            let baseUrl = typeof clientOrUrl === "string" ? clientOrUrl : "";
-
-            if (typeof clientOrUrl === "object" && clientOrUrl !== null) {
-                baseUrl = clientOrUrl.baseUrl || baseUrl;
-                if (!token && clientOrUrl.resolveToken) {
-                    token = await clientOrUrl.resolveToken();
-                }
-            }
+            const token = await resolveToken();
 
             const headers: Record<string, string> = { "Content-Type": "application/json" };
             if (token) {
                 headers["Authorization"] = `Bearer ${token}`;
             }
 
-            const response = await fetch(`${baseUrl.replace(/\/$/, "")}/api/schema-editor${endpoint}`, {
+            const response = await fetch(`${editorUrl}${endpoint}`, {
                 method: "POST",
                 headers,
                 body: JSON.stringify(payload)
@@ -67,10 +112,77 @@ export function useLocalCollectionsConfigController(
         }
     };
 
+    // ── Ask the backend whether it will accept an edit ────────────────
+    const forcedReadOnly = options?.readOnly;
+    const authKey = options?.authKey ?? null;
+    const [availability, setAvailability] = useState<SchemaEditorAvailability>({ state: "unknown" });
+
+    useEffect(() => {
+        // Nothing to ask about: the caller has already decided.
+        if (forcedReadOnly === true) return;
+
+        let cancelled = false;
+        (async () => {
+            try {
+                const token = await resolveToken();
+                const response = await fetch(`${editorUrl}/status`, {
+                    headers: token ? { Authorization: `Bearer ${token}` } : {}
+                });
+                if (cancelled) return;
+
+                // A backend from before the endpoint existed. Guessing from the
+                // bundle's build mode is wrong, but it is what that backend's
+                // admin panel has always done, and locking the editor for
+                // someone whose editor works would be worse.
+                if (response.status === 404) {
+                    setAvailability({ state: "unknown" });
+                    return;
+                }
+
+                const body = await response.json().catch(() => ({})) as {
+                    enabled?: boolean,
+                    reason?: string,
+                    error?: { message?: string }
+                };
+                if (cancelled) return;
+
+                if (response.ok) {
+                    setAvailability({
+                        state: "known",
+                        enabled: body.enabled === true,
+                        reason: body.reason
+                    });
+                } else {
+                    // 401/403 (not an admin) or 501 (no auth configured at all)
+                    // — all of them mean this session cannot edit collections,
+                    // and the body says why better than we could.
+                    setAvailability({
+                        state: "known",
+                        enabled: false,
+                        reason: body.error?.message
+                            ?? `The backend refused to say whether collections are editable (HTTP ${response.status}).`
+                    });
+                }
+            } catch {
+                if (!cancelled) setAvailability({ state: "unknown" });
+            }
+        })();
+
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editorUrl, forcedReadOnly, authKey]);
+
+    const readOnly = forcedReadOnly
+        ?? (availability.state === "known" ? !availability.enabled : buildModeGuess());
+
+    const readOnlyReason = availability.state === "known" && availability.reason
+        ? availability.reason
+        : "Collections can only be edited against a backend running the schema editor, which is off in production.";
+
     return useMemo(() => ({
         loading: false,
-        readOnly: options?.readOnly ?? false,
-        readOnlyReason: "Local collection editing is only available in development mode.",
+        readOnly,
+        readOnlyReason,
         collections: parsedCollections,
         getCollection: (id: string) => {
             const found = parsedCollections.find(c => (c as AdminCollection & { id?: string }).id === id || c.slug === id);
@@ -119,5 +231,5 @@ collectionData: { propertiesOrder: newPropertiesOrder } });
 
         navigationEntries: [],
         saveNavigationEntries: async () => { }
-    }), [clientOrUrl, parsedCollections, options?.readOnly, options?.getAuthToken]);
+    }), [clientOrUrl, parsedCollections, readOnly, readOnlyReason, options?.getAuthToken]);
 }

package/src/collection_editor/validateCollectionJson.ts

@@ -135,12 +135,12 @@ function validateProperty(
             // silently honoured by whichever consumer read it first.
             const allowedByKind: Record<string, string[]> = {
                 belongsTo: ["localKey"],
-                hasOne: ["foreignKeyOnTarget"],
-                hasMany: ["foreignKeyOnTarget"],
+                hasOne: ["foreignKeyOnTarget", "sourceKey"],
+                hasMany: ["foreignKeyOnTarget", "sourceKey"],
                 manyToMany: ["through"],
                 via: ["joinPath", "cardinality"]
             };
-            const linkFields = ["localKey", "foreignKeyOnTarget", "through", "joinPath", "cardinality"];
+            const linkFields = ["localKey", "foreignKeyOnTarget", "sourceKey", "through", "joinPath", "cardinality"];
             const allowed = allowedByKind[String(link.kind)] ?? [];
             for (const field of linkFields) {
                 if (link[field] !== undefined && !allowed.includes(field)) {

package/src/components/AdminModeSyncer.tsx

@@ -1,6 +1,6 @@
 import type { AppView } from "@rebasepro/admin-types";
 import React, { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 ;
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useAdminModeController } from "@rebasepro/app";

package/src/components/CollectionTableBinding/PropertyTableCell.tsx

@@ -205,6 +205,16 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             }
         };
 
+        // `getTableBindingForProperty` builds its `Component` as a fresh inline
+        // arrow function on every call. Calling it during render therefore gave
+        // React a new component *type* each pass, so the cell was unmounted and
+        // remounted instead of updated — which is why a BooleanSwitch in the
+        // table never animated (a replaced element cannot run a CSS transition)
+        // and why every cell re-created its subtree on unrelated renders.
+        const tableBinding = useMemo(
+            () => getTableBindingForProperty(property, selected),
+            [property, selected]);
+
         let innerComponent: React.ReactNode | undefined;
         let allowScroll = false;
         let showExpandIcon = false;
@@ -243,8 +253,6 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         }
 
         if (!customField && (!customPreview || selected)) {
-            const tableBinding = getTableBindingForProperty(property, selected);
-
             if (tableBinding) {
                 const Component = tableBinding.Component;
                 innerComponent = <Component

package/src/components/CollectionTableBinding/column_utils.tsx

@@ -1,4 +1,4 @@
-import type { Properties, Property } from "@rebasepro/types";
+import type { Properties, Property, RelationProperty } from "@rebasepro/types";
 import React from "react";
 import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/common";
 import { FilterValues } from "@rebasepro/types";
@@ -52,7 +52,7 @@ export function propertiesToColumns<M extends Record<string, unknown>>({ propert
                 align: getTableCellAlignment(property),
                 icon: getIconForProperty(property, "small"),
                 title: property.name ?? key as string,
-                sortable: sortable,
+                sortable: sortable && sortableProperty(property),
                 filter: !disabledFilter && filterable,
                 width: getTablePropertyColumnWidth(property),
                 resizable: true,
@@ -67,6 +67,63 @@ export function propertiesToColumns<M extends Record<string, unknown>>({ propert
         });
 }
 
+export type SortablePropertyOption = {
+    key: string;
+    title: string;
+    property: Property;
+};
+
+/**
+ * The properties a sort can be applied to, as keys and titles.
+ *
+ * Only the table renders headers, so the list, card and split views had no way
+ * to order anything — the controller has carried `sortBy` all along, with no
+ * control bound to it outside the table. This is the same walk
+ * `propertiesToColumns` makes, under the same keys and the same
+ * `sortableProperty` authority, so a sort picked from the toolbar means exactly
+ * what clicking the header would have meant, and the two cannot drift into
+ * offering different columns.
+ */
+export function getSortablePropertyOptions(properties: Properties): SortablePropertyOption[] {
+    return Object.entries<Property>(properties)
+        .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
+        .flatMap(({ key }) => {
+            // Unlike the table, a missing property here is not worth throwing
+            // over: the sort control simply has one fewer option to offer.
+            const property = getResolvedPropertyInPath(properties, key) as Property | undefined;
+            if (!property || !sortableProperty(property)) return [];
+            return [{
+                key: key as string,
+                title: property.name ?? key as string,
+                property
+            }];
+        });
+}
+
+/**
+ * Whether this column can be ordered by.
+ *
+ * `sortable` arrived as one flag for the whole table while `filter` was
+ * computed per property, so every column advertised a sort — including the ones
+ * no `ORDER BY` can be written for. A to-many relation is a *set* per row
+ * (`posts.tags`), and there is no single value to order on; the driver used to
+ * answer by silently dropping the sort and returning rows in whatever order
+ * Postgres pleased, which is how a header that did nothing went unnoticed.
+ *
+ * Now that the driver refuses instead, offering the control would turn a
+ * useless header into a failed request. Same authority as the filter side: ask
+ * the property, not the table.
+ */
+function sortableProperty(property: Property): boolean {
+    if (property.type !== "relation") return true;
+    const relationProperty = property as RelationProperty;
+    const kind = relationProperty.relation?.kind ?? relationProperty.resolvedRelation?.kind;
+    // An unresolved relation keeps the benefit of the doubt — the same choice
+    // `isFilterableRelation` makes for a kind it cannot see.
+    if (!kind) return true;
+    return kind === "belongsTo";
+}
+
 function filterableProperty(property: Property, partOfArray = false, engine?: string): boolean {
     // A relation this engine's driver cannot compile into a `WHERE` has
     // nothing to filter on, so the header's filter control would open onto a

package/src/components/CollectionTableBinding/table_bindings.tsx

@@ -189,13 +189,14 @@ export function getTableBindingForProperty(
         };
     } else if (property.type === "date") {
         return {
-            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: TableFieldBindingProps) => {
+            Component: ({ propertyKey, error, validationError, disabled, selected, size, property, internalValue, updateValue }: TableFieldBindingProps) => {
                 const { locale } = useCustomizationController();
                 return (
                     <VirtualTableDateField
                         name={propertyKey}
                         error={validationError ?? error}
                         disabled={disabled}
+                        small={getPreviewSizeFrom(size) !== "medium"}
                         mode={(property as DateProperty).mode}
                         focused={selected}
                         internalValue={internalValue as Date}

package/src/components/CollectionViewBinding/CollectionBoardViewBinding.tsx

@@ -38,7 +38,7 @@ import {
 import { useAnalyticsController } from "@rebasepro/app";
 import { setIn } from "@rebasepro/forms";
 import { useBoardDataController } from "./useBoardDataController";
-import { useKanbanDragAndDrop } from "./hooks/useKanbanDragAndDrop";
+import { isValidOrderKey, ORDER_KEY_DIGITS, useKanbanDragAndDrop } from "./hooks/useKanbanDragAndDrop";
 import { useSidePanel } from "../../hooks/useSidePanel";
 import { generateNKeysBetween } from "fractional-indexing";
 
@@ -298,11 +298,11 @@ parentEntityIds,
         if (!orderProperty || dataLoading) return false;
         // Use collection-level count detection
         if (missingOrderCount > 0) return true;
-        // Fallback to checking loaded entities
-        return allEntities.some((entity: Entity<M>) => {
-            const orderValue = entity.values?.[orderProperty];
-            return orderValue === undefined || orderValue === null;
-        });
+        // A value that is present but is not a fractional-indexing key is no
+        // more usable than a missing one — dropping a card next to it cannot
+        // produce a key between the two — so it earns the same offer to
+        // initialise the column.
+        return allEntities.some((entity: Entity<M>) => !isValidOrderKey(entity.values?.[orderProperty]));
     }, [allEntities, orderProperty, dataLoading, missingOrderCount]);
 
     // Create a lookup map of entity ID → column from boardDataController data
@@ -337,7 +337,8 @@ parentEntityIds,
                 loading: colData?.loading ?? true,
                 hasMore: colData?.hasMore ?? false,
                 itemCount: colData?.entities?.length ?? 0,
-                totalCount: colData?.totalCount
+                totalCount: colData?.totalCount,
+                error: colData?.error
             };
         });
         return state;
@@ -375,20 +376,24 @@ parentEntityIds,
         setBackfillLoading(true);
 
         try {
-            // Fetch ALL documents from collection (not relying on loaded entities)
+            // Fetch ALL documents from collection (not relying on loaded
+            // entities). No `orderBy`: with no usable order key there is
+            // nothing to order by, and this is the same query the columns
+            // themselves run, so the keys are handed out in the order the
+            // board is showing — which is what the dialog promises.
             const allDocsRes = await dataClient.collection(fullPath).find({
                 limit: 10000 // Fetch all
             });
             const allDocs = allDocsRes.data as Entity<M>[];
 
-            // Find entities missing order property
-            const entitiesToUpdate = allDocs.filter((entity: Entity<M>) => {
-                const orderValue = entity.values?.[orderProperty];
-                return orderValue === undefined || orderValue === null;
-            });
+            // Entities without a usable order key. Testing only for null here
+            // meant a column full of unusable values — `"12"`, `"6"` — offered
+            // an Initialize button that updated nothing and never went away.
+            const entitiesToUpdate = allDocs.filter((entity: Entity<M>) =>
+                !isValidOrderKey(entity.values?.[orderProperty]));
 
             // Generate string fractional keys for all entities that need them
-            const keys = generateNKeysBetween(null, null, entitiesToUpdate.length);
+            const keys = generateNKeysBetween(null, null, entitiesToUpdate.length, ORDER_KEY_DIGITS);
             const updates: Promise<void>[] = [];
             entitiesToUpdate.forEach((entity: Entity<M>, index: number) => {
                 const updatedValues = setIn({ ...entity.values }, orderProperty, keys[index]);
@@ -591,8 +596,10 @@ parentEntityIds,
                 </div>
             )}
 
-            {/* Main board */}
-            <div className="flex-1 overflow-auto no-scrollbar">
+            {/* Main board. It scrolls its own columns vertically and its own
+                row horizontally, so an `overflow-auto` here only added a second
+                scroll container around both. */}
+            <div className="flex-1 min-h-0 overflow-hidden">
                 <KanbanView
                     data={boardItems}
                     columns={columns}

package/src/components/CollectionViewBinding/CollectionViewActions.tsx

@@ -113,8 +113,14 @@ export function CollectionViewActions<M extends Record<string, unknown>>({
 
     const multipleDeleteEnabled = canDelete(collection, path, null);
 
+    // Only once something is selected. A permanently-disabled bin sat in every
+    // collection toolbar — and in the split view, where the toolbar is a narrow
+    // strip above the list, it was a third of the visible controls doing
+    // nothing. It appears the moment you tick a row, which is when you want it.
+    const hasSelection = Boolean(selectedEntities?.length);
+
     let multipleDeleteButton: React.ReactNode | undefined;
-    {
+    if (hasSelection) {
         const button = largeLayout && !compact
             ? <Button
                 variant={"text"}

package/src/components/CollectionViewBinding/CollectionViewBinding.tsx

@@ -13,7 +13,7 @@ import {
     ViewMode
 } from "@rebasepro/admin-types";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 
 import { deepEqual as equal } from "fast-equals"
 import { CollectionRowActions, CollectionTableBinding } from "../CollectionTableBinding";
@@ -970,6 +970,7 @@ parentEntityIds,
                     selectionController={usedSelectionController}
                     collectionEntitiesCount={docsCount ?? undefined}
                     resolvedProperties={resolvedCollection.properties}
+                    viewMode={viewMode}
                     openNewDocument={openNewDocument}
                     compact={isCompact}/>}
                 actions={
@@ -1166,8 +1167,14 @@ parentEntityIds,
                 ) : (
                     <div className="flex flex-col w-full h-full">
                         {toolbarNode}
+                        {/* `min-h-0` is what lets the board scroll its columns.
+                            A flex item defaults to `min-height: auto`, so this
+                            one grew to the board's full content height — 1230px
+                            in a 883px area — and the ancestor's `overflow-hidden`
+                            simply cut the rest off, with each column's own
+                            scroller never reaching its limit. */}
                         <div className={cls(
-                            "flex-1 flex flex-col",
+                            "flex-1 min-h-0 flex flex-col",
                             (viewMode === "list" || viewMode === "cards") && "overflow-y-auto"
                         )}>
                             {collectionSurface}

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -2,17 +2,19 @@ import type { Properties } from "@rebasepro/types";
 
 import React, { useState, useCallback } from "react";
 import { useAuthController, useLargeLayout, useTranslation, useSlot } from "@rebasepro/app";
-import { CollectionActionsProps, EntityTableController, SelectionController, AdminCollection } from "@rebasepro/admin-types";
+import { CollectionActionsProps, EntityTableController, SelectionController, AdminCollection, ViewMode } from "@rebasepro/admin-types";
 import { ErrorBoundary, iconSize } from "@rebasepro/ui";
-import { ArrowLeftIcon, Badge, Button, cls, FilterIcon, IconButton, Tooltip } from "@rebasepro/ui";
+import { Badge, Button, cls, FilterIcon, IconButton, Tooltip, XIcon } from "@rebasepro/ui";
 import { ClearFilterSortButton } from "../ClearFilterSortButton";
 import { FiltersDialog } from "./FiltersDialog";
 import { FilterPresetsButton } from "./FilterPresetsButton";
+import { SortButton } from "./SortButton";
 import { toArray } from "@rebasepro/utils";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 import { useAdminContext } from "../../hooks/useAdminContext";
 import { withViewMode } from "../../util/view_mode";
+import { useSplitView } from "./SplitViewContext";
 
 export type CollectionViewStartActionsProps<M extends Record<string, unknown>> = {
     collection: AdminCollection<M>;
@@ -26,6 +28,11 @@ export type CollectionViewStartActionsProps<M extends Record<string, unknown>> =
      * Resolved properties from the collection for the filters dialog
      */
     resolvedProperties?: Properties;
+    /**
+     * Which view is being displayed. Decides whether the sort control is
+     * offered — see `sortButton`.
+     */
+    viewMode?: ViewMode;
     compact?: boolean;
     openNewDocument: (defaultValues?: Record<string, unknown>) => void;
 }
@@ -39,6 +46,7 @@ export function CollectionViewStartActions<M extends Record<string, unknown>>({
     tableController,
     collectionEntitiesCount,
     resolvedProperties,
+    viewMode,
     compact,
     openNewDocument
 }: CollectionViewStartActionsProps<M>) {
@@ -49,6 +57,7 @@ export function CollectionViewStartActions<M extends Record<string, unknown>>({
 
     const navigate = useNavigate();
     const urlController = useUrlController();
+    const splitView = useSplitView();
 
     // Filters dialog state
     const [filtersDialogOpen, setFiltersDialogOpen] = useState(false);
@@ -77,14 +86,20 @@ parentEntityIds,
         navigate(withViewMode(urlController.buildUrlCollectionPath(path)));
     }, [navigate, urlController, path]);
 
-    const backButton = compact && (
-        <Tooltip title={t("back")} key={"back_tooltip"}>
+    // In a split view the control that closes the list lives at the leading
+    // edge of the record's app bar (`SplitListCloseButton`), not here.
+    //
+    // Outside one — a compact list with no record open beside it — the only
+    // thing this can mean is "leave the record behind".
+    const backButton = compact && !splitView?.detailOpen && (
+        <Tooltip title={t("close")} key={"close_tooltip"}>
             <IconButton
                 size="small"
                 onClick={handleBackClick}
+                aria-label={t("close")}
                 className="mr-1"
             >
-                <ArrowLeftIcon size={iconSize.small}/>
+                <XIcon size={iconSize.smallest}/>
             </IconButton>
         </Tooltip>
     );
@@ -107,20 +122,39 @@ parentEntityIds,
                         {activeFilterCount > 0 ? `(${activeFilterCount})` : t("filters")}
                     </Button>
                 ) : (
-                    <Button
-                        variant="text"
-                        size="small"
+                    <IconButton
+                        size={"small"}
                         onClick={() => setFiltersDialogOpen(true)}
                         className={cls(activeFilterCount > 0 && "text-primary")}
                     >
-                        <FilterIcon size={iconSize.small}/>
-                    </Button>
+                        <FilterIcon size={iconSize.smallest}/>
+                    </IconButton>
                 )}
             </Badge>
         </Tooltip>
     );
 
-    const filterPresetsButton = collection.filterPresets?.length ? (
+    // Ordering the collection is a click on a column header — which only the
+    // table has. The list and card views showed rows in whatever order the
+    // query returned with no way to change it, so they get the control in the
+    // toolbar instead.
+    //
+    // Not the table, where the headers already do this and say which column is
+    // sorted; and not the board, which orders its columns by its own order key
+    // and ignores `sortBy` entirely, so the control would appear to do nothing.
+    const sortButton = resolvedProperties && (viewMode === "list" || viewMode === "cards") && (
+        <SortButton
+            key={"sort_button"}
+            tableController={tableController}
+            properties={resolvedProperties}
+        />
+    );
+
+    // Not in the split view. The toolbar there is a strip a few hundred pixels
+    // wide above the list, and a row of preset chips crowded out the controls
+    // that act on what you are looking at. The presets are still one click away
+    // inside the filters dialog.
+    const filterPresetsButton = !compact && collection.filterPresets?.length ? (
         <FilterPresetsButton
             key={"filter_presets"}
             filterPresets={collection.filterPresets}
@@ -132,6 +166,7 @@ parentEntityIds,
     const actions: React.ReactNode[] = [
         backButton,
         filtersButton,
+        sortButton,
         <ClearFilterSortButton
             key={"clear_filter"}
             tableController={tableController}