Restore i18n on remaining UI components (rebase onto upstream/main)

apps/editor/app/globals.css

@@ -170,6 +170,25 @@
   scrollbar-width: none; /* Firefox */
 }
 
+/* Custom scrollbar — thin, dark-themed */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: #2c2c2e;
+}
+
+::-webkit-scrollbar-thumb {
+  background: oklch(1 0 0 / 30%);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(1 0 0 / 50%);
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

apps/editor/app/page.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import { Editor, ItemsPanel } from '@pascal-app/editor'
+import { Editor, ItemsPanel, useTranslations } from '@pascal-app/editor'
 import { Hammer, Layers, Package, Settings } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
+import { useMemo } from 'react'
 import { BuildTab } from '@/components/build-tab'
 import {
   CommunityViewerToolbarLeft,
@@ -17,89 +18,91 @@ function EditorItemsPanel() {
   return <ItemsPanel showSourceFilter={false} showTagFilters={false} />
 }
 
-const SIDEBAR_TABS = [
-  {
-    id: 'site',
-    label: 'Scene',
-    component: () => null,
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Layers className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/scene.webp"
-        width={32}
-      />
-    ),
-  },
-  {
-    id: 'build',
-    label: 'Build',
-    component: BuildTab,
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Hammer className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/build.webp"
-        width={32}
-      />
-    ),
-  },
-  {
-    id: 'items',
-    label: 'Items',
-    component: EditorItemsPanel,
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Package className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/couch.webp"
-        width={32}
-      />
-    ),
-  },
-  {
-    id: 'settings',
-    label: 'Settings',
-    component: () => null,
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Settings className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/settings.webp"
-        width={32}
-      />
-    ),
-  },
-]
-
 const PROJECT_ID = 'local-editor'
 
 export default function Home() {
+  const t = useTranslations()
+  const SIDEBAR_TABS = useMemo(
+    () => [
+      {
+        id: 'site',
+        label: t('sidebar.scene'),
+        component: () => null,
+        mobileDefaultSnap: 0.5,
+        mobileIcon: <Layers className="h-5 w-5" />,
+        icon: (
+          <Image
+            alt=""
+            className="h-8 w-8 object-contain"
+            height={32}
+            src="/icons/scene.webp"
+            width={32}
+          />
+        ),
+      },
+      {
+        id: 'build',
+        label: t('sidebar.build'),
+        component: BuildTab,
+        mobileDefaultSnap: 0.5,
+        mobileIcon: <Hammer className="h-5 w-5" />,
+        icon: (
+          <Image
+            alt=""
+            className="h-8 w-8 object-contain"
+            height={32}
+            src="/icons/build.webp"
+            width={32}
+          />
+        ),
+      },
+      {
+        id: 'items',
+        label: t('sidebar.items'),
+        component: EditorItemsPanel,
+        mobileDefaultSnap: 0.5,
+        mobileIcon: <Package className="h-5 w-5" />,
+        icon: (
+          <Image
+            alt=""
+            className="h-8 w-8 object-contain"
+            height={32}
+            src="/icons/couch.webp"
+            width={32}
+          />
+        ),
+      },
+      {
+        id: 'settings',
+        label: t('sidebar.settings'),
+        component: () => null,
+        mobileDefaultSnap: 0.5,
+        mobileIcon: <Settings className="h-5 w-5" />,
+        icon: (
+          <Image
+            alt=""
+            className="h-8 w-8 object-contain"
+            height={32}
+            src="/icons/settings.webp"
+            width={32}
+          />
+        ),
+      },
+    ],
+    [t],
+  )
+
   return (
     <div className="relative h-screen w-screen">
       {PROJECT_ID === 'local-editor' && (
         <div className="pointer-events-none absolute top-14 left-1/2 z-40 -translate-x-1/2">
           <div className="pointer-events-none flex max-w-[min(92vw,42rem)] flex-wrap items-center justify-center gap-x-3 gap-y-1 rounded-full border border-border/60 bg-background/90 px-4 py-1.5 text-xs shadow-sm backdrop-blur">
-            <span className="text-muted-foreground">
-              Blank canvas — saved scenes are under Scenes (not this page).
-            </span>
+            <span className="text-muted-foreground">{t('editor.localWarning')}</span>
             <Link
               className="pointer-events-auto font-medium text-foreground hover:underline"
               href="/scenes"
             >
-              Open saved scenes
+              {t('editor.openSavedScenes')}
             </Link>
           </div>
         </div>

apps/editor/app/scenes/layout.tsx

@@ -0,0 +1,7 @@
+export default function ScenesLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <div className="dark min-h-screen bg-background">{children}</div>
+}

apps/editor/app/scenes/page.tsx

@@ -2,6 +2,7 @@ import { headers } from 'next/headers'
 import Link from 'next/link'
 import { CreateSceneButton } from '@/components/save-button'
 import type { SceneMeta } from '@/components/scene-loader'
+import { ScenesList } from './scenes-list'
 
 export const dynamic = 'force-dynamic'
 
@@ -20,98 +21,25 @@ async function resolveBaseUrl(): Promise<string> {
 
 async function fetchScenes(): Promise<SceneMeta[]> {
   const base = await resolveBaseUrl()
-  const response = await fetch(`${base}/api/scenes?limit=50`, {
-    cache: 'no-store',
-  })
-  if (!response.ok) {
-    return []
-  }
-  const payload = (await response.json()) as { scenes?: SceneMeta[] } | SceneMeta[]
-  if (Array.isArray(payload)) {
-    return payload
-  }
-  return payload.scenes ?? []
-}
-
-function formatDate(iso: string): string {
   try {
-    return new Date(iso).toLocaleString()
+    const response = await fetch(`${base}/api/scenes?limit=50`, {
+      cache: 'no-store',
+    })
+    if (!response.ok) {
+      return []
+    }
+    const payload = (await response.json()) as { scenes?: SceneMeta[] } | SceneMeta[]
+    if (Array.isArray(payload)) {
+      return payload
+    }
+    return payload.scenes ?? []
   } catch {
-    return iso
+    return []
   }
 }
 
 export default async function ScenesPage() {
   const scenes = await fetchScenes()
 
-  return (
-    <div className="min-h-screen bg-background">
-      <header className="sticky top-0 z-10 border-border border-b bg-background/95 backdrop-blur">
-        <div className="container mx-auto flex items-center justify-between gap-4 px-6 py-4">
-          <nav className="flex items-center gap-4 text-sm">
-            <Link
-              className="text-muted-foreground transition-colors hover:text-foreground"
-              href="/"
-            >
-              Home
-            </Link>
-            <span className="text-muted-foreground">/</span>
-            <span className="font-medium text-foreground">Scenes</span>
-          </nav>
-          <CreateSceneButton />
-        </div>
-      </header>
-
-      <main className="container mx-auto max-w-5xl px-6 py-12">
-        <h1 className="mb-2 font-bold text-3xl">Your scenes</h1>
-        <p className="mb-8 text-muted-foreground text-sm">
-          {scenes.length === 0
-            ? 'No scenes yet. Create one to get started.'
-            : `${scenes.length} scene${scenes.length === 1 ? '' : 's'}.`}
-        </p>
-
-        {scenes.length === 0 ? (
-          <div className="rounded-xl border border-border/60 border-dashed bg-background p-12 text-center">
-            <p className="text-muted-foreground text-sm">You haven&apos;t saved any scenes yet.</p>
-            <div className="mt-4 flex justify-center">
-              <CreateSceneButton />
-            </div>
-          </div>
-        ) : (
-          <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {scenes.map((scene) => (
-              <li key={scene.id}>
-                <Link
-                  className="group block rounded-xl border border-border/60 bg-background p-4 transition-colors hover:border-border hover:bg-accent/30"
-                  href={`/scene/${scene.id}`}
-                >
-                  <div className="flex aspect-video items-center justify-center overflow-hidden rounded-lg bg-accent/30">
-                    {scene.thumbnailUrl ? (
-                      // eslint-disable-next-line @next/next/no-img-element
-                      <img
-                        alt={scene.name}
-                        className="h-full w-full object-cover"
-                        src={scene.thumbnailUrl}
-                      />
-                    ) : (
-                      <span className="text-muted-foreground text-xs">No thumbnail</span>
-                    )}
-                  </div>
-                  <div className="mt-3">
-                    <h2 className="truncate font-semibold text-sm group-hover:text-foreground">
-                      {scene.name}
-                    </h2>
-                    <div className="mt-1 flex items-center justify-between text-muted-foreground text-xs">
-                      <span>{scene.nodeCount} nodes</span>
-                      <time dateTime={scene.updatedAt}>{formatDate(scene.updatedAt)}</time>
-                    </div>
-                  </div>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        )}
-      </main>
-    </div>
-  )
+  return <ScenesList scenes={scenes} />
 }