create-freakpunch 0.0.0-stage → 0.2.0

package/template/src/core/components/status-badge.tsx

@@ -0,0 +1,26 @@
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+
+export type StatusTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral'
+
+const dot: Record<StatusTone, string> = {
+  success: 'bg-success',
+  warning: 'bg-warning',
+  danger: 'bg-danger',
+  info: 'bg-info',
+  neutral: 'bg-muted-foreground/50',
+}
+
+/** Neutral outline pill with a semantic color dot: color only where it carries meaning. */
+export function StatusBadge({ tone, children, className }: { tone: StatusTone; children: React.ReactNode; className?: string }) {
+  return (
+    <Badge variant="outline" className={cn('gap-1.5 font-medium', className)}>
+      <span aria-hidden className={cn('size-1.5 rounded-full', dot[tone])} />
+      {children}
+    </Badge>
+  )
+}
+
+export function StatusDot({ tone, className }: { tone: StatusTone; className?: string }) {
+  return <span aria-hidden className={cn('inline-block size-1.5 shrink-0 rounded-full', dot[tone], className)} />
+}

package/template/src/core/components/user-avatar.tsx

@@ -0,0 +1,23 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { initials } from '@/core/lib/format'
+import { fullName, type User } from '@/core/users/types'
+import { cn } from '@/lib/utils'
+
+/** Square-ish avatar: uploaded image, else initials (or the email's first letter for invites). */
+export function UserAvatar({
+  user,
+  className,
+}: {
+  user: Pick<User, 'firstName' | 'lastName' | 'email' | 'avatarUrl'>
+  className?: string
+}) {
+  const name = fullName(user)
+  return (
+    <Avatar className={cn('size-8 rounded-lg', className)}>
+      {user.avatarUrl && <AvatarImage src={user.avatarUrl} alt="" className="rounded-lg object-cover" />}
+      <AvatarFallback className="rounded-lg bg-fill-2 text-xs font-medium">
+        {name ? initials(name) : user.email[0]?.toUpperCase()}
+      </AvatarFallback>
+    </Avatar>
+  )
+}

package/template/src/core/config/runtime.ts

@@ -0,0 +1,16 @@
+import { appConfig } from '@/app.config'
+import type { AppConfig, FeatureId } from './types'
+
+// Typed as AppConfig so a project's app.config.ts may omit newer optional keys.
+const config: AppConfig = appConfig
+
+/** Optional built-in areas are on unless app.config.ts switches them off. */
+export const isFeatureOn = (feature: FeatureId) => config.features?.[feature] ?? true
+
+export const isDemo = config.demo ?? false
+
+export const authMode = config.auth?.mode ?? 'mock'
+export const csrfUrl = config.auth?.csrfUrl
+
+/** `/` shows the landing page, or goes straight to the panel. */
+export const showLanding = config.landing ?? true

package/template/src/core/config/types.ts

@@ -0,0 +1,37 @@
+import type { I18nKey } from '@/core/i18n/keys'
+import type { BrandSetting } from '@/core/theme/brand'
+import type { ModuleId } from '@/modules/registry'
+
+export type Workspace = { id: string; name: string; plan?: I18nKey }
+
+export type NavGroupConfig = { id: string; label: I18nKey }
+
+/** Built-in areas a project can switch off; see core/config/runtime.ts. */
+export type FeatureId =
+  | 'notifications'
+  | 'users'
+  | 'roles'
+  | 'securityPolicies'
+  | 'modules'
+  | 'integrations'
+  | 'auditLog'
+  | 'dangerZone'
+
+/** mock: demo data; bearer: token in the Authorization header; cookie: session cookie + XSRF (Laravel Sanctum). */
+export type AuthMode = 'mock' | 'bearer' | 'cookie'
+
+export type AppConfig = {
+  name: string
+  brand: BrandSetting
+  workspaces: Workspace[]
+  navGroups: NavGroupConfig[]
+  modules: Partial<Record<ModuleId, boolean>>
+  currency: string
+  apiBaseUrl: string
+  /** The public demo: sample data, any password, no setup wizard. Real installs leave this off. */
+  demo?: boolean
+  /** Show the marketing landing page at `/`; when false, `/` opens the panel. Default true. */
+  landing?: boolean
+  features?: Partial<Record<FeatureId, boolean>>
+  auth?: { mode: AuthMode; csrfUrl?: string }
+}

package/template/src/core/i18n/i18n.ts

