feat: Announcements (#7431)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/app/pages/admin/manage/groups/[id].vue

@@ -15,7 +15,6 @@
       <template #title>
         {{ $t('group.admin-group-management') }}
       </template>
-      {{ $t('group.admin-group-management-text') }}
     </BasePageTitle>
     <AppToolbar back />
     <v-card-text> {{ $t('group.group-id-value', [group.id]) }} </v-card-text>
@@ -98,6 +97,7 @@ async function handleSubmit() {
       window.location.reload();
     }
     group.value = data;
+    alert.success(i18n.t("settings.settings-updated"));
   }
   else {
     alert.error(i18n.t("settings.settings-update-failed"));

frontend/app/pages/admin/manage/households/[id].vue

@@ -15,7 +15,6 @@
       <template #title>
         {{ $t('household.admin-household-management') }}
       </template>
-      {{ $t('household.admin-household-management-text') }}
     </BasePageTitle>
     <AppToolbar back />
     <v-card-text> {{ $t('household.household-id-value', [household.id]) }} </v-card-text>

frontend/app/pages/group/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-container class="narrow-container">
+  <v-container
+    v-if="group"
+    class="narrow-container"
+  >
     <BasePageTitle class="mb-5">
       <template #header>
         <v-img
@@ -14,37 +17,26 @@
       </template>
       {{ $t("profile.group-description") }}
     </BasePageTitle>
-
-    <section v-if="group">
-      <BaseCardSectionTitle
-        class="mt-10"
-        :title="$t('group.group-preferences')"
-      />
-      <div class="mb-6">
-        <v-checkbox
-          v-model="group.preferences.privateGroup"
-          hide-details
-          density="compact"
-          color="primary"
-          :label="$t('group.private-group')"
-          @change="groupActions.updatePreferences()"
-        />
-        <div class="ml-8">
-          <p class="text-subtitle-2 my-0 py-0">
-            {{ $t("group.private-group-description") }}
-          </p>
-          <DocLink
-            class="mt-2"
-            link="/documentation/getting-started/faq/#how-do-private-groups-and-recipes-work"
-          />
-        </div>
+    <v-form ref="refGroupEditForm" @submit.prevent="handleSubmit">
+      <v-card variant="outlined" style="border-color: lightgray;">
+        <v-card-text>
+          <GroupPreferencesEditor v-if="group.preferences" v-model="group.preferences" />
+        </v-card-text>
+      </v-card>
+      <div class="d-flex pa-2">
+        <BaseButton type="submit" edit class="ml-auto">
+          {{ $t("general.update") }}
+        </BaseButton>
       </div>
-    </section>
+    </v-form>
   </v-container>
 </template>
 
 <script setup lang="ts">
+import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
 import { useGroupSelf } from "~/composables/use-groups";
+import { alert } from "~/composables/use-toast";
+import type { VForm } from "~/types/auto-forms";
 
 definePageMeta({
   middleware: ["can-manage-only"],
@@ -56,6 +48,22 @@ const i18n = useI18n();
 useSeoMeta({
   title: i18n.t("group.group"),
 });
+
+const refGroupEditForm = ref<VForm | null>(null);
+
+async function handleSubmit() {
+  if (!refGroupEditForm.value?.validate() || !group.value?.preferences) {
+    return;
+  }
+
+  const data = await groupActions.updatePreferences();
+  if (data) {
+    alert.success(i18n.t("settings.settings-updated"));
+  }
+  else {
+    alert.error(i18n.t("settings.settings-update-failed"));
+  }
+}
 </script>
 
 <style lang="css">

frontend/app/pages/user/profile/edit.vue

@@ -183,8 +183,16 @@
             validate-on="blur"
             persistent-hint
           />
+          <v-checkbox
+            v-model="userCopy.showAnnouncements"
+            hide-details
+            :label="$t('announcements.show-announcements-from-mealie')"
+            color="primary"
+            @change="updateUser"
+          />
           <v-checkbox
             v-model="userCopy.advanced"
+            hide-details
             :label="$t('profile.show-advanced-description')"
             color="primary"
             @change="updateUser"
@@ -268,6 +276,7 @@ async function updateUser() {
     admin: userData.admin,
     group: userData.group,
     household: userData.household,
+    showAnnouncements: userData.showAnnouncements,
     advanced: userData.advanced,
     canInvite: userData.canInvite,
     canManage: userData.canManage,