Add singular completed task support and Alt+C keyboard shortcut

- stop propagation on Button click in `packages/ui/src/components/editor/common/prompts/PromptField/components/CompletedTasks/CompletedTasks.tsx`
- when alt is pressed, show keycap 'C' over the checkbox to trigger seting as task completed
- use singular 'completed task' etc. if only one is completed

├── .prettierrc
├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Main
│                       │   └── MainView
│                       │       └── MainView.tsx
│                       └── i18n
│                           └── translations
│                               └── prompt-field.ts
├── media
│   ├── README.md
│   ├── readme-heading-dark.svg
│   ├── readme-heading-light.svg
│   └── screenshot-1.png
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        ├── Button
                        │   └── Button.tsx
                        └── 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
                                └── 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

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -546,6 +546,7 @@ export const MainView: React.FC<Props> = (props) => {
             attach_selected_files: t('prompt-field.attach-selected-files'),
             more: t('prompt-field.more'),
             completed_tasks: t('prompt-field.completed-tasks'),
+            completed_task: t('prompt-field.completed-task'),
             clear_session: t('prompt-field.clear-session')
           }}
         />

apps/editor/src/views/prompt/frontend/i18n/translations/prompt-field.ts

@@ -377,9 +377,27 @@ export const prompt_field = {
     hu: 'Több',
     bg: 'Още'
   },
+  'prompt-field.completed-task': {
+    en: 'completed task',
+    pl: 'ukończone zadanie',
+    'zh-cn': '已完成任务',
+    ja: '完了したタスク',
+    'zh-tw': '已完成任務',
+    de: 'abgeschlossene Aufgabe',
+    es: 'tarea completada',
+    fr: 'tâche terminée',
+    'pt-br': 'tarefa concluída',
+    ru: 'завершенная задача',
+    ko: '완료된 작업',
+    it: 'attività completata',
+    tr: 'tamamlanan görev',
+    cs: 'dokončený úkol',
+    hu: 'befejezett feladat',
+    bg: 'завършена задача'
+  },
   'prompt-field.completed-tasks': {
     en: 'completed tasks',
-    pl: 'zakończone zadania',
+    pl: 'ukończonych zadań',
     'zh-cn': '已完成任务',
     ja: '完了したタスク',
     'zh-tw': '已完成任務',

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

@@ -3,7 +3,9 @@ import styles from './Button.module.scss'
 import cn from 'classnames'
 
 type Props = {
-  on_click?: () => void
+  on_click?: (
+    e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+  ) => void
   url?: string
   disabled?: boolean
   children?: React.ReactNode

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

@@ -67,6 +67,7 @@ export const Empty = () => (
       attach_selected_files: 'Attach selected files',
       more: 'More',
       completed_tasks: 'Completed tasks',
+      completed_task: 'Completed task',
       clear_session: 'Clear session'
     }}
   />
@@ -134,6 +135,7 @@ export const WithText = () => (
       attach_selected_files: 'Attach selected files',
       more: 'More',
       completed_tasks: 'Completed tasks',
+      completed_task: 'Completed task',
       clear_session: 'Clear session'
     }}
   />
@@ -201,6 +203,7 @@ export const LongText = () => (
       attach_selected_files: 'Attach selected files',
       more: 'More',
       completed_tasks: 'Completed tasks',
+      completed_task: 'Completed task',
       clear_session: 'Clear session'
     }}
   />
@@ -268,6 +271,7 @@ export const WithPlaceholderSavedContext = () => (
       attach_selected_files: 'Attach selected files',
       more: 'More',
       completed_tasks: 'Completed tasks',
+      completed_task: 'Completed task',
       clear_session: 'Clear session'
     }}
   />
@@ -335,6 +339,7 @@ export const WithCommit = () => (
       attach_selected_files: 'Attach selected files',
       more: 'More',
       completed_tasks: 'Completed tasks',
+      completed_task: 'Completed task',
       clear_session: 'Clear session'
     }}
   />
@@ -401,6 +406,7 @@ export const WithCommitWithQuotes = () => (
       attach_selected_files: 'Attach selected files',
       more: 'More',
       completed_tasks: 'Completed tasks',
+      completed_task: 'Completed task',
       clear_session: 'Clear session'
     }}
   />
@@ -475,6 +481,7 @@ export const WithEditFormatSelector = () => {
         attach_selected_files: 'Attach selected files',
         more: 'More',
         completed_tasks: 'Completed tasks',
+        completed_task: 'Completed task',
         clear_session: 'Clear session'
       }}
     />
@@ -541,6 +548,7 @@ export const WithWarning = () => (
       attach_selected_files: 'Attach selected files',
       more: 'More',
       completed_tasks: 'Completed tasks',
+      completed_task: 'Completed task',
       clear_session: 'Clear session'
     }}
   />
