Make completed tasks list collapsible and keep header actions visible when expanded

- clicking anywhere on completed tasks should collapse them
- once opened, show 'clear session' at all times

└── 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

Author: robertpiosik

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

@@ -28,6 +28,7 @@
     opacity: 0;
   }
 
+  &--expanded &__right,
   &:hover &__right {
     opacity: 1;
   }
@@ -49,18 +50,23 @@
   }
 }
 
+.tasks-list {
+  cursor: pointer;
+}
+
 .completed-task {
   padding: 2px 7px;
-  pointer-events: none;
   opacity: var(--dimmed-opacity);
 
   &__checkbox {
     float: left;
     display: flex;
     margin: 2px 5px 0 0;
+    pointer-events: none;
   }
 
   &__text {
     display: inline;
+    pointer-events: none;
   }
 }

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

@@ -100,7 +100,10 @@ export const CompletedTasks: React.FC<CompletedTasksProps> = ({
         )}
       </div>
       {is_expanded && (
-        <>
+        <div
+          className={styles['tasks-list']}
+          onClick={() => set_is_expanded(false)}
+        >
           {[...tasks].reverse().map((task, idx) => (
             <CompletedTask
               key={idx}
@@ -109,7 +112,7 @@ export const CompletedTasks: React.FC<CompletedTasksProps> = ({
               is_web_target={is_web_target}
             />
           ))}
-        </>
+        </div>
       )}
     </>
   )