feat(world-scene): tidy HUD buttons — collapse zoom cluster, swap arrange icon (#65)

- Remove the top-right slider toggle button; rely on the existing
  DevPalette command "Show/Hide world controls" (Cmd+K) as the entry.
- Collapse the three zoom buttons (Zoom in / Zoom out / Reset view)
  into a single "Reset view" button (RotateCcw icon). The +/-/0
  keyboard shortcuts still zoom/reset and are advertised in the
  button's aria-label.
- Swap the arrange-mode icon from Move (4-arrow) to Pencil to match
  the edit-mode semantic.
- Update HUD test: panel-only controls (rain/music/bird) now seeded
  via a Map-backed localStorage stub (matches DevPalette.test.tsx
  pattern). Adds a regression guard asserting the legacy slider toggle
  is absent.

Co-authored-by: Reza Ilmi <reza.ilmi@gt.tech.gov.sg>

Author: rezailmi

src/components/IslandProgressionOverlay.tsx

@@ -1,4 +1,4 @@
-import { Check, Move } from 'lucide-react'
+import { Check, Pencil } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { WorldIconButton } from '~/components/student-space/hud/StudentSpaceHud'
 import type { Game } from '~/engine/student-space/Game'
@@ -189,7 +189,7 @@ export function IslandProgressionOverlay({ game }: { game: Game }) {
         {editMode ? (
           <Check aria-hidden="true" className="size-4" />
         ) : (
-          <Move aria-hidden="true" className="size-4" />
+          <Pencil aria-hidden="true" className="size-4" />
         )}
       </WorldIconButton>
 

src/components/student-space/hud/StudentSpaceHud.tsx

@@ -1,16 +1,4 @@
-import {
-  CloudRain,
-  Gauge,
-  Music2,
-  RotateCcw,
-  SlidersHorizontal,
-  Sparkles,
-  Volume2,
-  VolumeX,
-  X,
-  ZoomIn,
-  ZoomOut,
-} from 'lucide-react'
+import { CloudRain, Gauge, Music2, RotateCcw, Sparkles, Volume2, VolumeX, X } from 'lucide-react'
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { Hud } from '~/components/ui/hud'
@@ -129,25 +117,11 @@ export function StudentSpaceHud({ game }: { game: unknown }) {
   return (
     <>
       <ZoomHud game={typedGame} />
-      {visible ? (
-        <WorldControlsPanel game={typedGame} onClose={() => setVisible(false)} />
-      ) : (
-        <WorldControlsToggle onToggle={() => setVisible(true)} />
-      )}
+      {visible ? <WorldControlsPanel game={typedGame} onClose={() => setVisible(false)} /> : null}
     </>
   )
 }
 
-function WorldControlsToggle({ onToggle }: { onToggle: () => void }) {
-  return (
-    <div className="fixed top-[calc(var(--inset-frame)+12px)] right-[calc(var(--inset-frame)+12px)] z-30">
-      <WorldIconButton label="Show world controls" onClick={onToggle}>
-        <SlidersHorizontal aria-hidden className="size-4" />
-      </WorldIconButton>
-    </div>
-  )
-}
-
 function WorldControlsPanel({ game, onClose }: { game: GameLike; onClose: () => void }) {
   return (
     <Hud
@@ -399,13 +373,11 @@ function ZoomHud({ game }: { game: GameLike }) {
 
   return (
     <div className="fixed right-[calc(var(--inset-frame)+12px)] bottom-[calc(var(--inset-frame)+16px)] z-30 flex flex-col gap-2">
-      <WorldIconButton label="Zoom in" onClick={() => dispatch('zoom-in')}>
-        <ZoomIn aria-hidden className="size-4" />
-      </WorldIconButton>
-      <WorldIconButton label="Zoom out" onClick={() => dispatch('zoom-out')}>
-        <ZoomOut aria-hidden className="size-4" />
-      </WorldIconButton>
-      <WorldIconButton label="Reset view" onClick={() => dispatch('reset')}>
+      <WorldIconButton
+        label="Reset view (+ / − / 0 to zoom)"
+        title="Reset view (+ / − / 0 to zoom)"
+        onClick={() => dispatch('reset')}
+      >
         <RotateCcw aria-hidden className="size-4" />
       </WorldIconButton>
       <WorldIconButton label="Toggle sound" pressed={!muted} onClick={() => dispatch('sound')}>

test/components/student-space/hud/student-space-hud.test.tsx

@@ -1,10 +1,29 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { StudentSpaceHud } from '~/components/student-space/hud/StudentSpaceHud'
 import { EngineOverlayProvider } from '~/lib/student-space/use-engine-overlay'
+import { WORLD_CONTROLS_STORAGE_KEY } from '~/lib/student-space/world-controls-visibility'
 
-function renderHud(engine = makeFakeEngine()) {
+let originalStorageDescriptor: PropertyDescriptor | undefined
+
+function createStorageStub() {
+  const map = new Map<string, string>()
+  return {
+    getItem(key: string) {
+      return map.has(key) ? (map.get(key) ?? null) : null
+    },
+    setItem(key: string, value: string) {
+      map.set(key, String(value))
+    },
+    removeItem(key: string) {
+      map.delete(key)
+    },
+  }
+}
+
+function renderHud(engine = makeFakeEngine(), { panelOpen = false } = {}) {
+  if (panelOpen) window.localStorage.setItem(WORLD_CONTROLS_STORAGE_KEY, '1')
   render(
     <EngineOverlayProvider>
       <StudentSpaceHud game={engine} />
@@ -61,16 +80,29 @@ function makeFakeEngine() {
   }
 }
 
+beforeEach(() => {
+  originalStorageDescriptor = Object.getOwnPropertyDescriptor(window, 'localStorage')
+  Object.defineProperty(window, 'localStorage', {
+    configurable: true,
+    value: createStorageStub(),
+  })
+})
+
 afterEach(() => {
   document.body.className = ''
+  if (originalStorageDescriptor) {
+    Object.defineProperty(window, 'localStorage', originalStorageDescriptor)
+  } else {
+    delete (window as { localStorage?: unknown }).localStorage
+  }
 })
 
 describe('StudentSpaceHud', () => {
   it('renders React HUD controls and dispatches engine actions', async () => {
-    const engine = renderHud()
+    const engine = renderHud(makeFakeEngine(), { panelOpen: true })
 
-    await userEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
-    expect(engine.view.camera.zoomBy).toHaveBeenCalledWith(0.85)
+    await userEvent.click(screen.getByRole('button', { name: /Reset view/ }))
+    expect(engine.view.camera.resetToDefault).toHaveBeenCalled()
 
     await userEvent.click(screen.getByRole('button', { name: 'Toggle sound' }))
     expect(engine.view.sound.toggleMuted).toHaveBeenCalled()
@@ -87,6 +119,11 @@ describe('StudentSpaceHud', () => {
     expect(engine.view.kira.cycleSpecies).toHaveBeenCalledWith(1)
   })
 
+  it('does not render the legacy slider toggle button', () => {
+    renderHud()
+    expect(screen.queryByRole('button', { name: /show world controls/i })).not.toBeInTheDocument()
+  })
+
   it('hides dev-only status and fps controls behind the DevPalette body class', () => {
     document.body.classList.add('is-dev-overlay-hidden')
     renderHud()