implement basic placeholder announcement

frontend/components/Domain/Announcement/AnnouncementDialog.vue

@@ -1,11 +1,76 @@
 <template>
   <BaseDialog
     v-model="dialog"
+    :title="$t('announcements.announcements')"
+    :icon="$globals.icons.bullhornVariant"
+    width="100%"
+    max-width="1200"
   >
-    test <!-- TODO -->
+    <v-card-title>
+      <v-chip label large class="me-1">
+        <v-icon class="me-1">
+          {{ $globals.icons.calendar }}
+        </v-icon>
+        {{ $d(new Date(currentAnnouncement.key.split('_', 1)[0])) }}
+      </v-chip>
+      {{ currentAnnouncement.meta?.title }}
+    </v-card-title>
+    <v-card-text>
+      <component :is="currentAnnouncement.component" />
+    </v-card-text>
   </BaseDialog>
 </template>
 
 <script setup lang="ts">
+import { useAnnouncements } from "~/composables/use-announcements";
+import { useUserApi } from "~/composables/api";
+
 const dialog = defineModel<boolean>({ default: false });
+
+const auth = useMealieAuth();
+const api = useUserApi();
+const { newAnnouncements, allAnnouncements } = useAnnouncements();
+
+const currentAnnouncement = shallowRef(newAnnouncements.value.at(0) || allAnnouncements.at(-1)!);
+watch(
+  () => dialog,
+  () => {
+    // Once the dialog is opened, mark the current announcement as read
+    if (dialog.value) {
+      setLastRead(currentAnnouncement.value.key);
+    }
+  },
+);
+
+async function setLastRead(key: string) {
+  const user = auth.user.value!;
+  if (user.lastReadAnnouncement && key < user.lastReadAnnouncement) {
+    // Don't update the last read announcement if it's older than the current one
+    return;
+  }
+
+  await api.users.updateOne(
+    user.id,
+    {
+      ...user,
+      lastReadAnnouncement: key,
+    },
+  );
+}
+
+function markAllAsRead() {
+  const newestAnnouncement = allAnnouncements.at(-1)!;
+  setLastRead(newestAnnouncement.key);
+}
+
+function nextAnnouncement() {
+  newAnnouncements.value.shift();
+  const nextAnnouncement = newAnnouncements.value.at(0);
+  if (!nextAnnouncement) {
+    return;
+  }
+
+  currentAnnouncement.value = nextAnnouncement;
+  setLastRead(currentAnnouncement.value.key);
+}
 </script>

frontend/components/Domain/Announcement/Announcements/2026-03-27_1_welcome.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    Welcome to Mealie! This is a placeholder test announcement.
+  </div>
+</template>
+
+<script lang="ts">
+import type { AnnouncementMeta } from "~/composables/use-announcements";
+
+export const meta: AnnouncementMeta = {
+  title: "Placeholder Title",
+};
+</script>

frontend/components/Layout/LayoutParts/AppSidebar.vue

@@ -125,7 +125,7 @@
         >
           <template #prepend>
             <v-badge
-              :model-value="!!newAnnouncements?.length"
+              :model-value="!!newAnnouncements.length"
               color="accent"
               :content="newAnnouncements?.length"
               offset-x="-2"