@@ -0,0 +1,69 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+import { customPermissions, customRoles, type CustomRole, type LocalizedText } from '@/app.roles'
+import { storage } from '@/core/lib/storage'
+import { namespaces, resources } from '@/locales'
+import { languages, type Language } from './types'
+
+/** localStorage key (`fp:lang`). */
+const STORAGE_KEY = 'lang'
+
+const isLanguage = (value: unknown): value is Language => languages.includes(value as Language)
+
+/** Saved choice first; on the first visit Turkish browsers get TR, everyone else EN. */
+function detectLanguage(): Language {
+  const saved = storage.get<string>(STORAGE_KEY)
+  if (isLanguage(saved)) return saved
+  const browser = typeof navigator === 'undefined' ? [] : (navigator.languages ?? [navigator.language])
+  return browser.some((l) => l?.toLowerCase().startsWith('tr')) ? 'tr' : 'en'
+}
+
+void i18n.use(initReactI18next).init({
+  resources,
+  lng: detectLanguage(),
+  fallbackLng: 'en',
+  supportedLngs: languages,
+  ns: namespaces,
+  defaultNS: 'common',
+  interpolation: { escapeValue: false }, // React already escapes.
+  returnNull: false,
+})
+
+// Labels of project-defined roles and permissions live in src/app.roles.ts.
+for (const lng of languages) {
+  const extraRoles = Object.entries(customRoles as Record<string, CustomRole>)
+  const extraPermissions = customPermissions as readonly { id: string; label: LocalizedText }[]
+  const pick = (list: [string, LocalizedText][]) => Object.fromEntries(list.map(([id, text]) => [id, text[lng]]))
+  i18n.addResourceBundle(lng, 'common', { roles: pick(extraRoles.map(([id, r]) => [id, r.label])) }, true, true)
+  i18n.addResourceBundle(
+    lng,
+    'company',
+    {
+      roles: {
+        descriptions: pick(extraRoles.map(([id, r]) => [id, r.description])),
+        // Same id as customResourceId() in core/auth/permissions.ts.
+        resources: pick(extraPermissions.map((p) => [`custom_${p.id.replaceAll('.', '_')}`, p.label])),
+      },
+    },
+    true,
+    true,
+  )
+}
+
+function syncDocument(lng: string) {
+  document.documentElement.lang = lng
+}
+syncDocument(i18n.language)
+i18n.on('languageChanged', syncDocument)
+
+export function setLanguage(lng: Language) {
+  storage.set(STORAGE_KEY, lng)
+  void i18n.changeLanguage(lng)
+}
+
+export function currentLanguage(): Language {
+  return isLanguage(i18n.resolvedLanguage) ? i18n.resolvedLanguage : 'en'
+}
+
+export { i18n }

package/template/src/core/i18n/i18next.d.ts

@@ -0,0 +1,12 @@
+import 'i18next'
+
+import type { Resources } from '@/locales'
+
+// Typed keys: t('…') only accepts keys that exist in the English resources.
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: 'common'
+    resources: Resources
+    returnNull: false
+  }
+}

package/template/src/core/i18n/keys.ts

@@ -0,0 +1,37 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { ParseKeys, TOptions } from 'i18next'
+
+import { namespaces, type Namespace } from '@/locales'
+
+/**
+ * A key from any namespace, written `ns:key` (or a bare `common` key).
+ * Use it in config-like data that is translated later: nav labels, route
+ * crumbs, quick actions, validation messages.
+ */
+export type I18nKey = ParseKeys<Namespace[]>
+
+type AnyT = (key: I18nKey, options?: TOptions) => string
+
+/** `t` for I18nKey values. In screens prefer useTranslation(['<ns>', 'common']). */
+export function useAnyT(): AnyT {
+  const { t } = useTranslation(namespaces)
+  return useCallback<AnyT>((key, options) => (t as unknown as AnyT)(key, options), [t])
+}
+
+/**
+ * Validation message for Zod schemas. Schemas are created once at module
+ * level, so they store a key (plus values) that FormFieldError translates
+ * at render time, and errors switch language instantly.
+ *
+ *   z.string().min(2, vmsg('validation.minChars', { min: 2 }))
+ */
+export function vmsg(key: I18nKey, values?: Record<string, string | number>) {
+  return values ? `${key}|${JSON.stringify(values)}` : key
+}
+
+export function translateMessage(t: AnyT, message: string) {
+  const [key, json] = message.split(/\|(.*)/s)
+  const values = json ? (JSON.parse(json) as Record<string, unknown>) : undefined
+  return t(key as I18nKey, { ...values, defaultValue: message })
+}

