@multiplatform.one/frappe-ui 7.34.4 → 7.35.0

package/src/FrappeForm.tsx

@@ -10,6 +10,7 @@ import {
   DetailPageLayout,
   EmptyState,
   PageHeader,
+  ScrollView,
   Tabs,
   type TabsItem,
 } from "@multiplatform.one/components";
@@ -23,7 +24,7 @@ import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import { Button, Input, formCommonColors } from "@multiplatform.one/forms";
 import { Text, XStack, YStack } from "tamagui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
 import { Timeline } from "./components/timeline";
@@ -36,7 +37,7 @@ import {
   resolveDocAction,
   resolveDocIndicator,
 } from "./formEngine/docLifecycle";
-import { FrappeFormActions } from "./FrappeFormActions";
+import { FrappeFormActions, FrappeFormActionsBar, FrappeFormIndicator } from "./FrappeFormActions";
 import { connectionFields, connectionsFromMeta, type FrappeConnection } from "./frappeConnections";
 import { FrappeFormConnections } from "./FrappeFormConnections";
 import { FrappeNotConfigured } from "./FrappeNotConfigured";
@@ -172,6 +173,18 @@ export interface FrappeFormProps<TDoc extends { name: string; doctype: string }>
   renderFieldWrapper?: SchemaFormProps["renderFieldWrapper"];
   /** Wraps each laid-out tab's body. */
   renderTab?: (tab: FormTab, content: React.ReactNode) => React.ReactNode;
+  /**
+   * `flat`: sections drop their card on phones and run full width under
+   * caps labels, columns hug their fields on wider screens and number
+   * fields hug their value. Defaults to `flat` on a routed page, `cards`
+   * elsewhere.
+   */
+  layout?: SchemaFormProps["layout"];
+  /**
+   * The action bar sticks to the bottom of the viewport while the form
+   * scrolls. Defaults to on for a routed page.
+   */
+  stickyActions?: boolean;
 }
 
 /**
@@ -447,6 +460,8 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
   extraTabs,
   renderFieldWrapper,
   renderTab,
+  layout: layoutProp,
+  stickyActions: stickyActionsProp,
   loadingFallback,
   notFoundFallback,
   errorFallback,
@@ -454,6 +469,10 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
 }: FrappeFormBodyProps<TDoc> & { form: FrappeFormController<TDoc> }) {
   const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation();
+  // A routed page is the record's own screen: flat sections and a Save
+  // bar that stays in reach.
+  const layout = layoutProp ?? (routePage ? "flat" : "cards");
+  const stickyActions = stickyActionsProp ?? Boolean(routePage);
   const {
     meta,
     metaLoading: isMetaLoading,
@@ -605,8 +624,64 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
   const titleField = meta?.title_field;
   const titleValue = titleField ? (localDoc as Record<string, unknown>)[titleField] : undefined;
   const pageTitle = isCreate ? t("New {{doctype}}", { doctype }) : String(titleValue || name);
-  const frame = (content: React.ReactNode, aside?: React.ReactNode) =>
-    routePage ? (
+  const editing = Boolean(routePage) && !onEdit;
+  const frame = (
+    content: React.ReactNode,
+    aside?: React.ReactNode,
+    chrome?: { badge?: React.ReactNode; footer?: React.ReactNode },
+  ) =>
+    routePage && editing ? (
+      <YStack flex={1} backgroundColor="$background" testID="frappe-form-route-editor">
+        <XStack alignItems="center" gap="$2" paddingHorizontal="$2" paddingVertical="$1">
+          <XStack flex={1} flexBasis={0} justifyContent="flex-start">
+            <Button
+              chromeless
+              onPress={onCancel ? handleCancel : routePage.onBack}
+              aria-label={onCancel ? undefined : t("Back to {{doctype}} list", { doctype })}
+            >
+              {t("Cancel")}
+            </Button>
+          </XStack>
+          <Text
+            flexShrink={1}
+            textAlign="center"
+            numberOfLines={1}
+            fontSize="$5"
+            fontWeight="600"
+            color="$color"
+            role="heading"
+            aria-level={1}
+          >
+            {isCreate ? pageTitle : t("Edit {{title}}", { title: pageTitle })}
+          </Text>
+          <XStack flex={1} flexBasis={0} justifyContent="flex-end" paddingRight="$2">
+            {chrome?.badge}
+          </XStack>
+        </XStack>
+        <ScrollView flex={1} contentContainerStyle={{ flexGrow: 1 }}>
+          <YStack paddingHorizontal="$4" paddingTop="$3" paddingBottom="$6" gap="$5">
+            {content}
+          </YStack>
+        </ScrollView>
+        {/* The footer is the editor's one Save bar. Sticky (the routed
+            default), it also pins on a scroll-flow web page; the sticky
+            bar then draws the top rule and the bottom inset. */}
+        {chrome?.footer ? (
+          <FrappeFormActionsBar sticky={stickyActions}>
+            <XStack
+              paddingHorizontal="$4"
+              paddingTop="$3"
+              paddingBottom={stickyActions ? 0 : "$3"}
+              borderTopWidth={stickyActions ? 0 : hairlineWidth}
+              borderColor="$borderColor"
+              backgroundColor="$background"
+            >
+              {chrome.footer}
+            </XStack>
+          </FrappeFormActionsBar>
+        ) : null}
+      </YStack>
+    ) : routePage ? (
       // flexBasis auto: see DeskFormPage (react-native-web's min-height:0
       // reset would cap the scroll page at viewport height).
       <DetailPageLayout
@@ -778,6 +853,7 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
         sectionHeadingLevel={sectionHeadingLevel}
         order={order}
         renderFieldWrapper={renderFieldWrapper}
+        layout={layout}
       />
     );
     return {
@@ -935,9 +1011,41 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
             </Text>
           )}
 
