create-mercato-app 0.6.2-develop.3372.1.de9a169973 → 0.6.2-develop.3380.1.bb14509041

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mercato-app",
-  "version": "0.6.2-develop.3372.1.de9a169973",
+  "version": "0.6.2-develop.3380.1.bb14509041",
   "type": "module",
   "description": "Create a new Open Mercato application",
   "main": "./dist/index.js",

package/template/src/app/globals.css

@@ -30,6 +30,16 @@ TODO: Fix that latter to have reference by the package names
   z-index: var(--z-index-modal-elevated, 55);
 }
 
+/* Explicit text-overline utility. Tailwind 4 sometimes does not generate the
+   `text-X` utility from `--font-size-X` in @theme inline if no class literal
+   is found in the source scanner ahead of compilation. Declaring the utility
+   here guarantees the rule lands in the bundle. Used for tiny section labels
+   (workspace switcher TENANT / ORGANIZATION, notification count badge, etc.). */
+@utility text-overline {
+  font-size: var(--font-size-overline, 0.6875rem);
+  line-height: var(--font-size-overline--line-height, 1rem);
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

package/template/src/components/BackendHeaderChrome.tsx

@@ -1,20 +1,25 @@
 'use client'
 
 import dynamic from 'next/dynamic'
+import Link from 'next/link'
 import * as React from 'react'
+import { MoreHorizontal, PlugZap, Settings, Mail } from 'lucide-react'
 import { hasFeature } from '@open-mercato/shared/security/features'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
 import { IntegrationsButton } from '@open-mercato/ui/backend/IntegrationsButton'
 import { ProfileDropdown } from '@open-mercato/ui/backend/ProfileDropdown'
 import { SettingsButton } from '@open-mercato/ui/backend/SettingsButton'
 import { useBackendChrome } from '@open-mercato/ui/backend/BackendChromeProvider'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { AiAssistantShellIntegration } from '@/components/AiAssistantShellIntegration'
 
 const LazyAiChatHeaderButton = dynamic(
   () => import('@open-mercato/ai-assistant/frontend').then((module) => module.AiChatHeaderButton),
   { ssr: false, loading: () => null },
 )
-const LazyGlobalSearchDialog = dynamic(
-  () => import('@open-mercato/search/modules/search/frontend').then((module) => module.GlobalSearchDialog),
+const LazyTopbarSearchInline = dynamic(
+  () => import('@open-mercato/search/modules/search/frontend').then((module) => module.TopbarSearchInline),
   { ssr: false, loading: () => null },
 )
 const LazyOrganizationSwitcher = dynamic(() => import('@/components/OrganizationSwitcher'), {
@@ -50,6 +55,51 @@ function hasVisibleRoute(groups: Array<{ items?: Array<{ href: string; hidden?:
   return false
 }
 
+type MobileMoreItem = {
+  id: string
+  href: string
+  icon: React.ReactNode
+  label: string
+}
+
+function MobileMoreMenu({ items }: { items: MobileMoreItem[] }) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  if (items.length === 0) return null
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <IconButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          aria-label={t('appShell.moreActions', 'More actions')}
+          title={t('appShell.moreActions', 'More actions')}
+        >
+          <MoreHorizontal className="size-4" />
+        </IconButton>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-[220px] p-1">
+        <div className="flex flex-col">
+          {items.map((item) => (
+            <Link
+              key={item.id}
+              href={item.href}
+              onClick={() => setOpen(false)}
+              className="flex items-center gap-3 rounded-sm px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted/60 focus:outline-none focus-visible:bg-muted/60"
+            >
+              <span className="inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground">
+                {item.icon}
+              </span>
+              <span className="flex-1 truncate">{item.label}</span>
+            </Link>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
 export function BackendHeaderChrome({
   email,
   embeddingConfigured,
@@ -57,6 +107,7 @@ export function BackendHeaderChrome({
   tenantId,
   organizationId,
 }: BackendHeaderChromeProps) {
+  const t = useT()
   const { payload, isReady } = useBackendChrome()
   const grantedFeatures = payload?.grantedFeatures ?? []
   const showIntegrationsButton = React.useMemo(
@@ -80,6 +131,33 @@ export function BackendHeaderChrome({
     [grantedFeatures],
   )
 
+  const mobileMoreItems = React.useMemo<MobileMoreItem[]>(() => {
+    const items: MobileMoreItem[] = []
+    if (showIntegrationsButton) {
+      items.push({
+        id: 'integrations',
+        href: '/backend/integrations',
+        icon: <PlugZap className="size-4" aria-hidden="true" />,
+        label: t('integrations.nav.title', 'Integrations'),
+      })
+    }
+    items.push({
+      id: 'settings',
+      href: '/backend/settings',
+      icon: <Settings className="size-4" aria-hidden="true" />,
+      label: t('backend.nav.settings', 'Settings'),
+    })
+    if (isReady && showMessages) {
+      items.push({
+        id: 'messages',
+        href: '/backend/messages',
+        icon: <Mail className="size-4" aria-hidden="true" />,
+        label: t('messages.nav.inbox', 'Messages'),
+      })
+    }
+    return items
+  }, [showIntegrationsButton, isReady, showMessages, t])
+
   return (
     <>
       {isReady && showAiAssistant ? (
@@ -88,17 +166,33 @@ export function BackendHeaderChrome({
         </AiAssistantShellIntegration>
       ) : null}
       {isReady && showSearch ? (
-        <LazyGlobalSearchDialog
+        <LazyTopbarSearchInline
           embeddingConfigured={embeddingConfigured}
           missingConfigMessage={missingConfigMessage}
         />
       ) : null}
       {isReady ? <LazyOrganizationSwitcher /> : null}
-      {showIntegrationsButton ? <IntegrationsButton /> : null}
-      <SettingsButton />
-      <ProfileDropdown email={email} />
+
+      {/* Secondary actions — inline on md+, grouped under a More button on <md */}
+      {showIntegrationsButton ? (
+        <span className="hidden md:contents">
+          <IntegrationsButton />
+        </span>
+      ) : null}
+      <span className="hidden md:contents">
+        <SettingsButton />
+      </span>
+      {isReady && showMessages ? (
+        <span className="hidden md:contents">
+          <LazyMessagesIcon />
+        </span>
+      ) : null}
+      <span className="md:hidden">
+        <MobileMoreMenu items={mobileMoreItems} />
+      </span>
+
       {isReady && showNotifications ? <LazyNotificationBellWrapper /> : null}
-      {isReady && showMessages ? <LazyMessagesIcon /> : null}
+      <ProfileDropdown email={email} />
     </>
   )
 }

package/template/src/components/OrganizationSwitcher.tsx

@@ -7,6 +7,19 @@ import { raiseCrudError } from '@open-mercato/ui/backend/utils/serverErrors'
 import { emitOrganizationScopeChanged } from '@open-mercato/shared/lib/frontend/organizationEvents'
 import { OrganizationSelect, type OrganizationTreeNode } from '@open-mercato/core/modules/directory/components/OrganizationSelect'
 import { TenantSelect, type TenantRecord } from '@open-mercato/core/modules/directory/components/TenantSelect'
+import { Building2, Check, ChevronDown, Settings2 } from 'lucide-react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@open-mercato/ui/primitives/popover'
 import { ALL_ORGANIZATIONS_COOKIE_VALUE } from '@open-mercato/core/modules/directory/constants'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 
@@ -372,40 +385,142 @@ export default function OrganizationSwitcher({ compact }: OrganizationSwitcherEx
     )
   }
 
+  const flatOrgOptions = React.useMemo(() => {
+    const out: Array<{ id: string; label: string; selectable: boolean; depth: number }> = []
+    const walk = (list: OrganizationTreeNode[]) => {
+      for (const node of list) {
+        const depth = typeof node.depth === 'number' ? node.depth : 0
+        const indent = depth > 0 ? `${'  '.repeat(depth)}` : ''
+        out.push({
+          id: node.id,
+          label: `${indent}${node.name}`,
+          selectable: node.selectable !== false,
+          depth,
+        })
+        if (Array.isArray(node.children) && node.children.length > 0) walk(node.children as OrganizationTreeNode[])
+      }
+    }
+    walk(nodes)
+    return out
+  }, [nodes])
+
+  const ALL_ORGS_SENTINEL = '__all__'
+  const orgSelectValue = !value ? (showAllOption ? ALL_ORGS_SENTINEL : '') : value
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+  const activeOrgLabel = React.useMemo(() => {
+    if (!value) {
+      return showAllOption
+        ? t('organizationSwitcher.allOrganizations', 'All organizations')
+        : t('organizationSwitcher.label', 'Organization')
+    }
+    return flatOrgOptions.find((opt) => opt.id === value)?.label.trim()
+      || t('organizationSwitcher.label', 'Organization')
+  }, [value, showAllOption, flatOrgOptions, t])
+
+  if (state.status === 'loading') {
+    return <span className="hidden md:inline text-xs text-muted-foreground">{t('organizationSwitcher.loading')}</span>
+  }
+  if (state.status === 'error') {
+    return <span className="hidden md:inline text-xs text-destructive">{t('organizationSwitcher.error')}</span>
+  }
+  if (!hasOptions) {
+    return <span className="hidden md:inline text-xs text-muted-foreground">{t('organizationSwitcher.empty')}</span>
+  }
+
   return (
-    <div className="flex flex-wrap items-center gap-2 text-sm">
-      {showTenantSelect ? (
-        <>
-          <TenantSelect
-            id="tenant-switcher"
-            value={tenantSelectValue}
-            onChange={handleTenantChange}
-            tenants={tenantSelectOptions}
-            fetchOnMount={false}
-            includeEmptyOption={false}
-            className="h-9 rounded border pl-2 pr-7 text-sm truncate"
-            aria-label={t('organizationSwitcher.tenantLabel', 'Tenant')}
-          />
-        </>
-      ) : null}
-      {state.status === 'loading' ? (
-        <span className="text-xs text-muted-foreground">{t('organizationSwitcher.loading')}</span>
-      ) : state.status === 'error' ? (
-        <span className="text-xs text-destructive">{t('organizationSwitcher.error')}</span>
-      ) : hasOptions ? (
-        <OrganizationSelect
-          id="org-switcher"
-          value={value || null}
-          onChange={handleChange}
-          nodes={nodes}
-          fetchOnMount={false}
-          includeAllOption={showAllOption}
-          aria-label={t('organizationSwitcher.label')}
-          className="h-9 rounded border pl-2 pr-7 text-sm truncate"
-        />
-      ) : (
-        <span className="text-xs text-muted-foreground">{t('organizationSwitcher.empty')}</span>
-      )}
-    </div>
+    <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={`${t('organizationSwitcher.label')}: ${activeOrgLabel}`}
+          title={activeOrgLabel}
+          className="inline-flex h-8 w-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-0 text-sm font-medium shadow-xs transition-colors hover:bg-muted/40 focus:outline-none focus-visible:shadow-focus focus-visible:border-foreground data-[state=open]:bg-muted/40 sm:w-auto sm:justify-start sm:px-3 sm:max-w-[200px] md:max-w-[260px]"
+        >
+          <Building2 className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+          <span className="hidden sm:block truncate flex-1 text-left">{activeOrgLabel}</span>
+          <ChevronDown className="hidden sm:block size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-[320px] p-0">
+        {showTenantSelect ? (
+          <div className="border-b p-3 space-y-2">
+            <div className="text-overline font-medium uppercase tracking-wider text-muted-foreground/80 leading-none">
+              {t('organizationSwitcher.tenantLabel', 'Tenant')}
+            </div>
+            <Select
+              value={tenantSelectValue || undefined}
+              onValueChange={(next) => handleTenantChange(next || null)}
+            >
+              <SelectTrigger
+                aria-label={t('organizationSwitcher.tenantLabel', 'Tenant')}
+                className="w-full [&>span]:truncate"
+              >
+                <SelectValue placeholder={t('organizationSwitcher.tenantLabel', 'Tenant')} />
+              </SelectTrigger>
+              <SelectContent>
+                {tenantSelectOptions.map((tenant) => (
+                  <SelectItem key={tenant.id} value={tenant.id} disabled={!tenant.isActive}>
+                    {tenant.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : null}
+        <div className="p-2">
+          <div className="px-2 py-1.5 text-overline font-medium uppercase tracking-wider text-muted-foreground/80 leading-none">
+            {t('organizationSwitcher.label')}
+          </div>
+          <div className="max-h-[280px] overflow-y-auto">
+            {showAllOption ? (
+              <button
+                type="button"
+                onClick={() => {
+                  handleChange(null)
+                  setPopoverOpen(false)
+                }}
+                className="flex w-full items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted/40 focus:outline-none focus-visible:bg-muted/40"
+              >
+                <span className="truncate min-w-0">{t('organizationSwitcher.allOrganizations', 'All organizations')}</span>
+                {!value ? <Check className="size-4 shrink-0 text-accent-indigo" aria-hidden="true" /> : null}
+              </button>
+            ) : null}
+            {flatOrgOptions.map((opt) => {
+              const isActive = value === opt.id
+              return (
+                <button
+                  key={opt.id}
+                  type="button"
+                  disabled={!opt.selectable}
+                  onClick={() => {
+                    if (!opt.selectable) return
+                    handleChange(opt.id)
+                    setPopoverOpen(false)
+                  }}
+                  style={{ paddingLeft: `${0.5 + opt.depth * 0.75}rem` }}
+                  className="flex w-full items-center justify-between gap-2 rounded-sm py-1.5 pr-2 text-left text-sm transition-colors hover:bg-muted/40 disabled:opacity-50 disabled:hover:bg-transparent focus:outline-none focus-visible:bg-muted/40"
+                >
+                  <span className="truncate min-w-0">{opt.label.trim()}</span>
+                  {isActive ? <Check className="size-4 shrink-0 text-accent-indigo" aria-hidden="true" /> : null}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+        {canManage ? (
+          <div className="border-t p-2">
+            <Link
+              href="/backend/directory/organizations"
+              onClick={() => setPopoverOpen(false)}
+              className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground focus:outline-none focus-visible:bg-muted/40"
+            >
+              <Settings2 className="size-4 shrink-0" aria-hidden="true" />
+              <span>{t('organizationSwitcher.manage')}</span>
+            </Link>
+          </div>
+        ) : null}
+      </PopoverContent>
+    </Popover>
   )
 }

package/template/src/components/__tests__/BackendHeaderChrome.test.tsx

@@ -18,6 +18,11 @@ jest.mock('next/dynamic', () => (loader: () => Promise<unknown>) => {
   return Lazy
 })
 
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback?: string) => fallback ?? _key,
+  useLocale: () => 'en',
+}))
+
 jest.mock('@open-mercato/ui/backend/BackendChromeProvider', () => ({
   useBackendChrome: () => ({ payload: { groups: [], grantedFeatures: [] }, isReady: true }),
 }))

package/template/src/i18n/de.json

@@ -41,9 +41,11 @@
   "app.page.title": "Open Mercato",
   "app.status": "{status}",
   "app.title": "Open Mercato Starter (Next.js + shadcn + MikroORM)",
+  "appShell.breadcrumb.collapsed": "{count} ausgeblendete Navigationsschritte anzeigen",
   "appShell.closeMenu": "Menü schließen",
   "appShell.customizeSidebar": "Seitenleiste anpassen",
   "appShell.goToDashboard": "Zum Dashboard",
+  "appShell.moreActions": "Weitere Aktionen",
   "appShell.openMenu": "Menü öffnen",
   "appShell.productName": "Open Mercato",
   "appShell.sidebarApplyToRolesDescription": "Wähle Rollen aus, die dieses Seitenleisten-Layout standardmäßig verwenden sollen.",
@@ -83,6 +85,7 @@
   "auth.usersRoles": "Benutzer und Rollen",
   "backend.nav.backToMain": "Zurück zur Übersicht",
   "backend.nav.developers": "Entwickler",
+  "backend.nav.main": "Haupt",
   "backend.nav.profile": "Profil",
   "backend.nav.security": "Sicherheit",
   "backend.selectModule": "Wähle ein Modul im Backend aus.",
@@ -535,6 +538,7 @@
   "organizationSelect.error": "Organisationen konnten nicht geladen werden",
   "organizationSelect.inactive": "Inaktiv",
   "organizationSelect.loading": "Organisationen werden geladen…",
+  "organizationSwitcher.allOrganizations": "Alle Organisationen",
   "organizationSwitcher.empty": "Keine Organisationen",
   "organizationSwitcher.error": "Laden fehlgeschlagen",
   "organizationSwitcher.label": "Organisation",

package/template/src/i18n/en.json

@@ -41,9 +41,11 @@
   "app.page.title": "Open Mercato",
   "app.status": "{status}",
   "app.title": "Open Mercato starter (Next.js + shadcn + MikroORM)",
+  "appShell.breadcrumb.collapsed": "Show {count} hidden navigation steps",
   "appShell.closeMenu": "Close menu",
   "appShell.customizeSidebar": "Customize sidebar",
   "appShell.goToDashboard": "Go to dashboard",
+  "appShell.moreActions": "More actions",
   "appShell.openMenu": "Open menu",
   "appShell.productName": "Open Mercato",
   "appShell.sidebarApplyToRolesDescription": "Select roles that should receive this sidebar layout by default.",
@@ -83,6 +85,7 @@
   "auth.usersRoles": "Users & Roles",
   "backend.nav.backToMain": "Back to Main",
   "backend.nav.developers": "Developers",
+  "backend.nav.main": "Main",
   "backend.nav.profile": "Profile",
   "backend.nav.security": "Security",
   "backend.selectModule": "Select a module in the backend.",
@@ -535,6 +538,7 @@
   "organizationSelect.error": "Failed to load organizations",
   "organizationSelect.inactive": "Inactive",
   "organizationSelect.loading": "Loading organizations…",
+  "organizationSwitcher.allOrganizations": "All organizations",
   "organizationSwitcher.empty": "No organizations",
   "organizationSwitcher.error": "Failed to load",
   "organizationSwitcher.label": "Organization",

package/template/src/i18n/es.json

@@ -41,9 +41,11 @@
   "app.page.title": "Open Mercato",
   "app.status": "{status}",
   "app.title": "Inicio de Open Mercato (Next.js + shadcn + MikroORM)",
+  "appShell.breadcrumb.collapsed": "Mostrar {count} pasos de navegación ocultos",
   "appShell.closeMenu": "Cerrar menú",
   "appShell.customizeSidebar": "Personalizar barra lateral",
   "appShell.goToDashboard": "Ir al panel",
+  "appShell.moreActions": "Más acciones",
   "appShell.openMenu": "Abrir menú",
   "appShell.productName": "Open Mercato",
   "appShell.sidebarApplyToRolesDescription": "Selecciona los roles que deben usar este diseño de barra lateral de forma predeterminada.",
@@ -83,6 +85,7 @@
   "auth.usersRoles": "Usuarios y roles",
   "backend.nav.backToMain": "Volver al inicio",
   "backend.nav.developers": "Desarrolladores",
+  "backend.nav.main": "Principal",
   "backend.nav.profile": "Perfil",
   "backend.nav.security": "Seguridad",
   "backend.selectModule": "Selecciona un módulo en el panel.",
@@ -535,6 +538,7 @@
   "organizationSelect.error": "No se pudieron cargar las organizaciones",
   "organizationSelect.inactive": "Inactiva",
   "organizationSelect.loading": "Cargando organizaciones…",
+  "organizationSwitcher.allOrganizations": "Todas las organizaciones",
   "organizationSwitcher.empty": "Sin organizaciones",
   "organizationSwitcher.error": "Error al cargar",
   "organizationSwitcher.label": "Organización",

package/template/src/i18n/pl.json

@@ -41,9 +41,11 @@
   "app.page.title": "Open Mercato",
   "app.status": "{status}",
   "app.title": "Open Mercato Starter (Next.js + shadcn + MikroORM)",
+  "appShell.breadcrumb.collapsed": "Pokaż {count} ukrytych kroków nawigacji",
   "appShell.closeMenu": "Zamknij menu",
   "appShell.customizeSidebar": "Dostosuj pasek boczny",
   "appShell.goToDashboard": "Przejdź do pulpitu",
+  "appShell.moreActions": "Więcej akcji",
   "appShell.openMenu": "Otwórz menu",
   "appShell.productName": "Open Mercato",
   "appShell.sidebarApplyToRolesDescription": "Wybierz role, które powinny domyślnie korzystać z tego układu paska bocznego.",
@@ -83,6 +85,7 @@
   "auth.usersRoles": "Użytkownicy i role",
   "backend.nav.backToMain": "Powrót do strony głównej",
   "backend.nav.developers": "Deweloperzy",
+  "backend.nav.main": "Główne",
   "backend.nav.profile": "Profil",
   "backend.nav.security": "Bezpieczeństwo",
   "backend.selectModule": "Wybierz moduł w panelu.",
@@ -535,6 +538,7 @@
   "organizationSelect.error": "Nie udało się załadować organizacji",
   "organizationSelect.inactive": "Nieaktywna",
   "organizationSelect.loading": "Ładowanie organizacji…",
+  "organizationSwitcher.allOrganizations": "Wszystkie organizacje",
   "organizationSwitcher.empty": "Brak organizacji",
   "organizationSwitcher.error": "Nie udało się załadować",
   "organizationSwitcher.label": "Organizacja",