feat(options): add hint for all actions available for each input

Author: zaldih

src/cli/ui/components/options.ui.ts

@@ -8,6 +8,7 @@ import { convertGBToMB } from '../../../utils/unit-conversions.js';
 import { RESULT_TYPE_INFO } from '../../../constants/messages.constants.js';
 import { IConfig } from '../../../cli/interfaces/config.interface.js';
 import { COLORS } from '../../../constants/cli.constants.js';
+import { OPTIONS_HINTS_BY_TYPE } from '../../../constants/options.constants.js';
 
 type OptionType = 'checkbox' | 'dropdown' | 'input';
 
@@ -187,6 +188,7 @@ export class OptionsUi extends BaseUi implements InteractiveUi {
 
   render(): void {
     this.clear();
+    this.printHintMessage();
     let currentRow = MARGINS.ROW_RESULTS_START;
 
     this.printAt(colors.bold.bgYellow.black('  OPTIONS  '), {
@@ -236,6 +238,24 @@ export class OptionsUi extends BaseUi implements InteractiveUi {
     }
   }
 
+  private printHintMessage() {
+    const optionSelected = this.options[this.selectedIndex];
+
+    const hintText =
+      optionSelected.type === 'input' && this.isEditing
+        ? OPTIONS_HINTS_BY_TYPE['input-exit']
+        : OPTIONS_HINTS_BY_TYPE[optionSelected.type];
+
+    if (!hintText) {
+      return;
+    }
+
+    this.printAt(hintText, {
+      x: 15,
+      y: MARGINS.ROW_RESULTS_START,
+    });
+  }
+
   clear(): void {
     for (let row = MARGINS.ROW_RESULTS_START; row < this.terminal.rows; row++) {
       this.clearLine(row);

src/constants/index.ts

@@ -5,3 +5,4 @@ export * from './sort.result.js';
 export * from './spinner.constants.js';
 export * from './update.constants.js';
 export * from './recursive-rmdir-node-support.constants.js';
+export * from './options.constants.js';

src/constants/options.constants.ts

@@ -0,0 +1,16 @@
+import colors from 'colors';
+
+export const OPTIONS_HINTS_BY_TYPE = {
+  input: colors.gray(
+    `${colors.bold.underline('SPACE')} or ${colors.bold.underline('ENTER')} to edit.`,
+  ),
+  'input-exit': colors.gray(
+    `${colors.bold.underline('ENTER')} to confirm. ${colors.bold.underline('ESC')} To cancel.`,
+  ),
+  dropdown: colors.gray(
+    `${colors.bold.underline('SPACE')}/${colors.bold.underline('SHIFT')}+${colors.bold.underline('SPACE')} to navigate.`,
+  ),
+  checkbox: colors.gray(
+    `${colors.bold.underline('SPACE')} or ${colors.bold.underline('ENTER')} to toggle.`,
+  ),
+};