@spree/dashboard-ui 0.1.0

package/src/spree/data-grid/use-stable-cell-registration.ts

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react'
+import { useDataGridContext } from './context'
+import type { CellCoords } from './types'
+
+interface CellHandlers {
+  focus: () => void
+  read: () => string
+  write: (value: string) => void
+  canWrite: (value: string) => boolean
+  getElement?: () => HTMLElement | null
+}
+
+/**
+ * Registers a cell with the data grid exactly once per `(row, col)` slot,
+ * forwarding read/write/focus through a ref so per-render closure changes
+ * don't re-trigger registration. Without this, every Controller-driven
+ * value change would unregister + re-register the cell, which (a) churns
+ * the bounds calculation and (b) lands us in setState-during-render loops
+ * when the registration effect tries to update grid state.
+ *
+ * Also reads `registerCell` from the context via a ref so the effect's deps
+ * stay limited to coords — the context object itself changes identity on
+ * every selection-state update, but `registerCell` is stable beneath it.
+ */
+export function useStableCellRegistration(coords: CellCoords, handlers: CellHandlers) {
+  const ctx = useDataGridContext()
+  const handlersRef = useRef(handlers)
+  handlersRef.current = handlers
+  const registerRef = useRef(ctx.registerCell)
+  registerRef.current = ctx.registerCell
+  // Destructure to primitives so the effect can list them as deps without
+  // pulling in the unstable `coords` object reference from the caller.
+  const { row, col } = coords
+
+  useEffect(() => {
+    return registerRef.current({
+      coords: { row, col },
+      focus: () => handlersRef.current.focus(),
+      read: () => handlersRef.current.read(),
+      write: (v) => handlersRef.current.write(v),
+      canWrite: (v) => handlersRef.current.canWrite(v),
+      getElement: () => handlersRef.current.getElement?.() ?? null,
+    })
+  }, [row, col])
+}

package/src/spree/drag-handle.tsx

@@ -0,0 +1,51 @@
+import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core'
+import { GripVerticalIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '../lib/utils'
+
+interface DragHandleProps extends Omit<ComponentProps<'button'>, 'type'> {
+  /** `attributes` from `useSortable` / `useDraggable`. */
+  attributes: DraggableAttributes
+  /** `listeners` from `useSortable` / `useDraggable`. */
+  listeners: DraggableSyntheticListeners
+}
+
+/**
+ * Standard drag handle for `useSortable` rows. Pair with a `useSortable` row
+ * by spreading its `attributes` + `listeners` onto this component:
+ *
+ * ```tsx
+ * const { attributes, listeners, setNodeRef, ... } = useSortable({ id })
+ * return (
+ *   <tr ref={setNodeRef}>
+ *     <td className="w-8 touch-none p-0">
+ *       <DragHandle attributes={attributes} listeners={listeners} />
+ *     </td>
+ *     ...
+ *   </tr>
+ * )
+ * ```
+ *
+ * The handle owns its own cursor styling (`cursor-grab` / `active:cursor-grabbing`),
+ * hover affordance, and accessible label — the caller only needs to size the
+ * surrounding cell (typically `w-8 touch-none p-0`).
+ */
+export function DragHandle({ attributes, listeners, className, ...props }: DragHandleProps) {
+  const { t } = useTranslation()
+  return (
+    <button
+      type="button"
+      aria-label={t('admin.a11y.drag_to_reorder')}
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-lg p-2 text-muted-foreground cursor-grab active:cursor-grabbing hover:bg-accent',
+        className,
+      )}
+      {...attributes}
+      {...listeners}
+      {...props}
+    >
+      <GripVerticalIcon className="size-4" />
+    </button>
+  )
+}

package/src/spree/form-actions.tsx

