Implement hover functionality to open and close the dropdown menu and refactor the menu's internal structure for improved styling

Author: robertpiosik

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.module.scss

@@ -1,16 +1,20 @@
 .menu {
   position: absolute;
-  top: calc(100% + var(--padding-4px));
+  top: 100%;
+  padding-top: 4px;
   right: 0;
-  background-color: var(--vscode-quickInput-background);
-  border-radius: var(--border-radius-8px);
-  border: 1px solid var(--vscode-widget-border);
-  box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
   z-index: 2;
-  padding: var(--padding-4px);
   width: max-content;
   text-align: left;
   min-width: 100%;
+
+  &__inner {
+    background-color: var(--vscode-quickInput-background);
+    border-radius: var(--border-radius-8px);
+    border: 1px solid var(--vscode-widget-border);
+    box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
+    padding: var(--padding-4px);
+  }
 }
 
 .item {

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.tsx

@@ -20,22 +20,24 @@ export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
 
   return (
     <div className={styles.menu}>
-      {props.items.map((item, index) => (
-        <div
-          key={index}
-          className={styles.item}
-          onClick={item.on_click}
-          data-selected={item.is_selected && is_preselection_respected}
-          onMouseEnter={() => {
-            set_is_preselection_respected(false)
-          }}
-        >
-          <span>{item.label}</span>
-          {item.shortcut && (
-            <span className={styles.shortcut}>{item.shortcut}</span>
-          )}
-        </div>
-      ))}
+      <div className={styles.menu__inner}>
+        {props.items.map((item, index) => (
+          <div
+            key={index}
+            className={styles.item}
+            onClick={item.on_click}
+            data-selected={item.is_selected && is_preselection_respected}
+            onMouseEnter={() => {
+              set_is_preselection_respected(false)
+            }}
+          >
+            <span>{item.label}</span>
+            {item.shortcut && (
+              <span className={styles.shortcut}>{item.shortcut}</span>
+            )}
+          </div>
+        ))}
+      </div>
     </div>
   )
 }

packages/ui/src/components/editor/panel/Dropdown/Dropdown.tsx

@@ -64,6 +64,18 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
     props.on_change(props.options[next_index].value)
   }
 
+  const handle_mouse_enter = () => {
+    if (!is_open) {
+      set_just_opened(true)
+    }
+    set_is_open(true)
+  }
+
+  const handle_mouse_leave = () => {
+    set_is_open(false)
+    set_just_opened(false)
+  }
+
   useEffect(() => {
     const handle_click_outside = (event: MouseEvent) => {
       if (
@@ -86,6 +98,8 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
       className={cn(styles.container, { [styles['button--open']]: is_open })}
       ref={container_ref}
       onWheel={handle_wheel}
+      onMouseEnter={handle_mouse_enter}
+      onMouseLeave={handle_mouse_leave}
     >
       <button
         className={cn(styles.button, { [styles['button--open']]: is_open })}