Update disabling of UrlBars buttons (#871)

This PR updates the disabling of buttons in the UrlBar:
- reload button's option list when project is in devicesNotFound state
- goBack, goHome and UrlSelect when project is in either devicesNotFound
or starting state

|Before|After|
|-|-|
|<video
src="https://github.com/user-attachments/assets/ec43fd11-9785-41aa-9703-866cb4fd88eb"
/>|<video
src="https://github.com/user-attachments/assets/068d1c7c-5fbb-43a5-9801-67ee4eb5c12e"
/>|
|<video
src="https://github.com/user-attachments/assets/c4a65e53-591e-4853-859b-9dad9cec72b1"
/>|<video
src="https://github.com/user-attachments/assets/b94b3dc4-c532-49ef-9bb1-5289dc062411"
/>|

packages/vscode-extension/src/webview/components/IconButtonWithOptions.tsx

@@ -6,11 +6,12 @@ import "./IconButtonWithOptions.css";
 
 interface IconButtonWithOptions extends IconButtonProps {
   options: Record<string, () => void>;
+  disabled?: boolean;
 }
 
 export const IconButtonWithOptions = forwardRef<HTMLButtonElement, IconButtonWithOptions>(
   (props, ref) => {
-    const { options, children, ...iconButtonProps } = props;
+    const { options, disabled, children, ...iconButtonProps } = props;
 
     const [dropdownTriggerVisible, setDropdownTriggerVisible] = useState(false);
 
@@ -23,16 +24,16 @@ export const IconButtonWithOptions = forwardRef<HTMLButtonElement, IconButtonWit
         onMouseLeave={() => {
           setDropdownTriggerVisible(false);
         }}>
-        <IconButton ref={ref} {...iconButtonProps}>
+        <IconButton ref={ref} disabled={disabled} {...iconButtonProps}>
           {children}
         </IconButton>
         <DropdownMenu.Root>
-          <DropdownMenu.Trigger asChild>
+          <DropdownMenu.Trigger asChild disabled={disabled}>
             {
               <div
                 className={classNames(
                   "dropdown-arrow codicon codicon-triangle-down",
-                  !dropdownTriggerVisible && "dropdown-arrow-hide"
+                  (!dropdownTriggerVisible || disabled) && "dropdown-arrow-hide"
                 )}
               />
             }

packages/vscode-extension/src/webview/components/UrlBar.tsx

@@ -28,7 +28,7 @@ function ReloadButton({ disabled }: { disabled: boolean }) {
 }
 
 function UrlBar({ disabled }: { disabled?: boolean }) {
-  const { project } = useProject();
+  const { project, projectState } = useProject();
 
   const MAX_URL_HISTORY_SIZE = 20;
   const MAX_RECENT_URL_SIZE = 5;
@@ -79,14 +79,16 @@ function UrlBar({ disabled }: { disabled?: boolean }) {
     return [...urlList].sort((a, b) => a.name.localeCompare(b.name));
   }, [urlList]);
 
+  const disabledAlsoWhenStarting = disabled || projectState.status === "starting";
+
   return (
     <>
       <IconButton
         tooltip={{
           label: "Go back",
           side: "bottom",
         }}
-        disabled={disabled || urlHistory.length < 2}
+        disabled={disabledAlsoWhenStarting || urlHistory.length < 2}
         onClick={() => {
           setUrlHistory((prevUrlHistory) => {
             const newUrlHistory = prevUrlHistory.slice(1);
@@ -106,7 +108,7 @@ function UrlBar({ disabled }: { disabled?: boolean }) {
           label: "Go to main screen",
           side: "bottom",
         }}
-        disabled={disabled}>
+        disabled={disabledAlsoWhenStarting}>
         <span className="codicon codicon-home" />
       </IconButton>
       <UrlSelect
@@ -116,7 +118,7 @@ function UrlBar({ disabled }: { disabled?: boolean }) {
         recentItems={recentUrlList}
         items={sortedUrlList}
         value={urlList[0]?.id}
-        disabled={disabled || urlList.length < 2}
+        disabled={disabledAlsoWhenStarting || urlList.length < 2}
       />
     </>
   );