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:
KevIsDev
2025-04-19 00:47:14 +01:00
parent 685677b986
commit 9b4736921f
2 changed files with 37 additions and 43 deletions

View File

@@ -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>