From 13d604ed69497b2e8008575dc19a26322b4dd645 Mon Sep 17 00:00:00 2001
From: Alabhya Jindal <52493077+alabhyajindal@users.noreply.github.com>
Date: Mon, 19 Feb 2024 16:58:22 +0530
Subject: [PATCH] Close summarize window (#71)

* Add close element and handlers

* Format code

* Change SVG to button
Style the button
Remove Prettier ignore file

* Reduce button size

* Reset element initial state
---
 shared/src/summarize_result.css  | 18 ++++++++++++++++++
 shared/src/summarize_result.html |  1 +
 shared/src/summarize_result.js   | 17 +++++++++++++++++
 3 files changed, 36 insertions(+)

diff --git a/shared/src/summarize_result.css b/shared/src/summarize_result.css
index b9f7788..0b409c0 100644
--- a/shared/src/summarize_result.css
+++ b/shared/src/summarize_result.css
@@ -92,3 +92,21 @@ p {
   font-size: 1rem;
   line-height: 1.25rem;
 }
+
+#close_summary {
+  background-color: #e5e5e5;
+  border: 1px solid #e5e5e5;
+  color: #191919;
+  border-radius: 3px;
+  height: 32px;
+  max-width: 80px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  margin: 10px auto;
+  display: block;
+}
+
+#close_summary:hover {
+  background-color: #cecece;
+  border: 1px solid #b7b7b7;
+}
diff --git a/shared/src/summarize_result.html b/shared/src/summarize_result.html
index 50a4c7a..1b1cbf4 100644
--- a/shared/src/summarize_result.html
+++ b/shared/src/summarize_result.html
@@ -57,6 +57,7 @@
       <div id="summary_stats" class="stats" style="display: none">
         <p><strong>Time saved:</strong> <span id="summary_stats_time_saved">0 minutes</span>.</p>
       </div>
+      <button id="close_summary" style="display: none">Close</button>
     </div>
     <script type="module" src="summarize_result.js"></script>
   </body>
diff --git a/shared/src/summarize_result.js b/shared/src/summarize_result.js
index 3e4714a..3318e8c 100644
--- a/shared/src/summarize_result.js
+++ b/shared/src/summarize_result.js
@@ -67,6 +67,14 @@ async function setup() {
 
   summaryStatsTimeSavedElement.innerText = '0 minutes';
 
+  const summaryCloseElement = document.getElementById('close_summary');
+  if (!summaryCloseElement) {
+    console.error('Could not find summarize close element');
+    return;
+  }
+
+  summaryCloseElement.style.display = 'none';
+
   browser.runtime.onMessage.addListener(async (data) => {
     const searchParams = new URLSearchParams(window.location.search);
     const url = searchParams.get('url');
@@ -96,9 +104,18 @@ async function setup() {
           data.timeSavedInMinutes
         } minute${data.timeSavedInMinutes !== 1 ? 's' : ''}`;
       }
+
+      summaryCloseElement.style.display = '';
+      summaryCloseElement.addEventListener('click', () => {
+        window.close();
+      });
     }
   });
 
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') window.close();
+  });
+
   async function requestPageSummary() {
     const hasTabAccess = await browser.permissions.contains({
       permissions: ['activeTab'],