feat: implementing experience page (#718)

* feat: add color scheme toggle
* feat: colorScheme stored in UserSettings model
* feat: add stories
* fix: AnimatePresence exit not working

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/utils/index.ts

@@ -13,7 +13,3 @@ export function formatToHumanReadableDate(date: Date | string) {
 export const getLogoUrlFromDomainName = (domainName?: string): string => {
   return `https://api.faviconkit.com/${domainName}/144`;
 };
-
-export const browserPrefersDarkMode = (): boolean => {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches;
-};

front/src/utils/recoil-effects.ts

@@ -0,0 +1,37 @@
+import { AtomEffect } from 'recoil';
+
+import { cookieStorage } from '~/utils/cookie-storage';
+
+export const localStorageEffect =
+  <T>(key: string): AtomEffect<T> =>
+  ({ setSelf, onSet }) => {
+    const savedValue = localStorage.getItem(key);
+    if (savedValue != null) {
+      setSelf(JSON.parse(savedValue));
+    }
+
+    onSet((newValue, _, isReset) => {
+      isReset
+        ? localStorage.removeItem(key)
+        : localStorage.setItem(key, JSON.stringify(newValue));
+    });
+  };
+
+export const cookieStorageEffect =
+  <T>(key: string): AtomEffect<T | null> =>
+  ({ setSelf, onSet }) => {
+    const savedValue = cookieStorage.getItem(key);
+    if (savedValue != null && JSON.parse(savedValue)['accessToken']) {
+      setSelf(JSON.parse(savedValue));
+    }
+
+    onSet((newValue, _, isReset) => {
+      if (!newValue) {
+        cookieStorage.removeItem(key);
+        return;
+      }
+      isReset
+        ? cookieStorage.removeItem(key)
+        : cookieStorage.setItem(key, JSON.stringify(newValue));
+    });
+  };