Implement support for displaying keyboard shortcuts within the dropdown menu items

Author: robertpiosik

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

@@ -21,14 +21,21 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   padding: 0 6px;
   height: 24px;
   cursor: pointer;
   color: var(--vscode-quickInput-foreground);
   white-space: nowrap;
   border-radius: 4px;
 
+  &__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  }
+
   &:hover,
   &[data-selected='true'] {
     background-color: var(--vscode-list-activeSelectionBackground);

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

@@ -12,6 +12,7 @@ export namespace DropdownMenu {
   export type Props = {
     items: Item[]
     underline_non_selected_items?: boolean
+    max_width?: number | string
   }
 }
 
@@ -20,7 +21,7 @@ export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
     useState<boolean>(true)
 
   return (
-    <div className={styles.menu}>
+    <div className={styles.menu} style={{ maxWidth: props.max_width }}>
       <div className={styles.menu__inner}>
         {props.items.map((item, index) => {
           const is_selected = item.is_selected && is_preselection_respected
@@ -37,7 +38,7 @@ export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
                 set_is_preselection_respected(false)
               }}
             >
-              <span>
+              <span className={styles.item__label}>
                 {should_underline ? (
                   <>
                     <span className={styles.underlined}>

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

@@ -7,13 +7,15 @@ export namespace Dropdown {
   export type Option<T extends string> = {
     value: T
     label: string
+    shortcut?: string
   }
 
   export type Props<T extends string> = {
     options: Option<T>[]
     selected_value: T
     on_change: (value: T) => void
     max_width?: number
+    menu_max_width?: number | string
     info?: string
     title?: string
   }
@@ -158,9 +160,11 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
           items={props.options.map((option) => ({
             label: option.label,
             on_click: () => handle_select(option.value),
-            is_selected: just_opened && option.value == props.selected_value
+            is_selected: just_opened && option.value == props.selected_value,
+            shortcut: option.shortcut,
           }))}
           underline_non_selected_items={opened_by_shortcut.current}
+          max_width={props.menu_max_width}
         />
       )}
     </div>

packages/vscode/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx

@@ -92,12 +92,15 @@ export const Header: React.FC<Props> = (props) => {
         <div className={styles.header__right__dropdown}>
           {props.mode == MODE.WEB && (
             <UiDropdown
-              options={Object.entries(web_mode_labels).map(
-                ([value, label]) => ({ value: value as WebPromptType, label })
-              )}
+              options={Object.entries(web_mode_labels).map(([value, label]) => ({
+                value: value as WebPromptType,
+                label,
+                shortcut: `${is_mac ? '⇧⌥' : 'Shift+Alt+'}${label.charAt(0)}`,
+              }))}
               selected_value={props.web_prompt_type}
               on_change={props.on_web_prompt_type_change}
               max_width={dropdown_max_width}
+              menu_max_width="calc(100vw - 52px)"
               info={is_narrow_viewport ? undefined : 'prompt type'}
               title={
                 is_mac ? 'Change prompt type (⇧⌥)' : 'Change prompt type (Shift+Alt)'
@@ -106,12 +109,15 @@ export const Header: React.FC<Props> = (props) => {
           )}
           {props.mode == MODE.API && (
             <UiDropdown
-              options={Object.entries(api_mode_labels).map(
-                ([value, label]) => ({ value: value as ApiPromptType, label })
-              )}
+              options={Object.entries(api_mode_labels).map(([value, label]) => ({
+                value: value as ApiPromptType,
+                label,
+                shortcut: `${is_mac ? '⇧⌥' : 'Shift+Alt+'}${label.charAt(0)}`,
+              }))}
               selected_value={props.api_prompt_type}
               on_change={props.on_api_prompt_type_change}
               max_width={dropdown_max_width}
+              menu_max_width="calc(100vw - 60px)"
               info={is_narrow_viewport ? undefined : 'prompt type'}
               title={
                 is_mac ? 'Change prompt type (⇧⌥)' : 'Change prompt type (Shift+Alt)'