@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/src/FrappeListView.tsx

@@ -2,6 +2,7 @@ import { useDocTypeMeta } from "@multiplatform.one/frappe";
 import type { DataTableColumn } from "@multiplatform.one/table";
 import {
   ArrowsClockwiseIcon,
+  DiceFiveIcon,
   HeartIcon,
   ImageIcon,
   ListIcon,
@@ -26,9 +27,15 @@ import {
   ViewSwitcher,
   componentColors,
   showToast,
+  type DropdownMenuEntry,
   type ImageGridProps,
 } from "@multiplatform.one/components";
-import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  containerCapProps,
+  pressTargetStyle,
+  useLayoutSizeClass,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { storage } from "@multiplatform.one/store";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeList, type FrappeListProps } from "./FrappeList";
@@ -42,17 +49,21 @@ import { isPermissionError } from "./liveErrors";
 import { favoritesKey } from "./list/favorites";
 import { RecordCard } from "./list/RecordCard";
 import { recordTitle, type FrappeRecordLook } from "./list/recordLook";
-import { ListControls } from "./list/ListControls";
+import { ListControls, type ListControlsProps } from "./list/ListControls";
+import { ListControlsSheet } from "./list/ListControlsSheet";
 import {
   isListNarrowed,
   listStateFilters,
   listStateOrderBy,
   type FrappeListControls,
+  type FrappeListBand,
   type FrappeListFacet,
   type FrappeListFilter,
   type FrappeListRange,
   type FrappeListSort,
 } from "./list/listState";
+import { ListFilterPanel } from "./list/ListFilterPanel";
+import { ListSidebarToolbar } from "./list/ListSidebarToolbar";
 import { ListToastHost } from "./list/ListToastHost";
 import { ShufflePanel } from "./list/ShufflePanel";
 import { useListControls } from "./list/useListControls";
@@ -189,6 +200,15 @@ export interface FrappeListViewProps<TDoc extends { name: string; doctype: strin
   facets?: readonly FrappeListFacet[];
   /** One minimum-value slider per numeric field. */
   ranges?: readonly FrappeListRange[];
+  /** One choice of named spans per numeric field (a Pokédex generation). */
+  bands?: readonly FrappeListBand[];
+  /**
+   * Where a routed list's filters live. `band` (default): a band above the
+   * results. `sidebar`: the page's one sidebar beside the header and
+   * results from `md` up; below it a Filters button opens the same filters
+   * in a bottom sheet and the header's secondary actions move to a ⋯ menu.
+   */
+  filterPlacement?: "band" | "sidebar";
   /**
    * Star records on this device and filter to them: true keys the stars by
    * doctype, a string names the storage key.
@@ -201,6 +221,14 @@ export interface FrappeListViewProps<TDoc extends { name: string; doctype: strin
    * refresh or a shared link reproduces the list.
    */
   urlState?: boolean;
+  /**
+   * `sheet` folds sort, favorites, facets and ranges into a Filters sheet
+   * behind a counted button, with the view switch beside the active-filter
+   * chips instead of in the page header (the phone layout). A routed list
+   * with `filterPlacement="sidebar"` already opens its filters in a phone
+   * sheet, so the sidebar wins and this layout applies only without it.
+   */
+  controlsLayout?: "band" | "sheet";
   baseURL?: string;
   auth?: { useToken?: boolean; token?: string; type?: string };
   syncOptions?: Record<string, unknown>;
@@ -307,9 +335,12 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
   searchPlaceholder,
   facets,
   ranges,
+  bands,
+  filterPlacement = "band",
   favorites,
   shuffle,
   urlState = false,
+  controlsLayout = "band",
   baseURL,
   auth,
   syncOptions,
@@ -547,11 +578,12 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
     sorts,
     facets,
     ranges,
+    bands,
     views: hasCards ? ["grid", "list", "table"] : ["list", "table"],
     defaultView: defaultViewMode,
   };
   const hasControls = Boolean(
-    sorts?.length || facets?.length || ranges?.length || favorites || shuffle,
+    sorts?.length || facets?.length || ranges?.length || bands?.length || favorites || shuffle,
   );
   const favoritesStorageKey = favorites
     ? typeof favorites === "string"
