Implement a toggleable "Quick Actions" panel above the footer, improving its display and interactivity

Author: robertpiosik

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

@@ -61,7 +61,7 @@
       display: flex;
       position: absolute;
       z-index: 1;
-      top: 20px;
+      top: 18px;
       right: 0;
       padding: var(--padding-1px) var(--padding-3px) var(--padding-6px)
         var(--padding-3px);

packages/vscode/src/view/frontend/home/HomeView/HomeView.module.scss

@@ -51,29 +51,31 @@
   color: var(--vscode-quickInput-foreground);
   border: 1px solid var(--vscode-widget-border);
   box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
+  pointer-events: none;
 
   &--visible {
     transform: translateY(0);
     opacity: 1;
+    pointer-events: all;
   }
 }
 
 .footer {
   display: flex;
-  overflow: hidden;
   gap: var(--padding-8px);
   padding: var(--padding-8px) var(--padding-12px);
   border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
 
   &__button {
     display: flex;
     align-items: center;
-    gap: var(--padding-6px);
+    gap: var(--padding-4px);
     height: 24px;
     padding: 0 5px;
     border-radius: var(--border-radius-4px);
     text-decoration: none;
     color: var(--vscode-foreground);
+    white-space: nowrap;
 
     &:hover {
       color: var(--vscode-foreground);
@@ -118,6 +120,32 @@
         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-widget-border);
+        border-right: 1px solid var(--vscode-widget-border);
+        transform: translateY(5px) rotate(45deg);
+        background-color: var(--vscode-quickInput-background);
+        transition: all 0.1s ease-in-out;
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    &--quick-actions-after-visible::after {
+      transform: rotate(45deg) translateY(0);
+      opacity: 1;
+    }
   }
 }
 

packages/vscode/src/view/frontend/home/HomeView/HomeView.tsx

@@ -476,67 +476,27 @@ export const HomeView: React.FC<Props> = (props) => {
         </a>
         <button
           className={cn(
-            'commands',
             styles.footer__button,
             styles['footer__button--outlined'],
-            is_showing_commands ? styles['footer__button--outlined-active'] : ''
+            is_showing_commands
+              ? styles['footer__button--outlined-active']
+              : '',
+            styles['footer__button--quick-actions'],
+            is_showing_commands
+              ? styles['footer__button--quick-actions-after-visible']
+              : ''
           )}
           onClick={() => {
             set_is_showing_commands(!is_showing_commands)
           }}
         >
-          COMMANDS
+          {is_showing_commands ? (
+            <span className="codicon codicon-chevron-down" />
+          ) : (
+            <span className="codicon codicon-chevron-up" />
+          )}
+          QUICK ACTIONS
         </button>
-        {/* <div className={styles['footer__commands']}>
-          <div className={styles['footer__commands__heading']}>
-            ONE-CLICK ACTIONS
-          </div>
-          <div className={styles['footer__commands__inner']}>
-            <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>
-        <div className={styles.footer__links}>
-          <div className={styles.footer__links__left}>
-            <a href="https://codeweb.chat/">
-              <span className="codicon codicon-book"></span>{' '}
-              <span>Documentation</span>
-            </a>
-          </div>
-          <div className={styles.footer__links__right}>
-            <a
-              href="#"
-              onClick={(e) => {
-                e.preventDefault()
-                props.on_review_click()
-              }}
-            >
-              <span className="codicon codicon-star-empty"></span>{' '}
-              <span>Rate</span>
-            </a>
-            <a href="https://buymeacoffee.com/robertpiosik">
-              <span className="codicon codicon-coffee"></span>{' '}
-              <span>Buy me a coffee</span>
-            </a>
-          </div>
-        </div> */}
       </div>
     </div>
   )