@byline/host-tanstack-start 2.5.1 → 2.6.0

package/src/admin-shell/admin-users/container.tsx

@@ -15,13 +15,14 @@ import { useRouter } from '@tanstack/react-router'
 import { UserRoles } from '@byline/admin/admin-users/components/roles'
 import { SetPassword } from '@byline/admin/admin-users/components/set-password'
 import { UpdateUser } from '@byline/admin/admin-users/components/update'
+import { LocalDateTime } from '@byline/admin/react'
+import { useTranslation } from '@byline/i18n/react'
 import {
   Button,
   CloseIcon,
   Drawer,
   EditIcon,
   IconButton,
-  LocalDateTime,
   Modal,
   useToastManager,
 } from '@byline/ui/react'
@@ -61,45 +62,50 @@ interface PanelProps {
   onSuccess?: (user: AdminUserResponse) => void
 }
 
-const panels: Record<
-  ComponentKey,
-  { title: string; drawerWidth: 'medium' | 'large'; component: React.ComponentType<PanelProps> }
-> = {
+type PanelMeta = {
+  drawerWidth: 'medium' | 'large'
+  component: React.ComponentType<PanelProps>
+  titleKey: string
+}
+
+const panelMeta: Record<ComponentKey, PanelMeta> = {
   update: {
-    title: 'Account Details',
     drawerWidth: 'medium',
     component: UpdateUser,
+    titleKey: 'adminUsers.detail.panels.update',
   },
   set_password: {
-    title: 'Set Password',
     drawerWidth: 'medium',
     component: SetPassword,
+    titleKey: 'adminUsers.detail.panels.setPassword',
   },
   delete_user: {
-    title: 'Delete Admin User',
     drawerWidth: 'medium',
     component: DeleteUser,
+    titleKey: 'adminUsers.detail.panels.delete',
   },
   roles: {
-    title: 'User Roles',
     drawerWidth: 'medium',
     // See container header docstring — rendered inline, this is a stub.
     component: () => null,
+    titleKey: 'adminUsers.detail.panels.roles',
   },
   empty: {
-    title: '',
     drawerWidth: 'medium',
     component: () => null,
+    titleKey: '',
   },
 }
 
 function ContainerSection({
   title,
   onEdit,
+  editAriaLabel,
   children,
 }: {
   title: string
   onEdit?: () => void
+  editAriaLabel?: string
   children: React.ReactNode
 }) {
   return (
@@ -107,7 +113,7 @@ function ContainerSection({
       <div className={cx('byline-admin-user-section-head', styles.sectionHead)}>
         <h2>{title}</h2>
         {onEdit ? (
-          <IconButton variant="text" onClick={onEdit} aria-label={`Edit ${title}`}>
+          <IconButton variant="text" onClick={onEdit} aria-label={editAriaLabel ?? title}>
             <EditIcon width="20px" height="20px" />
           </IconButton>
         ) : null}
@@ -137,6 +143,7 @@ interface AccountContainerProps {
 export function AccountContainer({ user, allRoles, initialUserRoles }: AccountContainerProps) {
   const router = useRouter()
   const toastManager = useToastManager()
+  const { t } = useTranslation('byline-admin')
   const [currentUser, setCurrentUser] = useState<AdminUserResponse>(user)
   const [currentUserRoles, setCurrentUserRoles] = useState<AdminRoleResponse[]>(initialUserRoles)
   const [current, setCurrent] = useState<ComponentKey>('empty')
@@ -168,56 +175,66 @@ export function AccountContainer({ user, allRoles, initialUserRoles }: AccountCo
     setCurrentUserRoles(response.roles)
     void router.invalidate()
     toastManager.add({
-      title: 'Roles saved',
-      description: `${response.roles.length} role${response.roles.length === 1 ? '' : 's'} assigned to ${currentUser.email}.`,
+      title: t('adminUsers.detail.rolesSavedToast'),
+      description: t('adminUsers.detail.rolesAssignedDescription', {
+        count: response.roles.length,
+        email: currentUser.email,
+      }),
       data: { intent: 'success' },
     })
   }
 
-  const Panel = panels[current].component
+  const currentMeta = panelMeta[current]
+  const Panel = currentMeta.component
+  const currentTitle = currentMeta.titleKey ? t(currentMeta.titleKey) : ''
+  const editAriaFor = (section: string) => t('account.editAriaLabel', { section })
 
   return (
     <>
       <div className={cx('byline-admin-user-grid', styles.grid)}>
         <div className={cx('byline-admin-user-column', styles.column)}>
-          <ContainerSection title="Account Details" onEdit={openDrawer('update')}>
+          <ContainerSection
+            title={t('adminUsers.detail.sections.account')}
+            onEdit={openDrawer('update')}
+            editAriaLabel={editAriaFor(t('adminUsers.detail.sections.account'))}
+          >
             <p className={cx('byline-admin-user-line', styles.line)}>
-              <span className="muted">Email:</span> {currentUser.email}
+              <span className="muted">{t('account.profile.emailColon')}</span> {currentUser.email}
             </p>
             <p className={cx('byline-admin-user-line', styles.line)}>
-              <span className="muted">Given name:</span>{' '}
+              <span className="muted">{t('account.profile.givenName')}</span>{' '}
               {currentUser.given_name ?? (
                 <span className={cx('muted byline-admin-user-not-set', styles.notSet)}>
-                  Not set
+                  {t('common.notSet')}
                 </span>
               )}
             </p>
             <p className={cx('byline-admin-user-line', styles.line)}>
-              <span className="muted">Family name:</span>{' '}
+              <span className="muted">{t('account.profile.familyName')}</span>{' '}
               {currentUser.family_name ?? (
                 <span className={cx('muted byline-admin-user-not-set', styles.notSet)}>
-                  Not set
+                  {t('common.notSet')}
                 </span>
               )}
             </p>
             <p className={cx('byline-admin-user-line', styles.line)}>
-              <span className="muted">Username:</span>{' '}
+              <span className="muted">{t('account.profile.username')}</span>{' '}
               {currentUser.username ?? (
                 <span className={cx('muted byline-admin-user-not-set', styles.notSet)}>
-                  Not set
+                  {t('common.notSet')}
                 </span>
               )}
             </p>
             <p className={cx('byline-admin-user-line', styles.line)}>
-              <span className="muted">Super admin:</span>{' '}
-              {currentUser.is_super_admin ? 'Yes' : 'No'}
+              <span className="muted">{t('account.status.superAdmin')}</span>{' '}
+              {currentUser.is_super_admin ? t('common.boolean.yes') : t('common.boolean.no')}
             </p>
             <p className={cx('byline-admin-user-line', styles.line)}>
-              <span className="muted">Email verified:</span>{' '}
-              {currentUser.is_email_verified ? 'Yes' : 'No'}
+              <span className="muted">{t('account.status.emailVerified')}</span>{' '}
+              {currentUser.is_email_verified ? t('common.boolean.yes') : t('common.boolean.no')}
             </p>
             <p className={cx('byline-admin-user-line-spaced', styles.lineSpaced)}>
-              <span className="muted">Status:</span>{' '}
+              <span className="muted">{t('account.status.status')}</span>{' '}
               <span
                 className={cx({
                   'byline-admin-user-status-on': currentUser.is_enabled,
@@ -226,34 +243,40 @@ export function AccountContainer({ user, allRoles, initialUserRoles }: AccountCo
                   [styles.statusOff]: !currentUser.is_enabled,
                 })}
               >
-                {currentUser.is_enabled ? 'Enabled' : 'Disabled'}
+                {currentUser.is_enabled
+                  ? t('account.status.enabled')
+                  : t('account.status.disabled')}
               </span>
             </p>
             <Button size="sm" onClick={openDrawer('update')}>
-              Update Details
+              {t('adminUsers.detail.updateButton')}
             </Button>
             <div className={cx('muted byline-admin-user-meta', styles.meta)}>
               <p>
-                <span className="font-bold">Created:&nbsp;</span>
+                <span className="font-bold">{t('account.profile.created')}&nbsp;</span>
                 <LocalDateTime value={currentUser.created_at} />
               </p>
               <p>
-                <span className="font-bold">Updated:&nbsp;</span>
+                <span className="font-bold">{t('account.profile.updated')}&nbsp;</span>
                 <LocalDateTime value={currentUser.updated_at} />
               </p>
               <p className={cx('byline-admin-user-line', styles.line)}>
-                <span className="font-bold">Last login:&nbsp;</span>
-                <LocalDateTime value={currentUser.last_login} fallback="Never" />
+                <span className="font-bold">{t('account.profile.lastLogin')}&nbsp;</span>
+                <LocalDateTime value={currentUser.last_login} fallback={t('common.never')} />
               </p>
             </div>
           </ContainerSection>
         </div>
 
         <div className={cx('byline-admin-user-column', styles.column)}>
-          <ContainerSection title="Roles" onEdit={openDrawer('roles')}>
+          <ContainerSection
+            title={t('adminUsers.detail.sections.roles')}
+            onEdit={openDrawer('roles')}
+            editAriaLabel={editAriaFor(t('adminUsers.detail.sections.roles'))}
+          >
             {currentUserRoles.length === 0 ? (
               <p className={cx('muted byline-admin-user-role-empty', styles.roleEmpty)}>
-                No roles assigned.
+                {t('adminUsers.detail.rolesEmpty')}
               </p>
             ) : (
               <div className={cx('byline-admin-user-role-list', styles.roleList)}>
@@ -263,25 +286,29 @@ export function AccountContainer({ user, allRoles, initialUserRoles }: AccountCo
               </div>
             )}
             <Button size="sm" onClick={openDrawer('roles')}>
-              Edit Roles
+              {t('adminUsers.detail.editRolesButton')}
             </Button>
           </ContainerSection>
 
-          <ContainerSection title="Password" onEdit={openDrawer('set_password')}>
+          <ContainerSection
+            title={t('adminUsers.detail.sections.password')}
+            onEdit={openDrawer('set_password')}
+            editAriaLabel={editAriaFor(t('adminUsers.detail.sections.password'))}
+          >
             <p className={cx('byline-admin-user-line-spaced', styles.lineSpaced)}>
-              Set a new password for this user.
+              {t('adminUsers.detail.password.intro')}
             </p>
             <Button size="sm" onClick={openDrawer('set_password')}>
-              Set Password
+              {t('adminUsers.detail.password.setButton')}
             </Button>
           </ContainerSection>
 
-          <ContainerSection title="Delete Admin User">
+          <ContainerSection title={t('adminUsers.detail.sections.delete')}>
             <p className={cx('byline-admin-user-line-spaced', styles.lineSpaced)}>
-              Permanently delete this admin user.
+              {t('adminUsers.detail.delete.intro')}
             </p>
             <Button size="sm" intent="danger" onClick={openModal('delete_user')}>
-              Delete Admin User
+              {t('adminUsers.detail.delete.button')}
             </Button>
           </ContainerSection>
         </div>
@@ -295,10 +322,10 @@ export function AccountContainer({ user, allRoles, initialUserRoles }: AccountCo
         isOpen={isDrawerOpen}
         onDismiss={closeDrawer}
         className={cx({
-          'byline-admin-user-drawer-large': panels[current].drawerWidth === 'large',
-          [styles.drawerLarge]: panels[current].drawerWidth === 'large',
-          'byline-admin-user-drawer': panels[current].drawerWidth !== 'large',
-          [styles.drawer]: panels[current].drawerWidth !== 'large',
+          'byline-admin-user-drawer-large': currentMeta.drawerWidth === 'large',
+          [styles.drawerLarge]: currentMeta.drawerWidth === 'large',
+          'byline-admin-user-drawer': currentMeta.drawerWidth !== 'large',
+          [styles.drawer]: currentMeta.drawerWidth !== 'large',
         })}
       >
         <Drawer.Container aria-hidden={!isDrawerOpen} className="p-2">
@@ -306,12 +333,12 @@ export function AccountContainer({ user, allRoles, initialUserRoles }: AccountCo
             <button type="button" tabIndex={0} className="sr-only">
               no action
             </button>
-            <IconButton aria-label="Close" size="sm" onClick={closeDrawer}>
+            <IconButton aria-label={t('common.actions.close')} size="sm" onClick={closeDrawer}>
               <CloseIcon width="14px" height="14px" svgClassName="white-icon stroke-white" />
             </IconButton>
           </Drawer.TopActions>
           <Drawer.Header>
-            <h2>{panels[current].title}</h2>
+            <h2>{currentTitle}</h2>
           </Drawer.Header>
           <Drawer.Content>
             <div className={cx('byline-admin-user-drawer-scroll', styles.drawerScroll)}>
@@ -334,8 +361,8 @@ export function AccountContainer({ user, allRoles, initialUserRoles }: AccountCo
       <Modal isOpen={isModalOpen} onDismiss={closeModal} closeOnOverlayClick={false}>
         <Modal.Container className={cx('byline-admin-user-modal', styles.modal)}>
           <Modal.Header className={cx('byline-admin-user-modal-head', styles.modalHead)}>
-            <h3 className="m-0">{panels[current].title}</h3>
-            <IconButton aria-label="Close" size="sm" onClick={closeModal}>
+            <h3 className="m-0">{currentTitle}</h3>
+            <IconButton aria-label={t('common.actions.close')} size="sm" onClick={closeModal}>
               <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
             </IconButton>
           </Modal.Header>

package/src/admin-shell/admin-users/delete.tsx

@@ -23,6 +23,7 @@
 import { useState } from 'react'
 import { useRouter } from '@tanstack/react-router'
 
+import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, LoaderEllipsis, Modal } from '@byline/ui/react'
 import cx from 'classnames'
 
@@ -46,6 +47,7 @@ function displayNameFor(user: AdminUserResponse): string {
 export function DeleteUser({ user, onClose }: DeleteUserProps) {
   const navigate = useNavigate()
   const router = useRouter()
+  const { t } = useTranslation('byline-admin')
   const [error, setError] = useState<string | null>(null)
   const [pending, setPending] = useState(false)
 
@@ -64,15 +66,13 @@ export function DeleteUser({ user, onClose }: DeleteUserProps) {
     } catch (err) {
       const code = getErrorCode(err)
       if (code === 'admin.users.selfDeleteForbidden') {
-        setError('You cannot delete your own admin account.')
+        setError(t('adminUsers.delete.errors.selfDelete'))
       } else if (code === 'admin.users.versionConflict') {
-        setError(
-          'This user has been modified elsewhere since you opened this dialog. Close and reload before trying again.'
-        )
+        setError(t('adminUsers.delete.errors.versionConflict'))
       } else if (code === 'admin.users.notFound') {
-        setError('This user has already been deleted.')
+        setError(t('adminUsers.delete.errors.notFound'))
       } else {
-        setError('Could not delete this admin user. Please try again.')
+        setError(t('adminUsers.delete.errors.fallback'))
       }
       setPending(false)
     }
@@ -87,14 +87,13 @@ export function DeleteUser({ user, onClose }: DeleteUserProps) {
           </Alert>
         ) : null}
         <p className={cx('byline-admin-user-delete-row', styles.row)}>
-          <span className="muted">User:</span> {displayNameFor(user)}
+          <span className="muted">{t('adminUsers.delete.userLabel')}</span> {displayNameFor(user)}
         </p>
         <p className={cx('byline-admin-user-delete-row', styles.row)}>
-          <span className="muted">Email:</span> {user.email}
+          <span className="muted">{t('adminUsers.delete.emailLabel')}</span> {user.email}
         </p>
         <p className={cx('byline-admin-user-delete-warning', styles.warning)}>
-          This will permanently delete the admin user. The action cannot be undone. Any active
-          sessions will be invalidated at the next refresh.
+          {t('adminUsers.delete.warning')}
         </p>
       </div>
       <div className={cx('byline-admin-user-delete-actions', styles.actions)}>
@@ -106,7 +105,7 @@ export function DeleteUser({ user, onClose }: DeleteUserProps) {
           disabled={pending}
           className={cx('byline-admin-user-delete-button', styles.button)}
         >
-          Cancel
+          {t('common.actions.cancel')}
         </Button>
         <Button
           size="sm"
@@ -115,7 +114,7 @@ export function DeleteUser({ user, onClose }: DeleteUserProps) {
           disabled={pending}
           className={cx('byline-admin-user-delete-button', styles.button)}
         >
-          {pending === true ? <LoaderEllipsis size={42} /> : 'Delete User'}
+          {pending === true ? <LoaderEllipsis size={42} /> : t('adminUsers.delete.confirmButton')}
         </Button>
       </div>
     </Modal.Content>

package/src/admin-shell/admin-users/list.tsx

@@ -8,16 +8,17 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useRouter, useRouterState } from '@tanstack/react-router'
 
 import { CreateAdminUser } from '@byline/admin/admin-users/components/create'
+import { LocalDateTime } from '@byline/admin/react'
+import { useTranslation } from '@byline/i18n/react'
 import {
   CloseIcon,
   Container,
   Drawer,
   IconButton,
-  LocalDateTime,
   PlusIcon,
   Search,
   Section,
@@ -40,10 +41,18 @@ import type {
   AdminUserResponse,
 } from '../../server-fns/admin-users/index.js'
 
-const tableColumnDefs: Omit<TableHeadingCellSortableProps, 'lng'>[] = [
+// Structural column-def template: position / sort-key / alignment / class
+// are fixed at module scope; the `label` field is filled in per-render
+// inside the component so it can flow through `t(...)`. Same pattern the
+// account container's `panels` map uses.
+type ColumnTemplate = Omit<TableHeadingCellSortableProps, 'lng' | 'label'> & {
+  labelKey: string
+}
+
+const columnTemplates: ColumnTemplate[] = [
   {
     fieldName: 'given_name',
-    label: 'Given Name',
+    labelKey: 'adminUsers.list.columns.givenName',
     path: '/admin/users',
     sortable: true,
     scope: 'col',
@@ -52,7 +61,7 @@ const tableColumnDefs: Omit<TableHeadingCellSortableProps, 'lng'>[] = [
   },
   {
     fieldName: 'family_name',
-    label: 'Family Name',
+    labelKey: 'adminUsers.list.columns.familyName',
     path: '/admin/users',
     sortable: true,
     scope: 'col',
@@ -61,7 +70,7 @@ const tableColumnDefs: Omit<TableHeadingCellSortableProps, 'lng'>[] = [
   },
   {
     fieldName: 'email',
-    label: 'Email',
+    labelKey: 'adminUsers.list.columns.email',
     path: '/admin/users',
     sortable: true,
     scope: 'col',
@@ -70,7 +79,7 @@ const tableColumnDefs: Omit<TableHeadingCellSortableProps, 'lng'>[] = [
   },
   {
     fieldName: 'updated_at',
-    label: 'Updated',
+    labelKey: 'adminUsers.list.columns.updated',
     path: '/admin/users',
     sortable: true,
     scope: 'col',
@@ -79,7 +88,7 @@ const tableColumnDefs: Omit<TableHeadingCellSortableProps, 'lng'>[] = [
   },
   {
     fieldName: 'created_at',
-    label: 'Created',
+    labelKey: 'adminUsers.list.columns.created',
     path: '/admin/users',
     sortable: true,
     scope: 'col',
@@ -123,8 +132,14 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
   const router = useRouter()
   const toastManager = useToastManager()
   const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const { t } = useTranslation('byline-admin')
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false)
 
+  const tableColumnDefs = useMemo(
+    () => columnTemplates.map(({ labelKey, ...rest }) => ({ ...rest, label: t(labelKey) })),
+    [t]
+  )
+
   const openCreateDrawer = () => setIsCreateDrawerOpen(true)
   const closeCreateDrawer = () => setIsCreateDrawerOpen(false)
 
@@ -134,7 +149,7 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
     // current page of the table.
     void router.invalidate()
     toastManager.add({
-      title: 'Admin user created',
+      title: t('adminUsers.list.createdToastTitle'),
       description: created.email,
       data: { intent: 'success' },
     })
@@ -173,9 +188,11 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
     <Section>
       <Container>
         <div className={cx('byline-admin-users-list-head', styles.head)}>
-          <h1 className={cx('byline-admin-users-list-title', styles.title)}>Admin Users</h1>
+          <h1 className={cx('byline-admin-users-list-title', styles.title)}>
+            {t('adminUsers.list.title')}
+          </h1>
           <Stats total={data.meta.total} />
-          <IconButton aria-label="Create New Admin User" onClick={openCreateDrawer}>
+          <IconButton aria-label={t('adminUsers.list.createAriaLabel')} onClick={openCreateDrawer}>
             <PlusIcon height="18px" width="18px" svgClassName="stroke-white" />
           </IconButton>
         </div>
@@ -184,7 +201,7 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
             onSearch={handleOnSearch}
             onClear={handleOnClear}
             inputSize="sm"
-            placeholder="Search by name or email"
+            placeholder={t('adminUsers.list.searchPlaceholder')}
             className={cx('byline-admin-users-list-search', styles.search)}
           />
           <RouterPager
@@ -193,7 +210,7 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
             showFirstButton
             showLastButton
             componentName="pagerTop"
-            aria-label="Top Pager"
+            aria-label={t('adminUsers.list.pagerTopAriaLabel')}
           />
         </div>
         <Table.Container className={cx('byline-admin-users-list-table-wrap', styles.tableWrap)}>
@@ -220,7 +237,7 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
                         <span
                           className={cx('muted byline-admin-users-list-not-set', styles.notSet)}
                         >
-                          Not set
+                          {t('common.notSet')}
                         </span>
                       )}
                     </Link>
@@ -228,7 +245,7 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
                   <Table.Cell>
                     {user.family_name ?? (
                       <span className={cx('muted byline-admin-users-list-not-set', styles.notSet)}>
-                        Not set
+                        {t('common.notSet')}
                       </span>
                     )}
                   </Table.Cell>
@@ -277,7 +294,7 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
             showFirstButton
             showLastButton
             componentName="pagerBottom"
-            aria-label="Bottom Pager"
+            aria-label={t('adminUsers.list.pagerBottomAriaLabel')}
           />
         </div>
       </Container>
@@ -296,12 +313,16 @@ export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
             <button type="button" tabIndex={0} className="sr-only">
               no action
             </button>
-            <IconButton aria-label="Close" size="sm" onClick={closeCreateDrawer}>
+            <IconButton
+              aria-label={t('common.actions.close')}
+              size="sm"
+              onClick={closeCreateDrawer}
+            >
               <CloseIcon width="14px" height="14px" svgClassName="white-icon stroke-white" />
             </IconButton>
           </Drawer.TopActions>
           <Drawer.Header>
-            <h2>New Admin User</h2>
+            <h2>{t('adminUsers.list.newDrawerTitle')}</h2>
           </Drawer.Header>
           <Drawer.Content>
             <div className={cx('byline-admin-users-list-drawer-scroll', styles.drawerScroll)}>

package/src/admin-shell/chrome/admin-app-bar.tsx

@@ -10,6 +10,7 @@
 
 import { useState } from 'react'
 
+import { LanguageMenu, useTranslation } from '@byline/i18n/react'
 import { Button } from '@byline/ui/react'
 import cx from 'classnames'
 
@@ -32,6 +33,7 @@ function displayNameFor(user: CurrentAdminUser): string {
 
 export function AdminAppBar({ user }: AdminAppBarProps) {
   const { breadCrumbSettings } = useBreadcrumbs()
+  const { t } = useTranslation('byline-admin')
   const [signingOut, setSigningOut] = useState(false)
 
   async function handleSignOut() {
@@ -59,14 +61,15 @@ export function AdminAppBar({ user }: AdminAppBarProps) {
         />
       </div>
       <div className={cx('byline-admin-app-bar-right', styles.right)}>
+        <LanguageMenu />
         <span className={cx('byline-admin-app-bar-user', styles.user)}>
-          Signed in as{' '}
+          {t('chrome.appBar.signedInAs')}{' '}
           <span className={cx('byline-admin-app-bar-user-name', styles.userName)}>
             {displayNameFor(user)}
           </span>
         </span>
         <Button size="xs" intent="secondary" onClick={handleSignOut} disabled={signingOut}>
-          {signingOut ? 'Signing out…' : 'Sign out'}
+          {signingOut ? t('common.actions.signingOut') : t('common.actions.signOut')}
         </Button>
       </div>
     </header>

package/src/admin-shell/chrome/breadcrumbs/breadcrumbs.tsx

@@ -10,6 +10,7 @@
 
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
+import { useTranslation } from '@byline/i18n/react'
 import { Dropdown, EllipsisIcon } from '@byline/ui/react'
 import cx from 'classnames'
 
@@ -228,12 +229,13 @@ function ChevronIcon({ isLeaf = false }: { isLeaf?: boolean }): React.JSX.Elemen
 }
 
 function OverflowDropdown({ items }: { items: Breadcrumb[] }): React.JSX.Element {
+  const { t } = useTranslation('byline-admin')
   return (
     <li className={cx('byline-breadcrumbs-item', styles.item)}>
       <ChevronIcon />
       <Dropdown.Root>
         <Dropdown.Trigger
-          aria-label="Show hidden breadcrumbs"
+          aria-label={t('chrome.breadcrumbs.showHiddenAriaLabel')}
           className={cx('byline-breadcrumbs-overflow-trigger', styles.overflowTrigger)}
         >
           <EllipsisIcon className={cx('byline-breadcrumbs-overflow-icon', styles.overflowIcon)} />

package/src/admin-shell/chrome/dashboard.tsx

@@ -8,6 +8,7 @@
 
 import type { WorkflowStatus } from '@byline/core'
 import { getClientConfig, getWorkflowStatuses } from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
 import { Card, Container, Section } from '@byline/ui/react'
 import cx from 'classnames'
 
@@ -62,6 +63,7 @@ interface AdminDashboardProps {
 
 export function AdminDashboard({ statsMap }: AdminDashboardProps) {
   const config = getClientConfig()
+  const { t } = useTranslation('byline-admin')
 
   return (
     <Section>
@@ -86,10 +88,12 @@ export function AdminDashboard({ statsMap }: AdminDashboardProps) {
                           {collection.labels.plural}
                         </span>
                         <span className={cx('muted byline-dashboard-title-meta', styles.titleMeta)}>
-                          {total} total
+                          {t('dashboard.totalCount', { count: total })}
                         </span>
                       </Card.Title>
-                      <Card.Description className="muted">{`${collection.labels.plural} collection`}</Card.Description>
+                      <Card.Description className="muted">
+                        {t('dashboard.collectionDescription', { label: collection.labels.plural })}
+                      </Card.Description>
                     </div>
                   </Card.Header>
                 </Link>
@@ -114,7 +118,9 @@ export function AdminDashboard({ statsMap }: AdminDashboardProps) {
                       params={{ collection: collection.path }}
                       className={cx('byline-dashboard-empty-link', styles.emptyLink)}
                     >
-                      <p>{collection.labels.plural} collection</p>
+                      <p>
+                        {t('dashboard.collectionDescription', { label: collection.labels.plural })}
+                      </p>
                     </Link>
                   )}
                 </Card.Content>