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

package/src/components/app-sidebar.tsx

@@ -1,70 +1,227 @@
-import { Sidebar, SidebarContent, SidebarHeader } from '@spree/dashboard-ui'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarTrigger,
+  Skeleton,
+  useSidebar,
+} from '@spree/dashboard-ui'
+import { PackageIcon } from '@spree/dashboard-ui/icons'
 import { useParams } from '@tanstack/react-router'
-import { PackageIcon } from 'lucide-react'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import { useAuth } from '../hooks/use-auth'
 import { primarySidebarSide, useTranslation } from '../lib/i18n'
-import { type NavEntry, useNavEntries } from '../lib/nav-registry'
+import { type NavEntry, resolveNavLabel, useNavEntries } from '../lib/nav-registry'
+import type { ActionName, SubjectName } from '../lib/permissions'
 import { type Permissions, usePermissions } from '../providers/permission-provider'
-import { useStore } from '../providers/store-provider'
+import { useOptionalStore } from '../providers/store-provider'
 import { type NavItem, NavMain } from './nav-main'
+import { SidebarSearch } from './sidebar-search'
+import { SidebarUser } from './sidebar-user'
 import { StoreSwitcher } from './store-switcher'
 
-function entryToNavItem(entry: NavEntry, storeId: string): NavItem {
-  const pathFor = (path: string) => (path === '/' ? `/${storeId}` : `/${storeId}${path}`)
+/**
+ * `labelKey` is resolved here rather than at registration so labels follow a
+ * language change — a literal `label` is frozen at import time.
+ */
+function entryToNavItem(entry: NavEntry, tenantId: string, t: (key: string) => string): NavItem {
+  const pathFor = (path: string) => (path === '/' ? `/${tenantId}` : `/${tenantId}${path}`)
   return {
-    title: entry.label,
+    title: resolveNavLabel(entry, t),
     url: pathFor(entry.path),
     icon: entry.icon ?? PackageIcon,
     subject: entry.subject,
+    action: entry.action,
     badge: entry.badge,
     items: entry.children?.map((child) => ({
-      title: child.label,
+      title: resolveNavLabel(child, t),
       url: pathFor(child.path),
       subject: child.subject,
+      action: child.action,
+      badge: child.badge,
     })),
   }
 }
 
-/** Hide items the user can't `read`. */
+/**
+ * Hide items the user can't act on — `read` unless the entry says otherwise.
+ *
+ * A group that declares no `subject` of its own is gated by its children
+ * instead: it has no page of its own, so its own link points at whichever
+ * child it lists first. Once permissions remove some of those children, both
+ * halves of that arrangement need fixing — the group's link has to follow the
+ * first child that survived, and a group with nothing left has to go.
+ */
 function filterByPermissions(items: NavItem[], permissions: Permissions): NavItem[] {
-  return items
-    .filter((item) => !item.subject || permissions.can('read', item.subject))
-    .map((item) => ({
-      ...item,
-      items: item.items?.filter((sub) => !sub.subject || permissions.can('read', sub.subject)),
-    }))
+  const allowed = (entry: { subject?: SubjectName; action?: ActionName }) =>
+    !entry.subject || permissions.can(entry.action ?? 'read', entry.subject)
+
+  return items.flatMap((item) => {
+    if (!allowed(item)) return []
+
+    const children = item.items?.filter(allowed)
+    if (item.subject) return [{ ...item, items: children }]
+
+    // Subject-less: gated by, and pointed at, its children.
+    const first = children?.[0]
+    if (item.items && !first) return []
+
+    return [{ ...item, items: children, url: first?.url ?? item.url }]
+  })
 }
 
-export function AppSidebar(props: ComponentProps<typeof Sidebar>) {
-  const { i18n } = useTranslation()
-  const { storeId } = useParams({ strict: false }) as { storeId?: string }
-  const { permissions } = usePermissions()
-  const { store } = useStore()
+/**
+ * The nav registry resolved for one tenant: entries prefixed with the tenant
+ * segment, `if` gates evaluated, and items the user cannot act on removed.
+ *
+ * Exported so a panel scoped by something other than a store composes the
+ * same registry — the seller panel prefixes with a seller id instead — rather
+ * than re-deriving the prefixing and permission filtering, which is what a
+ * second sidebar would otherwise copy.
+ */
+export function useNavItems(tenantId: string): {
+  navItems: NavItem[]
+  bottomItems: NavItem[]
+  /** True while permissions are still loading, so the nav is not yet knowable. */
+  isLoading: boolean
+} {
+  const { t } = useTranslation()
+  const { permissions, isLoading } = usePermissions()
+  const store = useOptionalStore()?.store ?? null
   const { user } = useAuth()
-  const id = storeId || 'default'
   const { main, bottom } = useNavEntries()
 
   const visibilityContext = { permissions, store, user }
   const visible = (entry: NavEntry) => !entry.if || entry.if(visibilityContext)
 
   const navItems = filterByPermissions(
-    main.filter(visible).map((e) => entryToNavItem(e, id)),
+    main.filter(visible).map((e) => entryToNavItem(e, tenantId, t)),
     permissions,
   )
   const bottomItems = filterByPermissions(
-    bottom.filter(visible).map((e) => entryToNavItem(e, id)),
+    bottom.filter(visible).map((e) => entryToNavItem(e, tenantId, t)),
     permissions,
   )
 
+  return { navItems, bottomItems, isLoading }
+}
+
+/**
+ * The primary sidebar: registry-driven nav under a tenant switcher.
+ *
+ * Shared by every panel. The two things that genuinely differ are which
+ * tenant the links are built under and what sits in the header — a store
+ * switcher for the operator, a seller switcher for the marketplace panel — so
+ * both are props. Everything else (side-by-language, collapsible rail,
+ * permission filtering) is the same in either, and a panel that copied this to
+ * change the header would silently miss every later fix to the rest.
+ *
+ * The rail carries the whole of the app's chrome: the tenant switcher and
+ * search above the nav, the account menu at its foot. There is no top bar —
+ * the page's own header is the only thing above the content.
+ */
+export function AppSidebar({
+  tenantId,
+  header,
+  uiLocales,
+  onEditProfile,
+  ...props
+}: ComponentProps<typeof Sidebar> & {
+  /**
+   * The id the nav links are prefixed with. Defaults to the route's `storeId`,
+   * so the operator's dashboard passes nothing.
+   */
+  tenantId?: string
+  /** Rendered in the header. Defaults to the store switcher. */
+  header?: ReactNode
+  /** Admin UI languages offered by the account menu's language switcher. */
+  uiLocales?: ReadonlyArray<{ code: string; name: string }>
+  /** Opens the app's edit-profile dialog from the account menu. */
+  onEditProfile?: () => void
+}) {
+  const { i18n } = useTranslation()
+  const { storeId } = useParams({ strict: false }) as { storeId?: string }
+  const { navItems, bottomItems, isLoading } = useNavItems(tenantId ?? storeId ?? 'default')
+
   return (
-    <Sidebar collapsible="icon" side={primarySidebarSide(i18n.language)} {...props}>
+    <Sidebar collapsible="icon" variant="inset" side={primarySidebarSide(i18n.language)} {...props}>
       <SidebarHeader>
-        <StoreSwitcher />
+        {/* The switcher, search and the account row are all hidden on a phone:
+            the top bar already names the store and carries both search and the
+            account menu, so repeating them inside the drawer spends rows of a
+            small screen saying what is visible behind it. The drawer is for
+            navigating. */}
+        <div className="hidden items-center gap-1 md:flex">
+          <div className="min-w-0 flex-1">{header ?? <StoreSwitcher />}</div>
+          <CollapseTrigger />
+        </div>
+        <div className="hidden md:block">
+          <SidebarSearch />
+        </div>
       </SidebarHeader>
       <SidebarContent>
-        <NavMain items={navItems} bottomItems={bottomItems} />
+        {/* Permissions decide which links exist, and until they arrive every
+            `can()` answers false — so the real nav is not "empty", it is not
+            yet known. Rendering the filtered list during that window shows a
+            near-empty rail that then pops to a full one; skeleton rows keep the
+            shell's shape steady and say the difference honestly.
+
+            Keyed on `isLoading` alone, not on an empty list: entries without a
+            `subject` (Home, Getting Started) skip the permission filter, so the
+            list is never actually empty and a length check would never fire. */}
+        {isLoading ? <NavSkeleton /> : <NavMain items={navItems} bottomItems={bottomItems} />}
       </SidebarContent>
+      <SidebarFooter className="hidden md:flex">
+        <SidebarUser uiLocales={uiLocales} onEditProfile={onEditProfile} />
+      </SidebarFooter>
     </Sidebar>
   )
 }
+
+/**
+ * Placeholder rows for the primary nav while permissions load.
+ *
+ * The count is deliberate rather than arbitrary: it approximates a typical
+ * operator's nav so the rail does not visibly resize when the real list
+ * replaces it. Marked `aria-hidden` — a screen reader gains nothing from
+ * placeholder rows, and the shell announces the page itself.
+ */
+function NavSkeleton() {
+  return (
+    <SidebarGroup aria-hidden>
+      <SidebarMenu>
+        {Array.from({ length: 8 }, (_, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length placeholder list
+          <SidebarMenuItem key={i}>
+            <div className="flex h-8 items-center gap-2 px-2">
+              <Skeleton className="size-4 shrink-0 rounded" />
+              <Skeleton className="h-3 w-24 group-data-[collapsible=icon]:hidden" />
+            </div>
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
+
+/**
+ * Collapses the rail to its icon width, beside the tenant switcher.
+ *
+ * It lives here because the rail is now the app's only chrome — the top bar
+ * that used to carry this control is gone, and without it the rail could be
+ * collapsed by keyboard alone. Hidden once collapsed: at icon width there is
+ * no room beside the avatar, and the rail's own edge handle (`SidebarRail`)
+ * expands it again.
+ */
+function CollapseTrigger() {
+  const { isMobile, state } = useSidebar()
+  if (isMobile || state === 'collapsed') return null
+
+  return (
+    <SidebarTrigger className="shrink-0 text-muted-foreground hover:bg-sidebar-accent hover:text-foreground" />
+  )
+}

package/src/components/bulk-action-bar.tsx

@@ -4,16 +4,15 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  toastManager,
   useConfirm,
 } from '@spree/dashboard-ui'
+import { EllipsisVerticalIcon } from '@spree/dashboard-ui/icons'
 import type { QueryKey } from '@tanstack/react-query'
 import { useQueryClient } from '@tanstack/react-query'
-import { MoreHorizontalIcon, XIcon } from 'lucide-react'
 import type { ReactNode } from 'react'
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from 'sonner'
 import { usePermissions } from '../providers/permission-provider'
 
 /**
@@ -32,6 +31,25 @@ export interface BulkActionFormProps<TFormValues = unknown> {
   onCancel: () => void
 }
 
+/**
+ * What a bulk action actually did, when that differs from what was selected.
+ *
+ * `count` is the number of records the action really affected. Reporting the
+ * selection size instead is wrong wherever the server skips rows it cannot
+ * move: the merchant is told fifteen products were submitted while a second
+ * toast says twelve were left alone.
+ */
+export interface BulkActionOutcome {
+  count: number
+}
+
+function outcomeCount(result: unknown): number | null {
+  if (typeof result !== 'object' || result === null) return null
+
+  const count = (result as BulkActionOutcome).count
+  return typeof count === 'number' ? count : null
+}
+
 /**
  * Declarative bulk action passed to `<ResourceTable>`. Three shapes:
  *
@@ -63,7 +81,19 @@ export interface BulkAction<TFormValues = unknown> {
   }
   /** Render-prop for actions that need to collect form values before running. */
   form?: (props: BulkActionFormProps<TFormValues>) => ReactNode
-  /** The mutation. Resolves with anything; errors surface a toast. */
+  /**
+   * The mutation. Errors surface a toast.
+   *
+   * Resolve with a `BulkActionOutcome` when the server may act on fewer rows
+   * than were selected — a bulk endpoint that skips what it cannot move
+   * returns its own count, and `{n}` in `successMessage` is then that count
+   * rather than the size of the selection. Resolving with anything else (the
+   * common case) leaves `{n}` as the number of selected rows.
+   *
+   * Typed `unknown` rather than the union, which a narrower type cannot
+   * express: most actions resolve with their raw mutation payload, so the
+   * outcome shape is recognised at runtime, not enforced here.
+   */
   run: (ctx: BulkActionRunContext<TFormValues>) => Promise<unknown>
   /**
    * Extra query keys to invalidate after `run` succeeds. The table's own
@@ -85,30 +115,15 @@ interface BulkActionBarProps {
   // the precise type via `BulkAction<MyFormValues>`.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   actions: BulkAction<any>[]
-  onClear: () => void
   /** Called after a successful run to refresh the table / clear selection. */
   onDone: () => void
-  /**
-   * When set, the bar centers itself horizontally inside this element's
-   * bounding rect on viewports wide enough to comfortably show it inside
-   * (>= +md+ breakpoint). On smaller viewports it falls back to centering
-   * against the visual viewport. Without this the bar always anchors to
-   * the viewport.
-   */
-  anchorRef?: React.RefObject<HTMLElement | null>
 }
 
 function interpolate(template: string, n: number) {
   return template.replace(/\{n\}/g, String(n))
 }
 
-export function BulkActionBar({
-  selectedIds,
-  actions,
-  onClear,
-  onDone,
-  anchorRef,
-}: BulkActionBarProps) {
+export function BulkActionBar({ selectedIds, actions, onDone }: BulkActionBarProps) {
   const { t } = useTranslation()
   const confirm = useConfirm()
   const queryClient = useQueryClient()
@@ -126,18 +141,24 @@ export function BulkActionBar({
     if (count === 0) setPendingForm(null)
   }, [count])
 
-  if (count === 0) return null
-
-  // Filter by CanCanCan when subject is declared.
-  const visibleActions = actions.filter((a) =>
-    a.subject ? permissions.can(a.action ?? 'update', a.subject) : true,
+  // Filter by CanCanCan when subject is declared. Memoized so the layout below
+  // can treat a change here as a real change: it re-measures the overflow
+  // whenever the action set does, and a fresh array every render would make
+  // that run on every render instead. Must stay above the early return —
+  // hooks cannot be called conditionally.
+  const visibleActions = useMemo(
+    () =>
+      actions.filter((a) => (a.subject ? permissions.can(a.action ?? 'update', a.subject) : true)),
+    [actions, permissions],
   )
 
+  if (count === 0) return null
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   async function execute(action: BulkAction<any>, formValues?: unknown) {
     setRunning(true)
     try {
-      await action.run({ ids: selectedIds, formValues })
+      const result = await action.run({ ids: selectedIds, formValues })
       // Invalidate the action's declared cross-resource keys BEFORE `onDone`
       // (which invalidates the host table's own key). Without this, pages
       // like Customer Groups that cache `customers_count` won't refresh
@@ -146,17 +167,19 @@ export function BulkActionBar({
       for (const key of action.invalidate ?? []) {
         queryClient.invalidateQueries({ queryKey: key })
       }
-      toast.success(
-        interpolate(
+      toastManager.add({
+        type: 'success',
+        title: interpolate(
           action.successMessage ?? t('admin.components.bulk_action_bar.default_success'),
-          count,
+          // What the server did, when it said — otherwise what was selected.
+          outcomeCount(result) ?? count,
         ),
-      )
+      })
       onDone()
     } catch (err) {
       const message =
         err instanceof Error ? err.message : t('admin.components.bulk_action_bar.default_error')
-      toast.error(action.errorMessage ?? message)
+      toastManager.add({ type: 'error', title: action.errorMessage ?? message })
     } finally {
       setRunning(false)
     }
@@ -184,8 +207,6 @@ export function BulkActionBar({
     <BulkActionBarLayout
       count={count}
       actions={visibleActions}
-      anchorRef={anchorRef}
-      onClear={onClear}
       onClickAction={handleClick}
       running={running}
       pendingForm={pendingForm}
@@ -205,8 +226,6 @@ interface BulkActionBarLayoutProps {
   count: number
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   actions: BulkAction<any>[]
-  anchorRef?: React.RefObject<HTMLElement | null>
-  onClear: () => void
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onClickAction: (action: BulkAction<any>) => void
   running: boolean
@@ -228,8 +247,6 @@ interface BulkActionBarLayoutProps {
 function BulkActionBarLayout({
   count,
   actions,
-  anchorRef,
-  onClear,
   onClickAction,
   running,
   pendingForm,
@@ -239,104 +256,30 @@ function BulkActionBarLayout({
 }: BulkActionBarLayoutProps) {
   const { t } = useTranslation()
 
-  // The bar is centered (+w-fit+) so the parent doesn't constrain it; instead
-  // we cap against the viewport with a sensible margin.
   const containerRef = useRef<HTMLDivElement | null>(null)
   const measureRef = useRef<HTMLDivElement | null>(null)
   // Width of the bar's leading section (clear button + label + divider).
   const leadingRef = useRef<HTMLDivElement | null>(null)
   const [visibleCount, setVisibleCount] = useState(actions.length)
-  // JS-computed position so it's immune to transformed ancestors.
-  const [barLeft, setBarLeft] = useState(0)
-  const [barTop, setBarTop] = useState(0)
-
-  // Max-width state so the bar never extends past its host region (the
-  // table card on desktop, the visual viewport on mobile).
-  const [maxWidth, setMaxWidth] = useState<number | null>(null)
-
-  // Reposition + remeasure on viewport resize, scroll, and font load.
-  useLayoutEffect(() => {
-    function reposition() {
-      const el = containerRef.current
-      if (!el) return
-      const width = el.offsetWidth
-      const height = el.offsetHeight
-      // visualViewport accounts for the mobile browser URL bar collapsing;
-      // falls back to window dimensions on browsers without the API.
-      const vv = window.visualViewport
-      const vpWidth = vv?.width ?? window.innerWidth
-      const vpHeight = vv?.height ?? window.innerHeight
-      const vpLeft = vv?.offsetLeft ?? 0
-      const vpTop = vv?.offsetTop ?? 0
-
-      // Pin to viewport bottom. The bar should always stay reachable —
-      // anchoring to the table card pinned it to the table's bottom, which
-      // sits off-screen when the table is taller than the viewport.
-      let left = vpLeft + Math.round((vpWidth - width) / 2)
-      // Cap width at viewport - 2rem on mobile.
-      let cap = vpWidth - 32
-      // If an anchor element is provided, clamp the horizontal center AND
-      // the max width to the anchor's bounding rect, so on desktop the bar
-      // reads as part of the table region rather than free-floating across
-      // the whole page.
-      const anchor = anchorRef?.current
-      if (anchor && vpWidth >= 768) {
-        const rect = anchor.getBoundingClientRect()
-        left = rect.left + Math.round((rect.width - width) / 2)
-        cap = Math.round(rect.width * 0.9) // 90% of the table card width
-      }
-      setBarLeft(left)
-      setBarTop(vpTop + vpHeight - height - 16) // 16px from bottom
-      setMaxWidth(cap)
-    }
-    reposition()
-    window.addEventListener('resize', reposition)
-    window.addEventListener('scroll', reposition, true)
-    window.visualViewport?.addEventListener('resize', reposition)
-    window.visualViewport?.addEventListener('scroll', reposition)
-    // Track the anchor's own size/position changes (sidebar collapse,
-    // pagination footer height swaps, etc.).
-    let ro: ResizeObserver | undefined
-    if (anchorRef?.current) {
-      ro = new ResizeObserver(reposition)
-      ro.observe(anchorRef.current)
-    }
-    return () => {
-      window.removeEventListener('resize', reposition)
-      window.removeEventListener('scroll', reposition, true)
-      window.visualViewport?.removeEventListener('resize', reposition)
-      window.visualViewport?.removeEventListener('scroll', reposition)
-      ro?.disconnect()
-    }
-    // Re-run when the anchor element resolves (refs are null on first render
-    // and populated on the next commit). The +ResizeObserver+ + window
-    // listeners re-attach to whatever anchor the consumer passed.
-  }, [anchorRef?.current])
 
   // Measure once on mount + whenever the container or action set changes.
   // +useLayoutEffect+ so the user never sees a flash of overflowing actions.
   useLayoutEffect(() => {
     function recompute() {
+      const container = containerRef.current
       const measure = measureRef.current
       const leading = leadingRef.current
-      if (!measure || !leading) return
+      if (!container || !measure || !leading) return
 
-      // Compute available action-area width against the same cap that the
-      // bar's +max-width+ uses (table card width on desktop, viewport on
-      // mobile) so the overflow count matches what the user will see.
-      const anchor = anchorRef?.current
-      const vpWidth = document.documentElement.clientWidth
-      const cap =
-        anchor && vpWidth >= 768
-          ? Math.round(anchor.getBoundingClientRect().width * 0.9)
-          : vpWidth - 32
-      // 16px for the bar's own +p-1+ + border + subpixel safety pad.
-      const available = cap - 16 - leading.offsetWidth
+      // The bar spans the header row, so the budget is its own width less the
+      // leading section (the "n selected" count + divider). The container sits
+      // inside the host cell's padding and after the select-all checkbox, so
+      // neither needs subtracting here.
+      const available = container.clientWidth - leading.offsetWidth
       // +⋯+ button (icon-sm = 28px) + gap on each side + safety margin.
-      // 64px keeps the dropdown comfortably visible on narrow viewports
-      // and gives the menu room to position without spilling off-screen.
       const moreWidth = 64
-      const children = Array.from(measure.children) as HTMLElement[]
+      // One measured child per action, in order.
+      const children = Array.from(measure.children).slice(0, actions.length) as HTMLElement[]
       const widths = children.map((el) => el.offsetWidth)
 
       let used = 0
@@ -357,50 +300,34 @@ function BulkActionBarLayout({
     recompute()
     const ro = new ResizeObserver(recompute)
     if (containerRef.current) ro.observe(containerRef.current)
-    if (anchorRef?.current) ro.observe(anchorRef.current)
     window.addEventListener('resize', recompute)
     return () => {
       ro.disconnect()
       window.removeEventListener('resize', recompute)
     }
-    // Re-run only when the anchor element resolves (refs are null on first
-    // render and populated on commit). Changes to +actions+ don't need an
-    // explicit dep — the +ResizeObserver+ on the container fires when
-    // children render/unrender, which re-triggers +recompute+.
-  }, [anchorRef?.current])
+    // Re-measure when the action set changes, not only when the container
+    // resizes: the list is filtered by permission, so it can gain or lose
+    // buttons — and a language switch relabels them — with the bar's own width
+    // unchanged. The measuring row is zero-width by design, so observing it
+    // would not catch either case.
+  }, [actions])
 
   const visible = actions.slice(0, visibleCount)
   const overflow = actions.slice(visibleCount)
 
-  // JS-driven positioning: +position: fixed+ silently re-anchors to a
-  // transformed/contained ancestor (sidebar wrapper, Card, etc.) on this
-  // app. Portaling to +document.body+ should sidestep that, but in
-  // practice the bar still landed at the table's bottom on mobile. So we
-  // set explicit +top/left+ in pixels from +window+ measurements every
-  // frame the viewport changes. No CSS positioning, no ambiguity.
-  const bar = (
+  // `w-full` matters for more than layout: this is the element the overflow
+  // calculation measures, and as a bare flex item it would size to its own
+  // content instead of the header cell, leaving almost no budget and pushing
+  // every action into the `⋯` menu.
+  return (
     <>
       <div
         ref={containerRef}
-        style={{
-          position: 'fixed',
-          left: `${barLeft}px`,
-          top: `${barTop}px`,
-          maxWidth: maxWidth != null ? `${maxWidth}px` : 'calc(100vw - 2rem)',
-        }}
-        className="z-50 flex w-fit items-center gap-0.5 rounded-xl border bg-popover p-1 shadow-md"
+        className="flex w-full items-center gap-0.5 overflow-hidden animate-in fade-in slide-in-from-left-2 duration-150 ease-out"
       >
+        {/* No clear button: the bar sits beside the header's select-all
+            checkbox, which already clears the selection. */}
         <div ref={leadingRef} className="flex items-center gap-0.5">
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            onClick={onClear}
-            aria-label={t('admin.actions.clear')}
-            className="text-muted-foreground"
-          >
-            <XIcon className="size-4" />
-          </Button>
           <span className="whitespace-nowrap px-1.5 text-sm">
             {t('admin.components.bulk_action_bar.selected', { count })}
           </span>
@@ -425,7 +352,7 @@ function BulkActionBarLayout({
                 size="icon-sm"
                 aria-label={t('admin.actions.more_actions')}
               >
-                <MoreHorizontalIcon className="size-4" />
+                <EllipsisVerticalIcon className="size-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -450,7 +377,11 @@ function BulkActionBarLayout({
         <div
           ref={measureRef}
           aria-hidden
-          className="pointer-events-none invisible absolute left-0 top-0 flex items-center gap-0.5"
+          // `overflow-hidden` on a zero-width box: the buttons keep their
+          // natural `offsetWidth` for measurement, but nothing escapes to
+          // stretch the table's scroll width — without it every list becomes
+          // horizontally scrollable whenever rows are selected.
+          className="pointer-events-none invisible absolute left-0 top-0 flex w-0 items-center gap-0.5 overflow-hidden"
         >
           {actions.map((action) => (
             <BulkActionButton
@@ -470,9 +401,6 @@ function BulkActionBarLayout({
       })}
     </>
   )
-
-  if (typeof document === 'undefined') return bar
-  return createPortal(bar, document.body)
 }
 
 function BulkActionButton({
@@ -495,7 +423,11 @@ function BulkActionButton({
       onClick={onClick}
       disabled={disabled}
       tabIndex={tabIndex}
-      className="gap-1.5 whitespace-nowrap px-2"
+      // `shrink-0` so the zero-width measuring layer can't squeeze these and
+      // report a width smaller than the button really renders at. Hover is the
+      // ghost variant's own `bg-accent` — no override needed now that the bar's
+      // muted background sits well clear of it.
+      className="shrink-0 gap-1.5 whitespace-nowrap px-2"
     >
       {action.icon}
       {action.label}