feat: add button to go from co date notification to setting directly

src/helpers/notifications.ts

@@ -3,6 +3,7 @@ import { Notify, type QNotifyCreateOptions } from 'quasar';
 import { errorCatcher } from './error-catcher';
 
 const createTemporaryNotification = ({
+  actions,
   badgeStyle,
   caption,
   color,
@@ -35,7 +36,7 @@ const createTemporaryNotification = ({
       ...(group && { group }),
       ...(badgeStyle && { badgeStyle }),
       ...(!noClose && {
-        actions: [
+        actions: actions || [
           {
             color: 'white',
             icon: 'close',

src/i18n/en.json

@@ -125,6 +125,7 @@
   "full-screen": "Full screen",
   "github-repo": "GitHub repo",
   "go-home": "Go Home",
+  "go-to-settings": "Go to Settings",
   "got-it": "Got it",
   "hide-image-for-zoom-participants": "Hide image for Zoom participants",
   "hide-media-display": "Hide media display",
@@ -261,6 +262,7 @@
   "question-mark": "?",
   "refresh": "Refresh",
   "regular": "Regular",
+  "remind-me-later": "Remind me later",
   "remove-all-cache": "Remove all files from cache",
   "remove-unused-cache": "Remove unused items from cache",
   "replace": "Replace",

src/pages/CongregationSelectorPage.vue

@@ -183,6 +183,19 @@ const checkCoDate = () => {
     date.getDateDiff(new Date(), currentSettings.value?.coWeek, 'months') > 2
   ) {
     createTemporaryNotification({
+      actions: [
+        {
+          color: 'white',
+          label: t('remind-me-later'),
+        },
+        {
+          color: 'white',
+          handler: () => {
+            router.push('/settings/coWeek');
+          },
+          label: t('go-to-settings'),
+        },
+      ],
       caption: t('dont-forget-to-add-circuit-overseer-date', {
         congregationMeetings: t('congregationMeetings'),
         settings: t('titles.settings'),
@@ -191,7 +204,7 @@ const checkCoDate = () => {
       icon: 'mmm-error',
       message: t('no-circuit-overseer-date-set'),
       textColor: 'white',
-      timeout: 10000,
+      timeout: 30000,
     });
   }
 };

src/pages/SettingsPage.vue

@@ -66,10 +66,12 @@
                   !invalidSettingsLength ||
                   invalidSettings.includes(settingId as keyof SettingsItems))
               "
+              :id="settingId"
               :class="{
                 'bg-error': invalidSettings.includes(
                   settingId as keyof SettingsItems,
                 ),
+                'bg-accent-300': route.params.setting === settingId,
                 'q-mt-sm': index === 0,
                 'rounded-borders': true,
               }"
@@ -166,6 +168,9 @@ import { errorCatcher } from 'src/helpers/error-catcher';
 import { useCurrentStateStore } from 'src/stores/current-state';
 import { useJwStore } from 'src/stores/jw';
 import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 // Store initializations
 const currentState = useCurrentStateStore();
@@ -207,6 +212,30 @@ const validateSettingsLocal = () => {
 // Lifecycle hooks
 onMounted(() => {
   validateSettingsLocal();
+  watch(
+    () => route.params.setting,
+    (newWatchedSettings) => {
+      if (!newWatchedSettings) return;
+      if (!Array.isArray(newWatchedSettings))
+        newWatchedSettings = [newWatchedSettings];
+      newWatchedSettings.forEach((setting) => {
+        if (setting)
+          expansionState.value[
+            settingsDefinitions[setting as keyof SettingsItems]
+              .group as keyof SettingsItems
+          ] = true;
+      });
+      setTimeout(() => {
+        if (!newWatchedSettings[0]) return;
+        document.getElementById(newWatchedSettings[0])?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'nearest',
+        });
+      }, 500);
+    },
+    { immediate: true },
+  );
 });
 
 watch(

src/router/routes.ts

@@ -51,7 +51,7 @@ const routes: RouteRecordRaw[] = [
     children: [{ component: () => import('pages/SettingsPage.vue'), path: '' }],
     component: () => import('layouts/MainLayout.vue'),
     meta: { icon: 'mmm-settings', title: 'titles.settings' },
-    path: '/settings',
+    path: '/settings/:setting?',
   },
 
   // Always leave this as last one,