diff --git a/src/workspaces/officerdev/src/apps/Dashboards/DashboardListApp.tsx b/src/workspaces/officerdev/src/apps/Dashboards/DashboardListApp.tsx index 17b0f76d..f6733c13 100644 --- a/src/workspaces/officerdev/src/apps/Dashboards/DashboardListApp.tsx +++ b/src/workspaces/officerdev/src/apps/Dashboards/DashboardListApp.tsx @@ -26,8 +26,10 @@ import { } from './constants'; import { useNewDashboardDraft } from './useNewDashboardDraft'; import { cwdToPath } from '../../components/Workspace'; +import { useTranslation } from '../../locales'; export const DashboardListApp = () => { + const { t, tUi } = useTranslation(); const location = useLocation(); const client = useClient(); const queryClient = useQueryClient(); @@ -105,7 +107,7 @@ export const DashboardListApp = () => { className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium bg-duck-teal/15 text-duck-teal" > - Dashboards + {t('dashboards.title')}
@@ -122,7 +124,7 @@ export const DashboardListApp = () => { type="text" value={search} onChange={(ev) => setSearch(ev.target.value)} - placeholder="Search dashboards" + placeholder={t('dashboards.search')} className="w-full rounded-lg border border-duck-dark/15 bg-transparent py-1.5 pl-8 pr-3 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 focus:border-duck-teal/40" />
@@ -182,15 +184,15 @@ export const DashboardListApp = () => { > - Delete dashboard + {t('dashboards.delete')} - Are you sure you want to delete {deleting?.name}? This action cannot be undone. + {t('dashboards.confirmDelete')} {deleting?.name}? This action cannot be undone. - Cancel + {tUi('button.cancel')} - Delete + {t('common.delete')} diff --git a/src/workspaces/officerdev/src/apps/Dashboards/DashboardPreview.tsx b/src/workspaces/officerdev/src/apps/Dashboards/DashboardPreview.tsx index 667fca4d..392e3bad 100644 --- a/src/workspaces/officerdev/src/apps/Dashboards/DashboardPreview.tsx +++ b/src/workspaces/officerdev/src/apps/Dashboards/DashboardPreview.tsx @@ -19,21 +19,23 @@ import { NEW_DASH_DESC_KEY, NEW_DASH_TEMPLATE_KEY, } from './constants'; +import type { PanelTranslationKey } from '../../locales'; +import { panelName, useTranslation } from '../../locales'; // --- Layout Templates --- type LayoutTemplate = { - name: string; + nameKey: PanelTranslationKey; layout: () => LayoutNode; }; const templates: LayoutTemplate[] = [ { - name: 'Single', + nameKey: 'dashboards.templates.single', layout: () => ({ type: 'panel', id: uid(), appType: null }), }, { - name: '2 Columns', + nameKey: 'dashboards.templates.twoColumns', layout: () => ({ type: 'group', id: uid(), @@ -45,7 +47,7 @@ const templates: LayoutTemplate[] = [ }), }, { - name: 'Main + Side', + nameKey: 'dashboards.templates.mainSide', layout: () => ({ type: 'group', id: uid(), @@ -68,7 +70,7 @@ const templates: LayoutTemplate[] = [ }), }, { - name: 'Sidebar', + nameKey: 'dashboards.templates.sidebar', layout: () => ({ type: 'group', id: uid(), @@ -80,7 +82,7 @@ const templates: LayoutTemplate[] = [ }), }, { - name: '2x2 Grid', + nameKey: 'dashboards.templates.grid', layout: () => ({ type: 'group', id: uid(), @@ -114,7 +116,7 @@ const templates: LayoutTemplate[] = [ }), }, { - name: 'Cols + Bottom', + nameKey: 'dashboards.templates.colsBottom', layout: () => ({ type: 'group', id: uid(), @@ -157,6 +159,7 @@ const ThumbnailNode = ({ node }: { node: LayoutNode }) => { }; const TemplateCell = ({ index }: { index: number }) => { + const { t } = useTranslation(); const tpl = templates[index]!; const [selected, setSelected] = useGlobal(NEW_DASH_TEMPLATE_KEY, 0); const node = tpl.layout(); @@ -174,7 +177,9 @@ const TemplateCell = ({ index }: { index: number }) => {
- {tpl.name} + + {t(tpl.nameKey)} + ); @@ -219,7 +224,7 @@ const tplPanelLayout: LayoutNode = { const tplRegistry = Object.fromEntries( templates.map((tpl, i) => [ `tpl-${i}`, - { name: tpl.name, icon: Layout, component: () => }, + { name: panelName(tpl.nameKey), icon: Layout, component: () => }, ]), ); @@ -230,6 +235,7 @@ const TemplatePanel = () => ( // --- Panel: Name --- const NamePanel = () => { + const { t } = useTranslation(); const [name, setName] = useGlobal(NEW_DASH_NAME_KEY, ''); const [description, setDescription] = useGlobal(NEW_DASH_DESC_KEY, ''); @@ -239,13 +245,13 @@ const NamePanel = () => {
setName(ev.target.value)} - placeholder="My Dashboard" + placeholder={t('dashboards.namePlaceholder')} autoFocus className="rounded-lg border border-duck-dark/20 bg-background px-3 py-2 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50" /> @@ -253,12 +259,12 @@ const NamePanel = () => {