Rename PromptTypeDropdown to InlineDropdown and implement it in the Home view to allow workspace root selection

- in multi root folder workspaces, place a dropdown to set an active workspace tasks are shown for. Therefore Tabs component will be always used to show 'add task' action.
- the workspace's root folder selection dropdown should be rendered in tabs' actions
- rename 'prompt type dropdown' to 'inline dropdown', use it for workspace's root folder selection for tasks.
- for tasks, wrap the 'inline dropdown' in a proper relative div so it is not rendered over the add button

Author: robertpiosik

apps/editor/src/views/panel/frontend/Home/Home.module.scss

@@ -114,19 +114,14 @@
     width: 100%;
   }
 
-  &__tasks {
-    width: 100%;
+  &__workspace-dropdown {
+    position: relative;
+    height: 24px;
+    flex: 1;
   }
 
-  &__tasks-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1px 14px 3px 12px;
-    font-size: 11px;
-    font-weight: bold;
-    color: var(--cwc-text-color-dimmed);
-    opacity: 0.8;
+  &__tasks {
+    width: 100%;
   }
 }
 
@@ -174,37 +169,3 @@
     transform: translateY(-15px);
   }
 }
-
-.add-button {
-  appearance: none;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  height: 16px;
-  width: 16px;
-  color: var(--vscode-icon-foreground);
-  position: relative;
-  cursor: pointer;
-  flex-shrink: 0;
-
-  &:focus {
-    outline: none;
-  }
-
-  &::before {
-    font-family: 'codicon';
-    font-size: 14px;
-    content: '\ea60';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0.6;
-  }
-
-  &:hover::before {
-    opacity: 1;
-  }
-}
-

apps/editor/src/views/panel/frontend/Home/Home.tsx

@@ -17,6 +17,7 @@ import { Task } from '@shared/types/task'
 import { use_tasks } from './hooks/use-tasks'
 import { use_sticky_mode } from './hooks/use-sticky-mode'
 import { SettingsButton as UiSettingsButton } from '@ui/components/editor/panel/SettingsButton'