-          {toolbarShown && (
+          {/* A routed editor carries its actions in the page footer instead. */}
+          {toolbarShown && !editing && (
+            <FrappeFormActionsBar sticky={stickyActions}>
+              <FrappeFormActions
+                indicator={indicator}
+                action={docAction}
+                busy={isSubmitting}
+                disabled={effectiveDisabled}
+                onSave={handleSave}
+                onSubmit={handleSubmitDocument}
+                onCancelDocument={handleCancelDocument}
+                onAmend={showAmend ? handleAmend : undefined}
+                amendedAs={amendedAs}
+                onDelete={showDelete ? handleDelete : undefined}
+                onEdit={showEdit ? onEdit : undefined}
+                onClose={showClose ? handleCancel : undefined}
+                closeDisabled={disabled}
+              />
+            </FrappeFormActionsBar>
+          )}
+        </YStack>
+      </XStack>
+
+      {/* Timeline (edit mode only) — live Comment/Version via useFrappeCollection */}
+      {showTimeline && name && !readsWithoutMeta && (
+        <Timeline doctype={doctype} docname={name} label={t("Activity")} />
+      )}
+    </YStack>,
+    routePage && !editing ? sidebar : undefined,
+    editing
+      ? {
+          badge: indicator ? <FrappeFormIndicator indicator={indicator} /> : null,
+          footer: toolbarShown ? (
             <FrappeFormActions
-              indicator={indicator}
+              placement="footer"
               action={docAction}
               busy={isSubmitting}
               disabled={effectiveDisabled}
@@ -947,19 +1055,11 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
               onAmend={showAmend ? handleAmend : undefined}
               amendedAs={amendedAs}
               onDelete={showDelete ? handleDelete : undefined}
-              onEdit={showEdit ? onEdit : undefined}
               onClose={showClose ? handleCancel : undefined}
               closeDisabled={disabled}
             />
-          )}
-        </YStack>
-      </XStack>
-
-      {/* Timeline (edit mode only) — live Comment/Version via useFrappeCollection */}
-      {showTimeline && name && !readsWithoutMeta && (
-        <Timeline doctype={doctype} docname={name} label={t("Activity")} />
-      )}
-    </YStack>,
-    routePage ? sidebar : undefined,
+          ) : null,
+        }
+      : undefined,
   );
 }

package/src/FrappeFormActions.tsx

@@ -1,5 +1,5 @@
 import { Chip, type ChipColor } from "@multiplatform.one/components";
-import { Button } from "@multiplatform.one/forms";
+import { Button, zIndex } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   ArrowCounterClockwiseIcon,
@@ -10,8 +10,9 @@ import {
   TrashIcon,
   XIcon,
 } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { XStack } from "tamagui";
