@multiplatform.one/frappe-ui 7.78.0 → 7.79.0

package/src/fields/Password/Password.secret.spec.tsx

@@ -0,0 +1,194 @@
+/**
+ * LC-186 SECRET-VALUES: a stored secret is written, never read back. The
+ * field is handed the record's stored value and must not put it in any
+ * rendered text, attribute, input value or accessible name, at rest, in
+ * error, while loading or disabled. Replace opens an empty masked input;
+ * the arrow puts the stored secret back without showing it.
+ */
+import { Form } from "@multiplatform.one/forms";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent } from "@testing-library/react";
+import i18next from "i18next";
+import { useState } from "react";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { Password } from "./index";
+
+const secret = "s3cr3t-Hunter-42";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(cleanup);
+
+function leaks(root: HTMLElement, value: string): string[] {
+  const found: string[] = [];
+  if ((root.textContent ?? "").includes(value)) found.push("text");
+  for (const el of [root, ...root.querySelectorAll("*")]) {
+    for (const attr of el.getAttributeNames()) {
+      if ((el.getAttribute(attr) ?? "").includes(value)) found.push(`${el.tagName}@${attr}`);
+    }
+    if (el instanceof HTMLInputElement && el.value.includes(value)) found.push("input.value");
+  }
+  return found;
+}
+
+function statusOf(container: HTMLElement) {
+  return container.querySelector("[data-secret-state='set']");
+}
+
+function action(container: HTMLElement, label: RegExp) {
+  return [...container.querySelectorAll("[aria-label]")].find((el) =>
+    label.test(el.getAttribute("aria-label") ?? ""),
+  ) as HTMLElement | undefined;
+}
+
+describe("Password is write-only (LC-186)", () => {
+  const states = {
+    "at rest": {},
+    "in error": { error: "Wrong password" },
+    loading: { skeleton: true },
+    disabled: { disabled: true },
+    "read-only": { readOnly: true },
+  } as const;
+
+  for (const [state, extra] of Object.entries(states)) {
+    it(`never renders a stored secret ${state}`, () => {
+      const result = renderWithProviders(<Password label="API key" value={secret} {...extra} />);
+      expect(leaks(document.body, secret)).toEqual([]);
+      if (!("skeleton" in extra)) expect(statusOf(result.container)?.textContent).toBe("Set");
+    });
+
+    it(`never renders a form's stored secret ${state}`, () => {
+      renderWithProviders(
+        <Form onSubmit={() => {}}>
+          <Password name="api_key" label="API key" defaultValue={secret} {...extra} />
+        </Form>,
+      );
+      expect(leaks(document.body, secret)).toEqual([]);
+    });
+  }
+
+  it("a stored secret offers Replace and Clear, a locked one neither", () => {
+    const open = renderWithProviders(<Password label="API key" value={secret} />);
+    expect(action(open.container, /^Replace API key$/)).toBeTruthy();
+    expect(action(open.container, /^Clear API key$/)).toBeTruthy();
+    expect(open.container.querySelector("input")).toBeNull();
+    open.unmount();
+
+    const locked = renderWithProviders(<Password label="API key" value={secret} readOnly />);
+    expect(action(locked.container, /^Replace/)).toBeUndefined();
+    expect(action(locked.container, /^Clear/)).toBeUndefined();
+  });
+
+  it("Replace opens an empty masked input; its reveal shows only what is typed", () => {
+    const onChange = vi.fn();
+    function Harness() {
+      const [value, setValue] = useState(secret);
+      return (
+        <Password
+          label="API key"
+          value={value}
+          onChange={(next) => {
+            onChange(next);
+            setValue(next);
+          }}
+        />
+      );
+    }
+    const { container } = renderWithProviders(<Harness />);
+    fireEvent.click(action(container, /^Replace API key$/)!);
+
+    const input = container.querySelector("input") as HTMLInputElement;
+    expect(input).toBeTruthy();
+    expect(input.value).toBe("");
+    expect(input.getAttribute("type")).toBe("password");
+    expect(input.getAttribute("autocomplete")).toBe("new-password");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.click(action(container, /^Show password$/)!);
+    expect(input.getAttribute("type")).toBe("text");
+    expect(leaks(document.body, secret)).toEqual([]);
+
+    fireEvent.change(input, { target: { value: "fresh-key" } });
+    expect(onChange).toHaveBeenLastCalledWith("fresh-key");
+    expect((container.querySelector("input") as HTMLInputElement).value).toBe("fresh-key");
+    expect(leaks(document.body, secret)).toEqual([]);
+  });
+
+  it("the arrow keeps the saved secret: the value goes back, still unseen", () => {
+    const onChange = vi.fn();
+    function Harness() {
+      const [value, setValue] = useState(secret);
+      return (
+        <Password
+          label="API key"
+          value={value}
+          onChange={(next) => {
+            onChange(next);
+            setValue(next);
+          }}
+        />
+      );
+    }
+    const { container } = renderWithProviders(<Harness />);
+    fireEvent.click(action(container, /^Replace API key$/)!);
+    fireEvent.change(container.querySelector("input")!, { target: { value: "half-typed" } });
+    fireEvent.click(action(container, /^Keep the saved API key$/)!);
+
+    expect(onChange).toHaveBeenLastCalledWith(secret);
+    expect(statusOf(container)?.textContent).toBe("Set");
+    expect(container.querySelector("input")).toBeNull();
+    expect(leaks(document.body, secret)).toEqual([]);
+  });
+
+  it("Clear is explicit: it writes an empty value and shows the empty input", () => {
+    const onChange = vi.fn();
+    function Harness() {
+      const [value, setValue] = useState(secret);
+      return (
+        <Password
+          label="API key"
+          value={value}
+          onChange={(next) => {
+            onChange(next);
+            setValue(next);
+          }}
+        />
+      );
+    }
+    const { container } = renderWithProviders(<Harness />);
+    fireEvent.click(action(container, /^Clear API key$/)!);
+
+    expect(onChange).toHaveBeenLastCalledWith("");
+    expect((container.querySelector("input") as HTMLInputElement).value).toBe("");
+    expect(statusOf(container)).toBeNull();
+    expect(action(container, /^Keep the saved API key$/)).toBeTruthy();
+  });
+
+  it("a value saved over the typed one is stored again, not echoed", () => {
+    function Harness() {
+      const [value, setValue] = useState("");
+      return (
+        <>
+          <Password label="API key" value={value} onChange={setValue} />
+          <button type="button" data-testid="saved" onClick={() => setValue("*********")}>
+            saved
+          </button>
+        </>
+      );
+    }
+    const { container, getByTestId } = renderWithProviders(<Harness />);
+    fireEvent.change(container.querySelector("input")!, { target: { value: "typed-now" } });
+    expect((container.querySelector("input") as HTMLInputElement).value).toBe("typed-now");
+
+    fireEvent.click(getByTestId("saved"));
+    expect(statusOf(container)?.textContent).toBe("Set");
+    expect(leaks(document.body, "*********")).toEqual([]);
+  });
+});