@@ -0,0 +1,140 @@
+import { useHotkey } from '@tanstack/react-hotkeys'
+import { Loader2Icon } from 'lucide-react'
+import { useEffect } from 'react'
+import { type FieldValues, type UseFormReturn, useFormState } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { Button } from '../ui/button'
+
+/**
+ * Submit button wired to a `react-hook-form` instance. Always rendered,
+ * disabled until the form is dirty. Replaces the legacy "footer pops up
+ * when something changes" pattern with an always-visible header.
+ *
+ * Reads `isDirty` and `isSubmitting` from the RHF form state via
+ * `useFormState`, so the button re-renders independently of the parent page
+ * and won't churn on every keystroke.
+ *
+ * Uses `<button type="submit">` and relies on the surrounding `<form>` to
+ * dispatch submission — same flow as the legacy sticky footer. ⌘S keyboard
+ * submission is handled separately by `useFormSubmitShortcut`.
+ */
+export function FormSaveButton<TFieldValues extends FieldValues>({
+  form,
+  label,
+  savingLabel,
+}: {
+  form: UseFormReturn<TFieldValues, any, any>
+  label?: string
+  savingLabel?: string
+}) {
+  const { t } = useTranslation()
+  const { isDirty, isSubmitting } = useFormState({ control: form.control })
+
+  return (
+    <Button type="submit" size="sm" disabled={!isDirty || isSubmitting}>
+      {isSubmitting && <Loader2Icon className="animate-spin" />}
+      {isSubmitting
+        ? (savingLabel ?? t('admin.actions.saving'))
+        : (label ?? t('admin.actions.save'))}
+    </Button>
+  )
+}
+
+/**
+ * Discard button wired to a `react-hook-form` instance. Renders only when
+ * the form is dirty (so the header stays uncluttered for read-only pages).
+ *
+ * Calls `form.reset()` by default — pass `onDiscard` to override (e.g., to
+ * reset to a freshly-fetched server value rather than the original mount
+ * defaults).
+ */
+export function FormDiscardButton<TFieldValues extends FieldValues>({
+  form,
+  label,
+  onDiscard,
+}: {
+  form: UseFormReturn<TFieldValues, any, any>
+  label?: string
+  onDiscard?: () => void
+}) {
+  const { t } = useTranslation()
+  const { isDirty, isSubmitting } = useFormState({ control: form.control })
+
+  if (!isDirty) return null
+
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="outline"
+      disabled={isSubmitting}
+      onClick={onDiscard ?? (() => form.reset())}
+    >
+      {label ?? t('admin.actions.discard')}
+    </Button>
+  )
+}
+
+/**
+ * Convenience: render Discard + Save side-by-side. Most pages just want both.
+ */
+export function FormActions<TFieldValues extends FieldValues>({
+  form,
+  saveLabel,
+  savingLabel,
+  discardLabel,
+  onDiscard,
+}: {
+  form: UseFormReturn<TFieldValues, any, any>
+  saveLabel?: string
+  savingLabel?: string
+  discardLabel?: string
+  onDiscard?: () => void
+}) {
+  return (
+    <>
+      <FormDiscardButton form={form} label={discardLabel} onDiscard={onDiscard} />
+      <FormSaveButton form={form} label={saveLabel} savingLabel={savingLabel} />
+    </>
+  )
+}
+
+/**
+ * Bind ⌘S / Ctrl+S to submit a `react-hook-form` instance. Mount once per
+ * form. Skips when the form is pristine or already submitting — same gate
+ * as the visual Save button. Schema validation still runs inside
+ * `form.handleSubmit`, so invalid input rejects on its own without us
+ * needing to read `isValid` (which is unreliable under the default
+ * `onSubmit` validation mode).
+ *
+ * Also wires `beforeunload` to warn if the user closes the tab or navigates
+ * away while the form is dirty. (TanStack Router internal navigation is not
+ * intercepted — the SPA's own dirty-route guard would belong elsewhere.)
+ */
+export function useFormSubmitShortcut<TFieldValues extends FieldValues>(
+  form: UseFormReturn<TFieldValues, any, any>,
+  onSubmit: (values: TFieldValues) => void | Promise<void>,
+) {
+  const { isDirty, isSubmitting } = useFormState({ control: form.control })
+
+  useHotkey(
+    'Mod+S',
+    () => {
+      if (!isDirty || isSubmitting) return
+      void form.handleSubmit(onSubmit)()
+    },
+    // Mod+S targets a form-level action, so it should fire even while focus
+    // is inside an input. Default for Mod-combos already does this; pinned
+    // here to be explicit and survive future library default changes.
+    { ignoreInputs: false },
+  )
+
+  useEffect(() => {
+    if (!isDirty) return
+    const handler = (event: BeforeUnloadEvent) => {
+      event.preventDefault()
+    }
+    window.addEventListener('beforeunload', handler)
+    return () => window.removeEventListener('beforeunload', handler)
+  }, [isDirty])
+}

