feat(ui): move preview device toggles into the global nav rail

This commit is contained in:
2026-05-15 15:42:49 -07:00
parent a4354a5294
commit dc82ccc47a
3 changed files with 88 additions and 38 deletions

View File

@@ -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() {
))}
</select>
)}
<div
style={{
display: "flex",
gap: 4,
background: "rgba(255,255,255,0.85)",
padding: 4,
borderRadius: 8,
border: "1px solid rgba(26,26,26,0.12)",
}}
>
<button
onClick={() => setDeviceMode("desktop")}
style={{
padding: "4px 12px",
borderRadius: 6,
fontSize: "0.8rem",
background:
deviceMode === "desktop" ? "rgba(0,0,0,0.06)" : "transparent",
color: deviceMode === "desktop" ? "#000" : "#666",
}}
>
Desktop
</button>
<button
onClick={() => setDeviceMode("mobile")}
style={{
padding: "4px 12px",
borderRadius: 6,
fontSize: "0.8rem",
background:
deviceMode === "mobile" ? "rgba(0,0,0,0.06)" : "transparent",
color: deviceMode === "mobile" ? "#000" : "#666",
}}
>
Mobile
</button>
</div>
</div>
<div