@12-apps/ui 1.5.1 → 1.6.0

package/src/components/data-display/DataViews/data-views-inline-bar.tsx

@@ -10,59 +10,53 @@
  * the panel is a column of stacked fields, this is a row of pills, and the only
  * thing they share is the prop shape they are both driven by.
  */
-import SearchIcon from '@mui/icons-material/Search';
-import { Box, Button, Chip, InputAdornment, TextField, Typography } from "@mui/material";
-import { useRef, useState } from "react";
+import { Box, Button, Chip, Typography } from "@mui/material";
+import { useState } from "react";
 
 import { MultiSelectDropdown } from "../../layout/ContentToolbar";
 
 import type { GridFilterPanelProps } from "./data-views-filter-panel";
-import { isRangeSet, RangePill, rangeChipLabel } from "./data-views-range-pill";
+import { MoreFilters } from "./data-views-more-filters";
+import type { OverflowField, OverflowSplit } from "./data-views-overflow";
+import { CollapsedSearch, InlineKeyword } from "./data-views-search";
+import { RangePill } from "./data-views-range-pill";
+import { isRangeSet, rangeChipLabel } from "./data-views-range-values";
+import type { RangeValue } from "./data-views-types";
 
 
 
 /* ── Inline (second-line) filter bar ─────────────────────────────────────── */
 
-/** Compact keyword box for the inline bar: commits on Enter/blur (like the panel). */
-function InlineKeyword({
-  value,
-  onChange,
-  testId,
+/** The search, in whichever of its two forms the measurement asked for. */
+function SearchSlot({
+  search,
+  onSearchChange,
+  collapsed,
+  expanded,
+  onOpen,
+  onEscape,
+  testIdPrefix,
 }: {
-  value: string;
-  onChange: (value: string) => void;
-  testId?: string;
+  search: string;
+  onSearchChange: (value: string) => void;
+  collapsed: boolean;
+  expanded: boolean;
+  onOpen: () => void;
+  onEscape: () => void;
+  testIdPrefix: string;
 }): React.JSX.Element {
-  const [draft, setDraft] = useState(value);
-  const prev = useRef(value);
-  if (prev.current !== value) {
-    prev.current = value;
-    if (draft !== value) setDraft(value);
+  if (collapsed) {
+    return (
+      <CollapsedSearch active={search !== ""} onOpen={onOpen} testId={`${testIdPrefix}-search-all`} />
+    );
   }
-  const commit = (): void => {
-    if (draft !== value) onChange(draft);
-  };
   return (
-    <TextField
-      size="small"
-      value={draft}
-      onChange={(event) => setDraft(event.target.value)}
-      onBlur={commit}
-      onKeyDown={(event) => {
-        if (event.key !== "Enter") return;
-        event.preventDefault();
-        commit();
-      }}
-      placeholder="Buscar…"
-      inputProps={{ "aria-label": "Buscar em todas as colunas", "data-testid": testId }}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start">
-            <SearchIcon sx={{ fontSize: 16, color: "text.secondary" }} />
-          </InputAdornment>
-        ),
-      }}
-      sx={{ minWidth: 220 }}
+    <InlineKeyword
+      value={search}
+      onChange={onSearchChange}
+      testId={`${testIdPrefix}-search-all`}
+      autoFocus={expanded}
+      onEscape={onEscape}
     />
   );
 }
@@ -81,7 +75,10 @@ type InlineFilterBarProps<T extends Record<string, unknown>> = Pick<
   | "onChangeRange"
   | "onClearField"
   | "onClearAll"
