@byline/host-tanstack-start 2.5.1 → 2.6.0

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

@@ -31,15 +31,9 @@ import { useRouter } from '@tanstack/react-router'
 
 import { RolePermissions } from '@byline/admin/admin-roles/components/permissions'
 import { UpdateRole } from '@byline/admin/admin-roles/components/update'
-import {
-  Button,
-  CloseIcon,
-  Drawer,
-  IconButton,
-  LocalDateTime,
-  Modal,
-  useToastManager,
-} from '@byline/ui/react'
+import { LocalDateTime } from '@byline/admin/react'
+import { useTranslation } from '@byline/i18n/react'
+import { Button, CloseIcon, Drawer, IconButton, Modal, useToastManager } from '@byline/ui/react'
 import cx from 'classnames'
 
 import styles from './container.module.css'
@@ -58,12 +52,17 @@ interface PanelProps {
   onSuccess?: (role: AdminRoleResponse) => void
 }
 
-const panels: Record<ComponentKey, { title: string; component: React.ComponentType<PanelProps> }> =
-  {
-    update: { title: 'Role Details', component: UpdateRole },
-    delete_role: { title: 'Delete Admin Role', component: DeleteRole },
-    empty: { title: '', component: () => null },
-  }
+// Static structural template — panels' title strings are translated at
+// render time below via `t`, so this map only holds the per-key component
+// and i18n key, not the localised label itself.
+const panelMeta: Record<
+  ComponentKey,
+  { titleKey: string | null; component: React.ComponentType<PanelProps> }
+> = {
+  update: { titleKey: 'adminRoles.detail.panels.update', component: UpdateRole },
+  delete_role: { titleKey: 'adminRoles.detail.panels.delete', component: DeleteRole },
+  empty: { titleKey: null, component: () => null },
+}
 
 interface RoleContainerProps {
   role: AdminRoleResponse
@@ -74,6 +73,7 @@ interface RoleContainerProps {
 export function RoleContainer({ role, registered, initialAbilities }: RoleContainerProps) {
   const router = useRouter()
   const toastManager = useToastManager()
+  const { t } = useTranslation('byline-admin')
   const [currentRole, setCurrentRole] = useState<AdminRoleResponse>(role)
   const [currentAbilities, setCurrentAbilities] = useState<string[]>(initialAbilities)
   const [current, setCurrent] = useState<ComponentKey>('empty')
@@ -105,34 +105,42 @@ export function RoleContainer({ role, registered, initialAbilities }: RoleContai
     setCurrentAbilities(response.abilities)
     void router.invalidate()
     toastManager.add({
-      title: 'Permissions saved',
-      description: `${response.abilities.length} abilities granted to ${currentRole.name}.`,
+      title: t('adminRoles.detail.permissionsSavedToast'),
+      description: t('adminRoles.detail.permissionsSavedDescription', {
+        count: response.abilities.length,
+        role: currentRole.name,
+      }),
       data: { intent: 'success' },
     })
   }
 
-  const Panel = panels[current].component
+  const Panel = panelMeta[current].component
+  const panelTitleKey = panelMeta[current].titleKey
+  const panelTitle = panelTitleKey ? t(panelTitleKey) : ''
 
   return (
     <>
       <div className={cx('byline-role-detail-card', styles.card)}>
         <div className={cx('byline-role-detail-head', styles.head)}>
-          <h2 className={cx('byline-role-detail-title', styles.title)}>Role Details</h2>
+          <h2 className={cx('byline-role-detail-title', styles.title)}>
+            {t('adminRoles.detail.title')}
+          </h2>
           <div className={cx('byline-role-detail-actions', styles.actions)}>
             <Button size="xs" intent="secondary" onClick={openDrawer('update')}>
-              Edit Details
+              {t('adminRoles.detail.editDetailsButton')}
             </Button>
             <Button size="xs" intent="danger" onClick={openModal('delete_role')}>
-              Delete Role
+              {t('adminRoles.detail.deleteButton')}
             </Button>
           </div>
         </div>
         <div className={cx('byline-role-detail-grid', styles.grid)}>
           <p className={cx('byline-role-detail-row', styles.row)}>
-            <span className="muted">Name:</span> {currentRole.name}
+            <span className="muted">{t('adminRoles.detail.fields.name')}</span> {currentRole.name}
           </p>
           <p className={cx('byline-role-detail-row', styles.row)}>
-            <span className="muted">Machine name:</span> {currentRole.machine_name}
+            <span className="muted">{t('adminRoles.detail.fields.machineName')}</span>{' '}
+            {currentRole.machine_name}
           </p>
           <p
             className={cx(
@@ -141,19 +149,21 @@ export function RoleContainer({ role, registered, initialAbilities }: RoleContai
               styles.gridFull
             )}
           >
-            <span className="muted">Description:</span>{' '}
+            <span className="muted">{t('adminRoles.detail.fields.description')}</span>{' '}
             {currentRole.description ?? (
-              <span className={cx('muted byline-role-detail-not-set', styles.notSet)}>Not set</span>
+              <span className={cx('muted byline-role-detail-not-set', styles.notSet)}>
+                {t('common.notSet')}
+              </span>
             )}
           </p>
         </div>
         <div className={cx('muted byline-role-detail-meta', styles.meta)}>
           <p className={cx('byline-role-detail-row', styles.row)}>
-            <span className="font-bold">Created:&nbsp;</span>
+            <span className="font-bold">{t('adminRoles.detail.fields.created')}&nbsp;</span>
             <LocalDateTime value={currentRole.created_at} />
           </p>
           <p className={cx('byline-role-detail-row', styles.row)}>
-            <span className="font-bold">Updated:&nbsp;</span>
+            <span className="font-bold">{t('adminRoles.detail.fields.updated')}&nbsp;</span>
             <LocalDateTime value={currentRole.updated_at} />
           </p>
         </div>
@@ -180,12 +190,12 @@ export function RoleContainer({ role, registered, initialAbilities }: RoleContai
             <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>{panelTitle}</h2>
           </Drawer.Header>
           <Drawer.Content>
             <div className={cx('byline-role-detail-drawer-content', styles.drawerContent)}>
@@ -198,8 +208,8 @@ export function RoleContainer({ role, registered, initialAbilities }: RoleContai
       <Modal isOpen={isModalOpen} onDismiss={closeModal} closeOnOverlayClick={false}>
         <Modal.Container className={cx('byline-role-detail-modal', styles.modal)}>
           <Modal.Header className={cx('byline-role-detail-modal-head', styles.modalHead)}>
-            <h3 className="m-0">{panels[current].title}</h3>
-            <IconButton aria-label="Close" size="sm" onClick={closeModal}>
+            <h3 className="m-0">{panelTitle}</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-roles/delete.tsx

@@ -20,6 +20,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'
 
@@ -36,6 +37,7 @@ interface DeleteRoleProps {
 export function DeleteRole({ role, onClose }: DeleteRoleProps) {
   const navigate = useNavigate()
   const router = useRouter()
+  const { t } = useTranslation('byline-admin')
   const [error, setError] = useState<string | null>(null)
   const [pending, setPending] = useState(false)
 
@@ -54,13 +56,11 @@ export function DeleteRole({ role, onClose }: DeleteRoleProps) {
     } catch (err) {
       const code = getErrorCode(err)
       if (code === 'admin.roles.versionConflict') {
-        setError(
-          'This role has been modified elsewhere since you opened this dialog. Close and reload before trying again.'
-        )
+        setError(t('adminRoles.delete.errors.versionConflict'))
       } else if (code === 'admin.roles.notFound') {
-        setError('This role has already been deleted.')
+        setError(t('adminRoles.delete.errors.notFound'))
       } else {
-        setError('Could not delete this role. Please try again.')
+        setError(t('adminRoles.delete.errors.fallback'))
       }
       setPending(false)
     }
@@ -75,14 +75,13 @@ export function DeleteRole({ role, onClose }: DeleteRoleProps) {
           </Alert>
         ) : null}
         <p className={cx('byline-role-delete-row', styles.row)}>
-          <span className="muted">Role:</span> {role.name}
+          <span className="muted">{t('adminRoles.delete.roleLabel')}</span> {role.name}
         </p>
         <p className={cx('byline-role-delete-row', styles.row)}>
-          <span className="muted">Machine name:</span> {role.machine_name}
+          <span className="muted">{t('adminRoles.delete.machineLabel')}</span> {role.machine_name}
         </p>
         <p className={cx('byline-role-delete-warning', styles.warning)}>
-          This will permanently delete the role. Any users assigned to it lose the role; any
-          per-role ability grants are removed. The action cannot be undone.
+          {t('adminRoles.delete.warning')}
         </p>
       </div>
       <div className={cx('byline-role-delete-actions', styles.actions)}>
@@ -94,7 +93,7 @@ export function DeleteRole({ role, onClose }: DeleteRoleProps) {
           disabled={pending}
           className={cx('byline-role-delete-button', styles.button)}
         >
-          Cancel
+          {t('common.actions.cancel')}
         </Button>
         <Button
           size="sm"
@@ -103,7 +102,7 @@ export function DeleteRole({ role, onClose }: DeleteRoleProps) {
           disabled={pending}
           className={cx('byline-role-delete-button', styles.button)}
         >
-          {pending === true ? <LoaderEllipsis size={42} /> : 'Delete Role'}
+          {pending === true ? <LoaderEllipsis size={42} /> : t('adminRoles.delete.confirmButton')}
         </Button>
       </div>
     </Modal.Content>

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

@@ -26,6 +26,8 @@ import { type FormEvent, useEffect, useState } from 'react'
 import { useRouter } from '@tanstack/react-router'
 
 import { CreateAdminRole } from '@byline/admin/admin-roles/components/create'
+import { LocalDateTime } from '@byline/admin/react'
+import { useTranslation } from '@byline/i18n/react'
 import {
   Button,
   CloseIcon,
@@ -35,7 +37,6 @@ import {
   GripperVerticalIcon,
   IconButton,
   LoaderEllipsis,
-  LocalDateTime,
   moveItem,
   PlusIcon,
   Section,
@@ -66,6 +67,7 @@ interface DraggableRowProps {
 }
 
 const DraggableRow: React.FC<DraggableRowProps> = ({ item, disabled }) => {
+  const { t } = useTranslation('byline-admin')
   const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
     id: item.id,
     disabled,
@@ -102,7 +104,9 @@ const DraggableRow: React.FC<DraggableRowProps> = ({ item, disabled }) => {
       <Table.Cell>{item.machine_name}</Table.Cell>
       <Table.Cell>
         {item.description ?? (
-          <span className={cx('muted byline-roles-list-not-set', styles.notSet)}>Not set</span>
+          <span className={cx('muted byline-roles-list-not-set', styles.notSet)}>
+            {t('common.notSet')}
+          </span>
         )}
       </Table.Cell>
       <Table.Cell className={cx('byline-roles-list-cell-right', styles.cellRight)}>
@@ -129,6 +133,7 @@ function padRows(value: number) {
 export function AdminRolesListView({ data }: { data: AdminRoleListResponse }) {
   const router = useRouter()
   const toastManager = useToastManager()
+  const { t } = useTranslation('byline-admin')
   const [items, setItems] = useState<AdminRoleResponse[]>(data.roles)
   const [orderChanged, setOrderChanged] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
@@ -153,7 +158,7 @@ export function AdminRolesListView({ data }: { data: AdminRoleListResponse }) {
     setIsCreateDrawerOpen(false)
     void router.invalidate()
     toastManager.add({
-      title: 'Admin role created',
+      title: t('adminRoles.list.createdToastTitle'),
       description: created.name,
       data: { intent: 'success' },
     })
@@ -182,7 +187,7 @@ export function AdminRolesListView({ data }: { data: AdminRoleListResponse }) {
       setOrderChanged(false)
       void router.invalidate()
       toastManager.add({
-        title: 'Order saved',
+        title: t('adminRoles.list.orderSavedToast'),
         data: { intent: 'success' },
       })
     } catch (_err) {
@@ -190,8 +195,8 @@ export function AdminRolesListView({ data }: { data: AdminRoleListResponse }) {
       setItems(previousItems)
       setOrderChanged(false)
       toastManager.add({
-        title: 'Could not save the new order',
-        description: 'Please try again.',
+        title: t('adminRoles.list.orderFailedToast'),
+        description: t('adminRoles.list.orderFailedDescription'),
         data: { intent: 'danger' },
       })
     } finally {
@@ -203,15 +208,19 @@ export function AdminRolesListView({ data }: { data: AdminRoleListResponse }) {
     <Section>
       <Container>
         <div className={cx('byline-roles-list-head', styles.head)}>
-          <h1 className={cx('byline-roles-list-title', styles.title)}>Admin Roles</h1>
+          <h1 className={cx('byline-roles-list-title', styles.title)}>
+            {t('adminRoles.list.title')}
+          </h1>
           <Stats total={data.roles.length} />
-          <IconButton aria-label="Create New Admin Role" onClick={openCreateDrawer}>
+          <IconButton aria-label={t('adminRoles.list.createAriaLabel')} onClick={openCreateDrawer}>
             <PlusIcon height="18px" width="18px" svgClassName="stroke-white" />
           </IconButton>
         </div>
 
         {items.length === 0 ? (
-          <div className={cx('byline-roles-list-empty', styles.empty)}>No admin roles found</div>
+          <div className={cx('byline-roles-list-empty', styles.empty)}>
+            {t('adminRoles.list.empty')}
+          </div>
         ) : (
           <DraggableSortable ids={items.map((item) => item.id)} onDragEnd={handleOnDragEnd}>
             <Table.Container className={cx('byline-roles-list-table-wrap', styles.tableWrap)}>
@@ -222,22 +231,22 @@ export function AdminRolesListView({ data }: { data: AdminRoleListResponse }) {
                       className={cx('byline-roles-list-col-drag', styles.colDrag)}
                     />
                     <Table.HeadingCell className={cx('byline-roles-list-col-name', styles.colName)}>
-                      Name
+                      {t('adminRoles.list.columns.name')}
                     </Table.HeadingCell>
                     <Table.HeadingCell
                       className={cx('byline-roles-list-col-machine', styles.colMachine)}
                     >
-                      Machine Name
+                      {t('adminRoles.list.columns.machineName')}
                     </Table.HeadingCell>
                     <Table.HeadingCell
                       className={cx('byline-roles-list-col-description', styles.colDescription)}
                     >
-                      Description
+                      {t('adminRoles.list.columns.description')}
                     </Table.HeadingCell>
                     <Table.HeadingCell
                       className={cx('byline-roles-list-col-created', styles.colCreated)}
                     >
-                      Created
+                      {t('adminRoles.list.columns.created')}
                     </Table.HeadingCell>
                   </Table.Row>
                 </Table.Header>
@@ -264,7 +273,7 @@ export function AdminRolesListView({ data }: { data: AdminRoleListResponse }) {
                   {isSaving ? (
                     <LoaderEllipsis size={30} color="#aaaaaa" />
                   ) : (
-                    <span>Save Order</span>
+                    <span>{t('adminRoles.list.saveOrder')}</span>
                   )}
                 </Button>
               </div>
@@ -287,12 +296,16 @@ export function AdminRolesListView({ data }: { data: AdminRoleListResponse }) {
             <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 Role</h2>
+            <h2>{t('adminRoles.list.newDrawerTitle')}</h2>
           </Drawer.Header>
           <Drawer.Content>
             <div className={cx('byline-roles-list-drawer-scroll', styles.drawerScroll)}>