From 83b9715d416acbb5aaa1e515dca239cc77352040 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 21 Jan 2025 08:39:38 -0800
Subject: [PATCH 1/8] chore: adds survey as link

---
 assets/components.d.ts         |  1 +
 assets/components/Links.vue    |  8 ++++----
 assets/components/Releases.vue | 16 ++++++++++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 9e33180372b6..6f8e1f820bc0 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
     'Carbon:copyFile': typeof import('~icons/carbon/copy-file')['default']
+    'Carbon:info': typeof import('~icons/carbon/info')['default']
     'Carbon:information': typeof import('~icons/carbon/information')['default']
     'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
     'Carbon:play': typeof import('~icons/carbon/play')['default']
diff --git a/assets/components/Links.vue b/assets/components/Links.vue
index ec57020bdb1d..2b410a292e71 100644
--- a/assets/components/Links.vue
+++ b/assets/components/Links.vue
@@ -4,10 +4,10 @@
     <Dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
       <template #trigger>
         <mdi:announcement class="size-6 -rotate-12" />
-        <span
-          class="bg-red absolute top-0 right-px size-2 rounded-full"
-          v-if="hasUpdate && latestTag != latest?.tag"
-        ></span>
+        <template v-if="hasUpdate && latestTag != latest?.tag">
+          <span class="bg-red absolute top-0 right-px size-2 animate-ping rounded-full opacity-75"></span>
+          <span class="bg-red absolute top-0 right-px size-2 rounded-full"></span>
+        </template>
       </template>
       <template #content>
         <div class="w-72">
diff --git a/assets/components/Releases.vue b/assets/components/Releases.vue
index c22502c1a5f7..2a7e46904a26 100644
--- a/assets/components/Releases.vue
+++ b/assets/components/Releases.vue
@@ -1,5 +1,21 @@
 <template>
   <ul class="space-y-4 p-2">
+    <li>
+      <div class="flex items-baseline gap-1">
+        <carbon:information class="text-info self-center" />
+        <a
+          href="https://tally.so/r/wLv4g2"
+          class="link-primary text-lg font-bold"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          Take the survey
+        </a>
+      </div>
+      <div class="text-base-content/80 text-sm">
+        I'd love to hear about your experience in this short survey to shape the future of Dozzle
+      </div>
+    </li>
     <li v-for="release in releases" v-if="releases?.length">
       <div class="flex items-baseline gap-1">
         <carbon:warning class="stroke-orange self-center" v-if="release.breaking > 0" />

From 21227e422e58110d2b57f566143b9cccf8c473fa Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 22 Jan 2025 09:16:51 -0800
Subject: [PATCH 2/8] chore: adds notifications

---
 assets/auto-imports.d.ts            |   5 +-
 assets/components.d.ts              |   1 +
 assets/components/Announcements.vue | 114 ++++++++++++++++++++++++++++
 assets/components/Links.vue         |  18 +----
 assets/components/Releases.vue      |  90 ----------------------
 assets/stores/announcements.ts      |  45 +++++++++++
 assets/stores/releases.ts           |  29 -------
 7 files changed, 164 insertions(+), 138 deletions(-)
 create mode 100644 assets/components/Announcements.vue
 delete mode 100644 assets/components/Releases.vue
 create mode 100644 assets/stores/announcements.ts
 delete mode 100644 assets/stores/releases.ts

diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts
index 772d304deb20..e5dec409b9fd 100644
--- a/assets/auto-imports.d.ts
+++ b/assets/auto-imports.d.ts
@@ -162,6 +162,7 @@ declare global {
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useAnnouncements: typeof import('./stores/announcements')['useAnnouncements']
   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
@@ -287,7 +288,7 @@ declare global {
   const useProfileStorage: typeof import('./composable/profileStorage')['useProfileStorage']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
-  const useReleases: typeof import('./stores/releases')['useReleases']
+  const useReleases: typeof import('./stores/announcements')['useReleases']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
@@ -551,6 +552,7 @@ declare module 'vue' {
     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
     readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
+    readonly useAnnouncements: UnwrapRef<typeof import('./stores/announcements')['useAnnouncements']>
     readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
     readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
     readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
@@ -676,7 +678,6 @@ declare module 'vue' {
     readonly useProfileStorage: UnwrapRef<typeof import('./composable/profileStorage')['useProfileStorage']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
-    readonly useReleases: UnwrapRef<typeof import('./stores/releases')['useReleases']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
diff --git a/assets/components.d.ts b/assets/components.d.ts
index 6f8e1f820bc0..5771794fbe6c 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Announcements: typeof import('./components/Announcements.vue')['default']
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
     'Carbon:copyFile': typeof import('~icons/carbon/copy-file')['default']
diff --git a/assets/components/Announcements.vue b/assets/components/Announcements.vue
new file mode 100644
index 000000000000..b8f177ff6e58
--- /dev/null
+++ b/assets/components/Announcements.vue
@@ -0,0 +1,114 @@
+<template>
+  <Dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
+    <template #trigger>
+      <mdi:announcement class="size-6 -rotate-12" />
+      <template v-if="hasUpdate && latestTag != latest?.tag">
+        <span class="bg-red absolute top-0 right-px size-2 animate-ping rounded-full opacity-75"></span>
+        <span class="bg-red absolute top-0 right-px size-2 rounded-full"></span>
+      </template>
+    </template>
+    <template #content>
+      <div class="w-72">
+        <ul class="space-y-4 p-2">
+          <li v-for="release in announcements" v-if="announcements?.length">
+            <template v-if="release.announcement">
+              <div class="flex items-baseline gap-1">
+                <carbon:information class="text-info self-center" />
+                <a
+                  :href="release.htmlUrl"
+                  class="link-primary text-lg font-bold"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  {{ release.name }}
+                </a>
+              </div>
+              <div class="text-base-content/80 text-sm">
+                {{ release.body }}
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-baseline gap-1">
+                <carbon:warning class="stroke-orange self-center" v-if="release.breaking > 0" />
+                <a
+                  :href="release.htmlUrl"
+                  class="link-primary text-lg font-bold"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  {{ release.name }}
+                </a>
+                <span class="ml-1 text-xs"><distance-time :date="new Date(release.createdAt)" /></span>
+                <Tag class="bg-red ml-auto px-1 py-1 text-xs" v-if="release.tag === latest?.tag">
+                  {{ $t("releases.latest") }}
+                </Tag>
+              </div>
+              <div class="text-base-content/80 text-sm">
+                {{ summary(release) }}
+              </div>
+            </template>
+          </li>
+          <li v-else>
+            <div class="text-base-content/80 text-sm">
+              {{ $t("releases.no_releases") }}
+            </div>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup lang="ts">
+import { useAnnouncements } from "@/stores/announcements";
+
+const { announcements, latest, hasUpdate } = useAnnouncements();
+const { t } = useI18n();
+
+const latestTag = useProfileStorage("releaseSeen", config.version);
+
+function summary(release: { features: number; bugFixes: number; breaking: number }) {
+  if (release.features > 0 && release.bugFixes > 0 && release.breaking > 0) {
+    return t("releases.three_parts", {
+      first: t("releases.breaking", { count: release.breaking }),
+      second: t("releases.features", { count: release.features }),
+      third: t("releases.bugFixes", { count: release.bugFixes }),
+    });
+  }
+
+  if (release.features > 0 && release.bugFixes > 0) {
+    return t("releases.two_parts", {
+      first: t("releases.features", { count: release.features }),
+      second: t("releases.bugFixes", { count: release.bugFixes }),
+    });
+  }
+
+  if (release.features > 0 && release.breaking > 0) {
+    return t("releases.two_parts", {
+      first: t("releases.features", { count: release.features }),
+      second: t("releases.breaking", { count: release.breaking }),
+    });
+  }
+
+  if (release.bugFixes > 0 && release.breaking > 0) {
+    return t("releases.two_parts", {
+      first: t("releases.bugFixes", { count: release.bugFixes }),
+      second: t("releases.breaking", { count: release.breaking }),
+    });
+  }
+
+  if (release.features > 0) {
+    return t("releases.features", { count: release.features });
+  }
+
+  if (release.bugFixes > 0) {
+    return t("releases.bugFixes", { count: release.bugFixes });
+  }
+
+  if (release.breaking > 0) {
+    return t("releases.breaking", { count: release.breaking });
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/assets/components/Links.vue b/assets/components/Links.vue
index 2b410a292e71..5825c7fa0b6e 100644
--- a/assets/components/Links.vue
+++ b/assets/components/Links.vue
@@ -1,20 +1,7 @@
 <template>
   <div class="flex items-center justify-end gap-4">
     <slot name="more-items"></slot>
-    <Dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
-      <template #trigger>
-        <mdi:announcement class="size-6 -rotate-12" />
-        <template v-if="hasUpdate && latestTag != latest?.tag">
-          <span class="bg-red absolute top-0 right-px size-2 animate-ping rounded-full opacity-75"></span>
-          <span class="bg-red absolute top-0 right-px size-2 rounded-full"></span>
-        </template>
-      </template>
-      <template #content>
-        <div class="w-72">
-          <Releases />
-        </div>
-      </template>
-    </Dropdown>
+    <Announcements />
 
     <router-link
       :to="{ name: '/settings' }"
@@ -58,7 +45,4 @@ async function logout() {
 
   location.reload();
 }
-
-const { hasUpdate, latest } = useReleases();
-const latestTag = useProfileStorage("releaseSeen", config.version);
 </script>
diff --git a/assets/components/Releases.vue b/assets/components/Releases.vue
deleted file mode 100644
index 2a7e46904a26..000000000000
--- a/assets/components/Releases.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <ul class="space-y-4 p-2">
-    <li>
-      <div class="flex items-baseline gap-1">
-        <carbon:information class="text-info self-center" />
-        <a
-          href="https://tally.so/r/wLv4g2"
-          class="link-primary text-lg font-bold"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          Take the survey
-        </a>
-      </div>
-      <div class="text-base-content/80 text-sm">
-        I'd love to hear about your experience in this short survey to shape the future of Dozzle
-      </div>
-    </li>
-    <li v-for="release in releases" v-if="releases?.length">
-      <div class="flex items-baseline gap-1">
-        <carbon:warning class="stroke-orange self-center" v-if="release.breaking > 0" />
-        <a :href="release.htmlUrl" class="link-primary text-lg font-bold" target="_blank" rel="noreferrer noopener">
-          {{ release.name }}
-        </a>
-        <span class="ml-1 text-xs"><distance-time :date="new Date(release.createdAt)" /></span>
-        <Tag class="bg-red ml-auto px-1 py-1 text-xs" v-if="release.tag === latest?.tag">
-          {{ $t("releases.latest") }}
-        </Tag>
-      </div>
-      <div class="text-base-content/80 text-sm">
-        {{ summary(release) }}
-      </div>
-    </li>
-    <li v-else>
-      <div class="text-base-content/80 text-sm">
-        {{ $t("releases.no_releases") }}
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-const { releases, latest } = useReleases();
-const { t } = useI18n();
-
-function summary(release: { features: number; bugFixes: number; breaking: number }) {
-  if (release.features > 0 && release.bugFixes > 0 && release.breaking > 0) {
-    return t("releases.three_parts", {
-      first: t("releases.breaking", { count: release.breaking }),
-      second: t("releases.features", { count: release.features }),
-      third: t("releases.bugFixes", { count: release.bugFixes }),
-    });
-  }
-
-  if (release.features > 0 && release.bugFixes > 0) {
-    return t("releases.two_parts", {
-      first: t("releases.features", { count: release.features }),
-      second: t("releases.bugFixes", { count: release.bugFixes }),
-    });
-  }
-
-  if (release.features > 0 && release.breaking > 0) {
-    return t("releases.two_parts", {
-      first: t("releases.features", { count: release.features }),
-      second: t("releases.breaking", { count: release.breaking }),
-    });
-  }
-
-  if (release.bugFixes > 0 && release.breaking > 0) {
-    return t("releases.two_parts", {
-      first: t("releases.bugFixes", { count: release.bugFixes }),
-      second: t("releases.breaking", { count: release.breaking }),
-    });
-  }
-
-  if (release.features > 0) {
-    return t("releases.features", { count: release.features });
-  }
-
-  if (release.bugFixes > 0) {
-    return t("releases.bugFixes", { count: release.bugFixes });
-  }
-
-  if (release.breaking > 0) {
-    return t("releases.breaking", { count: release.breaking });
-  }
-}
-</script>
-
-<style scoped></style>
diff --git a/assets/stores/announcements.ts b/assets/stores/announcements.ts
new file mode 100644
index 000000000000..422e31fb04a6
--- /dev/null
+++ b/assets/stores/announcements.ts
@@ -0,0 +1,45 @@
+const { data: releases } = useFetch(withBase("/api/releases")).get().json<
+  {
+    name: string;
+    mentionsCount: number;
+    createdAt: Date;
+    body: string;
+    tag: string;
+    htmlUrl: string;
+    latest: boolean;
+    features: number;
+    bugFixes: number;
+    breaking: number;
+    announcement: boolean;
+  }[]
+>();
+
+const otherAnnouncements = [
+  {
+    body: "I'd love to hear about your experience in this short survey to shape the future of Dozzle",
+    createdAt: new Date("2025-01-22T00:00:00Z"),
+    htmlUrl: "https://tally.so/r/wLv4g2",
+    name: "Take survey!",
+    announcement: true,
+    tag: "survey-2025-01",
+    latest: true,
+  },
+];
+
+const announcements = computed(() => {
+  const newReleases =
+    releases.value?.map((release) => ({ ...release, createdAt: new Date(release.createdAt), announcement: false })) ??
+    [];
+  return [...newReleases, ...otherAnnouncements].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+});
+
+const hasUpdate = computed(() => announcements.value?.some((release) => release.latest) ?? false);
+const latest = computed(() => announcements.value?.find((release) => release.latest));
+
+export function useAnnouncements() {
+  return {
+    hasUpdate,
+    latest,
+    announcements,
+  };
+}
diff --git a/assets/stores/releases.ts b/assets/stores/releases.ts
deleted file mode 100644
index 0567427b7382..000000000000
--- a/assets/stores/releases.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-const { data: releases } = useFetch(withBase("/api/releases")).get().json<
-  {
-    name: string;
-    mentionsCount: number;
-    createdAt: string;
-    body: string;
-    tag: string;
-    htmlUrl: string;
-    latest: boolean;
-    features: number;
-    bugFixes: number;
-    breaking: number;
-  }[]
->();
-
-const hasUpdate = computed(() => {
-  if (!releases.value?.length) return false;
-  return releases.value[0].tag !== config.version;
-});
-
-const latest = computed(() => releases.value?.find((release) => release.latest));
-
-export function useReleases() {
-  return {
-    hasUpdate,
-    latest,
-    releases,
-  };
-}

From f972cb7e13520754ac8b94ae685cd73c8656a451 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 22 Jan 2025 09:20:25 -0800
Subject: [PATCH 3/8] updates link

---
 assets/stores/announcements.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/stores/announcements.ts b/assets/stores/announcements.ts
index 422e31fb04a6..4ee5d8bcdf0e 100644
--- a/assets/stores/announcements.ts
+++ b/assets/stores/announcements.ts
@@ -18,7 +18,7 @@ const otherAnnouncements = [
   {
     body: "I'd love to hear about your experience in this short survey to shape the future of Dozzle",
     createdAt: new Date("2025-01-22T00:00:00Z"),
-    htmlUrl: "https://tally.so/r/wLv4g2",
+    htmlUrl: "https://tally.so/r/wLv4g2?ref=notification",
     name: "Take survey!",
     announcement: true,
     tag: "survey-2025-01",

From b159f71dc68fd980ed9c8a9d00205096c93974e4 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 22 Jan 2025 09:24:39 -0800
Subject: [PATCH 4/8] fixes check

---
 assets/stores/announcements.ts | 38 +++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/assets/stores/announcements.ts b/assets/stores/announcements.ts
index 4ee5d8bcdf0e..481976ac006d 100644
--- a/assets/stores/announcements.ts
+++ b/assets/stores/announcements.ts
@@ -1,30 +1,34 @@
-const { data: releases } = useFetch(withBase("/api/releases")).get().json<
-  {
-    name: string;
-    mentionsCount: number;
-    createdAt: Date;
-    body: string;
-    tag: string;
-    htmlUrl: string;
-    latest: boolean;
-    features: number;
-    bugFixes: number;
-    breaking: number;
-    announcement: boolean;
-  }[]
->();
+type Announcement = {
+  name: string;
+  announcement: boolean;
+  createdAt: Date;
+  body: string;
+  tag: string;
+  htmlUrl: string;
+  latest: boolean;
+  mentionsCount: number;
+  features: number;
+  bugFixes: number;
+  breaking: number;
+};
+
+const { data: releases } = useFetch(withBase("/api/releases")).get().json<Announcement[]>();
 
 const otherAnnouncements = [
   {
-    body: "I'd love to hear about your experience in this short survey to shape the future of Dozzle",
+    body: "I'd love to hear about your experience in this short survey to shape the future of Dozzle!",
     createdAt: new Date("2025-01-22T00:00:00Z"),
     htmlUrl: "https://tally.so/r/wLv4g2?ref=notification",
     name: "Take survey!",
     announcement: true,
     tag: "survey-2025-01",
     latest: true,
+    mentionsCount: 0,
+    features: 0,
+    bugFixes: 0,
+    breaking: 0,
   },
-];
+] as Announcement[];
 
 const announcements = computed(() => {
   const newReleases =

From 301f1ffbad5f2058bf45e9b592da11b7daef4064 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 22 Jan 2025 09:39:59 -0800
Subject: [PATCH 5/8] fixes bugs

---
 assets/components.d.ts              |  2 --
 assets/components/Announcements.vue | 10 +++++-----
 assets/pages/settings.vue           |  4 ++--
 assets/stores/announcements.ts      |  6 ++++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 5771794fbe6c..a014765cca9a 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -11,7 +11,6 @@ declare module 'vue' {
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
     'Carbon:copyFile': typeof import('~icons/carbon/copy-file')['default']
-    'Carbon:info': typeof import('~icons/carbon/info')['default']
     'Carbon:information': typeof import('~icons/carbon/information')['default']
     'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
     'Carbon:play': typeof import('~icons/carbon/play')['default']
@@ -101,7 +100,6 @@ declare module 'vue' {
     'Ph:stackSimple': typeof import('~icons/ph/stack-simple')['default']
     Popup: typeof import('./components/Popup.vue')['default']
     RandomColorTag: typeof import('./components/LogViewer/RandomColorTag.vue')['default']
-    Releases: typeof import('./components/Releases.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollableView: typeof import('./components/ScrollableView.vue')['default']
diff --git a/assets/components/Announcements.vue b/assets/components/Announcements.vue
index b8f177ff6e58..ea7b888467f0 100644
--- a/assets/components/Announcements.vue
+++ b/assets/components/Announcements.vue
@@ -1,8 +1,8 @@
 <template>
-  <Dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
+  <Dropdown class="dropdown-end" @closed="releaseSeen = latestTag ?? config.version">
     <template #trigger>
       <mdi:announcement class="size-6 -rotate-12" />
-      <template v-if="hasUpdate && latestTag != latest?.tag">
+      <template v-if="hasUpdate && releaseSeen != latestTag">
         <span class="bg-red absolute top-0 right-px size-2 animate-ping rounded-full opacity-75"></span>
         <span class="bg-red absolute top-0 right-px size-2 rounded-full"></span>
       </template>
@@ -39,7 +39,7 @@
                   {{ release.name }}
                 </a>
                 <span class="ml-1 text-xs"><distance-time :date="new Date(release.createdAt)" /></span>
-                <Tag class="bg-red ml-auto px-1 py-1 text-xs" v-if="release.tag === latest?.tag">
+                <Tag class="bg-red ml-auto px-1 py-1 text-xs" v-if="release.tag === latestRelease?.tag">
                   {{ $t("releases.latest") }}
                 </Tag>
               </div>
@@ -62,10 +62,10 @@
 <script setup lang="ts">
 import { useAnnouncements } from "@/stores/announcements";
 
-const { announcements, latest, hasUpdate } = useAnnouncements();
+const { announcements, latestTag, hasUpdate, latestRelease } = useAnnouncements();
 const { t } = useI18n();
 
-const latestTag = useProfileStorage("releaseSeen", config.version);
+const releaseSeen = useProfileStorage("releaseSeen", config.version);
 
 function summary(release: { features: number; bugFixes: number; breaking: number }) {
   if (release.features > 0 && release.bugFixes > 0 && release.breaking > 0) {
diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue
index f576c3dbb2f1..3c791d8f2daf 100644
--- a/assets/pages/settings.vue
+++ b/assets/pages/settings.vue
@@ -9,7 +9,7 @@
         <span v-html="$t('settings.using-version', { version: config.version })"></span>
         <div
           v-if="hasUpdate"
-          v-html="$t('settings.update-available', { nextVersion: latest?.name, href: latest?.htmlUrl })"
+          v-html="$t('settings.update-available', { nextVersion: latestRelease?.name, href: latestRelease?.htmlUrl })"
         ></div>
       </div>
     </section>
@@ -154,7 +154,7 @@ import { availableLocales, i18n } from "@/modules/i18n";
 const { t } = useI18n();
 
 setTitle(t("title.settings"));
-const { latest, hasUpdate } = useReleases();
+const { latestRelease, hasUpdate } = useAnnouncements();
 
 const now = new Date();
 const hoursAgo = (hours: number) => {
diff --git a/assets/stores/announcements.ts b/assets/stores/announcements.ts
index 481976ac006d..4d259f7e63cc 100644
--- a/assets/stores/announcements.ts
+++ b/assets/stores/announcements.ts
@@ -38,12 +38,14 @@ const announcements = computed(() => {
 });
 
 const hasUpdate = computed(() => announcements.value?.some((release) => release.latest) ?? false);
-const latest = computed(() => announcements.value?.find((release) => release.latest));
+const latestTag = computed(() => announcements.value?.find((release) => release.latest)?.tag);
+const latestRelease = computed(() => announcements.value?.find((release) => release.latest && !release.announcement));
 
 export function useAnnouncements() {
   return {
     hasUpdate,
-    latest,
+    latestTag,
     announcements,
+    latestRelease,
   };
 }

From 2cd986b46a334b740c7c3fa14bc7ed0f1d5b020c Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 22 Jan 2025 09:50:28 -0800
Subject: [PATCH 6/8] clean up

---
 assets/components/Announcements.vue | 10 +++++-----
 assets/pages/settings.vue           |  4 ++--
 assets/stores/announcements.ts      |  8 ++++----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/assets/components/Announcements.vue b/assets/components/Announcements.vue
index ea7b888467f0..5fd5306bcf4e 100644
--- a/assets/components/Announcements.vue
+++ b/assets/components/Announcements.vue
@@ -1,8 +1,8 @@
 <template>
-  <Dropdown class="dropdown-end" @closed="releaseSeen = latestTag ?? config.version">
+  <Dropdown class="dropdown-end" @closed="releaseSeen = mostRecent?.tag ?? config.version">
     <template #trigger>
       <mdi:announcement class="size-6 -rotate-12" />
-      <template v-if="hasUpdate && releaseSeen != latestTag">
+      <template v-if="announcements.length > 0 && releaseSeen != mostRecent?.tag">
         <span class="bg-red absolute top-0 right-px size-2 animate-ping rounded-full opacity-75"></span>
         <span class="bg-red absolute top-0 right-px size-2 rounded-full"></span>
       </template>
@@ -10,7 +10,7 @@
     <template #content>
       <div class="w-72">
         <ul class="space-y-4 p-2">
-          <li v-for="release in announcements" v-if="announcements?.length">
+          <li v-for="release in announcements" v-if="announcements.length > 0">
             <template v-if="release.announcement">
               <div class="flex items-baseline gap-1">
                 <carbon:information class="text-info self-center" />
@@ -39,7 +39,7 @@
                   {{ release.name }}
                 </a>
                 <span class="ml-1 text-xs"><distance-time :date="new Date(release.createdAt)" /></span>
-                <Tag class="bg-red ml-auto px-1 py-1 text-xs" v-if="release.tag === latestRelease?.tag">
+                <Tag class="bg-red ml-auto px-1 py-1 text-xs" v-if="release.latest">
                   {{ $t("releases.latest") }}
                 </Tag>
               </div>
@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import { useAnnouncements } from "@/stores/announcements";
 
-const { announcements, latestTag, hasUpdate, latestRelease } = useAnnouncements();
+const { announcements, mostRecent } = useAnnouncements();
 const { t } = useI18n();
 
 const releaseSeen = useProfileStorage("releaseSeen", config.version);
diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue
index 3c791d8f2daf..9df0d4562c9c 100644
--- a/assets/pages/settings.vue
+++ b/assets/pages/settings.vue
@@ -8,7 +8,7 @@
       <div>
         <span v-html="$t('settings.using-version', { version: config.version })"></span>
         <div
-          v-if="hasUpdate"
+          v-if="hasRelease"
           v-html="$t('settings.update-available', { nextVersion: latestRelease?.name, href: latestRelease?.htmlUrl })"
         ></div>
       </div>
@@ -154,7 +154,7 @@ import { availableLocales, i18n } from "@/modules/i18n";
 const { t } = useI18n();
 
 setTitle(t("title.settings"));
-const { latestRelease, hasUpdate } = useAnnouncements();
+const { latestRelease, hasRelease } = useAnnouncements();
 
 const now = new Date();
 const hoursAgo = (hours: number) => {
diff --git a/assets/stores/announcements.ts b/assets/stores/announcements.ts
index 4d259f7e63cc..a0cf5db00fb2 100644
--- a/assets/stores/announcements.ts
+++ b/assets/stores/announcements.ts
@@ -37,15 +37,15 @@ const announcements = computed(() => {
   return [...newReleases, ...otherAnnouncements].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
 });
 
-const hasUpdate = computed(() => announcements.value?.some((release) => release.latest) ?? false);
-const latestTag = computed(() => announcements.value?.find((release) => release.latest)?.tag);
+const mostRecent = computed(() => announcements.value?.[0]);
 const latestRelease = computed(() => announcements.value?.find((release) => release.latest && !release.announcement));
+const hasRelease = computed(() => latestRelease.value !== undefined);
 
 export function useAnnouncements() {
   return {
-    hasUpdate,
-    latestTag,
+    mostRecent,
     announcements,
     latestRelease,
+    hasRelease,
   };
 }

From a0c2d1e3c8f0e422a176cf9a7cd836f8712bb959 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 22 Jan 2025 09:51:09 -0800
Subject: [PATCH 7/8] clean up

---
 assets/auto-imports.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts
index e5dec409b9fd..7c5ebc2810e2 100644
--- a/assets/auto-imports.d.ts
+++ b/assets/auto-imports.d.ts
@@ -288,7 +288,6 @@ declare global {
   const useProfileStorage: typeof import('./composable/profileStorage')['useProfileStorage']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
-  const useReleases: typeof import('./stores/announcements')['useReleases']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']

From 7a9142529a8a93d631e3e3e8696db882b4ee0803 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 22 Jan 2025 09:53:55 -0800
Subject: [PATCH 8/8] fixes more bugs

---
 assets/components/Announcements.vue | 3 ++-
 assets/stores/announcements.ts      | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/assets/components/Announcements.vue b/assets/components/Announcements.vue
index 5fd5306bcf4e..70cee2dc9195 100644
--- a/assets/components/Announcements.vue
+++ b/assets/components/Announcements.vue
@@ -22,6 +22,7 @@
                 >
                   {{ release.name }}
                 </a>
+                <span class="ml-1 text-xs"><distance-time :date="release.createdAt" /></span>
               </div>
               <div class="text-base-content/80 text-sm">
                 {{ release.body }}
@@ -38,7 +39,7 @@
                 >
                   {{ release.name }}
                 </a>
-                <span class="ml-1 text-xs"><distance-time :date="new Date(release.createdAt)" /></span>
+                <span class="ml-1 text-xs"><distance-time :date="release.createdAt" /></span>
                 <Tag class="bg-red ml-auto px-1 py-1 text-xs" v-if="release.latest">
                   {{ $t("releases.latest") }}
                 </Tag>
diff --git a/assets/stores/announcements.ts b/assets/stores/announcements.ts
index a0cf5db00fb2..d7a39ad03570 100644
--- a/assets/stores/announcements.ts
+++ b/assets/stores/announcements.ts
@@ -17,7 +17,7 @@ const { data: releases } = useFetch(withBase("/api/releases")).get().json<Announ
 const otherAnnouncements = [
   {
     body: "I'd love to hear about your experience in this short survey to shape the future of Dozzle!",
-    createdAt: new Date("2025-01-22T00:00:00Z"),
+    createdAt: new Date("2025-01-22T18:00:00Z"),
     htmlUrl: "https://tally.so/r/wLv4g2?ref=notification",
     name: "Take survey!",
     announcement: true,