@stapel/search-react 0.7.0 → 0.8.0

package/src/default/SearchPage.tsx

@@ -66,10 +66,13 @@ import type {
   CategoryFilterSlotProps,
   GeoFilterSlotProps,
 } from "./FacetPanelPane.js";
+import { FilterChips } from "./FilterChips.js";
 import { PageSizeSelect } from "./PageSizeSelect.js";
 import { SearchBox } from "./SearchBox.js";
 import { SearchResultsPane } from "./SearchResultsPane.js";
 import { SortSelect } from "./SortSelect.js";
+import { SEARCH_BUILTIN_VIEWS, ViewSwitch, resolveView } from "./ViewSwitch.js";
+import type { SearchView } from "./ViewSwitch.js";
 import type { DegradationNoticeVariant } from "./DegradationNotice.js";
 import type { SearchCardRenderer } from "./SearchResultCard.js";
 import { UrlIssueNotice } from "./UrlIssueNotice.js";
@@ -91,10 +94,31 @@ export type SearchFiltersLayout = "column" | "sheet";
  */
 export const FILTERS_RAIL_WIDTH = 280;
 
-/** The rail: fixed, never squeezed, never grown. */
+/**
+ * The rail: fixed width, never squeezed, never grown — and STICKY.
+ *
+ * A catalogue page is thirty cards long and the filters are at the top of it,
+ * so by the fourth row of results the controls that narrow the list are a
+ * screenful above the list they narrow: the only way to change a filter after
+ * scrolling was to scroll back. The rail now stays put while the results move
+ * under it, and scrolls INTERNALLY when its own content is taller than the
+ * window (`overflowY: auto` + a viewport-height cap), which is the one place a
+ * viewport measure is right — the sticky box's height IS the window's.
+ *
+ * `alignSelf: flex-start` is load-bearing: a flex child stretches to the row's
+ * height by default, and a stretched box has nothing to stick to.
+ */
 const RAIL: CSSProperties = {
   flex: `0 0 ${String(FILTERS_RAIL_WIDTH)}px`,
   maxWidth: FILTERS_RAIL_WIDTH,
+  position: "sticky",
+  top: 0,
+  alignSelf: "flex-start",
+  maxHeight: "100dvh",
+  overflowY: "auto",
+  overscrollBehavior: "contain",
+  // Room for the focus ring of the last control against the scroll edge.
+  paddingBlockEnd: spacing[2],
 };
 
 /** The results take what is left. `minWidth: 0` so a long word inside a card
@@ -152,6 +176,45 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
   readonly defaultFiltersOpen?: boolean;
   /** Offer a page-size control beside the sort. Default `true`. */
   readonly pageSize?: boolean;