@@ -566,7 +598,7 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
     limit,
     favoritesKey: favoritesStorageKey,
     router: urlState ? router : undefined,
-    readBase: Boolean(subtitle || facets?.length || ranges?.length),
+    readBase: Boolean(subtitle || facets?.length || ranges?.length || bands?.length),
   });
   const updateList = list.update;
 
@@ -592,6 +624,7 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
   const controlsKey = JSON.stringify({
     facets: facets?.map((facet) => [facet.param, facet.field, facet.doctype]),
     ranges: ranges?.map((range) => [range.param, range.field]),
+    bands: bands?.map((band) => [band.param, band.field, band.options]),
     sorts: sorts?.map((sort) => [sort.value, sort.orderBy]),
   });
   const controlFilters = useMemo(() => {
@@ -834,20 +867,70 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
   }, [searchId, showSearch]);
 
   const headerOwnsTools = route !== undefined && !showToolbar;
+  // responsive-parity: below md these actions move to ListSidebarToolbar's ⋯ menu.
+  const sidebarFilters = filterPlacement === "sidebar" && route !== undefined && hasControls;
+  const secondaryHidden = sidebarFilters ? { "$max-md": { display: "none" as const } } : {};
+  // The sidebar's phone sheet already folds the filters away, so the Filters
+  // sheet layout applies only to a list without one (one sheet per page).
+  const sheetControls = hasControls && controlsLayout === "sheet" && !sidebarFilters;
+  // On the house compact class the view switcher leaves the page header for
+  // the list's one control row, icon-only (§ ListControls rows).
+  const compact = useLayoutSizeClass() === "compact";
+  const switcherOnControls =
+    headerOwnsTools && compact && hasControls && !sidebarFilters && !sheetControls;
+  // The Filters sheet layout draws the view switch beside its chips instead.
+  const headerOwnsViews = headerOwnsTools && !switcherOnControls && !sheetControls;
   const pressFor = (action: FrappeListAction) =>
     action.onPress ?? (action.href && navigate ? () => navigate(action.href as string) : undefined);
+  const viewChoices: Array<{ type: ListViewMode; label: string; icon: typeof ImageIcon }> = [
+    ...(hasCards ? [{ type: "grid" as const, label: t("Cards"), icon: ImageIcon }] : []),
+    { type: "list", label: t("List"), icon: ListIcon },
+    { type: "table", label: t("Table"), icon: TableIcon },
+  ];
+  const menuItems: DropdownMenuEntry[] = sidebarFilters
+    ? [
+        ...(actions ?? []).map((action) => {
+          const Icon = action.icon;
+          return {
+            key: `action-${action.label}`,
+            label: action.label,
+            icon: Icon ? <Icon size={16} /> : undefined,
+            onSelect: pressFor(action),
+          };
+        }),
+        ...(shuffle
+          ? [
+              {
+                key: "shuffle",
+                label: t("Surprise me"),
+                icon: <DiceFiveIcon size={16} />,
+                onSelect: () => setShuffleOpen((open) => !open),
+              },
+            ]
+          : []),
+        ...(headerOwnsTools
+          ? [
+              ...((actions?.length ?? 0) > 0 || shuffle ? [{ separator: true as const }] : []),
+              ...viewChoices.map((view) => ({
+                key: `view-${view.type}`,
+                label: view.label,
+                icon: <view.icon size={16} />,
+                checked: viewMode === view.type,
+                closeOnSelect: true,
+                onSelect: () => setViewMode(view.type),
+              })),
+            ]
+          : []),
+      ]
+    : [];
   const headerActions =
