Animate target switch dropdown using CSS transitions

- should show targets with transition (use opacity and transform y)

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── prompts
                            ├── PromptField
                            │   ├── PromptField.module.scss
                            │   ├── PromptField.stories.tsx
                            │   ├── PromptField.tsx
                            │   ├── components
                            │   │   ├── CompletedTasks
                            │   │   │   ├── CompletedTasks.module.scss
                            │   │   │   ├── CompletedTasks.tsx
                            │   │   │   └── index.ts
                            │   │   ├── Footer
                            │   │   │   ├── Footer.module.scss
                            │   │   │   ├── Footer.tsx
                            │   │   │   └── index.ts
                            │   │   └── Tabs
                            │   │       ├── Tabs.module.scss
                            │   │       ├── Tabs.tsx
                            │   │       └── index.ts
                            │   ├── hooks
                            │   │   ├── use-drag-drop.ts
                            │   │   ├── use-dropdown.ts
                            │   │   ├── use-ghost-text.ts
                            │   │   ├── use-handlers
                            │   │   │   ├── handle-copy.ts
                            │   │   │   ├── handle-cut.ts
                            │   │   │   ├── handle-input-change.ts
                            │   │   │   ├── handle-input-click.ts
                            │   │   │   ├── handle-key-down.ts
                            │   │   │   ├── handle-paste.ts
                            │   │   │   ├── handle-submit.ts
                            │   │   │   ├── index.ts
                            │   │   │   ├── types.ts
                            │   │   │   ├── use-handlers.ts
                            │   │   │   └── utils.ts
                            │   │   └── use-keyboard-shortcuts.ts
                            │   └── index.ts
                            ├── Template
                            │   ├── Template.module.scss
                            │   ├── Template.tsx
                            │   └── index.ts
                            └── shared
                                ├── hooks
                                │   └── use-undo-redo.ts
                                └── symbols
                                    ├── caret.ts
                                    ├── get-highlighted-text.tsx
                                    ├── index.ts
                                    ├── position-mapping.ts
                                    ├── prompt-symbols.module.scss
                                    ├── reconstruct-raw-value.ts
                                    └── use-symbol-deletion.ts

Author: robertpiosik

packages/ui/src/components/editor/common/prompts/PromptField/components/Footer/Footer.module.scss

@@ -104,9 +104,18 @@
         position: absolute;
         bottom: 100%;
         left: 50%;
-        transform: translateX(-50%);
+        transform: translateX(-50%) translateY(4px);
         padding-bottom: 4px;
         z-index: 1;
+        opacity: 0;
+
+        &--open {
+          opacity: 1;
+          transform: translateX(-50%) translateY(0);
+          transition:
+            opacity 120ms ease-in-out,
+            transform 120ms ease-in-out;
+        }
       }
 
       &__dropdown {

packages/ui/src/components/editor/common/prompts/PromptField/components/Footer/Footer.tsx

@@ -424,41 +424,44 @@ export const Footer: React.FC<Props> = (props) => {
         >
           {props.props.target && props.props.on_target_change && (
             <div className={styles['footer__right__target-switch']}>
-              {(is_target_dropdown_open || props.is_alt_pressed) && (
-                <div
-                  className={
-                    styles['footer__right__target-switch__dropdown-wrapper']
+              <div
+                className={cn(
+                  styles['footer__right__target-switch__dropdown-wrapper'],
+                  {
+                    [styles[
+                      'footer__right__target-switch__dropdown-wrapper--open'
+                    ]]: is_target_dropdown_open || props.is_alt_pressed
                   }
+                )}
+              >
+                <div
+                  className={styles['footer__right__target-switch__dropdown']}
+                  onClick={(e) => e.stopPropagation()}
                 >
-                  <div
-                    className={styles['footer__right__target-switch__dropdown']}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {(['WEB', 'API', 'CLI'] as Target[]).map((t, idx) => (
-                      <button
-                        key={t}
-                        className={
-                          styles['footer__right__target-switch__dropdown-item']
-                        }
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          props.props.on_target_change!(t)
-                          set_is_target_dropdown_open(false)
-                        }}
-                        disabled={t === props.props.target}
-                      >
-                        {props.is_alt_pressed && t !== props.props.target ? (
-                          <KeycapWrapper char={(idx + 1).toString()}>
-                            <span>{t}</span>
-                          </KeycapWrapper>
-                        ) : (
-                          t
-                        )}
-                      </button>
-                    ))}
-                  </div>
+                  {(['WEB', 'API', 'CLI'] as Target[]).map((t, idx) => (
+                    <button
+                      key={t}
+                      className={
+                        styles['footer__right__target-switch__dropdown-item']
+                      }
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        props.props.on_target_change!(t)
+                        set_is_target_dropdown_open(false)
+                      }}
+                      disabled={t === props.props.target}
+                    >
+                      {props.is_alt_pressed && t !== props.props.target ? (
+                        <KeycapWrapper char={(idx + 1).toString()}>
+                          <span>{t}</span>
+                        </KeycapWrapper>
+                      ) : (
+                        t
+                      )}
+                    </button>
+                  ))}
                 </div>
-              )}
+              </div>
               <button
                 className={cn(
                   styles['footer__right__submit__button'],