+  /**
+   * The trail above the heading — "Home / Cars / Sedans".
+   *
+   * A SLOT, because a breadcrumb is a walk up the CATEGORY tree and the tree
+   * belongs to `categories-react`; a search package knows the `category`
+   * parameter's value and nothing about its ancestors. Rendered above the
+   * results heading, inside the results column, so it sits over the list it
+   * describes rather than over the whole two-column page.
+   */
+  readonly breadcrumb?: ReactNode;
+  /**
+   * The arrangements the view switch offers. Default: the pair's own list and
+   * grid. A deployment adds its own — `{ id: "map", labelKey, icon, render }`
+   * — and the switch treats it like the two that ship; see {@link SearchView}.
+   *
+   * A single view draws no switch at all.
+   */
+  readonly views?: readonly SearchView[];
+  /** Which arrangement the page opens in. Default: the first of `views`. */
+  readonly defaultView?: string;
+  /** Told when the arrangement changes, for a host that remembers it. The
+   * view is NOT url state — see `<ViewSwitch>` for why. */
+  readonly onViewChange?: (id: string) => void;
+  /**
+   * The action at the trailing end of the results toolbar — conventionally
+   * "notify me about new ones".
+   *
+   * A SLOT, and it cannot be anything else: saving a search and mailing its
+   * new hits is a subscription with an owner, a schedule and a consent record,
+   * none of which this pair has. What the pair CAN state is where such a
+   * control belongs and that the page keeps room for it.
+   */
+  readonly resultsAction?: ReactNode;
+  /**
+   * Heading level for the results caption. Default `1` — on a results SCREEN
+   * the list's name is the page's heading. A container that already prints its
+   * own `<h1>` above this page passes a lower level.
+   */
+  readonly resultsHeadingLevel?: 1 | 2 | 3 | 4 | 5;
 }
 
 interface SearchPageBodyProps {
@@ -169,6 +232,12 @@ interface SearchPageBodyProps {
   readonly filtersLayout?: SearchFiltersLayout;
   readonly defaultFiltersOpen?: boolean;
   readonly pageSize?: boolean;
+  readonly breadcrumb?: ReactNode;
+  readonly views?: readonly SearchView[];
+  readonly defaultView?: string;
+  readonly onViewChange?: (id: string) => void;
+  readonly resultsAction?: ReactNode;
+  readonly resultsHeadingLevel?: 1 | 2 | 3 | 4 | 5;
 }
 
 /**
@@ -190,6 +259,18 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
     props.filtersLayout ?? (surface === "sheet" ? "sheet" : "column");
   const [sheetOpen, setSheetOpen] = useState(props.defaultFiltersOpen === true);
 
+  // How the results are ARRANGED. Component state, not URL state: it changes
+  // how the same answer is drawn, never what the answer is, so it must not
+  // rewrite the meaning of a link somebody shared (`<ViewSwitch>` §the view is
+  // not URL state).
+  const views = props.views ?? SEARCH_BUILTIN_VIEWS;
+  const [viewId, setViewId] = useState<string | undefined>(props.defaultView);
+  const view = resolveView(views, viewId) ?? { id: "", labelKey: "" };
+  const changeView = (next: string): void => {
+    setViewId(next);
+    props.onViewChange?.(next);
+  };
+
   /**
    * "Show 25 results", not "Show results".
    *
@@ -256,16 +337,23 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
     </Flex>
   );
 
+  // The toolbar over the results: how they are ARRANGED, how they are ORDERED,
+  // how many per page — and the surface's own action at the trailing end.
   const toolbar = (
     <Flex align="center" wrap gap={spacing[3]}>
+      <ViewSwitch views={views} value={view.id} onChange={changeView} />
       <SortSelect />
       {props.pageSize !== false && <PageSizeSelect />}
+      {props.resultsAction}
     </Flex>
   );
 
   const results = (
     <SearchResultsPane
       toolbar={toolbar}
+      headingLevel={props.resultsHeadingLevel ?? 1}
+      {...(view.render !== undefined ? { renderResults: view.render } : {})}
+      {...(view.layout !== undefined ? { layout: view.layout } : {})}
       {...(props.renderCard !== undefined ? { renderCard: props.renderCard } : {})}
       {...(props.footer !== undefined ? { footer: props.footer } : {})}
       {...(props.resultsHeading !== undefined
@@ -286,26 +374,29 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
       data-filters-layout={layout}
     >
       {props.searchBox !== false && <SearchBox />}
+      {props.breadcrumb !== undefined && (
+        <div data-testid="search-breadcrumb">{props.breadcrumb}</div>
+      )}
       <UrlIssueNotice />
 
       {showFilters && layout === "sheet" ? (
         <>
-          <Button
-            block
-            data-testid="search-filters-open"
-            data-analytics="none"
-            data-analytics-reason="opening the filter sheet is a read, not a flow step"
-            onClick={() => {
+          {/* The phone's filter row. It REPLACES the full-width "Filters (3)"
+              button that used to stand here: that button said how many
+              constraints were applied and not one word about WHICH, and put
+              every filter behind one tap onto a sheet you then had to scroll.
+              The chips state the filters on the page — and the leading chip is
+              still the whole panel, for the person who wants all of it. */}
+          <FilterChips
+            onOpenAll={() => {
               setSheetOpen(true);
             }}