-    headerOwnsTools || headerAccessory || actions?.length ? (
+    headerOwnsViews || (headerOwnsTools && onAdd) || headerAccessory || actions?.length ? (
       <XStack {...knobProps.gap} alignItems="center" flexWrap="wrap" flexShrink={1} minWidth={0}>
-        {headerOwnsTools ? (
+        {headerOwnsViews ? (
           <Tooltip content={t("Switch views")}>
-            <XStack>
+            <XStack {...secondaryHidden}>
               <ViewSwitcher
-                views={[
-                  ...(hasCards ? [{ type: "grid", label: t("Cards"), icon: ImageIcon }] : []),
-                  { type: "list", label: t("List"), icon: ListIcon },
-                  { type: "table", label: t("Table"), icon: TableIcon },
-                ]}
+                views={viewChoices}
                 currentView={viewMode}
                 onViewChange={(v) => setViewMode(v as ListViewMode)}
               />
@@ -858,9 +941,26 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
         {actions?.map((action) => {
           const Icon = action.icon;
           const onPress = pressFor(action);
+          if (sidebarFilters) {
+            return (
+              <XStack key={action.label} {...secondaryHidden}>
+                <Tooltip content={action.hint ?? action.label}>
+                  <Button
+                    outlined
+                    onPress={onPress}
+                    icon={Icon ? <Icon size={16} /> : undefined}
+                    testID={action.testID}
+                  >
+                    {action.label}
+                  </Button>
+                </Tooltip>
+              </XStack>
+            );
+          }
           return (
             <React.Fragment key={action.label}>
               <Tooltip content={action.hint ?? action.label}>
+                {/* responsive-parity: the circular icon twin below carries this action on phones */}
                 <Button
                   outlined
                   onPress={onPress}
@@ -885,6 +985,7 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
         })}
         {headerOwnsTools && onAdd ? (
           <>
+            {/* responsive-parity: the short "Add" twin below carries this action on phones */}
             <Button
               theme="accent"
               onPress={onAdd}
@@ -907,43 +1008,82 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
       </XStack>
     ) : undefined;
 
-  const controlsBand = hasControls ? (
-    <ListControls
+  const shufflePanel =
+    shuffle && shuffleOpen && shuffleRows.length > 0 && drawCard ? (
+      <ShufflePanel<Partial<TDoc>>
+        id={`${slug}-shuffle-panel`}
+        label={t("Surprise me")}
+        rows={shuffleRows}
+        itemLabel={shuffle.label}
+        renderPick={(doc) => drawCard(doc, 0)}
+        onGo={(doc) => {
+          setShuffleOpen(false);
+          onItemClick?.(doc);
+        }}
+        testID={`${slug}-shuffle-panel`}
+      />
+    ) : null;
+  const shuffleToggle = shuffle
+    ? {
+        open: shuffleOpen,
+        toggle: () => setShuffleOpen((open) => !open),
+        panelId: `${slug}-shuffle-panel`,
+      }
+    : undefined;
+  const controlsProps: ListControlsProps = {
+    controls: listControls,
+    list,
+    searchId,
+    searchPlaceholder,
+    showSearch,
+    showFavorites: Boolean(favoritesStorageKey),
+    shuffle: shuffleToggle,
+    shufflePanel,
+    separator: !surface,
+    testID: slug,
+  };
+  const filterSidebar = sidebarFilters ? (
+    <ListFilterPanel
+      controls={listControls}
+      list={list}
+      showFavorites={Boolean(favoritesStorageKey)}
+      testID={`${slug}-sidebar`}
+    />
+  ) : undefined;
+  const controlsBand = sidebarFilters ? (
+    <ListSidebarToolbar
       controls={listControls}
       list={list}
       searchId={searchId}
       searchPlaceholder={searchPlaceholder}
       showSearch={showSearch}
       showFavorites={Boolean(favoritesStorageKey)}
-      shuffle={
-        shuffle
-          ? {
-              open: shuffleOpen,
-              toggle: () => setShuffleOpen((open) => !open),
-              panelId: `${slug}-shuffle-panel`,
-            }
-          : undefined
-      }
-      shufflePanel={
-        shuffle && shuffleOpen && shuffleRows.length > 0 && drawCard ? (
-          <ShufflePanel<Partial<TDoc>>
-            id={`${slug}-shuffle-panel`}
-            label={t("Surprise me")}
-            rows={shuffleRows}
-            itemLabel={shuffle.label}
-            renderPick={(doc) => drawCard(doc, 0)}
-            onGo={(doc) => {
-              setShuffleOpen(false);
-              onItemClick?.(doc);
-            }}
-            testID={`${slug}-shuffle-panel`}
+      shuffle={shuffleToggle}
+      shufflePanel={shufflePanel}
+      menuItems={menuItems}
+      testID={slug}
+    />
+  ) : !hasControls ? null : sheetControls ? (
+    <ListControlsSheet
+      {...controlsProps}
+      view={{ current: viewMode, onChange: setViewMode }}
+      noun={title ?? doctype}
+    />
+  ) : (
+    <ListControls
+      {...controlsProps}
+      compactAccessory={
+        switcherOnControls ? (
+          <ViewSwitcher
+            views={viewChoices.map((view) => ({ ...view, iconOnly: true }))}
+            currentView={viewMode}
+            onViewChange={(v) => setViewMode(v as ListViewMode)}
+            testID={`${slug}-view-switcher`}
           />
-        ) : null
+        ) : undefined
       }
-      separator={!surface}
-      testID={slug}
     />
-  ) : null;
+  );
 
   const asPage = (view: React.ReactElement) => {
     const extras = (
@@ -974,9 +1114,13 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
         </>
       );
     }
+    // The page owns the scroll in both chromes: once the last page lands the
+    // list hugs every row, so a non-scrolling page would strand the rows below
+    // the fold (§ List scroll owner).
     return (
       <ListPageLayout
-        scroll={!surface}
+        sidebar={filterSidebar}
+        sidebarLabel={t("Filters")}
         header={
           <>
             {controlsBand ? <SkipLink targetId={resultsId}>{t("Skip to results")}</SkipLink> : null}
@@ -1187,7 +1331,6 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
           debounceMs={300}
           placeholder={t("Search...")}
           aria-label={t("Search {{doctype}}", { doctype })}
-          compact
           size="$3"
         />
       </View>
@@ -1280,7 +1423,10 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
       flex={viewMode === "grid" ? undefined : 1}
       {...(surface ? knobProps.surface : {})}
       {...(surface ? knobProps.containerRadius : {})}
-      overflow={surface ? "hidden" : undefined}
+      // No overflow clip on the card: it would cut the rows the page scroll
+      // must reach. The radius is the container cap — rows round only at the
+      // group's outer corners, capped at the row padding (DG-RAD-04).
+      {...(surface ? containerCapProps("PageSection", knobProps.borderRadius.borderRadius) : {})}
       testID={`${doctype.toLowerCase()}-list`}
       {...(hasControls ? { id: resultsId } : {})}
       {...stackProps}

package/src/FrappeReconnectIndicator.stories.tsx

@@ -23,7 +23,7 @@ const config: FrappeReconnectIndicatorProps["config"] = {
 };
 
 export const Default = () => (
-  <YStack gap="$3" width={420}>
+  <YStack gap="$3" width={420} maxWidth="100%">
     <Text fontSize="$2" color="$color10">
       Never-connected (fixtures, SSR): paints nothing.
     </Text>
@@ -43,7 +43,7 @@ export const Reconnecting = () => (
 );
 
 export const Connected = () => (
-  <YStack gap="$3" width={420}>
+  <YStack gap="$3" width={420} maxWidth="100%">
     <Text fontSize="$2" color="$color10">
       Socket up: the chip is gone.
     </Text>

package/src/FrappeRecordView.spec.tsx

@@ -173,19 +173,47 @@ function renderRecord(name: string, navigate = vi.fn()) {
   );
 }
 
+/** Opens the top bar's menu and finds one of its items by its label. */
+async function menuItem(label: string): Promise<HTMLElement> {
+  fireEvent.click(await screen.findByTestId("pokemon-detail-more", {}, { timeout: 5000 }));
+  return waitFor(() => {
+    const item = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).find(
+      (node) => node.textContent?.includes(label),
+    );
+    expect(item).toBeTruthy();
+    return item as HTMLElement;
+  });
+}
+
 async function identity(): Promise<HTMLElement> {
   return screen.findByTestId("pokemon-hero-identity", {}, { timeout: 5000 });
 }
 
 describe("FrappeRecordView heads the record from its look and facet", () => {
-  it("names the record by code, title and subtitle under the list's breadcrumb", async () => {
+  it("names the record by code, title and subtitle under Back to the list", async () => {
     renderRecord("bulbasaur");
     const hero = await identity();
+    expect(within(hero).getByRole("heading", { level: 1 }).textContent).toBe("BULBASAUR");
     expect(hero.textContent).toContain("#001");
-    expect(hero.textContent).toContain("BULBASAUR");
     expect(hero.textContent).toContain("Seed Pokémon");
-    expect(screen.getByText("Roster")).toBeTruthy();
-    expect(screen.getByText("#001 BULBASAUR")).toBeTruthy();
+    const back = screen.getByTestId("pokemon-detail-back");
+    expect(screen.getByTestId("pokemon-detail-header").contains(back)).toBe(true);
+    expect(back.textContent).toContain("Roster");
+    expect(back.getAttribute("aria-label")).toBe("Back to Roster");
+  });
+
+  it("stacks the top bar, the art stage, the identity and the tabs in that order", async () => {
+    renderRecord("bulbasaur");
+    const hero = await identity();
+    const header = screen.getByTestId("pokemon-detail-header");
+    const stage = screen.getByTestId("pokemon-detail-stage");
+    const tabs = screen.getAllByRole("tab")[0];
+    const follows = (a: Node, b: Node) =>
+      Boolean(a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING);
+    expect(follows(header, stage)).toBe(true);
+    expect(follows(stage, hero)).toBe(true);
+    expect(follows(hero, tabs)).toBe(true);
+    expect(stage.contains(screen.getByTestId("pokemon-hero-art"))).toBe(true);
   });
 
   it("badges the facet's values in slot order and draws the first image", async () => {
@@ -198,12 +226,13 @@ describe("FrappeRecordView heads the record from its look and facet", () => {
     expect(art.querySelector("img")?.getAttribute("src")).toBe("https://art.spec.test/1.png");
   });
 
-  it("tiles each metric, a max adding a bar", async () => {
+  it("states each metric as a label over its value, with no tile or bar", async () => {
     renderRecord("bulbasaur");
     const hero = await identity();
-    expect(hero.textContent).toContain("Base XP");
-    expect(hero.textContent).toContain("64");
-    expect(within(hero).getByLabelText("Base XP")).toBeTruthy();
+    const fact = within(hero).getByTestId("record-vital-base_experience");
+    expect(fact.textContent).toBe("Base XP64");
+    expect(fact.getAttribute("data-record-metric")).toBe("base_experience");
+    expect(within(hero).queryByRole("progressbar")).toBeNull();
   });
 });
 
@@ -214,15 +243,19 @@ describe("FrappeRecordView tabs the record's rows", () => {
     expect(await screen.findByText("pikachu, the Mouse Pokémon.")).toBeTruthy();
     await waitFor(() => expect(screen.getByText("lightning rod")).toBeTruthy());
     expect(screen.getAllByText("Hidden")).toHaveLength(1);
-    expect(screen.getByText("Record history")).toBeTruthy();
+    expect(screen.getByText("History")).toBeTruthy();
+    expect(screen.getByTestId("pokemon-history").textContent).toContain("Created by");
   });
 
   it("draws a child table as bars on a fixed scale with their total", async () => {
     renderRecord("pikachu");
     await identity();
-    expect(await screen.findByTestId("pokemon-stats-chart")).toBeTruthy();
-    expect(screen.getByText("Stat total")).toBeTruthy();
-    expect(screen.getByText("125")).toBeTruthy();
+    const chart = await screen.findByTestId("pokemon-stats-chart");
+    expect(within(chart).getByText("Stat total")).toBeTruthy();
+    expect(within(chart).getByText("125")).toBeTruthy();
+    const meters = within(chart).getAllByRole("meter");
+    expect(meters.length).toBeGreaterThan(0);
+    for (const meter of meters) expect(meter.getAttribute("aria-valuemax")).toBe("255");
   });
 
   it("badges a tab with its rows' count and groups them, detailed", async () => {
@@ -249,7 +282,7 @@ describe("FrappeRecordView's controls", () => {
     expect(navigate).toHaveBeenCalledWith("/pokemon/gengar");
     fireEvent.click(screen.getByTestId("pokemon-prev"));
     expect(navigate).toHaveBeenCalledWith("/pokemon/squirtle");
-    fireEvent.click(screen.getByTestId("pokemon-detail-edit"));
+    fireEvent.click(await menuItem("Edit"));
     expect(navigate).toHaveBeenCalledWith("/pokemon/pikachu/edit");
   });
 
@@ -262,7 +295,7 @@ describe("FrappeRecordView's controls", () => {
     expect(heart.getAttribute("aria-pressed")).toBe("false");
     fireEvent.click(heart);
     await waitFor(() => expect(favoritesStore(favoritesKey).state.names).toEqual(["pikachu"]));
-    fireEvent.click(screen.getByTestId("hop"));
+    fireEvent.click(await menuItem("Open in backoffice"));
     expect(navigate).toHaveBeenCalledWith("/backoffice/pokemon/pikachu");
   });
 

package/src/FrappeRecordView.tsx

@@ -1,8 +1,6 @@
-import { EmptyState, Screen, ScreenToolbar, YStack } from "@multiplatform.one/components";
+import { EmptyState, Screen } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import type { Order } from "@multiplatform.one/frappe";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ArrowLeftIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { FrappeConnection } from "./frappeConnections";
@@ -15,8 +13,13 @@ import { orderRows } from "./insights/insightsData";
 import type { FrappeInsightsMetric } from "./insights/insightsRecord";
 import type { FrappeListFacet } from "./list/listState";
 import type { FrappeRecordLook } from "./list/recordLook";
-import { RecordBreadcrumbBone, RecordSkeleton } from "./record/RecordHero";
-import { RecordPage, type FrappeRecordAction, type RecordPageProps } from "./record/RecordPage";
+import { RecordSkeleton } from "./record/RecordHero";
+import {
+  RecordPage,
+  RecordTopBar,
+  type FrappeRecordAction,
+  type RecordPageProps,
+} from "./record/RecordPage";
 import type { FrappeRecordTab } from "./record/recordSections";
 import { useFrappeConnection, useFrappeRows } from "./useFrappeRows";
 
@@ -70,11 +73,11 @@ export interface FrappeRecordViewProps<TDoc extends { name: string; doctype: str
 const noTabs: readonly FrappeRecordTab[] = [];
 
 /**
- * A doctype's record page, read first: the list's breadcrumb and Back, the
- * favorite heart, the record's hops and Edit under the write right; a hero
- * with the record's images, code, title, subtitle, facet badges and metric
- * tiles, tinted by the facet; tabs of linked rows and child-table bars with
- * the audit trail; and the records either side of it in the list's order.
+ * A doctype's record page, read first: Back to the list, the favorite heart
+ * and a menu of the record's hops and Edit under the write right; the art on
+ * a stage tinted by the facet, then the code, facet badges, title, subtitle
+ * and metric facts; tabs of linked rows and child-table bars with the audit
+ * trail; and the records either side of it in the list's order.
  * FrappeForm reads the record and its connections live; loading, not found
  * and error keep the page's wayfinding.
  */
@@ -101,7 +104,6 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
   testID,
 }: FrappeRecordViewProps<TDoc>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
   const config = useFrappeConfig();
   const connection = useFrappeConnection();
   const router = useFrappeRouter();
@@ -126,19 +128,7 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
   if (!config?.baseURL && !config?.fixtures) return <FrappeNotConfigured doctype={doctype} page />;
 
   const backButton = (
-    <ScreenToolbar
-      leading={
-        <Button
-          outlined
-          minHeight={knobProps.sizeToken}
-          onPress={() => navigate(route)}
-          icon={<ArrowLeftIcon size={16} />}
-          testID={`${slug}-detail-back`}
-        >
-          {t("Back")}
-        </Button>
-      }
-    />
+    <RecordTopBar listName={listName} onBack={() => navigate(route)} slug={slug} />
   );
 
   return (
@@ -151,16 +141,13 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
       showSidebar={false}
       showTimeline={false}
       loadingFallback={
-        <Screen>
-          <YStack gap="$2">
-            <RecordBreadcrumbBone />
-            {backButton}
-          </YStack>
+        <Screen noPadding gap={0}>
+          {backButton}
           <RecordSkeleton testID={`${slug}-detail-skeleton`} />
         </Screen>
       }
       notFoundFallback={
-        <Screen scroll={false}>
+        <Screen scroll={false} noPadding gap={0}>
           {backButton}
           <EmptyState
             title={t("{{doctype}} not found", { doctype })}
@@ -174,7 +161,7 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
         </Screen>
       }
       errorFallback={
-        <Screen scroll={false}>
+        <Screen scroll={false} noPadding gap={0}>
           {backButton}
           <EmptyState
             intent="error"