Refactor progress visibility and dropdown info display for improved UI consistency

Author: robertpiosik

apps/editor/src/commands/apply-chat-response-command/apply-chat-response-command.ts

@@ -144,7 +144,7 @@ export const apply_chat_response_command = (params: {
           params.panel_provider.send_message({
             command: 'SHOW_PROGRESS',
             title: 'Preparing response preview...',
-            delay_visibility: file_count < 5
+            delay_visibility: file_count == 1
           })
         }
 

apps/editor/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx

@@ -29,7 +29,7 @@ type Props = {
 export const Header: React.FC<Props> = (props) => {
   const { t } = use_translation()
   const header_ref = useRef<HTMLDivElement>(null)
-  const is_narrow_viewport = use_is_narrow_viewport(330)
+  const is_narrow_viewport = use_is_narrow_viewport(290)
   const is_mac = use_is_mac()
   const header_left_ref = useRef<HTMLDivElement>(null)
   const dropdown_container_ref = useRef<HTMLDivElement>(null)
@@ -85,9 +85,7 @@ export const Header: React.FC<Props> = (props) => {
               selected_value={props.web_prompt_type}
               on_change={props.on_web_prompt_type_change}
               menu_max_width="calc(100vw - 52px)"
-              info={
-                is_narrow_viewport ? undefined : t('panel.header.prompt-type')
-              }
+              info={t('panel.header.prompt-type')}
               title={
                 is_mac
                   ? 'Change prompt type (⇧⌥)'

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

@@ -17,6 +17,14 @@
   }
 }
 
+.header {
+  padding: 0 6px 4px 6px;
+  font-size: 12px;
+  color: var(--cwc-text-color-dimmed);
+  border-bottom: 1px solid var(--cwc-border-color-dimmed);
+  margin-bottom: 4px;
+}
+
 .item {
   display: flex;
   justify-content: space-between;

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

@@ -14,6 +14,7 @@ export namespace DropdownMenu {
     items: Item[]
     underline_non_selected_items?: boolean
     max_width?: number | string
+    info?: string
   }
 }
 
@@ -26,6 +27,7 @@ export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
   return (
     <div className={styles.menu} style={{ maxWidth: props.max_width }}>
       <div className={styles.menu__inner}>
+        {props.info && <div className={styles.header}>{props.info}</div>}
         {props.items.map((item, index) => {
           const is_selected = item.is_selected && is_preselection_respected
           const should_underline =

packages/ui/src/components/editor/panel/Dropdown/Dropdown.module.scss

@@ -32,13 +32,6 @@
     text-align: left;
   }
 
-  &__info {
-    font-size: 11px;
-    color: var(--cwc-text-color-dimmed);
-    white-space: nowrap;
-    padding-left: 3px;
-  }
-
   &__icon {
     color: var(--vscode-icon-foreground);
   }

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

@@ -143,9 +143,6 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
         <span className={styles.button__label}>
           {selected_option ? selected_option.label : 'Select an option'}
         </span>
-        {props.info && (
-          <span className={styles.button__info}>{props.info}</span>
-        )}
         {is_open ? (
           <span
             className={cn('codicon', 'codicon-chevron-up', styles.button__icon)}
@@ -171,6 +168,7 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
           }))}
           underline_non_selected_items={opened_by_shortcut.current}
           max_width={props.menu_max_width}
+          info={props.info}
         />
       )}
     </div>