package/template/src/core/i18n/language-switcher.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next'
+import { Languages } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { currentLanguage, setLanguage } from './i18n'
+import { languageNames, languages, type Language } from './types'
+
+/** Ghost button + menu; sits next to ThemeToggle in headers. */
+export function LanguageSwitcher() {
+  const { t } = useTranslation()
+  const active = currentLanguage()
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="sm" aria-label={t('language.change')} className="gap-1 px-2 text-muted-foreground">
+            <Languages />
+            <span className="tabular-nums text-[11px] uppercase">{active}</span>
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end" className="w-40">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{t('language.label')}</DropdownMenuLabel>
+          <DropdownMenuRadioGroup value={active} onValueChange={(v) => setLanguage(v as Language)}>
+            {languages.map((lng) => (
+              <DropdownMenuRadioItem key={lng} value={lng} lang={lng}>
+                {languageNames[lng]}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/template/src/core/i18n/types.ts

@@ -0,0 +1,17 @@
+/**
+ * Shape of a translation file derived from the English source. Turkish (and
+ * any future language) files are typed with this, so a missing or extra key
+ * is a compile error:
+ *
+ *   const tr: Messages<typeof en> = { … }
+ */
+export type Messages<T> = { [K in keyof T]: T[K] extends string ? string : Messages<T[K]> }
+
+export const languages = ['en', 'tr'] as const
+export type Language = (typeof languages)[number]
+
+/** BCP 47 locale used by Intl for each language. */
+export const intlLocales: Record<Language, string> = { en: 'en-US', tr: 'tr-TR' }
+
+/** Native names: always shown in their own language. */
+export const languageNames: Record<Language, string> = { en: 'English', tr: 'Türkçe' }

package/template/src/core/i18n/use-format.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { appConfig } from '@/app.config'
+import { useCompanySettings } from '@/core/company/hooks'
+import { createFormatters } from '@/core/lib/format'
+import { usePreferences } from '@/core/preferences/preferences-store'
+import { intlLocales, type Language } from './types'
+
+/**
+ * Formatters for the active language, the user's time zone and date format,
+ * and the company currency. Re-renders the caller when any of them change.
+ * Use in components (and pass to memoized table columns as a dependency).
+ */
+export function useFormat() {
+  const { i18n } = useTranslation()
+  const { timeZone, dateFormat } = usePreferences()
+  const lng = (i18n.resolvedLanguage ?? 'en') as Language
+  const currency = useCompanySettings().data?.general.currency ?? appConfig.currency
+
+  return useMemo(
+    () =>
+      createFormatters({
+        locale: intlLocales[lng] ?? intlLocales.en,
+        currency,
+        timeZone: timeZone === 'auto' ? undefined : timeZone,
+        dateFormat,
+      }),
+    [lng, currency, timeZone, dateFormat],
+  )
+}

package/template/src/core/layout/app-shell.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { Outlet } from 'react-router'
+
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+import { RequireAuth } from '@/core/auth/require-auth'
+import { RequirePermissions } from '@/core/auth/require-permission'
+import { storage } from '@/core/lib/storage'
+import { preferencesStore } from '@/core/preferences/preferences-store'
+import { AppSidebar } from './app-sidebar'
+import { CommandMenuProvider } from './command-menu'
+import { TopBar } from './top-bar'
+
+const SIDEBAR_KEY = 'sidebar-open'
+
+/**
+ * Warm canvas with the sidebar sitting on it and the page in a floating,
+ * rounded panel inset from the canvas edges. The panel scrolls internally.
+ */
+export function AppShell() {
+  // Settings → Preferences → Sidebar: remember the last state, or always start expanded/collapsed.
+  const [sidebarOpen, setSidebarOpen] = useState(() => {
+    const start = preferencesStore.get().sidebarDefault
+    return start === 'remember' ? (storage.get<boolean>(SIDEBAR_KEY) ?? true) : start === 'expanded'
+  })
+
+  return (
+    <RequireAuth>
+      <CommandMenuProvider>
+        <SidebarProvider
+          open={sidebarOpen}
+          onOpenChange={(open) => {
+            storage.set(SIDEBAR_KEY, open)
+            setSidebarOpen(open)
+          }}
+          className="bg-canvas"
+        >
+          <AppSidebar />
+          <SidebarInset className="min-w-0 md:peer-data-[variant=inset]:h-[calc(100svh-var(--panel-inset)*2)] md:peer-data-[variant=inset]:overflow-hidden md:peer-data-[variant=inset]:rounded-(--radius-panel) md:peer-data-[variant=inset]:shadow-(--shadow-panel) md:peer-data-[variant=inset]:ring-1 md:peer-data-[variant=inset]:ring-border">
+            <TopBar />
+            <div id="main" className="flex-1 overflow-y-auto px-(--page-gutter-mobile) py-6 md:px-(--page-gutter) md:py-8">
+              <RequirePermissions>
+                <Outlet />
+              </RequirePermissions>
+            </div>
+          </SidebarInset>
+        </SidebarProvider>
+      </CommandMenuProvider>
+    </RequireAuth>
+  )
+}

package/template/src/core/layout/app-sidebar.tsx

@@ -0,0 +1,285 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link, useLocation, useNavigate } from 'react-router'
+import { Check, ChevronsUpDown, LogOut, Plus, Search, UserRound } from 'lucide-react'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Kbd } from '@/components/ui/kbd'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { appConfig } from '@/app.config'
+import { useAppName } from '@/core/company/use-app-name'
+import type { Workspace } from '@/core/config/types'
+import { useAuth } from '@/core/auth/use-auth'
+import { useCompanySettings } from '@/core/company/hooks'
+import { useTheme } from '@/core/theme/theme-context'
+import { useAnyT } from '@/core/i18n/keys'
+import { storage } from '@/core/lib/storage'
+import { usePermissions } from '@/core/auth/can'
+import { getNavGroups, isNavItemActive } from '@/core/modules/navigation'
+import { fullName } from '@/core/users/types'
+import { UserAvatar } from '@/core/components/user-avatar'
+import type { NavItem } from '@/core/modules/types'
+import { cn } from '@/lib/utils'
+import { isMac, useCommandMenu } from './command-menu'
+
+/** Raised, bordered pill for the active item; brand-colored icon. */
+const navButtonClass = cn(
+  'h-8 text-[13px] text-muted-foreground hover:text-foreground',
+  'data-active:bg-raised data-active:text-foreground data-active:shadow-(--shadow-raised) data-active:ring-1 data-active:ring-border data-active:hover:bg-raised',
+  'data-active:[&>svg]:text-primary',
+)
+
+
+export function AppSidebar() {
+  const t = useAnyT()
+  const { can } = usePermissions()
+  const navGroups = getNavGroups(can)
+  return (
+    <Sidebar variant="inset" collapsible="icon">
+      <SidebarHeader className="gap-2 pb-0">
+        <WorkspaceSwitcher />
+        <SearchButton />
+      </SidebarHeader>
+
+      <SidebarContent className="pt-2">
+        {navGroups.map((group) => (
+          <SidebarGroup key={group.id} className="py-1.5">
+            <SidebarGroupLabel className="label-caps h-7 text-[10.5px]">{t(group.label)}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu className="gap-0.5">
+                {group.items.map((item) => (
+                  <NavMenuItem key={item.path} item={item} />
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+
+      <SidebarFooter>
+        <UserCard />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
+function NavMenuItem({ item }: { item: NavItem }) {
+  const { pathname } = useLocation()
+  const { setOpenMobile } = useSidebar()
+  const badge = item.useBadge?.()
+  const t = useAnyT()
+  const label = t(item.label)
+  const active = isNavItemActive(item, pathname)
+  const Icon = item.icon
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        isActive={active}
+        tooltip={label}
+        className={navButtonClass}
+        render={<Link to={item.path} aria-current={active ? 'page' : undefined} onClick={() => setOpenMobile(false)} />}
+      >
+        <Icon />
+        <span>{label}</span>
+      </SidebarMenuButton>
+      {badge ? (
+        <SidebarMenuBadge className="top-1.5! rounded-md bg-fill-2 tabular-nums text-[10.5px]">{badge}</SidebarMenuBadge>
+      ) : null}
+    </SidebarMenuItem>
+  )
+}
+
+function LogoTile({ name, logo, className }: { name: string; logo?: string; className?: string }) {
+  if (logo) {
+    return (
+      <div className={cn('flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg', className)}>
+        <img src={logo} alt="" className="max-h-full max-w-full object-contain" />
+      </div>
+    )
+  }
+  return (
+    <div
+      className={cn(
+        'flex size-8 shrink-0 items-center justify-center rounded-lg bg-foreground text-sm font-semibold text-background',
+        className,
+      )}
+    >
+      {name[0]?.toUpperCase()}
+    </div>
+  )
+}
+
+function WorkspaceSwitcher() {
+  const workspaces: Workspace[] = appConfig.workspaces
+  const appName = useAppName()
+  const [activeId, setActiveId] = useState(() => storage.get<string>('workspace') ?? workspaces[0]!.id)
+  const active = workspaces.find((w) => w.id === activeId) ?? workspaces[0]!
+  const t = useAnyT()
+  // The active workspace shows the company logo from Settings → Company → Branding.
+  const branding = useCompanySettings().data?.branding
+  const { resolvedTheme } = useTheme()
+  const logo = resolvedTheme === 'dark' ? (branding?.logoDark ?? branding?.logoLight) : (branding?.logoLight ?? branding?.logoDark)
+
+  const select = (id: string) => {
+    storage.set('workspace', id)
+    setActiveId(id)
+  }
+
+  // One workspace: just the company name, nothing to switch.
+  if (workspaces.length === 1) {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <div className="flex h-12 items-center gap-2 rounded-xl bg-raised p-2 shadow-(--shadow-raised) ring-1 ring-border group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:shadow-none group-data-[collapsible=icon]:ring-0">
+            <LogoTile name={appName} logo={logo} />
+            <span className="truncate text-sm font-semibold group-data-[collapsible=icon]:hidden">{appName}</span>
+          </div>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    )
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="h-12 rounded-xl bg-raised shadow-(--shadow-raised) ring-1 ring-border hover:bg-raised data-popup-open:bg-raised group-data-[collapsible=icon]:ring-0 group-data-[collapsible=icon]:shadow-none"
+                aria-label={t('shell.switchWorkspace')}
+              />
+            }
+          >
+            <LogoTile name={active.name} logo={logo} />
+            <div className="grid min-w-0 flex-1 text-left leading-tight">
+              <span className="truncate text-sm font-semibold">{active.name}</span>
+              {active.plan && <span className="truncate text-2xs text-muted-foreground">{t(active.plan)}</span>}
+            </div>
+            <ChevronsUpDown className="ml-auto size-4 text-muted-foreground" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-(--anchor-width) min-w-60">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="label-caps">{t('shell.workspaces')}</DropdownMenuLabel>
+              {workspaces.map((w) => (
+                <DropdownMenuItem key={w.id} onClick={() => select(w.id)}>
+                  <LogoTile name={w.name} className="size-6 rounded-md text-xs" />
+                  <span className="flex-1 truncate">{w.name}</span>
+                  {w.id === active.id && <Check className="text-primary" />}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem disabled>
+              <Plus />
+              {t('shell.addWorkspace')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+
+function SearchButton() {
+  const { open } = useCommandMenu()
+  const { t } = useTranslation()
+  const shortcut = isMac ? '⌘K' : 'Ctrl K'
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          onClick={open}
+          tooltip={t('shell.search')}
+          aria-label={t('shell.searchShortcut', { shortcut })}
+          aria-keyshortcuts={isMac ? 'Meta+K' : 'Control+K'}
+          className="h-8 rounded-lg bg-fill-1 text-muted-foreground ring-1 ring-border/60 hover:bg-fill-2 group-data-[collapsible=icon]:bg-transparent group-data-[collapsible=icon]:ring-0"
+        >
+          <Search />
+          <span>{t('shell.search')}</span>
+          <Kbd className="ml-auto tabular-nums text-[10.5px] group-data-[collapsible=icon]:hidden">{shortcut}</Kbd>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+
+function UserCard() {
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  if (!user) return null
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="h-12 rounded-xl bg-raised shadow-(--shadow-raised) ring-1 ring-border hover:bg-raised data-popup-open:bg-raised group-data-[collapsible=icon]:ring-0 group-data-[collapsible=icon]:shadow-none"
+                aria-label={t('shell.accountMenu')}
+              />
+            }
+          >
+            <UserAvatar user={user} className="size-8" />
+            <div className="grid min-w-0 flex-1 text-left leading-tight">
+              <span className="truncate text-sm font-medium">{fullName(user)}</span>
+              <span className="truncate text-2xs text-muted-foreground">{t(`roles.${user.role as 'owner'}`)}</span>
+            </div>
+            <ChevronsUpDown className="ml-auto size-4 text-muted-foreground" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="top" align="start" className="w-(--anchor-width) min-w-60">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="flex flex-col">
+                <span className="text-sm font-medium text-foreground">{fullName(user)}</span>
+                <span className="text-xs font-normal text-muted-foreground">{user.email}</span>
+              </DropdownMenuLabel>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => navigate('/app/settings/profile')}>
+              <UserRound />
+              {t('shell.profile')}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={async () => {
+                await logout()
+                navigate('/login')
+              }}
+            >
+              <LogOut />
+              {t('shell.signOut')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}