@spree/dashboard-core 0.13.1 → 1.0.0-beta.1

package/src/components/page-header.tsx

@@ -5,16 +5,24 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
+  ExternalLink,
   useConfirm,
   useCopyToClipboard,
   useScrolled,
 } from '@spree/dashboard-ui'
+import {
+  BracesIcon,
+  CheckIcon,
+  CopyIcon,
+  EllipsisVerticalIcon,
+  TrashIcon,
+} from '@spree/dashboard-ui/icons'
 import type { JsonPreviewDrawerProps } from '@spree/dashboard-ui/spree/json-preview-drawer'
-import { BracesIcon, CheckIcon, CopyIcon, EllipsisVerticalIcon, TrashIcon } from 'lucide-react'
 import { lazy, type ReactNode, Suspense, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { docsUrl } from '../lib/docs'
+import { useRegisterPageHeader, useStickyHeaderOffset } from '../providers/sticky-header-provider'
 import { Slot } from './slot'
 
 // JSON drawer is a developer-only feature; pulling its tree (which includes
@@ -45,22 +53,57 @@ export interface PageHeaderResource {
 }
 
 interface PageHeaderProps {
-  /** Main title (left of any badges). */
+  /** Main title, on its own line. */
   title: ReactNode
-  /** Small text below or beside the title (updated_at badge, customer email, etc.). */
+  /**
+   * Whether the header pins to the top of the scroll container. Default true,
+   * which is right for a detail page: the title and its Save button have to
+   * stay reachable down a long form.
+   *
+   * A list page passes `false`. There the table's own column row is the band
+   * worth pinning — it is what a reader needs while scrolling rows — and two
+   * stacked sticky bands spend a third of a short viewport on chrome. Turning
+   * this off also stops the header publishing a sticky offset, so the column
+   * row pins to the top of the sheet rather than below a header that is no
+   * longer there.
+   */
+  sticky?: boolean
+  /** Small text beside the badges (updated_at badge, customer email, etc.). */
   subtitle?: ReactNode
+  /**
+   * One line under the title saying what the page is for. Unlike `subtitle`,
+   * which shares the badge row and answers "where is this now", this explains
+   * the feature itself — worth writing for something a merchant meets for the
+   * first time (catalogs, price lists, transfers) and worth leaving off a page
+   * that explains itself.
+   */
+  description?: ReactNode
+  /**
+   * Documentation for the feature, linked at the end of the description.
+   * Relative to the user guide, or a full URL for a plugin's own docs.
+   */
+  docsPath?: string
   /** Back button target — passed to <BackButton fallback="..."/>. Omit for top-level pages. */
   backTo?: string
-  /** Status badges rendered next to the title. Use <StatusBadge /> for consistency. */
+  /** Status badges, on the line under the title. Use <StatusBadge />. */
   badges?: ReactNode
   /** Primary action buttons (rightmost, before the dropdown). Most pages use this for "Save". */
   actions?: ReactNode
   /**
-   * Domain-specific items to render at the top of the more-actions dropdown
-   * (e.g., Complete/Approve/Cancel on orders). Rendered above the
-   * `page.actions_dropdown` slot and the auto-wired Copy ID / Delete items.
+   * Domain-specific items for the top group of the more-actions dropdown
+   * (e.g. Preview, Resend, Approve on orders). Rendered above the
+   * `page.actions_dropdown` slot and the standard Copy ID / JSON items.
+   *
+   * Destructive entries belong in `destructiveItems`, not here — the dropdown
+   * orders its three groups itself so every page reads the same way.
    */
   dropdownItems?: ReactNode
+  /**
+   * Destructive domain actions (Cancel order, a delete with its own confirm).
+   * Always rendered last, in the same group as the auto-wired Delete, so a
+   * page can never put a red item above the standard actions.
+   */
+  destructiveItems?: ReactNode
   /**
    * The resource being edited. When supplied, PageHeader renders the legacy
    * "more actions" dropdown (Copy ID, Copy number, Delete). When omitted, the
@@ -70,14 +113,22 @@ interface PageHeaderProps {
   /** Slot context name. Defaults to inferring from `resource` keys. Optional. */
   slotContext?: Record<string, unknown>
   /**
-   * Called after the user confirms the auto-rendered Delete action.
-   * When provided, the Delete item is enabled. The confirmation prompt is
-   * fixed ("Are you sure? This action cannot be undone.") — pass `dropdownItems`
-   * directly if you need a custom delete flow.
+   * Called after the user confirms the auto-rendered Delete action. When
+   * provided, the Delete item is enabled. PageHeader owns the confirmation,
+   * so the handler must not prompt again — pass `dropdownItems` directly if
+   * you need a delete flow this cannot express.
    */
   onDelete?: () => void | Promise<void>
   /** Override the destructive label ("Delete order", "Delete product", etc.). */
   deleteLabel?: string
+  /**
+   * Replaces the generic "Are you sure?" prompt. Say what goes with the
+   * record — "Its zones and delivery methods go with it" — since that is what
+   * the reader cannot see from the button.
+   */
+  deleteConfirmMessage?: string
+  /** Heading for the delete prompt. Defaults to none, as the message carries it. */
+  deleteConfirmTitle?: string
   /**
    * When supplied, the more-actions dropdown gains a "View as JSON" item that
    * opens a developer-style drawer with the resource payload.
@@ -96,20 +147,28 @@ interface PageHeaderProps {
  */
 export function PageHeader({
   title,
+  sticky = true,
   subtitle,
+  description,
+  docsPath,
   backTo,
   badges,
   actions,
   dropdownItems,
+  destructiveItems,
   resource,
   slotContext,
   onDelete,
   deleteLabel,
+  deleteConfirmMessage,
+  deleteConfirmTitle,
   jsonPreview,
 }: PageHeaderProps) {
   const { t } = useTranslation()
   const slotCtx = { ...slotContext, resource }
-  const showDropdown = Boolean(resource || onDelete || dropdownItems || jsonPreview)
+  const showDropdown = Boolean(
+    resource || onDelete || dropdownItems || destructiveItems || jsonPreview,
+  )
   const [jsonOpen, setJsonOpen] = useState(false)
   // Latches true on first open so the drawer (and its lazy JsonView chunk)
   // doesn't mount until the user actually invokes it, but stays mounted
@@ -120,15 +179,28 @@ export function PageHeader({
     setJsonOpen(true)
   }
   const scrolled = useScrolled()
+  // Publishes this header's measured height as the sticky offset every other
+  // pinned band reads (`top-header-height`): the table's pinned column row,
+  // the bulk-action bar. There is no top bar any more, so this header IS the
+  // chrome above the scroll area — and its height genuinely varies with
+  // badges, a subtitle and wrapped actions, which a fixed constant could only
+  // approximate. Measured rather than assumed, so those bands sit flush
+  // against it at every size.
+  const headerRef = useStickyHeaderOffset(sticky)
+  // Announces this header so the page's other headings pick the right level —
+  // a table below one renders its title as `h2` rather than a second `h1`.
+  useRegisterPageHeader()
 
   return (
-    // Sticky below the TopBar (which sticks at `top-0`, height
-    // `--spacing-header-height`) so the title, badges, and primary actions
-    // (notably Save on form pages) stay reachable as the user scrolls long
-    // detail pages. `bg-background` masks the content scrolling behind it;
+    // Pins at the very top of the viewport — with the top bar gone, the title,
+    // badges and primary actions (notably Save on form pages) are the only
+    // chrome that needs to stay reachable down a long page.
+    //
+    // `bg-card` masks the content scrolling behind it — the same surface as
+    // the content sheet this sits in, so the pinned band is invisible at rest
+    // rather than a stripe of the page ground across the top of a white sheet;
     // `-mx-4 px-4 lg:-mx-6 lg:px-6` and `-mt-4 lg:-mt-6 pt-4 lg:pt-6` undo
-    // and re-apply the parent padding so the sticky band runs edge-to-edge
-    // and there's no transparent gap between the TopBar and the header.
+    // and re-apply the parent padding so the sticky band runs edge-to-edge.
     //
     // The `::after` pseudo-element is the bottom hairline — it fades in
     // once the user scrolls (so the header blends at rest, separates when
@@ -137,27 +209,70 @@ export function PageHeader({
     // collide with the page edges; the `border-border` color it carries is
     // the same hairline used elsewhere in the app.
     <header
+      ref={headerRef}
       className={cn(
-        'sticky top-header-height z-20 -mx-4 -mt-4 flex items-start gap-3 bg-background px-4 pt-4 pb-3 lg:-mx-6 lg:-mt-6 lg:px-6 lg:pt-6',
-        'after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:opacity-0 after:transition-opacity after:duration-150 after:[mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]',
-        scrolled && 'after:opacity-100',
+        // One row at every width. The title truncates rather than wrapping,
+        // so it yields space to the actions instead of pushing them onto a
+        // second row — a page with only a Save button was spending two rows
+        // of a short viewport on chrome.
+        // Opaque for the same reason as the top bar: this band pins over the
+        // page's own scrolling content, so a translucent fill lets that content
+        // ghost through it.
+        '-mx-4 -mt-4 flex flex-row items-start gap-2 bg-card p-4 sm:gap-3 lg:-mx-6 lg:-mt-6 lg:px-6 lg:pt-6',
+        sticky && 'sticky top-0 z-20',
+        'transition-[box-shadow] duration-200 ease-out motion-reduce:transition-none',
+        'after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:opacity-0 after:transition-opacity after:duration-200 after:[mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]',
+        sticky && scrolled && 'after:opacity-100 shadow-xs',
       )}
     >
-      {backTo && <BackButton fallback={backTo} />}
+      {/* Row one: back button beside the title, so the arrow keeps its
+          relationship to the heading rather than floating above it. */}
+      <div className="flex min-w-0 flex-1 items-start gap-3">
+        {backTo && <BackButton fallback={backTo} />}
 
-      {/* Title + badges share the first row; subtitle drops to its own line
-          underneath so descriptive prose doesn't get crammed alongside the
-          heading. Short metadata subtitles (customer location, order status
-          hint) read fine on the second line too. */}
-      <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-          <h1 className="text-2xl font-medium leading-tight">{title}</h1>
-          {badges}
+        {/* The heading owns its line, with everything that qualifies it on
+            the line below, so the eye reads the name first rather than
+            picking it out of a row it shares. */}
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          {/* Smaller and clipped on a phone: sharing the row with the actions
+              leaves a long product name too little width to wrap into
+              anything readable. */}
+          <h1 className="min-w-0 truncate font-semibold text-xl leading-tight sm:text-2xl sm:whitespace-normal">
+            {title}
+          </h1>
+          {/* Statuses and the timestamp share the second line: both answer
+              "where is this now", so splitting them costs a row and reads as
+              two separate facts. The subtitle is clamped on a phone, where a
+              long one would make the sticky band tall enough to eat the page. */}
+          {(badges || subtitle) && (
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+              {badges}
+              {subtitle && (
+                <span className="line-clamp-2 text-sm text-muted-foreground sm:line-clamp-none">
+                  {subtitle}
+                </span>
+              )}
+            </div>
+          )}
+          {(description || docsPath) && (
+            <p className="text-muted-foreground text-sm">
+              {description}
+              {docsPath && (
+                <>
+                  {description ? ' ' : null}
+                  <ExternalLink href={docsUrl(docsPath)}>
+                    {t('admin.common.learn_more')}
+                  </ExternalLink>
+                </>
+              )}
+            </p>
+          )}
         </div>
-        {subtitle && <span className="text-sm text-muted-foreground">{subtitle}</span>}
       </div>
 
-      <div className="ml-auto flex items-center gap-2">
+      {/* Pinned to the end of the row. `shrink-0` so the actions keep their
+          full width and the title absorbs the shortfall. */}
+      <div className="flex shrink-0 items-center justify-end gap-2 sm:ml-auto">
         <Slot name="page.actions" context={slotCtx} />
         {actions}
         {showDropdown && (
@@ -165,8 +280,11 @@ export function PageHeader({
             resource={resource}
             slotContext={slotCtx}
             dropdownItems={dropdownItems}
+            destructiveItems={destructiveItems}
             onDelete={onDelete}
             deleteLabel={deleteLabel ?? t('admin.actions.delete')}
+            deleteConfirmMessage={deleteConfirmMessage}
+            deleteConfirmTitle={deleteConfirmTitle}
             onOpenJson={jsonPreview ? openJson : undefined}
           />
         )}
@@ -189,8 +307,11 @@ interface PageActionsDropdownProps {
   resource?: PageHeaderResource
   slotContext: Record<string, unknown>
   dropdownItems?: ReactNode
+  destructiveItems?: ReactNode
   onDelete?: () => void | Promise<void>
   deleteLabel: string
+  deleteConfirmMessage?: string
+  deleteConfirmTitle?: string
   onOpenJson?: () => void
 }
 
@@ -198,8 +319,11 @@ function PageActionsDropdown({
   resource,
   slotContext,
   dropdownItems,
+  destructiveItems,
   onDelete,
   deleteLabel,
+  deleteConfirmMessage,
+  deleteConfirmTitle,
   onOpenJson,
 }: PageActionsDropdownProps) {
   const { t } = useTranslation()
@@ -208,42 +332,60 @@ function PageActionsDropdown({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button size="icon-sm" variant="outline" aria-label={t('admin.actions.more_actions')}>
+        <Button size="icon" variant="outline" aria-label={t('admin.actions.more_actions')}>
           <EllipsisVerticalIcon className="size-4" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        {dropdownItems}
-        <Slot name="page.actions_dropdown" context={slotContext} />
+      {/* Three fixed groups, in this order: domain actions, standard actions,
+          destructive actions. The order lives here rather than in each caller
+          so every record page's menu reads the same way.
 
-        {onOpenJson && (
-          <DropdownMenuItem onClick={onOpenJson}>
-            <BracesIcon className="size-4" />
-            {t('admin.components.page_header.view_as_json')}
-          </DropdownMenuItem>
-        )}
-        {resource?.number && (
-          <CopyToClipboardItem
-            label={t('admin.components.page_header.copy_number')}
-            value={resource.number}
-          />
-        )}
-        {resource && (
-          <CopyToClipboardItem
-            label={t('admin.components.page_header.copy_id')}
-            value={resource.id}
-          />
-        )}
+          Dividers are drawn by CSS (`:not(:empty) ~ :not(:empty)`) rather than
+          by rendering a <DropdownMenuSeparator> between groups. A group's
+          content can be present as a value but render nothing — an all-false
+          fragment, or a plugin slot with no registrations — which a JS check
+          reads as "has content" and would leave a divider floating against the
+          menu's edge. `:empty` asks the DOM what actually rendered. */}
+      <DropdownMenuContent
+        align="end"
+        className="[&>[data-menu-group]:not(:empty)~[data-menu-group]:not(:empty)]:mt-1 [&>[data-menu-group]:not(:empty)~[data-menu-group]:not(:empty)]:border-t [&>[data-menu-group]:not(:empty)~[data-menu-group]:not(:empty)]:border-border-subtle [&>[data-menu-group]:not(:empty)~[data-menu-group]:not(:empty)]:pt-1"
+      >
+        <div data-menu-group>
+          {dropdownItems}
+          <Slot name="page.actions_dropdown" context={slotContext} />
+        </div>
+
+        <div data-menu-group>
+          {onOpenJson && (
+            <DropdownMenuItem onClick={onOpenJson}>
+              <BracesIcon className="size-4" />
+              {t('admin.components.page_header.view_as_json')}
+            </DropdownMenuItem>
+          )}
+          {resource?.number && (
+            <CopyToClipboardItem
+              label={t('admin.components.page_header.copy_number')}
+              value={resource.number}
+            />
+          )}
+          {resource && (
+            <CopyToClipboardItem
+              label={t('admin.components.page_header.copy_id')}
+              value={resource.id}
+            />
+          )}
+        </div>
 
-        {onDelete && (
-          <>
-            <DropdownMenuSeparator />
+        <div data-menu-group>
+          {destructiveItems}
+          {onDelete && (
             <DropdownMenuItem
               variant="destructive"
               onClick={async () => {
                 if (
                   await confirm({
-                    message: t('admin.common.delete_confirm_message'),
+                    title: deleteConfirmTitle,
+                    message: deleteConfirmMessage ?? t('admin.common.delete_confirm_message'),
                     variant: 'destructive',
                     confirmLabel: deleteLabel,
                   })
@@ -255,8 +397,8 @@ function PageActionsDropdown({
               <TrashIcon className="size-4" />
               {deleteLabel}
             </DropdownMenuItem>
-          </>
-        )}
+          )}
+        </div>
       </DropdownMenuContent>
     </DropdownMenu>
   )

package/src/components/page-tabs.tsx

@@ -48,7 +48,10 @@ export function PageTabs({ tabs, slotName = 'page.tabs', slotContext, className
         const target =
           typeof tab.to === 'string'
             ? tab.to
-            : router.buildLocation({ to: tab.to, params: tab.params, search: tab.search }).pathname
+            : // Same literal-route caveat as the <Link> below: `to` is unknown
+              // at this generic call site.
+              router.buildLocation({ to: tab.to as never, params: tab.params, search: tab.search })
+                .pathname
         const active =
           tab.match === 'prefix'
             ? location.pathname.startsWith(target)

package/src/components/preferences-form.tsx

@@ -2,17 +2,24 @@ import type { PreferenceField as PreferenceFieldDef } from '@spree/admin-sdk'
 import {
   Button,
   Field,
+  FieldDescription,
   FieldGroup,
   FieldLabel,
   Input,
   SecretInput,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Switch,
   Textarea,
 } from '@spree/dashboard-ui'
-import { PlusIcon, TrashIcon } from 'lucide-react'
+import { PlusIcon, TrashIcon } from '@spree/dashboard-ui/icons'
 import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { CurrencySelect } from './currency-select'
+import { StoreDatePicker } from './store-date-picker'
 
 /**
  * Hydrates a `preferences` hash with each field's default. Used to seed
@@ -50,6 +57,20 @@ interface PreferencesFormProps {
   redactPasswords?: boolean
   /** Optional human-readable name overrides keyed by preference key. */
   labelOverrides?: Record<string, string>
+  /**
+   * Currencies a currency-typed preference may be set to. Defaults to the
+   * store's when a `StoreProvider` is mounted. Panels without one (the
+   * marketplace seller panel) pass their own list — an unconstrained picker
+   * would let a currency the store does not trade in be saved, and a
+   * calculator set to one quotes no rate at all.
+   */
+  currencyOptions?: string[]
+  /**
+   * Render date/datetime pickers inline instead of in a Popover portal.
+   * Set this when the form is inside a `<Sheet>` — Base UI's Popover fails
+   * to mount in deeply nested portal trees, so the calendar never appears.
+   */
+  inlineDatePickers?: boolean
 }
 
 /**
@@ -70,6 +91,8 @@ export function PreferencesForm({
   onChange,
   redactPasswords = false,
   labelOverrides,
+  currencyOptions,
+  inlineDatePickers,
 }: PreferencesFormProps) {
   if (!schema?.length) return null
 
@@ -88,6 +111,8 @@ export function PreferencesForm({
           label={labelOverrides?.[field.key]}
           onChange={(v) => setValue(field.key, v)}
           redactPasswords={redactPasswords}
+          currencyOptions={currencyOptions}
+          inlineDatePickers={inlineDatePickers}
         />
       ))}
     </FieldGroup>
@@ -100,6 +125,8 @@ interface PreferenceFieldProps {
   label?: string
   onChange: (value: unknown) => void
   redactPasswords?: boolean
+  currencyOptions?: string[]
+  inlineDatePickers?: boolean
 }
 
 export function PreferenceField({
@@ -108,6 +135,8 @@ export function PreferenceField({
   label,
   onChange,
   redactPasswords,
+  currencyOptions,
+  inlineDatePickers,
 }: PreferenceFieldProps) {
   const { t, i18n } = useTranslation()
   const id = `preference-${field.key}`
@@ -117,6 +146,11 @@ export function PreferenceField({
   const preferenceKey = `admin.preferences.${field.key}`
   const displayLabel =
     label ?? (i18n.exists(preferenceKey) ? t(preferenceKey) : humanizeKey(field.key))
+  // Optional one-line help, under the same key convention as the label. Most
+  // preferences say what they are in their name; the ones that do not — a
+  // customs signer, an incoterm — are unguessable without it.
+  const descriptionKey = `${preferenceKey}_description`
+  const description = i18n.exists(descriptionKey) ? t(descriptionKey) : undefined
 
   // Currency-typed preferences (`currency`, `default_currency`,
   // `display_currency`, …) get the store's CurrencySelect — same
@@ -125,7 +159,12 @@ export function PreferenceField({
     return (
       <Field>
         <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
-        <CurrencySelect id={id} value={(value as string) ?? ''} onChange={onChange} />
+        <CurrencySelect
+          id={id}
+          value={(value as string) ?? ''}
+          onChange={onChange}
+          options={currencyOptions}
+        />
       </Field>
     )
   }
@@ -164,6 +203,26 @@ export function PreferenceField({
         </Field>
       )
 
+    // A date is a picker, never a text box: an operator typing "1 Jan 2026"
+    // into a field the server parses as ISO-8601 gets a validation error with
+    // no hint of the format wanted. `<StoreDatePicker>` also reads the store's
+    // timezone, so a date means the same day for every admin.
+    case 'date':
+    case 'datetime':
+      return (
+        <Field>
+          <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
+          <StoreDatePicker
+            id={id}
+            value={(value as string) ?? null}
+            onChange={(next) => onChange(next)}
+            includeTime={field.type === 'datetime'}
+            inline={inlineDatePickers}
+          />
+          {description && <FieldDescription>{description}</FieldDescription>}
+        </Field>
+      )
+
     case 'integer':
     case 'decimal':
       return (
@@ -228,6 +287,41 @@ export function PreferenceField({
       )
 
     default:
+      // A preference that declares a fixed set is a picker, not a text box:
+      // the set is what the server validates against, so typing anything
+      // else can only fail on save.
+      if (field.choices?.length) {
+        const options = field.choices.map((choice) => ({
+          value: choice,
+          label: i18n.exists(`${preferenceKey}_options.${choice}`)
+            ? t(`${preferenceKey}_options.${choice}`)
+            : humanizeKey(choice),
+        }))
+
+        return (
+          <Field>
+            <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
+            <Select
+              items={options}
+              value={(value as string) ?? ''}
+              onValueChange={(next) => onChange(next ?? '')}
+            >
+              <SelectTrigger id={id}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {description && <FieldDescription>{description}</FieldDescription>}
+          </Field>
+        )
+      }
+
       return (
         <Field>
           <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
@@ -236,6 +330,7 @@ export function PreferenceField({
             value={(value as string) ?? ''}
             onChange={(e) => onChange(e.target.value)}
           />
+          {description && <FieldDescription>{description}</FieldDescription>}
         </Field>
       )
   }
@@ -389,10 +484,9 @@ function TierRow({
       <Button
         type="button"
         size="icon-sm"
-        variant="ghost"
+        variant="destructive-ghost"
         onClick={onRemove}
         aria-label={t('admin.components.preferences_form.tiers.remove_tier')}
-        className="text-destructive hover:bg-destructive/10 hover:text-destructive"
       >
         <TrashIcon className="size-4" />
       </Button>