feat(addon): show the add-on version on the add-on's pages (#970) (#973)

Surface the Thunderbird add-on version as a small tag on the add-on's own
surfaces — the management page (AddonManagementPage) and the popup
(ExtensionPage) — so it's easy to tell which add-on version is running.

The tag renders the build's __APP_VERSION__ via a small shared VersionTag.vue.
In the add-on build that value is the packages/addon version (the add-on
version). It is intentionally NOT added to the standalone web app's own
surfaces (main footer, web management page): the web build has its own version,
so showing the add-on version there would be misleading and would require
cross-package version wiring. Keeping each build to its own __APP_VERSION__
keeps this change simple.

Verified on the running dev app: the popup renders the version tag and the
web management page does not; all touched components compile.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: aaspinwall

packages/addon/src/apps/AddonManagementPage.vue

@@ -5,6 +5,7 @@ import { BASE_URL } from '@send-frontend/apps/common/constants';
 import { useAuth } from '@send-frontend/lib/auth';
 import AuthButtons from '@send-frontend/lib/auth/AuthButtons.vue';
 import { useAuthStore } from '@send-frontend/stores';
+import VersionTag from '@send-frontend/apps/common/VersionTag.vue';
 import AdminPage from './AdminPage.vue';
 
 const authStore = useAuthStore();
@@ -40,6 +41,8 @@ async function openLoginPage() {
       </div>
       <AdminPage v-else />
     </WithLoader>
+
+    <VersionTag />
   </div>
 </template>
 

packages/send/frontend/src/apps/common/VersionTag.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// Renders the version of the build this component is compiled into, injected at
+// build time via the __APP_VERSION__ define. In the add-on build (where this is
+// used, on the management page and popup) that's the add-on version — making it
+// easy to tell which add-on version is running.
+const version = __APP_VERSION__;
+</script>
+
+<template>
+  <span class="addon-version-tag" data-testid="addon-version">
+    v{{ version }}
+  </span>
+</template>
+
+<style scoped>
+.addon-version-tag {
+  display: inline-block;
+  font-family: Inter, sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  /* Inherit the surrounding text color (dark footer vs. light pages) and dim
+     it so the tag is present but unobtrusive. */
+  color: currentColor;
+  opacity: 0.6;
+}
+</style>

packages/send/frontend/src/apps/send/ExtensionPage.vue

@@ -7,6 +7,7 @@ import { onMounted } from 'vue';
 
 import { useMetricsUpdate } from '@send-frontend/apps/common/mixins/metrics';
 import useMetricsStore from '@send-frontend/stores/metrics';
+import VersionTag from '@send-frontend/apps/common/VersionTag.vue';
 import PopupView from './views/PopupView.vue';
 
 const userStore = useUserStore();
@@ -27,6 +28,7 @@ useMetricsUpdate();
 <template>
   <div id="send-page" class="container">
     <PopupView />
+    <VersionTag />
   </div>
 </template>