package/src/spree/json-preview-drawer.tsx

@@ -0,0 +1,254 @@
+import {
+  Button,
+  cn,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  useCopyToClipboard,
+} from '@spree/dashboard-ui'
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  ExternalLinkIcon,
+  Loader2Icon,
+  RotateCcwIcon,
+  XIcon,
+} from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { type JsonValueLinkResolver, JsonValueView } from './json-value-view'
+
+// Re-export so existing imports of `JsonValueLinkResolver` from this module
+// keep working without touching call sites.
+export type { JsonValueLinkResolver } from './json-value-view'
+
+export interface JsonPreviewDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Display title shown in the drawer header. Default "JSON". */
+  title?: string
+  /**
+   * Fetcher that returns the resource JSON. Called every time the drawer
+   * opens (so it always shows the latest server state — it's a debug tool)
+   * and every time the user clicks the refresh button. The drawer manages
+   * its own loading/error state internally; no react-query is involved.
+   */
+  fetch: () => Promise<unknown>
+  /**
+   * Resource path the JSON came from, e.g. `'/api/v3/admin/orders/or_xyz'`.
+   * Shown in the toolbar and used as the "Open raw" target.
+   */
+  endpoint?: string
+  /**
+   * Turn string values (typically prefixed IDs) into clickable links to
+   * other admin pages. Omit to render every string as inert text — the
+   * default for plugin authors who haven't wired up their own ID→route
+   * convention.
+   */
+  resolveLink?: JsonValueLinkResolver
+}
+
+export function JsonPreviewDrawer({
+  open,
+  onOpenChange,
+  title,
+  fetch,
+  endpoint,
+  resolveLink,
+}: JsonPreviewDrawerProps) {
+  const { t } = useTranslation()
+  const resolvedTitle = title ?? t('admin.components.json_preview_drawer.title')
+  const [data, setData] = useState<unknown>(undefined)
+  const [error, setError] = useState<Error | null>(null)
+  const [isFetching, setIsFetching] = useState(false)
+  // True only on the first load of an opened session — `isFetching` covers
+  // subsequent refetches and animates the spinner button without blanking
+  // the previously rendered JSON.
+  const isLoading = isFetching && data === undefined && error === null
+
+  // Refetch on every open + when the resource being inspected changes + on
+  // manual refresh. The drawer is a debug tool, so staleness would be worse
+  // than the extra request. `endpoint` stands in for "which resource is this
+  // drawer pointing at" since it's a stable per-resource string; `fetch`
+  // intentionally isn't in the deps because a fresh inline-arrow identity
+  // every render would otherwise loop.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: see above
+  useEffect(() => {
+    if (!open) return
+    let cancelled = false
+    setIsFetching(true)
+    setError(null)
+    fetch()
+      .then((result) => {
+        if (cancelled) return
+        setData(result)
+      })
+      .catch((err) => {
+        if (cancelled) return
+        setError(err instanceof Error ? err : new Error(String(err)))
+      })
+      .finally(() => {
+        if (cancelled) return
+        setIsFetching(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [open, endpoint])
+
+  const refetch = () => {
+    setIsFetching(true)
+    setError(null)
+    fetch()
+      .then(setData)
+      .catch((err) => setError(err instanceof Error ? err : new Error(String(err))))
+      .finally(() => setIsFetching(false))
+  }
+
+  const [collapsed, setCollapsed] = useState<boolean | number>(2)
+  const { copied: copiedAll, copy } = useCopyToClipboard()
+
+  const formatted = useMemo(() => (data ? JSON.stringify(data, null, 2) : ''), [data])
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        className="w-full sm:max-w-2xl bg-zinc-950 text-zinc-100 border-zinc-800 overflow-hidden"
+      >
+        <SheetHeader className="border-b border-zinc-800 bg-zinc-950 text-zinc-100 rounded-t-xl">
+          <SheetTitle className="text-zinc-100 font-mono text-base">{resolvedTitle}</SheetTitle>
+          {endpoint && (
+            <SheetDescription className="text-zinc-400 font-mono text-xs">
+              GET {endpoint}
+            </SheetDescription>
+          )}
+          <ToolbarButton
+            size="icon-xs"
+            className="absolute top-3 right-3"
+            onClick={() => onOpenChange(false)}
+            aria-label={t('admin.actions.close')}
+          >
+            <XIcon className="size-4" />
+          </ToolbarButton>
+        </SheetHeader>
+
+        <div className="flex items-center gap-1 border-b border-zinc-800 px-3 py-2 text-xs">
+          <ToolbarButton
+            size="icon-xs"
+            onClick={() => setCollapsed(false)}
+            aria-label={t('admin.a11y.expand_all')}
+            title={t('admin.a11y.expand_all')}
+          >
+            <ChevronDownIcon className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            size="icon-xs"
+            onClick={() => setCollapsed(true)}
+            aria-label={t('admin.a11y.collapse_all')}
+            title={t('admin.a11y.collapse_all')}
+          >
+            <ChevronRightIcon className="size-4" />
+          </ToolbarButton>
+          <DepthControl value={collapsed} onChange={setCollapsed} />
+
+          <span className="ml-auto inline-flex items-center gap-1">
+            <ToolbarButton size="xs" onClick={() => formatted && copy(formatted)} disabled={!data}>
+              {copiedAll ? <CheckIcon className="size-3.5" /> : <CopyIcon className="size-3.5" />}
+              {copiedAll
+                ? t('admin.components.json_preview_drawer.copied')
+                : t('admin.components.json_preview_drawer.copy_all')}
+            </ToolbarButton>
+            <ToolbarButton
+              size="icon-xs"
+              onClick={() => refetch()}
+              aria-label={t('admin.a11y.refetch')}
+              title={t('admin.a11y.refetch')}
+              disabled={isFetching}
+            >
+              {isFetching ? (
+                <Loader2Icon className="size-3.5 animate-spin" />
+              ) : (
+                <RotateCcwIcon className="size-3.5" />
+              )}
+            </ToolbarButton>
+            {endpoint && (
+              <a
+                href={endpoint}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100 transition-colors"
+                title={t('admin.components.json_preview_drawer.open_raw')}
+              >
+                <ExternalLinkIcon className="size-3.5" />
+                {t('admin.components.json_preview_drawer.raw')}
+              </a>
+            )}
+          </span>
+        </div>
+
+        <div className="themed-scrollbar flex-1 overflow-auto p-4 font-mono text-sm">
+          {isLoading ? (
+            <p className="text-zinc-500">{t('admin.common.loading')}</p>
+          ) : error ? (
+            <p className="text-red-400">
+              {t('admin.components.json_preview_drawer.failed_to_load', { message: error.message })}
+            </p>
+          ) : data !== undefined ? (
+            // The drawer paints its own dark surface around the renderer
+            // (Sheet content + toolbar), so the view itself runs in `bare`
+            // mode — no extra padding/background.
+            <JsonValueView value={data} collapsed={collapsed} resolveLink={resolveLink} bare />
+          ) : null}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+function ToolbarButton({ className, ...props }: ComponentProps<typeof Button>) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      className={cn('text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100', className)}
+      {...props}
+    />
+  )
+}
+
+function DepthControl({
+  value,
+  onChange,
+}: {
+  value: boolean | number
+  onChange: (next: boolean | number) => void
+}) {
+  const { t } = useTranslation()
+  const current = typeof value === 'number' ? `${value}` : value === true ? 'all' : 'open'
+  return (
+    <select
+      value={current}
+      onChange={(e) => {
+        const v = e.target.value
+        if (v === 'all') onChange(true)
+        else if (v === 'open') onChange(false)
+        else onChange(Number(v))
+      }}
+      className="ml-1 bg-zinc-900 border border-zinc-700 rounded px-1.5 py-1 text-xs text-zinc-300 hover:bg-zinc-800 focus:outline-none focus:ring-1 focus:ring-zinc-600"
+      title={t('admin.components.json_preview_drawer.collapse_depth')}
+    >
+      <option value="open">{t('admin.a11y.expand_all')}</option>
+      <option value="1">{t('admin.components.json_preview_drawer.depth', { level: 1 })}</option>
+      <option value="2">{t('admin.components.json_preview_drawer.depth', { level: 2 })}</option>
+      <option value="3">{t('admin.components.json_preview_drawer.depth', { level: 3 })}</option>
+      <option value="all">{t('admin.a11y.collapse_all')}</option>
+    </select>
+  )
+}

package/src/spree/json-value-view.tsx

@@ -0,0 +1,149 @@
+import { Link } from '@tanstack/react-router'
+import JsonView from '@uiw/react-json-view'
+import { vscodeTheme } from '@uiw/react-json-view/vscode'
+import { cn } from '../lib/utils'
+
+/**
+ * Maps a string value (typically a prefixed ID like `or_abc123`) to an
+ * in-app route. Returned `to` is a `<Link to>` template; `params` is the
+ * positional-param map passed straight through. Return `null` for values
+ * that aren't linkable.
+ *
+ * No built-in prefix conventions ship with this component —
+ * `@spree/dashboard` provides Spree's `or`→orders / `prod`→products /
+ * `cus`→customers mapping at the call site so dashboard-ui stays
+ * Spree-vocabulary-free.
+ */
+export type JsonValueLinkResolver = (
+  value: string,
+) => { to: string; params: Record<string, string> } | null
+
+const VALUE_TYPE_STYLES: Record<string, { color: string; format: (v: unknown) => string }> = {
+  string: { color: 'text-emerald-300', format: (v) => `"${v}"` },
+  number: { color: 'text-amber-300', format: String },
+  bigint: { color: 'text-amber-300', format: String },
+  boolean: { color: 'text-purple-300', format: String },
+}
+
+export interface JsonValueViewProps {
+  /** JSON-serializable data to render. */
+  value: unknown
+  /**
+   * Collapse depth. `false` expands everything, `true` collapses everything,
+   * a `number` collapses below that depth. Default `2`.
+   */
+  collapsed?: boolean | number
+  /** Resolve prefixed-ID strings to in-app links. Omit for plain strings. */
+  resolveLink?: JsonValueLinkResolver
+  /** Class applied to the outer wrapper. The view always uses a dark theme so
+   * give it a dark surface (e.g. `bg-zinc-950`) when embedding into a light
+   * page; otherwise the syntax colours don't have enough contrast. */
+  className?: string
+  /** When true, renders no padding/background — useful when the parent already
+   * owns the surface chrome (e.g. inside a `<Card>` with its own padding). */
+  bare?: boolean
+}
+
+/**
+ * Read-only JSON tree viewer with optional ID-to-link resolution. Built on
+ * `@uiw/react-json-view` with a vscode-style theme. Pulls in ~30KB gzip of
+ * dependencies, so consumers should lazy-load this component via
+ * `React.lazy(() => import('@spree/dashboard-ui/spree/json-value-view'))`
+ * if it isn't on the critical path.
+ *
+ * @example  Inline preview inside a Card
+ *   <Card>
+ *     <CardContent className="bg-zinc-950">
+ *       <JsonValueView value={delivery.payload} bare />
+ *     </CardContent>
+ *   </Card>
+ *
+ * @example  Linked prefixed IDs
+ *   <JsonValueView value={order} resolveLink={resolveSpreePrefixToRoute} />
+ */
+export function JsonValueView({
+  value,
+  collapsed = 2,
+  resolveLink,
+  className,
+  bare = false,
+}: JsonValueViewProps) {
+  return (
+    <div
+      className={cn(
+        'font-mono text-sm',
+        // The vscode theme is dark — when the parent doesn't already paint a
+        // dark background, paint one here so the syntax colors stay legible.
+        !bare && 'bg-zinc-950 text-zinc-100 rounded-md p-3',
+        className,
+      )}
+    >
+      <JsonView
+        value={value as object}
+        style={{ ...vscodeTheme, '--w-rjv-background-color': 'transparent' } as React.CSSProperties}
+        collapsed={collapsed}
+        displayDataTypes={false}
+        displayObjectSize
+        enableClipboard
+        shortenTextAfterLength={60}
+        components={{
+          value: ({ value: v, type, ...rest }) => (
+            <ValueRenderer value={v} type={type} resolveLink={resolveLink} {...rest} />
+          ),
+        }}
+      />
+    </div>
+  )
+}
+
+interface ValueRendererProps {
+  value: unknown
+  type: string
+  resolveLink?: JsonValueLinkResolver
+}
+
+function ValueRenderer({
+  value,
+  type,
+  resolveLink,
+  ...rest
+}: ValueRendererProps & React.HTMLAttributes<HTMLSpanElement>) {
+  if (type === 'string' && typeof value === 'string' && resolveLink) {
+    const resolved = resolveLink(value)
+    if (resolved) {
+      return (
+        <span {...rest} className="text-emerald-300">
+          "
+          <Link
+            to={resolved.to}
+            params={resolved.params}
+            className="text-emerald-300 underline decoration-emerald-700 hover:decoration-emerald-300 transition-colors"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {value}
+          </Link>
+          "
+        </span>
+      )
+    }
+  }
+  return <JsonValueSpan value={value} type={type} {...rest} />
+}
+
+function JsonValueSpan({
+  value,
+  type,
+  ...rest
+}: {
+  value: unknown
+  type: string
+} & React.HTMLAttributes<HTMLSpanElement>) {
+  const style = value === null ? null : VALUE_TYPE_STYLES[type]
+  const color = value === null ? 'text-zinc-500' : (style?.color ?? 'text-zinc-300')
+  const display = value === null ? 'null' : style ? style.format(value) : String(value)
+  return (
+    <span {...rest} className={color}>
+      {display}
+    </span>
+  )
+}

package/src/spree/language-menu-items.tsx

@@ -0,0 +1,54 @@
+import { CheckIcon, LanguagesIcon } from 'lucide-react'
+import {
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '../ui/dropdown-menu'
+
+interface LanguageMenuItemsProps {
+  /** Translated "Language" label for the submenu trigger (passed by the app). */
+  label: string
+  /** Admin UI languages available to switch to ({ code, name } pairs). */
+  locales: ReadonlyArray<{ code: string; name: string }>
+  /** Currently active language code. */
+  value: string
+  onSelect: (code: string) => void
+}
+
+/**
+ * Admin UI language picker rendered inside the user dropdown menu as a nested
+ * submenu (a single "Language ▸" row that expands to the list), so the menu
+ * stays compact no matter how many languages are installed.
+ *
+ * Headless: the label, locale list, and change handler are passed in, so this
+ * component imports no i18n/data runtime. Renders nothing when fewer than two
+ * languages are installed: there's nothing to choose.
+ */
+export function LanguageMenuItems({ label, locales, value, onSelect }: LanguageMenuItemsProps) {
+  if (locales.length < 2) return null
+
+  const current = locales.find((l) => l.code === value)
+
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>
+        <LanguagesIcon className="size-4" />
+        {label}
+        {current && <span className="ml-auto text-xs text-muted-foreground">{current.name}</span>}
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent>
+        {locales.map((locale) => (
+          <DropdownMenuItem
+            key={locale.code}
+            closeOnClick={false}
+            onClick={() => onSelect(locale.code)}
+          >
+            {locale.name}
+            {value === locale.code && <CheckIcon className="ml-auto size-3.5" />}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  )
+}