From 2e8d9ddeccd77b79615c4aa507f4b940a0d1dc63 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Fri, 12 Jun 2026 11:50:54 -0700
Subject: [PATCH] design(preview): organize address bar tools, move refresh
 button to far left

---
 .../components/project/project-icon-rail.tsx  | 328 +++++++++---------
 1 file changed, 173 insertions(+), 155 deletions(-)

diff --git a/vibn-frontend/components/project/project-icon-rail.tsx b/vibn-frontend/components/project/project-icon-rail.tsx
index 6bd4db5..c9ec5c9 100644
--- a/vibn-frontend/components/project/project-icon-rail.tsx
+++ b/vibn-frontend/components/project/project-icon-rail.tsx
@@ -21,65 +21,59 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
 
   return (
     <nav style={bar} aria-label="Project sections">
-      {/* Dynamic Left Content Area (e.g. Preview Device Toggles & URL bar) */}
+      <div style={primaryGroup}>
+        <Link
+          href={`${projectBase}/preview`}
+          style={{
+            padding: "4px 12px",
+            fontSize: "0.75rem",
+            fontWeight: 500,
+            borderRadius: 6,
+            textDecoration: "none",
+            background: isPreviewActive ? "#ffffff" : "transparent",
+            color: isPreviewActive ? "#18181b" : "#71717a",
+            boxShadow: isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+            transition: "all 0.15s ease",
+          }}
+        >
+          Preview
+        </Link>
+        <Link
+          href={`${projectBase}/plan`}
+          style={{
+            padding: "4px 12px",
+            fontSize: "0.75rem",
+            fontWeight: 500,
+            borderRadius: 6,
+            textDecoration: "none",
+            background: !isPreviewActive ? "#ffffff" : "transparent",
+            color: !isPreviewActive ? "#18181b" : "#71717a",
+            boxShadow: !isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+            transition: "all 0.15s ease",
+          }}
+        >
+          Dashboard
+        </Link>
+      </div>
+
       <div
         style={{
           display: "flex",
           alignItems: "center",
-          gap: 12,
           flex: 1,
           minWidth: 0,
+          marginLeft: 12,
         }}
       >
-        <div style={primaryGroup}>
-          <Link
-            href={`${projectBase}/preview`}
-            style={{
-              padding: "4px 12px",
-              fontSize: "0.75rem",
-              fontWeight: 500,
-              borderRadius: 6,
-              textDecoration: "none",
-              background: isPreviewActive ? "#ffffff" : "transparent",
-              color: isPreviewActive ? "#18181b" : "#71717a",
-              boxShadow: isPreviewActive
-                ? "0 1px 2px rgba(0,0,0,0.05)"
-                : "none",
-              transition: "all 0.15s ease",
-            }}
-          >
-            Preview
-          </Link>
-          <Link
-            href={`${projectBase}/plan`}
-            style={{
-              padding: "4px 12px",
-              fontSize: "0.75rem",
-              fontWeight: 500,
-              borderRadius: 6,
-              textDecoration: "none",
-              background: !isPreviewActive ? "#ffffff" : "transparent",
-              color: !isPreviewActive ? "#18181b" : "#71717a",
-              boxShadow: !isPreviewActive
-                ? "0 1px 2px rgba(0,0,0,0.05)"
-                : "none",
-              transition: "all 0.15s ease",
-            }}
-          >
-            Dashboard
-          </Link>
-        </div>
-
         {isPreviewActive && <PreviewDeviceToggles />}
       </div>
 
-      {/* Right Content Area (Publish Button) */}
       <div
         style={{
           display: "flex",
-          justifyContent: "flex-end",
           alignItems: "center",
-          gap: 12,
+          flexShrink: 0,
+          marginLeft: 12,
         }}
       >
         {actions}
@@ -103,27 +97,95 @@ function PreviewDeviceToggles() {
 
   return (
     <div
-      style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        background: "#fafafa",
+        border: "1px solid #e4e4e7",
+        padding: "4px 8px",
+        borderRadius: 8,
+        height: 34,
+        flex: 1,
+        minWidth: 0, // critical for input overflow to work
+        color: "#71717a",
+        fontSize: "0.75rem",
+      }}
     >
-      <div
+      <button
+        onClick={triggerRefresh}
+        title="Reload Preview"
         style={{
           display: "flex",
           alignItems: "center",
-          gap: 6,
-          background: "#fafafa",
-          border: "1px solid #e4e4e7",
-          padding: "4px 8px",
-          borderRadius: 8,
-          height: 34,
-          flex: 1, // Let the URL bar grow to fill the header space
-          minWidth: 320,
+          justifyContent: "center",
+          width: 24,
+          height: 24,
+          borderRadius: 4,
+          border: "none",
+          cursor: "pointer",
+          transition: "all 0.15s",
+          background: "transparent",
           color: "#71717a",
-          fontSize: "0.75rem",
+          flexShrink: 0,
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = "#e4e4e7";
+          e.currentTarget.style.color = "#18181b";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = "transparent";
+          e.currentTarget.style.color = "#71717a";
         }}
+      >
+        <RotateCw size={12} />
+      </button>
+
+      <div
+        style={{
+          width: 1,
+          height: 14,
+          background: "#e4e4e7",
+          margin: "0 2px",
+          flexShrink: 0,
+        }}
+      />
+
+      <span style={{ opacity: 0.6, flexShrink: 0 }}>🌐</span>
+      <input
+        type="text"
+        value={displayUrl}
+        readOnly
+        placeholder="No dev server running..."
+        style={{
+          background: "transparent",
+          border: "none",
+          outline: "none",
+          flex: 1,
+          minWidth: 0,
+          color: "#18181b",
+          fontSize: "0.75rem",
+          textOverflow: "ellipsis",
+          paddingLeft: 4,
+        }}
+      />
+
+      <div
+        style={{
+          width: 1,
+          height: 14,
+          background: "#e4e4e7",
+          margin: "0 4px",
+          flexShrink: 0,
+        }}
+      />
+
+      {/* Device Toggles Inside the Address Bar */}
+      <div
+        style={{ display: "flex", gap: 2, alignItems: "center", flexShrink: 0 }}
       >
         <button
-          onClick={triggerRefresh}
-          title="Reload Preview"
+          onClick={() => setDeviceMode("desktop")}
           style={{
             display: "flex",
             alignItems: "center",
@@ -134,108 +196,64 @@ function PreviewDeviceToggles() {
             border: "none",
             cursor: "pointer",
             transition: "all 0.15s",
-            background: "transparent",
+            background: deviceMode === "desktop" ? "#e4e4e7" : "transparent",
+            color: deviceMode === "desktop" ? "#18181b" : "#71717a",
+          }}
+          title="Desktop view"
+        >
+          <Monitor size={12} />
+        </button>
+        <button
+          onClick={() => setDeviceMode("mobile")}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 24,
+            height: 24,
+            borderRadius: 4,
+            border: "none",
+            cursor: "pointer",
+            transition: "all 0.15s",
+            background: deviceMode === "mobile" ? "#e4e4e7" : "transparent",
+            color: deviceMode === "mobile" ? "#18181b" : "#71717a",
+          }}
+          title="Mobile view"
+        >
+          <Smartphone size={12} />
+        </button>
+      </div>
+
+      <div
+        style={{
+          width: 1,
+          height: 14,
+          background: "#e4e4e7",
+          margin: "0 4px",
+          flexShrink: 0,
+        }}
+      />
+
+      {displayUrl ? (
+        <a
+          href={displayUrl}
+          target="_blank"
+          rel="noreferrer"
+          title="Open preview in new tab"
+          style={{
             color: "#71717a",
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = "#e4e4e7";
-            e.currentTarget.style.color = "#18181b";
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = "transparent";
-            e.currentTarget.style.color = "#71717a";
+            display: "flex",
+            padding: "4px",
+            flexShrink: 0,
           }}
         >
-          <RotateCw size={12} />
-        </button>
-        <div
-          style={{
-            width: 1,
-            height: 14,
-            background: "#e4e4e7",
-            margin: "0 2px",
-          }}
-        />
-        <input
-          type="text"
-          value={displayUrl}
-          readOnly
-          placeholder="No dev server running..."
-          style={{
-            background: "transparent",
-            border: "none",
-            outline: "none",
-            width: "100%",
-            color: "#18181b",
-            fontSize: "0.75rem",
-            textOverflow: "ellipsis",
-            paddingLeft: 4,
-          }}
-        />
-
-        {/* Device Toggles Inside the Address Bar */}
-        <div style={{ display: "flex", gap: 2, alignItems: "center", marginRight: 4 }}>
-          <button
-            onClick={() => setDeviceMode("desktop")}
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 24,
-              height: 24,
-              borderRadius: 4,
-              border: "none",
-              cursor: "pointer",
-              transition: "all 0.15s",
-              background: deviceMode === "desktop" ? "#e4e4e7" : "transparent",
-              color: deviceMode === "desktop" ? "#18181b" : "#71717a",
-            }}
-            title="Desktop view"
-          >
-            <Monitor size={12} />
-          </button>
-          <button
-            onClick={() => setDeviceMode("mobile")}
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 24,
-              height: 24,
-              borderRadius: 4,
-              border: "none",
-              cursor: "pointer",
-              transition: "all 0.15s",
-              background: deviceMode === "mobile" ? "#e4e4e7" : "transparent",
-              color: deviceMode === "mobile" ? "#18181b" : "#71717a",
-            }}
-            title="Mobile view"
-          >
-            <Smartphone size={12} />
-          </button>
+          <ExternalLink size={14} />
+        </a>
+      ) : (
+        <div style={{ padding: "4px", opacity: 0.3, flexShrink: 0 }}>
+          <ExternalLink size={14} />
         </div>
-
-        <div
-          style={{
-            width: 1,
-            height: 14,
-            background: "#e4e4e7",
-            margin: "0 4px",
-          }}
-        />
-
-        {displayUrl && (
-          <a
-            href={displayUrl}
-            target="_blank"
-            rel="noreferrer"
-            title="Open preview in new tab"
-            style={{ color: "#71717a", display: "flex", padding: "4px" }}
-          >
-            <ExternalLink size={14} />
-          </a>
-        )}
-      </div>
+      )}
     </div>
   );
 }