@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/viewer/viewer-controls-bar.tsx

@@ -1,31 +1,25 @@
 'use client'
 
-import { emitter } from '@pascal-app/core'
+import { emitter, type PascalI18n, usePascalI18n } from '@pascal-app/core'
+import { CLAY_PALETTE, getSceneTheme, SCENE_THEMES, useViewer } from '@pascal-app/viewer'
 import {
-  CLAY_PALETTE,
-  type EdgeMode,
-  getSceneTheme,
-  SCENE_THEMES,
-  useViewer,
-} from '@pascal-app/viewer'
-import {
-  Box,
   Camera,
   Check,
   Contrast,
   Diamond,
+  Drone,
   Eye,
   EyeOff,
   Footprints,
   Layers,
   Layers2,
   Palette,
-  PenLine,
   SlidersHorizontal,
-  Sparkles,
   Square,
   SwatchBook,
 } from 'lucide-react'
+import { useIsMobile } from '../../hooks/use-mobile'
+import { sceneThemeName } from '../../i18n/scene-theme-name'
 import { cn } from '../../lib/utils'
 import { ActionButton } from '../ui/action-menu/action-button'
 import { FollowPascalToggle } from '../ui/action-menu/follow-pascal-toggle'
@@ -40,44 +34,36 @@ import {
   DropdownMenuTrigger,
 } from '../ui/primitives/dropdown-menu'
 import { TooltipProvider } from '../ui/primitives/tooltip'
-
-const levelModeLabels: Record<'stacked' | 'exploded' | 'solo', string> = {
-  stacked: 'Stacked',
-  exploded: 'Exploded',
-  solo: 'Solo',
-}
+import { DaylightMenu, EdgesToggleItem, QualityMenu } from './render-settings-menu'
+import { SKY_DOCK_HEIGHT, SkyControl } from './sky-control'
 
 const wallModeConfig = {
   up: {
-    icon: (props: any) => (
-      <img alt="Full height" height={28} src="/icons/room.webp" width={28} {...props} />
-    ),
-    label: 'Full height',
+    icon: '/icons/room.webp',
   },
   cutaway: {
-    icon: (props: any) => (
-      <img alt="Cutaway" height={28} src="/icons/wallcut.webp" width={28} {...props} />
-    ),
-    label: 'Cutaway',
+    icon: '/icons/wallcut.webp',
   },
   down: {
-    icon: (props: any) => (
-      <img alt="Low" height={28} src="/icons/walllow.webp" width={28} {...props} />
-    ),
-    label: 'Low',
+    icon: '/icons/walllow.webp',
   },
-}
+} as const
 
-const SHADING_OPTIONS = [
-  { id: 'solid', name: 'Solid', detail: 'Flat and fast — no ambient occlusion', icon: Box },
-  { id: 'rendered', name: 'Rendered', detail: 'Full ambient occlusion', icon: Sparkles },
-] as const
+function levelModeLabel(
+  mode: 'stacked' | 'exploded' | 'solo' | 'manual',
+  i18n: PascalI18n,
+): string {
+  if (mode === 'stacked') return i18n._({ id: 'viewer.levels.stacked', message: 'Stacked' })
+  if (mode === 'exploded') return i18n._({ id: 'viewer.levels.exploded', message: 'Exploded' })
+  if (mode === 'solo') return i18n._({ id: 'viewer.levels.solo', message: 'Solo' })
+  return i18n._({ id: 'viewer.levels.manual', message: 'Manual' })
+}
 
