@spree/dashboard-core 6.0.2 → 6.0.4

package/src/components/settings-fields.tsx

@@ -0,0 +1,165 @@
+import {
+  cn,
+  Field,
+  FieldContent,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from '@spree/dashboard-ui'
+import type { ComponentProps, ReactNode } from 'react'
+import { type Control, Controller, type FieldPath, type FieldValues } from 'react-hook-form'
+
+/**
+ * A settings card's rows, with a rule between each. Rows put the label on the
+ * left and the control on the right once the card is wide enough, and stack
+ * on a narrow screen.
+ */
+export function SettingsFieldGroup({ className, ...props }: ComponentProps<typeof FieldGroup>) {
+  return (
+    <FieldGroup
+      className={cn(
+        'gap-0 divide-y divide-border-subtle *:py-4 *:first:pt-0 *:last:pb-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * One setting: its label and help on the left, its control on the right.
+ * `horizontal` keeps it a row at any width, for a narrow column whose
+ * controls are short anyway.
+ */
+export function SettingsRow({
+  label,
+  htmlFor,
+  help,
+  error,
+  orientation = 'responsive',
+  children,
+}: {
+  label: ReactNode
+  htmlFor?: string
+  help?: ReactNode
+  error?: { message?: string }
+  orientation?: 'responsive' | 'horizontal'
+  children: ReactNode
+}) {
+  const horizontal = orientation === 'horizontal'
+  return (
+    // Centred against the control, which the field would otherwise top-align
+    // beside a label and its help.
+    <Field
+      orientation={orientation}
+      className={
+        horizontal
+          ? 'gap-4 has-[>[data-slot=field-content]]:items-center'
+          : '@md/field-group:gap-6 @md/field-group:has-[>[data-slot=field-content]]:items-center'
+      }
+    >
+      <FieldContent>
+        <FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>
+        {help && <span className="text-xs text-muted-foreground">{help}</span>}
+        <FieldError errors={[error]} />
+      </FieldContent>
+      <div
+        className={cn(
+          'flex min-w-0 shrink-0 items-center gap-2',
+          horizontal ? 'max-w-[60%]' : '@md/field-group:max-w-[50%]',
+        )}
+      >
+        {children}
+      </div>
+    </Field>
+  )
+}
+
+interface SelectFieldProps<TValues extends FieldValues> {
+  id: string
+  label: string
+  placeholder?: string
+  help?: string
+  name: FieldPath<TValues>
+  control: Control<TValues>
+  options: ReadonlyArray<{ value: string; label: string }>
+}
+
+export function SettingsSelectField<TValues extends FieldValues>({
+  id,
+  label,
+  placeholder,
+  help,
+  name,
+  control,
+  options,
+}: SelectFieldProps<TValues>) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState }) => (
+        <SettingsRow label={label} htmlFor={id} help={help} error={fieldState.error}>
+          <Select items={options as never} value={field.value} onValueChange={field.onChange}>
+            {/* As wide as its value in a row, rather than half the card. */}
+            <SelectTrigger
+              id={id}
+              aria-invalid={!!fieldState.error || undefined}
+              className="@md/field-group:w-auto @md/field-group:min-w-40"
+            >
+              <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((o) => (
+                <SelectItem key={o.value} value={o.value}>
+                  {o.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </SettingsRow>
+      )}
+    />
+  )
+}
+
+interface SwitchFieldProps<TValues extends FieldValues> {
+  id: string
+  label: string
+  help?: string
+  name: FieldPath<TValues>
+  control: Control<TValues>
+}
+
+export function SettingsSwitchField<TValues extends FieldValues>({
+  id,
+  label,
+  help,
+  name,
+  control,
+}: SwitchFieldProps<TValues>) {
+  return (
+    // A switch sits beside its label at every width.
+    <Field orientation="horizontal" className="gap-4 has-[>[data-slot=field-content]]:items-center">
+      <FieldContent>
+        <FieldLabel htmlFor={id} className="cursor-pointer">
+          {label}
+        </FieldLabel>
+        {help && <span className="text-xs text-muted-foreground">{help}</span>}
+      </FieldContent>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field }) => (
+          <Switch id={id} checked={!!field.value} onCheckedChange={field.onChange} />
+        )}
+      />
+    </Field>
+  )
+}

