Add some text to the version number when Queue is updated.

source/background.ts

@@ -65,6 +65,7 @@ browser.runtime.onInstalled.addListener(async () => {
     manifest.nodeEnv === 'development'
   ) {
     settings.latestVersion = manifest.version;
+    settings.versionGotUpdated = true;
     await saveSettings(settings);
     await openOptionsPage();
   }

source/manifest.json

@@ -3,7 +3,7 @@
   "manifest_version": 2,
   "name": "Queue",
   "description": "A WebExtension for queueing links.",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "permissions": [
     "contextMenus",
     "storage",

source/settings-page.ts

@@ -5,7 +5,8 @@ import {
   getSettings,
   PageFooter,
   PageHeader,
-  PageMain
+  PageMain,
+  saveSettings
 } from '.';
 
 (async () => {
@@ -14,11 +15,20 @@ import {
   const manifest = getManifest();
   const settings = await getSettings();
 
+  const showVersionUpdated = settings.versionGotUpdated;
+  if (showVersionUpdated) {
+    settings.versionGotUpdated = false;
+    await saveSettings(settings);
+  }
+
   render(
     html`
       <${PageHeader} />
       <${PageMain} settings=${settings} />
-      <${PageFooter} manifest=${manifest} />
+      <${PageFooter}
+        manifest=${manifest}
+        showVersionUpdated=${showVersionUpdated}
+      />
     `,
     document.body
   );

source/utilities/components/page-footer.ts

@@ -1,8 +1,9 @@
 import {html} from 'htm/preact';
-import {Link, QComponent, QManifest} from '../..';
+import {Link, QComponent, QManifest, Settings} from '../..';
 
 type FooterProps = {
   manifest: QManifest;
+  showVersionUpdated: boolean;
 };
 
 export function PageFooter(props: FooterProps): QComponent {
@@ -12,10 +13,13 @@ export function PageFooter(props: FooterProps): QComponent {
     url="https://github.com/Holllo/queue/releases/tag/${version}"
   />`;
 
+  const versionUpdated = props.showVersionUpdated ? 'Updated to' : '';
+
   return html`
     <footer class="page-footer">
       <p>
-        ${versionLink} 🄯 Holllo — Free and open-source, forever.
+        ${versionUpdated} ${versionLink} 🄯 Holllo — Free and open-source,
+        forever.
       </p>
     </footer>
   `;

source/utilities/settings.ts

@@ -11,11 +11,13 @@ export type QItem = {
 export type Settings = {
   latestVersion: string;
   queue: QItem[];
+  versionGotUpdated: boolean;
 };
 
 const defaultSettings: Settings = {
   latestVersion: '0.0.0',
-  queue: []
+  queue: [],
+  versionGotUpdated: false
 };
 
 /**
@@ -33,7 +35,8 @@ export async function getSettings(): Promise<Settings> {
 
   const settings: Settings = {
     latestVersion: syncSettings.latestVersion,
-    queue
+    queue,
+    versionGotUpdated: syncSettings.versionGotUpdated
   };
 
   return settings;