feat(ui): add manual reload button to preview device toggles

vibn-frontend/components/project/preview-toolbar/preview-toolbar-state.ts

@@ -1,11 +1,15 @@
-import { create } from 'zustand';
+import { create } from "zustand";
 
 interface PreviewToolbarState {
-  deviceMode: 'desktop' | 'mobile';
-  setDeviceMode: (mode: 'desktop' | 'mobile') => void;
+  deviceMode: "desktop" | "mobile";
+  setDeviceMode: (mode: "desktop" | "mobile") => void;
+  refreshKey: number;
+  triggerRefresh: () => void;
 }
 
 export const usePreviewToolbarStore = create<PreviewToolbarState>((set) => ({
-  deviceMode: 'desktop',
+  deviceMode: "desktop",
   setDeviceMode: (mode) => set({ deviceMode: mode }),
+  refreshKey: 0,
+  triggerRefresh: () => set((state) => ({ refreshKey: state.refreshKey + 1 })),
 }));

vibn-frontend/components/project/project-icon-rail.tsx

@@ -91,12 +91,13 @@ export function ProjectIconRail({ workspace, projectId }: Props) {
   );
 }
 
-import { Monitor, Smartphone } from "lucide-react";
+import { Monitor, Smartphone, RotateCw } from "lucide-react";
 import { usePreviewToolbarStore } from "./preview-toolbar/preview-toolbar-state";
 
 function PreviewDeviceToggles() {
   const deviceMode = usePreviewToolbarStore((s) => s.deviceMode);
   const setDeviceMode = usePreviewToolbarStore((s) => s.setDeviceMode);
+  const triggerRefresh = usePreviewToolbarStore((s) => s.triggerRefresh);
 
   return (
     <div
@@ -109,6 +110,39 @@ function PreviewDeviceToggles() {
         border: "1px solid #e8e4dc",
       }}
     >
+      <button
+        onClick={triggerRefresh}
+        title="Reload Preview"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 28,
+          height: 26,
+          borderRadius: 6,
+          border: "none",
+          cursor: "pointer",
+          transition: "all 0.15s",
+          background: "transparent",
+          color: "#8c8580",
+          marginRight: 4,
+        }}
+        onMouseEnter={(e) => (e.currentTarget.style.color = "#1a1a1a")}
+        onMouseLeave={(e) => (e.currentTarget.style.color = "#8c8580")}
+      >
+        <RotateCw size={14} />
+      </button>
+
+      <div
+        style={{
+          width: 1,
+          height: 16,
+          background: "#d9d2c5",
+          alignSelf: "center",
+          marginRight: 4,
+        }}
+      />
+
       <button
         onClick={() => setDeviceMode("desktop")}
         style={{