From 69b7576636ad6c995ab8d28526228d9dd25c0f4e Mon Sep 17 00:00:00 2001
From: zaldih <imzaldih@gmail.com>
Date: Sun, 26 May 2024 12:55:39 +0200
Subject: [PATCH] feat(ui): paint full width yellow header

---
 src/constants/messages.constants.ts   |  2 +-
 src/controller.ts                     |  1 +
 src/ui/components/header/header.ui.ts | 17 ++++++++++++-----
 src/ui/components/header/status.ui.ts |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/constants/messages.constants.ts b/src/constants/messages.constants.ts
index de2ed50b..6157c556 100644
--- 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
index 02ec94e9..bbd826e0 100644
--- 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
index ef478660..42c01ef8 100644
--- 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
index 45e22b54..0496629e 100644
--- 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);
   }