feat(ui): paint full width yellow header

voidcosmos · May 26, 2024 · 69b7576 · 69b7576
1 parent 589fd2b
commit 69b7576
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/src/constants/messages.constants.ts b/src/constants/messages.constants.ts
@@ -1,5 +1,5 @@
 export const HELP_MSGS = {
-  BASIC_USAGE: '> CURSORS for select; SPACE to delete <',
+  BASIC_USAGE: ' CURSORS for select - SPACE to delete',
 };
 
 export const INFO_MSGS = {

diff --git a/src/controller.ts b/src/controller.ts
@@ -535,6 +535,7 @@ export class Controller {
       .then(() => {
         folder.status = 'deleted';
         this.searchStatus.pendingDeletions--;
+        this.uiStats.render();
         this.uiStatus.render();
         this.printFoldersSection();
         this.logger.info(`Deleted ${folder.path}`);

diff --git a/src/ui/components/header/header.ui.ts b/src/ui/components/header/header.ui.ts
@@ -14,17 +14,14 @@ export class HeaderUi extends BaseUi {
   render(): void {
     // banner and tutorial
     this.printAt(BANNER, UI_POSITIONS.INITIAL);
-    this.printAt(
-      colors.yellow(colors.inverse(HELP_MSGS.BASIC_USAGE)),
-      UI_POSITIONS.TUTORIAL_TIP,
-    );
+    this.renderHeader();
 
     if (this.programVersion !== undefined) {
       this.printAt(colors.gray(this.programVersion), UI_POSITIONS.VERSION);
     }
 
     // Columns headers
-    this.printAt(colors.gray(INFO_MSGS.HEADER_COLUMNS), {
+    this.printAt(colors.bgYellow(colors.black(INFO_MSGS.HEADER_COLUMNS)), {
       x: this.terminal.columns - INFO_MSGS.HEADER_COLUMNS.length - 4,
       y: UI_POSITIONS.FOLDER_SIZE_HEADER.y,
     });
@@ -39,4 +36,14 @@ export class HeaderUi extends BaseUi {
       UI_POSITIONS.SPACE_RELEASED,
     );
   }
+
+  private renderHeader(): void {
+    const { columns } = this.terminal;
+    const spaceToFill = Math.max(0, columns - HELP_MSGS.BASIC_USAGE.length - 2);
+    const text = HELP_MSGS.BASIC_USAGE + ' '.repeat(spaceToFill);
+    this.printAt(
+      colors.yellow(colors.inverse(text)),
+      UI_POSITIONS.TUTORIAL_TIP,
+    );
+  }
 }
diff --git a/src/ui/components/header/status.ui.ts b/src/ui/components/header/status.ui.ts
@@ -78,7 +78,7 @@ export class StatusUi extends BaseUi {
   }
 
   private clearPendingTasks(): void {
-    const PENDING_TASK_LENGHT = 15;
+    const PENDING_TASK_LENGHT = 17;
     this.printAt(' '.repeat(PENDING_TASK_LENGHT), this.pendingTasksPosition);
   }