From 5a7e1abcc7641d4cddf41617cc8f899bbbb8e147 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Fri, 12 Jun 2026 15:03:16 -0700
Subject: [PATCH] design(preview): restore path input box with datalist
 dropdown for free-text navigation

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

diff --git a/vibn-frontend/components/project/project-icon-rail.tsx b/vibn-frontend/components/project/project-icon-rail.tsx
index d2e452b..37364c4 100644
--- a/vibn-frontend/components/project/project-icon-rail.tsx
+++ b/vibn-frontend/components/project/project-icon-rail.tsx
@@ -243,6 +243,16 @@ function PreviewDeviceToggles() {
         }}
       />
 
+      <span
+        style={{
+          opacity: 0.5,
+          flexShrink: 0,
+          paddingLeft: 4,
+          fontFamily: "var(--font-mono), monospace",
+        }}
+      >
+        /
+      </span>
       <div
         style={{
           flex: 1,
@@ -252,9 +262,14 @@ function PreviewDeviceToggles() {
           alignItems: "center",
         }}
       >
-        <select
-          value={currentPath}
-          onChange={(e) => setCurrentPath(e.target.value)}
+        <input
+          type="text"
+          list="common-routes"
+          value={currentPath === "/" ? "" : currentPath.replace(/^\//, "")}
+          onChange={(e) =>
+            setCurrentPath("/" + e.target.value.replace(/^\//, ""))
+          }
+          placeholder="path (e.g. dashboard)"
           style={{
             background: "transparent",
             border: "none",
@@ -265,19 +280,22 @@ function PreviewDeviceToggles() {
             textOverflow: "ellipsis",
             fontFamily: "var(--font-mono), monospace",
             paddingRight: 16,
-            appearance: "none",
-            cursor: "pointer",
           }}
-        >
-          <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>
+          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>
         <ChevronDown
           size={12}
           style={{