feat: add message when extension updated

src/locales/en/newtab.json

@@ -2,6 +2,10 @@
   "home": {
     "viewAll": "View all"
   },
+  "updateMessage": {
+    "text1": "Automa has been updated to v{version},",
+    "text2": "see what's new."
+  },
   "settings": {
     "language": {
       "label": "Language",

src/newtab/App.vue

@@ -5,19 +5,45 @@
       <router-view />
     </main>
     <ui-dialog />
+    <div
+      v-if="isUpdated"
+      class="p-4 shadow-2xl z-50 fixed bottom-8 left-1/2 -translate-x-1/2 rounded-lg bg-accent text-white flex items-center"
+    >
+      <v-remixicon name="riInformationLine" class="mr-3" />
+      <p>
+        {{ t('updateMessage.text1', { version: currentVersion }) }}
+      </p>
+      <a
+        :href="`https://github.com/Kholid060/automa/releases/tag/v${currentVersion}`"
+        class="underline ml-1"
+      >
+        {{ t('updateMessage.text2') }}
+      </a>
+      <button class="ml-6 text-gray-300" @click="isUpdated = false">
+        <v-remixicon size="20" name="riCloseLine" />
+      </button>
+    </div>
   </template>
 </template>
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { compare } from 'compare-versions';
 import browser from 'webextension-polyfill';
 import { loadLocaleMessages, setI18nLanguage } from '@/lib/vue-i18n';
 import AppSidebar from '@/components/newtab/app/AppSidebar.vue';
 import { sendMessage } from '@/utils/message';
 
 const store = useStore();
+const { t } = useI18n();
+
 const retrieved = ref(false);
 
+const currentVersion = browser.runtime.getManifest().version;
+const prevVersion = localStorage.getItem('ext-version') || '0.0.0';
+const isUpdated = ref(compare(currentVersion, prevVersion, '>'));
+
 function handleStorageChanged(change) {
   if (change.logs) {
     store.dispatch('entities/create', {
@@ -55,5 +81,7 @@ onMounted(async () => {
     retrieved.value = true;
     console.error(error);
   }
+
+  localStorage.setItem('ext-version', currentVersion);
 });
 </script>