fix(settings): update notification text when changing language

app/components/Settings/TopScreen/Notifications.vue

@@ -13,8 +13,21 @@ type NotificationData = {
 
 const menuYOffset = ref(0);
 const submenuYOffset = ref(0);
-const visibleMenuNotification = ref<NotificationData | null>(null);
+const menuNotificationVisible = ref(false);
-const visibleSubmenuNotification = ref<NotificationData | null>(null);
+const submenuNotificationVisible = ref(false);
+const menuNotificationSnapshot = ref<NotificationData | null>(null);
+const submenuNotificationSnapshot = ref<NotificationData | null>(null);
+
+const visibleMenuNotification = computed(() =>
+  menuNotificationVisible.value
+    ? menuNotification.value
+    : menuNotificationSnapshot.value,
+);
+const visibleSubmenuNotification = computed(() =>
+  submenuNotificationVisible.value
+    ? submenuNotification.value
+    : submenuNotificationSnapshot.value,
+);
 
 const renderNotification = (
   ctx: CanvasRenderingContext2D,
@@ -98,12 +111,13 @@ const submenuNotification = computed(() => {
 const animateNotification = (
   curr: NotificationData | null,
   prev: NotificationData | null,
-  visibleRef: Ref<NotificationData | null>,
+  visibleFlag: Ref<boolean>,
+  snapshotRef: Ref<NotificationData | null>,
   offsetRef: Ref<number>,
 ) => {
   if (prev !== null && curr === null) {
-    // slide down
+    snapshotRef.value = prev;
-    visibleRef.value = prev;
+    visibleFlag.value = false;
     store.animatingNotification = true;
     gsap.fromTo(
       offsetRef,
@@ -113,7 +127,7 @@ const animateNotification = (
         duration: 0.2,
         ease: "none",
         onComplete: () => {
-          visibleRef.value = null;
+          snapshotRef.value = null;
           setTimeout(() => {
             store.animatingNotification = false;
           }, 50);
@@ -121,9 +135,9 @@ const animateNotification = (
       },
     );
   } else if (prev === null && curr !== null) {
-    // slide up
+    snapshotRef.value = null;
+    visibleFlag.value = true;
     store.animatingNotification = true;
-    visibleRef.value = curr;
     gsap.fromTo(
       offsetRef,
       { value: 48 },
@@ -142,11 +156,23 @@ const animateNotification = (
 };
 
 watch(menuNotification, (curr, prev) => {
-  animateNotification(curr, prev, visibleMenuNotification, menuYOffset);
+  animateNotification(
+    curr,
+    prev,
+    menuNotificationVisible,
+    menuNotificationSnapshot,
+    menuYOffset,
+  );
 });
 
 watch(submenuNotification, (curr, prev) => {
-  animateNotification(curr, prev, visibleSubmenuNotification, submenuYOffset);
+  animateNotification(
+    curr,
+    prev,
+    submenuNotificationVisible,
+    submenuNotificationSnapshot,
+    submenuYOffset,
+  );
 });
 
 onRender((ctx) => {