Merge pull request #18845 from ethereum/refactor/extract-catalog-component

refactor: extract config-driven FilterableCatalog from ToolsCatalog (find-wallet revamp PR 1)

Author: pettinarip

app/[locale]/developers/tools/_components/ToolsCatalog.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { useId } from "react"
+
+import Checkbox from "@/components/ui/checkbox"
+
+import { numberFormat } from "@/lib/utils/numbers"
+
+import type { CatalogCheckboxGroupConfig } from "./types"
+
+type CatalogCheckboxGroupProps = {
+  locale: string
+  config: CatalogCheckboxGroupConfig
+  /** Currently selected option ids */
+  selectedIds: string[]
+  onToggle: (optionId: string) => void
+}
+
+/**
+ * Controlled sidebar building block: a labelled group of independent checkboxes.
+ * Purely presentational — value in (`selectedIds`), event out (`onToggle`); it
+ * holds no filter state of its own and doesn't know how selections are stored or
+ * how the group combines with others (that's the consumer's `filterFn`).
+ */
+export default function CatalogCheckboxGroup({
+  locale,
+  config,
+  selectedIds,
+  onToggle,
+}: CatalogCheckboxGroupProps) {
+  const nf = numberFormat(locale)
+  const labelId = useId()
+
+  return (
+    <div role="group" aria-labelledby={labelId} className="space-y-1">
+      <p id={labelId} className="px-3 py-2 text-sm font-bold">
+        {config.label}
+      </p>
+      {config.options.map((option) => (
+        <label
+          key={option.id}
+          className="flex cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 text-sm hover:bg-background-highlight"
+        >
+          <Checkbox
+            checked={selectedIds.includes(option.id)}
+            onCheckedChange={() => onToggle(option.id)}
+          />
+          <span className="flex-1 select-none">{option.label}</span>
+          {typeof option.count === "number" && (
+            <span className="text-xs text-body-medium">
+              {nf.format(option.count)}
+            </span>
+          )}
+        </label>
+      ))}
+    </div>
+  )
+}

src/components/FilterableCatalog/CatalogCheckboxGroup.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import { ChevronRight } from "lucide-react"
+
+import { Button } from "@/components/ui/buttons/Button"
+import { BaseLink } from "@/components/ui/Link"
+
+import { cn } from "@/lib/utils/cn"
+import { numberFormat } from "@/lib/utils/numbers"
+
+import type { CatalogNavGroupConfig } from "./types"
+
+type CatalogNavGroupProps = {
+  locale: string
+  config: CatalogNavGroupConfig
+  /** Currently selected child id (single-select), or undefined for none */
+  selectedChildId?: string
+  onSelectChild: (childId?: string) => void
+}
+
+/**
+ * Controlled sidebar building block: top-level entries are route links to
+ * server-rendered listing pages; the children of the current entry are a
+ * single-select filter. Purely presentational — value in (`selectedChildId`),
+ * event out (`onSelectChild`); it holds no filter state of its own.
+ */
+export default function CatalogNavGroup({
+  locale,
+  config,
+  selectedChildId,
+  onSelectChild,
+}: CatalogNavGroupProps) {
+  const nf = numberFormat(locale)
+  const hasCurrentItem = config.items.some((item) => item.isCurrent)
+
+  return (
+    <div className="space-y-1">
+      <BaseLink
+        href={config.allHref}
+        className={cn(
+          "flex w-full items-center justify-between rounded-md px-3 py-2 text-start text-sm no-underline hover:bg-background-highlight",
+          !hasCurrentItem && "bg-background-highlight text-primary"
+        )}
+      >
+        <span>{config.allLabel}</span>
+        <span className="text-xs text-body-medium">
+          {nf.format(config.allCount)}
+        </span>
+      </BaseLink>
+
+      {config.items.map((item) => {
+        const isItemActive = item.isCurrent && !selectedChildId
+
+        return (
+          <div key={item.id} className="space-y-1">
+            <BaseLink
+              href={item.href}
+              className={cn(
+                "flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm no-underline hover:bg-background-highlight",
+                isItemActive && "bg-background-highlight text-primary"
+              )}
+              onClick={() => {
+                if (item.isCurrent) onSelectChild(undefined)
+              }}
+            >
+              <ChevronRight
+                className={cn(
+                  "size-4 text-body-medium transition-transform",
+                  item.isCurrent && "rotate-90"
+                )}
+              />
+              <span className="flex-1">{item.label}</span>
+              <span className="text-xs text-body-medium">
+                {nf.format(item.count)}
+              </span>
+            </BaseLink>
+            {item.isCurrent && item.children && (
+              <div className="ms-5 space-y-1 border-s ps-2">
+                {item.children.map((child) => (
+                  <Button
+                    key={child.id}
+                    variant="ghost"
+                    isSecondary
+                    className={cn(
+                      "flex min-h-0 w-full items-center justify-between rounded-md px-3 py-1.5 text-start text-xs font-normal hover:bg-background-highlight",
+                      selectedChildId === child.id && "bg-background-highlight"
+                    )}
+                    onClick={() => {
+                      onSelectChild(
+                        selectedChildId === child.id ? undefined : child.id
+                      )
+                    }}
+                  >
+                    <span>{child.label}</span>
+                    {typeof child.count === "number" && (
+                      <span className="text-2xs text-body-medium">
+                        {nf.format(child.count)}
+                      </span>
+                    )}
+                  </Button>
+                ))}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}