feat(cli): add keyboard shortcuts help to multiselect prompts (#227)

- Add note() before first multiselect to show keyboard shortcuts
- Help text: Use ↑/↓ to navigate • Space to select/deselect • Enter to confirm
- Show help only once to avoid cluttering the interface
- Add unit test to verify note() is called with correct message

Improves UX by helping users understand multiselect navigation

Author: Snaylaker

packages/cta-cli/src/ui-prompts.ts

@@ -3,6 +3,7 @@ import {
   confirm,
   isCancel,
   multiselect,
+  note,
   select,
   text,
 } from '@clack/prompts'
@@ -103,6 +104,9 @@ export async function selectPackageManager(): Promise<PackageManager> {
   return packageManager
 }
 
+// Track if we've shown the multiselect help text
+let hasShownMultiselectHelp = false
+
 export async function selectAddOns(
   framework: Framework,
   mode: string,
@@ -116,6 +120,12 @@ export async function selectAddOns(
     return []
   }
 
+  // Show help text only once
+  if (!hasShownMultiselectHelp) {
+    note('Use ↑/↓ to navigate • Space to select/deselect • Enter to confirm', 'Keyboard Shortcuts')
+    hasShownMultiselectHelp = true
+  }
+
   const value = await multiselect({
     message,
     options: addOns

packages/cta-cli/tests/ui-prompts.test.ts

@@ -93,7 +93,8 @@ describe('selectPackageManager', () => {
 })
 
 describe('selectAddOns', () => {
-  it('should select some add-ons', async () => {
+  it('should show keyboard shortcuts help and select add-ons', async () => {
+    const noteSpy = vi.spyOn(clack, 'note').mockImplementation(() => {})
     vi.spyOn(clack, 'multiselect').mockImplementation(async () => ['add-on-1'])
     vi.spyOn(clack, 'isCancel').mockImplementation(() => false)
 
@@ -114,7 +115,12 @@ describe('selectAddOns', () => {
       'add-on',
       'Select add-ons',
     )
+
     expect(packageManager).toEqual(['add-on-1'])
+    expect(noteSpy).toHaveBeenCalledWith(
+      'Use ↑/↓ to navigate • Space to select/deselect • Enter to confirm',
+      'Keyboard Shortcuts',
+    )
   })
 
   it('should exit on cancel', async () => {