@@ -608,6 +616,7 @@ export const WithFilePaths = () => (
       attach_selected_files: 'Attach selected files',
       more: 'More',
       completed_tasks: 'Completed tasks',
+      completed_task: 'Completed task',
       clear_session: 'Clear session'
     }}
   />
@@ -703,6 +712,7 @@ export const WithTabs = () => {
         attach_selected_files: 'Attach selected files',
         more: 'More',
         completed_tasks: 'Completed tasks',
+        completed_task: 'Completed task',
         clear_session: 'Clear session'
       }}
     />

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

@@ -19,6 +19,7 @@ import { Tabs, TabsRef } from './components/Tabs'
 import { Footer } from './components/Footer'
 import { CompletedTasks } from './components/CompletedTasks'
 import { Checkbox } from '../../Checkbox/Checkbox'
+import { KeycapWrapper } from '../../../prompt-view/KeycapWrapper'
 
 export type EditFormat = 'whole' | 'search-replace' | 'diff' | 'truncated'
 
@@ -116,6 +117,7 @@ export namespace PromptField {
       attach_selected_files: string
       more: string
       completed_tasks: string
+      completed_task: string
       clear_session: string
     }
   }
@@ -317,7 +319,13 @@ export const PromptField: React.FC<PromptField.Props> = (props) => {
                       className={styles['checkbox-wrapper']}
                       style={{ visibility: 'hidden' }}
                     >
-                      <Checkbox checked={false} on_change={() => {}} />
+                      {is_alt_pressed ? (
+                        <KeycapWrapper char="C">
+                          <Checkbox checked={false} on_change={() => {}} />
+                        </KeycapWrapper>
+                      ) : (
+                        <Checkbox checked={false} on_change={() => {}} />
+                      )}
                     </div>
                   )}
                   <div className={styles['placeholder-text']}>
@@ -346,12 +354,23 @@ export const PromptField: React.FC<PromptField.Props> = (props) => {
               </div>
               {props.on_task_completed && (
                 <div className={styles['checkbox-wrapper']}>
-                  <Checkbox
-                    checked={false}
-                    on_change={() => {
-                      props.on_task_completed!()
-                    }}
-                  />
+                  {is_alt_pressed ? (
+                    <KeycapWrapper char="C">
+                      <Checkbox
+                        checked={false}
+                        on_change={() => {
+                          props.on_task_completed!()
+                        }}
+                      />
+                    </KeycapWrapper>
+                  ) : (
+                    <Checkbox
+                      checked={false}
+                      on_change={() => {
+                        props.on_task_completed!()
+                      }}
+                    />
+                  )}
                 </div>
               )}
               <div
@@ -416,6 +435,7 @@ export const PromptField: React.FC<PromptField.Props> = (props) => {
             on_clear_completed_tasks={props.on_clear_completed_tasks}
             translations={{
               completed_tasks: props.translations.completed_tasks,
+              completed_task: props.translations.completed_task,
               clear_session: props.translations.clear_session
             }}
           />

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

@@ -45,6 +45,7 @@ type CompletedTasksProps = {
   on_clear_completed_tasks?: () => void
   translations: {
     completed_tasks: string
+    completed_task: string
     clear_session: string
   }
 }
@@ -77,12 +78,22 @@ export const CompletedTasks: React.FC<CompletedTasksProps> = ({
             })}
           />
           <div className={styles['header__text']}>
-            {tasks.length} {translations.completed_tasks}
+            {tasks.length}{' '}
+            {tasks.length === 1
+              ? translations.completed_task
+              : translations.completed_tasks}
           </div>
         </div>
         {on_clear_completed_tasks && (
           <div className={styles['header__right']}>
-            <Button is_small is_secondary on_click={on_clear_completed_tasks}>
+            <Button
+              is_small
+              is_secondary
+              on_click={(e) => {
+                e.stopPropagation()
+                on_clear_completed_tasks()
+              }}
+            >
               {translations.clear_session}
             </Button>
           </div>

packages/ui/src/components/editor/common/prompts/PromptField/hooks/use-keyboard-shortcuts.ts

@@ -158,6 +158,20 @@ export const use_keyboard_shortcuts = (props: PromptField.Props) => {
         props.on_copy()
       }
     }
+    if (
+      e.code == 'KeyC' &&
+      e.altKey &&
+      left_alt_pressed_ref.current &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.shiftKey
+    ) {
+      if (props.on_task_completed) {
+        e.stopPropagation()
+        e.preventDefault()
+        props.on_task_completed()
+      }
+    }
   }
 
   return { is_alt_pressed, handle_container_key_down }