feat(view): add contextual layer controls

view/bottom-controls/ZoomControls.tsx

@@ -0,0 +1,29 @@
+import { Minus, CornersOut, Plus } from "@phosphor-icons/react";
+import { commandIds } from "@commands/ids";
+import type { AppStore } from "@editor/store";
+import { BottomControlDivider } from "./Divider";
+import { bottomControlButtonClass } from "./styles";
+
+export type ZoomControlsProps = {
+  zoom: number;
+  zoomPercent: number;
+  dispatch: AppStore["dispatch"];
+};
+
+export function ZoomControls({ zoom, zoomPercent, dispatch }: ZoomControlsProps) {
+  return (
+    <>
+      <button type="button" className={bottomControlButtonClass()} 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={bottomControlButtonClass()} aria-label="Zoom in" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom * 1.2 })}>
+        <Plus size={16} weight="regular" />
+      </button>
+      <BottomControlDivider />
+      <button type="button" className={bottomControlButtonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => dispatch(commandIds.viewportFitArtboard, undefined)}>
+        <CornersOut size={16} weight="regular" />
+      </button>
+    </>
+  );
+}