+import { InlineDropdown as UiInlineDropdown } from '@ui/components/editor/panel/InlineDropdown'
 
 type Props = {
   vscode: any
@@ -48,8 +49,12 @@ type Props = {
 export const Home: React.FC<Props> = (props) => {
   const { t } = use_translation()
   const [active_tab, set_active_tab] = useState<'tasks' | 'checkpoints'>('tasks')
+  const [active_workspace_root, set_active_workspace_root] = useState<string>()
   const { is_mode_sticky, is_hiding, responses_ref, mode_ref, handle_scroll } = use_sticky_mode()
 
+  const roots = Object.keys(props.tasks)
+  const active_root = active_workspace_root && roots.includes(active_workspace_root) ? active_workspace_root : roots[0]
+
   useEffect(() => {
     const handle_mouse_up = (event: MouseEvent) => {
       if (props.is_active && event.button == 4) {
@@ -163,19 +168,32 @@ export const Home: React.FC<Props> = (props) => {
               on_tab_change={(id) => set_active_tab(id as 'tasks' | 'checkpoints')}
               actions={
                 active_tab == 'tasks' ? (
-                  Object.keys(props.tasks).length == 1 ? (
-                    <UiIconButton
-                      codicon_icon="add"
-                      title={t('home.tasks.add')}
-                      on_click={(e) => {
-                        e.stopPropagation()
-                        const roots = Object.keys(props.tasks)
-                        if (roots.length > 0) {
-                          handle_add(roots[0], props.tasks[roots[0]], 'top')
-                        }
-                      }}
-                    />
-                  ) : undefined
+                  <>
+                    {roots.length > 1 && (
+                      <div className={styles['inner__workspace-dropdown']}>
+                        <UiInlineDropdown
+                          options={roots.map((root) => ({
+                            value: root,
+                            label: root.split(/[\\/]/).pop() || root
+                          }))}
+                          selected_value={active_root!}
+                          on_change={(val) => set_active_workspace_root(val)}
+                        />
+                      </div>
+                    )}
+                    {roots.length > 0 && (
+                      <UiIconButton
+                        codicon_icon="add"
+                        title={t('home.tasks.add')}
+                        on_click={(e) => {
+                          e.stopPropagation()
+                          if (active_root) {
+                            handle_add(active_root, props.tasks[active_root], 'top')
+                          }
+                        }}
+                      />
+                    )}
+                  </>
                 ) : (
                   <>
                     {props.has_temp_checkpoint && (
@@ -213,70 +231,43 @@ export const Home: React.FC<Props> = (props) => {
 
             {active_tab == 'tasks' && (
               <>
-                {Object.keys(props.tasks).length == 1 &&
-                  props.tasks[Object.keys(props.tasks)[0]].length == 0 && (
-                    <div className={styles.inner__empty}>
-                      {t('home.tasks.empty')}
-                    </div>
-                  )}
-                {Object.entries(props.tasks)
-                  .filter(([_, tasks], __, arr) =>
-                    arr.length == 1 ? tasks.length > 0 : true
-                  )
-                  .map(([workspace_root_folder, tasks], _, entries) => (
-                    <div
-                      key={workspace_root_folder}
-                      className={styles.inner__tasks}
-                    >
-                      {entries.length > 1 && (
-                        <div className={styles['inner__tasks-header']}>
-                          <span>
-                            {workspace_root_folder.split(/[\\/]/).pop() ||
-                              workspace_root_folder}
-                          </span>
-                          <button
-                            className={styles['add-button']}
-                            title={t('home.tasks.add')}
-                            onClick={() => {
-                              handle_add(workspace_root_folder, tasks, 'top')
-                            }}
-                          />
-                        </div>
-                      )}
-                      {tasks.length > 0 && (
-                        <UiTasks
-                          tasks={tasks}
-                          on_reorder={(new_tasks) =>
-                            handle_reorder(workspace_root_folder, new_tasks)
-                          }
-                          on_change={(updated_task) => {
-                            handle_change(
-                              workspace_root_folder,
-                              tasks,
-                              updated_task
-                            )
-                          }}
-                          on_add={() => {
-                            handle_add(workspace_root_folder, tasks)
-                          }}
-                          on_add_subtask={(parent_task) => {
-                            handle_add_subtask(
-                              workspace_root_folder,
-                              tasks,
-                              parent_task
-                            )
-                          }}
-                          on_delete={(timestamp) => {
-                            handle_delete(workspace_root_folder, timestamp)
-                          }}
-                          on_forward={(text) => {
-                            props.on_task_forward(text)
-                          }}
-                          placeholder={t('home.tasks.placeholder')}
-                        />
-                      )}
-                    </div>
-                  ))}
+                {roots.length == 0 && (
+                  <div className={styles.inner__empty}>
+                    {t('home.tasks.empty')}
+                  </div>
+                )}
+                {active_root && (
+                  <div className={styles.inner__tasks}>
+                    {props.tasks[active_root].length == 0 ? (
+                      <div className={styles.inner__empty}>
+                        {t('home.tasks.empty')}
+                      </div>
+                    ) : (
+                      <UiTasks
+                        tasks={props.tasks[active_root]}
+                        on_reorder={(new_tasks) =>
+                          handle_reorder(active_root, new_tasks)
+                        }
+                        on_change={(updated_task) => {
+                          handle_change(active_root, props.tasks[active_root], updated_task)
+                        }}
+                        on_add={() => {
+                          handle_add(active_root, props.tasks[active_root])
+                        }}
+                        on_add_subtask={(parent_task) => {
+                          handle_add_subtask(active_root, props.tasks[active_root], parent_task)
+                        }}
+                        on_delete={(timestamp) => {
+                          handle_delete(active_root, timestamp)
+                        }}
+                        on_forward={(text) => {
+                          props.on_task_forward(text)
+                        }}
+                        placeholder={t('home.tasks.placeholder')}
+                      />
+                    )}
+                  </div>
+                )}
               </>
             )}
 

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

@@ -2,7 +2,7 @@ import { useRef, useCallback } from 'react'
 import { MODE, Mode } from '@/views/panel/types/main-view-mode'
 import { use_is_narrow_viewport, use_is_mac } from '@shared/hooks'
 import { ApiPromptType, WebPromptType } from '@shared/types/prompt-types'
-import { PromptTypeDropdown } from '@ui/components/editor/panel/PromptTypeDropdown'
+import { InlineDropdown as UiInlineDropdown } from '@ui/components/editor/panel/InlineDropdown'
 import { IconButton as UiIconButton } from '@ui/components/editor/common/IconButton'
 import styles from './Header.module.scss'
 import {
@@ -74,7 +74,7 @@ export const Header: React.FC<Props> = (props) => {
           ref={dropdown_container_ref}
         >
           {props.mode == MODE.WEB && (
-            <PromptTypeDropdown
+            <UiInlineDropdown
               options={Object.entries(web_prompt_type_labels).map(
                 ([value, label]) => ({
                   value: value as WebPromptType,
@@ -94,7 +94,7 @@ export const Header: React.FC<Props> = (props) => {
             />
           )}
           {props.mode == MODE.API && (
-            <PromptTypeDropdown
+            <UiInlineDropdown
               options={Object.entries(api_prompt_type_labels).map(
                 ([value, label]) => ({
                   value: value as ApiPromptType,

…eDropdown/PromptTypeDropdown.module.scss …nlineDropdown/InlineDropdown.module.scsspackages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.module.scss renamed to packages/ui/src/components/editor/panel/InlineDropdown/InlineDropdown.module.scss packages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.module.scss renamed to packages/ui/src/components/editor/panel/InlineDropdown/InlineDropdown.module.scss

@@ -1,3 +1,5 @@
+// InlineDropdown styles
+
 .container {
   position: absolute;
   top: 0;

…eDropdown/PromptTypeDropdown.stories.tsx …nlineDropdown/InlineDropdown.stories.tsxpackages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.stories.tsx renamed to packages/ui/src/components/editor/panel/InlineDropdown/InlineDropdown.stories.tsx packages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.stories.tsx renamed to packages/ui/src/components/editor/panel/InlineDropdown/InlineDropdown.stories.tsx

@@ -1,8 +1,8 @@
-import { PromptTypeDropdown } from './PromptTypeDropdown'
+import { InlineDropdown } from './InlineDropdown'
 import { useState } from 'react'
 
 export default {
-  component: PromptTypeDropdown
+  component: InlineDropdown
 }
 
 export const Default = () => {
@@ -14,7 +14,7 @@ export const Default = () => {
 
   return (
     <div style={{ width: '200px' }}>
-      <PromptTypeDropdown
+      <InlineDropdown
         options={options}
         selected_value={selected}
         on_change={set_selected}
@@ -32,7 +32,7 @@ export const WithInfo = () => {
 
   return (
     <div style={{ width: '200px' }}>
-      <PromptTypeDropdown
+      <InlineDropdown
         options={options}
         selected_value={selected}
         on_change={set_selected}
@@ -51,7 +51,7 @@ export const LongList = () => {
 
   return (
     <div style={{ width: '200px' }}>
-      <PromptTypeDropdown
+      <InlineDropdown
         options={options}
         selected_value={selected}
         on_change={set_selected}

…romptTypeDropdown/PromptTypeDropdown.tsx …/panel/InlineDropdown/InlineDropdown.tsxpackages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.tsx renamed to packages/ui/src/components/editor/panel/InlineDropdown/InlineDropdown.tsx packages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.tsx renamed to packages/ui/src/components/editor/panel/InlineDropdown/InlineDropdown.tsx

@@ -1,9 +1,9 @@
 import { useState, useRef, useEffect } from 'react'
-import styles from './PromptTypeDropdown.module.scss'
+import styles from './InlineDropdown.module.scss'
 import cn from 'classnames'
 import { DropdownMenu } from '../../common/DropdownMenu'
 
-export namespace PromptTypeDropdown {
+export namespace InlineDropdown {
   export type Option<T extends string> = {
     value: T
     label: string
@@ -21,8 +21,8 @@ export namespace PromptTypeDropdown {
   }
 }
 
-export const PromptTypeDropdown = <T extends string>(
-  props: PromptTypeDropdown.Props<T>
+export const InlineDropdown = <T extends string>(
+  props: InlineDropdown.Props<T>
 ) => {
   const [is_open, set_is_open] = useState(false)
   const [just_opened, set_just_opened] = useState(false)

packages/ui/src/components/editor/panel/InlineDropdown/index.ts

@@ -0,0 +1,2 @@
+export * from './InlineDropdown'
+

packages/ui/src/components/editor/panel/PromptTypeDropdown/index.ts

@@ -1,11 +1,11 @@
 .tabs {
-  height: 28px;
+  height: 26px;
   padding: 0 12px;
   margin-bottom: 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid var(--cwc-border-color-dimmed);
+  gap: 14px;
 
   &__list {
     display: flex;
@@ -60,5 +60,8 @@
   &__actions {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
+    flex: 1;
+    gap: 8px;
   }
 }