Implement workspace folder selection for tasks in the panel

- update_task_in_tree, add_subtask_to_tree should accept params variable, dont destructure in body
- move handlers from `apps/editor/src/views/panel/frontend/hooks/use-tasks.ts` to `apps/editor/src/views/panel/frontend/Home/hooks/use-tasks.ts`
- current behavior: in multi-root folder workspace, user can change tasks-related folder in a dropdown. expected behavior: They should be shown a quick pick through backend instead.
- task-folder selecting quick pick should highlight currently piced folder
- task-folder selecting quick pick should have title 'Workspace Folders', and close button on the right side.
- the task's folder selector should not grow longer than necessary
- the task's folder selector should have hover highlight

Author: robertpiosik

apps/editor/src/views/panel/backend/message-handlers/handle-pick-tasks-workspace.ts

@@ -0,0 +1,59 @@
+import * as vscode from 'vscode'
+import { PanelProvider } from '../panel-provider'
+import { PickTasksWorkspaceMessage } from '../../types/messages'
+
+export const handle_pick_tasks_workspace = async (
+  panel_provider: PanelProvider,
+  message: PickTasksWorkspaceMessage
+) => {
+  const items: vscode.QuickPickItem[] = message.roots.map((root) => ({
+    label: root.split(/[\\/]/).pop() || root,
+    description: root
+  }))
+
+  const quick_pick = vscode.window.createQuickPick()
+  quick_pick.items = items
+  quick_pick.placeholder = 'Select workspace folder for tasks'
+  quick_pick.matchOnDescription = true
+  quick_pick.title = 'Workspace Folders'
+  quick_pick.buttons = [
+    { iconPath: new vscode.ThemeIcon('close'), tooltip: 'Close' }
+  ]
+
+  if (message.active_root) {
+    const active_item = items.find(
+      (item) => item.description === message.active_root
+    )
+    if (active_item) {
+      quick_pick.activeItems = [active_item]
+    }
+  }
+
+  const selected = await new Promise<vscode.QuickPickItem | undefined>(
+    (resolve) => {
+      let is_accepted = false
+      quick_pick.onDidTriggerButton(() => {
+        quick_pick.hide()
+      })
+      quick_pick.onDidAccept(() => {
+        is_accepted = true
+        resolve(quick_pick.selectedItems[0])
+        quick_pick.hide()
+      })
+      quick_pick.onDidHide(() => {
+        if (!is_accepted) {
+          resolve(undefined)
+        }
+        quick_pick.dispose()
+      })
+      quick_pick.show()
+    }
+  )
+
+  if (selected && selected.description) {
+    panel_provider.send_message({
+      command: 'TASKS_WORKSPACE_PICKED',
+      root: selected.description
+    })
+  }
+}

apps/editor/src/views/panel/backend/message-handlers/index.ts

@@ -71,3 +71,4 @@ export * from './handle-save-find-relevant-files-shrink-source-code'
 export * from './handle-update-last-used-web-configuration-or-group'
 export * from './handle-return-home-and-switch-to-edit-files'
 export * from './checkpoints/handlers'
+export * from './handle-pick-tasks-workspace'

apps/editor/src/views/panel/backend/panel-provider.ts

@@ -92,7 +92,8 @@ import {
   handle_toggle_checkpoint_star,
   handle_restore_checkpoint,
   handle_restore_temp_checkpoint,
-  handle_update_checkpoint_description
+  handle_update_checkpoint_description,
+  handle_pick_tasks_workspace
 } from './message-handlers'
 import { handle_update_api_configuration } from './message-handlers/handle-update-api-configuration'
 import { handle_pick_model_provider } from './message-handlers/handle-pick-model-provider'
