feat: implement useFont compostable

frontend/src/composables/use-font.ts

@@ -0,0 +1,34 @@
+import { ref } from 'vue';
+
+const currentFont = ref('');
+
+/**
+ * Updates the currentFont reactive reference based on the font family of the document body.
+ * It retrieves the computed font style of the body and sets the currentFont to the primary font.
+ */
+const updateFont = () => {
+  const body = document.body;
+  const style = window.getComputedStyle(body);
+
+  // Remove fallback fonts and quotes around the font name
+  const fontFamily = style.fontFamily.split(', ')[0].replaceAll(/["']/g, '');
+
+  currentFont.value = fontFamily;
+};
+
+// Event listener to update the font when the font loading is done
+document.fonts.addEventListener('loadingdone', () => {
+  updateFont();
+});
+
+// Initial font retrieval
+updateFont();
+
+/**
+ * Provides a reactive reference for the current font.
+ *
+ * @returns An object containing the `currentFont` reactive reference.
+ */
+export function useFont() {
+  return { currentFont };
+}

frontend/src/store/client-settings.ts

@@ -8,6 +8,7 @@ import { remote } from '@/plugins/remote';
 import { vuetify } from '@/plugins/vuetify';
 import { sealed } from '@/utils/validation';
 import { SyncedStore } from '@/store/super/synced-store';
+import { useFont } from '@/composables/use-font';
 
 /**
  * == INTERFACES AND TYPES ==
@@ -30,6 +31,7 @@ export interface ClientSettingsState {
 class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
   private readonly _browserPrefersDark = usePreferredDark();
   private readonly _navigatorLanguage = useNavigatorLanguage();
+  private readonly _bodyFont = useFont();
   private readonly _BROWSER_LANGUAGE = computed<string>(() => {
     const rawString = this._navigatorLanguage.language.value ?? '';
     /**
@@ -40,20 +42,7 @@ class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
     return cleanString[0];
   });
 
-  private readonly _BODY_FONT = computed<string>(() => {
-    const body = document.querySelector('body');
-
-    if (body) {
-      const style = window.getComputedStyle(body);
-
-      /**
-       * Remove the fallback fonts and quotes around the font name
-       */
-      return style.fontFamily.split(', ')[0].slice(1, -1);
-    } else {
-      return 'fallback';
-    }
-  });
+  private readonly _BODY_FONT = this._bodyFont.currentFont;
 
   public set locale(newVal: string) {
     this._state.locale
@@ -133,12 +122,8 @@ class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
 
     /**
      * Font family changes
-     *
-     * Wait for DOM content to load before querying for font/style information
      */
-    document.addEventListener('DOMContentLoaded', () => {
-      watchImmediate(this._BODY_FONT, this._updateSubtitleFontFamily);
-    });
+    watchImmediate(this._BODY_FONT, this._updateSubtitleFontFamily);
 
     /**
      * Vuetify theme change