+import { XStack, YStack, isWeb } from "tamagui";
 import type { DocAction, DocStatusIndicator } from "./formEngine/docLifecycle";
 
 const indicatorColors: Record<DocStatusIndicator, ChipColor> = {
@@ -47,6 +48,29 @@ export interface FrappeFormActionsProps {
   /** The host's leave action (discards unsaved edits first). */
   onClose?: () => void;
   closeDisabled?: boolean;
+  /**
+   * `footer` is a routed editor's bottom bar: no state pill (the page header
+   * carries it), the leave button soft and the primary action filling the row.
+   */
+  placement?: "inline" | "footer";
+}
+
+/** Desk's state pill: Not Saved, Draft, Submitted or Cancelled. */
+export function FrappeFormIndicator({ indicator }: { indicator: DocStatusIndicator }) {
+  const { t } = useTranslation();
+  const labels: Record<DocStatusIndicator, string> = {
+    notSaved: t("Not Saved"),
+    draft: t("Draft"),
+    submitted: t("Submitted"),
+    cancelled: t("Cancelled"),
+  };
+  return (
+    <XStack alignItems="center" testID={`frappe-form-status-${indicator}`}>
+      <Chip size="$2" variant="subtle" color={indicatorColors[indicator]}>
+        {labels[indicator]}
+      </Chip>
+    </XStack>
+  );
 }
 
 /**
@@ -69,31 +93,25 @@ export function FrappeFormActions({
   onEdit,
   onClose,
   closeDisabled,
+  placement = "inline",
 }: FrappeFormActionsProps) {
+  const footer = placement === "footer";
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const readOnlyReason = t("Form is read-only");
 
-  const indicatorLabels: Record<DocStatusIndicator, string> = {
-    notSaved: t("Not Saved"),
-    draft: t("Draft"),
-    submitted: t("Submitted"),
-    cancelled: t("Cancelled"),
-  };
-
   return (
     <XStack
       {...knobProps.gap}
       justifyContent="flex-end"
       alignItems="center"
-      paddingTop="$3"
+      paddingTop={footer ? 0 : "$3"}
+      flex={footer ? 1 : undefined}
       testID="frappe-form-actions"
     >
-      {indicator && (
-        <XStack flex={1} alignItems="center" testID={`frappe-form-status-${indicator}`}>
-          <Chip size="$2" variant="subtle" color={indicatorColors[indicator]}>
-            {indicatorLabels[indicator]}
-          </Chip>
+      {indicator && !footer && (
+        <XStack flex={1}>
+          <FrappeFormIndicator indicator={indicator} />
         </XStack>
       )}
 
@@ -114,8 +132,8 @@ export function FrappeFormActions({
 
       {onClose && (
         <Button
-          outlined
-          icon={XIcon}
+          outlined={!footer}
+          icon={footer ? undefined : XIcon}
           disabled={closeDisabled}
           disabledReason={closeDisabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
@@ -186,6 +204,7 @@ export function FrappeFormActions({
         <Button
           accent
           icon={CheckCircleIcon}
+          flex={footer ? 1 : undefined}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
@@ -200,7 +219,8 @@ export function FrappeFormActions({
       {(action === "save" || action === "update") && (
         <Button
           accent
-          icon={FloppyDiskIcon}
+          icon={footer ? undefined : FloppyDiskIcon}
+          flex={footer ? 1 : undefined}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
@@ -214,3 +234,36 @@ export function FrappeFormActions({
     </XStack>
   );
 }
+
+/**
+ * Holds the action bar. Sticky, it pins to the bottom of the scrolling page
+ * on a page surface with a top hairline, so Save stays in reach on a long
+ * form; the page scrolls under it.
+ */
+export function FrappeFormActionsBar({
+  sticky = false,
+  children,
+}: {
+  sticky?: boolean;
+  children: ReactNode;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  if (!sticky) return <>{children}</>;
+  return (
+    <YStack
+      testID="frappe-form-actions-sticky"
+      data-sticky-actions=""
+      backgroundColor="$background"
+      borderTopWidth={knobProps.surface.borderWidth}
+      borderColor="$borderColor"
+      paddingBottom="$3"
+      // Above the form's own stacked content (image tiles, remove discs).
+      zIndex={zIndex.stickyHeader}
+      {...(isWeb
+        ? { style: { position: "sticky", bottom: 0 } as never }
+        : { position: "relative" as const })}
+    >
+      {children}
+    </YStack>
+  );
+}

package/src/FrappeFormConnections.tsx

@@ -94,7 +94,7 @@ export function FrappeFormConnectionSection({
       <YStack {...knobProps.gap}>
         <AsyncBoundary
           layout="table"
-          compact
+          size="$3"
           loading={isLoading}
           error={error}
           errorTitle={

package/src/FrappeKPICard.tsx

@@ -145,7 +145,7 @@ export function FrappeKPICard({
   if (!connection) {
     return (
       <AsyncBoundary
-        compact
+        size="$3"
         error
         errorTitle={t("{{title}} is not configured", { title: config.title })}
         errorDescription={t(
@@ -164,7 +164,7 @@ export function FrappeKPICard({
   if (error) {
     return (
       <AsyncBoundary
-        compact
+        size="$3"
         error={error}
         errorTitle={
           isPermissionError

package/src/FrappeLikedBy.tsx

@@ -273,7 +273,7 @@ function FrappeLikedByBody({
     <YStack {...knobProps.gap} testID="frappe-liked-by" {...stackProps}>
       <FrappeReconnectIndicator config={connectionConfig} />
       <AsyncBoundary
-        compact
+        size="$3"
         loading={!!collection && isLoading}
         error={loadError}
         onRetry={onRetry}

package/src/FrappeListView.controls.spec.tsx

@@ -157,7 +157,9 @@ describe("FrappeListView controls write their state back", () => {
     const setParams = vi.fn();
     renderList({}, {}, navigationAt({}, setParams));
     await waitFor(() => expect(shownCards().length).toBe(6), { timeout: 5000 });
-    fireEvent.click(await screen.findByTestId("pokemon-type-fire"));
+    const chip = await screen.findByTestId("pokemon-type-fire");
+    expect(getComputedStyle(chip).height).toBe("32px");
+    fireEvent.click(chip);
     await expectCards(["charmander"]);
     expect(setParams).toHaveBeenCalledWith({ type: "fire" });
   });
@@ -223,3 +225,44 @@ describe("FrappeListView routed page with its toolbar off", () => {
     expect(navigate).toHaveBeenCalledWith("/pokemon/new");
   });
 });
+
+describe("FrappeListView on the house compact class (§ ListControls rows)", () => {
+  const initialWidth = window.innerWidth;
+  afterEach(() => {
+    window.innerWidth = initialWidth;
+  });
+
+  it("at 390 puts the view switcher icon-only on the one control row, with one chip row under it", async () => {
+    window.innerWidth = 390;
+    renderList({}, { route: "/pokemon", showToolbar: false, title: "Roster" });
+    const band = await screen.findByTestId("pokemon-controls");
+    expect(band.getAttribute("data-controls-layout")).toBe("compact");
+    const row = screen.getByTestId("pokemon-controls-row");
+    const switcher = screen.getByTestId("pokemon-view-switcher");
+    expect(row.contains(switcher)).toBe(true);
+    // Icon-only: the segments keep their names but paint no label text.
+    expect(switcher.textContent).toBe("");
+    expect(switcher.querySelector('[aria-label="List"]')).not.toBeNull();
+    expect(screen.queryByTestId("view-switcher")).toBeNull();
+    expect(row.contains(screen.getByTestId("pokemon-tools"))).toBe(true);
+    expect(band.children).toHaveLength(2);
+    expect(screen.getAllByRole("radiogroup", { name: "Type" })).toHaveLength(1);
+  });
+
+  it("at 700 keeps the switcher in the header and the controls on one row", async () => {
+    window.innerWidth = 700;
+    renderList({}, { route: "/pokemon", showToolbar: false, title: "Roster" });
+    const band = await screen.findByTestId("pokemon-controls");
+    expect(band.getAttribute("data-controls-layout")).toBe("wide");
+    expect(screen.getByTestId("view-switcher")).toBeTruthy();
+    expect(screen.queryByTestId("pokemon-view-switcher")).toBeNull();
+    expect(screen.queryByTestId("pokemon-tools")).toBeNull();
+  });
+
+  it("paints the surface card without an overflow clip, so the page scroll reaches every row", async () => {
+    renderList({}, { route: "/pokemon", surface: true, defaultViewMode: "list" });
+    const card = await screen.findByTestId("pokemon-list");
+    expect(getComputedStyle(card).overflow).not.toBe("hidden");
+    expect(card.getAttribute("data-constraint-container")).toBe("PageSection");
+  });
+});

package/src/FrappeListView.sidebar.spec.tsx

@@ -0,0 +1,225 @@
+// A routed list whose filters live in the page's one sidebar: type facets
+// with counts, a generation band, a base-XP stock slider and favorites
+// beside the results from md up; below md a Filters button wearing the
+// active-filter count opens the same filters (sort included) in a bottom
+// sheet, and the header's secondary actions move to a ⋯ menu.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import i18next from "i18next";
+import { Order } from "@multiplatform.one/frappe";
+import { ChartBarIcon } from "@phosphor-icons/react";
+import { initReactI18next } from "react-i18next";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  createRosterFixtures,
+  rosterPokemonFields,
+  rosterPokemonMeta,
+  type RosterPokemon,
+} from "../tests/fixtures/pokemonRoster";
+import type { FrappeNavigation } from "./frappeNavigation";
+import { FrappeListView } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+import { favoritesStore } from "./list/favorites";
+
+const host = "https://listview-sidebar.spec.test";
+const realFetch = globalThis.fetch;
+const favoritesKey = "sidebar-spec-favorites";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+  globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    if (url.startsWith(host)) {
+      const body = /\/api\/resource\/DocType\//.test(url)
+        ? { data: rosterPokemonMeta }
+        : { data: [] };
+      return new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    return realFetch(input as RequestInfo, init);
+  }) as typeof fetch;
+});
+
+afterAll(() => {
+  globalThis.fetch = realFetch;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  favoritesStore(favoritesKey).setState(() => ({ names: [] }));
+});
+
+function renderList(navigate = vi.fn()) {
+  const navigation: FrappeNavigation = {
+    usePathname: () => "/pokemon",
+    useNavigate: () => navigate,
+  };
+  return renderWithProviders(
+    <FrappeProvider baseURL={host} fixtures={createRosterFixtures()} navigation={navigation}>
+      <FrappeListView<RosterPokemon>
+        doctype="Pokemon"
+        route="/pokemon"
+        title="Pokemon"
+        subtitle={(count) => `${count} Pokémon`}
+        fields={rosterPokemonFields}
+        defaultViewMode="grid"
+        showToolbar={false}
+        surface={false}
+        filterPlacement="sidebar"
+        look={{
+          title: (doc) => doc.pokemon_name ?? "",
+          code: (doc) => `#${String(doc.poke_id ?? 0).padStart(3, "0")}`,
+          images: (doc) => [`https://art.spec.test/${doc.poke_id}.png`],
+        }}
+        favorites={favoritesKey}
+        sorts={[
+          { value: "pokedex", label: "Pokédex", orderBy: [{ field: "poke_id", order: Order.Asc }] },
+          {
+            value: "name",
+            label: "Name",
+            orderBy: [{ field: "pokemon_name", order: Order.Asc }],
+          },
+        ]}
+        facets={[
+          {
+            param: "type",
+            doctype: "Pokemon Poke Type",
+            field: "poke_type",
+            orderBy: "slot",
+            label: "Type",
+            options: ["grass", "poison", "fire", "water", "electric", "ghost", "normal"],
+            tint: (value) => (value === "grass" ? "grass" : "purple"),
+          },
+        ]}
+        bands={[
+          {
+            param: "gen",
+            field: "poke_id",
+            label: "Generation",
+            options: [
+              { value: "1", label: "Generation I", min: 1, max: 151 },
+              { value: "2", label: "Generation II", min: 152, max: 251 },
+            ],
+          },
+        ]}
+        ranges={[{ param: "xp", field: "base_experience", label: "Base XP" }]}
+        actions={[{ label: "Insights", icon: ChartBarIcon, href: "/pokemon/insights" }]}
+      />
+    </FrappeProvider>,
+  );
+}
+
+async function sidebar() {
+  return screen.findByTestId("list-page-sidebar", {}, { timeout: 5000 });
+}
+
+describe("FrappeListView sidebar filters", () => {
+  it("puts every filter in the page's one sidebar", async () => {
+    renderList();
+    const aside = await sidebar();
+    expect(screen.getAllByTestId("list-page-sidebar")).toHaveLength(1);
+    expect(within(aside).getByRole("radiogroup", { name: "Type" })).toBeTruthy();
+    expect(within(aside).getByRole("radiogroup", { name: "Generation" })).toBeTruthy();
+    expect(aside.querySelector("[data-range-slider]")).not.toBeNull();
+    expect(within(aside).getByTestId("pokemon-sidebar-favorites-filter")).toBeTruthy();
+  });
+
+  it("labels each type and generation with its record count", async () => {
+    renderList();
+    const aside = await sidebar();
+    await waitFor(() => {
+      const poison = within(aside).getByTestId("pokemon-sidebar-type-poison");
+      expect(poison.querySelector("[data-facet-count]")?.textContent).toBe("2");
+    });
+    await waitFor(() => {
+      const gen1 = within(aside).getByTestId("pokemon-sidebar-gen-1");
+      expect(gen1.querySelector("[data-facet-count]")?.textContent).toBe("6");
+      const gen2 = within(aside).getByTestId("pokemon-sidebar-gen-2");
+      expect(gen2.querySelector("[data-facet-count]")?.textContent).toBe("0");
+    });
+  });
+
+  it("keeps the header's title and count beside the sidebar, not in it", async () => {
+    renderList();
+    const aside = await sidebar();
+    const main = screen.getByTestId("list-page-main");
+    await waitFor(() => expect(main.textContent).toContain("6 Pokémon"));
+    expect(aside.textContent).not.toContain("6 Pokémon");
+  });
+
+  it("narrows to a generation band", async () => {
+    renderList();
+    const aside = await sidebar();
+    await screen.findByTestId("pokemon-card-bulbasaur", {}, { timeout: 5000 });
+    fireEvent.click(within(aside).getByTestId("pokemon-sidebar-gen-2"));
+    await waitFor(() => expect(screen.queryByTestId("pokemon-card-bulbasaur")).toBeNull());
+  });
+});
+
+describe("FrappeListView phone filters", () => {
+  it("offers a Filters button wearing the active-filter count", async () => {
+    renderList();
+    const aside = await sidebar();
+    await screen.findByTestId("pokemon-card-bulbasaur", {}, { timeout: 5000 });
+    const button = screen.getByTestId("pokemon-filters-button");
+    expect(button.getAttribute("aria-label")).toBe("Filters");
+    fireEvent.click(within(aside).getByTestId("pokemon-sidebar-type-fire"));
+    await waitFor(() =>
+      expect(screen.getByTestId("pokemon-filters-button").getAttribute("aria-label")).toBe(
+        "Filters (1)",
+      ),
+    );
+    fireEvent.click(within(aside).getByTestId("pokemon-sidebar-gen-1"));
+    await waitFor(() =>
+      expect(screen.getByTestId("pokemon-filters-button").getAttribute("aria-label")).toBe(
+        "Filters (2)",
+      ),
+    );
+  });
+
+  it("opens the same filters, sort included, in a bottom sheet", async () => {
+    renderList();
+    await sidebar();
+    expect(screen.queryByTestId("pokemon-filters-sheet")).toBeNull();
+    fireEvent.click(screen.getByTestId("pokemon-filters-button"));
+    const sheet = await screen.findByTestId("pokemon-filters-sheet");
+    expect(within(sheet).getByRole("radiogroup", { name: "Type" })).toBeTruthy();
+    expect(within(sheet).getByRole("radiogroup", { name: "Generation" })).toBeTruthy();
+    expect(sheet.querySelector("[data-range-slider]")).not.toBeNull();
+    expect(within(sheet).getByTestId("pokemon-sheet-favorites-filter")).toBeTruthy();
+    expect(within(sheet).getByRole("group", { name: "Sort by" })).toBeTruthy();
+  });
+
+  it("a pick in the sheet narrows the list and counts on the button", async () => {
+    renderList();
+    await screen.findByTestId("pokemon-card-pikachu", {}, { timeout: 5000 });
+    fireEvent.click(screen.getByTestId("pokemon-filters-button"));
+    const sheet = await screen.findByTestId("pokemon-filters-sheet");
+    fireEvent.click(within(sheet).getByTestId("pokemon-sheet-type-fire"));
+    await waitFor(() => expect(screen.queryByTestId("pokemon-card-pikachu")).toBeNull());
+    expect(screen.getByTestId("pokemon-card-charmander")).toBeTruthy();
+    expect(screen.getByTestId("pokemon-filters-button").getAttribute("aria-label")).toBe(
+      "Filters (1)",
+    );
+  });
+
+  it("holds the secondary actions in a ⋯ menu beside the Filters button", async () => {
+    renderList();
+    await sidebar();
+    const tools = screen.getByTestId("pokemon-phone-tools");
+    const more = within(tools).getByTestId("pokemon-more");
+    expect(more.getAttribute("aria-label")).toBe("More actions");
+    fireEvent.click(more);
+    const menu = await screen.findByRole("menu");
+    expect(within(menu).getByText("Insights")).toBeTruthy();
+    expect(within(menu).getByText("Cards")).toBeTruthy();
+    expect(within(menu).getByText("Table")).toBeTruthy();
+  });
+});