@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/settings/settings-heading.tsx

@@ -1,67 +0,0 @@
-import { createContext, useContext } from "react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { CARD_TITLE_CLASS } from "./settings-card-classes";
-
-/** The heading a settings card's title becomes. */
-export type SettingsHeadingTag = "h2" | "h3" | "h4";
-
-const SettingsHeadingLevelContext = createContext<SettingsHeadingTag | null>(null);
-
-export interface SettingsHeadingLevelProps {
-  /** The element every kit setting card below titles itself with. */
-  level: SettingsHeadingTag;
-  children?: ReactNode;
-}
-
-/**
- * The level the kit's setting cards title themselves at (docs/settings-harmonization.md
- * §3.7). Inside {@link SettingsLayout} a card's title is a heading under the group's —
- * `h3` under the desktop's `h2`, `h2` under a phone group page's `h1` — and the layout
- * sets this for every card it renders. Outside one, nothing is set and the same cards
- * keep the plain `div` title they always had, so a card on an app's own page does not
- * suddenly put an `h3` into an outline that has no `h2`.
- *
- * Set it yourself only where an app lays out settings cards without the layout and
- * wants them in its outline: `<SettingsHeadingLevel level="h3">…</SettingsHeadingLevel>`.
- * `ProfileSetting`, `PasswordSetting`, `TwoFactorSetting`, `PasskeysSetting`,
- * `EmailChangeSetting`, `SessionsSetting`, `DataExportSetting`, `DeleteAccountSetting`
- * and `SettingsSection` read it.
- */
-export function SettingsHeadingLevel({ level, children }: SettingsHeadingLevelProps) {
-  return <SettingsHeadingLevelContext.Provider value={level}>{children}</SettingsHeadingLevelContext.Provider>;
-}
-
-/** The nearest {@link SettingsHeadingLevel}, or `null` outside one. */
-export function useSettingsHeadingLevel(): SettingsHeadingTag | null {
-  return useContext(SettingsHeadingLevelContext);
-}
-
-/**
- * A setting card's title at the settings type scale: a heading inside a
- * {@link SettingsHeadingLevel}, the plain `div` outside one.
- *
- * As a heading it takes `tabIndex={-1}`: `?focus=` moves focus to the card's heading so a
- * screen reader lands on the card it was sent to (§3.5), and a heading is not focusable
- * otherwise. No outline of its own — the ring round the card marks it.
- *
- * @internal The kit's cards use it; not part of the barrel.
- */
-export function SettingsCardTitle({ className, ...props }: ComponentPropsWithoutRef<"div">) {
-  const level = useSettingsHeadingLevel();
-  if (!level) return <div {...props} className={cn(CARD_TITLE_CLASS, className)} />;
-  return (
-    <SettingsHeading as={level} tabIndex={-1} {...props} className={cn(CARD_TITLE_CLASS, "outline-none", className)} />
-  );
-}
-
-/**
- * A heading at a level chosen at run time. Its own component, taking the tag as a prop
- * (as `CardTitle` does), so the element type is a prop and not a value computed in the
- * caller's render.
- *
- * @internal
- */
-export function SettingsHeading({ as: Tag, ...props }: { as: SettingsHeadingTag } & ComponentPropsWithoutRef<"h2">) {
-  return <Tag {...props} />;
-}

package/src/settings/settings-labels.ts

