Merge branch 'main' of https://github.com/objectstack-ai/framework

Author: hotlong

apps/account/package.json

@@ -17,6 +17,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@object-ui/i18n": "^3.3.2",
     "@objectstack/client": "workspace:*",
     "@objectstack/client-react": "workspace:*",
     "@objectstack/spec": "workspace:*",

apps/account/src/components/account-sidebar.tsx

@@ -36,6 +36,7 @@ import {
   User,
   Users,
 } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
 import {
   Sidebar,
   SidebarContent,
@@ -64,13 +65,14 @@ interface NavItem {
 }
 
 const ACCOUNT_ITEMS: NavItem[] = [
-  { to: '/account/profile', label: 'Profile', icon: User },
-  { to: '/account/security', label: 'Security', icon: Shield },
-  { to: '/account/sessions', label: 'Sessions', icon: Monitor },
-  { to: '/account/two-factor', label: 'Two-Factor', icon: ShieldCheck },
+  { to: '/account/profile', label: 'profile', icon: User },
+  { to: '/account/security', label: 'security', icon: Shield },
+  { to: '/account/sessions', label: 'sessions', icon: Monitor },
+  { to: '/account/two-factor', label: 'twoFactor', icon: ShieldCheck },
 ];
 
 export function AccountSidebar() {
+  const { t } = useObjectTranslation();
   const { pathname } = useLocation();
   const { organizations } = useOrganizations();
 
@@ -87,18 +89,18 @@ export function AccountSidebar() {
     <Sidebar collapsible="icon" className="h-full">
       <SidebarContent>
         <SidebarGroup>
-          <SidebarGroupLabel>Account</SidebarGroupLabel>
+          <SidebarGroupLabel>{t('sidebar.groups.account')}</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               {ACCOUNT_ITEMS.map((item) => {
                 const Icon = item.icon;
                 const isActive = normalised === item.to || normalised.startsWith(`${item.to}/`);
                 return (
                   <SidebarMenuItem key={item.to}>
-                    <SidebarMenuButton asChild isActive={isActive} tooltip={item.label}>
+                    <SidebarMenuButton asChild isActive={isActive} tooltip={t(`sidebar.items.${item.label}`)}>
                       <Link to={item.to}>
                         <Icon className="size-4" />
-                        <span>{item.label}</span>
+                        <span>{t(`sidebar.items.${item.label}`)}</span>
                       </Link>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
@@ -111,18 +113,18 @@ export function AccountSidebar() {
         <SidebarSeparator />
 
         <SidebarGroup>
-          <SidebarGroupLabel>Organization</SidebarGroupLabel>
+          <SidebarGroupLabel>{t('sidebar.groups.organization')}</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               <SidebarMenuItem>
                 <SidebarMenuButton
                   asChild
                   isActive={pathname === '/organizations'}
-                  tooltip="Overview"
+                  tooltip={t('sidebar.items.overview')}
                 >
                   <Link to="/organizations">
                     <Building2 className="size-4" />
-                    <span>Overview</span>
+                    <span>{t('sidebar.items.overview')}</span>
                   </Link>
                 </SidebarMenuButton>
               </SidebarMenuItem>
@@ -132,23 +134,23 @@ export function AccountSidebar() {
                     <SidebarMenuButton
                       asChild
                       isActive={pathname === `/organizations/${activeOrgId}/general`}
-                      tooltip="General"
+                      tooltip={t('sidebar.items.general')}
                     >
                       <Link to="/organizations/$orgId/general" params={{ orgId: activeOrgId }}>
                         <Settings className="size-4" />
-                        <span>General</span>
+                        <span>{t('sidebar.items.general')}</span>
                       </Link>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
                   <SidebarMenuItem>
                     <SidebarMenuButton
                       asChild
                       isActive={pathname === `/organizations/${activeOrgId}/members`}
-                      tooltip="Members"
+                      tooltip={t('sidebar.items.members')}
                     >
                       <Link to="/organizations/$orgId/members" params={{ orgId: activeOrgId }}>
                         <Users className="size-4" />
-                        <span>Members</span>
+                        <span>{t('sidebar.items.members')}</span>
                       </Link>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
@@ -161,18 +163,18 @@ export function AccountSidebar() {
         <SidebarSeparator />
 
         <SidebarGroup>
-          <SidebarGroupLabel>Developer</SidebarGroupLabel>
+          <SidebarGroupLabel>{t('sidebar.groups.developer')}</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               <SidebarMenuItem>
                 <SidebarMenuButton
                   asChild
                   isActive={pathname.startsWith('/account/oauth-applications')}
-                  tooltip="OAuth Apps"
+                  tooltip={t('sidebar.items.oauthApps')}
                 >
                   <Link to="/account/oauth-applications">
                     <KeyRound className="size-4" />
-                    <span>OAuth Apps</span>
+                    <span>{t('sidebar.items.oauthApps')}</span>
                   </Link>
                 </SidebarMenuButton>
               </SidebarMenuItem>
@@ -192,13 +194,15 @@ export function AccountSidebar() {
 }
 
 function CollapseButton() {
+  const { t } = useObjectTranslation();
   const { state, toggleSidebar } = useSidebar();
   const collapsed = state === 'collapsed';
+  const label = collapsed ? t('sidebar.expand') : t('sidebar.collapse');
   return (
     <SidebarMenuButton
       onClick={toggleSidebar}
-      tooltip={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      tooltip={label}
+      aria-label={label}
     >
       <PanelLeft className="size-4" />
     </SidebarMenuButton>

apps/account/src/components/locale-toggle.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * LocaleToggle — language switcher button in the top bar.
+ *
+ * Mirrors the ThemeToggle pattern. Persists the selected language to
+ * localStorage under `account.lang` so the choice survives reloads.
+ */
+
+import { Languages } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { SUPPORTED_LANGUAGES, type SupportedLanguage } from '@/i18n';
+
+const LABELS: Record<SupportedLanguage, string> = {
+  en: 'English',
+  'zh-CN': '中文',
+};
+
+export function LocaleToggle() {
+  const { t, language, changeLanguage } = useObjectTranslation();
+
+  async function handleSelect(lang: SupportedLanguage) {
+    await changeLanguage(lang);
+    try {
+      localStorage.setItem('account.lang', lang);
+    } catch {
+      /* ignore storage errors */
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          aria-label={t('common.language')}
+        >
+          <Languages className="h-4 w-4" />
+          <span className="sr-only">{t('common.language')}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {SUPPORTED_LANGUAGES.map((lang) => (
+          <DropdownMenuItem
+            key={lang}
+            onSelect={() => void handleSelect(lang)}
+            className={lang === language ? 'font-medium' : undefined}
+          >
+            {LABELS[lang]}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/account/src/components/top-bar.tsx

@@ -5,12 +5,13 @@
  * route. Mirrors the Studio TopBar layout:
  *
  *   - Left:  brand → mobile sidebar toggle → breadcrumb (inferred from URL)
- *   - Right: theme toggle + UserMenu (avatar dropdown w/ sign-out)
+ *   - Right: locale toggle + theme toggle + UserMenu (avatar dropdown w/ sign-out)
  */
 
 import { Link, useLocation, useParams } from '@tanstack/react-router';
 import { useMemo } from 'react';
 import { UserCircle2 } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -20,16 +21,17 @@ import {
 } from '@/components/ui/breadcrumb';
 import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
+import { LocaleToggle } from '@/components/locale-toggle';
 import { ThemeToggle } from '@/components/theme-toggle';
 import { UserMenu } from '@/components/user-menu';
 import { OrganizationSwitcher } from '@/components/organization-switcher';
 
-function AccountBrand() {
+function AccountBrand({ label }: { label: string }) {
   return (
     <Link
       to="/account"
       className="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90"
-      aria-label="Account home"
+      aria-label={label}
     >
       <UserCircle2 className="h-4 w-4" />
     </Link>
@@ -41,33 +43,35 @@ function SlashDivider() {
 }
 
 export function TopBar() {
+  const { t } = useObjectTranslation();
   const location = useLocation();
   const params = useParams({ strict: false }) as { orgId?: string; invitationId?: string };
 
   const breadcrumbs = useMemo<Array<{ label: string }>>(() => {
     const p = location.pathname;
+    const tb = (k: string) => t(`topBar.breadcrumb.${k}`);
     if (p.startsWith('/account')) {
-      const items: Array<{ label: string }> = [{ label: 'Account' }];
-      if (p === '/account/profile') items.push({ label: 'Profile' });
-      else if (p === '/account/security') items.push({ label: 'Security' });
-      else if (p === '/account/sessions') items.push({ label: 'Sessions' });
-      else if (p === '/account/two-factor') items.push({ label: 'Two-Factor' });
+      const items: Array<{ label: string }> = [{ label: tb('account') }];
+      if (p === '/account/profile') items.push({ label: tb('profile') });
+      else if (p === '/account/security') items.push({ label: tb('security') });
+      else if (p === '/account/sessions') items.push({ label: tb('sessions') });
+      else if (p === '/account/two-factor') items.push({ label: tb('twoFactor') });
       return items;
     }
-    if (p === '/organizations/new') return [{ label: 'Organizations' }, { label: 'New' }];
+    if (p === '/organizations/new') return [{ label: tb('organizations') }, { label: tb('new') }];
     if (params.orgId) {
       const tail = p.endsWith('/general')
-        ? 'General'
+        ? tb('general')
         : p.endsWith('/members')
-          ? 'Members'
-          : 'Settings';
-      return [{ label: 'Organizations' }, { label: tail }];
+          ? tb('members')
+          : tb('settings');
+      return [{ label: tb('organizations') }, { label: tail }];
     }
-    if (p === '/organizations' || p.startsWith('/organizations/')) return [{ label: 'Organizations' }];
-    if (p.startsWith('/accept-invitation/')) return [{ label: 'Accept invitation' }];
-    if (p.startsWith('/auth/device')) return [{ label: 'Device authorization' }];
-    return [{ label: 'Account' }];
-  }, [location.pathname, params.orgId]);
+    if (p === '/organizations' || p.startsWith('/organizations/')) return [{ label: tb('organizations') }];
+    if (p.startsWith('/accept-invitation/')) return [{ label: tb('acceptInvitation') }];
+    if (p.startsWith('/auth/device')) return [{ label: tb('deviceAuthorization') }];
+    return [{ label: tb('account') }];
+  }, [location.pathname, params.orgId, t]);
 
   return (
     <header className="flex h-12 shrink-0 items-center justify-between gap-2 border-b px-2 sm:px-4">
@@ -76,9 +80,9 @@ export function TopBar() {
         <div className="sm:hidden">
           <SidebarTrigger className="h-9 w-9" />
         </div>
-        <AccountBrand />
+        <AccountBrand label={t('topBar.accountHome')} />
         <SlashDivider />
-        <span className="hidden text-sm font-medium sm:inline">ObjectStack Account</span>
+        <span className="hidden text-sm font-medium sm:inline">{t('topBar.brand')}</span>
         <div className="hidden items-center gap-1 sm:flex">
           <Separator orientation="vertical" className="mx-2 h-4" />
           <OrganizationSwitcher />
@@ -106,8 +110,11 @@ export function TopBar() {
         </div>
       </div>
 
-      {/* Right: theme + user */}
+      {/* Right: locale + theme + user */}
       <div className="flex items-center gap-1 sm:gap-2">
+        <div className="hidden sm:block">
+          <LocaleToggle />
+        </div>
         <div className="hidden sm:block">
           <ThemeToggle />
         </div>

apps/account/src/components/user-menu.tsx

@@ -7,6 +7,7 @@
 
 import { useNavigate } from '@tanstack/react-router';
 import { LogOut, User as UserIcon, Building2 } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,6 +28,7 @@ function initials(name?: string | null, email?: string | null): string {
 }
 
 export function UserMenu() {
+  const { t } = useObjectTranslation();
   const navigate = useNavigate();
   const { user, loading, logout } = useSession();
 
@@ -42,7 +44,7 @@ export function UserMenu() {
         className="h-8"
         onClick={() => navigate({ to: '/login' })}
       >
-        Sign in
+        {t('userMenu.signIn')}
       </Button>
     );
   }
@@ -60,7 +62,7 @@ export function UserMenu() {
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
           <Avatar className="h-7 w-7">
-            {user.image ? <AvatarImage src={user.image} alt={user.name ?? user.email ?? 'User'} /> : null}
+            {user.image ? <AvatarImage src={user.image} alt={user.name ?? user.email ?? t('userMenu.user')} /> : null}
             <AvatarFallback className="text-[11px]">
               {initials(user.name, user.email)}
             </AvatarFallback>
@@ -79,16 +81,16 @@ export function UserMenu() {
         <DropdownMenuSeparator />
         <DropdownMenuItem onSelect={() => navigate({ to: '/account' })}>
           <UserIcon className="mr-2 h-3.5 w-3.5" />
-          Account
+          {t('userMenu.account')}
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={() => navigate({ to: '/organizations' })}>
           <Building2 className="mr-2 h-3.5 w-3.5" />
-          Organizations
+          {t('userMenu.organizations')}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem onSelect={handleLogout}>
           <LogOut className="mr-2 h-3.5 w-3.5" />
-          Sign out
+          {t('userMenu.signOut')}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>