-const EDGE_OPTIONS = [
-  { id: 'off', name: 'Off', detail: 'No edge lines' },
-  { id: 'soft', name: 'Soft', detail: 'Faint outline of major creases' },
-  { id: 'strong', name: 'Strong', detail: 'Crisp, opaque edge lines' },
-] as const satisfies readonly { id: EdgeMode; name: string; detail: string }[]
+function wallModeLabel(mode: keyof typeof wallModeConfig, i18n: PascalI18n): string {
+  if (mode === 'up') return i18n._({ id: 'viewer.walls.fullHeight', message: 'Full height' })
+  if (mode === 'down') return i18n._({ id: 'viewer.walls.low', message: 'Low' })
+  return i18n._({ id: 'viewer.walls.cutaway', message: 'Cutaway' })
+}
 
 // Keep the dropdown open when flipping an in-place toggle row.
 const keepOpen = (event: Event, fn: () => void) => {
@@ -95,6 +81,7 @@ function VisibilityMenu({
   canShowScans: boolean
   canShowGuides: boolean
 }) {
+  const i18n = usePascalI18n()
   const showScans = useViewer((s) => s.showScans)
   const showGuides = useViewer((s) => s.showGuides)
   return (
@@ -102,7 +89,7 @@ function VisibilityMenu({
       <DropdownMenuTrigger asChild>
         <ActionButton
           className="hover:bg-white/5 hover:text-foreground"
-          label="Visibility"
+          label={i18n._({ id: 'viewer.visibility.title', message: 'Visibility' })}
           size="icon"
           tooltipClassName="dark"
           tooltipSide="top"
@@ -117,7 +104,7 @@ function VisibilityMenu({
             onSelect={(e) => keepOpen(e, () => useViewer.getState().setShowScans(!showScans))}
           >
             <img alt="" className="h-4 w-4 object-contain" src="/icons/mesh.webp" />
-            <span>Scans</span>
+            <span>{i18n._({ id: 'viewer.visibility.scans', message: 'Scans' })}</span>
             {showScans ? (
               <Eye className="ml-auto h-4 w-4 text-foreground" />
             ) : (
@@ -130,7 +117,7 @@ function VisibilityMenu({
             onSelect={(e) => keepOpen(e, () => useViewer.getState().setShowGuides(!showGuides))}
           >
             <img alt="" className="h-4 w-4 object-contain" src="/icons/floorplan.webp" />
-            <span>Guides</span>
+            <span>{i18n._({ id: 'viewer.visibility.guides', message: 'Guides' })}</span>
             {showGuides ? (
               <Eye className="ml-auto h-4 w-4 text-foreground" />
             ) : (
@@ -146,21 +133,18 @@ function VisibilityMenu({
 // One "Display" button gathering shadows, camera projection, colors, render
 // mode, scene theme and edges.
 function DisplayMenu() {
+  const i18n = usePascalI18n()
   const cameraMode = useViewer((s) => s.cameraMode)
-  const shading = useViewer((s) => s.shading)
   const textures = useViewer((s) => s.textures)
   const shadows = useViewer((s) => s.shadows)
   const sceneTheme = useViewer((s) => s.sceneTheme)
-  const edges = useViewer((s) => s.edges)
-  const activeShading = SHADING_OPTIONS.find((o) => o.id === shading) ?? SHADING_OPTIONS[0]
   const activeTheme = getSceneTheme(sceneTheme)
-  const activeEdges = EDGE_OPTIONS.find((o) => o.id === edges) ?? EDGE_OPTIONS[0]
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <ActionButton
           className="hover:bg-white/5 hover:text-foreground"
-          label="Display settings"
+          label={i18n._({ id: 'viewer.display.title', message: 'Display settings' })}
           size="icon"
           tooltipClassName="dark"
           tooltipSide="top"
@@ -174,8 +158,12 @@ function DisplayMenu() {
           onSelect={(e) => keepOpen(e, () => useViewer.getState().setShadows(!shadows))}
         >
           <Contrast className="h-4 w-4" />
-          <span>Shadows</span>
-          <span className="ml-auto text-muted-foreground text-xs">{shadows ? 'On' : 'Off'}</span>
+          <span>{i18n._({ id: 'viewer.display.shadows', message: 'Shadows' })}</span>
+          <span className="ml-auto text-muted-foreground text-xs">
+            {shadows
+              ? i18n._({ id: 'viewer.common.on', message: 'On' })
+              : i18n._({ id: 'viewer.common.off', message: 'Off' })}
+          </span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onSelect={(e) =>
@@ -187,107 +175,70 @@ function DisplayMenu() {
           }
         >
           <Camera className="h-4 w-4" />
-          <span>Camera</span>
+          <span>{i18n._({ id: 'viewer.display.camera', message: 'Camera' })}</span>
           <span className="ml-auto text-muted-foreground text-xs">
-            {cameraMode === 'perspective' ? 'Perspective' : 'Orthographic'}
+            {cameraMode === 'perspective'
+              ? i18n._({ id: 'viewer.display.perspective', message: 'Perspective' })
+              : i18n._({ id: 'viewer.display.orthographic', message: 'Orthographic' })}
           </span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onSelect={(e) => keepOpen(e, () => useViewer.getState().setTextures(!textures))}
         >
           {textures ? <Palette className="h-4 w-4" /> : <Square className="h-4 w-4" />}
-          <span>Colors</span>
+          <span>{i18n._({ id: 'viewer.display.colors', message: 'Colors' })}</span>
           <span className="ml-auto text-muted-foreground text-xs">
-            {textures ? 'Colored' : 'Monochrome'}
+            {textures
+              ? i18n._({ id: 'viewer.display.colored', message: 'Colored' })
+              : i18n._({ id: 'viewer.display.monochrome', message: 'Monochrome' })}
           </span>
         </DropdownMenuItem>
 
         <DropdownMenuSeparator />
 
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            <activeShading.icon className="h-4 w-4" />
-            <span>Render</span>
-            <span className="ml-auto text-muted-foreground text-xs">{activeShading.name}</span>
-          </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="dark min-w-56">
-            {SHADING_OPTIONS.map((option) => {
-              const OptionIcon = option.icon
-              return (
-                <DropdownMenuItem
-                  key={option.id}
-                  onSelect={() => useViewer.getState().setShading(option.id)}
-                >
-                  <OptionIcon className="h-4 w-4" />
-                  <div className="flex flex-col">
-                    <span className="text-foreground">{option.name}</span>
-                    <span className="text-muted-foreground text-xs">{option.detail}</span>
-                  </div>
-                  {shading === option.id ? (
-                    <Check className="ml-auto h-4 w-4 text-foreground" />
-                  ) : null}
-                </DropdownMenuItem>
-              )
-            })}
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
+        <QualityMenu subContentClassName="dark min-w-56" />
 
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            <SwatchBook className="h-4 w-4" />
-            <span>Scene theme</span>
-            <span className="ml-auto truncate text-muted-foreground text-xs">
-              {activeTheme.name}
-            </span>
-          </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="dark min-w-48">
-            {SCENE_THEMES.map((t) => {
-              const swatches = (['wall', 'roof', 'floor', 'glazing'] as const).map(
-                (role) => t.clayTints?.[role] ?? CLAY_PALETTE[role],
-              )
-              return (
-                <DropdownMenuItem
-                  className="gap-2"
-                  key={t.id}
-                  onSelect={() => useViewer.getState().setSceneTheme(t.id)}
-                >
-                  <span
-                    className="grid h-5 w-5 shrink-0 grid-cols-2 overflow-hidden rounded-sm border border-black/10"
-                    style={{ backgroundColor: t.background }}
-                  >
-                    {swatches.map((color, index) => (
-                      <span key={`${t.id}-${index}`} style={{ backgroundColor: color }} />
-                    ))}
-                  </span>
-                  <span>{t.name}</span>
-                  {sceneTheme === t.id ? <Check className="ml-auto h-4 w-4" /> : null}
-                </DropdownMenuItem>
-              )
-            })}
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            <PenLine className="h-4 w-4" />
-            <span>Edges</span>
-            <span className="ml-auto text-muted-foreground text-xs">{activeEdges.name}</span>
-          </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="dark min-w-56">
-            {EDGE_OPTIONS.map((option) => (
-              <DropdownMenuItem
-                key={option.id}
-                onSelect={() => useViewer.getState().setEdges(option.id)}
-              >
-                <div className="flex flex-col">
-                  <span className="text-foreground">{option.name}</span>
-                  <span className="text-muted-foreground text-xs">{option.detail}</span>
-                </div>
-                {edges === option.id ? <Check className="ml-auto h-4 w-4 text-foreground" /> : null}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
+        {textures ? (
+          <DaylightMenu subContentClassName="dark min-w-48" />
+        ) : (
+          <>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <SwatchBook className="h-4 w-4" />
+                <span>{i18n._({ id: 'viewer.theme.title', message: 'Scene theme' })}</span>
+                <span className="ml-auto truncate text-muted-foreground text-xs">
+                  {sceneThemeName(activeTheme.id, activeTheme.name, i18n)}
+                </span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="dark min-w-48">
+                {SCENE_THEMES.map((theme) => {
+                  const swatches = (['wall', 'roof', 'floor', 'glazing'] as const).map(
+                    (role) => theme.clayTints?.[role] ?? CLAY_PALETTE[role],
+                  )
+                  return (
+                    <DropdownMenuItem
+                      className="gap-2"
+                      key={theme.id}
+                      onSelect={() => useViewer.getState().setSceneTheme(theme.id)}
+                    >
+                      <span
+                        className="grid h-5 w-5 shrink-0 grid-cols-2 overflow-hidden rounded-sm border border-black/10"
+                        style={{ backgroundColor: theme.background }}
+                      >
+                        {swatches.map((color, index) => (
+                          <span key={`${theme.id}-${index}`} style={{ backgroundColor: color }} />
+                        ))}
+                      </span>
+                      <span>{sceneThemeName(theme.id, theme.name, i18n)}</span>
+                      {sceneTheme === theme.id ? <Check className="ml-auto h-4 w-4" /> : null}
+                    </DropdownMenuItem>
+                  )
+                })}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <EdgesToggleItem />
+          </>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   )
@@ -306,6 +257,9 @@ export type ViewerControlsBarProps = {
   glbHasGuides?: boolean
   walkthroughActive?: boolean
   onWalkthroughToggle: () => void
+  /** The free-flying drone camera; its button shows only with a handler, and never on touch. */
+  droneActive?: boolean
+  onDroneToggle?: () => void
   className?: string
 }
 
@@ -317,162 +271,226 @@ export const ViewerControlsBar = ({
   glbHasGuides = false,
   walkthroughActive = false,
   onWalkthroughToggle,
+  droneActive = false,
+  onDroneToggle,
   className,
 }: ViewerControlsBarProps) => {
+  const i18n = usePascalI18n()
   const levelMode = useViewer((s) => s.levelMode)
   const wallMode = useViewer((s) => s.wallMode)
+  const textures = useViewer((s) => s.textures)
+  const isMobile = useIsMobile()
   // Sessions may carry a stale mode outside the cycle (e.g. the retired
   // 'translucent'); render and cycle it as cutaway instead of crashing.
   const safeWallMode = (
     wallMode in wallModeConfig ? wallMode : 'cutaway'
   ) as keyof typeof wallModeConfig
-  const WallModeIcon = wallModeConfig[safeWallMode].icon
 
   return (
-    <div
-      className={cn(
-        'dark absolute bottom-4 left-1/2 z-20 -translate-x-1/2 text-foreground sm:bottom-6',
-        className,
-      )}
-    >
-      <TooltipProvider delayDuration={0}>
-        <div className="corner-smooth pointer-events-auto flex h-12 max-w-[calc(100vw-1rem)] flex-row items-center justify-center gap-0.5 overflow-hidden rounded-2xl border border-border/40 bg-background/95 p-1 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out sm:h-14 sm:gap-1.5 sm:p-1.5">
-          {((canShowScans && (!glbActive || glbHasScans)) ||
-            (canShowGuides && (!glbActive || glbHasGuides))) && (
-            <>
-              <VisibilityMenu
-                canShowGuides={canShowGuides && (!glbActive || glbHasGuides)}
-                canShowScans={canShowScans && (!glbActive || glbHasScans)}
-              />
-              <div className="mx-1 h-5 w-px bg-border/40" />
-            </>
-          )}
-
-          {/* Level mode */}
-          <ActionButton
-            className={
-              levelMode === 'stacked'
-                ? 'hover:bg-white/5 hover:text-amber-400'
-                : 'bg-amber-500/20 text-amber-400'
-            }
-            label={`Levels: ${levelMode === 'manual' ? 'Manual' : levelModeLabels[levelMode as keyof typeof levelModeLabels]}`}
-            onClick={() => {
-              if (levelMode === 'manual') return useViewer.getState().setLevelMode('stacked')
-              const modes: ('stacked' | 'exploded' | 'solo')[] = ['stacked', 'exploded', 'solo']
-              const nextIndex = (modes.indexOf(levelMode as any) + 1) % modes.length
-              useViewer.getState().setLevelMode(modes[nextIndex] ?? 'stacked')
-            }}
-            size="icon"
-            tooltipClassName="dark"
-            tooltipSide="top"
-            variant="ghost"
+    <>
+      {textures && !isMobile ? (
+        // The sky (time and weather) beside the compass in the scene's bottom-left corner.
+        <SkyControl dark height={SKY_DOCK_HEIGHT.viewer} style={{ left: 52 }} />
+      ) : null}
+      <div
+        className={cn(
+          'dark absolute bottom-4 left-1/2 z-20 -translate-x-1/2 text-foreground sm:bottom-6',
+          className,
+        )}
+      >
+        <TooltipProvider delayDuration={0}>
+          <div
+            data-surface="viewer-dock"
+            className="corner-smooth pointer-events-auto flex h-12 max-w-[calc(100vw-1rem)] flex-row items-center justify-center gap-0.5 overflow-hidden rounded-2xl border border-border/40 bg-background/95 p-1 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out sm:h-14 sm:gap-1.5 sm:p-1.5"
           >
-            {levelMode === 'solo' && <Diamond className="h-6 w-6" />}
-            {levelMode === 'exploded' && <Layers2 className="h-6 w-6" />}
-            {(levelMode === 'stacked' || levelMode === 'manual') && <Layers className="h-6 w-6" />}
-          </ActionButton>
+            {((canShowScans && (!glbActive || glbHasScans)) ||
+              (canShowGuides && (!glbActive || glbHasGuides))) && (
+              <>
+                <VisibilityMenu
+                  canShowGuides={canShowGuides && (!glbActive || glbHasGuides)}
+                  canShowScans={canShowScans && (!glbActive || glbHasScans)}
+                />
+                <div className="mx-1 h-5 w-px bg-border/40" />
+              </>
+            )}
 
-          {/* Wall mode — parametric only; baked GLB walls are fixed-height. */}
-          {!glbActive && (
+            {/* Level mode */}
             <ActionButton
               className={
-                safeWallMode === 'cutaway'
-                  ? 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0'
-                  : 'bg-white/10'
+                levelMode === 'stacked'
+                  ? 'hover:bg-white/5 hover:text-amber-400'
+                  : 'bg-amber-500/20 text-amber-400'
               }
-              label={`Walls: ${wallModeConfig[safeWallMode].label}`}
+              label={i18n._({
+                id: 'viewer.levels.label',
+                message: 'Levels: {mode}',
+                values: { mode: levelModeLabel(levelMode, i18n) },
+              })}
               onClick={() => {
-                const modes: ('cutaway' | 'up' | 'down')[] = ['cutaway', 'up', 'down']
-                const nextIndex = (modes.indexOf(safeWallMode) + 1) % modes.length
-                useViewer.getState().setWallMode(modes[nextIndex] ?? 'cutaway')
+                if (levelMode === 'manual') return useViewer.getState().setLevelMode('stacked')
+                const modes: ('stacked' | 'exploded' | 'solo')[] = ['stacked', 'exploded', 'solo']
+                const nextIndex = (modes.indexOf(levelMode as any) + 1) % modes.length
+                useViewer.getState().setLevelMode(modes[nextIndex] ?? 'stacked')
               }}
               size="icon"
               tooltipClassName="dark"
               tooltipSide="top"
               variant="ghost"
             >
-              <WallModeIcon className="h-[28px] w-[28px]" />
+              {levelMode === 'solo' && <Diamond className="h-6 w-6" />}
+              {levelMode === 'exploded' && <Layers2 className="h-6 w-6" />}
+              {(levelMode === 'stacked' || levelMode === 'manual') && (
+                <Layers className="h-6 w-6" />
+              )}
             </ActionButton>
-          )}
 
-          <div className="mx-1 h-5 w-px bg-border/40" />
+            {/* Wall mode — parametric only; baked GLB walls are fixed-height. */}
+            {!glbActive && (
+              <ActionButton
+                className={
+                  safeWallMode === 'cutaway'
+                    ? 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0'
+                    : 'bg-white/10'
+                }
+                label={i18n._({
+                  id: 'viewer.walls.label',
+                  message: 'Walls: {mode}',
+                  values: { mode: wallModeLabel(safeWallMode, i18n) },
+                })}
+                onClick={() => {
+                  const modes: ('cutaway' | 'up' | 'down')[] = ['cutaway', 'up', 'down']
+                  const nextIndex = (modes.indexOf(safeWallMode) + 1) % modes.length
+                  useViewer.getState().setWallMode(modes[nextIndex] ?? 'cutaway')
+                }}
+                size="icon"
+                tooltipClassName="dark"
+                tooltipSide="top"
+                variant="ghost"
+              >
+                <img
+                  alt={wallModeLabel(safeWallMode, i18n)}
+                  className="h-[28px] w-[28px]"
+                  height={28}
+                  src={wallModeConfig[safeWallMode].icon}
+                  width={28}
+                />
+              </ActionButton>
+            )}
 
-          <DisplayMenu />
+            <div className="mx-1 h-5 w-px bg-border/40" />
 
-          <div className="mx-1 h-5 w-px bg-border/40" />
+            <DisplayMenu />
 
-          {/* Walkthrough */}
-          <ActionButton
-            className={
-              walkthroughActive
-                ? 'bg-emerald-500/20 text-emerald-400'
-                : 'hover:bg-white/5 hover:text-emerald-400'
-            }
-            label={`Walkthrough: ${walkthroughActive ? 'On' : 'Off'}`}
-            onClick={onWalkthroughToggle}
-            size="icon"
-            tooltipClassName="dark"
-            tooltipSide="top"
-            variant="ghost"
-          >
-            <Footprints className="h-6 w-6" />
-          </ActionButton>
+            <div className="mx-1 h-5 w-px bg-border/40" />
 
-          <div className="mx-1 h-5 w-px bg-border/40" />
+            {/* Walkthrough */}
+            <ActionButton
+              className={
+                walkthroughActive
+                  ? 'bg-emerald-500/20 text-emerald-400'
+                  : 'hover:bg-white/5 hover:text-emerald-400'
+              }
+              label={i18n._({
+                id: 'viewer.walkthrough.label',
+                message: 'Walkthrough: {state}',
+                values: {
+                  state: walkthroughActive
+                    ? i18n._({ id: 'viewer.common.on', message: 'On' })
+                    : i18n._({ id: 'viewer.common.off', message: 'Off' }),
+                },
+              })}
+              onClick={onWalkthroughToggle}
+              size="icon"
+              tooltipClassName="dark"
+              tooltipSide="top"
+              variant="ghost"
+            >
+              <Footprints className="h-6 w-6" />
+            </ActionButton>
 
-          {/* Follow Pascal */}
-          <FollowPascalToggle className="hidden sm:inline-flex" tooltipClassName="dark" />
+            {/* Drone — flying needs a keyboard. */}
+            {onDroneToggle && !isMobile && (
+              <ActionButton
+                className={
+                  droneActive
+                    ? 'bg-emerald-500/20 text-emerald-400'
+                    : 'hover:bg-white/5 hover:text-emerald-400'
+                }
+                label={i18n._({
+                  id: 'viewer.drone.label',
+                  message: 'Drone: {state}',
+                  values: {
+                    state: droneActive
+                      ? i18n._({ id: 'viewer.common.on', message: 'On' })
+                      : i18n._({ id: 'viewer.common.off', message: 'Off' }),
+                  },
+                })}
+                onClick={onDroneToggle}
+                size="icon"
+                tooltipClassName="dark"
+                tooltipSide="top"
+                variant="ghost"
+              >
+                <Drone className="h-6 w-6" />
+              </ActionButton>
+            )}
 
-          {/* Camera actions */}
-          <ActionButton
-            className="group hidden hover:bg-white/5 sm:inline-flex"
-            label="Orbit left"
-            onClick={() => emitter.emit('camera-controls:orbit-ccw')}
-            size="icon"
-            tooltipClassName="dark"
-            tooltipSide="top"
-            variant="ghost"
-          >
-            <img
-              alt="Orbit left"
-              className="h-[28px] w-[28px] -scale-x-100 object-contain opacity-70 transition-opacity group-hover:opacity-100"
-              src="/icons/rotate.webp"
-            />
-          </ActionButton>
+            <div className="mx-1 h-5 w-px bg-border/40" />
 
-          <ActionButton
-            className="group hidden hover:bg-white/5 sm:inline-flex"
-            label="Orbit right"
-            onClick={() => emitter.emit('camera-controls:orbit-cw')}
-            size="icon"
-            tooltipClassName="dark"
-            tooltipSide="top"
-            variant="ghost"
-          >
-            <img
-              alt="Orbit right"
-              className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
-              src="/icons/rotate.webp"
-            />
-          </ActionButton>
+            {/* Follow Pascal */}
+            <FollowPascalToggle className="hidden sm:inline-flex" tooltipClassName="dark" />
 
-          <ActionButton
-            className="group hover:bg-white/5"
-            label="Top view"
-            onClick={() => emitter.emit('camera-controls:top-view')}
-            size="icon"
-            tooltipClassName="dark"
-            tooltipSide="top"
-            variant="ghost"
-          >
-            <img
-              alt="Top view"
-              className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
-              src="/icons/topview.webp"
-            />
-          </ActionButton>
-        </div>
-      </TooltipProvider>
-    </div>
+            {/* Camera actions */}
+            <ActionButton
+              className="group hidden hover:bg-white/5 sm:inline-flex"
+              label={i18n._({ id: 'viewer.camera.orbitLeft', message: 'Orbit left' })}
+              onClick={() => emitter.emit('camera-controls:orbit-ccw')}
+              size="icon"
+              tooltipClassName="dark"
+              tooltipSide="top"
+              variant="ghost"
+            >
+              <img
+                alt={i18n._({ id: 'viewer.camera.orbitLeft', message: 'Orbit left' })}
+                className="h-[28px] w-[28px] -scale-x-100 object-contain opacity-70 transition-opacity group-hover:opacity-100"
+                src="/icons/rotate.webp"
+              />
+            </ActionButton>
+
+            <ActionButton
+              className="group hidden hover:bg-white/5 sm:inline-flex"
+              label={i18n._({ id: 'viewer.camera.orbitRight', message: 'Orbit right' })}
+              onClick={() => emitter.emit('camera-controls:orbit-cw')}
+              size="icon"
+              tooltipClassName="dark"
+              tooltipSide="top"
+              variant="ghost"
+            >
+              <img
+                alt={i18n._({ id: 'viewer.camera.orbitRight', message: 'Orbit right' })}
+                className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
+                src="/icons/rotate.webp"
+              />
+            </ActionButton>
+
+            <ActionButton
+              className="group hover:bg-white/5"
+              label={i18n._({ id: 'viewer.camera.topView', message: 'Top view' })}
+              onClick={() => emitter.emit('camera-controls:top-view')}
+              size="icon"
+              tooltipClassName="dark"
+              tooltipSide="top"
+              variant="ghost"
+            >
+              <img
+                alt={i18n._({ id: 'viewer.camera.topView', message: 'Top view' })}
+                className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
+                src="/icons/topview.webp"
+              />
+            </ActionButton>
+          </div>
+        </TooltipProvider>
+      </div>
+    </>
   )
 }