@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

package/src/components/TimelineToolbar.tsx

@@ -0,0 +1,89 @@
+import {
+  getNextTimelineZoomPercent,
+  getTimelineZoomPercent,
+} from "../player/components/timelineZoom";
+import { getTimelineToggleTitle } from "../utils/timelineDiscovery";
+import { usePlayerStore } from "../player";
+
+interface TimelineToolbarProps {
+  toggleTimelineVisibility: () => void;
+}
+
+export function TimelineToolbar({ toggleTimelineVisibility }: TimelineToolbarProps) {
+  const zoomMode = usePlayerStore((s) => s.zoomMode);
+  const manualZoomPercent = usePlayerStore((s) => s.manualZoomPercent);
+  const setZoomMode = usePlayerStore((s) => s.setZoomMode);
+  const setManualZoomPercent = usePlayerStore((s) => s.setManualZoomPercent);
+  const displayedTimelineZoomPercent = getTimelineZoomPercent(zoomMode, manualZoomPercent);
+
+  return (
+    <div className="border-b border-neutral-800/40 bg-neutral-950/96">
+      <div className="flex items-center justify-between px-3 py-2">
+        <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-500">
+          Timeline
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => setZoomMode("fit")}
+            className={`h-7 px-2.5 rounded-md border text-[11px] font-medium transition-colors ${
+              zoomMode === "fit"
+                ? "border-studio-accent/30 bg-studio-accent/10 text-studio-accent"
+                : "border-neutral-800 text-neutral-400 hover:border-neutral-700 hover:text-neutral-200"
+            }`}
+            title="Fit timeline to width"
+          >
+            Fit
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setZoomMode("manual");
+              setManualZoomPercent(getNextTimelineZoomPercent("out", zoomMode, manualZoomPercent));
+            }}
+            className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
+            title="Zoom out"
+          >
+            -
+          </button>
+          <div className="min-w-[58px] text-center text-[10px] font-medium tabular-nums text-neutral-500">
+            {`${displayedTimelineZoomPercent}%`}
+          </div>
+          <button
+            type="button"
+            onClick={() => {
+              setZoomMode("manual");
+              setManualZoomPercent(getNextTimelineZoomPercent("in", zoomMode, manualZoomPercent));
+            }}
+            className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
+            title="Zoom in"
+          >
+            +
+          </button>
+          <button
+            type="button"
+            onClick={toggleTimelineVisibility}
+            className="ml-1 flex h-7 w-7 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-neutral-900 hover:text-neutral-200"
+            title={getTimelineToggleTitle(true)}
+            aria-label="Hide timeline editor"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M5 7h14" />
+              <path d="m8 11 4 4 4-4" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}