-          >
-            {/* "Filters (0)" is a count of nothing printed on the control that
-                opens the thing that would produce one. The count appears when
-                there is a count. */}
-            {facets.activeFilters === 0
-              ? t(SEARCH_I18N_KEYS.facetsTitle)
-              : t(SEARCH_I18N_KEYS.filtersOpen, { count: facets.activeFilters })}
-          </Button>
+            {...(categoryFeatures !== undefined ? { categoryFeatures } : {})}
+            {...(locale !== undefined ? { locale } : {})}
+            {...(props.renderGeoFilter !== undefined
+              ? { renderGeoFilter: props.renderGeoFilter }
+              : {})}
+          />
           <SkinDialog
             open={sheetOpen}
             onClose={() => {
@@ -368,6 +459,12 @@ export function SearchPage(props: SearchPageProps): ReactElement {
     filtersLayout,
     defaultFiltersOpen,
     pageSize,
+    breadcrumb,
+    views,
+    defaultView,
+    onViewChange,
+    resultsAction,
+    resultsHeadingLevel,
     mode,
     ...parseOptions
   } = props;
@@ -390,6 +487,12 @@ export function SearchPage(props: SearchPageProps): ReactElement {
           {...(filtersLayout !== undefined ? { filtersLayout } : {})}
           {...(defaultFiltersOpen !== undefined ? { defaultFiltersOpen } : {})}
           {...(pageSize !== undefined ? { pageSize } : {})}
+          {...(breadcrumb !== undefined ? { breadcrumb } : {})}
+          {...(views !== undefined ? { views } : {})}
+          {...(defaultView !== undefined ? { defaultView } : {})}
+          {...(onViewChange !== undefined ? { onViewChange } : {})}
+          {...(resultsAction !== undefined ? { resultsAction } : {})}
+          {...(resultsHeadingLevel !== undefined ? { resultsHeadingLevel } : {})}
         />
       </SearchStateProvider>
     </SkinTheme>

package/src/default/SearchResultsPane.tsx

@@ -45,6 +45,7 @@ import { DegradationNotice } from "./DegradationNotice.js";
 import type { DegradationNoticeVariant } from "./DegradationNotice.js";
 import { SearchResultCard } from "./SearchResultCard.js";
 import type { SearchCardRenderer } from "./SearchResultCard.js";
+import type { SearchResultsLayout } from "./ViewSwitch.js";
 import type { ThemeModeProp } from "./types.js";
 
 /**
@@ -84,6 +85,20 @@ const RESULTS_GRID: CSSProperties = {
   alignItems: "stretch",
 };
 
+/**
+ * The LIST arrangement: one wide row per result.
+ *
+ * The same grid with one track, deliberately — not a second layout mechanism.
+ * A list is a grid whose column count is one, and expressing it that way is
+ * what keeps the card slot, the gap and the stretch identical between the two
+ * arrangements, so switching views cannot change anything except the number of
+ * columns.
+ */
+const RESULTS_LIST: CSSProperties = {
+  ...RESULTS_GRID,
+  gridTemplateColumns: "1fr",
+};
+
 export interface SearchResultsPaneProps extends ThemeModeProp {
   /**
    * The card slot (spec §6.2 item 1). A storefront passes
@@ -135,6 +150,24 @@ export interface SearchResultsPaneProps extends ThemeModeProp {
   /** Widest the column of results may grow (default {@link RESULTS_MAX_WIDTH});
    * `null` lets the container decide. */
   readonly maxWidth?: number | null;
+  /**
+   * How the loaded rows are arranged: as many card columns as fit
+   * (`"grid"`, the default) or one wide row each (`"list"`). The view SWITCH
+   * that flips this lives in `<ViewSwitch>`; the pane only draws.
+   *
+   * Ignored when `renderResults` replaces the arrangement entirely.
+   */
+  readonly layout?: SearchResultsLayout;
+  /**
+   * Heading level for the results caption. Default `4`, which is what every
+   * surface that EMBEDS this pane under its own title needs.
+   *
+   * `<SearchPage>` passes `1`: on a results SCREEN the list's name is the
+   * page's heading, and a page whose only heading is an `<h4>` has a document
+   * outline that starts three levels down — the thing a screen reader's
+   * heading list is for.
+   */
+  readonly headingLevel?: 1 | 2 | 3 | 4 | 5;
 }
 
 function Count(props: { bag: SearchResultsBag }): ReactElement | null {
@@ -217,7 +250,7 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
           <Flex vertical gap={spacing[4]}>
             <Flex justify="space-between" align="center" wrap gap={spacing[2]}>
               <Typography.Title
-                level={4}
+                level={props.headingLevel ?? 4}
                 style={{ margin: 0 }}
                 data-testid="search-results-heading"
               >
@@ -270,7 +303,11 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
                   {renderResults !== undefined ? (
                     renderResults(items)
                   ) : (
-                    <div style={RESULTS_GRID} data-testid="search-results-grid">
+                    <div
+                      style={props.layout === "list" ? RESULTS_LIST : RESULTS_GRID}
+                      data-testid="search-results-grid"
+                      data-layout={props.layout ?? "grid"}
+                    >
                       {items.map((item: SearchItem) => (
                         <div key={item.key}>
                           {renderCard !== undefined ? (

package/src/default/ViewSwitch.tsx

@@ -0,0 +1,147 @@
+/**
+ * `<ViewSwitch>` — how the results are ARRANGED: a list, a grid, or something
+ * the deployment brought with it.
+ *
+ * ## Why two of the three views ship and the third is a slot
+ *
+ * A list and a grid are the SAME data in two arrangements: one column of wide
+ * rows, or as many card columns as fit. That is a layout decision and a search
+ * pair can take it. A MAP is not — it needs a tile source, a projection, a
+ * marker layer and a geocoder, all of which live in `geo-react` and none of
+ * which a search package may depend on. So the third view arrives as a
+ * {@link SearchView} the host declares, with its own `render`, and this
+ * component treats it exactly like the two it ships. A pair that hardcoded a
+ * "map" button and then had nothing to draw would be offering a control that
+ * cannot work — the defect class the fleet calls a silent slot.
+ *
+ * ## The view is not URL state, and that is deliberate
+ *
+ * `sort`, `page size`, every filter and the cursor are in the query string,
+ * because they change WHAT the answer is and a shared link has to carry them.
+ * The view changes only how the same answer is drawn. Putting it in the URL
+ * would make every arrangement flip a new history entry and would rewrite the
+ * meaning of a link somebody sent. The page holds it in component state and
+ * offers `defaultView`/`onViewChange` so a host that wants it remembered can
+ * persist it wherever it keeps preferences.
+ */
+import type { ReactElement, ReactNode } from "react";
+import { Segmented } from "antd";
+import { useT } from "@stapel/core";
+import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
+import type { SearchResultsRenderer } from "./SearchResultsPane.js";
+
+/** How the pane's own arrangements lay a page of results out. */
+export type SearchResultsLayout = "grid" | "list";
+
+/** One arrangement offered by the switch. */
+export interface SearchView {
+  /** Stable id — what `defaultView`/`onViewChange` speak in. */
+  readonly id: string;
+  /** i18n KEY for the view's name (never a literal: the switch is chrome). */
+  readonly labelKey: string;
+  /** The glyph beside the name. Omitted, the name stands alone. */
+  readonly icon?: ReactNode;
+  /**
+   * One of the pane's own arrangements. Ignored when {@link SearchView.render}
+   * is present, which replaces the arrangement entirely.
+   */
+  readonly layout?: SearchResultsLayout;
+  /**
+   * The whole result surface, for a view the pair cannot draw — a map, a
+   * comparison table. It receives the loaded rows; the pane keeps its four
+   * load arms around it, so "nothing found" and "we could not run this search"
+   * stay the pane's sentences rather than the slot's problem.
+   */
+  readonly render?: SearchResultsRenderer;
+}
+
+/** Rows — one wide row per result, the arrangement a scan reads fastest. */
+function ListGlyph(): ReactElement {
+  return (
+    <ViewGlyph>
+      <path d="M4 6.5h16M4 12h16M4 17.5h16" />
+    </ViewGlyph>
+  );
+}
+
+/** Cards — as many columns as fit. */
+function GridGlyph(): ReactElement {
+  return (
+    <ViewGlyph>
+      <rect x="4" y="4" width="7" height="7" rx="1.5" />
+      <rect x="13" y="4" width="7" height="7" rx="1.5" />
+      <rect x="4" y="13" width="7" height="7" rx="1.5" />
+      <rect x="13" y="13" width="7" height="7" rx="1.5" />
+    </ViewGlyph>
+  );
+}
+
+function ViewGlyph(props: { readonly children: ReactNode }): ReactElement {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      role="img"
+      aria-hidden="true"
+    >
+      {props.children}
+    </svg>
+  );
+}
+
+/** The two arrangements the pair itself can draw. */
+export const SEARCH_BUILTIN_VIEWS: readonly SearchView[] = [
+  {
+    id: "list",
+    labelKey: SEARCH_I18N_KEYS.viewList,
+    icon: <ListGlyph />,
+    layout: "list",
+  },
+  {
+    id: "grid",
+    labelKey: SEARCH_I18N_KEYS.viewGrid,
+    icon: <GridGlyph />,
+    layout: "grid",
+  },
+];
+
+/** The view `id` currently in force, or the first offered one. */
+export function resolveView(
+  views: readonly SearchView[],
+  id: string | undefined
+): SearchView | undefined {
+  return views.find((view) => view.id === id) ?? views[0];
+}
+
+export interface ViewSwitchProps {
+  readonly views: readonly SearchView[];
+  readonly value: string;
+  readonly onChange: (id: string) => void;
+}
+
+/**
+ * The switch itself. Renders nothing for a single view: a control offering one
+ * choice is not a control, it is a label that can be clicked.
+ */
+export function ViewSwitch(props: ViewSwitchProps): ReactElement | null {
+  const t = useT();
+  if (props.views.length < 2) return null;
+  return (
+    <Segmented<string>
+      aria-label={t(SEARCH_I18N_KEYS.viewLabel)}
+      value={props.value}
+      data-testid="search-view-switch"
+      onChange={props.onChange}
+      options={props.views.map((view) => ({
+        value: view.id,
+        label: t(view.labelKey),
+        ...(view.icon !== undefined ? { icon: view.icon } : {}),
+      }))}
+    />
+  );
+}

package/src/default/index.ts

@@ -43,6 +43,21 @@ export type {
   SearchResultsRenderer,
 } from "./SearchResultsPane.js";
 
+export { FilterChips, CHIP_ROW_CLASS, CHIP_ROW_STYLE_HREF, chipRowCss } from "./FilterChips.js";
+export type { FilterChipsProps } from "./FilterChips.js";
+
+export {
+  FacetGroupControl,
+  facetGroupShape,
+  facetOptionNodes,
+  FACET_VISIBLE_OPTIONS,
+} from "./FacetGroupControl.js";
+export type {
+  FacetGroupControlProps,
+  FacetGroupShape,
+  FacetOptionNode,
+} from "./FacetGroupControl.js";
+
 export { FacetPanelPane } from "./FacetPanelPane.js";
 export type {
   FacetPanelPaneProps,
@@ -58,6 +73,8 @@ export { SearchBox } from "./SearchBox.js";
 export type { SearchBoxProps } from "./SearchBox.js";
 export { SortSelect, SORT_SELECT_MIN_WIDTH } from "./SortSelect.js";
 export type { SortSelectProps } from "./SortSelect.js";
+export { ViewSwitch, SEARCH_BUILTIN_VIEWS, resolveView } from "./ViewSwitch.js";
+export type { ViewSwitchProps, SearchView, SearchResultsLayout } from "./ViewSwitch.js";
 export { PageSizeSelect, SEARCH_PAGE_SIZES } from "./PageSizeSelect.js";
 export type { PageSizeSelectProps } from "./PageSizeSelect.js";
 export { LanguageSelect } from "./LanguageSelect.js";

package/src/i18n/es.ts

@@ -55,6 +55,10 @@ export const searchI18nBundleEs: I18nDictionary = {
   "search.sort.distance": "Más cercanos",
   "search.sort.server_chose": "Ordenado por {sort}",
 
+  "search.view.label": "Vista",
+  "search.view.list": "Lista",
+  "search.view.grid": "Cuadrícula",
+
   "search.facets.title": "Filtros",
   "search.facets.loading": "Cargando filtros…",
   "search.facets.load_failed": "No pudimos cargar los filtros.",
@@ -74,6 +78,8 @@ export const searchI18nBundleEs: I18nDictionary = {
   "search.facets.range_clear": "Quitar",
   "search.facets.range_from_aria": "{feature}, desde",
   "search.facets.range_to_aria": "{feature}, hasta",
+  "search.facets.show_all": "Ver todos ({count})",
+  "search.facets.show_less": "Ver menos",
   "search.facets.range_invalid":
     "«Desde» es mayor que «hasta», así que nada podría coincidir. Intercámbialos para aplicar el rango.",
 
@@ -84,6 +90,9 @@ export const searchI18nBundleEs: I18nDictionary = {
   "search.filters.show_count_at_least.one": "Ver {count}+ resultado",
   "search.filters.show_count_at_least.other": "Ver {count}+ resultados",
   "search.filters.dismiss": "Cerrar los filtros",
+  "search.filters.chips_label": "Filtros",
+  "search.filters.all": "Todos los filtros",
+  "search.filters.chip_more": ", +{count}",
 
   "search.category.title": "Categoría",
   "search.category.clear": "Buscar en todo el catálogo",

package/src/i18n/keys.ts

@@ -74,6 +74,13 @@ export const SEARCH_I18N_KEYS = {
   sortDistance: "search.sort.distance",
   sortServerChose: "search.sort.server_chose",
 
+  // ── how the results are ARRANGED (see ViewSwitch) ────────────────────────
+  /** The switch's own accessible name — a `Segmented` renders a radiogroup
+   * with no `<label for>` to name it. */
+  viewLabel: "search.view.label",
+  viewList: "search.view.list",
+  viewGrid: "search.view.grid",
+
   // ── facets ───────────────────────────────────────────────────────────────
   facetsTitle: "search.facets.title",
   facetsLoading: "search.facets.loading",
@@ -96,6 +103,12 @@ export const SEARCH_I18N_KEYS = {
   facetsRangeToAria: "search.facets.range_to_aria",
   /** The reason "Apply" is off: the range reads backwards. */
   facetsRangeInvalid: "search.facets.range_invalid",
+  /** The fold on a long facet group: "Show all (46)". The number is in
+   * brackets and not a counted noun, so this is one message and not a plural
+   * family — "(1)" never renders, because a group is only folded when the
+   * tail is longer than one row. */
+  facetsShowAll: "search.facets.show_all",
+  facetsShowLess: "search.facets.show_less",
 
   // ── the filter panel as a whole (phone sheet + host slots) ───────────────
   filtersOpen: "search.filters.open",
@@ -107,6 +120,15 @@ export const SEARCH_I18N_KEYS = {
   /** "Show N+ results" — a FLOOR on the same button. A PLURAL FAMILY. */
   filtersShowCountAtLeast: "search.filters.show_count_at_least",
   filtersDismiss: "search.filters.dismiss",
+  /** The accessible name of the phone chip ROW — a `role="group"` holding a
+   * dozen buttons is announced as nothing at all without one. */
+  filtersChipsLabel: "search.filters.chips_label",
+  /** The leading, icon-only chip: the whole panel. Icon-only means the name
+   * exists ONLY here, so this key is the control's entire accessibility. */
+  filtersAll: "search.filters.all",
+  /** A chip filtering on more than one value: "Bosch, +2". Not a plural
+   * family — nothing is being counted in words. */
+  filtersChipMore: "search.filters.chip_more",
 
   // ── category (a host slot, plus the control that removes it) ─────────────
   categoryTitle: "search.category.title",
@@ -239,6 +261,10 @@ export const searchI18nBundleEn: Record<string, string> = {
   "search.sort.distance": "Nearest first",
   "search.sort.server_chose": "Sorted by {sort}",
 
+  "search.view.label": "View",
+  "search.view.list": "List",
+  "search.view.grid": "Grid",
+
   "search.facets.title": "Filters",
   "search.facets.loading": "Loading filters…",
   "search.facets.load_failed": "We could not load the filters",
@@ -258,6 +284,8 @@ export const searchI18nBundleEn: Record<string, string> = {
   "search.facets.range_clear": "Clear",
   "search.facets.range_from_aria": "{feature}, from",
   "search.facets.range_to_aria": "{feature}, up to",
+  "search.facets.show_all": "Show all ({count})",
+  "search.facets.show_less": "Show fewer",
   "search.facets.range_invalid":
     "“From” is larger than “to”, so nothing could match. Swap them to apply this range.",
 
@@ -268,6 +296,9 @@ export const searchI18nBundleEn: Record<string, string> = {
   "search.filters.show_count_at_least.one": "Show {count}+ result",
   "search.filters.show_count_at_least.other": "Show {count}+ results",
   "search.filters.dismiss": "Close the filters",
+  "search.filters.chips_label": "Filters",
+  "search.filters.all": "All filters",
+  "search.filters.chip_more": ", +{count}",
 
   "search.category.title": "Category",
   "search.category.clear": "Search the whole catalogue",

package/src/i18n/ru.ts

@@ -78,6 +78,10 @@ export const searchI18nBundleRu: I18nDictionary = {
   "search.sort.distance": "Сначала ближние",
   "search.sort.server_chose": "Отсортировано: {sort}",
 
+  "search.view.label": "Вид",
+  "search.view.list": "Списком",
+  "search.view.grid": "Плиткой",
+
   "search.facets.title": "Фильтры",
   "search.facets.loading": "Загружаем фильтры…",
   "search.facets.load_failed": "Не удалось загрузить фильтры.",
@@ -97,6 +101,8 @@ export const searchI18nBundleRu: I18nDictionary = {
   "search.facets.range_clear": "Сбросить",
   "search.facets.range_from_aria": "{feature}, от",
   "search.facets.range_to_aria": "{feature}, до",
+  "search.facets.show_all": "Показать все ({count})",
+  "search.facets.show_less": "Свернуть",
   "search.facets.range_invalid":
     "«От» больше, чем «до», — под такой диапазон ничего не подойдёт. Поменяйте значения местами.",
 
@@ -111,6 +117,9 @@ export const searchI18nBundleRu: I18nDictionary = {
   "search.filters.show_count_at_least.many": "Показать {count}+ объявлений",
   "search.filters.show_count_at_least.other": "Показать {count}+ объявления",
   "search.filters.dismiss": "Закрыть фильтры",
+  "search.filters.chips_label": "Фильтры",
+  "search.filters.all": "Все фильтры",
+  "search.filters.chip_more": ", +{count}",
 
   "search.category.title": "Категория",
   "search.category.clear": "Искать по всему каталогу",