From 2a2962a0985dc21433200db10521b567fd501dae Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Fri, 12 Jun 2026 12:22:50 -0700
Subject: [PATCH] design(preview): replace path input with strict dropdown menu

---
 .../components/project/project-icon-rail.tsx  | 48 ++++++-------------
 1 file changed, 15 insertions(+), 33 deletions(-)

diff --git a/vibn-frontend/components/project/project-icon-rail.tsx b/vibn-frontend/components/project/project-icon-rail.tsx
index c253fb75..86db64f3 100644
--- a/vibn-frontend/components/project/project-icon-rail.tsx
+++ b/vibn-frontend/components/project/project-icon-rail.tsx
@@ -237,16 +237,6 @@ function PreviewDeviceToggles() {
         }}
       />
 
-      <span
-        style={{
-          opacity: 0.5,
-          flexShrink: 0,
-          paddingLeft: 4,
-          fontFamily: "var(--font-mono), monospace",
-        }}
-      >
-        /
-      </span>
       <div
         style={{
           flex: 1,
@@ -256,14 +246,9 @@ function PreviewDeviceToggles() {
           alignItems: "center",
         }}
       >
-        <input
-          type="text"
-          list="common-routes"
-          value={currentPath === "/" ? "" : currentPath.replace(/^\//, "")}
-          onChange={(e) =>
-            setCurrentPath("/" + e.target.value.replace(/^\//, ""))
-          }
-          placeholder="path (e.g. dashboard)"
+        <select
+          value={currentPath}
+          onChange={(e) => setCurrentPath(e.target.value)}
           style={{
             background: "transparent",
             border: "none",
@@ -274,22 +259,19 @@ function PreviewDeviceToggles() {
             textOverflow: "ellipsis",
             fontFamily: "var(--font-mono), monospace",
             paddingRight: 16,
+            appearance: "none",
+            cursor: "pointer",
           }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              triggerRefresh(); // force reload iframe
-            }
-          }}
-        />
-        <datalist id="common-routes">
-          <option value="dashboard" />
-          <option value="login" />
-          <option value="signup" />
-          <option value="about" />
-          <option value="contact" />
-          <option value="pricing" />
-          <option value="settings" />
-        </datalist>
+        >
+          <option value="/">/</option>
+          <option value="/dashboard">/dashboard</option>
+          <option value="/login">/login</option>
+          <option value="/signup">/signup</option>
+          <option value="/about">/about</option>
+          <option value="/contact">/contact</option>
+          <option value="/pricing">/pricing</option>
+          <option value="/settings">/settings</option>
+        </select>
         <ChevronDown
           size={12}
           style={{