->;
+> & {
+  /** The measured degradation state, computed once in `GridShell`. */
+  split: OverflowSplit<T>;
+};
 
 /** One removable active-filter chip: a search term, a pill value or a window. */
 interface ActiveChip {
@@ -147,7 +144,151 @@ function activeChips<T extends Record<string, unknown>>({
  * and — when anything is applied — a row of removable "active filter" chips. Range
  * filters are not shown here (the slide-in panel keeps those).
  */
-export function InlineFilterBar<T extends Record<string, unknown>>({
+/**
+ * One filter control on the bar: a multi-select pill or a min/max range. The
+ * two are the same thing from the bar's point of view — a labelled control that
+ * writes into the view state — so which one to build is decided here rather
+ * than in the bar's own render.
+ */
+function InlineControl<T extends Record<string, unknown>>({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  onClearField,
+  onOpenChange,
+  testIdPrefix,
+}: {
+  field: OverflowField<T>;
+  onOpenChange?: (open: boolean) => void;
+  pills: Record<string, string[]>;
+  ranges: Record<string, RangeValue>;
+  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;
+  onChangeRange: (fieldId: string, range: RangeValue) => void;
+  onClearField: (fieldId: string) => void;
+  testIdPrefix: string;
+}): React.JSX.Element | null {
+  if (field.group === "pill" && field.pill) {
+    return (
+      <MultiSelectDropdown
+        label={field.pill.label}
+        options={field.pill.options}
+        selected={new Set(pills[field.id] ?? [])}
+        onToggle={(value, checked) => onTogglePill(field.id, value, checked)}
+        onClear={() => onClearField(field.id)}
+        allLabel="Todas"
+        searchable={field.pill.searchEnabled ? true : undefined}
+        searchPlaceholder="Buscar…"
+        noResultsLabel="Nenhum resultado"
+        layout="pill"
+        onOpenChange={onOpenChange}
+        data-testid={`${testIdPrefix}-filter-${field.id}`}
+      />
+    );
+  }
+  if (field.group === "range" && field.range) {
+    return (
+      <RangePill
+        field={field.range}
+        value={ranges[field.id] ?? {}}
+        onChange={(range) => onChangeRange(field.id, range)}
+        onOpenChange={onOpenChange}
+        testIdPrefix={testIdPrefix}
+      />
+    );
+  }
+  return null;
+}
+
+/**
+ * The filter CONTROLS alone — search, the fields that fit, and "Mais N" for the
+ * ones that don't — with no row chrome of its own, because it is rendered ON
+ * the toolbar line rather than under it (`ContentToolbar`'s `leadingControls`).
+ *
+ * The measurement driving the collapse lives on the toolbar ROW, not here —
+ * see the note on `split` below.
+ */
+export function InlineFilterControls<T extends Record<string, unknown>>({
+  testIdPrefix,
+  pills,
+  ranges,
+  search,
+  onSearchChange,
+  onTogglePill,
+  onChangeRange,
+  onClearField,
+  split,
+  onControlOpenChange,
+}: Omit<InlineFilterBarProps<T>, "fields" | "rangeFields" | "onClearAll"> & {
+  /** Reports a control opening/closing so the shell can freeze the measurement. */
+  onControlOpenChange?: (open: boolean) => void;
+}): React.JSX.Element {
+  // MEASURED, not breakpointed — and measured ONCE, in the shell, because the
+  // toolbar around it needs the same answer to drop its labels. The measured
+  // element is the whole toolbar ROW (see `GridToolbar`), not this cluster:
+  // `RESERVED` prices the counter and Exibir/Exportar, so measuring only the
+  // controls would charge for that furniture a second time and collapse the
+  // ladder while the row still had hundreds of free pixels.
+  const { inline, overflow, searchCollapsed } = split;
+  // Expanded by the operator: a collapsed search that was CLICKED stays open
+  // until Escape, so typing is never interrupted by a re-measure.
+  const [searchOpen, setSearchOpen] = useState(false);
+  const showBox = !searchCollapsed || searchOpen;
+  return (
+    <Box
+      data-testid={`${testIdPrefix}-inline-filters`}
+      sx={{
+        display: "flex",
+        flexWrap: "nowrap",
+        alignItems: "center",
+        gap: 1,
+        minWidth: 0,
+        // No squeezing: if the estimate over-packs, the row must overflow (and
+        // the next measure sheds a control), not shrink labels to an ellipsis.
+        "& > *": { flexShrink: 0 },
+      }}
+    >
+      <SearchSlot
+        search={search}
+        onSearchChange={onSearchChange}
+        collapsed={!showBox}
+        expanded={searchOpen}
+        onOpen={() => setSearchOpen(true)}
+        onEscape={() => setSearchOpen(false)}
+        testIdPrefix={testIdPrefix}
+      />
+      {inline.map((field) => (
+        <InlineControl
+          key={field.id}
+          field={field}
+          onOpenChange={onControlOpenChange}
+          pills={pills}
+          ranges={ranges}
+          onTogglePill={onTogglePill}
+          onChangeRange={onChangeRange}
+          onClearField={onClearField}
+          testIdPrefix={testIdPrefix}
+        />
+      ))}
+      <MoreFilters
+        fields={overflow}
+        pills={pills}
+        ranges={ranges}
+        onTogglePill={onTogglePill}
+        onChangeRange={onChangeRange}
+        testIdPrefix={testIdPrefix}
+      />
+    </Box>
+  );
+}
+
+/**
+ * The applied-filter chips, on their own line under the toolbar. Split from the
+ * controls because the two no longer share a row: the controls sit on the
+ * toolbar, and this renders nothing at all until something is applied.
+ */
+export function InlineFilterChips<T extends Record<string, unknown>>({
   testIdPrefix,
   search,
   fields,
@@ -157,9 +298,8 @@ export function InlineFilterBar<T extends Record<string, unknown>>({
   onSearchChange,
   onTogglePill,
   onChangeRange,
-  onClearField,
   onClearAll,
-}: InlineFilterBarProps<T>): React.JSX.Element {
+}: Omit<InlineFilterBarProps<T>, "split" | "onClearField">): React.JSX.Element | null {
   const chips = activeChips({
     search,
     fields,
@@ -170,44 +310,10 @@ export function InlineFilterBar<T extends Record<string, unknown>>({
     onTogglePill,
     onChangeRange,
   });
+  if (chips.length === 0) return null;
   return (
-    <Box
-      data-testid={`${testIdPrefix}-inline-filters`}
-      sx={{ display: "flex", flexDirection: "column", gap: 1.5, py: 1.5 }}
-    >
-      <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1.5 }}>
-        <InlineKeyword value={search} onChange={onSearchChange} testId={`${testIdPrefix}-search-all`} />
-        {fields.map((field) => (
-          <MultiSelectDropdown
-            key={field.id}
-            label={field.label}
-            options={field.options}
-            selected={new Set(pills[field.id] ?? [])}
-            onToggle={(value, checked) => onTogglePill(field.id, value, checked)}
-            onClear={() => onClearField(field.id)}
-            allLabel="Todas"
-            searchable={field.searchEnabled ? true : undefined}
-            searchPlaceholder="Buscar…"
-            noResultsLabel="Nenhum resultado"
-            layout="pill"
-            data-testid={`${testIdPrefix}-filter-${field.id}`}
-          />
-        ))}
-        {rangeFields.map((field) => (
-          <RangePill
-            key={field.id}
-            field={field}
-            value={ranges[field.id] ?? {}}
-            onChange={(range) => onChangeRange(field.id, range)}
-            testIdPrefix={testIdPrefix}
-          />
-        ))}
-      </Box>
-      <ActiveChipRow
-        chips={chips}
-        testIdPrefix={testIdPrefix}
-        onClearAll={onClearAll}
-      />
+    <Box sx={{ py: 1.5 }}>
+      <ActiveChipRow chips={chips} testIdPrefix={testIdPrefix} onClearAll={onClearAll} />
     </Box>
   );
 }

package/src/components/data-display/DataViews/data-views-layout-context.tsx

@@ -1,30 +1,36 @@
 "use client";
 
-import { createContext, useContext, useMemo, useState, type ReactNode } from "react";
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
 
 import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
-import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import ViewListOutlinedIcon from "@mui/icons-material/ViewListOutlined";
 
-import { Button } from "../../form/Button";
 import { Slider } from "../../form/Slider";
 import { Box } from "../../../mui/Box";
-import { DropdownMenu } from "../../navigation/DropdownMenu";
+
+import { DATA_VIEWS_LAYOUTS, type DataViewsLayout } from "./data-views-types";
 
 /**
- * The DataViews layout (view type): the dense "Tabela" grid, or the "Grade" of
- * cards. Shared across the toolbar (the toggle) and the body (the selector) via
- * context so a single source of truth drives what renders — the toggle only
- * appears when the table opts into cards by supplying a `renderCard` (each entity
- * implements its own card). Reusable feature of the DataViews machinery.
+ * The DataViews layout (view type): the dense "Tabela" grid, the "Grade" of
+ * cards, the "Lista" of full-width rows, or the "Quadro" board of state columns.
+ * Shared across the toolbar (the toggle) and the body (the selector) via context
+ * so a single source of truth drives what renders — each layout only appears
+ * when the table opts into it (`renderCard` for the grade, `renderListRow` for
+ * the lista, `board` + `renderCard` for the quadro).
  */
-export type DataViewsLayout = "cards" | "table";
+export type { DataViewsLayout };
 
 interface DataViewsLayoutValue {
   layout: DataViewsLayout;
   setLayout: (layout: DataViewsLayout) => void;
+  /** How much air each record gets — see {@link DataViewsDensity}. */
+  density: DataViewsDensity;
+  setDensity: (density: DataViewsDensity) => void;
   /** Whether the cards layout is available (a `renderCard` was supplied). */
   canUseCards: boolean;
+  /** Whether the list layout is available (a `renderListRow` was supplied). */
+  canUseList: boolean;
+  /** Whether the board layout is available (a `board` config AND a `renderCard`). */
+  canUseBoard: boolean;
   /** Card-size zoom (0–100); drives the card grid's min column width. */
   zoom: number;
   setZoom: (zoom: number) => void;
@@ -39,6 +45,49 @@ const BASE_CARD_WIDTH = 180;
 /** The size multiplier the zoom slider spans (0.75× to 2×). */
 const CARD_SCALE_RANGE = { min: 0.75, max: 2 } as const;
 
+/**
+ * Where the user's layout preference is remembered. ONE key for every DataViews
+ * table in the app, on purpose: picking "Grade" on Produtos is a statement about
+ * how this operator likes to read lists, not about that one screen. Every other
+ * screen that CAN render cards then opens in cards, and one that cannot falls
+ * back without forgetting the preference.
+ */
+const LAYOUT_STORAGE_KEY = "dataviews:layout";
+
+/**
+ * The density preference, remembered app-wide for the same reason as the layout:
+ * an operator who wants tight rows wants them on every list, not on one.
+ */
+const DENSITY_STORAGE_KEY = "dataviews:density";
+
+/**
+ * How much room each record gets. It means different things per layout, and
+ * that is the point — one control, phrased in the terms of what is on screen:
+ *
+ * - table / list → row height ("Baixa / Média / Alta")
+ * - cards        → how many fit per row ("Muitos / Médio / Poucos")
+ *
+ * The board is unaffected: its cards are already sized by the zoom slider.
+ */
+export type DataViewsDensity = "compact" | "cozy" | "comfortable";
+
+/** Every density this build knows — the guard's single source. */
+const DENSITIES: readonly DataViewsDensity[] = ["compact", "cozy", "comfortable"];
+
+/** Vertical padding (theme spacing units) per density, for a table or list row. */
+export const DENSITY_ROW_PADDING: Record<DataViewsDensity, number> = {
+  compact: 0.25,
+  cozy: 0.75,
+  comfortable: 1.5,
+};
+
+/** Card grid columns per density — how many cards land on one row. */
+export const DENSITY_CARD_COLUMNS: Record<DataViewsDensity, number> = {
+  compact: 5,
+  cozy: 4,
+  comfortable: 3,
+};
+
 /**
  * Map the 0–100 zoom to the card SIZE multiplier. This is the single knob: the
  * card's width is {@link BASE_CARD_WIDTH} × scale and its padding + typography
@@ -56,25 +105,159 @@ export function cardMinWidthForZoom(zoom: number): number {
   return Math.round(BASE_CARD_WIDTH * cardScaleForZoom(zoom));
 }
 
+/** Which layouts this table can actually render. */
+interface LayoutAvailability {
+  canUseCards: boolean;
+  canUseList: boolean;
+  canUseBoard: boolean;
+}
+
+/** Is this a layout string this build knows? Guards whatever is in storage. */
+function isLayout(value: unknown): value is DataViewsLayout {
+  return DATA_VIEWS_LAYOUTS.includes(value as DataViewsLayout);
+}
+
+/** Is this a density this build knows? Guards whatever is in storage. */
+function isDensity(value: unknown): value is DataViewsDensity {
+  return DENSITIES.includes(value as DataViewsDensity);
+}
+
+/** The remembered density, or undefined (no window, no value, junk). */
+function readStoredDensity(): DataViewsDensity | undefined {
+  try {
+    if (typeof window === "undefined") return undefined;
+    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);
+    return isDensity(stored) ? stored : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /**
- * Provides the view-type state. When cards aren't available the layout is pinned
- * to "table" regardless, so a consumer never renders a cards body without a
- * `renderCard`.
+ * Pin a layout to one this table can render. "Tabela" is always available, so it
+ * is the floor: a page with no `renderCard` never renders a cards body, one with
+ * no `renderListRow` never renders a list, and one with no `board` config never
+ * renders a board — whatever is stored, saved in a view, or requested.
+ */
+function pinLayout(layout: DataViewsLayout, available: LayoutAvailability): DataViewsLayout {
+  if (layout === "cards") return available.canUseCards ? "cards" : "table";
+  if (layout === "list") return available.canUseList ? "list" : "table";
+  if (layout === "board") return available.canUseBoard ? "board" : "table";
+  return "table";
+}
+
+/** The stored cross-screen preference, or undefined (no window, no value, junk). */
+function readStoredLayout(): DataViewsLayout | undefined {
+  // Guarded rather than assumed: this module is also imported in Node (tests,
+  // any SSR host), and a `localStorage` access can throw outright under a
+  // restrictive privacy setting — a thrown read must not take the grid with it.
+  try {
+    if (typeof window === "undefined") return undefined;
+    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);
+    return isLayout(stored) ? stored : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/** Remember a preference for every other screen. A failed write is not an error. */
+function writeStored(key: string, value: string): void {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(key, value);
+  } catch {
+    // Private mode / quota / disabled storage: the preference simply does not
+    // survive the session. Nothing about the current view depends on it.
+  }
+}
+
+interface LayoutProviderProps extends Partial<LayoutAvailability> {
+  /** Which layout to show first when the user has expressed no preference. */
+  defaultLayout?: DataViewsLayout;
+  /**
+   * The layout an APPLIED SAVED VIEW pins, when it stored one. It wins over the
+   * remembered preference for as long as that view is applied — the view is a
+   * snapshot someone chose to keep — but it does NOT overwrite the preference:
+   * only the toggle does that, because only the toggle is the user saying so.
+   */
+  viewLayout?: DataViewsLayout;
+  /**
+   * Ignore — and stop writing — the remembered cross-screen preference, making
+   * `defaultLayout` authoritative for this table.
+   *
+   * For a table that exists to SHOW a particular layout rather than to be
+   * browsed: a Storybook story called "Board", a docs example, a screenshot
+   * harness. Without it the remembered preference wins, so opening "Board"
+   * after having clicked Tabela anywhere renders a table — the demonstration
+   * silently showing the wrong thing, and a shared link doing it for everyone
+   * whose preference differs.
+   *
+   * A real screen leaves this off: remembering how someone likes to read
+   * lists is the point.
+   */
+  ignoreStoredLayout?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * Provides the view-type state, seeded from (in order) the applied saved view's
+ * layout, the user's remembered cross-screen preference, then `defaultLayout` —
+ * each pinned to what this table can actually render.
  */
 export function DataViewsLayoutProvider({
-  canUseCards,
+  canUseCards = false,
+  canUseList = false,
+  canUseBoard = false,
   defaultLayout = "table",
+  viewLayout,
+  ignoreStoredLayout = false,
   children,
-}: {
-  canUseCards: boolean;
-  defaultLayout?: DataViewsLayout;
-  children: ReactNode;
-}): React.JSX.Element {
-  const [layout, setLayout] = useState<DataViewsLayout>(canUseCards ? defaultLayout : "table");
+}: LayoutProviderProps): React.JSX.Element {
+  const availability = { canUseCards, canUseList, canUseBoard };
+  const [layout, setLayoutState] = useState<DataViewsLayout>(() =>
+    pinLayout(
+      viewLayout ?? (ignoreStoredLayout ? undefined : readStoredLayout()) ?? defaultLayout,
+      availability,
+    ),
+  );
+  const [density, setDensityState] = useState<DataViewsDensity>(
+    () => (ignoreStoredLayout ? undefined : readStoredDensity()) ?? "cozy",
+  );
   const [zoom, setZoom] = useState(DEFAULT_ZOOM);
+  // A newly applied view carrying a layout switches to it (its reference-change
+  // is the signal, exactly as `appliedState` works for the filters).
+  useEffect(() => {
+    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));
+    // Availability is derived from props that do not change for a mounted table.
+  }, [viewLayout]);
+  // Pin again on read: `canUseCards`/`canUseBoard` can flip for a mounted table
+  // (a page that supplies `renderCard` only once its card data has loaded), and
+  // a stale "cards" would otherwise render a cards body with no renderer.
+  const effective = pinLayout(layout, availability);
+
   const value = useMemo<DataViewsLayoutValue>(
-    () => ({ layout: canUseCards ? layout : "table", setLayout, canUseCards, zoom, setZoom }),
-    [layout, canUseCards, zoom],
+    () => ({
+      layout: effective,
+      setLayout: (next: DataViewsLayout) => {
+        const pinned = pinLayout(next, availability);
+        setLayoutState(pinned);
+        // Remember the user's own choice across every screen — see LAYOUT_STORAGE_KEY.
+        // A table pinned to a layout does not write: it would teach the
+        // preference a value the operator never chose.
+        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);
+      },
+      density,
+      setDensity: (next: DataViewsDensity) => {
+        setDensityState(next);
+        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);
+      },
+      canUseCards,
+      canUseList,
+      canUseBoard,
+      zoom,
+      setZoom,
+    }),
+    [effective, density, canUseCards, canUseList, canUseBoard, zoom],
   );
   return <DataViewsLayoutContext.Provider value={value}>{children}</DataViewsLayoutContext.Provider>;
 }
@@ -88,65 +271,18 @@ export function useDataViewsLayout(): DataViewsLayoutValue {
   return ctx;
 }
 
-/** The layout options, in menu order. */
-const GRADE_OPTION = { value: "cards" as const, label: "Grade", Icon: GridViewOutlinedIcon };
-const TABELA_OPTION = { value: "table" as const, label: "Tabela", Icon: ViewListOutlinedIcon };
-const LAYOUT_OPTIONS = [GRADE_OPTION, TABELA_OPTION];
-
-/**
- * The layout selector for the toolbar — a muted dropdown icon-button showing the
- * active view's icon + a chevron, opening a menu of Grade/Tabela with a check on
- * the active one. Mirrors the other toolbar dropdowns (Columns / Sort By) rather
- * than a pair of buttons. Renders nothing when the table has no cards layout, so
- * pages without a `renderCard` are unaffected.
- */
-export function DataViewsLayoutToggle({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element | null {
-  const { layout, setLayout, canUseCards } = useDataViewsLayout();
-  if (!canUseCards) return null;
-
-  const active = layout === "cards" ? GRADE_OPTION : TABELA_OPTION;
-  const ActiveIcon = active.Icon;
-
-  return (
-    <DropdownMenu
-      size="sm"
-      items={LAYOUT_OPTIONS.map((option) => ({
-        id: option.value,
-        // A check on the active option; the icon stays leading. `color` highlights
-        // the active row. NOTE: DropdownMenu drops onClick for items with a custom
-        // `component`, so keep to label/icon/onClick here.
-        label: option.value === layout ? `${option.label}  ✓` : option.label,
-        icon: <option.Icon fontSize="small" />,
-        color: option.value === layout ? ("primary" as const) : undefined,
-        onClick: () => setLayout(option.value),
-      }))}
-      trigger={
-        <Button
-          variant="text"
-          size="sm"
-          color="secondary"
-          aria-label={`Exibição: ${active.label}`}
-          dataTestId={`${testIdPrefix}-layout-toggle`}
-        >
-          <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.25 }}>
-            <ActiveIcon fontSize="small" />
-            <KeyboardArrowDownRoundedIcon fontSize="small" />
-          </Box>
-        </Button>
-      }
-    />
-  );
-}
-
 /**
- * Card-size slider for the toolbar — shown ONLY in the cards ("Grade") layout,
- * mirroring the tabwoah view-selector's zoom. Adjusts the card grid's min column
- * width so the shopper can pack more/larger cards. Renders nothing in the table
- * layout or when cards aren't available.
+ * Card-size slider for the toolbar — shown in the CARD-BASED layouts ("Grade"
+ * and "Quadro"), mirroring the tabwoah view-selector's zoom. The board reuses
+ * the same `renderCard`, so the same knob scales both.
+ *
+ * Deliberately ABSENT in "Lista" and "Tabela" (FUT-733): a list row is
+ * full-width and sized by its content, so a card-size multiplier has nothing to
+ * act on — a slider that moved and changed nothing would be worse than none.
  */
 export function DataViewsZoomSlider({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element | null {
-  const { layout, canUseCards, zoom, setZoom } = useDataViewsLayout();
-  if (!canUseCards || layout !== "cards") return null;
+  const { layout, zoom, setZoom } = useDataViewsLayout();
+  if (layout !== "cards" && layout !== "board") return null;
   return (
     <Box
       sx={{