From a8f965cf0e3d330f69d322674cd076abc71b9c7a Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Thu, 2 Apr 2026 23:01:41 +0200
Subject: [PATCH] Simplify viewport caption and update tool preview handling

---
 src/app/App.tsx                      | 35 +++++++++++++++++-----------
 src/viewport-three/ViewportPanel.tsx | 18 ++++++++++----
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 23311b17..9e7397f9 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -205,24 +205,17 @@ function formatDiagnosticCount(count: number, label: string): string {
 
 function getViewportCaption(
   toolMode: "select" | "box-create" | "play",
-  layoutMode: ViewportLayoutMode,
-  activePanelId: ViewportPanelId,
-  activePanelState: { viewMode: ViewportViewMode; displayMode: ViewportDisplayMode },
-  brushCount: number
+  layoutMode: ViewportLayoutMode
 ): string {
   if (toolMode === "play") {
     return "Runner is active.";
   }
 
-  const layoutLabel = getViewportLayoutModeLabel(layoutMode);
-  const panelLabel = getViewportPanelLabel(activePanelId);
-  const panelSummary = `${getViewportViewModeLabel(activePanelState.viewMode)} / ${getViewportDisplayModeLabel(activePanelState.displayMode)}`;
-
   if (toolMode === "box-create") {
-    return `${brushCount} box brush${brushCount === 1 ? "" : "es"} loaded. ${layoutLabel} active. Box Create uses the active panel. Active panel: ${panelLabel} (${panelSummary}).`;
+    return `${getViewportLayoutModeLabel(layoutMode)} active. Hover any viewport to update the shared preview; click to place.`;
   }
 
-  return `${brushCount} box brush${brushCount === 1 ? "" : "es"} loaded. ${layoutLabel} active. Active panel: ${panelLabel} (${panelSummary}).`;
+  return `${getViewportLayoutModeLabel(layoutMode)} active.`;
 }
 
 function createVec2Draft(vector: Vec2): Vec2Draft {
@@ -736,6 +729,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
   const activePanelState = editorState.viewportPanels[activePanelId];
   const activePanelLabel = getViewportPanelLabel(activePanelId);
   const activePanelDisplaySummary = `${getViewportViewModeLabel(activePanelState.viewMode)} / ${getViewportDisplayModeLabel(activePanelState.displayMode)}`;
+  const viewportToolPreview = editorState.viewportTransientState.toolPreview;
   const entityList = getEntityInstances(editorState.document.entities);
   const entityDisplayList = getSortedEntityDisplayLabels(editorState.document.entities, editorState.document.assets);
   const primaryPlayerStart = getPrimaryPlayerStartEntity(editorState.document.entities);
@@ -1304,6 +1298,14 @@ export function App({ store, initialStatusMessage }: AppProps) {
       return;
     }
 
+    if (
+      nextLayoutMode === "single" &&
+      editorState.viewportTransientState.toolPreview.kind === "box-create" &&
+      editorState.viewportTransientState.toolPreview.sourcePanelId !== activePanelId
+    ) {
+      store.clearViewportToolPreview(editorState.viewportTransientState.toolPreview.sourcePanelId);
+    }
+
     blurActiveTextEntry();
     store.setViewportLayoutMode(nextLayoutMode);
     setStatusMessage(`Switched the viewport to ${getViewportLayoutModeLabel(nextLayoutMode)}.`);
@@ -1326,6 +1328,14 @@ export function App({ store, initialStatusMessage }: AppProps) {
 
     blurActiveTextEntry();
     store.setViewportPanelViewMode(panelId, nextViewMode);
+
+    if (
+      editorState.viewportTransientState.toolPreview.kind === "box-create" &&
+      editorState.viewportTransientState.toolPreview.sourcePanelId === panelId
+    ) {
+      store.clearViewportToolPreview(panelId);
+    }
+
     setStatusMessage(`Set the ${getViewportPanelLabel(panelId)} panel to ${getViewportViewModeLabel(nextViewMode)} view.`);
   };
 
@@ -4082,9 +4092,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
           <div className="viewport-region__header">
             <div className="viewport-region__meta">
               <div className="viewport-region__title">Viewport</div>
-              <div className="viewport-region__caption">
-                {getViewportCaption(editorState.toolMode, layoutMode, activePanelId, activePanelState, brushList.length)}
-              </div>
+              <div className="viewport-region__caption">{getViewportCaption(editorState.toolMode, layoutMode)}</div>
               <div className="viewport-region__active-panel" data-testid="viewport-active-panel">
                 Active panel: {activePanelLabel} ({activePanelDisplaySummary})
               </div>
@@ -4119,6 +4127,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
                 loadedImageAssets={loadedImageAssets}
                 selection={editorState.selection}
                 toolMode={editorState.toolMode}
+                toolPreview={viewportToolPreview}
                 focusRequestId={focusRequest.panelId === panelId ? focusRequest.id : 0}
                 focusSelection={focusRequest.selection}
                 onActivatePanel={handleActivateViewportPanel}
diff --git a/src/viewport-three/ViewportPanel.tsx b/src/viewport-three/ViewportPanel.tsx
index b21b1313..cb79c25e 100644
--- a/src/viewport-three/ViewportPanel.tsx
+++ b/src/viewport-three/ViewportPanel.tsx
@@ -8,6 +8,7 @@ import {
   type ViewportPanelState
 } from "./viewport-layout";
 import { VIEWPORT_VIEW_MODES, getViewportViewModeLabel, type ViewportViewMode } from "./viewport-view-modes";
+import type { ViewportToolPreview } from "./viewport-transient-state";
 import type { LoadedModelAsset } from "../assets/gltf-model-import";
 import type { LoadedImageAsset } from "../assets/image-assets";
 import type { ProjectAssetRecord } from "../assets/project-assets";
@@ -29,11 +30,13 @@ interface ViewportPanelProps {
   loadedImageAssets: Record<string, LoadedImageAsset>;
   selection: EditorSelection;
   toolMode: ToolMode;
+  toolPreview: ViewportToolPreview;
   focusRequestId: number;
   focusSelection: EditorSelection;
   onActivatePanel(panelId: ViewportPanelId): void;
   onSetPanelViewMode(panelId: ViewportPanelId, viewMode: ViewportViewMode): void;
   onSetPanelDisplayMode(panelId: ViewportPanelId, displayMode: ViewportDisplayMode): void;
+  onToolPreviewChange(toolPreview: ViewportToolPreview): void;
   onSelectionChange(selection: EditorSelection): void;
   onCreateBoxBrush(center: Vec3): void;
 }
@@ -50,11 +53,13 @@ export function ViewportPanel({
   loadedImageAssets,
   selection,
   toolMode,
+  toolPreview,
   focusRequestId,
   focusSelection,
   onActivatePanel,
   onSetPanelViewMode,
   onSetPanelDisplayMode,
+  onToolPreviewChange,
   onSelectionChange,
   onCreateBoxBrush
 }: ViewportPanelProps) {
@@ -62,7 +67,7 @@ export function ViewportPanel({
 
   return (
     <section
-      className={`viewport-panel ${layoutMode === "single" ? "viewport-panel--single" : "viewport-panel--quad"} ${isActive ? "viewport-panel--active" : ""}`}
+      className={`viewport-panel ${layoutMode === "single" ? "viewport-panel--single" : "viewport-panel--quad viewport-panel--compact"} ${isActive ? "viewport-panel--active" : ""}`}
       data-testid={`viewport-panel-${panelId}`}
       data-active={isActive ? "true" : "false"}
       aria-hidden={shouldShow ? undefined : true}
@@ -77,9 +82,11 @@ export function ViewportPanel({
             <div className="viewport-panel__title">{getViewportPanelLabel(panelId)}</div>
             {isActive ? <div className="viewport-panel__active-badge">Active</div> : null}
           </div>
-          <div className="viewport-panel__subtitle">
-            {getViewportViewModeLabel(panelState.viewMode)} / {getViewportDisplayModeLabel(panelState.displayMode)}
-          </div>
+          {layoutMode === "quad" ? null : (
+            <div className="viewport-panel__subtitle">
+              {getViewportViewModeLabel(panelState.viewMode)} / {getViewportDisplayModeLabel(panelState.displayMode)}
+            </div>
+          )}
         </div>
 
         <div className="viewport-panel__controls">
@@ -124,13 +131,16 @@ export function ViewportPanel({
         loadedImageAssets={loadedImageAssets}
         selection={selection}
         toolMode={toolMode}
+        toolPreview={toolPreview}
         viewMode={panelState.viewMode}
         displayMode={panelState.displayMode}
+        layoutMode={layoutMode}
         isActivePanel={isActive}
         focusRequestId={focusRequestId}
         focusSelection={focusSelection}
         onSelectionChange={onSelectionChange}
         onCreateBoxBrush={onCreateBoxBrush}
+        onToolPreviewChange={onToolPreviewChange}
       />
     </section>
   );