From 379d216550f852a21a7043b867f1c539f76476cc Mon Sep 17 00:00:00 2001
From: Guilherme Caponetto <638737+caponetto@users.noreply.github.com>
Date: Sat, 21 Jan 2023 19:43:19 -0300
Subject: [PATCH] Add progress bar for viewed files (#70)

---
 src/extension/skeleton.ts      |  3 +++
 src/shared/css/elements.ts     |  2 ++
 src/webview/css/static/app.css | 20 ++++++++++++++++++--
 src/webview/message/handler.ts |  6 ++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/extension/skeleton.ts b/src/extension/skeleton.ts
index 5f5e39f..bde2677 100644
--- a/src/extension/skeleton.ts
+++ b/src/extension/skeleton.ts
@@ -20,6 +20,9 @@ export const buildSkeleton = (webviewUri: vscode.Uri) => `
   <div id="${SkeletonElementIds.DiffContainer}"></div>
   <footer>
     <span id="${SkeletonElementIds.ViewedIndicator}"></span>
+    <div id="${SkeletonElementIds.ViewedProgressContainer}">
+      <div id="${SkeletonElementIds.ViewedProgress}"></div>
+    </div>
     <label id="${SkeletonElementIds.MarkAllViewedContainer}">
       <input id="${SkeletonElementIds.MarkAllViewedCheckbox}" type="checkbox" name="mark-all-as-viewed">
         Mark all as viewed
diff --git a/src/shared/css/elements.ts b/src/shared/css/elements.ts
index 07353a9..568e71c 100644
--- a/src/shared/css/elements.ts
+++ b/src/shared/css/elements.ts
@@ -5,4 +5,6 @@ export enum SkeletonElementIds {
   MarkAllViewedContainer = "mark-all-viewed-container",
   MarkAllViewedCheckbox = "mark-all-viewed-checkbox",
   ViewedIndicator = "viewed-indicator",
+  ViewedProgressContainer = "viewed-progress-container",
+  ViewedProgress = "viewed-progress",
 }
diff --git a/src/webview/css/static/app.css b/src/webview/css/static/app.css
index 2750934..06e3794 100644
--- a/src/webview/css/static/app.css
+++ b/src/webview/css/static/app.css
@@ -16,13 +16,13 @@ body * {
 
 body footer {
   position: sticky;
-  bottom: 2px;
+  bottom: 0px;
   padding: 6px 8px 4px 8px;
   border-top: 1px solid #eee;
   margin-top: auto;
   display: flex;
   flex-direction: row;
-  align-items: baseline;
+  align-items: center;
   justify-content: flex-end;
   background-color: white !important;
   z-index: 1;
@@ -33,6 +33,22 @@ body footer {
   margin-right: 8px;
 }
 
+#viewed-progress-container {
+  height: 12px;
+  width: 128px;
+  margin-right: 8px;
+  border-radius: 3px;
+  background: lightgray;
+}
+
+#viewed-progress {
+  height: 100%;
+  width: 0;
+  border-radius: 3px;
+  background: #1f6fea;
+  transition: width 0.4s ease;
+}
+
 #mark-all-viewed-container {
   user-select: none;
   display: flex;
diff --git a/src/webview/message/handler.ts b/src/webview/message/handler.ts
index dc1a545..785e67a 100644
--- a/src/webview/message/handler.ts
+++ b/src/webview/message/handler.ts
@@ -124,6 +124,12 @@ export class MessageToWebviewHandlerImpl implements MessageToWebviewHandler {
     const viewedCount = this.getViewedCount();
     indicator.textContent = `${viewedCount} / ${allCount} files viewed`;
 
+    const viewedProgressBar = document.getElementById(SkeletonElementIds.ViewedProgress);
+    if (viewedProgressBar) {
+      const progressPercentage = Math.round((viewedCount / allCount) * 100);
+      viewedProgressBar.style.width = `${progressPercentage}%`;
+    }
+
     const markAllViewedCheckbox = document.getElementById(SkeletonElementIds.MarkAllViewedCheckbox) as HTMLInputElement;
     if (!markAllViewedCheckbox) {
       return;