package/src/components/settings-section.tsx

@@ -0,0 +1,46 @@
+import { Card, SectionTitle } from '@spree/dashboard-ui'
+import type { ReactNode } from 'react'
+
+export interface SettingsSectionProps {
+  title: ReactNode
+  /** An icon element set in a tile before the title, like a `Section` heading. */
+  icon?: ReactNode
+  description?: ReactNode
+  /** Sits at the end of the heading row, such as an Add or Edit button. */
+  action?: ReactNode
+  /** Classes for the card that holds `children`. */
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * One block of a settings page: a heading above the card that holds its
+ * fields, with any description at the top of the card. The heading sits
+ * outside the card, so a page of several blocks reads as titled sections
+ * rather than a stack of boxes each carrying its own title bar.
+ */
+export function SettingsSection({
+  title,
+  icon,
+  description,
+  action,
+  className,
+  children,
+}: SettingsSectionProps) {
+  return (
+    <section className="flex flex-col gap-3">
+      <div className="flex items-center justify-between gap-4">
+        <SectionTitle>
+          {icon}
+          {title}
+        </SectionTitle>
+        {action && <div className="shrink-0">{action}</div>}
+      </div>
+      <Card className={className}>
+        {/* Inside the card, as the first line of what it holds. */}
+        {description && <p className="px-4 pt-4 text-muted-foreground text-base">{description}</p>}
+        {children}
+      </Card>
+    </section>
+  )
+}

package/src/components/settings-sidebar.tsx

@@ -75,17 +75,22 @@ export function SettingsSidebar({
       aria-hidden={!open}
       data-state={open ? 'open' : 'closed'}
       className={cn(
-        // `bg-card`, the content sheet's own colour: this rail is a column OF
-        // the sheet rather than an extension of the nav rail beside it, so it
-        // reads as part of the page it is navigating rather than as a second
-        // band of chrome.
-        'z-30 hidden vh-full shrink-0 overflow-hidden bg-muted m-1.5 rounded-lg text-sidebar-foreground transition-[width,border-color] duration-200 ease-out lg:block',
-        open ? 'lg:w-(--spacing-sidebar-width)' : 'lg:w-0 border-e-0 border-transparent',
+        // Part of the chrome, beside the icon rail and outside the content
+        // sheet: it takes the sidebar's ground. The sheet's own edge divides
+        // it from the page; a hairline of the same weight divides it from the
+        // rail.
+        'z-30 hidden vh-full shrink-0 overflow-hidden text-sidebar-foreground transition-[width,border-color] duration-200 ease-out lg:block',
+        open
+          ? 'border-s border-sidebar-border lg:w-(--spacing-sidebar-width)'
+          : 'lg:w-0 border-s-0 border-transparent',
       )}
     >
       <div
         className={cn(
-          'flex h-full w-(--spacing-sidebar-width) flex-col transition-opacity duration-200',
+          // `pt-2` is the inset sidebar's own padding, which the icon rail and
+          // the sheet both sit inside, so the header lines up with the store
+          // switcher and the sheet's top bar.
+          'flex h-full w-(--spacing-sidebar-width) flex-col pt-2 transition-opacity duration-200',
           open ? 'opacity-100 delay-100' : 'pointer-events-none opacity-0',
         )}
       >
@@ -97,7 +102,7 @@ export function SettingsSidebar({
             fade below is a `mask-image` on the scrolling element, and a mask
             applies to sticky descendants too — a header inside it would
             dissolve along with the rows it is meant to stay above. */}
-        <SidebarHeader className="shrink-0 gap-2 pb-2">
+        <SidebarHeader className="shrink-0 gap-2 px-3 pb-2">
           {/* `h-rail-header-height` matches the store switcher opposite, so the
               two line up. */}
           <div className="flex h-rail-header-height items-center gap-1">
@@ -109,7 +114,7 @@ export function SettingsSidebar({
             >
               <ArrowLeftIcon className="size-4" />
             </Link>
-            <span className="truncate font-medium text-sm">{t('admin.settings_page.title')}</span>
+            <span className="truncate font-medium text-base">{t('admin.settings_page.title')}</span>
           </div>
 
           <SettingsNavSearch value={query} onValueChange={setQuery} tabIndex={open ? 0 : -1} />
@@ -124,7 +129,10 @@ export function SettingsSidebar({
             top until there is something scrolled past, clear again at the
             bottom once the end is reached. Falls back to a static fade on both
             edges where scroll-driven animations are unsupported. */}
-        <div className="quiet-scrollbar scroll-fade min-h-0 flex-1 overflow-y-auto">
+        {/* `px-1` on top of the groups' own 8px gives the rows the header's
+            12px gutter, the main nav's. Set here rather than on the groups,
+            which the phone sheet shares at its own spacing. */}
+        <div className="quiet-scrollbar scroll-fade min-h-0 flex-1 overflow-y-auto px-1">
           <SettingsNavBody
             tabIndex={open ? 0 : -1}
             tenantId={tenantId}
@@ -148,14 +156,16 @@ export function SettingsSidebar({
  * touch sizing the primary drawer uses.
  */
 /**
- * Tracks the `lg` breakpoint the settings sheet is bounded by. `useIsMobile`
+ * Whether the settings rail is on screen: the `lg` breakpoint the settings
+ * sheet is bounded by, and below which the settings index is the area's only
+ * navigation. `useIsMobile`
  * cannot stand in: it is fixed at 768px, and closing the sheet there would
  * strand it open across the 768-1024px band where it is still the only way to
  * navigate settings.
  */
 const SETTINGS_SHEET_BREAKPOINT = 1024
 
-function useIsSettingsSheetHidden() {
+export function useSettingsRailShown() {
   return useSyncExternalStore(
     (onChange) => {
       const query = window.matchMedia(`(min-width: ${SETTINGS_SHEET_BREAKPOINT}px)`)
@@ -184,7 +194,7 @@ export function SettingsNavSheet({
   // focus trap armed, with nothing on screen to close it. Widening past the
   // breakpoint while the sheet is open also reports the close, so the caller's
   // state does not stay stuck open behind a desktop layout.
-  const isDesktop = useIsSettingsSheetHidden()
+  const isDesktop = useSettingsRailShown()
 
   useEffect(() => {
     if (isDesktop && open) onOpenChange(false)
@@ -246,7 +256,10 @@ function SettingsNavSearch({
       aria-label={t('admin.settings_page.search_placeholder')}
       clearLabel={t('admin.common.clear')}
       tabIndex={tabIndex}
-      className="h-8 text-sm in-data-[mobile=true]:h-11 in-data-[mobile=true]:text-base"
+      // The main nav's search bar, as a real field: its corner, edge, fill,
+      // icon inset and text size, and no shadow, so the two rails' search
+      // boxes read as one. Phones keep the larger touch size.
+      className="h-8 shadow-none [&>[data-align=inline-start]]:pl-2.5 [&>input]:pl-2! [&>input]:text-base in-data-[mobile=true]:h-11 in-data-[mobile=true]:[&>input]:text-base"
     />
   )
 }
@@ -308,14 +321,18 @@ function SettingsNavBody({
       )}
 
       {visible.groups.length === 0 && (
-        <p className="px-4 py-2 text-sm text-sidebar-foreground/70">
+        <p className="px-4 py-2 text-base text-sidebar-foreground/70">
           {t('admin.settings_page.no_results', { query: query.trim() })}
         </p>
       )}
 
       {visible.groups.map(({ group, entries }) => (
-        <SidebarGroup key={group.key}>
-          <SidebarGroupLabel>{resolveNavLabel(group, t)}</SidebarGroupLabel>
+        // Labels sit a size and a shade under the links, with air above each
+        // group, so the list reads as sections rather than one long column.
+        <SidebarGroup key={group.key} className="not-first:pt-3">
+          <SidebarGroupLabel className="h-7 font-normal text-muted-foreground">
+            {resolveNavLabel(group, t)}
+          </SidebarGroupLabel>
           <SidebarMenu>
             {entries.map((entry) => (
               <SettingsItem
@@ -357,7 +374,7 @@ function SettingsItem({
           via `useSidebar()`, which would fire spuriously in this secondary nav. */}
       <SidebarMenuButton asChild isActive={isActive}>
         <Link to={url} tabIndex={tabIndex}>
-          <NavIcon icon={Icon} isActive={isActive} />
+          <NavIcon icon={Icon} isActive={isActive} muted />
           {/* `truncate` so a long translated label gives way to the badge
               rather than pushing it out of the sidebar. */}
           <span className="truncate">{label}</span>

package/src/components/sheet-top-bar.tsx

@@ -21,23 +21,22 @@ export function SheetTopBar({
 }: {
   tenantId?: string
   /**
-   * Hides the rail trigger. Inside settings the rail is collapsed by the app
-   * rather than by the merchant, and the settings rail beside it carries its
-   * own way out — so a control offering to re-expand a rail the area will just
-   * re-collapse would not do what it says. The trail still shows.
+   * Hides the bar. Inside settings the settings nav marks where you are and
+   * every record page carries its own back button, so a trail would only
+   * repeat them. The rail trigger goes too: the rail is collapsed by the app
+   * there, and a control offering to re-expand a rail the area will just
+   * re-collapse would not do what it says.
    */
   inSettings?: boolean
 }) {
   const { isMobile, state } = useSidebar()
   const collapsed = state === 'collapsed' && !isMobile
 
-  if (!collapsed) return null
+  if (!collapsed || inSettings) return null
 
   return (
     <div className="hidden min-h-8 items-center gap-2 px-4 pt-3 md:flex">
-      {!inSettings && (
-        <SidebarTrigger className="-ms-1 shrink-0 text-muted-foreground hover:bg-accent hover:text-foreground" />
-      )}
+      <SidebarTrigger className="-ms-1 shrink-0 text-muted-foreground hover:bg-accent hover:text-foreground" />
       <TopBarBreadcrumbs tenantId={tenantId} />
     </div>
   )

package/src/components/sidebar-search.tsx

@@ -6,7 +6,7 @@ import {
   TooltipTrigger,
   useSidebar,
 } from '@spree/dashboard-ui'
-import { CommandIcon, SearchIcon } from '@spree/dashboard-ui/icons'
+import { SearchIcon } from '@spree/dashboard-ui/icons'
 import { useTranslation } from 'react-i18next'
 import { useOptionalCommandPalette } from '../hooks/use-command-palette'
 
@@ -30,10 +30,9 @@ export function SidebarSearch() {
   const palette = useOptionalCommandPalette()
   const { isMobile, state } = useSidebar()
   const isCollapsed = state === 'collapsed' && !isMobile
-  // A short label, not the palette's own placeholder: the rail is 240px wide
-  // and the descriptive version truncates mid-word. The palette itself keeps
-  // the longer wording, where there is room to name what is searchable.
-  const label = t('admin.components.command_palette.search_label')
+  // Just "Search": the bar is an affordance, not a field, so it names the
+  // action and leaves the palette's own placeholder to say what is searchable.
+  const label = t('admin.actions.search')
 
   if (!palette) return null
 
@@ -46,25 +45,25 @@ export function SidebarSearch() {
               type="button"
               onClick={() => palette.setOpen(true)}
               aria-label={isCollapsed ? label : undefined}
-              // Focus matches the form inputs — the soft blue glow from `--ring`
-              // rather than a hard offset ring. It looks like a search field, so
-              // it should focus like one.
+              // A field's fill and edge, without its shadow: it reads as the
+              // search box it opens, and stays flat on the rail. Focus is the
+              // inputs' soft blue glow from `--ring`.
               className={
                 isCollapsed
                   ? // `size-10` matches what a nav item collapses to, so the rail reads
                     // as one column of equal targets rather than a search box that
                     // shrank. The glyph stays 16px, as `NavIcon` draws it.
                     'flex size-10 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors duration-100 ease-out hover:bg-sidebar-accent-hover hover:text-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]'
-                  : 'flex w-full cursor-pointer items-center gap-2 rounded-lg border border-border bg-card/60 hover:shadow-xs py-1.5 ps-2.5 pe-1.5 text-muted-foreground text-sm outline-none transition-[color,background-color,border-color,box-shadow] duration-100 ease-out hover:bg-card focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]'
+                  : 'flex w-full cursor-pointer items-center gap-2 rounded-xl border border-field-border bg-card py-1.5 ps-2.5 pe-2.5 text-muted-foreground text-base outline-none transition-[color,border-color,box-shadow] duration-100 ease-out hover:text-foreground focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]'
               }
             >
               <SearchIcon className="size-4 shrink-0" />
               {!isCollapsed && (
                 <>
                   <span className="flex-1 truncate text-left">{label}</span>
-                  <kbd className="hidden h-5 items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] text-muted-foreground sm:inline-flex">
-                    {IS_MAC ? <CommandIcon size={11} /> : 'CTRL'}
-                    <span>K</span>
+                  {/* The shortcut as quiet text, not a keycap: a hint, not a control. */}
+                  <kbd className="hidden font-sans text-xs tabular-nums text-muted-foreground sm:inline">
+                    {IS_MAC ? '⌘K' : 'Ctrl K'}
                   </kbd>
                 </>
               )}

package/src/components/sidebar-user.tsx

@@ -5,8 +5,8 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuShortcut,
   DropdownMenuTrigger,
   LanguageMenuItems,
   SidebarMenu,
@@ -16,21 +16,24 @@ import {
 } from '@spree/dashboard-ui'
 import {
   BookOpenIcon,
-  ExternalLinkIcon,
   LogOutIcon,
-  MailIcon,
   MessageCircleIcon,
+  MessageSquareIcon,
   MoreHorizontalIcon,
-  UserIcon,
+  TerminalIcon,
+  UserPenIcon,
 } from '@spree/dashboard-ui/icons'
+import { useFormatForDisplay } from '@tanstack/react-hotkeys'
 import { useTranslation } from 'react-i18next'
 import { useAuth } from '../hooks/use-auth'
 import { useSwitchAdminLocale } from '../hooks/use-switch-admin-locale'
-import { COMMUNITY_URL, CONTACT_URL, DOCS_BASE_URL } from '../lib/docs'
+import { COMMUNITY_URL, DOCS_BASE_URL } from '../lib/docs'
 import { getInitials } from '../lib/formatters'
 import { i18n } from '../lib/i18n'
-import { storefrontHref } from '../lib/storefront'
-import { useOptionalStore } from '../providers/store-provider'
+import {
+  DEVELOPER_INSPECTOR_HOTKEY,
+  useOptionalDeveloperInspector,
+} from '../providers/developer-inspector-provider'
 
 /**
  * The account menu, sitting at the foot of the primary sidebar.
@@ -39,10 +42,6 @@ import { useOptionalStore } from '../providers/store-provider'
  * language, the support links and sign out — because removing that bar left
  * the account with nowhere else to live, and the foot of the nav is where a
  * merchant already looks for it.
- *
- * `useOptionalStore` rather than `useStore`: the seller panel mounts this
- * under a `TenantProvider` with no store at all, and a hard `useStore` would
- * throw there. A panel without a store simply gets no "View store" entry.
  */
 export function SidebarUser({
   uiLocales = [],
@@ -62,8 +61,9 @@ export function SidebarUser({
   const { isMobile, state } = useSidebar()
   const { user, logout } = useAuth()
   const switchAdminLocale = useSwitchAdminLocale()
-  const store = useOptionalStore()?.store ?? null
-  const viewStoreHref = storefrontHref(store)
+  // Only panels that mount the inspector offer it.
+  const inspector = useOptionalDeveloperInspector()
+  const formatHotkey = useFormatForDisplay()
 
   // The desktop rail's icon mode. The mobile drawer is full width whatever
   // that says, so honouring it there would hide the name for no reason.
@@ -100,7 +100,7 @@ export function SidebarUser({
         </Avatar>
         {!inBar && !isCollapsed && (
           <>
-            <span className="min-w-0 flex-1 truncate text-left font-medium text-sm text-foreground">
+            <span className="min-w-0 flex-1 truncate text-left font-medium text-base text-foreground">
               {user.full_name || user.email}
             </span>
             <MoreHorizontalIcon className="size-4 shrink-0 text-muted-foreground" />
@@ -129,7 +129,7 @@ export function SidebarUser({
               {initials}
             </AvatarFallback>
           </Avatar>
-          <div className="grid min-w-0 flex-1 text-sm leading-tight">
+          <div className="grid min-w-0 flex-1 text-base leading-tight">
             <span className="truncate font-medium text-foreground">
               {user.full_name || user.email}
             </span>
@@ -139,9 +139,15 @@ export function SidebarUser({
           </div>
         </div>
         <DropdownMenuSeparator />
-        <DropdownMenuLabel className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
-          {t('admin.account.preferences')}
-        </DropdownMenuLabel>
+        {onEditProfile && (
+          <>
+            <DropdownMenuItem onClick={onEditProfile}>
+              <UserPenIcon className="size-4" />
+              {t('admin.account.edit_profile')}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
         <ThemeMenuItems />
         {/* Select-style pill; self-hides when < 2 languages are installed. */}
         <LanguageMenuItems
@@ -150,30 +156,19 @@ export function SidebarUser({
           value={i18n.language}
           onSelect={handleSelectLocale}
         />
-        <DropdownMenuSeparator />
-        {onEditProfile && (
+        {inspector && (
           <>
-            <DropdownMenuItem onClick={onEditProfile}>
-              <UserIcon className="size-4" />
-              {t('admin.account.edit_profile')}
-            </DropdownMenuItem>
             <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => inspector.setOpen(true)}>
+              <TerminalIcon className="size-4" />
+              {t('admin.components.developer_inspector.menu_open')}
+              <DropdownMenuShortcut>
+                {formatHotkey(DEVELOPER_INSPECTOR_HOTKEY)}
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
           </>
         )}
-        {/* The storefront link lost its home when the top bar went, and it
-                belongs with the other outbound links rather than as a button
-                competing with the nav. */}
-        {viewStoreHref && (
-          <DropdownMenuItem asChild>
-            <a href={viewStoreHref} target="_blank" rel="noopener noreferrer">
-              <ExternalLinkIcon className="size-4" />
-              {t('admin.account.view_store')}
-            </a>
-          </DropdownMenuItem>
-        )}
-        {/* All three carried over from the old top bar as inert rows — they
-            looked like links and did nothing. Destinations live in `lib/docs`
-            beside the docs base so a domain move is one edit. */}
+        <DropdownMenuSeparator />
         <DropdownMenuItem asChild>
           <a href={DOCS_BASE_URL} target="_blank" rel="noopener noreferrer">
             <BookOpenIcon className="size-4" />
@@ -186,12 +181,12 @@ export function SidebarUser({
             {t('admin.account.community')}
           </a>
         </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <a href={CONTACT_URL} target="_blank" rel="noopener noreferrer">
-            <MailIcon className="size-4" />
-            {t('admin.account.contact_support')}
-          </a>
-        </DropdownMenuItem>
+        {inspector?.sendFeedback && (
+          <DropdownMenuItem onClick={() => inspector.sendFeedback?.()}>
+            <MessageSquareIcon className="size-4" />
+            {t('admin.account.send_feedback')}
+          </DropdownMenuItem>
+        )}
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={logout}>
           <LogOutIcon className="size-4" />

package/src/components/skip-link.tsx

@@ -24,7 +24,7 @@ export function SkipLink({ targetId = 'main-content' }: { targetId?: string }) {
         'sr-only',
         'focus-visible:not-sr-only focus-visible:fixed focus-visible:top-3 focus-visible:left-3',
         'focus-visible:z-50 focus-visible:rounded-lg focus-visible:bg-card',
-        'focus-visible:px-4 focus-visible:py-2 focus-visible:text-sm focus-visible:font-medium',
+        'focus-visible:px-4 focus-visible:py-2 focus-visible:text-base focus-visible:font-medium',
         'focus-visible:text-foreground focus-visible:shadow-md',
         'focus-visible:border focus-visible:border-border-control',
         'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',

package/src/components/store-switcher.tsx

@@ -51,7 +51,7 @@ export function StoreSwitcher() {
         <AvatarFallback>{storeInitials}</AvatarFallback>
       </Avatar>
       {!isCollapsed && (
-        <div className="grid flex-1 text-left text-sm leading-tight">
+        <div className="grid flex-1 text-left text-base leading-tight">
           <span className="truncate font-medium text-foreground">{store?.name}</span>
         </div>
       )}