feat: add config page

Author: zaldih

src/cli/cli.controller.ts

@@ -11,7 +11,7 @@ import {
 } from '../constants/index.js';
 import { ERROR_MSG, INFO_MSGS } from '../constants/messages.constants.js';
 import { IConfig, CliScanFoundFolder, IKeyPress } from './interfaces/index.js';
-import { firstValueFrom, Observable } from 'rxjs';
+import { firstValueFrom, Observable, Subject } from 'rxjs';
 import { filter, map, mergeMap, switchMap, tap } from 'rxjs/operators';
 
 import { COLORS } from '../constants/cli.constants.js';
@@ -46,7 +46,6 @@ import { getFileContent } from '../utils/get-file-content.js';
 import { ResultDetailsUi } from './ui/components/result-details.ui.js';
 
 export class CliController {
-  private folderRoot = '';
   private readonly stdout: NodeJS.WriteStream = process.stdout;
   private readonly config: IConfig = DEFAULT_CONFIG;
 
@@ -113,7 +112,7 @@ export class CliController {
   }
 
   private initUi(): void {
-    this.uiHeader = new HeaderUi();
+    this.uiHeader = new HeaderUi(this.config);
     this.uiService.add(this.uiHeader);
     this.uiResults = new ResultsUi(this.resultsService, this.consoleService);
     this.uiService.add(this.uiResults);
@@ -144,14 +143,32 @@ export class CliController {
   }
 
   private openOptions(): void {
-    const optionsUi = new OptionsUi();
+    const changeConfig$ = new Subject<Partial<IConfig>>();
+    const optionsUi = new OptionsUi(changeConfig$, this.config);
     this.uiResults.clear();
     this.uiResults.setVisible(false);
     this.uiService.add(optionsUi);
     this.activeComponent = optionsUi;
     this.uiHeader.menuIndex$.next(MENU_BAR_OPTIONS.OPTIONS);
     this.uiService.renderAll();
 
+    changeConfig$.subscribe((configChanges) => {
+      Object.assign(this.config, configChanges);
+      if (
+        configChanges.targetFolder ||
+        configChanges.folderRoot ||
+        configChanges.excludeHiddenDirectories ||
+        configChanges.exclude
+      ) {
+        this.scan();
+      }
+      if (configChanges.sortBy) {
+        this.resultsService.sortResults(configChanges.sortBy);
+      }
+      this.logger.info(`Config updated: ${JSON.stringify(configChanges)}`);
+      this.uiService.renderAll();
+    });
+
     optionsUi.goToHelp$.subscribe(() => {
       const helpUi = new HelpUi();
       this.uiService.add(helpUi);
@@ -240,11 +257,11 @@ export class CliController {
       this.config.exclude = [...this.config.exclude, ...userExcludeList];
     }
 
-    this.folderRoot = options.isTrue('directory')
+    this.config.folderRoot = options.isTrue('directory')
       ? options.getString('directory')
       : process.cwd();
     if (options.isTrue('full-scan')) {
-      this.folderRoot = homedir();
+      this.config.folderRoot = homedir();
     }
     if (options.isTrue('hide-errors')) {
       this.config.showErrors = false;
@@ -267,15 +284,14 @@ export class CliController {
 
     if (options.isTrue('dry-run')) {
       this.config.dryRun = true;
-      this.uiHeader.isDryRun = true;
     }
 
     if (options.isTrue('yes')) {
       this.config.yes = true;
     }
 
     // Remove trailing slash from folderRoot for consistency
-    this.folderRoot = this.folderRoot.replace(/[/\\]$/, '');
+    this.config.folderRoot = this.config.folderRoot.replace(/[/\\]$/, '');
   }
 
   private showErrorPopup(visible: boolean): void {
@@ -356,7 +372,7 @@ export class CliController {
   }
 
   private checkFileRequirements(): void {
-    const result = this.npkill.isValidRootFolder(this.folderRoot);
+    const result = this.npkill.isValidRootFolder(this.config.folderRoot);
     if (!result.isValid) {
       const errorMessage =
         result.invalidReason || 'Root folder is not valid. Unknown reason';
@@ -437,6 +453,9 @@ export class CliController {
   }
 
   private scan(): void {
+    this.searchStatus.reset();
+    this.resultsService.reset();
+    this.uiStatus.reset();
     this.uiStatus.start();
 
     const params = this.prepareListDirParams();
@@ -495,7 +514,7 @@ export class CliController {
   private prepareListDirParams() {
     const target = this.config.targetFolder;
     const params = {
-      rootPath: this.folderRoot,
+      rootPath: this.config.folderRoot,
       targets: [target],
     };
 

src/cli/interfaces/config.interface.ts

@@ -1,4 +1,5 @@
 export interface IConfig {
+  folderRoot: string;
   backgroundColor: string;
   warningColor: string;
   checkUpdates: boolean;

src/cli/interfaces/key-press.interface.ts

@@ -3,4 +3,5 @@ export interface IKeyPress {
   meta: boolean;
   ctrl: boolean;
   shift: boolean;
+  sequence: string;
 }

src/cli/services/results.service.ts

@@ -12,6 +12,10 @@ export class ResultsService {
     this.results = this.results.sort(FOLDER_SORT[method]);
   }
 
+  reset(): void {
+    this.results = [];
+  }
+
   getStats(): IStats {
     let spaceReleased = 0;
 

src/cli/ui/components/header/header.ui.ts

@@ -8,6 +8,7 @@ import {
 } from '../../../../constants/index.js';
 import { BaseUi } from '../../base.ui.js';
 import colors from 'colors';
+import { IConfig } from 'src/cli/interfaces/config.interface.js';
 
 export enum MENU_BAR_OPTIONS {
   HELP = 0,
@@ -18,14 +19,13 @@ export enum MENU_BAR_OPTIONS {
 
 export class HeaderUi extends BaseUi {
   programVersion: string;
-  isDryRun: boolean;
   private activeMenuIndex = MENU_BAR_OPTIONS.DELETE;
 
   readonly menuIndex$ = new BehaviorSubject<MENU_BAR_OPTIONS>(
     MENU_BAR_OPTIONS.DELETE,
   );
 
-  constructor() {
+  constructor(private readonly config: IConfig) {
     super();
     this.menuIndex$.subscribe((menuIndex) => {
       this.activeMenuIndex = menuIndex;
@@ -43,7 +43,7 @@ export class HeaderUi extends BaseUi {
       this.printAt(colors.gray(this.programVersion), UI_POSITIONS.VERSION);
     }
 
-    if (this.isDryRun) {
+    if (this.config.dryRun) {
       this.printAt(
         colors.black(colors.bgMagenta(` ${INFO_MSGS.DRY_RUN} `)),
         UI_POSITIONS.DRY_RUN_NOTICE,

src/cli/ui/components/header/status.ui.ts

@@ -20,7 +20,7 @@ export class StatusUi extends BaseUi {
   private barClosing = false;
   private showProgressBar = true;
   private pendingTasksPosition = { ...UI_POSITIONS.PENDING_TASKS };
-  private readonly searchEnd$ = new Subject();
+  private searchEnd$ = new Subject();
   private readonly SEARCH_STATES = {
     stopped: () => this.startingSearch(),
     scanning: () => this.continueSearching(),
@@ -36,6 +36,8 @@ export class StatusUi extends BaseUi {
   }
 
   start(): void {
+    this.barClosing = false;
+    this.showProgressBar = true;
     this.spinnerService.setSpinner(SPINNERS.W10);
     interval(SPINNER_INTERVAL)
       .pipe(takeUntil(this.searchEnd$))
@@ -46,6 +48,19 @@ export class StatusUi extends BaseUi {
     this.animateProgressBar();
   }
 
+  reset(): void {
+    this.barClosing = false;
+    this.showProgressBar = true;
+    this.barNormalizedWidth = 0;
+    this.text = '';
+    this.pendingTasksPosition = { ...UI_POSITIONS.PENDING_TASKS };
+    this.searchEnd$.next(true);
+    this.searchEnd$ = new Subject();
+
+    this.clearPendingTasks();
+    this.render();
+  }
+
   completeSearch(duration: number): void {
     this.searchEnd$.next(true);
     this.searchEnd$.complete();
@@ -57,7 +72,7 @@ export class StatusUi extends BaseUi {
   }
 
   render(): void {
-    this.printAt(this.text, UI_POSITIONS.STATUS);
+    this.printAt(this.text + '      ', UI_POSITIONS.STATUS);
 
     if (this.showProgressBar) {
       this.renderProgressBar();