@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/components/CollectionViewBinding/SortButton.tsx

@@ -0,0 +1,189 @@
+import type { Properties } from "@rebasepro/types";
+
+import React, { useCallback, useMemo, useState } from "react";
+import { EntityTableController } from "@rebasepro/admin-types";
+import {
+    ArrowDownIcon,
+    ArrowUpDownIcon,
+    ArrowUpIcon,
+    Button,
+    cls,
+    iconSize,
+    IconButton,
+    Popover,
+    Typography
+} from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/app";
+import { getSortablePropertyOptions } from "../CollectionTableBinding/column_utils";
+import { getIconForProperty } from "../../util/property_utils";
+
+export type SortButtonProps<M extends Record<string, unknown>> = {
+    tableController: EntityTableController<M>;
+    /**
+     * Resolved properties of the collection. The sortable ones among them are
+     * the options offered.
+     */
+    properties: Properties;
+};
+
+/**
+ * Toolbar control that orders the collection by one property.
+ *
+ * The table orders by clicking a column header, which leaves every other view
+ * mode — list, cards, and either of them inside a split view — with no way to
+ * order at all, even though the controller has always carried `sortBy` and the
+ * query has always honoured it. This binds a control to it.
+ *
+ * Clicking the active property flips its direction, so ascending → descending
+ * is one click rather than a trip through a direction selector; clicking a
+ * different one starts it ascending. The popover stays open through both.
+ */
+export function SortButton<M extends Record<string, unknown>>({
+    tableController,
+    properties
+}: SortButtonProps<M>) {
+
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+
+    const options = useMemo(() => getSortablePropertyOptions(properties), [properties]);
+
+    const {
+        sortBy,
+        setSortBy,
+        setItemCount,
+        pageSize,
+        filterValues,
+        checkFilterCombination
+    } = tableController;
+
+    const activeKey = sortBy?.[0];
+    const activeDirection = sortBy?.[1];
+
+    const applySort = useCallback((next?: [string, "asc" | "desc"]) => {
+        setSortBy?.(next);
+        // Re-ordering a partially loaded collection is the same event as
+        // clicking a table header: the rows already fetched are no longer the
+        // ones the query answers with, so pagination starts over rather than
+        // holding on to a page of the previous order (`SelectableTable` resets
+        // it for the same reason).
+        if (pageSize !== undefined)
+            setItemCount?.(pageSize);
+    }, [setSortBy, setItemCount, pageSize]);
+
+    const onOptionClick = useCallback((key: string) => {
+        if (key === activeKey) {
+            applySort([key, activeDirection === "asc" ? "desc" : "asc"]);
+        } else {
+            applySort([key, "asc"]);
+        }
+    }, [activeKey, activeDirection, applySort]);
+
+    if (!setSortBy || options.length === 0) {
+        return null;
+    }
+
+    const activeOption = options.find(option => option.key === activeKey);
+    const label = activeOption
+        ? `${t("sort_by")}: ${activeOption.title}`
+        : t("sort");
+
+    // Icon only, at every width. The arrow says which way the order runs; which
+    // property it runs on is in the popover, and in the tooltip for anyone who
+    // wants it without opening one.
+    //
+    // No `onClick` here and no `Tooltip` wrapper: the popover is controlled in
+    // this component, and Radix's trigger — which reaches the button through
+    // `asChild` — is what toggles it. A handler of our own would toggle it a
+    // second time in the same click and the popover would never open; a
+    // `Tooltip` in between would swallow the trigger's ref.
+    const trigger = (
+        <IconButton
+            size={"small"}
+            aria-label={label}
+            title={label}
+            className={cls(activeOption && "text-primary")}
+        >
+            {activeDirection === "desc"
+                ? <ArrowDownIcon size={iconSize.smallest}/>
+                : activeDirection === "asc"
+                    ? <ArrowUpIcon size={iconSize.smallest}/>
+                    : <ArrowUpDownIcon size={iconSize.smallest}/>}
+        </IconButton>
+    );
+
+    return (
+        <Popover
+            open={open}
+            onOpenChange={setOpen}
+            modal={false}
+            side="bottom"
+            align="start"
+            trigger={trigger}
+        >
+            <div className="py-2 min-w-[240px] flex flex-col">
+                <Typography
+                    variant="caption"
+                    color="secondary"
+                    className="font-medium uppercase tracking-wider px-3 pb-1"
+                >
+                    {t("sort_by")}
+                </Typography>
+
+                <div className="max-h-[320px] overflow-y-auto flex flex-col">
+                    {options.map(({ key, title, property }) => {
+                        const active = key === activeKey;
+                        // A driver may refuse a sort next to the filter that is
+                        // already applied. Offering it would turn the click
+                        // into a failed request, so it is disabled with the
+                        // same authority the table headers ask.
+                        const disabled = checkFilterCombination
+                            ? !checkFilterCombination(filterValues ?? {}, [key, active && activeDirection === "asc" ? "desc" : "asc"])
+                            : false;
+                        return (
+                            <button
+                                key={key}
+                                type="button"
+                                role="menuitemradio"
+                                aria-checked={active}
+                                disabled={disabled}
+                                onClick={() => onOptionClick(key)}
+                                className={cls(
+                                    "flex items-center gap-2 px-3 py-1.5 text-sm text-left w-full",
+                                    disabled
+                                        ? "opacity-50 cursor-not-allowed"
+                                        : "cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900",
+                                    active && "text-primary"
+                                )}
+                            >
+                                <span className="flex-shrink-0 flex items-center">
+                                    {getIconForProperty(property, "smallest")}
+                                </span>
+                                <span className="flex-grow truncate">{title}</span>
+                                {active && (
+                                    <span className="flex-shrink-0 flex items-center">
+                                        {activeDirection === "desc"
+                                            ? <ArrowDownIcon size={iconSize.smallest}/>
+                                            : <ArrowUpIcon size={iconSize.smallest}/>}
+                                    </span>
+                                )}
+                            </button>
+                        );
+                    })}
+                </div>
+
+                <div className="px-3 pt-2">
+                    <Button
+                        variant="text"
+                        size="small"
+                        className="w-full"
+                        disabled={!activeOption}
+                        onClick={() => applySort(undefined)}
+                    >
+                        {t("clear_sort")}
+                    </Button>
+                </div>
+            </div>
+        </Popover>
+    );
+}

