@rebasepro/admin 0.13.1-canary.gf57a27e → 0.14.0

package/src/components/CollectionViewBinding/SortButton.tsx

@@ -24,6 +24,12 @@ export type SortButtonProps<M extends Record<string, unknown>> = {
      * the options offered.
      */
     properties: Properties;
+    /**
+     * Toolbar showing icon-only controls (split view, or a layout too narrow
+     * for the filters button's label). Only decides the icon size, which
+     * follows that button — see `CollectionViewStartActions`.
+     */
+    compact?: boolean;
 };
 
 /**
@@ -40,7 +46,8 @@ export type SortButtonProps<M extends Record<string, unknown>> = {
  */
 export function SortButton<M extends Record<string, unknown>>({
     tableController,
-    properties
+    properties,
+    compact
 }: SortButtonProps<M>) {
 
     const { t } = useTranslation();
@@ -97,6 +104,8 @@ export function SortButton<M extends Record<string, unknown>>({
     // `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 arrowSize = compact ? iconSize.smallest : iconSize.small;
+
     const trigger = (
         <IconButton
             size={"small"}
@@ -104,11 +113,14 @@ export function SortButton<M extends Record<string, unknown>>({
             title={label}
             className={cls(activeOption && "text-primary")}
         >
+            {/* Same icon size as the filter controls it sits between: 16 in the
+                split view's narrow toolbar, 20 everywhere else. It was a flat
+                16, which read as a smaller button next to them. */}
             {activeDirection === "desc"
-                ? <ArrowDownIcon size={iconSize.smallest}/>
+                ? <ArrowDownIcon size={arrowSize}/>
                 : activeDirection === "asc"
-                    ? <ArrowUpIcon size={iconSize.smallest}/>
-                    : <ArrowUpDownIcon size={iconSize.smallest}/>}
+                    ? <ArrowUpIcon size={arrowSize}/>
+                    : <ArrowUpDownIcon size={arrowSize}/>}
         </IconButton>
     );
 

package/src/components/CollectionViewBinding/ViewModeToggle.tsx

@@ -79,12 +79,17 @@ export function ViewModeToggle({
     const { t } = useTranslation();
 
 
-    // Get icon for current view mode
+    // Get icon for current view mode.
+    //
+    // `small` on the trigger, matching the filters button beside it — the two
+    // labelled buttons open the toolbar together, and at 16 against its 20 this
+    // one read as the smaller of the pair. The options inside the popover stay
+    // at `smallest`, which is the size every other menu icon uses.
     const getViewModeIcon = () => {
-        if (viewMode === "kanban") return <KanbanIcon size={iconSize.smallest}/>;
-        if (viewMode === "cards") return <LayoutGridIcon size={iconSize.smallest}/>;
-        if (viewMode === "table") return <TableIcon size={iconSize.smallest}/>;
-        return <ListIcon size={iconSize.smallest}/>;
+        if (viewMode === "kanban") return <KanbanIcon size={iconSize.small}/>;
+        if (viewMode === "cards") return <LayoutGridIcon size={iconSize.small}/>;
+        if (viewMode === "table") return <TableIcon size={iconSize.small}/>;
+        return <ListIcon size={iconSize.small}/>;
     };
 
     const getViewModeName = () => {

package/src/components/CollectionViewBinding/useBoardDataController.tsx

@@ -1,5 +1,5 @@
 
-import { Entity, FilterValues } from "@rebasepro/types";
+import { Entity, FilterValues, MAX_LIST_LIMIT } from "@rebasepro/types";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getRelationIncludeParams, useData, useRebaseContext } from "@rebasepro/app";
 import type { AdminCollection } from "@rebasepro/admin-types";
@@ -220,6 +220,14 @@ export function useBoardDataController<M extends Record<string, unknown> = any,
         // Skip if we're in the middle of cleanup
         if (isCleaningUpRef.current) return;
 
+        // `itemCount` grows by one page per "load more" click with nothing
+        // stopping it, and a read above `MAX_LIST_LIMIT` is refused rather than
+        // trimmed — a column would stop loading with an error instead of
+        // stopping at the ceiling. Ask for what the platform serves; `hasMore`
+        // below still compares against the count the board asked for, so the
+        // column reports itself exhausted exactly where it did before.
+        const requestedCount = Math.min(itemCount, MAX_LIST_LIMIT);
+
         const currentDataClient = dataClientRef.current;
         const currentCollection = collectionRef.current;
         const currentContext = contextRef.current;
@@ -406,7 +414,7 @@ values: { ...e.values,
 
         const fetchOnce = () => accessor.find({
             where: whereFilter,
-            limit: itemCount,
+            limit: requestedCount,
             orderBy: orderByParam,
             include: includeParams,
             searchString: currentSearchString
@@ -445,7 +453,7 @@ values: { ...e.values,
             let liveDataReceived = false;
             const unsubscribe = accessor.listen({
                 where: whereFilter,
-                limit: itemCount,
+                limit: requestedCount,
                 orderBy: orderByParam,
                 include: includeParams,
                 // Read into a local at the top of this function and then used

package/src/components/DefaultDrawer.tsx

@@ -274,13 +274,20 @@ export function DrawerLogo({
 }) {
 
     const showFullContent = drawerOpen || drawerHovered;
+    const { t } = useTranslation();
 
     return (
         <div className="flex flex-row items-center shrink-0 pt-4 pb-0 px-2">
             {/* Logo — always visible */}
+            {/* Named explicitly because neither branch below carries text: the
+                stock `RebaseLogo` is a bare <svg> with no <title>, and a custom
+                `logo` only ever gets the generic alt "Logo", which names the image
+                rather than saying where the link goes. The title link beside it is
+                no help either — it renders only when a `title` is set. */}
             <Link
                 className="shrink-0 flex items-center justify-center w-[56px] h-[40px]"
                 to={logoDestination}
+                aria-label={t("home") || "Home"}
             >
                 {logo
                     ? <img src={logo} alt="Logo" className="w-[28px] h-[28px] object-contain"/>

package/src/components/DrawerNavigationItem.tsx

@@ -61,6 +61,18 @@ export function DrawerNavigationItem({
     const listItem = <div>
         <NavLink
             onClick={onClick}
+            // The label below is `hidden` (display:none) while the rail is
+            // collapsed, which takes it out of the accessibility tree along with
+            // the row's only text — a collapsed rail was a column of links with no
+            // accessible name at all. The tooltip does not cover this: Radix wires
+            // a trigger to its content with `aria-describedby`, which is a
+            // description rather than a name, and only while the tooltip is open —
+            // and this one is masked shut whenever the drawer is open.
+            //
+            // Named unconditionally rather than only when collapsed: expanded, this
+            // is the same string the row already displays, so the accessible name
+            // stays stable across the transition instead of appearing with it.
+            aria-label={name}
             style={{
                 width: "100%",
                 transition: drawerOpen ? "width 150ms ease-in" : undefined

package/src/components/RelationSelector.tsx

@@ -29,7 +29,6 @@ import { EntityPreviewBindingData } from "./EntityPreviewBinding";
 import { useData, useRelationSelector } from "@rebasepro/app";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { normalizeToEntityRelation } from "@rebasepro/common";
-import { EmptyValue } from "../preview";
 
 /** Whether an authored relation yields many rows. Derived from its kind. */
 function relationCardinality(relation: { kind?: string; cardinality?: string } | undefined): "one" | "many" | undefined {
@@ -91,7 +90,20 @@ export interface RelationSelectorProps {
     pageSize?: number;
     emptyPlaceholder?: string;
     searchPlaceholder?: string;
+    /** Shown in the open list when a search matched nothing. */
     noResultsText?: string;
+    /**
+     * Shown on the closed trigger when nothing is selected. Says only that the
+     * field is empty — see the note by `resolvedPlaceholder` for why it cannot
+     * say whether there is anything to pick.
+     */
+    emptyText?: string;
+    /**
+     * Shown in the open list when the target collection turned out to hold no
+     * rows at all, as opposed to a search simply not matching. Defaults to a
+     * sentence naming the target collection.
+     */
+    emptyCollectionText?: string;
     loadingText?: string;
 }
 
@@ -115,7 +127,9 @@ export const RelationSelector = React.forwardRef<
             pageSize,
             emptyPlaceholder,
             searchPlaceholder = "Search...",
-            noResultsText = "No relations found.",
+            noResultsText = "No matches.",
+            emptyText = "Select…",
+            emptyCollectionText,
             loadingText = "Loading..."
         },
         ref
@@ -129,6 +143,11 @@ export const RelationSelector = React.forwardRef<
 
         const [isPopoverOpen, setIsPopoverOpen] = useState(false);
         const isPopoverOpenRef = useRef(false);
+        // The list is only worth fetching once the picker has been opened. A
+        // table cell mounts one of these per row, and the selected value is
+        // resolved by its own effect below, not from the list. Latches on the
+        // first open so a closed popover keeps its results.
+        const [listRequested, setListRequested] = useState(false);
         const [selectedItems, setSelectedItems] = useState<RelationItem[]>([]);
         const [isLoadingSelectedItems, setIsLoadingSelectedItems] = useState(false);
         const [searchString, setSearchString] = useState<string>("");
@@ -151,7 +170,8 @@ export const RelationSelector = React.forwardRef<
             path: getCollectionDataPath(collection),
             collection,
             fixedFilter,
-            pageSize
+            pageSize,
+            enabled: listRequested
         });
 
         const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -418,6 +438,7 @@ relation } as RelationItem;
             if (next) {
                 // Capture current selection so we can pin those items to the top of the list
                 pinnedIdsRef.current = new Set(selectedItems.map(i => String(i.id)));
+                setListRequested(true);
                 setIsPopoverOpen(true);
                 isPopoverOpenRef.current = true;
             }
@@ -462,7 +483,22 @@ relation } as RelationItem;
             pinnedIdsRef.current = null;
         }, []);
 
-        const resolvedPlaceholder = placeholder || emptyPlaceholder || <EmptyValue className={"ml-2"}/>;
+        // Text, not `EmptyValue`. That component draws a small grey rounded bar
+        // with no text in it, which is the same shape the `Skeleton` component
+        // uses while data is in flight — so a relation you simply had not filled
+        // in was indistinguishable from one that was still loading, and an empty
+        // Author or Tags field read as permanently stuck. It also left the trigger
+        // button with no accessible name, since the bar contains no text at all.
+        //
+        // This says "not filled in" rather than "nothing to choose from": which of
+        // those it is cannot be known here. The list is deliberately not fetched
+        // until the picker is first opened (`enabled: listRequested`, guarded by
+        // relation_cell_picker_gating.test.tsx, because a table renders one of
+        // these per row), so before that `availableItems` is empty because nobody
+        // asked, not because the target collection is. The genuine "nothing to
+        // pick yet" state is reported inside the popover below, where the fetch
+        // has actually happened.
+        const resolvedPlaceholder = placeholder || emptyPlaceholder || emptyText;
 
         // Whatever dialog, side dialog or sheet we are inside offers as its
         // portal host, falling back to `document.body`. This is not cosmetic:
@@ -484,6 +520,10 @@ relation } as RelationItem;
                             disabled={disabled}
                             onClick={() => {
                                 if (disabled) return;
+                                // Unconditional: the toggle can only close a
+                                // popover that was opened, which requested the
+                                // list already.
+                                setListRequested(true);
                                 setIsPopoverOpen(o => {
                                     const next = !o;
                                     isPopoverOpenRef.current = next;
@@ -666,10 +706,17 @@ relation } as RelationItem;
                                                 className="ml-2 text-sm text-text-secondary dark:text-text-secondary-dark">{loadingText}</span>
                                         </div>
                                     )}
+                                    {/* Two different nothings, which used to share one
+                                        message ("No relations found.") even though the
+                                        fix for each is the opposite: clear the search, or
+                                        go and create the first row. With the fetch done,
+                                        the search string is what tells them apart. */}
                                     {!isLoading && availableItems.length === 0 && (
                                         <CommandPrimitive.Empty
                                             className="px-4 py-6 text-center text-text-secondary dark:text-text-secondary-dark">
-                                            {noResultsText}
+                                            {searchString
+                                                ? noResultsText
+                                                : (emptyCollectionText ?? `No ${collection.name ?? "entries"} yet.`)}
                                         </CommandPrimitive.Empty>
                                     )}
                                     <CommandPrimitive.Group>

package/src/components/SearchIconsView.tsx

@@ -4,9 +4,8 @@ import {
     coolIconKeys,
     debounce,
     IconButton,
-    iconKeys,
     iconSize,
-    lucideIcons,
+    LucideIconByName,
     SearchBar,
     Tooltip
 } from "@rebasepro/ui";
@@ -15,20 +14,6 @@ import { useTranslation } from "@rebasepro/app";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
-
-function toPascalCase(str: string): string {
-    return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join("");
-}
-
-function resolveIcon(iconKey: string): React.ComponentType<{ size: number }> | null {
-    const allIcons = lucideIcons as Record<string, React.ComponentType<{ size: number }>>;
-    let icon = allIcons[iconKey];
-    if (!icon) {
-        icon = allIcons[toPascalCase(iconKey)];
-    }
-    return icon ?? null;
-}
-
 export interface SearchIconsProps {
     selectedIcon?: string;
     onIconSelected?: (icon: string) => void;
@@ -74,23 +59,19 @@ export function SearchIconsView({
             />
 
             <div className={"flex max-w-full flex-wrap mt-4"}>
-                {icons.map((icon: string) => {
-                    const LucideIcon = resolveIcon(icon);
-                    if (!LucideIcon) return null;
-                    return (
-                        <Tooltip title={icon} key={icon}
-                            asChild={true}>
-                            <IconButton
-                                shape={"square"}
-                                toggled={selectedIcon === icon}
-                                onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
-                                className="box-content m-1"
-                            >
-                                <LucideIcon size={iconSize.medium}/>
-                            </IconButton>
-                        </Tooltip>
-                    );
-                })}
+                {icons.map((icon: string) => (
+                    <Tooltip title={icon} key={icon}
+                        asChild={true}>
+                        <IconButton
+                            shape={"square"}
+                            toggled={selectedIcon === icon}
+                            onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
+                            className="box-content m-1"
+                        >
+                            <LucideIconByName name={icon} size={iconSize.medium}/>
+                        </IconButton>
+                    </Tooltip>
+                ))}
             </div>
         </>
     );

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -190,6 +190,7 @@ export function StringNumberFilterField({
 
                 {!enumValues && <TextField
                     size={"medium"}
+                    aria-label={`${title ?? name} filter value`}
                     type={type === "number" ? "number" : undefined}
                     value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
                     disabled={isNullOperation}

package/src/components/UserSelector.tsx

@@ -23,6 +23,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { User } from "@rebasepro/types";
 import { apiBaseOf, useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/app";
 import { EmptyValue } from "../preview";
+import { useResolvedUser } from "../hooks/useResolvedUsers";
 
 interface UserSelectorItem {
     uid: string;
@@ -46,10 +47,19 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number }
     const [currentSearch, setCurrentSearch] = useState("");
     const offsetRef = useRef(0);
     const userCacheRef = useRef<Map<string, User>>(new Map());
+    // Stamped by every request; only the newest one is allowed to write state.
+    // Typing "alice" issues one request per keystroke and nothing cancels them,
+    // so the response for "al" landing after the response for "alice" replaced
+    // the list — and `offsetRef` — with results for a string the user had
+    // already moved past. Same shape as `useRelationSelector`.
+    const requestIdRef = useRef(0);
+    const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     const fetchUsers = useCallback(async (searchStr: string, offset: number, append: boolean) => {
         const apiBase = apiBaseOf(client);
         if (!apiBase) return;
+        const requestId = ++requestIdRef.current;
+        const superseded = () => requestId !== requestIdRef.current;
         setIsLoading(true);
         try {
             const token = await getAuthToken?.();
@@ -68,6 +78,7 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number }
             });
             if (!response.ok) throw new Error("Failed to fetch users");
             const data = await response.json();
+            if (superseded()) return;
             const rows: Record<string, unknown>[] = data.data ?? data.users ?? [];
             const newItems: UserSelectorItem[] = rows.map((r: Record<string, unknown>) => {
                 const user: User = {
@@ -88,9 +99,10 @@ user };
             setHasMore(newItems.length >= pageSize);
             offsetRef.current = offset + newItems.length;
         } catch {
+            if (superseded()) return;
             setHasMore(false);
         } finally {
-            setIsLoading(false);
+            if (!superseded()) setIsLoading(false);
         }
     }, [client?.baseUrl, client?.apiPath, getAuthToken, pageSize]);
 
@@ -100,11 +112,23 @@ user };
     }, [fetchUsers]);
 
     const search = useCallback((searchStr: string) => {
-        setCurrentSearch(searchStr);
-        offsetRef.current = 0;
-        fetchUsers(searchStr, 0, false);
+        // Debounced like the relation picker's type-ahead: a request per
+        // keystroke is both wasteful and the thing that makes an out-of-order
+        // response likely in the first place.
+        if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+        searchTimeoutRef.current = setTimeout(() => {
+            setCurrentSearch(searchStr);
+            offsetRef.current = 0;
+            fetchUsers(searchStr, 0, false);
+        }, searchStr.trim() ? 300 : 0);
     }, [fetchUsers]);
 
+    useEffect(() => {
+        return () => {
+            if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+        };
+    }, []);
+
     const loadMore = useCallback(() => {
         fetchUsers(currentSearch, offsetRef.current, true);
     }, [fetchUsers, currentSearch]);
@@ -200,9 +224,19 @@ export const UserSelector = React.forwardRef<
         const selectedUser: User | null = value ? getUser(value) ?? null : null;
 
         // If the user isn't in the cache, try to find in available items
-        const resolvedUser: User | null = selectedUser
+        const listedUser: User | null = selectedUser
             ?? (value ? availableItems.find(i => i.uid === value)?.user ?? null : null);
 
+        // Neither the loaded page nor the cache holds it: ask for that uid
+        // specifically. The list is one page of ten, so any installation with
+        // more users than that rendered an assigned field as *empty* — and an
+        // editor who is shown "no value" sets one, overwriting an assignment
+        // the UI never admitted was there. Lookups are coalesced and cached
+        // per API base by `useResolvedUser`, so a table of these costs one
+        // request.
+        const fetchedUser = useResolvedUser(value && !listedUser ? value : undefined);
+        const resolvedUser: User | null = listedUser ?? fetchedUser;
+
         // IntersectionObserver for infinite scroll
         const sentinelCallbackRef = useCallback((node: HTMLDivElement | null) => {
             if (observerRef.current) {
@@ -342,6 +376,14 @@ export const UserSelector = React.forwardRef<
                                     <div className="flex flex-row items-center gap-1 truncate flex-1 min-w-0 mr-2">
                                         <UserDisplay user={resolvedUser}/>
                                     </div>
+                                ) : value ? (
+                                    // A uid we could not resolve — deleted, or
+                                    // hidden from this viewer. Show it raw: the
+                                    // placeholder here would claim the field is
+                                    // unset, which is the one thing it is not.
+                                    <span className="text-sm truncate text-text-primary dark:text-text-primary-dark">
+                                        {value}
+                                    </span>
                                 ) : (
                                     <span className="text-sm text-text-secondary dark:text-text-secondary-dark">
                                         {resolvedPlaceholder}