[Maintainer] i18n: migrate navbar and top bar

apps/editor/components/app-home-link.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { usePascalI18n } from '@pascal-app/core'
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+
+/** Server pages render `AppHeader`, so the translated link label lives in this client leaf. */
+export function AppHomeLink({ children }: { children: ReactNode }) {
+  const i18n = usePascalI18n()
+  return (
+    <Link
+      aria-label={i18n._({ id: 'app.appShell.pascalHome', message: 'Pascal home' })}
+      className="-mx-2 flex items-center rounded-lg px-2 py-1.5 transition-colors hover:bg-accent"
+      href="/"
+    >
+      {children}
+    </Link>
+  )
+}

apps/editor/components/app-shell.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
-import Link from 'next/link'
 import type { ReactNode } from 'react'
 import { cn } from '@/lib/utils'
+import { AppHomeLink } from './app-home-link'
 
 /**
  * The dark chrome every page outside the editor shares, so the scenes list,
@@ -49,13 +49,9 @@ export function AppHeader({ children }: { children?: ReactNode }) {
   return (
     <header className="sticky top-0 z-20 border-border/50 border-b bg-sidebar">
       <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-6">
-        <Link
-          aria-label="Pascal home"
-          className="-mx-2 flex items-center rounded-lg px-2 py-1.5 transition-colors hover:bg-accent"
-          href="/"
-        >
+        <AppHomeLink>
           <PascalLogo />
-        </Link>
+        </AppHomeLink>
         <div className="flex items-center gap-2">{children}</div>
       </div>
     </header>

apps/editor/components/editor-navbar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import { useEditor } from '@pascal-app/editor'
 import { Eye, Pencil, Share2 } from 'lucide-react'
 import Link from 'next/link'
@@ -15,6 +16,7 @@ interface EditorNavbarProps {
 }
 
 export function EditorNavbar({ sceneId, name, onRename }: EditorNavbarProps) {
+  const i18n = usePascalI18n()
   const [editing, setEditing] = useState(false)
   const [shareOpen, setShareOpen] = useState(false)
   const shareAnchorRef = useRef<HTMLDivElement>(null)
@@ -60,10 +62,10 @@ export function EditorNavbar({ sceneId, name, onRename }: EditorNavbarProps) {
     <nav className="flex h-12 shrink-0 items-center gap-2 border-border/30 border-b bg-sidebar px-2 lg:px-3">
       <div className="flex min-w-0 items-center gap-1.5 lg:gap-2">
         <Link
-          aria-label="All projects"
+          aria-label={i18n._({ id: 'app.editorNavbar.allProjects', message: 'All projects' })}
           className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors hover:bg-accent"
           href="/"
-          title="All projects"
+          title={i18n._({ id: 'app.editorNavbar.allProjects', message: 'All projects' })}
         >
           <PascalMark />
         </Link>
@@ -73,7 +75,7 @@ export function EditorNavbar({ sceneId, name, onRename }: EditorNavbarProps) {
         <div className="min-w-0 max-w-40 lg:max-w-72">
           {editing ? (
             <input
-              aria-label="Project name"
+              aria-label={i18n._({ id: 'app.editorNavbar.projectName', message: 'Project name' })}
               className="h-7 w-full rounded-md bg-accent/50 px-2 py-0 font-medium text-foreground text-sm outline-none ring-1 ring-primary/50 focus:ring-primary"
               maxLength={200}
               onBlur={commit}
@@ -86,7 +88,7 @@ export function EditorNavbar({ sceneId, name, onRename }: EditorNavbarProps) {
             <button
               className="group/title flex h-7 max-w-full items-center gap-1.5 rounded-md px-2 text-left transition-colors hover:bg-accent/50"
               onClick={startEditing}
-              title="Rename project"
+              title={i18n._({ id: 'app.editorNavbar.renameProject', message: 'Rename project' })}
               type="button"
             >
               <span className="truncate font-medium text-sm">{name}</span>
@@ -99,23 +101,29 @@ export function EditorNavbar({ sceneId, name, onRename }: EditorNavbarProps) {
       <div className="flex-1" />
 
       <button
+        aria-label={i18n._({ id: 'app.editorNavbar.preview', message: 'Preview' })}
         className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 font-medium text-sm transition-colors hover:bg-accent"
         onClick={() => useEditor.getState().setPreviewMode(true)}
         type="button"
       >
         <Eye className="h-4 w-4 shrink-0" />
-        <span className="hidden sm:inline">Preview</span>
+        <span className="hidden sm:inline">
+          {i18n._({ id: 'app.editorNavbar.preview', message: 'Preview' })}
+        </span>
       </button>
 
       <div className="relative" ref={shareAnchorRef}>
         <button
           aria-expanded={shareOpen}
+          aria-label={i18n._({ id: 'app.editorNavbar.share', message: 'Share' })}
           className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 font-medium text-sm transition-colors hover:bg-accent"
           onClick={() => setShareOpen((open) => !open)}
           type="button"
         >
           <Share2 className="h-4 w-4 shrink-0" />
-          <span className="hidden sm:inline">Share</span>
+          <span className="hidden sm:inline">
+            {i18n._({ id: 'app.editorNavbar.share', message: 'Share' })}
+          </span>
         </button>
         {shareOpen && (
           <SharePanel anchorRef={shareAnchorRef} onClose={closeShare} sceneId={sceneId} />

apps/editor/components/share-panel.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import { Check, Copy, ExternalLink } from 'lucide-react'
 import { type KeyboardEvent, type RefObject, useEffect, useRef, useState } from 'react'
 import { cn } from '@/lib/utils'
@@ -38,6 +39,7 @@ async function writeShared(sceneId: string, shared: boolean): Promise<boolean> {
 }
 
 export function SharePanel({ sceneId, anchorRef, onClose }: SharePanelProps) {
+  const i18n = usePascalI18n()
   // null while the current state is loading.
   const [shared, setShared] = useState<boolean | null>(null)
   const [saving, setSaving] = useState(false)
@@ -53,7 +55,12 @@ export function SharePanel({ sceneId, anchorRef, onClose }: SharePanelProps) {
       .catch(() => {
         if (cancelled) return
         setShared(false)
-        setError('Could not read the sharing state.')
+        setError(
+          i18n._({
+            id: 'app.sharePanel.couldNotReadTheSharingState',
+            message: 'Could not read the sharing state.',
+          }),
+        )
       })
     return () => {
       cancelled = true
@@ -87,7 +94,17 @@ export function SharePanel({ sceneId, anchorRef, onClose }: SharePanelProps) {
       setShared(await writeShared(sceneId, next))
     } catch {
       setShared(previous)
-      setError(next ? 'Could not turn on the public link.' : 'Could not turn off the public link.')
+      setError(
+        next
+          ? i18n._({
+              id: 'app.sharePanel.couldNotTurnOnThePublic',
+              message: 'Could not turn on the public link.',
+            })
+          : i18n._({
+              id: 'app.sharePanel.couldNotTurnOffThePublic',
+              message: 'Could not turn off the public link.',
+            }),
+      )
     } finally {
       setSaving(false)
     }
@@ -99,7 +116,7 @@ export function SharePanel({ sceneId, anchorRef, onClose }: SharePanelProps) {
   return (
     // Keystrokes in here (Delete, Cmd+A, tool keys) must not reach the editor's shortcuts.
     <div
-      aria-label="Share project"
+      aria-label={i18n._({ id: 'app.sharePanel.shareProject', message: 'Share project' })}
       className="dark absolute top-full right-0 z-50 mt-2 w-80 rounded-xl border border-border/60 bg-background p-4 text-foreground shadow-2xl [color-scheme:dark]"
       onKeyDown={(event: KeyboardEvent) => {
         if (event.key !== 'Escape') event.stopPropagation()
@@ -108,7 +125,7 @@ export function SharePanel({ sceneId, anchorRef, onClose }: SharePanelProps) {
     >
       <div className="flex items-center justify-between gap-3">
         <span className="font-medium text-sm" id="share-public-link-label">
-          Public link
+          {i18n._({ id: 'app.sharePanel.publicLink', message: 'Public link' })}
         </span>
         <Switch
           checked={shared === true}
@@ -118,7 +135,10 @@ export function SharePanel({ sceneId, anchorRef, onClose }: SharePanelProps) {
         />
       </div>
       <p className="mt-1.5 text-muted-foreground text-xs">
-        Anyone with the link can view this project. They cannot edit it.
+        {i18n._({
+          id: 'app.sharePanel.anyoneWithTheLinkCanView',
+          message: 'Anyone with the link can view this project. They cannot edit it.',
+        })}
       </p>
       {error && <p className="mt-2 text-destructive text-xs">{error}</p>}
 
@@ -127,7 +147,7 @@ export function SharePanel({ sceneId, anchorRef, onClose }: SharePanelProps) {
           <div>
             <div className="flex items-center justify-between gap-3">
               <span className="font-medium text-sm" id="share-hide-controls-label">
-                Hide controls
+                {i18n._({ id: 'app.sharePanel.hideControls', message: 'Hide controls' })}
               </span>
               <Switch
                 checked={hideControls}
@@ -136,14 +156,19 @@ export function SharePanel({ sceneId, anchorRef, onClose }: SharePanelProps) {
               />
             </div>
             <p className="mt-1.5 text-muted-foreground text-xs">
-              Only the 3D view, no header or toolbar.
+              {i18n._({
+                id: 'app.sharePanel.onlyThe3dViewNoHeader',
+                message: 'Only the 3D view, no header or toolbar.',
+              })}
             </p>
           </div>
           <div>
-            <span className="mb-1.5 block text-muted-foreground text-xs">Link</span>
+            <span className="mb-1.5 block text-muted-foreground text-xs">
+              {i18n._({ id: 'app.sharePanel.link', message: 'Link' })}
+            </span>
             <div className="flex items-center gap-1.5">
               <input
-                aria-label="Embed link"
+                aria-label={i18n._({ id: 'app.sharePanel.embedLink', message: 'Embed link' })}
                 className={FIELD}
                 onFocus={(event) => event.currentTarget.select()}
                 readOnly
@@ -158,16 +183,18 @@ export function SharePanel({ sceneId, anchorRef, onClose }: SharePanelProps) {
               target="_blank"
             >
               <ExternalLink className="h-3 w-3" />
-              Open
+              {i18n._({ id: 'app.sharePanel.open', message: 'Open' })}
             </a>
           </div>
           <div>
             <div className="mb-1.5 flex items-center justify-between">
-              <span className="text-muted-foreground text-xs">Embed code</span>
+              <span className="text-muted-foreground text-xs">
+                {i18n._({ id: 'app.sharePanel.embedCode', message: 'Embed code' })}
+              </span>
               <CopyButton text={snippet} />
             </div>
             <textarea
-              aria-label="Embed code"
+              aria-label={i18n._({ id: 'app.sharePanel.embedCode', message: 'Embed code' })}
               className={cn(FIELD, 'h-20 resize-none leading-relaxed')}
               onFocus={(event) => event.currentTarget.select()}
               readOnly
@@ -215,6 +242,7 @@ function Switch({
 }
 
 function CopyButton({ text }: { text: string }) {
+  const i18n = usePascalI18n()
   const [copied, setCopied] = useState(false)
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -240,7 +268,9 @@ function CopyButton({ text }: { text: string }) {
   return (
     <button className={SMALL_BUTTON} onClick={copy} type="button">
       {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-      {copied ? 'Copied' : 'Copy'}
+      {copied
+        ? i18n._({ id: 'app.sharePanel.copied', message: 'Copied' })
+        : i18n._({ id: 'app.sharePanel.copy', message: 'Copy' })}
     </button>
   )
 }

i18n/literal-baseline.json

@@ -75,9 +75,6 @@
       "Set up · Pascal",
       "This editor is reachable but not protected yet"
     ],
-    "apps/editor/components/app-shell.tsx": [
-      "Pascal home"
-    ],
     "apps/editor/components/build-tab.tsx": [
       "Add Gate",
       "Add Open Passage",
@@ -123,14 +120,6 @@
       "Failed to create project ({status})",
       "New project"
     ],
-    "apps/editor/components/editor-navbar.tsx": [
-      "All projects",
-      "All projects",
-      "Preview",
-      "Project name",
-      "Rename project",
-      "Share"
-    ],
     "apps/editor/components/embed-viewer.tsx": [
       "Made with Pascal",
       "This project could not be shown in 3D here. Try a browser with hardware acceleration turned on."
@@ -180,23 +169,6 @@
       "Settings",
       "Your changes haven't been saved. Reload to pick up the latest version."
     ],
-    "apps/editor/components/share-panel.tsx": [
-      "Anyone with the link can view this project. They cannot edit it.",
-      "Copied",
-      "Copy",
-      "Could not read the sharing state.",
-      "Could not turn off the public link.",
-      "Could not turn on the public link.",
-      "Embed code",
-      "Embed code",
-      "Embed link",
-      "Hide controls",
-      "Link",
-      "Only the 3D view, no header or toolbar.",
-      "Open",
-      "Public link",
-      "Share project"
-    ],
     "packages/editor/src/components/editor-2d/floorplan-measurement-tool-layer.tsx": [
       "ALIGN ",
       "Create",
@@ -428,27 +400,6 @@
       "uninstalled",
       "{label} details"
     ],
-    "packages/editor/src/components/editor/views/view-bar.tsx": [
-      "Auto",
-      "Browse plugins",
-      "Close split (\\)",
-      "Close {label}",
-      "Ground",
-      "Keep the ground solid",
-      "More views",
-      "Pane {?} views",
-      "Pin to the view bar",
-      "Pin {label}",
-      "Solid",
-      "Split",
-      "Split (\\)",
-      "Swap panes",
-      "Swap panes",
-      "Unpin from the view bar",
-      "Unpin {label}",
-      "Veil the ground over a level below grade",
-      "Views"
-    ],
     "packages/editor/src/components/point-ask/bubble.tsx": [
       "Ask Pascal",
       "Ask Pascal",

i18n/pseudo-surfaces.ts

@@ -54,4 +54,35 @@ export const surfaces: PseudoSurface[] = [
   { name: 'home', path: '/', data: ['Project #1'] },
   { name: 'settings', path: '/settings' },
   { name: 'editor', path: editorPath, steps: openEditor, data: ['Project #1'] },
+  { name: 'navbar', path: editorPath, steps: openEditor, scope: 'nav', data: ['Project #1'] },
+  {
+    name: 'navbar-mobile',
+    path: editorPath,
+    steps: openEditor,
+    scope: 'nav',
+    viewport: { width: 390, height: 844 },
+    data: ['Project #1'],
+  },
+  {
+    name: 'share-panel',
+    path: editorPath,
+    steps: async (page) => {
+      await openEditor(page)
+      await page.locator('nav button[aria-expanded]').click()
+      await page.waitForTimeout(800)
+    },
+    scope: 'nav [role="dialog"]',
+  },
+  {
+    name: 'display-menu',
+    path: editorPath,
+    steps: (page) => openInEditor(page, 'Display settings'),
+    scope: '[role="menu"]',
+  },
+  {
+    name: 'more-views',
+    path: editorPath,
+    steps: (page) => openInEditor(page, 'More views'),
+    scope: '[role="menu"]',
+  },
 ]