fix: revalidate stale group/household preferences cache and settings forms (#8022)

frontend/app/components/Domain/Group/GroupPreferencesEditor.vue

@@ -42,4 +42,5 @@ import type { ReadGroupPreferences } from "~/lib/api/types/user";
 const preferences = defineModel<ReadGroupPreferences>({ required: true });
 const local = reactive({ ...preferences.value });
 watch(local, (newVal) => { preferences.value = { ...newVal }; });
+watch(preferences, (newVal) => { if (newVal) Object.assign(local, newVal); });
 </script>

frontend/app/components/Domain/Household/HouseholdPreferencesEditor.vue

@@ -63,6 +63,7 @@ import type { ReadHouseholdPreferences } from "~/lib/api/types/household";
 const preferences = defineModel<ReadHouseholdPreferences>({ required: true });
 const local = reactive({ ...preferences.value });
 watch(local, (newVal) => { preferences.value = { ...newVal }; });
+watch(preferences, (newVal) => { if (newVal) Object.assign(local, newVal); });
 
 const i18n = useI18n();
 

frontend/app/composables/use-households.ts

@@ -48,6 +48,9 @@ export const useHouseholdSelf = function () {
 
       return data || undefined;
     },
+    async refresh() {
+      await refreshHouseholdSelf();
+    },
   };
 
   const household = actions.get();

frontend/app/pages/group/index.vue

@@ -76,6 +76,14 @@ useSeoMeta({
   title: i18n.t("group.group"),
 });
 
+// useGroupSelf() caches data in a module-level singleton for the lifetime of the tab,
+// so revisiting this page via client-side navigation can otherwise show stale
+// preferences/AI settings if they were changed elsewhere (e.g. Admin Groups panel)
+// in the same session. Force a revalidation whenever this page is entered.
+onMounted(() => {
+  groupActions.refresh();
+});
+
 const refGroupPrefsEditForm = ref<VForm | null>(null);
 const refGroupAISettingsForm = ref<VForm | null>(null);
 

frontend/app/pages/household/index.vue

@@ -49,6 +49,14 @@ useSeoMeta({
   title: i18n.t("household.household"),
 });
 
+// useHouseholdSelf() caches data in a module-level singleton for the lifetime of the tab,
+// so revisiting this page via client-side navigation can otherwise show stale
+// preferences if they were changed elsewhere (e.g. Admin Households panel) in the
+// same session. Force a revalidation whenever this page is entered.
+onMounted(() => {
+  householdActions.refresh();
+});
+
 const refHouseholdEditForm = ref<VForm | null>(null);
 
 async function handleSubmit() {

frontend/app/pages/household/mealplan/planner.vue

@@ -116,12 +116,20 @@ const route = useRoute();
 const router = useRouter();
 const i18n = useI18n();
 const api = useUserApi();
-const { household } = useHouseholdSelf();
+const { household, actions: householdActions } = useHouseholdSelf();
 
 useSeoMeta({
   title: i18n.t("meal-plan.dinner-this-week"),
 });
 
+// useHouseholdSelf() caches data in a module-level singleton for the lifetime of the tab,
+// so revisiting this page via client-side navigation can otherwise use a stale
+// firstDayOfWeek value if household preferences were changed elsewhere (e.g. Admin
+// Households panel) in the same session. Force a revalidation whenever this page is entered.
+onMounted(() => {
+  householdActions.refresh();
+});
+
 const mealPlanPreferences = useUserMealPlanPreferences();
 const numberOfDaysPast = ref<number>(mealPlanPreferences.value.numberOfDaysPast || 0);
 const numberOfDays = ref<number>(mealPlanPreferences.value.numberOfDays || 7);