From dc82ccc47aecc9e78cb325e465cff9389456b934 Mon Sep 17 00:00:00 2001 From: mawkone Date: Fri, 15 May 2026 15:42:49 -0700 Subject: [PATCH] feat(ui): move preview device toggles into the global nav rail --- .../[projectId]/(home)/preview/page.tsx | 40 +--------- .../preview-toolbar/preview-toolbar-state.ts | 11 +++ .../components/project/project-icon-rail.tsx | 75 +++++++++++++++++++ 3 files changed, 88 insertions(+), 38 deletions(-) create mode 100644 vibn-frontend/components/project/preview-toolbar/preview-toolbar-state.ts diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/preview/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/preview/page.tsx index 657c005..58ec5eb 100644 --- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/preview/page.tsx +++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/preview/page.tsx @@ -5,6 +5,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react"; import { Loader2 } from "lucide-react"; import { useAnatomy } from "@/components/project/use-anatomy"; import { usePreviewBridge } from "@/components/project/preview-bridge-context"; +import { usePreviewToolbarStore } from "@/components/project/preview-toolbar/preview-toolbar-state"; const SAME_ORIGIN_SANDBOX = "allow-scripts allow-forms allow-same-origin allow-popups allow-modals allow-downloads" as const; @@ -32,7 +33,7 @@ export default function PreviewTab() { const bridge = usePreviewBridge(); const origin = typeof window !== "undefined" ? window.location.origin : ""; - const [deviceMode, setDeviceMode] = useState<"desktop" | "mobile">("desktop"); + const deviceMode = usePreviewToolbarStore((s) => s.deviceMode); // Auto-select first preview on load useEffect(() => { @@ -67,43 +68,6 @@ export default function PreviewTab() { ))} )} -
- - -
void; +} + +export const usePreviewToolbarStore = create((set) => ({ + deviceMode: 'desktop', + setDeviceMode: (mode) => set({ deviceMode: mode }), +})); diff --git a/vibn-frontend/components/project/project-icon-rail.tsx b/vibn-frontend/components/project/project-icon-rail.tsx index 1a067cd..ebbac26 100644 --- a/vibn-frontend/components/project/project-icon-rail.tsx +++ b/vibn-frontend/components/project/project-icon-rail.tsx @@ -46,6 +46,9 @@ const PRIMARY_ITEMS: RailItem[] = [ export function ProjectIconRail({ workspace, projectId }: Props) { const pathname = usePathname() ?? ""; const projectBase = `/${workspace}/project/${projectId}`; + const isPreviewActive = + pathname === `${projectBase}/preview` || + pathname.startsWith(`${projectBase}/preview/`); const isActive = (item: RailItem) => { const segments = [item.segment, ...(item.aliases ?? [])]; @@ -58,7 +61,13 @@ export function ProjectIconRail({ workspace, projectId }: Props) { return (