🔨 Only update settings on settings page

backend/src/appointment/routes/api.py

@@ -83,6 +83,7 @@ def update_me(
         avatar_url=me.avatar_url,
         schedule_links=schedule_links_by_subscriber(db, subscriber),
         unique_hash=me.unique_hash,
+        language=me.language,
         color_scheme=me.color_scheme,
         time_mode=me.time_mode,
     )

backend/src/appointment/routes/auth.py

@@ -388,6 +388,9 @@ def me(
         is_setup=subscriber.is_setup,
         schedule_links=schedule_links_by_subscriber(db, subscriber),
         unique_hash=hash,
+        language=subscriber.language,
+        color_scheme=subscriber.color_scheme,
+        time_mode=subscriber.time_mode,
     )
 
 

frontend/index.html

@@ -6,10 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Thunderbird Appointment</title>
     <script>
-      // handle theme color scheme
+      // Load initial theme color scheme from user settings
+      const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}');
+      const browserPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
       if (
-        (localStorage?.getItem('theme') === 'dark'
-        || (!localStorage?.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches))
+        (user?.settings?.colorScheme === 'dark'
+        || (user?.settings?.colorScheme === 'system' && browserPrefersDark)
+        || (!user?.settings?.colorScheme && browserPrefersDark))
       ) {
         document.documentElement.classList.add('dark');
       } else {

frontend/src/components/ScheduleCreation.vue

@@ -327,7 +327,7 @@ const saveSchedule = async (withConfirmation = true) => {
 
   // We retrieve the slugs from the user store
   // ...we should adjust this, but for now just refresh the profile.
-  await user.profile(call);
+  await user.profile();
 
   savingInProgress.value = false;
   emit('created');

frontend/src/components/SettingsConnections.vue

@@ -54,7 +54,7 @@ const refreshData = async () => {
     externalConnectionsStore.fetch(call, true),
     calendarStore.fetch(call),
     // Need to update userStore in case they used an attached email
-    userStore.profile(call),
+    userStore.profile(),
   ]);
 };
 

frontend/src/components/SettingsGeneral.vue

@@ -38,6 +38,21 @@ watch(() => user.data.settings.colorScheme, (newValue) => {
   }
 });
 
+// Make sure settings are saved directly when changed
+watch(
+  () => [
+    user.data.settings.language,
+    user.data.settings.timezone,
+    user.data.settings.colorScheme,
+    user.data.settings.timeFormat,
+  ],
+  () => {
+    if (user.authenticated) {
+      user.updateSettings();
+    }
+  },
+);
+
 // @ts-ignore
 // See https://github.com/microsoft/TypeScript/issues/49231
 const timezones = Intl.supportedValuesOf('timeZone');

frontend/src/stores/user-store.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';
 import { i18n } from '@/composables/i18n';
-import { computed, inject, watch, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 import {
   Subscriber, User, Fetch, Error, BooleanResponse, SignatureResponse, SubscriberResponse, TokenResponse,
   UserConfig,
@@ -276,21 +276,11 @@ export const useUserStore = defineStore('user', () => {
     $reset();
   };
 
-  // Make sure settings are saved directly when changed
-  watch(
-    () => data.value.settings,
-    () => {
-      if (authenticated.value) {
-        updateSettings();
-      }
-    },
-    { deep: true }
-  );
-
   return {
     data,
     init,
     authenticated,
+    updateSettings,
     $reset,
     updateSignedUrl,
     profile,

frontend/src/utils.ts

@@ -77,10 +77,13 @@ export const download = (data: BlobPart, filename: string, contenttype: string =
 };
 
 // handle time format, return dayjs format string
-// can be either set by the user (local storage) or detected from system
+// can be either set by the user (local storage) or detected from system.
+// This functions works independent from Pinia stores so that
+// it can be called even if stores are not initialized yet.
 export const timeFormat = (): string => {
+  const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}');
   const is12HourTime = Intl.DateTimeFormat().resolvedOptions().hour12 ? 12 : 24;
-  const format = Number(localStorage?.getItem('timeFormat')) ?? is12HourTime;
+  const format = Number(user?.setttings?.timeFormat ?? is12HourTime);
   return format === 24 ? 'HH:mm' : 'hh:mm A';
 };