package/src/components/CollectionViewBinding/SplitListCloseButton.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { IconButton, iconSize, Tooltip, XIcon } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/app";
+
+import { useSplitView } from "./SplitViewContext";
+
+/**
+ * Closes the list of a split view, leaving the open record on its own.
+ *
+ * It leads the record's own app bar, where the breadcrumb starts — this is the
+ * entity pane's old "Open full screen" button, moved to that edge and wearing an
+ * X: closing the list and opening the record full screen are the same thing, so
+ * there is one control and one route (`#full`) rather than two.
+ */
+export function SplitListCloseButton() {
+
+    const { t } = useTranslation();
+    const splitView = useSplitView();
+
+    if (!splitView?.detailOpen) return null;
+
+    return (
+        <Tooltip title={t("hide_list")}>
+            <IconButton
+                size="small"
+                onClick={splitView.openFullScreen}
+                aria-label={t("hide_list")}>
+                <XIcon size={iconSize.smallest}/>
+            </IconButton>
+        </Tooltip>
+    );
+}

package/src/components/CollectionViewBinding/SplitListView.tsx

@@ -11,10 +11,11 @@ import {
 } from "@rebasepro/ui";
 import { useLargeLayout, UnsavedChangesDialog, useNavigationBlocker } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router";
 import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { withViewMode } from "../../util/view_mode";
+import { SplitViewProvider } from "./SplitViewContext";
 
 export type SplitListViewProps<M extends Record<string, unknown> = Record<string, unknown>> = {
     collection: AdminCollection<M>;
@@ -408,8 +409,22 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
         </div>
     ) : <></>;
 
+    // Closing the list is the full-screen entity route: the same `#full` the
+    // entity pane's expand button used, so there is one way to give the record
+    // the whole window and one way back out of it.
+    const openFullScreen = useCallback(() => {
+        if (selectedEntityId === undefined) return;
+        const suffix = isEditMode ? "/edit" : "";
+        navigate(`${buildUrl(`${path}/${selectedEntityId}${suffix}`)}#full`);
+    }, [navigate, buildUrl, path, selectedEntityId, isEditMode]);
+
+    const splitViewController = useMemo(() => ({
+        detailOpen: selectedEntityId !== undefined,
+        openFullScreen
+    }), [selectedEntityId, openFullScreen]);
+
     return (
-        <>
+        <SplitViewProvider value={splitViewController}>
             <ResizablePanels
                 stacked={!largeLayout}
                 firstPanel={listPanel}
@@ -428,6 +443,6 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                 }}
                 handleCancel={() => blocker?.reset?.()}
                 body={<>You have unsaved changes in this <b>{collection.singularName ?? collection.name}</b>.</>}/>