@@ -1,87 +0,0 @@
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-
-/**
- * The `settings` namespace (docs/settings-harmonization.md §4.3): the settings page's
- * own words, and the names and help lines of the five core groups every app shares —
- * appearance, account, security, notifications, data (§2.6). An app's own groups bring
- * their own words; any core label may be overridden like any kit label (prop >
- * `<UiKitProvider labels={{ settings }}>` > English).
- */
-
-/** A core group's two strings, as {@link SettingsGroup} takes them. */
-export interface SettingsGroupLabels {
-  /** The group's name. */
-  title: string;
-  /** One line: under the heading, and in the phone list. */
-  help: string;
-}
-
-/** The five groups whose words the kit ships (§2.6, §4.2). */
-export type SettingsCoreGroup = "appearance" | "account" | "security" | "notifications" | "data";
-
-export interface SettingsLabels {
-  /** The page's heading, and the back link's visible text on a phone's group page. */
-  title: string;
-  /** The search field's accessible name. */
-  search: string;
-  /** The search field's placeholder. */
-  searchPlaceholder: string;
-  /** The hit list's accessible name. */
-  results: string;
-  /** No hits for the trimmed query (§3.4). */
-  noMatches: (query: string) => string;
-  /** The button beside it that empties the field. */
-  clearSearch: string;
-  /** The phone's back link's accessible name: "‹ Settings" says where, this says what. */
-  back: string;
-  /** The sidebar's accessible name (the vertical tablist). */
-  sections: string;
-  /** A sidebar row's hit badge, read in place of the bare number while searching. */
-  matchCount: (count: number) => string;
-  /** The core groups' names and help lines. */
-  groups: Record<SettingsCoreGroup, SettingsGroupLabels>;
-}
-
-export const DEFAULT_SETTINGS_LABELS: SettingsLabels = {
-  title: "Settings",
-  search: "Search settings",
-  searchPlaceholder: "Search settings…",
-  results: "Matching settings",
-  noMatches: (query) => `No settings match “${query}”.`,
-  clearSearch: "Clear search",
-  back: "Back to settings",
-  sections: "Settings sections",
-  matchCount: (count) => (count === 1 ? "1 match" : `${count} matches`),
-  groups: {
-    appearance: {
-      title: "Appearance",
-      help: "Language, theme and how the app looks on this device.",
-    },
-    account: {
-      title: "Account",
-      help: "Your profile and your email address.",
-    },
-    security: {
-      title: "Security",
-      help: "How you sign in, and where you are signed in.",
-    },
-    notifications: {
-      title: "Notifications",
-      help: "What you are told about, when, and on which devices.",
-    },
-    data: {
-      title: "Data",
-      help: "Export what is yours, or delete it together with your account.",
-    },
-  },
-};
-
-/**
- * 0.31.1: the `settings` namespace, resolved — English, then the provider, then `labels`.
- * What an app reads for its catalogue's core group titles and help lines, and for the
- * page title "<group> · Settings · <app>" (settings contract §3.1), without restating
- * the namespace and its defaults (Kurvenschmiede's 0.31 adoption).
- */
-export function useSettingsLabels(labels?: LabelOverride<SettingsLabels>): SettingsLabels {
-  return useKitLabels("settings", DEFAULT_SETTINGS_LABELS, labels);
-}

package/src/settings/settings-layout.tsx

