version: add What's new link

Signed-off-by: 🕷️ <[email protected]>

Author: zendive

build.ts

@@ -26,6 +26,8 @@ const buildOptions: BuildOptions = {
     __app_name__: `"browser-api-monitor@${manifest.version}"`,
     __app_version__: `"${manifest.version}"`,
     __home_page__: `"${manifest.homepage_url}"`,
+    __release_page__:
+      `"https://github.com/zendive/browser-api-monitor/releases"`,
     __mirror__: `${isMirror}`,
   },
   bundle: true,

src/api/env.ts

@@ -1,3 +1,4 @@
 export const APPLICATION_VERSION = __app_version__;
 export const APPLICATION_NAME = __app_name__;
 export const APPLICATION_HOME_PAGE = __home_page__;
+export const APPLICATION_RELEASE_PAGE = __release_page__;

src/global.d.ts

@@ -5,5 +5,6 @@ declare global {
   let __app_name__: string;
   let __app_version__: string;
   let __home_page__: string;
+  let __release_page__: string;
   let __mirror__: boolean;
 }

src/state/meta.state.ts

@@ -0,0 +1,21 @@
+import { local } from '../api/storage/storage.ts';
+import { APPLICATION_VERSION } from '../api/env.ts';
+
+const METADATA_KEY = 'METADATA';
+
+/**
+ * Check if current extension's version has been written in local storage
+ * and if not - assume it's a newer version or fresh install
+ */
+export async function isExtensionFresh() {
+  const meta = await local.get([METADATA_KEY]);
+
+  return !meta || !meta[METADATA_KEY] || !meta[METADATA_KEY].version ||
+    meta[METADATA_KEY].version !== APPLICATION_VERSION;
+}
+
+export function rememberCurrentVersion() {
+  local.set({ [METADATA_KEY]: { version: APPLICATION_VERSION } }).catch(
+    () => {},
+  );
+}

src/view/menu/Version.svelte

@@ -1,14 +1,50 @@
 <script lang="ts">
   import {
     APPLICATION_HOME_PAGE,
+    APPLICATION_RELEASE_PAGE,
     APPLICATION_VERSION,
   } from '../../api/env.ts';
+  import { onMount } from 'svelte';
+  import {
+    isExtensionFresh,
+    rememberCurrentVersion,
+  } from '../../state/meta.state.ts';
+
+  let isFresh = $state(false);
+
+  onMount(async () => {
+    isFresh = await isExtensionFresh();
+  });
+
+  function onClick() {
+    rememberCurrentVersion();
+    isFresh = false;
+  }
 </script>
 
-<a
-  target="_blank"
-  href={APPLICATION_HOME_PAGE}
-  title={APPLICATION_HOME_PAGE}
->
-  v{APPLICATION_VERSION}
-</a>
+{#if isFresh}
+  <a
+    target="_blank"
+    href={APPLICATION_RELEASE_PAGE}
+    title="What's new"
+    class="is-fresh"
+    onclick={onClick}
+  >
+    v{APPLICATION_VERSION}
+  </a>
+{:else}
+  <a
+    target="_blank"
+    href={APPLICATION_HOME_PAGE}
+    title={APPLICATION_HOME_PAGE}
+  >
+    v{APPLICATION_VERSION}
+  </a>
+{/if}
+
+<style lang="scss">
+  .is-fresh {
+    color: var(--attention);
+    font-weight: bold;
+  }
+</style>