feat(view): add viewport activity island

view/App.tsx

@@ -1,8 +1,10 @@
 import type { ImageStudioApp } from "@app/app";
+import { BottomControlsIsland } from "./BottomControlsIsland";
 import { CanvasViewport } from "./CanvasViewport";
 import { ToolOverlay } from "./ToolOverlay";
 import { labelForTool } from "./toolLabels";
 import { useAppState } from "./useAppState";
+import { useViewportActivityIsland } from "./useViewportActivityIsland";
 import "./index.css";
 
 export type AppProps = {
@@ -12,6 +14,7 @@ export type AppProps = {
 export function App({ app }: AppProps) {
   const state = useAppState(app.store);
   const zoomPercent = Math.round(state.editor.viewport.zoom * 100);
+  const viewportActivityIsland = useViewportActivityIsland(state.editor.viewport);
 
   return (
     <main className="relative h-full bg-background text-foreground">
@@ -29,6 +32,14 @@ export function App({ app }: AppProps) {
           dispatch={app.store.dispatch}
         />
       </div>
+      <div className="absolute inset-x-0 bottom-4 z-10 flex justify-center">
+        <BottomControlsIsland
+          viewport={state.editor.viewport}
+          visible={viewportActivityIsland.visible}
+          action={viewportActivityIsland.action}
+          dispatch={app.store.dispatch}
+        />
+      </div>
       <CanvasViewport store={app.store} />
     </main>
   );

view/BottomControlsIsland.tsx

@@ -0,0 +1,84 @@
+import { Minus, CornersOut, Hand, Plus } from "@phosphor-icons/react";
+import { commandIds } from "@commands/ids";
+import type { AppStore } from "@editor/store";
+import type { ViewportState } from "@editor/state";
+
+export type BottomControlsAction = "pan" | "zoom";
+
+export type BottomControlsIslandProps = {
+  viewport: ViewportState;
+  visible: boolean;
+  action: BottomControlsAction;
+  dispatch: AppStore["dispatch"];
+};
+
+export function BottomControlsIsland({ viewport, visible, action, dispatch }: BottomControlsIslandProps) {
+  const zoomPercent = Math.round(viewport.zoom * 100);
+  const x = Math.round(viewport.center.x);
+  const y = Math.round(viewport.center.y);
+
+  return (
+    <div
+      aria-hidden={!visible}
+      className={`flex h-10 min-w-48 items-center justify-center gap-2 rounded-full border border-white/10 bg-black/70 px-2 py-1 text-xs text-white shadow-xl backdrop-blur transition-all duration-200 ${
+        visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
+      }`}
+    >
+      {action === "pan" ? <PanControls x={x} y={y} /> : <ZoomControls zoom={viewport.zoom} zoomPercent={zoomPercent} dispatch={dispatch} />}
+    </div>
+  );
+}
+
+function PanControls({ x, y }: { x: number; y: number }) {
+  return (
+    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
+      <span className={iconSlotClass()}>
+        <Hand size={16} weight="regular" />
+      </span>
+      <Divider />
+      <span className={labelClass()}>X</span>
+      <span className={valueClass()}>{x}</span>
+      <Divider />
+      <span className={labelClass()}>Y</span>
+      <span className={valueClass()}>{y}</span>
+    </div>
+  );
+}
+
+function ZoomControls({ zoom, zoomPercent, dispatch }: { zoom: number; zoomPercent: number; dispatch: AppStore["dispatch"] }) {
+  return (
+    <>
+      <button type="button" className={buttonClass()} aria-label="Zoom out" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom / 1.2 })}>
+        <Minus size={16} weight="regular" />
+      </button>
+      <span className="min-w-14 text-center tabular-nums text-white">{zoomPercent}%</span>
+      <button type="button" className={buttonClass()} aria-label="Zoom in" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom * 1.2 })}>
+        <Plus size={16} weight="regular" />
+      </button>
+      <Divider />
+      <button type="button" className={buttonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => dispatch(commandIds.viewportFitArtboard, undefined)}>
+        <CornersOut size={16} weight="regular" />
+      </button>
+    </>
+  );
+}
+
+function Divider() {
+  return <div className="mx-1 h-4 w-px bg-white/15" />;
+}
+
+function labelClass() {
+  return "text-white/60";
+}
+
+function valueClass() {
+  return "min-w-10 text-center text-white";
+}
+
+function iconSlotClass() {
+  return "grid size-7 place-items-center rounded-full text-white/80";
+}
+
+function buttonClass() {
+  return `${iconSlotClass()} transition hover:bg-white/10 hover:text-white focus:outline-none focus-visible:outline-none`;
+}

view/useViewportActivityIsland.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+import type { ViewportState } from "@editor/state";
+import type { BottomControlsAction } from "./BottomControlsIsland";
+
+export type ViewportActivityIslandState = {
+  visible: boolean;
+  action: BottomControlsAction;
+};
+
+export function useViewportActivityIsland(viewport: ViewportState): ViewportActivityIslandState {
+  const [visible, setVisible] = useState(false);
+  const [action, setAction] = useState<BottomControlsAction>("zoom");
+  const previousViewport = useRef({ zoom: viewport.zoom, center: viewport.center });
+
+  useEffect(() => {
+    const previous = previousViewport.current;
+    const zoomChanged = previous.zoom !== viewport.zoom;
+    const centerChanged = previous.center.x !== viewport.center.x || previous.center.y !== viewport.center.y;
+
+    if (!zoomChanged && !centerChanged) return;
+
+    previousViewport.current = { zoom: viewport.zoom, center: viewport.center };
+    setAction(zoomChanged ? "zoom" : "pan");
+    setVisible(true);
+
+    const timeout = window.setTimeout(() => setVisible(false), 1200);
+    return () => window.clearTimeout(timeout);
+  }, [viewport.center, viewport.zoom]);
+
+  return { visible, action };
+}