@@ -1,471 +0,0 @@
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import type { ReactElement, ReactNode } from "react";
-import { Link, useHref, useLocation } from "react-router";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { Button } from "../components/button";
-import { Card } from "../components/card";
-import { EmptyState } from "../components/empty-state";
-import { Tabs } from "../components/tabs";
-import { FOCUS_RING } from "../components/focus-ring";
-import { Chip } from "../components/chip";
-import { List, ListItem } from "../components/list";
-import type { ListItemLinkProps } from "../components/list";
-import { PageHeader } from "../components/page-header";
-import { SearchField } from "../components/search-field";
-import { cn } from "../lib/cn";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { createSearchIndex } from "../search/search-index";
-import type { SearchEntry } from "../search/search-index";
-import { normalizeSettingsBase, settingsHref, settingsKeywords, visibleSettingsEntries } from "./settings-catalogue";
-import type { SettingsEntry, SettingsGroup } from "./settings-catalogue";
-import { SettingsLayoutContext } from "./settings-context";
-import type { SettingsLayoutContextValue } from "./settings-context";
-import { SettingsHeadingLevel } from "./settings-heading";
-import { DEFAULT_SETTINGS_LABELS } from "./settings-labels";
-import type { SettingsLabels } from "./settings-labels";
-import { settingsFromListState, useSettingsRoute } from "./use-settings-route";
-import type { SettingsLayoutMode } from "./use-settings-route";
-import { useSettingsFocus } from "./use-settings-focus";
-
-/** The page's width cap (§3.2): `6xl` for settings, `7xl` for keksdose's admin, whose
- *  user table scrolled sideways at 6xl (dev#488). */
-export type SettingsLayoutWidth = "6xl" | "7xl";
-
-/** More entries than this and the search field shows by itself (§3.4): Kurvenschmiede has
- *  about twelve, keksdose 26; a page of six needs none. */
-export const SETTINGS_SEARCH_THRESHOLD = 8;
-
-/** The desktop sidebar's column: sticky beside a long group (§3.2). */
-const SIDEBAR_COLUMN = "mb-4 md:sticky md:top-6 md:mb-0 md:self-start";
-
-export interface SettingsLayoutProps<G extends string> {
-  /** The page's `h1`: "Settings", "Administration". Default: `labels.title`. */
-  title?: ReactNode;
-  /** The groups, in order (§4.2). */
-  groups: readonly SettingsGroup<G>[];
-  /** One entry per setting (§4.1). Hidden entries leave search; a group left without a
-   *  visible one is hidden. */
-  entries: readonly SettingsEntry<G>[];
-  /** `/settings` or `/admin`. The layout owns every path below it. */
-  basePath: string;
-  /** The group `/settings` opens on a desktop. Default: the first visible one. */
-  defaultGroup?: G;
-  /** Retired group ids and their successors, replaced in the address (§3.1). */
-  aliases?: Readonly<Partial<Record<string, G>>>;
-  /**
-   * The search field. Left out, it shows once more than {@link SETTINGS_SEARCH_THRESHOLD}
-   * entries are visible; `true` or `false` wins over the count — keksdose's admin keeps
-   * none (§3.4, §10.3). ⌘K gets the entries either way ({@link settingsSearchEntries}).
-   */
-  search?: boolean;
-  /** See {@link SettingsLayoutWidth}. Default `"6xl"`. */
-  width?: SettingsLayoutWidth;
-  /** The group's cards, in one column. `sub` is the path segment after the group, which
-   *  a card owns (`useSettingsLayout().selectSub`). */
-  renderGroup: (group: G, sub: string | null) => ReactNode;
-  /**
-   * Rows under the phone's group list that LEAVE settings — kastlan's "Administration",
-   * its import page (§3.3, §5). `ListItem`s with an `href`; the layout puts them in a list
-   * of their own, so they never read as a group. Not shown on a desktop, where the app's
-   * own navigation carries them.
-   */
-  phoneFooter?: ReactNode;
-  /**
-   * 0.42.0 (docs/admin-harmonization.md §2.5 decision 16): content under the section
-   * list on a desktop, in the same sticky column — the admin area's Tools list
-   * (`AdminToolLinks`). Not shown on a phone, where `phoneFooter` carries the same links.
-   */
-  sidebarFooter?: ReactNode;
-  /** Prop > `<UiKitProvider labels={{ settings }}>` > English. */
-  labels?: LabelOverride<SettingsLabels>;
-  /** See {@link SettingsLayoutMode}. Default `"auto"`: the screen decides. */
-  layout?: SettingsLayoutMode;
-  /**
-   * The app's name, the last part of the window's title: "Security · Settings ·
-   * Kastlan" (§3.1). Left out, the title ends at the page: "Security · Settings".
-   */
-  appName?: string;
-  /**
-   * The window's title (`document.title`, §3.1) — round 0.34 C8, KS U7. By default the
-   * layout writes "<group> · <page> · <appName>" while a group is open and
-   * "<page> · <appName>" on the phone's list, and puts back the title it found when it
-   * unmounts. `<page>` is `title` when that is a string, else `labels.title`.
-   *
-   * A function writes another order or another separator from the same parts; `false`
-   * leaves `document.title` to the app. Kastlan's `SettingsChrome` and Kurvenschmiede's
-   * `GroupTitle` were this effect written by hand, and Kurvenschmiede's admin page, on
-   * the same layout, had none — every admin section was titled "Kurvenschmiede".
-   */
-  documentTitle?: false | ((parts: SettingsDocumentTitleParts) => string);
-  className?: string;
-}
-
-/** What {@link SettingsLayoutProps.documentTitle} is given to write the window's title. */
-export interface SettingsDocumentTitleParts {
-  /** The open group's name, or `null` on the phone's list of groups. */
-  group: string | null;
-  /** The page: `title` when it is a string, else `labels.title` ("Settings"). */
-  page: string;
-  /** The `appName` prop, or `undefined`. */
-  appName: string | undefined;
-}
-
-/** "Security · Settings · Kastlan" (§3.1); a part that is missing is left out. */
-function defaultDocumentTitle({ group, page, appName }: SettingsDocumentTitleParts): string {
-  return [group, page, appName].filter((part): part is string => Boolean(part)).join(" · ");
-}
-
-interface Searchable<G extends string> extends SearchEntry {
-  anchor: string;
-  settingsGroup: G;
-}
-
-/**
- * The settings page (docs/settings-harmonization.md §3), and the admin page built the
- * same way (§5). keksdose's page is the reference for the desktop; the phone pattern and
- * the path segments are new for all three apps.
- *
- * **Desktop** (§3.2): the page's `PageHeader`, the search field, then a 14rem sidebar —
- * the kit's vertical `Tabs`, a link per group, sticky so a long group keeps the list in
- * view — beside the open group: its heading (`h2`), its help line and its cards in ONE
- * column, never a masonry (keksdose dev#490/#493).
- *
- * **Phone** (§3.3, below `md`): a drill-down. `/settings` is a list of the groups (icon,
- * name, help line, chevron) with `phoneFooter` under it; a group is a page of its own with
- * a back link, its name as the `h1` and the cards under it. It replaces keksdose's chip
- * strip.
- *
- * **Routes, history and `?focus=`** are {@link useSettingsRoute}'s and
- * {@link useSettingsFocus}'s. **Search** (§3.4) runs the kit's matcher over the catalogue:
- * accents folded, ranked, over the title, the group's name and the keywords. On a desktop
- * the sidebar dims the groups without hits and counts the others' while the hits replace
- * the group; on a phone they replace the list. A hit is a link to its card.
- *
- * The cards inside read {@link useSettingsLayout} for `selectSub`, and their titles are
- * headings under the group's ({@link SettingsHeadingLevel}).
- */
-export function SettingsLayout<G extends string>({
-  title,
-  groups,
-  entries,
-  basePath,
-  defaultGroup,
-  aliases,
-  search,
-  width = "6xl",
-  renderGroup,
-  phoneFooter,
-  sidebarFooter,
-  labels: labelsProp,
-  layout = "auto",
-  appName,
-  documentTitle,
-  className,
-}: SettingsLayoutProps<G>): ReactElement {
-  const labels = useKitLabels("settings", DEFAULT_SETTINGS_LABELS, labelsProp);
-  const base = normalizeSettingsBase(basePath);
-  const route = useSettingsRoute({ groups, entries, basePath: base, defaultGroup, aliases, layout });
-  const location = useLocation();
-  // The browser URL of an app path, for the sidebar's real links (a middle click opens a
-  // tab): `#/settings/…` under a hash router, the basename in front under a browser one.
-  const root = useHref("/").replace(/\/$/, "");
-  const panelId = useId();
-  const searchRef = useRef<HTMLInputElement>(null);
-  const [query, setQuery] = useState("");
-
-  const visibleEntries = useMemo(() => visibleSettingsEntries(groups, entries), [groups, entries]);
-  const showSearch = search ?? visibleEntries.length > SETTINGS_SEARCH_THRESHOLD;
-  const trimmed = query.trim();
-  const searching = showSearch && trimmed !== "";
-
-  const groupById = useMemo(() => new Map(route.groups.map((g) => [g.id, g])), [route.groups]);
-  const index = useMemo(
-    () =>
-      createSearchIndex<Searchable<G>>(
-        visibleEntries.map((e) => ({
-          id: e.id,
-          title: e.title,
-          keywords: [groupById.get(e.group)?.title ?? e.group, ...settingsKeywords(e.keywords)],
-          group: e.group,
-          anchor: e.anchor,
-          settingsGroup: e.group,
-        })),
-        // Every hit: the list is the page's whole answer, not a palette's top few.
-        { groupLimit: Infinity },
-      ),
-    [visibleEntries, groupById],
-  );
-  const hits = useMemo(() => (searching ? index.search(trimmed).map((h) => h.entry) : []), [searching, index, trimmed]);
-  const hitsByGroup = useMemo(() => {
-    const counts = new Map<G, number>();
-    for (const hit of hits) counts.set(hit.settingsGroup, (counts.get(hit.settingsGroup) ?? 0) + 1);
-    return counts;
-  }, [hits]);
-
-  const anchors = useMemo(() => new Set(entries.map((e) => e.anchor)), [entries]);
-  const { phone, group, sub, selectSub, select } = route;
-  const headingLevel = phone ? "h2" : "h3";
-  const context = useMemo<SettingsLayoutContextValue>(
-    () => ({
-      basePath: base,
-      group,
-      sub,
-      selectSub,
-      headingLevel,
-      hasAnchor: (anchor) => anchors.has(anchor),
-    }),
-    [base, group, sub, selectSub, headingLevel, anchors],
-  );
-
-  // Not while the address is about to be replaced (its removal of `focus` would undo the
-  // replace), not on the list, and not while the hits stand where the cards would be (a
-  // phone's group page has no search: a query left from its list does not count there).
-  const hitsShown = searching && (!phone || group === null);
-  useSettingsFocus(route.redirecting || group === null || hitsShown ? null : route.focus);
-
-  // A link inside the page. On a phone it opens a page of its own — a push that marks the
-  // list as the entry before it, so the group page's back is a real back. On a desktop
-  // it switches the group in place — a replace.
-  const { state } = location;
-  const renderLink = useCallback(
-    ({ href, ...props }: ListItemLinkProps) => (
-      <Link to={href} replace={!phone} state={phone ? settingsFromListState() : state} {...props} />
-    ),
-    [phone, state],
-  );
-
-  const clearSearch = () => {
-    setQuery("");
-    // The button that was pressed goes with the empty state; the field is where the
-    // next query is typed.
-    searchRef.current?.focus();
-  };
-
-  const pageTitle = title ?? labels.title;
-
-  // The window's title (§3.1). Computed to a string during render so the effect below
-  // runs when the words change, not whenever an inline `documentTitle` function is new.
-  // Each run puts back the title it found before writing its own, so a group switch
-  // ends where it began and the unmount leaves the title the page had before settings.
-  const windowTitle =
-    documentTitle === false
-      ? null
-      : (documentTitle ?? defaultDocumentTitle)({
-          group: group === null ? null : (groupById.get(group)?.title ?? null),
-          page: typeof title === "string" ? title : labels.title,
-          appName,
-        });
-  useEffect(() => {
-    if (windowTitle === null) return;
-    const before = document.title;
-    document.title = windowTitle;
-    return () => {
-      document.title = before;
-    };
-  }, [windowTitle]);
-
-  const pageClass = cn("mx-auto w-full space-y-4 p-4 md:p-6", width === "7xl" ? "max-w-7xl" : "max-w-6xl", className);
-
-  const searchField = showSearch ? (
-    <SearchField
-      ref={searchRef}
-      className="max-w-md"
-      value={query}
-      onChange={setQuery}
-      aria-label={labels.search}
-      placeholder={labels.searchPlaceholder}
-    />
-  ) : null;
-
-  const results =
-    hits.length === 0 ? (
-      <EmptyState
-        title={labels.noMatches(trimmed)}
-        action={
-          <Button variant="secondary" size="sm" onClick={clearSearch}>
-            {labels.clearSearch}
-          </Button>
-        }
-      />
-    ) : (
-      <Card className="p-1">
-        <List separator="divider" density="comfortable" aria-label={labels.results}>
-          {hits.map((hit) => (
-            <ListItem
-              key={hit.id}
-              title={hit.title}
-              trailing={groupById.get(hit.settingsGroup)?.title}
-              href={settingsHref(base, hit.settingsGroup, hit.anchor)}
-              renderLink={renderLink}
-              // Leave search on the way: the hit's card is what the user asked for.
-              onClick={() => setQuery("")}
-            />
-          ))}
-        </List>
-      </Card>
-    );
-
-  const cards = (open: G) => (
-    <SettingsHeadingLevel level={headingLevel}>
-      <div className="space-y-4">{renderGroup(open, sub)}</div>
-    </SettingsHeadingLevel>
-  );
-
-  let body: ReactNode;
-  if (phone) {
-    const open = group === null ? undefined : groupById.get(group);
-    body = open ? (
-      <div className={pageClass} data-settings-view="group">
-        <PageHeader
-          size="compact"
-          documentTitle={false}
-          title={open.title}
-          description={open.help}
-          breadcrumbs={
-            <Link
-              to={base || "/"}
-              aria-label={labels.back}
-              onClick={(e) => {
-                // A real link for a middle click; a plain click is the page's own back,
-                // which is `navigate(-1)` when the list is the entry before this one.
-                if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-                e.preventDefault();
-                route.back();
-              }}
-              className={cn(
-                "-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-muted hover:text-primary",
-                FOCUS_RING,
-              )}
-            >
-              <ChevronLeft aria-hidden className="size-4 rtl:-scale-x-100" />
-              {pageTitle}
-            </Link>
-          }
-        />
-        {cards(open.id)}
-      </div>
-    ) : (
-      <div className={pageClass} data-settings-view="list">
-        <PageHeader size="compact" documentTitle={false} title={pageTitle} />
-        {searchField}
-        {searching ? (
-          results
-        ) : (
-          <Card className="p-1">
-            <List separator="divider" density="comfortable" aria-label={labels.sections}>
-              {route.groups.map((g) => (
-                <ListItem
-                  key={g.id}
-                  href={settingsHref(base, g.id)}
-                  renderLink={renderLink}
-                  leading={
-                    <span
-                      aria-hidden
-                      className="flex size-8 shrink-0 items-center justify-center rounded-md bg-surface-2 text-secondary [&_svg]:size-4"
-                    >
-                      {g.icon}
-                    </span>
-                  }
-                  title={g.title}
-                  subtitle={g.help}
-                  trailing={
-                    g.badge == null ? (
-                      <ChevronRight aria-hidden className="size-4 rtl:-scale-x-100" />
-                    ) : (
-                      // The group's badge (0.48) before the chevron, the two as one end.
-                      <span className="flex items-center gap-2">
-                        {g.badge}
-                        <ChevronRight aria-hidden className="size-4 rtl:-scale-x-100" />
-                      </span>
-                    )
-                  }
-                />
-              ))}
-            </List>
-          </Card>
-        )}
-        {!searching && phoneFooter != null && (
-          <Card className="p-1">
-            <List separator="divider" density="comfortable">
-              {phoneFooter}
-            </List>
-          </Card>
-        )}
-      </div>
-    );
-  } else {
-    const open = group === null ? undefined : groupById.get(group);
-    // The section list alone, or (0.42) with the app's `sidebarFooter` under it in one
-    // sticky column.
-    const withSidebarFooter = (tabs: ReactNode) =>
-      sidebarFooter == null ? (
-        tabs
-      ) : (
-        <div className={cn(SIDEBAR_COLUMN, "space-y-6")}>
-          {tabs}
-          <div data-slot="settings-sidebar-footer">{sidebarFooter}</div>
-        </div>
-      );
-    body = (
-      <div className={pageClass} data-settings-view="desktop">
-        <PageHeader size="compact" documentTitle={false} title={pageTitle} />
-        {searchField}
-        <div className="md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:gap-6">
-          {withSidebarFooter(
-            <Tabs<G>
-              orientation="vertical"
-              aria-label={labels.sections}
-              // Sticky (new in the harmonisation, §3.2): keksdose's notifications group
-              // scrolls for screens, and the list should stay in view beside it. With a
-              // `sidebarFooter` the column round both is the sticky one.
-              className={sidebarFooter == null ? SIDEBAR_COLUMN : undefined}
-              panelId={open && !searching ? panelId : undefined}
-              tabs={route.groups.map((g) => {
-                const count = hitsByGroup.get(g.id) ?? 0;
-                // While searching, the groups with nothing to show step back (keksdose).
-                const dim = searching && count === 0;
-                return {
-                  id: g.id,
-                  href: `${root}${settingsHref(base, g.id)}`,
-                  name: g.title,
-                  label: <span className={cn(dim && "opacity-40")}>{g.title}</span>,
-                  icon: <span className={cn("inline-flex [&_svg]:size-4", dim && "opacity-40")}>{g.icon}</span>,
-                  // While searching, the hit count; otherwise the group's own badge (0.48).
-                  badge: searching ? (
-                    count > 0 ? (
-                      <Chip size="sm" tone="brand">
-                        <span aria-hidden>{count}</span>
-                        <span className="sr-only-fixed">{labels.matchCount(count)}</span>
-                      </Chip>
-                    ) : undefined
-                  ) : (
-                    g.badge
-                  ),
-                };
-              })}
-              active={(open?.id ?? route.groups[0]?.id) as G}
-              onChange={(id) => {
-                // While searching the hits stand where the group would; a click on a group
-                // means "go there", so the search makes way (keksdose).
-                setQuery("");
-                select(id);
-              }}
-            />,
-          )}
-          <div className="min-w-0 space-y-4">
-            {searching ? (
-              results
-            ) : open ? (
-              <div id={panelId} role="tabpanel" aria-labelledby={`${panelId}-tab`} className="space-y-4">
-                <PageHeader as="h2" size="sm" title={open.title} description={open.help} />
-                {cards(open.id)}
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return <SettingsLayoutContext.Provider value={context}>{body}</SettingsLayoutContext.Provider>;
-}