♻️ refactor: Replace fontSize Recoil atom with Jotai (#10171)

* fix: reapply chat font size on load

* refactor: streamline font size handling in localStorage

* fix: update matchMedia mock to accurately reflect desktop and touchscreen capabilities

* refactor: implement Jotai for font size management and initialize on app load

- Replaced Recoil with Jotai for font size state management across components.
- Added a new `fontSize` atom to handle font size changes and persist them in localStorage.
- Implemented `initializeFontSize` function to apply saved font size on app load.
- Updated relevant components to utilize the new font size atom.

---------

Co-authored-by: ddooochii <ddooochii@gmail.com>
Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/store/fontSize.ts

@@ -0,0 +1,54 @@
+import { atom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import { applyFontSize } from '@librechat/client';
+
+const DEFAULT_FONT_SIZE = 'text-base';
+
+/**
+ * Base storage atom for font size
+ */
+const fontSizeStorageAtom = atomWithStorage<string>('fontSize', DEFAULT_FONT_SIZE, undefined, {
+  getOnInit: true,
+});
+
+/**
+ * Derived atom that applies font size changes to the DOM
+ * Read: returns the current font size
+ * Write: updates storage and applies the font size to the DOM
+ */
+export const fontSizeAtom = atom(
+  (get) => get(fontSizeStorageAtom),
+  (get, set, newValue: string) => {
+    set(fontSizeStorageAtom, newValue);
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      applyFontSize(newValue);
+    }
+  },
+);
+
+/**
+ * Initialize font size on app load
+ */
+export const initializeFontSize = () => {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return;
+  }
+
+  const savedValue = localStorage.getItem('fontSize');
+
+  if (savedValue !== null) {
+    try {
+      const parsedValue = JSON.parse(savedValue);
+      applyFontSize(parsedValue);
+    } catch (error) {
+      console.error(
+        'Error parsing localStorage key "fontSize", resetting to default. Error:',
+        error,
+      );
+      localStorage.setItem('fontSize', JSON.stringify(DEFAULT_FONT_SIZE));
+      applyFontSize(DEFAULT_FONT_SIZE);
+    }
+  } else {
+    applyFontSize(DEFAULT_FONT_SIZE);
+  }
+};

client/src/store/settings.ts

@@ -21,7 +21,6 @@ const localStorageAtoms = {
   // General settings
   autoScroll: atomWithLocalStorage('autoScroll', false),
   hideSidePanel: atomWithLocalStorage('hideSidePanel', false),
-  fontSize: atomWithLocalStorage('fontSize', 'text-base'),
   enableUserMsgMarkdown: atomWithLocalStorage<boolean>(
     LocalStorageKeys.ENABLE_USER_MSG_MARKDOWN,
     true,