feat(view): add contextual layer controls

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 "";
+  }
+}