[Maintainer] i18n: migrate tools and toolbar

apps/editor/components/kitchen-browser.tsx

@@ -5,6 +5,7 @@ import {
   type CabinetNode,
   emitter,
   resolveLevelId,
+  usePascalI18n,
   useScene,
 } from '@pascal-app/core'
 import { useCommandPalette, useCommandRegistry, useEditor } from '@pascal-app/editor'
@@ -39,6 +40,7 @@ function focusKitchenItem(id: AnyNodeId) {
 }
 
 export function KitchenBrowser({ query = '' }: { query?: string }) {
+  const i18n = usePascalI18n()
   const defaults = useEditor((state) => state.toolDefaults.cabinet)
   const mode = useEditor((state) => state.mode)
   // Read the scene only while a query asks for placed items.
@@ -49,9 +51,14 @@ export function KitchenBrowser({ query = '' }: { query?: string }) {
   return (
     <div className="space-y-4">
       <div>
-        <h3 className="text-sm font-medium">Add to kitchen</h3>
+        <h3 className="text-sm font-medium">
+          {i18n._({ id: 'app.kitchenBrowser.addToKitchen', message: 'Add to kitchen' })}
+        </h3>
         <p className="mt-1 text-xs text-muted-foreground">
-          Choose an item, then click to place it. Appliances include their cabinetry.
+          {i18n._({
+            id: 'app.kitchenBrowser.chooseAnItemThenClickTo',
+            message: 'Choose an item, then click to place it. Appliances include their cabinetry.',
+          })}
         </p>
       </div>
       <KitchenCollection
@@ -61,22 +68,37 @@ export function KitchenBrowser({ query = '' }: { query?: string }) {
       />
       {query.trim() && (
         <div className="space-y-2 border-t border-border pt-3">
-          <h3 className="text-xs font-medium">Find in this project · {matches.length}</h3>
+          <h3 className="text-xs font-medium">
+            {i18n._({
+              id: 'app.kitchenBrowser.findInThisProjectLength',
+              message: 'Find in this project · {length}',
+              values: { length: matches.length },
+            })}
+          </h3>
           {matches.map((node) => (
             <button
               key={node.id}
               type="button"
               onClick={() => focusKitchenItem(node.id)}
               className="block w-full rounded-lg border border-border/60 px-3 py-2 text-left text-xs hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
             >
-              {node.name || 'Kitchen cabinet'}
+              {node.name ||
+                i18n._({ id: 'app.kitchenBrowser.kitchenCabinet', message: 'Kitchen cabinet' })}
               <span className="block text-[10px] text-muted-foreground">
-                Select and show in scene
+                {i18n._({
+                  id: 'app.kitchenBrowser.selectAndShowInScene',
+                  message: 'Select and show in scene',
+                })}
               </span>
             </button>
           ))}
           {!matches.length && (
-            <p className="text-xs text-muted-foreground">No matching kitchen items placed yet.</p>
+            <p className="text-xs text-muted-foreground">
+              {i18n._({
+                id: 'app.kitchenBrowser.noMatchingKitchenItemsPlacedYet',
+                message: 'No matching kitchen items placed yet.',
+              })}
+            </p>
           )}
         </div>
       )}
@@ -85,6 +107,7 @@ export function KitchenBrowser({ query = '' }: { query?: string }) {
 }
 
 export function KitchenCommands() {
+  const i18n = usePascalI18n()
   const register = useCommandRegistry((state) => state.register)
   // Always mounted: the placed items are read only while the palette is open to list them.
   const paletteOpen = useCommandPalette((state) => state.open)
@@ -96,13 +119,17 @@ export function KitchenCommands() {
       register(
         KITCHEN_ITEMS.map((item) => ({
           id: `kitchen.add.${item.id}`,
-          label: `Add ${item.label}`,
-          group: 'Kitchen · Add',
+          label: i18n._({
+            id: 'app.kitchenBrowser.addLabel',
+            message: 'Add {label}',
+            values: { label: item.label },
+          }),
+          group: i18n._({ id: 'app.kitchenBrowser.groupAdd', message: 'Kitchen · Add' }),
           keywords: item.keywords.split(' '),
           execute: () => beginKitchenPlacement(item.id),
         })),
       ),
-    [register],
+    [register, i18n],
   )
   useEffect(
     () =>
@@ -120,14 +147,21 @@ export function KitchenCommands() {
           const item = KITCHEN_ITEMS.find((entry) => entry.id === preset)!
           return {
             id: `kitchen.find.${node.id}`,
-            label: `Find ${node.name || item.label}`,
-            group: 'Kitchen · In this project',
+            label: i18n._({
+              id: 'app.kitchenBrowser.findName',
+              message: 'Find {name}',
+              values: { name: node.name || item.label },
+            }),
+            group: i18n._({
+              id: 'app.kitchenBrowser.groupInThisProject',
+              message: 'Kitchen · In this project',
+            }),
             keywords: item.keywords.split(' '),
             execute: () => focusKitchenItem(node.id),
           }
         }),
       ),
-    [register, modules],
+    [register, modules, i18n],
   )
   return null
 }

apps/editor/components/webxr-wand-bindings.ts

@@ -18,6 +18,14 @@ import {
 import { useBuildPanelModel, useBuildToolOptions } from '@/lib/build-panel-model'
 import { getRoofFootprintSources, ROOF_TYPE_OPTIONS } from '@/lib/build-tab-state'
 
+// The XR plugin takes plain labels and renders them itself, so it receives the English source.
+const english = <T extends { label: { message?: string; id: string } }>(
+  entry: T,
+): Omit<T, 'label'> & { label: string } => ({
+  ...entry,
+  label: entry.label.message ?? entry.label.id,
+})
+
 export const webXRWandBindings: PascalXRWandBindings = {
   useBuildPalette: useBuildPanelModel,
   useToolOptions: useBuildToolOptions,
@@ -32,9 +40,13 @@ export const webXRWandBindings: PascalXRWandBindings = {
     useEditor.getState().setTool(null)
   },
   activateTerrainSculptMode,
-  collectBuildTypes,
-  collectRoofFeatures,
-  getRoofFootprintSources,
-  roofTypeOptions: ROOF_TYPE_OPTIONS,
-  xrMepItems: MEP_ITEMS,
+  collectBuildTypes: (floorplanMode) => collectBuildTypes(floorplanMode).map(english),
+  collectRoofFeatures: () => collectRoofFeatures().map(english),
+  getRoofFootprintSources: (roofType) =>
+    getRoofFootprintSources(roofType).map((source) => ({
+      value: source.value,
+      label: source.label.message,
+    })),
+  roofTypeOptions: ROOF_TYPE_OPTIONS.map(english),
+  xrMepItems: MEP_ITEMS.map(english),
 }