Dynamically update token counts in QuickPick placeholders based on selection changes

Author: robertpiosik

apps/editor/src/commands/apply-context-command/helpers/applying/select-context-paths.ts

@@ -74,21 +74,26 @@ export const select_context_paths = async (
 
     const quick_pick_items = await create_quick_pick_items(resolved_paths)
 
-    const total_tokens = quick_pick_items.reduce(
-      (acc, item) => acc + item.token_count,
-      0
-    )
-    const formatted_total = display_token_count(total_tokens)
-
     const list_quick_pick = vscode.window.createQuickPick<
       vscode.QuickPickItem & { file_path: string; token_count: number }
     >()
     list_quick_pick.title = context.name
-    list_quick_pick.placeholder = `Select files to apply to context (totalling ${formatted_total} tokens)`
     list_quick_pick.canSelectMany = true
     list_quick_pick.ignoreFocusOut = true
     list_quick_pick.items = quick_pick_items
     list_quick_pick.selectedItems = quick_pick_items.filter((i) => i.picked)
+
+    const update_placeholder = () => {
+      const total = list_quick_pick.selectedItems.reduce(
+        (sum, item) => sum + item.token_count,
+        0
+      )
+      const total_text =
+        total > 0 ? ` (totalling ${display_token_count(total)} tokens)` : ''
+      list_quick_pick.placeholder = `Select files to apply to context${total_text}`
+    }
+    update_placeholder()
+    list_quick_pick.onDidChangeSelection(update_placeholder)
     list_quick_pick.buttons = [vscode.QuickInputButtons.Back]
 
     const list_selection = await new Promise<
@@ -144,12 +149,7 @@ export const select_context_paths = async (
             (i) => i.picked
           )
 
-          const new_total = list_quick_pick.items.reduce(
-            (acc, item) => acc + item.token_count,
-            0
-          )
-          list_quick_pick.placeholder = `Select files to apply to context (totalling ${display_token_count(new_total)} tokens)`
-
+          update_placeholder()
           const choice = await vscode.window.showInformationMessage(
             'Removed from context.',
             'Undo'
@@ -180,11 +180,7 @@ export const select_context_paths = async (
               (i) => i.picked
             )
 
-            const undo_total = list_quick_pick.items.reduce(
-              (acc, item) => acc + item.token_count,
-              0
-            )
-            list_quick_pick.placeholder = `Select files to apply to context (totalling ${display_token_count(undo_total)} tokens)`
+            update_placeholder()
           }
         }
       })

apps/editor/src/commands/apply-context-command/sources/commit-files-source.ts

@@ -176,12 +176,6 @@ export const handle_commit_files_source = async (
           })
         )
 
-        const total_tokens = file_items.reduce(
-          (acc, item) => acc + item.token_count,
-          0
-        )
-        const formatted_total = display_token_count(total_tokens)
-
         const quick_pick_files = vscode.window.createQuickPick<any>()
         quick_pick_files.canSelectMany = true
         quick_pick_files.items = file_items
@@ -192,7 +186,18 @@ export const handle_commit_files_source = async (
             hash: selected_commit.hash.substring(0, 7)
           }
         )
-        quick_pick_files.placeholder = `${t('command.apply-context.commit.select-files')} (totalling ${formatted_total} tokens)`
+
+        const update_placeholder = () => {
+          const total = quick_pick_files.selectedItems.reduce(
+            (sum: number, item: any) => sum + item.token_count,
+            0
+          )
+          const total_text =
+            total > 0 ? ` (totalling ${display_token_count(total)} tokens)` : ''
+          quick_pick_files.placeholder = `${t('command.apply-context.commit.select-files')}${total_text}`
+        }
+        update_placeholder()
+        quick_pick_files.onDidChangeSelection(update_placeholder)
         quick_pick_files.buttons = [vscode.QuickInputButtons.Back]
         quick_pick_files.ignoreFocusOut = true
 

apps/editor/src/commands/select-imported-files-command.ts

@@ -450,7 +450,9 @@ export const select_imported_files_command = (
           (sum, item) => sum + (item.tokens || 0),
           0
         )
-        quick_pick.placeholder = `Select imported files (totalling ${display_token_count(total)} tokens)`
+        const total_text =
+          total > 0 ? ` (totalling ${display_token_count(total)} tokens)` : ''
+        quick_pick.placeholder = `Select imported files${total_text}`
       }
       update_placeholder()
       quick_pick.onDidChangeSelection(update_placeholder)