refactor(workbench): simplify URL handling and improve PortDropdown UI

- Replace `url` state with `displayPath` in Preview component to focus on path handling
- Update PortDropdown to display active port and improve styling
- Remove redundant URL validation logic

app/components/workbench/PortDropdown.tsx

@@ -1,5 +1,4 @@
 import { memo, useEffect, useRef } from 'react';
-import { IconButton } from '~/components/ui/IconButton';
 import type { PreviewInfo } from '~/lib/stores/previews';
 
 interface PortDropdownProps {
@@ -48,9 +47,18 @@ export const PortDropdown = memo(
 
     return (
       <div className="relative z-port-dropdown" ref={dropdownRef}>
-        <IconButton icon="i-ph:plug" onClick={() => setIsDropdownOpen(!isDropdownOpen)} />
+        {/* Display the active port if available, otherwise show the plug icon */}
+        <button
+          className="flex items-center group-focus-within:text-bolt-elements-preview-addressBar-text bg-white group-focus-within:bg-bolt-elements-preview-addressBar-background dark:bg-bolt-elements-preview-addressBar-backgroundHover rounded-full px-2 py-1 gap-1.5"
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        >
+          <span className="i-ph:plug text-base"></span>
+          {previews.length > 0 && activePreviewIndex >= 0 && activePreviewIndex < previews.length ? (
+            <span className="text-xs font-medium">{previews[activePreviewIndex].port}</span>
+          ) : null}
+        </button>
         {isDropdownOpen && (
-          <div className="absolute right-0 mt-2 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded shadow-sm min-w-[140px] dropdown-animation">
+          <div className="absolute left-0 mt-2 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded shadow-sm min-w-[140px] dropdown-animation">
             <div className="px-4 py-2 border-b border-bolt-elements-borderColor text-sm font-semibold text-bolt-elements-textPrimary">
               Ports
             </div>

app/components/workbench/Preview.tsx

@@ -58,8 +58,7 @@ export const Preview = memo(() => {
   const hasSelectedPreview = useRef(false);
   const previews = useStore(workbenchStore.previews);
   const activePreview = previews[activePreviewIndex];
-
+  const [displayPath, setDisplayPath] = useState('/');
-  const [url, setUrl] = useState('');
   const [iframeUrl, setIframeUrl] = useState<string | undefined>();
   const [isSelectionMode, setIsSelectionMode] = useState(false);
 
@@ -92,36 +91,17 @@ export const Preview = memo(() => {
 
   useEffect(() => {
     if (!activePreview) {
-      setUrl('');
       setIframeUrl(undefined);
+      setDisplayPath('/');
 
       return;
     }
 
     const { baseUrl } = activePreview;
-    setUrl(baseUrl);
     setIframeUrl(baseUrl);
+    setDisplayPath('/');
   }, [activePreview]);
 
-  const validateUrl = useCallback(
-    (value: string) => {
-      if (!activePreview) {
-        return false;
-      }
-
-      const { baseUrl } = activePreview;
-
-      if (value === baseUrl) {
-        return true;
-      } else if (value.startsWith(baseUrl)) {
-        return ['/', '?', '#'].includes(value.charAt(baseUrl.length));
-      }
-
-      return false;
-    },
-    [activePreview],
-  );
-
   const findMinPortIndex = useCallback(
     (minIndex: number, preview: { port: number }, index: number, array: { port: number }[]) => {
       return preview.port < array[minIndex].port ? index : minIndex;
@@ -653,40 +633,46 @@ export const Preview = memo(() => {
           />
         </div>
 
-        <div className="flex-grow flex items-center gap-1 bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive">
+        <div className="flex-grow flex items-center gap-1 bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-1 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive">
+          <PortDropdown
+            activePreviewIndex={activePreviewIndex}
+            setActivePreviewIndex={setActivePreviewIndex}
+            isDropdownOpen={isPortDropdownOpen}
+            setHasSelectedPreview={(value) => (hasSelectedPreview.current = value)}
+            setIsDropdownOpen={setIsPortDropdownOpen}
+            previews={previews}
+          />
           <input
-            title="URL"
+            title="URL Path"
             ref={inputRef}
             className="w-full bg-transparent outline-none"
             type="text"
-            value={url}
+            value={displayPath}
             onChange={(event) => {
-              setUrl(event.target.value);
+              setDisplayPath(event.target.value);
             }}
             onKeyDown={(event) => {
-              if (event.key === 'Enter' && validateUrl(url)) {
+              if (event.key === 'Enter' && activePreview) {
-                setIframeUrl(url);
+                let targetPath = displayPath.trim();
+
+                if (!targetPath.startsWith('/')) {
+                  targetPath = '/' + targetPath;
+                }
+
+                const fullUrl = activePreview.baseUrl + targetPath;
+                setIframeUrl(fullUrl);
+                setDisplayPath(targetPath);
 
                 if (inputRef.current) {
                   inputRef.current.blur();
                 }
               }
             }}
+            disabled={!activePreview}
           />
         </div>
 
         <div className="flex items-center gap-2">
-          {previews.length > 1 && (
-            <PortDropdown
-              activePreviewIndex={activePreviewIndex}
-              setActivePreviewIndex={setActivePreviewIndex}
-              isDropdownOpen={isPortDropdownOpen}
-              setHasSelectedPreview={(value) => (hasSelectedPreview.current = value)}
-              setIsDropdownOpen={setIsPortDropdownOpen}
-              previews={previews}
-            />
-          )}
-
           <IconButton
             icon="i-ph:devices"
             onClick={toggleDeviceMode}