feat(updates): add hourly update badge

src/App.vue

@@ -59,6 +59,7 @@ const {
   isDownloadingUpdate,
   downloadProgress,
   updateReady,
+  hasUpdateAvailable,
   openUrl,
   checkUpdates,
   openLatestRelease,
@@ -68,6 +69,8 @@ const {
 const { setupFileDrop } = useFileDrop();
 
 const isDesktop = isTauriRuntime();
+const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000;
+let updateCheckTimer: ReturnType<typeof setInterval> | undefined;
 const needsAuth = ref(!isDesktop);
 const authenticated = ref(isDesktop);
 const setupRequired = ref(false);
@@ -527,6 +530,7 @@ onMounted(async () => {
   initApp();
   setupFileDrop().catch(() => {});
   checkUpdates({ silent: true });
+  updateCheckTimer = setInterval(() => checkUpdates({ silent: true }), UPDATE_CHECK_INTERVAL_MS);
   api
     .getAppVersion()
     .then((v) => {
@@ -538,6 +542,9 @@ onMounted(async () => {
 
 onUnmounted(() => {
   cleanupTauriListeners();
+  if (updateCheckTimer) {
+    clearInterval(updateCheckTimer);
+  }
   window.removeEventListener("keydown", handleKeydown, true);
   document.removeEventListener("contextmenu", handleContextMenu);
 });
@@ -559,6 +566,7 @@ onUnmounted(() => {
           :show-history="showHistory"
           :show-driver-store="showDriverStore"
           :checking-updates="checkingUpdates"
+          :has-update-available="hasUpdateAvailable"
           :has-connections="connectionStore.connections.length > 0"
           :has-sql-file-connections="hasSqlFileConnections"
           @new-connection="showConnectionDialog = true"

src/components/layout/AppToolbar.vue

@@ -45,6 +45,7 @@ defineProps<{
   showHistory: boolean;
   showDriverStore: boolean;
   checkingUpdates: boolean;
+  hasUpdateAvailable: boolean;
   hasConnections: boolean;
   hasSqlFileConnections: boolean;
 }>();
@@ -159,9 +160,19 @@ function onToolbarDblClick(e: MouseEvent) {
 
     <Tooltip>
       <TooltipTrigger as-child>
-        <Button variant="ghost" size="icon" class="h-8 w-8" :disabled="checkingUpdates" @click="emit('check-updates')">
+        <Button
+          variant="ghost"
+          size="icon"
+          class="relative h-8 w-8"
+          :disabled="checkingUpdates"
+          @click="emit('check-updates')"
+        >
           <Loader2 v-if="checkingUpdates" class="h-4 w-4 animate-spin" />
           <CloudDownload v-else class="h-4 w-4" />
+          <span
+            v-if="hasUpdateAvailable"
+            class="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-red-500 ring-2 ring-background"
+          />
         </Button>
       </TooltipTrigger>
       <TooltipContent>{{ t("updates.check") }}</TooltipContent>

src/composables/useAppUpdater.ts

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { isTauriRuntime } from "@/lib/tauriRuntime";
 import { useToast } from "@/composables/useToast";
@@ -15,6 +15,7 @@ export function useAppUpdater() {
   const isDownloadingUpdate = ref(false);
   const downloadProgress = ref(0);
   const updateReady = ref(false);
+  const hasUpdateAvailable = computed(() => updateInfo.value?.update_available === true);
   const latestReleaseUrl = "https://github.com/t8y2/dbx/releases/latest";
 
   function openUrl(url: string) {
@@ -31,9 +32,12 @@ export function useAppUpdater() {
     updateCheckMessage.value = "";
     try {
       const info = await api.checkForUpdates();
+      const wasUpdateAvailable = hasUpdateAvailable.value;
       updateInfo.value = info;
       if (info.update_available) {
-        showUpdateDialog.value = true;
+        if (!options.silent || !wasUpdateAvailable) {
+          showUpdateDialog.value = true;
+        }
       } else if (!options.silent) {
         updateCheckMessage.value = t("updates.upToDate", { version: info.current_version });
         showUpdateDialog.value = true;
@@ -107,6 +111,7 @@ export function useAppUpdater() {
     isDownloadingUpdate,
     downloadProgress,
     updateReady,
+    hasUpdateAvailable,
     latestReleaseUrl,
     openUrl,
     checkUpdates,