add announcements composable and dialog component

frontend/components/Domain/Announcement/AnnouncementDialog.vue

@@ -0,0 +1,11 @@
+<template>
+  <BaseDialog
+    v-model="dialog"
+  >
+    test <!-- TODO -->
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+const dialog = defineModel<boolean>({ default: false });
+</script>

frontend/components/Layout/LayoutParts/AppSidebar.vue

@@ -1,5 +1,6 @@
 <template>
   <v-navigation-drawer v-model="modelValue" class="d-flex flex-column d-print-none position-fixed" touchless>
+    <AnnouncementDialog v-model="showAnnouncementsDialog" />
     <LanguageDialog v-model="state.languageDialog" />
     <!-- User Profile -->
     <template v-if="loggedIn && sessionUser">
@@ -117,6 +118,24 @@
     <!-- Bottom Navigation Links -->
     <template #append>
       <v-list v-model:selected="state.bottomSelected" nav density="comfortable">
+        <v-list-item
+          v-if="loggedIn && announcementsEnabled"
+          :title="$t('announcements.announcements')"
+          @click="() => showAnnouncementsDialog = !showAnnouncementsDialog"
+        >
+          <template #prepend>
+            <v-badge
+              :model-value="!!newAnnouncements?.length"
+              color="accent"
+              :content="newAnnouncements?.length"
+              offset-x="-2"
+            >
+              <v-icon>
+                {{ $globals.icons.bullhornVariant }}
+              </v-icon>
+            </v-badge>
+          </template>
+        </v-list-item>
         <v-menu location="end bottom" :offset="15">
           <template #activator="{ props: hoverProps }">
             <v-list-item v-bind="hoverProps" :prepend-icon="$globals.icons.cog" :title="$t('general.settings')" />
@@ -139,8 +158,10 @@
 <script setup lang="ts">
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import type { SidebarLinks } from "~/types/application-types";
+import AnnouncementDialog from "~/components/Domain/Announcement/AnnouncementDialog.vue";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import { useToggleDarkMode } from "~/composables/use-utils";
+import { useAnnouncements } from "~/composables/use-announcements";
 
 const props = defineProps({
   user: {
@@ -171,6 +192,9 @@ const userProfileLink = computed(() => auth.user.value ? "/user/profile" : undef
 
 const toggleDark = useToggleDarkMode();
 
+const showAnnouncementsDialog = ref(false);
+const { announcementsEnabled, newAnnouncements } = useAnnouncements();
+
 const state = reactive({
   dropDowns: {} as Record<string, boolean>,
   secondarySelected: null as string[] | null,

frontend/composables/use-announcements.ts

@@ -0,0 +1,36 @@
+import { useHouseholdSelf } from "~/composables/use-households";
+import { useGroupSelf } from "~/composables/use-groups";
+
+export function useAnnouncements() {
+  const auth = useMealieAuth();
+  const { household } = useHouseholdSelf();
+  const { group } = useGroupSelf();
+
+  const announcementsEnabled = computed(
+    () =>
+      !!(
+        auth.user.value?.showAnnouncements
+        && household.value?.preferences?.showAnnouncements
+        && group.value?.preferences?.showAnnouncements
+      ),
+  );
+
+  const newAnnouncements = ref<string[] | undefined>();
+  function refreshUnreadAnnouncements() {
+    if (!auth.user.value) {
+      newAnnouncements.value = undefined;
+    }
+
+    newAnnouncements.value = []; // TODO
+  }
+
+  refreshUnreadAnnouncements();
+  watch(() => auth.user, () => {
+    refreshUnreadAnnouncements();
+  });
+
+  return {
+    announcementsEnabled,
+    newAnnouncements,
+  };
+}

frontend/lang/messages/en-US.json

@@ -1474,6 +1474,7 @@
     "max-length": "Must Be At Most {max} Character|Must Be At Most {max} Characters"
   },
   "announcements": {
+    "announcements": "Announcements",
     "show-announcements-from-mealie": "Show announcements from Mealie",
     "show-announcements-setting-description": "Whether or not you want to allow users to see announcements from Mealie. When enabled users can still opt-out from seeing them in their user settings"
   }

frontend/lib/icons/icons.ts

@@ -19,6 +19,7 @@ import {
   mdiBookOutline,
   mdiBowlMixOutline,
   mdiBroom,
+  mdiBullhornVariant,
   mdiCalendar,
   mdiCalendarMinus,
   mdiCalendarMultiselect,
@@ -181,6 +182,7 @@ export const icons = {
   bellAlert: mdiBellAlert,
   bellPlus: mdiBellPlus,
   broom: mdiBroom,
+  bullhornVariant: mdiBullhornVariant,
   calendar: mdiCalendar,
   calendarMinus: mdiCalendarMinus,
   calendarMultiselect: mdiCalendarMultiselect,