Implement a hierarchical task management feature in the Home view with support for persistent storage and nested subtasks

Author: robertpiosik

packages/shared/src/constants/dictionary.ts

@@ -7,6 +7,8 @@ export const dictionary = {
 
   information_message: {
     ALL_CHECKPOINTS_CLEARED: 'All checkpoints have been cleared.',
+    TASK_DELETED: 'Task deleted.',
+    TASK_COPIED_TO_CLIPBOARD: 'Task copied to clipboard.',
     ALL_CHECKED_FILES_UNCAHNGED_SINCE_COMMIT: (
       folder_name: string,
       commit_hash: string

packages/shared/src/types/task.ts

@@ -0,0 +1,7 @@
+export type Task = {
+  text: string
+  is_checked: boolean
+  created_at: number
+  is_collapsed?: boolean
+  children?: Task[]
+}

packages/ui/src/components/editor/common/SimpleCheckbox/SimpleCheckbox.module.scss

@@ -0,0 +1,37 @@
+.checkbox {
+  appearance: none;
+  height: 15px;
+  width: 15px;
+  color: var(--vscode-checkbox-foreground);
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::before {
+    font-family: 'codicon';
+    content: '\eab2';
+    font-size: 13px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0.3;
+  }
+
+  &:checked::before {
+    opacity: 1;
+  }
+
+  &:hover::before {
+    opacity: 0.5;
+  }
+
+  &:checked:hover::before {
+    opacity: 1;
+  }
+}

packages/ui/src/components/editor/common/SimpleCheckbox/SimpleCheckbox.stories.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import { SimpleCheckbox } from './SimpleCheckbox'
+
+export default {
+  component: SimpleCheckbox
+}
+
+export const Default = () => {
+  const [checked, set_checked] = useState(false)
+
+  return (
+    <div style={{ padding: '20px', background: 'var(--vscode-sideBar-background)' }}>
+      <SimpleCheckbox
+        checked={checked}
+        on_change={set_checked}
+        title="Toggle simple checkbox"
+      />
+    </div>
+  )
+}

packages/ui/src/components/editor/common/SimpleCheckbox/SimpleCheckbox.tsx

@@ -0,0 +1,25 @@
+import { FC, ChangeEvent } from 'react'
+import styles from './SimpleCheckbox.module.scss'
+
+type Props = {
+  checked: boolean
+  on_change: (checked: boolean) => void
+  title?: string
+}
+
+export const SimpleCheckbox: FC<Props> = (props) => {
+  const handle_change = (e: ChangeEvent<HTMLInputElement>) => {
+    props.on_change(e.target.checked)
+  }
+
+  return (
+    <input
+      type="checkbox"
+      className={styles.checkbox}
+      checked={props.checked}
+      onChange={handle_change}
+      onClick={(e) => e.stopPropagation()}
+      title={props.title}
+    />
+  )
+}

packages/ui/src/components/editor/common/SimpleCheckbox/index.ts

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

packages/ui/src/components/editor/common/Textarea/Textarea.tsx

@@ -22,7 +22,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, Props>(
     const set_ref = React.useCallback(
       (node: HTMLTextAreaElement | null) => {
         internal_ref.current = node
-        if (typeof ref === 'function') {
+        if (typeof ref == 'function') {
           ref(node)
         } else if (ref) {
           ref.current = node
@@ -42,7 +42,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, Props>(
     }, [])
 
     const handle_key_down = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (e.key == 'Enter' && !e.shiftKey) {
+      if ((e.key == 'Enter' || e.key == 'Escape') && !e.shiftKey) {
         e.preventDefault()
         e.currentTarget.blur()
       }

packages/ui/src/components/editor/panel/IconButton/IconButton.tsx

@@ -4,6 +4,7 @@ import cn from 'classnames'
 type Props = {
   codicon_icon: string
   on_click?: (e: any) => void
+  on_mouse_down?: (e: any) => void
   href?: string
   title?: string
   label?: string
@@ -25,6 +26,7 @@ export const IconButton: React.FC<Props> = (props) => {
         className={cn(styles['icon-button'], {
           [styles['with-label']]: !!props.label
         })}
+        onMouseDown={props.on_mouse_down}
         title={props.title}
         target="_blank"
         rel="noopener noreferrer"
@@ -39,6 +41,7 @@ export const IconButton: React.FC<Props> = (props) => {
         className={cn(styles['icon-button'], {
           [styles['with-label']]: !!props.label
         })}
+        onMouseDown={props.on_mouse_down}
         onClick={props.on_click}
         title={props.title}
       >

packages/ui/src/components/editor/panel/Presets/Presets.module.scss

@@ -145,33 +145,3 @@
     flex: 1;
   }
 }
-
-.checkbox {
-  appearance: none;
-  height: 15px;
-  width: 15px;
-  color: var(--vscode-checkbox-foreground);
-  position: relative;
-  cursor: pointer;
-  flex-shrink: 0;
-  margin: 0;
-
-  &:focus {
-    outline: none;
-  }
-
-  &::before {
-    font-family: 'codicon';
-    content: '\eab2';
-    font-size: 12px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0.3;
-  }
-
-  &:checked::before {
-    opacity: 1;
-  }
-}

packages/ui/src/components/editor/panel/Presets/Presets.tsx

@@ -6,6 +6,7 @@ import { Icon } from '../../common/Icon'
 import { Button } from '../../common/Button'
 import { CHATBOTS } from '@shared/constants/chatbots'
 import { ListHeader } from '../ListHeader'
+import { SimpleCheckbox } from '../../common/SimpleCheckbox'
 
 export const chatbot_to_icon: Record<keyof typeof CHATBOTS, Icon.Variant> = {
   'AI Studio': 'AI_STUDIO',
@@ -255,9 +256,7 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                     (item, index) => item.id != sortable_list[index].id
                   )
 
-                if (!has_order_changed) {
-                  return
-                }
+                if (!has_order_changed) return
 
                 // Handle normal preset/group reordering
                 const new_visible_presets = new_state.map(
@@ -460,14 +459,11 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                         )}
                       {preset.chatbot &&
                         preset_indices_in_group.has(preset.original_index) && (
-                          <input
-                            type="checkbox"
-                            className={styles.checkbox}
+                          <SimpleCheckbox
                             checked={!!preset.is_selected}
-                            onChange={() =>
+                            on_change={() =>
                               props.on_toggle_selected_preset(preset.name!)
                             }
-                            onClick={(e) => e.stopPropagation()}
                             title="Select for multi-initialization"
                           />
                         )}