package/src/fields/Password/Password.spec.tsx

@@ -11,10 +11,17 @@ function revealOf(container: HTMLElement) {
   ) as HTMLElement | null;
 }
 
+function typed(container: HTMLElement, text: string): HTMLInputElement {
+  const input = container.querySelector("input") as HTMLInputElement;
+  if (!input) throw new Error("input not found");
+  fireEvent.change(input, { target: { value: text } });
+  return input;
+}
+
 describe("Password reveal", () => {
   it("toggle is a real tab stop and rings its own glyph, not the 44px box", () => {
-    const result = renderWithProviders(<Password label="Secret" value="hunter2" />);
-    const input = result.container.querySelector("input") as HTMLInputElement;
+    const result = renderWithProviders(<Password label="Secret" />);
+    const input = typed(result.container, "hunter2");
     const reveal = revealOf(result.container);
     if (!input || !reveal) throw new Error("input or reveal not found");
 
@@ -34,8 +41,8 @@ describe("Password reveal", () => {
   });
 
   it("toggling does not move the caret or change the control geometry", () => {
-    const result = renderWithProviders(<Password label="Secret" value="hunter2" />);
-    const input = result.container.querySelector("input") as HTMLInputElement;
+    const result = renderWithProviders(<Password label="Secret" />);
+    const input = typed(result.container, "hunter2");
     const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
     const reveal = revealOf(result.container);
     if (!input || !box || !reveal) throw new Error("anatomy missing");
@@ -57,7 +64,7 @@ describe("Password reveal", () => {
   });
 
   it("default size stays 40 tall with the toggle present (not Bento's 46)", () => {
-    const result = renderWithProviders(<Password label="Secret" value="hunter2" />);
+    const result = renderWithProviders(<Password label="Secret" />);
     const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
     const reveal = revealOf(result.container);
     if (!box || !reveal) throw new Error("box or reveal not found");
@@ -69,7 +76,7 @@ describe("Password reveal", () => {
   it("reveal state is announced and resets to masked when the field loses value", () => {
     const onChange = vi.fn();
     function Harness() {
-      const [value, setValue] = useState("hunter2");
+      const [value, setValue] = useState("");
       return (
         <Password
           label="Secret"
@@ -82,7 +89,7 @@ describe("Password reveal", () => {
       );
     }
     const result = renderWithProviders(<Harness />);
-    const input = result.container.querySelector("input") as HTMLInputElement;
+    const input = typed(result.container, "hunter2");
     const reveal = revealOf(result.container);
     if (!input || !reveal) throw new Error("input or reveal not found");
 
@@ -108,7 +115,7 @@ describe("Password reveal", () => {
     for (const token of SIZE_RECIPE_TOKENS) {
       if (token === "$true") continue;
       const height = sizeRecipeForToken(token).height;
-      const result = renderWithProviders(<Password label="Secret" value="secret" size={token} />);
+      const result = renderWithProviders(<Password label="Secret" size={token} />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
       const reveal = revealOf(result.container);
       if (!box || !reveal) throw new Error(`anatomy missing at ${token}`);

package/src/fields/Password/index.tsx

@@ -1,6 +1,12 @@
 /**
  * Password — masked Data with a reveal in the end-cap.
  *
+ * LC-186 SECRET-VALUES: write-only. A value the field was handed (the
+ * record's stored secret, or Frappe's dummy asterisks) is never rendered:
+ * the field shows "Set" with Replace and Clear glyphs. Replace opens an empty
+ * masked input whose reveal shows only what is being typed; the arrow puts
+ * the stored secret back untouched.
+ *
  * Bento ships no password field (0 type=password, 0 reveal toggles across
  * 14 inputs, measured 2026-08-28, bento-pickers-measured.md §6.2). The
  * toggle is PROPOSED. Bento's right adornment is an inert 16.8px svg
@@ -15,6 +21,7 @@ import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/for
 import {
   Field,
   FieldLayout,
+  formCommonColors,
   Input as FormsInput,
   PasswordReveal,
   Skeleton,
@@ -30,10 +37,12 @@ import {
   pressTargetHitSlop,
   sizeRecipeForToken,
 } from "@multiplatform.one/theme";
+import { ArrowCounterClockwiseIcon, PencilSimpleIcon, XIcon } from "@phosphor-icons/react";
 import type { DeepKeys } from "@tanstack/form-core";
 import type { SizeTokens, TamaguiElement } from "tamagui";
-import { useCallback, useRef, useState } from "react";
-import { useProps } from "tamagui";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Text, useProps } from "tamagui";
 
 export type PasswordProps<
   TData extends Record<string, unknown> = Record<string, unknown>,
@@ -109,11 +118,16 @@ export function Password<
   }).height;
   const belowFloor = visualHeight < MIN_PRESS_TARGET;
 
+  const { t } = useTranslation();
   const isControlled = value !== undefined;
   const [internalText, setInternalText] = useState(String(defaultValue ?? ""));
   const text = isControlled ? String(value ?? "") : internalText;
   const inputRef = useRef<TamaguiElement>(null);
-  const { revealed, toggle: toggleReveal } = usePasswordReveal({ inputRef, id, text });
+  // What this session typed (or cleared). Any other value is a stored secret.
+  const typedRef = useRef<string | null>(null);
+  const [replacingFrom, setReplacingFrom] = useState<string | null>(null);
+  const [typedText, setTypedText] = useState("");
+  const { revealed, toggle: toggleReveal } = usePasswordReveal({ inputRef, id, text: typedText });
 
   const handleChangeText = useCallback(
     (next: string) => {
@@ -124,6 +138,23 @@ export function Password<
     [disabled, isControlled, onChange],
   );
 
+  const secretOf = (current: string) => {
+    const typed = typedRef.current !== null && current === typedRef.current;
+    const stored = current !== "" && !typed;
+    return {
+      showStatus: stored && replacingFrom !== current,
+      shown: typed ? current : "",
+    };
+  };
+
+  useEffect(() => {
+    if (replacingFrom === null) return;
+    const el = inputRef.current as { focus?: () => void } | null;
+    el?.focus?.();
+  }, [replacingFrom]);
+
+  const fieldName = String(fieldProps.label ?? t("Password"));
+
   const boxContract = {
     size: resolvedSize,
     "data-size-token": String(resolvedSize),
@@ -151,38 +182,106 @@ export function Password<
     inputValue: string | undefined,
     handleChange?: (text: string) => void,
     hasError?: boolean,
-  ) => (
-    <FormsInput.Box {...boxContract} disabled={disabled} paddingInlineEnd={0}>
-      <FormsInput.Area
-        ref={inputRef}
-        {...(areaInputProps as object)}
-        id={id}
-        value={inputValue ?? ""}
-        disabled={disabled}
-        readOnly={fieldProps.readOnly}
-        placeholder={placeholder}
-        type={revealed ? "text" : "password"}
-        secureTextEntry={!revealed}
-        textContentType="password"
-        autoComplete="current-password"
-        spellCheck={false}
-        aria-required={fieldProps.required || undefined}
-        aria-invalid={hasError || undefined}
-        aria-readonly={fieldProps.readOnly || undefined}
-        onChangeText={(next: string) => {
-          handleChange?.(next);
-          handleChangeText(next);
-        }}
-      />
-      <PasswordReveal
-        revealed={revealed}
-        onToggle={toggleReveal}
-        controls={id}
-        disabled={disabled}
-        size={resolvedSize}
-      />
-    </FormsInput.Box>
-  );
+  ) => {
+    const current = inputValue ?? "";
+    const { showStatus, shown } = secretOf(current);
+    const write = (next: string) => {
+      typedRef.current = next;
+      setTypedText(next);
+      handleChange?.(next);
+      handleChangeText(next);
+    };
+    if (showStatus) {
+      const locked = disabled || fieldProps.readOnly;
+      return (
+        <FormsInput.Box {...boxContract} disabled={disabled} paddingInlineEnd={0}>
+          <Text
+            flex={1}
+            numberOfLines={1}
+            fontFamily="$body"
+            fontSize={sizeRecipeForToken(String(resolvedSize)).fontSize}
+            color={formCommonColors.text}
+            data-secret-state="set"
+          >
+            {t("Set")}
+          </Text>
+          {locked ? null : (
+            <>
+              <FormsInput.Action
+                label={t("Replace {{field}}", { field: fieldName })}
+                size={resolvedSize}
+                onPress={() => {
+                  typedRef.current = null;
+                  setTypedText("");
+                  setReplacingFrom(current);
+                }}
+              >
+                <PencilSimpleIcon />
+              </FormsInput.Action>
+              <FormsInput.Action
+                label={t("Clear {{field}}", { field: fieldName })}
+                size={resolvedSize}
+                onPress={() => {
+                  setReplacingFrom(current);
+                  write("");
+                }}
+              >
+                <XIcon />
+              </FormsInput.Action>
+            </>
+          )}
+        </FormsInput.Box>
+      );
+    }
+    const restore = replacingFrom;
+    return (
+      <FormsInput.Box {...boxContract} disabled={disabled} paddingInlineEnd={0}>
+        <FormsInput.Area
+          ref={inputRef}
+          {...(areaInputProps as object)}
+          id={id}
+          value={shown}
+          disabled={disabled}
+          readOnly={fieldProps.readOnly}
+          placeholder={placeholder}
+          type={revealed ? "text" : "password"}
+          secureTextEntry={!revealed}
+          textContentType={restore === null ? "password" : "newPassword"}
+          autoComplete={restore === null ? "current-password" : "new-password"}
+          spellCheck={false}
+          aria-required={fieldProps.required || undefined}
+          aria-invalid={hasError || undefined}
+          aria-readonly={fieldProps.readOnly || undefined}
+          onChangeText={write}
+        />
+        <PasswordReveal
+          revealed={revealed}
+          onToggle={toggleReveal}
+          controls={id}
+          disabled={disabled}
+          size={resolvedSize}
+        />
+        {restore === null ? null : (
+          <FormsInput.Action
+            label={t("Keep the saved {{field}}", { field: fieldName })}
+            size={resolvedSize}
+            disabled={disabled}
+            onPress={() => {
+              typedRef.current = null;
+              setTypedText("");
+              setReplacingFrom(null);
+              if (current !== restore) {
+                handleChange?.(restore);
+                handleChangeText(restore);
+              }
+            }}
+          >
+            <ArrowCounterClockwiseIcon />
+          </FormsInput.Action>
+        )}
+      </FormsInput.Box>
+    );
+  };
 
   if (fieldProps.skeleton) {
     return (

package/src/list/ListControls.spec.tsx

@@ -60,7 +60,16 @@ describe("ListControls on the compact class (639)", () => {
     expect(screen.queryByRole("radiogroup", { name: "Region" })).toBeNull();
   });
 
-  it("badges the Filters button with the active narrowings", () => {
+  it("draws Filters as its glyph, the name in the accessible label (FZ-8660)", () => {
+    renderAt(390);
+    const tools = screen.getByTestId("roster-tools");
+    expect(tools.getAttribute("data-mp-action")).toBe("filter");
+    expect(tools.getAttribute("aria-label")).toBe("Filters");
+    expect(tools.textContent).toBe("");
+    expect(tools.querySelector("svg")).not.toBeNull();
+  });
+
+  it("badges the filter glyph with the active narrowings", () => {
     renderAt(390, {
       facets: { type: "fire" },
       bands: { generation: "1" },

package/src/list/ListControlsSheet.spec.tsx

@@ -25,8 +25,10 @@ function renderBand(update = vi.fn()) {
 describe("ListControlsSheet band filters", () => {
   it("counts an active band and lets its chip clear it", () => {
     const update = renderBand();
-    const trigger = screen.getByTestId("roster-filters");
-    expect(trigger.querySelector('[data-badge="count"]')?.textContent).toContain("1");
+    const trigger = screen.getByRole("button", { name: /^Filters \(/ });
+    expect(trigger.getAttribute("data-mp-action")).toBe("filter");
+    expect(trigger.textContent).toBe("");
+    expect(document.querySelector('[data-badge="count"]')?.textContent).toContain("1");
     fireEvent.click(screen.getByRole("button", { name: "Generation I" }));
     expect(update).toHaveBeenCalledWith({ bands: { generation: "" } });
   });

package/src/list/ListControlsSheet.tsx

@@ -1,5 +1,4 @@
 import {
-  Badge,
   Chip,
   SheetModal,
   Text,
@@ -14,7 +13,6 @@ import {
   DiceFiveIcon,
   HeartIcon,
   ListIcon,
-  SlidersHorizontalIcon,
   SquaresFourIcon,
   TableIcon,
 } from "@phosphor-icons/react";
@@ -23,6 +21,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BandFilter } from "./BandFilters";
 import { activeFilterCount, type FrappeListViewMode } from "./listState";
+import { ListFiltersButton } from "./ListFiltersButton";
 import type { ListControlsProps } from "./ListControls";
 import { RangeFilter, rangeCeiling } from "./RangeFilter";
 
@@ -164,15 +163,12 @@ export function ListControlsSheet({
           </YStack>
         ) : null}
         {hasSheet ? (
-          <Button
+          <ListFiltersButton
+            count={count}
+            open={open}
             onPress={() => setOpen(true)}
-            icon={SlidersHorizontalIcon}
-            iconAfter={count > 0 ? <Badge count={count} color="gray" /> : undefined}
-            aria-label={count > 0 ? t("Filters ({{count}})", { count }) : t("Filters", "Filters")}
             testID={`${testID}-filters`}
-          >
-            {t("Filters", "Filters")}
-          </Button>
+          />
         ) : null}
       </XStack>
       {count > 0 || view || shuffle ? (

package/src/list/ListFiltersButton.tsx

@@ -0,0 +1,33 @@
+import { ActionButton, Badge } from "@multiplatform.one/components";
+import { useTranslation } from "react-i18next";
+
+// A bare glyph has no frame for the badge to hang from, and its 44pt target's
+// corner sits clear of the funnel, so the badge pulls in to the glyph.
+const bareGlyphBadgeOffset: [number, number] = [-6, -8];
+
+export interface ListFiltersButtonProps {
+  /** The active filters: the badge and the accessible name carry it. */
+  count: number;
+  /** Whether the sheet it opens is showing. */
+  open: boolean;
+  onPress: () => void;
+  testID: string;
+}
+
+/** The list row's filter action (LC-260): the funnel glyph wearing the active count. */
+export function ListFiltersButton({ count, open, onPress, testID }: ListFiltersButtonProps) {
+  const { t } = useTranslation();
+  return (
+    <Badge count={count} offset={bareGlyphBadgeOffset}>
+      <ActionButton
+        kind="filter"
+        label={count > 0 ? t("Filters ({{count}})", { count }) : t("Filters")}
+        theme={count > 0 ? "accent" : undefined}
+        onPress={onPress}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        testID={testID}
+      />
+    </Badge>
+  );
+}

package/src/list/ListSidebarToolbar.tsx

@@ -1,5 +1,4 @@
 import {
-  Badge,
   DropdownMenu,
   SheetModal,
   Tooltip,
@@ -10,10 +9,11 @@ import {
 } from "@multiplatform.one/components";
 import { Button, SearchInput, Select } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { DiceFiveIcon, DotsThreeIcon, FadersHorizontalIcon } from "@phosphor-icons/react";
+import { DiceFiveIcon, DotsThreeIcon } from "@phosphor-icons/react";
 import { useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { ListFilterPanel } from "./ListFilterPanel";
+import { ListFiltersButton } from "./ListFiltersButton";
 import { activeFilterCount, type FrappeListControls } from "./listState";
 import type { ListControlsResult } from "./useListControls";
 
@@ -31,7 +31,7 @@ export interface ListSidebarToolbarProps {
   shufflePanel?: ReactNode;
   /**
    * The page's secondary actions. Below `md` they leave the header for the
-   * ⋯ menu beside the Filters button.
+   * ⋯ menu beside the filter glyph.
    */
   menuItems: readonly DropdownMenuEntry[];
   testID: string;
@@ -39,9 +39,11 @@ export interface ListSidebarToolbarProps {
 
 /**
  * The toolbar of a list whose filters live in the page's sidebar: search
- * and sort from `md` up; below it search, a Filters button wearing the
+ * and sort from `md` up; below it search, a funnel glyph wearing the
  * active-filter count that opens the same filters (sort included) in a
- * bottom sheet, and a ⋯ menu holding the secondary actions.
+ * bottom sheet, and a ⋯ menu holding the secondary actions. Both glyphs are
+ * LC-176 icon buttons, so the search keeps the row's remaining width and a
+ * long placeholder fits a 390pt phone.
  */
 export function ListSidebarToolbar({
   controls,
@@ -61,7 +63,6 @@ export function ListSidebarToolbar({
   const { state, update } = list;
   const sorts = controls.sorts ?? [];
   const active = activeFilterCount(state);
-  const filtersLabel = active > 0 ? t("Filters ({{count}})", { count: active }) : t("Filters");
 
   return (
     <YStack {...knobProps.gap} testID={`${testID}-controls`}>
@@ -126,20 +127,12 @@ export function ListSidebarToolbar({
           alignItems="center"
           testID={`${testID}-phone-tools`}
         >
-          <Badge count={active}>
-            <Button
-              outlined={active === 0}
-              theme={active > 0 ? "accent" : undefined}
-              icon={<FadersHorizontalIcon size={16} />}
-              onPress={() => setSheetOpen(true)}
-              aria-label={filtersLabel}
-              aria-haspopup="dialog"
-              aria-expanded={sheetOpen}
-              testID={`${testID}-filters-button`}
-            >
-              {t("Filters")}
-            </Button>
-          </Badge>
+          <ListFiltersButton
+            count={active}
+            open={sheetOpen}
+            onPress={() => setSheetOpen(true)}
+            testID={`${testID}-filters-button`}
+          />
           {menuItems.length > 0 ? (
             <DropdownMenu items={[...menuItems]} placement="bottom-end">
               <Button