feat(view): add contextual layer controls

view/bottom-controls/Divider.tsx

@@ -0,0 +1,5 @@
+import { bottomControlDividerClass } from "./styles";
+
+export function BottomControlDivider() {
+  return <div className={bottomControlDividerClass()} />;
+}

view/bottom-controls/PanControls.tsx

@@ -0,0 +1,24 @@
+import { Hand } from "@phosphor-icons/react";
+import { BottomControlDivider } from "./Divider";
+import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlValueClass } from "./styles";
+
+export type PanControlsProps = {
+  x: number;
+  y: number;
+};
+
+export function PanControls({ x, y }: PanControlsProps) {
+  return (
+    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
+      <span className={bottomControlIconSlotClass()}>
+        <Hand size={16} weight="regular" />
+      </span>
+      <BottomControlDivider />
+      <span className={bottomControlLabelClass()}>X</span>
+      <span className={bottomControlValueClass()}>{x}</span>
+      <BottomControlDivider />
+      <span className={bottomControlLabelClass()}>Y</span>
+      <span className={bottomControlValueClass()}>{y}</span>
+    </div>
+  );
+}

view/bottom-controls/SelectionControls.tsx

@@ -0,0 +1,36 @@
+import { Stack } from "@phosphor-icons/react";
+import type { SelectionSummary } from "../selectionSummary";
+import { BottomControlDivider } from "./Divider";
+import { bottomControlButtonClass } from "./styles";
+
+export type SelectionControlsProps = {
+  selection: SelectionSummary;
+  onOpenLayers: () => void;
+};
+
+export function SelectionControls({ selection, onOpenLayers }: SelectionControlsProps) {
+  const label = selectionLabel(selection);
+
+  return (
+    <>
+      <button type="button" className={bottomControlButtonClass()} aria-label="Open layers" title="Open layers" onClick={onOpenLayers}>
+        <Stack size={16} weight="regular" />
+      </button>
+      <BottomControlDivider />
+      <span className="max-w-48 truncate px-1 text-white">{label}</span>
+    </>
+  );
+}
+
+function selectionLabel(selection: SelectionSummary) {
+  switch (selection.type) {
+    case "artboard":
+      return `${selection.name} · ${selection.layerCount} layers`;
+    case "layer":
+      return selection.name;
+    case "multi-layer":
+      return `${selection.count} layers selected`;
+    case "none":
+      return "";
+  }
+}

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>
+    </>
+  );
+}

view/bottom-controls/styles.ts

@@ -0,0 +1,19 @@
+export function bottomControlDividerClass() {
+  return "mx-1 h-4 w-px bg-white/15";
+}
+
+export function bottomControlLabelClass() {
+  return "text-white/60";
+}
+
+export function bottomControlValueClass() {
+  return "min-w-10 text-center text-white";
+}
+
+export function bottomControlIconSlotClass() {
+  return "grid size-7 place-items-center rounded-full text-white/80";
+}
+
+export function bottomControlButtonClass() {
+  return `${bottomControlIconSlotClass()} transition hover:bg-white/10 hover:text-white focus:outline-none focus-visible:outline-none`;
+}