✨ feat: show version + better feedback

Rettend · Sep 21, 2024 · b78e6c6 · b78e6c6
1 parent 04cb360
commit b78e6c6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/extension/popup.html b/extension/popup.html
@@ -9,18 +9,19 @@
             width: 200px;
             padding: 10px;
             font-family: Arial, sans-serif;
+            position: relative;
         }
         button {
             width: 100%;
             padding: 10px;
-            background-color: #4CAF50;
+            background-color: #204da8;
             color: white;
             border: none;
             border-radius: 4px;
             cursor: pointer;
         }
         button:hover {
-            background-color: #45a049;
+            background-color: #2858b8;
         }
         button:disabled {
             background-color: #cccccc;
@@ -30,11 +31,18 @@
             margin-top: 10px;
             text-align: center;
         }
+        #versionNumber {
+            position: absolute;
+            bottom: 5px;
+            right: 10px;
+            color: #999;
+        }
     </style>
 </head>
 <body>
     <button id="updateButton">Update Icons</button>
     <p id="feedbackMessage"></p>
+    <div id="versionNumber"></div>
     <script type="module" src="popup.js"></script>
 </body>
 </html>
diff --git a/src/background.ts b/src/background.ts
@@ -9,13 +9,11 @@ if (typeof browser === 'undefined') {
   globalThis.browser = chrome
 }
 
-async function checkForUpdates() {
+async function checkForUpdates(): Promise<{ updated: boolean, version?: string }> {
   try {
     const response = await GET('version.txt')
     const latestVersion = await response.text()
     const { version: currentVersion } = await browser.storage.local.get('version')
-    // eslint-disable-next-line no-console
-    console.log('previous:', currentVersion, 'latest:', latestVersion)
 
     if (latestVersion !== currentVersion) {
       const [css, materialIcons, languageMap] = await Promise.all([
@@ -30,18 +28,23 @@ async function checkForUpdates() {
         materialIcons,
         languageMap,
       })
+
+      return { updated: true, version: latestVersion }
     }
+
+    return { updated: false }
   }
   catch (error) {
     console.error('Failed to check for updates:', error)
+    throw error
   }
 }
 
 browser.runtime.onMessage.addListener((message, _sender, sendResponse: (response: any) => void) => {
   if (message.action === 'updateIcons') {
     checkForUpdates()
-      .then(() => {
-        sendResponse({ success: true })
+      .then((result) => {
+        sendResponse({ success: true, ...result })
       })
       .catch(() => {
         sendResponse({ success: false })
@@ -50,6 +53,6 @@ browser.runtime.onMessage.addListener((message, _sender, sendResponse: (response
   }
 })
 
-browser.runtime.onInstalled.addListener(checkForUpdates)
-browser.runtime.onStartup.addListener(checkForUpdates)
-setInterval(checkForUpdates, hours(24))
+browser.runtime.onInstalled.addListener(() => checkForUpdates())
+browser.runtime.onStartup.addListener(() => checkForUpdates())
+setInterval(() => checkForUpdates(), hours(24))
diff --git a/src/popup.ts b/src/popup.ts
@@ -3,26 +3,37 @@ if (typeof browser === 'undefined') {
   globalThis.browser = chrome
 }
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
   const updateButton = document.getElementById('updateButton') as HTMLButtonElement
   const feedbackMessage = document.getElementById('feedbackMessage') as HTMLParagraphElement
+  const versionNumber = document.getElementById('versionNumber') as HTMLDivElement
+
+  // Display current version
+  const { version } = await browser.storage.local.get('version')
+  versionNumber.textContent = `v${version || 'N/A'}`
 
   updateButton.addEventListener('click', async () => {
     updateButton.disabled = true
-    feedbackMessage.textContent = 'Updating icons...'
+    feedbackMessage.textContent = 'Checking for updates...'
 
     try {
       const response = await browser.runtime.sendMessage({ action: 'updateIcons' })
-      if (response && response.success) {
-        feedbackMessage.textContent = 'Icons updated!'
+      if (response.success) {
+        if (response.updated) {
+          feedbackMessage.textContent = `Updated to version ${response.version}!`
+          versionNumber.textContent = `v${response.version}`
+        }
+        else {
+          feedbackMessage.textContent = 'Already up to date.'
+        }
         feedbackMessage.style.color = 'green'
       }
       else {
         throw new Error('Update failed')
       }
     }
     catch (error: any) {
-      feedbackMessage.textContent = error.message
+      feedbackMessage.textContent = `Error: ${error.message}`
       feedbackMessage.style.color = 'red'
     }
     finally {