@@ -987,6 +988,8 @@ export class PanelProvider implements vscode.WebviewViewProvider {
             )
           } else if (message.command == 'GET_VOICE_INPUT_PUSH_TO_TALK') {
             this._send_voice_input_push_to_talk()
+          } else if (message.command == 'PICK_TASKS_WORKSPACE') {
+            await handle_pick_tasks_workspace(this, message)
           }
         } catch (error: any) {
           Logger.error({

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

@@ -119,9 +119,28 @@
 
   &__workspace-dropdown {
     position: relative;
+    display: flex;
+    align-items: center;
     height: 24px;
-    flex: 1;
-    margin-right: 6px;
+    min-width: 0;
+    margin-right: 2px;
+
+    &-button {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--vscode-descriptionForeground);
+      font-size: 11px;
+      min-width: 0;
+      padding: 2px 4px;
+      border-radius: 5px;
+
+      &:hover {
+        background-color: var(--vscode-toolbar-hoverBackground);
+        color: var(--vscode-icon-foreground);
+      }
+    }
   }
 
   &__tasks {

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

@@ -5,19 +5,21 @@ import { Checkpoints as UiCheckpoints } from '@ui/components/editor/panel/Checkp
 import { ModeButton as UiModeButton } from '@ui/components/editor/panel/ModeButton'
 import cn from 'classnames'
 import { post_message } from '../utils/post-message'
-import { Checkpoint, FrontendMessage } from '@/views/panel/types/messages'
+import {
+  Checkpoint,
+  FrontendMessage,
+  BackendMessage
+} from '@/views/panel/types/messages'
 import { Responses as UiResponses } from '@ui/components/editor/panel/Responses'
 import { ResponseHistoryItem } from '@shared/types/response-history-item'
 import { Separator as UiSeparator } from '@ui/components/editor/panel/Separator'
 import { Tabs as UiTabs } from '@ui/components/editor/panel/Tabs'
 import { Translation, use_translation } from '../i18n/use-translation'
 import { IconButton as UiIconButton } from '@ui/components/editor/common/IconButton'
 import { Tasks as UiTasks } from '@ui/components/editor/panel/Tasks'
-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
@@ -38,9 +40,6 @@ type Props = {
   on_response_history_item_remove: (created_at: number) => void
   on_edit_checkpoint_description: (timestamp: number) => void
   on_delete_checkpoint: (timestamp: number) => void
-  tasks: Record<string, Task[]>
-  on_tasks_change: (root: string, tasks: Task[]) => void
-  on_task_delete: (root: string, timestamp: number) => void
   on_task_forward: (text: string) => void
   is_setup_complete: boolean
   is_connected: boolean
@@ -61,12 +60,32 @@ export const Home: React.FC<Props> = (props) => {
     handle_scroll
   } = use_sticky_mode(props.is_active)
 
-  const roots = Object.keys(props.tasks)
+  const {
+    tasks,
+    handle_reorder,
+    handle_change,
+    handle_add,
+    handle_add_subtask,
+    handle_delete
+  } = use_tasks(props.vscode)
+
+  const roots = Object.keys(tasks)
   const active_root =
     active_workspace_root && roots.includes(active_workspace_root)
       ? active_workspace_root
       : roots[0]
 
+  useEffect(() => {
+    const handle_message = (event: MessageEvent<BackendMessage>) => {
+      const message = event.data
+      if (message.command == 'TASKS_WORKSPACE_PICKED') {
+        set_active_workspace_root(message.root)
+      }
+    }
+    window.addEventListener('message', handle_message)
+    return () => window.removeEventListener('message', handle_message)
+  }, [])
+
   useEffect(() => {
     const handle_mouse_up = (event: MouseEvent) => {
       if (props.is_active && event.button == 4) {
@@ -78,14 +97,6 @@ export const Home: React.FC<Props> = (props) => {
     return () => window.removeEventListener('mouseup', handle_mouse_up)
   }, [props.is_active, props.on_go_forward])
 
-  const {
-    handle_reorder,
-    handle_change,
-    handle_add,
-    handle_add_subtask,
-    handle_delete
-  } = use_tasks(props.on_tasks_change, props.on_task_delete)
-
   const handle_settings_click = () => {
     post_message(props.vscode, {
       command: 'EXECUTE_COMMAND',
@@ -186,15 +197,32 @@ export const Home: React.FC<Props> = (props) => {
                   <>
                     {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)}
-                          info={t('home.folder')}
-                        />
+                        <div
+                          className={styles['inner__workspace-dropdown-button']}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            post_message(props.vscode, {
+                              command: 'PICK_TASKS_WORKSPACE',
+                              roots,
+                              active_root
+                            } as FrontendMessage)
+                          }}
+                          title={t('home.folder')}
+                        >
+                          <span
+                            style={{
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap'
+                            }}
+                          >
+                            {active_root?.split(/[\\/]/).pop() || active_root}
+                          </span>
+                          <span
+                            className="codicon codicon-unfold"
+                            style={{ fontSize: '12px', flexShrink: 0 }}
+                          />
+                        </div>
                       </div>
                     )}
                     {roots.length > 0 && (
@@ -204,11 +232,7 @@ export const Home: React.FC<Props> = (props) => {
                         on_click={(e) => {
                           e.stopPropagation()
                           if (active_root) {
-                            handle_add(
-                              active_root,
-                              props.tasks[active_root],
-                              'top'
-                            )
+                            handle_add(active_root, tasks[active_root], 'top')
                           }
                         }}
                       />
@@ -258,30 +282,30 @@ export const Home: React.FC<Props> = (props) => {
                 )}
                 {active_root && (
                   <div className={styles.inner__tasks}>
-                    {props.tasks[active_root].length == 0 ? (
+                    {tasks[active_root].length == 0 ? (
                       <div className={styles.inner__empty}>
                         {t('home.tasks.empty')}
                       </div>
                     ) : (
                       <UiTasks
-                        tasks={props.tasks[active_root]}
+                        tasks={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],
+                            tasks[active_root],
                             updated_task
                           )
                         }}
                         on_add={() => {
-                          handle_add(active_root, props.tasks[active_root])
+                          handle_add(active_root, tasks[active_root])
                         }}
                         on_add_subtask={(parent_task) => {
                           handle_add_subtask(
                             active_root,
-                            props.tasks[active_root],
+                            tasks[active_root],
                             parent_task
                           )
                         }}