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
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user