feat(ui): move preview device toggles into the global nav rail
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user