Remove the Quick Actions dropdown and display its commands directly in the footer

Author: robertpiosik

packages/ui/src/components/editor/QuickAction/QuickAction.module.scss

@@ -14,13 +14,15 @@ export const handle_create_preset = async (
     [
       {
         label: 'Preset',
-        description: '(will appear at the top of the list)',
-        detail: 'Your favorite chatbot, preconfigured.'
+        description: 'Placed at the top of the list',
+        detail:
+          'Custom chat configuration with model, prompt prefix/suffix and more.'
       },
       {
         label: 'Group',
-        description: '(will appear at the bottom of the list)',
-        detail: 'Simultaneous initializations of selected presets.'
+        description: 'Placed at the bottom of the list',
+        detail:
+          'Simultaneous initializations of selected presets, shared preffix/suffix.'
       }
     ],
     {

packages/ui/src/components/editor/QuickAction/QuickAction.stories.tsx

@@ -11,31 +11,6 @@
   padding: var(--padding-3px) 0 var(--padding-10px) 0;
 }
 
-.commands {
-  position: absolute;
-  z-index: 1;
-  bottom: calc(24px + 16px + 1px + 4px);
-  right: var(--padding-4px);
-  padding: var(--padding-4px) 0;
-  width: 65vw;
-  border-radius: var(--border-radius-4px);
-  transform: translateY(10px);
-  transition: transform 0.15s var(--transition-timing-function),
-    opacity 0.15s var(--transition-timing-function);
-  opacity: 0;
-  background-color: var(--vscode-quickInput-background);
-  color: var(--vscode-quickInput-foreground);
-  border: 1px solid var(--vscode-focusBorder);
-  box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
-  pointer-events: none;
-
-  &--visible {
-    transform: translateY(0);
-    opacity: 1;
-    pointer-events: all;
-  }
-}
-
 .footer {
   position: relative;
   display: flex;
@@ -50,6 +25,11 @@
     overflow: hidden;
   }
 
+  &__right {
+    display: flex;
+    gap: var(--padding-8px);
+  }
+
   &__button {
     display: flex;
     align-items: center;
@@ -99,39 +79,6 @@
         border-color: var(--vscode-commandCenter-activeBorder);
       }
     }
-
-    &--outlined-active {
-      border-color: var(--vscode-focusBorder);
-      &:hover {
-        border-color: var(--vscode-focusBorder);
-      }
-    }
-
-    &--quick-actions {
-      position: relative;
-      &::after {
-        content: '';
-        position: absolute;
-        z-index: 2;
-        top: -19px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 10px;
-        height: 10px;
-        border-bottom: 1px solid var(--vscode-focusBorder);
-        border-right: 1px solid var(--vscode-focusBorder);
-        transform: translateY(10px) rotate(45deg);
-        background-color: var(--vscode-quickInput-background);
-        transition: all 0.15s var(--transition-timing-function);
-        opacity: 0;
-        pointer-events: none;
-      }
-    }
-
-    &--quick-actions-after-visible::after {
-      transform: rotate(45deg) translateY(0);
-      opacity: 1;
-    }
   }
 
   &__heart {

packages/ui/src/components/editor/QuickAction/QuickAction.tsx

@@ -13,7 +13,6 @@ import { ApiMode, WebMode } from '@shared/types/modes'
 import { Dropdown as UiDropdown } from '@ui/components/editor/Dropdown'
 import { Icon } from '@ui/components/editor/Icon'
 import cn from 'classnames'
-import { QuickAction as UiQuickAction } from '@ui/components/editor/QuickAction'
 import { IconButton } from '@ui/components/editor/IconButton/IconButton'
 import { Scrollable } from '@ui/components/editor/Scrollable'
 import { BrowserExtensionMessage as UiBrowserExtensionMessage } from '@ui/components/editor/BrowserExtensionMessage'
@@ -93,8 +92,6 @@ export const HomeView: React.FC<Props> = (props) => {
   const switch_container_ref = useRef<HTMLDivElement>(null)
   const [is_buy_me_coffee_hovered, set_is_buy_me_coffee_hovered] =
     useState(false)
-  const [is_showing_pinned_commands, set_is_showing_pinned_commands] =
-    useState(false)
 
   const calculate_dropdown_max_width = () => {
     if (!container_ref.current || !switch_container_ref.current) return
@@ -441,31 +438,6 @@ export const HomeView: React.FC<Props> = (props) => {
           )}
         </div>
       </Scrollable>
-      <div
-        className={cn(styles.commands, {
-          [styles['commands--visible']]: is_showing_pinned_commands
-        })}
-      >
-        <UiQuickAction
-          title="Apply Chat Response"
-          description="Integrate copied message or a code block"
-          on_click={() =>
-            props.on_quick_action_click('codeWebChat.applyChatResponse')
-          }
-        />
-        <UiQuickAction
-          title="Revert Last Changes"
-          description="Restore saved state of the codebase"
-          on_click={() => props.on_quick_action_click('codeWebChat.revert')}
-        />
-        <UiQuickAction
-          title="Commit Changes"
-          description="Generate a commit message and commit"
-          on_click={() =>
-            props.on_quick_action_click('codeWebChat.commitChanges')
-          }
-        />
-      </div>
 
       <div className={styles.footer}>
         <div className={styles.footer__left}>
@@ -501,31 +473,44 @@ export const HomeView: React.FC<Props> = (props) => {
             title="Join subreddit"
           >
             <Icon variant="REDDIT" />
-            <span style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>
-              COMMUNITY
-            </span>
           </a>
         </div>
-        <div>
+        <div className={styles.footer__right}>
+          <button
+            className={cn(
+              styles.footer__button,
+              styles['footer__button--outlined']
+            )}
+            onClick={() => {
+              props.on_quick_action_click('codeWebChat.applyChatResponse')
+            }}
+            title="Integrate copied message or a code block"
+          >
+            APPLY
+          </button>
+          <button
+            className={cn(
+              styles.footer__button,
+              styles['footer__button--outlined']
+            )}
+            onClick={() => {
+              props.on_quick_action_click('codeWebChat.revert')
+            }}
+            title="Restore saved state of the codebase"
+          >
+            REVERT
+          </button>
           <button
             className={cn(
               styles.footer__button,
-              styles['footer__button--outlined'],
-              is_showing_pinned_commands
-                ? styles['footer__button--outlined-active']
-                : '',
-              styles['footer__button--quick-actions'],
-              is_showing_pinned_commands
-                ? styles['footer__button--quick-actions-after-visible']
-                : ''
+              styles['footer__button--outlined']
             )}
             onClick={() => {
-              set_is_showing_pinned_commands(!is_showing_pinned_commands)
+              props.on_quick_action_click('codeWebChat.commitChanges')
             }}
-            title="Handy access to selected features"
+            title="Generate a commit message and commit"
           >
-            <span className="codicon codicon-pinned" />
-            PINNED COMMANDS
+            COMMIT
           </button>
         </div>
         {is_buy_me_coffee_hovered &&