Add pan tool toolbar

view/ToolOverlay.tsx

@@ -0,0 +1,57 @@
+import { Cursor, Hand } from "@phosphor-icons/react";
+import type { AppStore } from "@editor/store";
+import type { InteractionMode, ToolId } from "@editor/tools";
+import { availableToolIds } from "@editor/tools";
+import { labelForTool } from "./toolLabels";
+
+export type ToolOverlayProps = {
+  activeTool: ToolId;
+  interactionMode: InteractionMode;
+  dispatch: AppStore["dispatch"];
+};
+
+export function ToolOverlay({ activeTool, interactionMode, dispatch }: ToolOverlayProps) {
+  return (
+    <nav
+      aria-label="Tools"
+      className="pointer-events-auto flex flex-col gap-1 rounded-lg border border-white/10 bg-black/70 p-1 text-white shadow-xl backdrop-blur"
+    >
+      {availableToolIds.map((tool) => {
+        const active = isToolHighlighted(tool, activeTool, interactionMode);
+        const Icon = iconForTool(tool);
+
+        return (
+          <button
+            key={tool}
+            type="button"
+            aria-label={labelForTool(tool)}
+            aria-pressed={active}
+            title={labelForTool(tool)}
+            className={buttonClass(active)}
+            onClick={() => dispatch("tool.setActive", { tool })}
+          >
+            <Icon size={22} weight={active ? "fill" : "regular"} />
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
+
+function iconForTool(tool: ToolId) {
+  switch (tool) {
+    case "pan":
+      return Hand;
+    case "select":
+      return Cursor;
+  }
+}
+
+function isToolHighlighted(tool: ToolId, activeTool: ToolId, interactionMode: InteractionMode) {
+  if (interactionMode.type === "temporary-pan") return tool === "pan";
+  return activeTool === tool;
+}
+
+function buttonClass(active: boolean) {
+  return `grid size-9 place-items-center rounded-md transition focus:outline-none focus-visible:outline-none ${active ? "bg-white text-black" : "text-white/80 hover:bg-white/10 hover:text-white"}`;
+}