-        </>
+        </SplitViewProvider>
     );
 }

package/src/components/CollectionViewBinding/SplitViewContext.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from "react";
+
+/**
+ * The enclosing master-detail split view, exposed to the list panel so it can
+ * carry the control that closes it.
+ */
+export type SplitViewController = {
+    /** Whether a record is open in the detail pane. */
+    detailOpen: boolean;
+    /**
+     * Close the list and leave the open record on its own, full screen. This is
+     * the existing full-screen entity route (`#full`), not a second mechanism.
+     */
+    openFullScreen: () => void;
+};
+
+const SplitViewContext = React.createContext<SplitViewController | undefined>(undefined);
+
+/**
+ * The enclosing split view, or `undefined` when the component is not rendered
+ * inside one (a side panel, a dialog, a full-screen route).
+ */
+export function useSplitView(): SplitViewController | undefined {
+    return useContext(SplitViewContext);
+}
+
+export function SplitViewProvider({
+    value,
+    children
+}: { value: SplitViewController, children: React.ReactNode }) {
+    return <SplitViewContext.Provider value={value}>
+        {children}
+    </SplitViewContext.Provider>;
+}

package/src/components/CollectionViewBinding/hooks/useKanbanDragAndDrop.ts

@@ -7,6 +7,42 @@ import { BoardItem } from "@rebasepro/ui";
 import { BoardDataController } from "../useBoardDataController";
 import { generateKeyBetween } from "fractional-indexing";
 
