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

package/src/components/sidebar-search.tsx

@@ -0,0 +1,83 @@
+import {
+  SidebarMenu,
+  SidebarMenuItem,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  useSidebar,
+} from '@spree/dashboard-ui'
+import { CommandIcon, SearchIcon } from '@spree/dashboard-ui/icons'
+import { useTranslation } from 'react-i18next'
+import { useOptionalCommandPalette } from '../hooks/use-command-palette'
+
+const IS_MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform ?? '')
+
+/**
+ * Opens the global ⌘K palette, sitting under the store switcher.
+ *
+ * The shortcut itself is registered by the palette's provider, not here, so it
+ * works wherever focus is — this is only the visible affordance for it.
+ *
+ * Collapsed to the icon rail it becomes a plain square button: a search field
+ * with no room for text reads as a broken input, whereas an icon reads as a
+ * button that will open something.
+ *
+ * Renders nothing when no palette is mounted — the seller panel has none yet,
+ * and a search box that opens nothing is worse than no search box.
+ */
+export function SidebarSearch() {
+  const { t } = useTranslation()
+  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')
+
+  if (!palette) return null
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              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.
+              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)]'
+              }
+            >
+              <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>
+                  </kbd>
+                </>
+              )}
+            </button>
+          </TooltipTrigger>
+          {/* Only while collapsed: expanded, the label is already on screen and
+              a tooltip would repeat it. Matches how `SidebarMenuButton` gates
+              the nav items' own tooltips. */}
+          <TooltipContent side="right" align="center" hidden={!isCollapsed}>
+            {label}
+          </TooltipContent>
+        </Tooltip>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/src/components/sidebar-user.tsx

