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>
   );