feat: collapse unused section of launch configuration dropdown (#1806)

This PR collapses the "detected" or "custom" section of launch
configuration depending on which one is currently selected
this should improve a user experience for users that have a lot of
custom configurations and the "detected" section is cluttering their
already large selection.

Moreover for the first setup we select the custom configuration if
exists:
```js
// Otherwise, return the first launch config or a default one
if (this._launchConfigurations.length > 0) {
  return this._launchConfigurations[0];
}
```

so for enterprise projects with already existing configurations the user
should never have a need to expand the "detected" section

### How Has This Been Tested: 


https://github.com/user-attachments/assets/0d3a21b0-b821-4e83-aedd-ccb58e97e2d6

### How Has This Change Been Documented:

nah

Author: filip131311

packages/vscode-extension/src/webview/components/AppRootSelect.css

@@ -66,6 +66,13 @@
   user-select: none;
 }
 
+.approot-select-label-collapsible {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .approot-select-item {
   height: 32px;
   line-height: 1.2;

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

@@ -2,7 +2,7 @@ import * as Select from "@radix-ui/react-select";
 import "./AppRootSelect.css";
 import "./shared/Dropdown.css";
 import _ from "lodash";
-import React, { PropsWithChildren, useEffect, useMemo } from "react";
+import React, { PropsWithChildren, useEffect, useMemo, useState } from "react";
 import { use$ } from "@legendapp/state/react";
 import { useProject } from "../providers/ProjectProvider";
 import { LaunchConfiguration, LaunchConfigurationKind } from "../../common/LaunchConfig";
@@ -46,6 +46,8 @@ function renderLaunchConfigurations(
   prefix: string,
   customLaunchConfigurations: LaunchConfiguration[],
   selectedValue: string | undefined,
+  isExpanded: boolean,
+  onToggleExpand: () => void,
   onEditConfig?: (config: LaunchConfiguration, isSelected: boolean) => void
 ) {
   if (customLaunchConfigurations.length === 0) {
@@ -54,33 +56,41 @@ function renderLaunchConfigurations(
 
   return (
     <Select.Group>
-      <Select.Label className="approot-select-label">{groupLabel}</Select.Label>
-      {customLaunchConfigurations.map((config, idx) => (
-        <RichSelectItem
-          value={`${prefix}:${idx}`}
-          key={idx}
-          data-testid={`approot-select-item-${config.name || config.appRoot}`}
-          icon={<span className="codicon codicon-folder" />}
-          title={displayNameForConfig(config) ?? config.appRoot ?? "./"}
-          subtitle={displayNameForConfig(config) ? config.appRoot : undefined}
-          isSelected={selectedValue === `${prefix}:${idx}`}>
-          {onEditConfig && (
-            <ConfigureButton
-              dataTest={`edit-launch-config-button-${config.name || idx}`}
-              onClick={() =>
-                onEditConfig(config as LaunchConfiguration, selectedValue === `${prefix}:${idx}`)
-              }
-            />
-          )}
-        </RichSelectItem>
-      ))}
+      <div className="approot-select-label-collapsible" onClick={onToggleExpand}>
+        <span
+          className={`codicon ${isExpanded ? "codicon-chevron-down" : "codicon-chevron-right"}`}
+        />
+        <Select.Label className="approot-select-label">{groupLabel}</Select.Label>
+      </div>
+      {isExpanded &&
+        customLaunchConfigurations.map((config, idx) => (
+          <RichSelectItem
+            value={`${prefix}:${idx}`}
+            key={idx}
+            data-testid={`approot-select-item-${config.name || config.appRoot}`}
+            icon={<span className="codicon codicon-folder" />}
+            title={displayNameForConfig(config) ?? config.appRoot ?? "./"}
+            subtitle={displayNameForConfig(config) ? config.appRoot : undefined}
+            isSelected={selectedValue === `${prefix}:${idx}`}>
+            {onEditConfig && (
+              <ConfigureButton
+                dataTest={`edit-launch-config-button-${config.name || idx}`}
+                onClick={() =>
+                  onEditConfig(config as LaunchConfiguration, selectedValue === `${prefix}:${idx}`)
+                }
+              />
+            )}
+          </RichSelectItem>
+        ))}
     </Select.Group>
   );
 }
 
 function renderDetectedLaunchConfigurations(
   detectedConfigurations: LaunchConfiguration[],
-  selectedValue: string | undefined
+  selectedValue: string | undefined,
+  isExpanded: boolean,
+  onToggleExpand: () => void
 ) {
   if (detectedConfigurations.length === 0) {
     return null;
@@ -90,13 +100,17 @@ function renderDetectedLaunchConfigurations(
     "Detected applications",
     "detected",
     detectedConfigurations,
-    selectedValue
+    selectedValue,
+    isExpanded,
+    onToggleExpand
   );
 }
 
 function renderCustomLaunchConfigurations(
   customLaunchConfigurations: LaunchConfiguration[],
   selectedValue: string | undefined,
+  isExpanded: boolean,
+  onToggleExpand: () => void,
   onEditConfig: (config: LaunchConfiguration, isSelected: boolean) => void
 ) {
   if (customLaunchConfigurations.length === 0) {
@@ -108,6 +122,8 @@ function renderCustomLaunchConfigurations(
     "custom",
     customLaunchConfigurations,
     selectedValue,
+    isExpanded,
+    onToggleExpand,
     onEditConfig
   );
 }
@@ -149,6 +165,11 @@ function AppRootSelect() {
   const selectedAppRoot = applicationRoots.find((root) => root.path === selectedAppRootPath);
   const { openModal } = useModal();
 
+  const [expandedSections, setExpandedSections] = useState<{ detected: boolean; custom: boolean }>({
+    detected: false,
+    custom: false,
+  });
+
   function onEditConfig(config: LaunchConfiguration, isSelected: boolean) {
     openModal(<LaunchConfigurationView launchConfig={config} isCurrentConfig={isSelected} />, {
       title: "Launch Configuration",
@@ -199,6 +220,14 @@ function AppRootSelect() {
     }
   })();
 
+  useEffect(() => {
+    if (!projectInitialized) return;
+    setExpandedSections({
+      detected: selectedConfiguration.kind === LaunchConfigurationKind.Detected,
+      custom: selectedConfiguration.kind === LaunchConfigurationKind.Custom,
+    });
+  }, [projectInitialized, selectedConfiguration.kind]);
+
   useUnknownConfigurationAlert(projectInitialized && selectedValue === "unknown");
 
   const configurationsCount = detectedConfigurations.length + customConfigurations.length;
@@ -232,8 +261,19 @@ function AppRootSelect() {
             <span className="codicon codicon-chevron-up" />
           </Select.ScrollUpButton>
           <Select.Viewport className="approot-select-viewport">
-            {renderDetectedLaunchConfigurations(detectedConfigurations, selectedValue)}
-            {renderCustomLaunchConfigurations(customConfigurations, selectedValue, onEditConfig)}
+            {renderDetectedLaunchConfigurations(
+              detectedConfigurations,
+              selectedValue,
+              expandedSections.detected,
+              () => setExpandedSections((prev) => ({ ...prev, detected: !prev.detected }))
+            )}
+            {renderCustomLaunchConfigurations(
+              customConfigurations,
+              selectedValue,
+              expandedSections.custom,
+              () => setExpandedSections((prev) => ({ ...prev, custom: !prev.custom })),
+              onEditConfig
+            )}
             {configurationsCount > 0 && <Select.Separator className="approot-select-separator" />}
             <SelectItem value="manage" data-testid="add-launch-config-button">
               <span className="codicon codicon-add" />