@@ -0,0 +1,213 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  LanguageMenuItems,
+  SidebarMenu,
+  SidebarMenuItem,
+  ThemeMenuItems,
+  useSidebar,
+} from '@spree/dashboard-ui'
+import {
+  BookOpenIcon,
+  ExternalLinkIcon,
+  LogOutIcon,
+  MailIcon,
+  MessageCircleIcon,
+  MoreHorizontalIcon,
+  UserIcon,
+} from '@spree/dashboard-ui/icons'
+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 { getInitials } from '../lib/formatters'
+import { i18n } from '../lib/i18n'
+import { storefrontHref } from '../lib/storefront'
+import { useOptionalStore } from '../providers/store-provider'
+
+/**
+ * The account menu, sitting at the foot of the primary sidebar.
+ *
+ * It holds what the top bar's user menu held — who is signed in, theme,
+ * 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 = [],
+  onEditProfile,
+  variant = 'sidebar',
+}: {
+  uiLocales?: ReadonlyArray<{ code: string; name: string }>
+  onEditProfile?: () => void
+  /**
+   * `bar` renders just the avatar as a compact button, for the mobile top
+   * bar. The menu itself is identical — a phone should not get a smaller set
+   * of account actions than a desktop, only a smaller way in to them.
+   */
+  variant?: 'sidebar' | 'bar'
+}) {
+  const { t } = useTranslation()
+  const { isMobile, state } = useSidebar()
+  const { user, logout } = useAuth()
+  const switchAdminLocale = useSwitchAdminLocale()
+  const store = useOptionalStore()?.store ?? null
+  const viewStoreHref = storefrontHref(store)
+
+  // 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.
+  const isCollapsed = state === 'collapsed' && !isMobile
+
+  if (!user) return null
+
+  const initials = getInitials(user.full_name, user.email)
+
+  // Persists to the account, mirrors it into the auth context, and reloads —
+  // see useSwitchAdminLocale for why all three steps are required.
+  const handleSelectLocale = (code: string) => {
+    void switchAdminLocale(code)
+  }
+
+  const inBar = variant === 'bar'
+
+  const trigger = (
+    <DropdownMenuTrigger asChild>
+      <button
+        type="button"
+        aria-label={t('admin.a11y.user_menu')}
+        className={
+          inBar
+            ? 'inline-flex size-11 shrink-0 items-center justify-center rounded-lg outline-hidden transition-colors duration-100 hover:bg-accent data-[state=open]:bg-accent'
+            : 'flex w-full items-center gap-2 rounded-xl p-1.5 outline-hidden transition-colors duration-100 hover:bg-sidebar-accent data-[state=open]:bg-sidebar-accent'
+        }
+      >
+        <Avatar className="size-7 shrink-0 rounded-lg">
+          {user.avatar_url && <AvatarImage src={user.avatar_url} alt="" />}
+          <AvatarFallback className="rounded-lg bg-primary text-xs text-primary-foreground dark:bg-accent dark:text-foreground">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+        {!inBar && !isCollapsed && (
+          <>
+            <span className="min-w-0 flex-1 truncate text-left font-medium text-sm text-foreground">
+              {user.full_name || user.email}
+            </span>
+            <MoreHorizontalIcon className="size-4 shrink-0 text-muted-foreground" />
+          </>
+        )}
+      </button>
+    </DropdownMenuTrigger>
+  )
+
+  const menu = (
+    <DropdownMenu>
+      {trigger}
+      {/* In the rail the trigger sits at the bottom, so the menu opens
+              upward or to the side or it would run off-screen. In the top bar
+              it hangs below the avatar like any other header menu. */}
+      <DropdownMenuContent
+        className="w-56"
+        side={inBar ? 'bottom' : isMobile ? 'top' : 'right'}
+        align="end"
+        sideOffset={8}
+      >
+        <div className="flex items-center gap-2 p-1.5">
+          <Avatar className="size-8 rounded-lg">
+            {user.avatar_url && <AvatarImage src={user.avatar_url} alt="" />}
+            <AvatarFallback className="rounded-lg bg-primary text-xs text-primary-foreground dark:bg-accent dark:text-foreground">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="grid min-w-0 flex-1 text-sm leading-tight">
+            <span className="truncate font-medium text-foreground">
+              {user.full_name || user.email}
+            </span>
+            {user.full_name && (
+              <span className="truncate text-muted-foreground text-xs">{user.email}</span>
+            )}
+          </div>
+        </div>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+          {t('admin.account.preferences')}
+        </DropdownMenuLabel>
+        <ThemeMenuItems />
+        {/* Select-style pill; self-hides when < 2 languages are installed. */}
+        <LanguageMenuItems
+          label={t('admin.account.language.label')}
+          locales={uiLocales}
+          value={i18n.language}
+          onSelect={handleSelectLocale}
+        />
+        <DropdownMenuSeparator />
+        {onEditProfile && (
+          <>
+            <DropdownMenuItem onClick={onEditProfile}>
+              <UserIcon className="size-4" />
+              {t('admin.account.edit_profile')}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {/* 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. */}
+        <DropdownMenuItem asChild>
+          <a href={DOCS_BASE_URL} target="_blank" rel="noopener noreferrer">
+            <BookOpenIcon className="size-4" />
+            {t('admin.account.documentation')}
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a href={COMMUNITY_URL} target="_blank" rel="noopener noreferrer">
+            <MessageCircleIcon className="size-4" />
+            {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>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={logout}>
+          <LogOutIcon className="size-4" />
+          {t('admin.account.log_out')}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+
+  // The bar places the button itself; only the rail needs the menu wrapped in
+  // sidebar row markup.
+  if (inBar) return menu
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>{menu}</SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/src/components/skip-link.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next'
+
+/**
+ * "Skip to content", the first thing in the tab order.
+ *
+ * The sidebar carries thirty-odd links, and they precede the page on every
+ * route. Without this a keyboard user tabs through all of them again after
+ * each navigation before reaching what they came for.
+ *
+ * Visible only while focused: it is a keyboard affordance, and a pointer user
+ * has no use for it. It stays in the DOM and in the tab order at all times
+ * though — `display: none` or `hidden` would take it out of both, which is the
+ * usual way this control ends up doing nothing.
+ */
+export function SkipLink({ targetId = 'main-content' }: { targetId?: string }) {
+  const { t } = useTranslation()
+
+  return (
+    <a
+      href={`#${targetId}`}
+      className={[
+        // Off-screen until focused, rather than hidden: reachable by Tab,
+        // invisible to everyone else.
+        '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: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',
+      ].join(' ')}
+    >
+      {t('admin.common.skip_to_content')}
+    </a>
+  )
+}

package/src/components/store-date-picker.tsx

@@ -1,5 +1,5 @@
 import { DatePicker, type DatePickerProps } from '@spree/dashboard-ui'
-import { useStore } from '../providers/store-provider'
+import { useOptionalStore } from '../providers/store-provider'
 
 /**
  * Drop-in `<DatePicker>` that pulls the timezone from `<StoreProvider>` so
@@ -11,7 +11,11 @@ import { useStore } from '../providers/store-provider'
  * timezone explicitly (rare).
  */
 function StoreDatePicker(props: Omit<DatePickerProps, 'timezone'>) {
-  const { timezone } = useStore()
+  // Optional: a panel with no store context (a seller's) falls back to the
+  // browser's zone rather than refusing to render a date field.
+  const store = useOptionalStore()
+  const timezone = store?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC'
+
   return <DatePicker {...props} timezone={timezone} />
 }
 

package/src/components/store-switcher.tsx

@@ -11,10 +11,11 @@ import {
   Skeleton,
   useSidebar,
 } from '@spree/dashboard-ui'
+import { CheckIcon, ChevronsUpDownIcon } from '@spree/dashboard-ui/icons'
 import { Link } from '@tanstack/react-router'
-import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useAuth } from '../hooks/use-auth'
+import { getInitials } from '../lib/formatters'
 import { useStore } from '../providers/store-provider'
 
 /**
@@ -26,19 +27,22 @@ import { useStore } from '../providers/store-provider'
 export function StoreSwitcher() {
   const { t } = useTranslation()
   const { isMobile, state } = useSidebar()
-  const isCollapsed = state === 'collapsed'
+  // `collapsed` is the desktop rail's icon mode. The mobile drawer is full
+  // width whatever that state says — and the rail auto-collapses inside the
+  // settings area — so honouring it there hides the store name for no reason.
+  const isCollapsed = state === 'collapsed' && !isMobile
 
   const { store, isLoading } = useStore()
   const { user } = useAuth()
 
-  if (isLoading) return <Skeleton className="h-header-height w-full rounded-xl" />
+  if (isLoading) return <Skeleton className="h-rail-header-height w-full rounded-xl" />
 
   const stores = user?.stores ?? []
 
-  const storeInitials = store?.name
-    .split(' ')
-    .map((name) => name[0])
-    .join('')
+  // `getInitials` rather than one letter per word: a store called "Shop With a
+  // Very Long Name" produced six characters and burst the avatar. This caps at
+  // two — first word and last — and is what the account avatar already uses.
+  const storeInitials = getInitials(store?.name, '?')
 
   const header = (
     <>
@@ -57,7 +61,7 @@ export function StoreSwitcher() {
   if (stores.length < 2) {
     return (
       <SidebarMenu>
-        <SidebarMenuItem className="h-header-height flex items-center">
+        <SidebarMenuItem className="h-rail-header-height flex items-center">
           <div className="flex w-full items-center gap-2 p-1.5">{header}</div>
         </SidebarMenuItem>
       </SidebarMenu>
@@ -66,7 +70,7 @@ export function StoreSwitcher() {
 
   return (
     <SidebarMenu>
-      <SidebarMenuItem className="h-header-height flex items-center">
+      <SidebarMenuItem className="h-rail-header-height flex items-center">
         <DropdownMenu>
           <DropdownMenuTrigger asChild className="flex w-full items-center">
             <button
@@ -88,11 +92,12 @@ export function StoreSwitcher() {
           >
             {stores.map((availableStore) => (
               <DropdownMenuItem key={availableStore.id} asChild>
-                <Link
-                  to="/$storeId"
-                  params={{ storeId: availableStore.id }}
-                  className="no-underline"
-                >
+                {/* Built as a runtime path rather than a typed literal: core
+                    is the framework behind more than one panel, and a panel
+                    with no `/$storeId` route (a seller's) would fail to
+                    typecheck against a route it never registers. Same approach
+                    as the nav registries, which take paths as strings. */}
+                <Link to={`/${availableStore.id}` as never} className="no-underline">
                   <span className="flex-1 truncate">{availableStore.name}</span>
                   {availableStore.id === store?.id && <CheckIcon className="size-4" />}
                 </Link>