feat: allow disabling animations and transitions

respects initially the prefers-reduced motion setting

closes #92

Author: simonwep

src/app/App.vue

@@ -13,7 +13,7 @@ import LoadingScreen from '@components/misc/loading-screen/LoadingScreen.vue';
 import { useAppElement, useMediaQuery, useSquircle } from '@composables';
 import { useStorage } from '@storage/index';
 import { useSettingsStore } from '@store/settings';
-import { computed, nextTick, watch, watchEffect } from 'vue';
+import { computed, nextTick, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -28,25 +28,29 @@ const root = useSquircle(computed(() => (['minimized', 'mobile'].includes(media.
 
 const preventDefault = (event: Event) => event.preventDefault();
 
-watchEffect(() => {
-  app.classList.add(state.appearance.theme);
-
-  nextTick(() => {
-    const appColor = getComputedStyle(app).getPropertyValue('--app-background').trim();
-    document
-      .querySelectorAll('[data-meta="theme-color"]')
-      .forEach((el) => ((el as HTMLMetaElement).content = appColor));
-  });
-});
-
 watch(
   () => state.appearance.theme,
-  (_, oldTheme) => app.classList.remove(oldTheme)
+  (newTheme, oldTheme) => {
+    app.classList.add(newTheme);
+
+    if (oldTheme) {
+      app.classList.remove(oldTheme);
+    }
+
+    nextTick(() => {
+      const appColor = getComputedStyle(app).getPropertyValue('--app-background').trim();
+      document
+        .querySelectorAll('[data-meta="theme-color"]')
+        .forEach((el) => ((el as HTMLMetaElement).content = appColor));
+    });
+  },
+  { immediate: true }
 );
 
 watch(
   () => state.appearance.animations,
-  (enabled) => app.classList[enabled ? 'remove' : 'add']('reducedMotion')
+  (enabled) => app.classList[enabled ? 'remove' : 'add']('reducedMotion'),
+  { immediate: true }
 );
 
 watch(status, (v) => {

src/app/components/base/check-box/CheckBox.vue

@@ -38,6 +38,8 @@ const inputId = uuid();
 .label {
   display: flex;
   flex-direction: column;
+  justify-items: flex-start;
+  flex-grow: 1;
   font-weight: var(--font-weight-l);
   font-size: var(--font-size-xs);
   user-select: none;

src/app/pages/navigation/settings/SettingsButton.vue

@@ -4,7 +4,7 @@
     :class="classes"
     textual
     color="dimmed"
-    :icon="RiEqualizerLine"
+    :icon="RiSettings4Line"
     @click="showSettingsDialog = true"
   />
   <SettingsDialog :open="showSettingsDialog" @close="showSettingsDialog = false" />
@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import SettingsDialog from '@app/pages/navigation/settings/SettingsDialog.vue';
 import Button from '@components/base/button/Button.vue';
-import { RiEqualizerLine } from '@remixicon/vue';
+import { RiSettings4Line } from '@remixicon/vue';
 import { ClassNames } from '@utils';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';

src/app/pages/navigation/settings/SettingsDialog.vue

@@ -22,6 +22,12 @@
         @update:model-value="setMonthOffset($event as number)"
       />
 
+      <CheckBox
+        :label="t('navigation.settings.showAnimationsAndTransitions')"
+        :model-value="settings.appearance.animations"
+        @update:model-value="setAnimations"
+      />
+
       <CheckBox
         :label="t('navigation.settings.carryOverNetSavings')"
         :sub-label="t('navigation.settings.carryOverNetSavingsInfo')"
@@ -55,7 +61,7 @@ defineProps<{
 }>();
 
 const { t, locale } = useI18n();
-const { setMonthOffset, setCarryOver, state: settings } = useSettingsStore();
+const { setMonthOffset, setCarryOver, setAnimations, state: settings } = useSettingsStore();
 const { changeCurrency, changeLocale, state } = useDataStore();
 const monthNames = useMonthNames();
 

src/i18n/locales/cze.json

@@ -85,7 +85,8 @@
       "currency": "Měna",
       "firstMonthOfYear": "První měsíc roku",
       "carryOverNetSavings": "Přenést čisté úspory",
-      "carryOverNetSavingsInfo": "Pokud je povoleno, čisté úspory se přenesou do následujícího roku."
+      "carryOverNetSavingsInfo": "Pokud je povoleno, čisté úspory se přenesou do následujícího roku.",
+      "showAnimationsAndTransitions": "Zobrazit animace a přechody"
     },
     "status": {
       "synchronizationFailedDueToNetworkError": "Synchronizace selhala kvůli síťové chybě!",

src/i18n/locales/de.json

@@ -85,7 +85,8 @@
       "currency": "Währung",
       "firstMonthOfYear": "Erster Monat des Jahres",
       "carryOverNetSavings": "Nettoersparnisse übertragen",
-      "carryOverNetSavingsInfo": "Wenn diese Option aktiviert ist, werden die Nettoersparnisse des Vorjahres in das neue Jahr übertragen."
+      "carryOverNetSavingsInfo": "Wenn diese Option aktiviert ist, werden die Nettoersparnisse des Vorjahres in das neue Jahr übertragen.",
+      "showAnimationsAndTransitions": "Animationen und Übergänge anzeigen"
     },
     "status": {
       "synchronizationFailedDueToNetworkError": "Synchronisierung fehlgeschlagen, bitte überprüfen Sie Ihre Netzwerkverbindung!",

src/i18n/locales/en.json

@@ -85,7 +85,8 @@
       "currency": "Currency",
       "firstMonthOfYear": "First month of the year",
       "carryOverNetSavings": "Carry over net savings",
-      "carryOverNetSavingsInfo": "If enabled, the net savings from the previous year will be carried over to the next year."
+      "carryOverNetSavingsInfo": "If enabled, the net savings from the previous year will be carried over to the next year.",
+      "showAnimationsAndTransitions": "Show animations and transitions"
     },
     "status": {
       "synchronizationFailedDueToNetworkError": "Synchronization failed due to network error!",

src/i18n/locales/es.json

@@ -85,7 +85,8 @@
       "currency": "Moneda",
       "firstMonthOfYear": "Primer mes del año",
       "carryOverNetSavings": "Llevar ahorros netos",
-      "carryOverNetSavingsInfo": "Si está habilitado, los ahorros netos se llevarán al siguiente año."
+      "carryOverNetSavingsInfo": "Si está habilitado, los ahorros netos se llevarán al siguiente año.",
+      "showAnimationsAndTransitions": "Mostrar animaciones y transiciones"
     },
     "status": {
       "synchronizationFailedDueToNetworkError": "¡La sincronización falló debido a un error de red!",

src/i18n/locales/hu.json

@@ -85,7 +85,8 @@
       "currency": "Pénznem",
       "firstMonthOfYear": "Az év első hónapja",
       "carryOverNetSavings": "Nettó megtakarítások átvitele",
-      "carryOverNetSavingsInfo": "Ha a nettó megtakarításokat átvisszük az új évre, akkor az előző év záróegyenlegét az új év első hónapjában a nettó megtakarításokhoz adja hozzá."
+      "carryOverNetSavingsInfo": "Ha a nettó megtakarításokat átvisszük az új évre, akkor az előző év záróegyenlegét az új év első hónapjában a nettó megtakarításokhoz adja hozzá.",
+      "showAnimationsAndTransitions": "Animációk és átmenetek megjelenítése"
     },
     "status": {
       "synchronizationFailedDueToNetworkError": "A szinkronizálás hálózati hiba miatt meghiúsult!",

src/i18n/locales/it.json

@@ -85,7 +85,8 @@
       "currency": "Valuta",
       "firstMonthOfYear": "Primo mese dell'anno",
       "carryOverNetSavings": "Portare risparmi netti",
-      "carryOverNetSavingsInfo": "Se attivato, il saldo netto di fine anno verrà trasferito come saldo iniziale per l'anno successivo."
+      "carryOverNetSavingsInfo": "Se attivato, il saldo netto di fine anno verrà trasferito come saldo iniziale per l'anno successivo.",
+      "showAnimationsAndTransitions": "Mostra animazioni e transizioni"
     },
     "status": {
       "synchronizationFailedDueToNetworkError": "Sincronizzazione fallita a causa di un errore di rete!",