+/**
+ * The digits a board order key is built from: base36, lower case only.
+ *
+ * The library's default alphabet is base62, and its keys only sort correctly
+ * under byte ordering. The column is sorted by the *database*, and Postgres'
+ * default collation is not byte ordering — under `en_US.UTF-8`, `"aa"` sorts
+ * before `"aC"`, so as soon as a board had been dragged around enough to reach
+ * the upper-case digits its order stopped matching the keys. One case has no
+ * such ambiguity: digits before letters is true of every collation in use.
+ *
+ * A key written with the old alphabet no longer validates, which is what makes
+ * the board offer to initialise the column — one click, and the order is
+ * rewritten in a form the database can sort.
+ */
+export const ORDER_KEY_DIGITS = "0123456789abcdefghijklmnopqrstuvwxyz";
+
+/**
+ * Whether a stored order value is a key `fractional-indexing` can interpolate
+ * against.
+ *
+ * Anything else — a plain `"12"` from a seed or a migration, an empty string —
+ * makes `generateKeyBetween` throw, and the fallback below then hands out the
+ * same first key to every card, so each drag lands at the bottom of the column
+ * on top of the last one that did. Asking the library itself is the only
+ * definition of "valid" worth trusting.
+ */
+export function isValidOrderKey(value: unknown): value is string {
+    if (typeof value !== "string" || value.length === 0) return false;
+    try {
+        generateKeyBetween(value, null, ORDER_KEY_DIGITS);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
 export interface UseKanbanDragAndDropParams<M extends Record<string, unknown>> {
     collection: AdminCollection<M>;
     fullPath: string;
@@ -63,13 +99,16 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
 
             const movedIndex = targetColumnItems.findIndex(item => item.id === moveInfo.itemId);
 
-            // Get the order keys of the neighbours
-            const prevKey = movedIndex > 0
-                ? (targetColumnItems[movedIndex - 1].data.values?.[orderProperty] as string | null) ?? null
-                : null;
-            const nextKey = movedIndex < targetColumnItems.length - 1
-                ? (targetColumnItems[movedIndex + 1].data.values?.[orderProperty] as string | null) ?? null
-                : null;
+            // The order keys of the neighbours. A neighbour whose key is not a
+            // valid one counts as no neighbour at all: interpolating against it
+            // throws, and the whole move then falls back to a key that ignores
+            // where the card was actually dropped.
+            const keyAt = (index: number): string | null => {
+                const value = targetColumnItems[index]?.data.values?.[orderProperty];
+                return isValidOrderKey(value) ? value : null;
+            };
+            const prevKey = movedIndex > 0 ? keyAt(movedIndex - 1) : null;
+            const nextKey = movedIndex < targetColumnItems.length - 1 ? keyAt(movedIndex + 1) : null;
 
             try {
                 const a = prevKey;
@@ -78,12 +117,12 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
                     // Handle duplicate or out-of-order keys to prevent fractional-indexing crash
                     b = null;
                 }
-                const newKey = generateKeyBetween(a, b);
+                const newKey = generateKeyBetween(a, b, ORDER_KEY_DIGITS);
                 updatedValues = setIn(updatedValues, orderProperty, newKey) as Record<string, unknown>;
             } catch (e) {
                 // Fallback: if keys are somehow invalid, generate from scratch
                 console.warn("fractional-indexing error, falling back:", e);
-                const newKey = generateKeyBetween(null, null);
+                const newKey = generateKeyBetween(null, null, ORDER_KEY_DIGITS);
                 updatedValues = setIn(updatedValues, orderProperty, newKey) as Record<string, unknown>;
             }
         }

package/src/components/CollectionViewBinding/useBoardDataController.tsx

@@ -6,6 +6,13 @@ import type { AdminCollection } from "@rebasepro/admin-types";
 
 const DEFAULT_PAGE_SIZE = 20;
 
+/**
+ * How long a column waits for its subscription's first payload before reading
+ * once over HTTP instead. Long enough that a healthy socket always wins the
+ * race, short enough that a dead one does not hold a blank board.
+ */
+const LIVE_FIRST_PAINT_TIMEOUT_MS = 2500;
+
 /**
  * Shallow equality for entity value records.
  * Handles primitives and reference equality for nested values.
@@ -392,46 +399,94 @@ values: { ...e.values,
             });
         };
 
+        const accessor = currentDataClient.collection(currentResolvedPath);
+
+        // Eagerly include relations to avoid N+1 fetches.
+        const includeParams = getRelationIncludeParams(currentCollection);
+
+        const fetchOnce = () => accessor.find({
+            where: whereFilter,
+            limit: itemCount,
+            orderBy: orderByParam,
+            include: includeParams
+        });
+
         const onError = (error: Error) => {
             // Skip error handling if we're cleaning up
             if (isCleaningUpRef.current) return;
 
             console.error(`Error loading column ${column}:`, error);
-            setColumnData(prev => ({
-                ...prev,
-                [column]: {
-                    ...prev[column],
-                    entities: [],
-                    loading: false,
-                    hasMore: false,
-                    error
-                }
-            }));
-        };
 
-        // Set up listener or fetch
-        const accessor = currentDataClient.collection(currentResolvedPath);
-
-        // Eagerly include relations to avoid N+1 fetches.
-        const includeParams = getRelationIncludeParams(currentCollection);
+            // A live subscription that fails is not the same thing as a column
+            // with nothing in it, but that is exactly what this used to render:
+            // entities cleared, no error surfaced, and a column reading "No
+            // items" above a header still counting eleven of them. Read once
+            // over HTTP instead — the board loses its live updates, not its
+            // contents — and only report the failure if that fails too.
+            fetchOnce()
+                .then(res => onUpdate(res.data as Entity<M>[]))
+                .catch(() => {
+                    if (isCleaningUpRef.current) return;
+                    setColumnData(prev => ({
+                        ...prev,
+                        [column]: {
+                            ...prev[column],
+                            entities: prev[column]?.entities ?? [],
+                            loading: false,
+                            hasMore: false,
+                            error
+                        }
+                    }));
+                });
+        };
 
         if (accessor.listen) {
+            let liveDataReceived = false;
             const unsubscribe = accessor.listen({
                 where: whereFilter,
                 limit: itemCount,
                 orderBy: orderByParam,
                 include: includeParams
-            }, res => onUpdate(res.data as Entity<M>[]), onError);
-            unsubscribersRef.current[column] = unsubscribe;
+            }, res => {
+                liveDataReceived = true;
+                onUpdate(res.data as Entity<M>[]);
+            }, onError);
+
+            // A subscription that is never going to answer takes the client's
+            // full 30s watchdog to say so, and the board spins the whole time.
+            // If the socket has not delivered shortly after mount, read once
+            // over HTTP and paint that; the live data still wins whenever it
+            // arrives. Costs nothing when realtime is healthy.
+            const firstPaintFallback = setTimeout(() => {
+                if (liveDataReceived || isCleaningUpRef.current) return;
+                fetchOnce()
+                    .then(res => {
+                        if (liveDataReceived || isCleaningUpRef.current) return;
+                        onUpdate(res.data as Entity<M>[]);
+                    })
+                    .catch(() => undefined);
+            }, LIVE_FIRST_PAINT_TIMEOUT_MS);
+
+            unsubscribersRef.current[column] = () => {
+                clearTimeout(firstPaintFallback);
+                unsubscribe?.();
+            };
         } else {
-            accessor.find({
-                where: whereFilter,
-                limit: itemCount,
-                orderBy: orderByParam,
-                include: includeParams
-            })
+            fetchOnce()
                 .then(res => onUpdate(res.data as Entity<M>[]))
-                .catch(onError);
+                .catch((error: Error) => {
+                    if (isCleaningUpRef.current) return;
+                    setColumnData(prev => ({
+                        ...prev,
+                        [column]: {
+                            ...prev[column],
+                            entities: prev[column]?.entities ?? [],
+                            loading: false,
+                            hasMore: false,
+                            error
+                        }
+                    }));
+                });
         }
     }, []); // No dependencies - uses refs for all values
 

package/src/components/CollectionViewBinding/usePreviewSlots.ts

@@ -3,12 +3,12 @@ import type { Property, RelationProperty } from "@rebasepro/types";
 import type { Entity, EntityRelation } from "@rebasepro/types";
 import type { PropertyConfig, AdminCollection } from "@rebasepro/admin-types";
 import { getEntityImagePreviewPropertyKey } from "@rebasepro/app";
-import { getTitlePropertyCandidates, looksLikeIdentifierValue } from "@rebasepro/app";
+import { getLeadingRelationTitleKey, getTitlePropertyCandidates, looksLikeIdentifierValue } from "@rebasepro/app";
 import { getEntityFromCache } from "@rebasepro/app";
 import { getEntityPreviewKeys } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 import type { AuthController } from "@rebasepro/admin-types";
-import { ChipColorScheme, CHIP_COLORS } from "@rebasepro/ui";
+import { ChipColorScheme, CHIP_COLORS, CHIP_SEED_KEYS } from "@rebasepro/ui";
 
 /** Whether an authored relation yields many rows. Derived from its kind. */
 function relationCardinality(relation: { kind?: string; cardinality?: string } | undefined): "one" | "many" | undefined {
@@ -119,7 +119,15 @@ export function resolveCollectionSlotKeys(
     authController: AuthController,
     propertyConfigs: Record<string, PropertyConfig>
 ): CollectionSlotKeys {
-    const titleKeyCandidates = getTitlePropertyCandidates(collection);
+    // One row per entity: when the collection leads with a relation and holds no
+    // name of its own, that relation *is* what the row is called. See
+    // `getLeadingRelationTitleKey` — the general ranking keeps relations last,
+    // which is right for a detail header but leaves a junction row titleless.
+    const rankedCandidates = getTitlePropertyCandidates(collection);
+    const leadingRelationKey = getLeadingRelationTitleKey(collection);
+    const titleKeyCandidates = leadingRelationKey
+        ? [leadingRelationKey, ...rankedCandidates.filter(key => key !== leadingRelationKey)]
+        : rankedCandidates;
     const titleKey = titleKeyCandidates[0];
     const imageKey = getEntityImagePreviewPropertyKey(collection);
 
@@ -188,7 +196,9 @@ export function resolveCollectionSlotKeys(
     if (!hasExplicitOrder) {
         for (const [key, prop] of Object.entries(collection.properties)) {
             const p = prop as Property;
-            if (p.type === "relation") {
+            // The relation filling the title slot is already the row's headline;
+            // repeating it as a chip below says the same thing twice.
+            if (p.type === "relation" && key !== titleKey) {
                 relationKeys.push(key);
             }
         }
@@ -417,8 +427,10 @@ id: relation.id });
 
         if (items.length > 0) {
             const relIndex = relationKeys.indexOf(relKey);
-            const chipColors = Object.values(CHIP_COLORS);
-            const colorScheme = chipColors[relIndex % chipColors.length];
+            // Walking the seed keys rather than `Object.values`: the table also
+            // holds a bare-hue alias per hue, so raw values would hand the first
+            // two relations the same scheme.
+            const colorScheme = CHIP_COLORS[CHIP_SEED_KEYS[relIndex % CHIP_SEED_KEYS.length]];
             relations.push({
                 property: prop,
                 propertyKey: relKey,

package/src/components/DefaultAppBar.tsx

@@ -1,7 +1,7 @@
 
 import React from "react";
 
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { RebaseLogo, LanguageToggle } from "@rebasepro/app";
 import { ErrorBoundary, iconSize } from "@rebasepro/ui";
 import {

package/src/components/DefaultDrawer.tsx

@@ -6,7 +6,7 @@ import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
 
 
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { AnalyticsEvent } from "@rebasepro/admin-types";
 import {
     Avatar,