Splitted context into a bunch of contexts

src/components/AnchorShare.tsx

@@ -1,7 +1,7 @@
 import { Ico, Icon } from "./Ico";
 import { ToolTip } from "./ToolTip";
 import { cJoin } from "helpers/className";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -16,7 +16,7 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const AnchorShare = ({ id, className }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <ToolTip content={langui.copy_anchor_link} trigger="mouseenter" className="text-sm">
       <ToolTip content={langui.anchor_link_copied} trigger="click" className="text-sm">

src/components/AppLayout.tsx

@@ -23,6 +23,9 @@ import { useIs1ColumnLayout, useIsScreenAtLeast } from "hooks/useContainerQuery"
 import { useOnResize } from "hooks/useOnResize";
 import { Ids } from "types/ids";
 import { sendAnalytics } from "helpers/analytics";
+import { useUserSettings } from "contexts/UserSettingsContext";
+import { useLocalData } from "contexts/LocalDataContext";
+import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                         ╭─────────────╮
@@ -58,38 +61,39 @@ export const AppLayout = ({
 }: Props): JSX.Element => {
   const {
     configPanelOpen,
-    currency,
-    darkMode,
-    dyslexic,
-    fontSize,
     mainPanelOpen,
     mainPanelReduced,
     menuGestures,
-    playerName,
-    preferredLanguages,
-    selectedThemeMode,
     subPanelOpen,
     hasDisgardedSafariWarning,
     setHasDisgardedSafariWarning,
     setConfigPanelOpen,
+    setMainPanelOpen,
+    setSubPanelOpen,
+    toggleMainPanelOpen,
+    toggleSubPanelOpen,
+  } = useAppLayout();
+
+  const { setScreenWidth, setContentPanelWidth, setSubPanelWidth } = useContainerQueries();
+
+  const { langui, currencies, languages } = useLocalData();
+
+  const {
+    currency,
+    darkMode,
+    dyslexic,
+    fontSize,
+    playerName,
+    preferredLanguages,
+    selectedThemeMode,
     setCurrency,
     setDarkMode,
     setDyslexic,
     setFontSize,
-    setMainPanelOpen,
     setPlayerName,
     setPreferredLanguages,
     setSelectedThemeMode,
-    setSubPanelOpen,
+  } = useUserSettings();
-    toggleMainPanelOpen,
-    toggleSubPanelOpen,
-    setScreenWidth,
-    setContentPanelWidth,
-    setSubPanelWidth,
-    langui,
-    currencies,
-    languages,
-  } = useAppLayout();
 
   const router = useRouter();
   const is1ColumnLayout = useIs1ColumnLayout();

src/components/Cli/Terminal.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/router";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { cJoin, cIf } from "helpers/className";
 import { useTerminalContext } from "contexts/TerminalContext";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
+import { useUserSettings } from "contexts/UserSettingsContext";
 
 /*
  *                                         ╭─────────────╮
@@ -31,7 +31,7 @@ export const Terminal = ({
   content,
 }: Props): JSX.Element => {
   const [childrenPaths, setChildrenPaths] = useState(propsChildrenPaths);
-  const { darkMode } = useAppLayout();
+  const { darkMode, setPlayerName } = useUserSettings();
   const { previousCommands, previousLines, setPreviousCommands, setPreviousLines } =
     useTerminalContext();
   const [line, setLine] = useState("");
@@ -39,7 +39,6 @@ export const Terminal = ({
   const [previousCommandIndex, setPreviousCommandIndex] = useState(0);
   const [carretPosition, setCarretPosition] = useState(0);
   const router = useRouter();
-  const { setPlayerName } = useAppLayout();
   const [isTextAreaFocused, setIsTextAreaFocused] = useState(false);
 
   const terminalInputRef = useRef<HTMLTextAreaElement>(null);

src/components/Inputs/LanguageSwitcher.tsx

@@ -5,8 +5,8 @@ import { Icon } from "components/Ico";
 import { cJoin } from "helpers/className";
 import { prettyLanguage } from "helpers/formatters";
 import { iterateMap } from "helpers/others";
-import { useLanguages } from "hooks/useLocalData";
 import { sendAnalytics } from "helpers/analytics";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -32,7 +32,7 @@ export const LanguageSwitcher = ({
   onLanguageChanged,
   showBadge = true,
 }: Props): JSX.Element => {
-  const languages = useLanguages();
+  const { languages } = useLocalData();
   return (
     <ToolTip
       content={

src/components/Library/PreviewCardCTAs.tsx

@@ -2,8 +2,9 @@ import { Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { ToolTip } from "components/ToolTip";
 import { LibraryItemUserStatus } from "types/types";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { cIf, cJoin } from "helpers/className";
+import { useLocalData } from "contexts/LocalDataContext";
+import { useLibraryItemUserStatus } from "hooks/useLibraryItemUserStatus";
 
 /*
  *                                        ╭─────────────╮
@@ -18,7 +19,9 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const PreviewCardCTAs = ({ id, expand = false }: Props): JSX.Element => {
-  const { libraryItemUserStatus, setLibraryItemUserStatus, langui } = useAppLayout();
+  const { libraryItemUserStatus, setLibraryItemUserStatus } = useLibraryItemUserStatus();
+  const { langui } = useLocalData();
+
   return (
     <div
       className={cJoin(

src/components/Markdown/Markdawn.tsx

@@ -5,7 +5,6 @@ import ReactDOMServer from "react-dom/server";
 import { HorizontalLine } from "components/HorizontalLine";
 import { Img } from "components/Img";
 import { InsetBox } from "components/InsetBox";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { cIf, cJoin } from "helpers/className";
 import { slugify } from "helpers/formatters";
 import { getAssetURL, ImageQuality } from "helpers/img";
@@ -16,6 +15,8 @@ import { useIntersectionList } from "hooks/useIntersectionList";
 import { Ico, Icon } from "components/Ico";
 import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
+import { useUserSettings } from "contexts/UserSettingsContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -30,7 +31,7 @@ interface MarkdawnProps {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Element => {
-  const { playerName } = useAppLayout();
+  const { playerName } = useUserSettings();
   const router = useRouter();
   const isContentPanelAtLeastLg = useIsContentPanelAtLeast("lg");
   const [openLightBox, LightBox] = useLightBox();
@@ -236,7 +237,7 @@ export const TableOfContents = ({
   horizontalLine = false,
 }: TableOfContentsProps): JSX.Element => {
   const router = useRouter();
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const toc = useMemo(() => getTocFromMarkdawn(preprocessMarkDawn(text), title), [text, title]);
 
   return (

src/components/PanelComponents/ReturnButton.tsx

@@ -6,6 +6,7 @@ import { TranslatedProps } from "types/TranslatedProps";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { useIs3ColumnsLayout } from "hooks/useContainerQuery";
 import { isDefined } from "helpers/others";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -23,7 +24,8 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const ReturnButton = ({ href, title, displayOnlyOn, className }: Props): JSX.Element => {
-  const { setSubPanelOpen, langui } = useAppLayout();
+  const { setSubPanelOpen } = useAppLayout();
+  const { langui } = useLocalData();
   const is3ColumnsLayout = useIs3ColumnsLayout();
 
   return (

src/components/Panels/MainPanel.tsx

@@ -10,6 +10,7 @@ import { isDefinedAndNotEmpty } from "helpers/others";
 import { Link } from "components/Inputs/Link";
 import { useIs3ColumnsLayout } from "hooks/useContainerQuery";
 import { sendAnalytics } from "helpers/analytics";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -18,12 +19,8 @@ import { sendAnalytics } from "helpers/analytics";
 
 export const MainPanel = (): JSX.Element => {
   const is3ColumnsLayout = useIs3ColumnsLayout();
-  const {
+  const { mainPanelReduced = false, toggleMainPanelReduced, setConfigPanelOpen } = useAppLayout();
-    mainPanelReduced = false,
+  const { langui } = useLocalData();
-    toggleMainPanelReduced,
-    setConfigPanelOpen,
-    langui,
-  } = useAppLayout();
 
   return (
     <div
@@ -47,7 +44,7 @@ export const MainPanel = (): JSX.Element => {
               }
               toggleMainPanelReduced();
             }}
-            className="bg-light !px-2"
+            className="z-50 bg-light !px-2"
             icon={mainPanelReduced ? Icon.ChevronRight : Icon.ChevronLeft}
           />
         </div>

src/components/PostPage.tsx

@@ -13,7 +13,7 @@ import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { PostWithTranslations } from "types/types";
 import { filterHasAttributes, getStatusDescription } from "helpers/others";
 import { prettySlug } from "helpers/formatters";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -48,7 +48,7 @@ export const PostPage = ({
   displayTitle = true,
   ...otherProps
 }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: post.translations,
     languageExtractor: useCallback(

src/components/PreviewCard.tsx

@@ -4,7 +4,6 @@ import { Chip } from "./Chip";
 import { Ico, Icon } from "./Ico";
 import { Img } from "./Img";
 import { Link } from "./Inputs/Link";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { DatePickerFragment, PricePickerFragment, UploadImageFragment } from "graphql/generated";
 import { cIf, cJoin } from "helpers/className";
 import { prettyDate, prettyDuration, prettyPrice, prettyShortenNumber } from "helpers/formatters";
@@ -12,7 +11,8 @@ import { ImageQuality } from "helpers/img";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { TranslatedProps } from "types/TranslatedProps";
-import { useCurrencies } from "hooks/useLocalData";
+import { useUserSettings } from "contexts/UserSettingsContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -70,10 +70,10 @@ export const PreviewCard = ({
   hoverlay,
   infoAppend,
 }: Props): JSX.Element => {
-  const { currency } = useAppLayout();
+  const { currency } = useUserSettings();
+  const { currencies } = useLocalData();
   const isHoverable = useDeviceSupportsHover();
   const router = useRouter();
-  const currencies = useCurrencies();
 
   const metadataJSX = useMemo(
     () => (

src/components/RecorderChip.tsx

@@ -6,7 +6,7 @@ import { Chip } from "components/Chip";
 import { RecorderChipFragment } from "graphql/generated";
 import { ImageQuality } from "helpers/img";
 import { filterHasAttributes } from "helpers/others";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -21,7 +21,7 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const RecorderChip = ({ recorder }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
 
   return (
     <ToolTip

src/components/SmartList.tsx

@@ -7,8 +7,8 @@ import { cJoin } from "helpers/className";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
 import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import { useIs3ColumnsLayout } from "hooks/useContainerQuery";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { Ids } from "types/ids";
+import { useLocalData } from "contexts/LocalDataContext";
 
 interface Group<T> {
   name: string;
@@ -70,7 +70,7 @@ export const SmartList = <T,>({
   className,
 }: Props<T>): JSX.Element => {
   const [page, setPage] = useState(0);
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   useScrollTopOnChange(Ids.ContentPanel, [page], paginationScroolTop);
   useEffect(() => setPage(0), [searchingTerm, groupingFunction, groupSortingFunction, items]);
 
@@ -223,7 +223,7 @@ export const SmartList = <T,>({
 
 const DefaultRenderWhenEmpty = () => {
   const is3ColumnsLayout = useIs3ColumnsLayout();
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <div className="grid h-full place-content-center">
       <div

src/components/ThumbnailHeader.tsx

@@ -7,7 +7,7 @@ import { prettyInlineTitle, prettySlug, slugify } from "helpers/formatters";
 import { getAssetURL, ImageQuality } from "helpers/img";
 import { filterHasAttributes } from "helpers/others";
 import { useLightBox } from "hooks/useLightBox";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -43,7 +43,7 @@ export const ThumbnailHeader = ({
   languageSwitcher,
 }: Props): JSX.Element => {
   const [openLightBox, LightBox] = useLightBox();
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
 
   return (
     <>

src/components/Wiki/DefinitionCard.tsx

@@ -6,7 +6,7 @@ import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { Button } from "components/Inputs/Button";
 import { useIsContentPanelNoMoreThan } from "hooks/useContainerQuery";
 import { cIf, cJoin } from "helpers/className";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                        ╭─────────────╮
@@ -31,7 +31,7 @@ interface Props {
 
 const DefinitionCard = ({ source, translations = [], index, categories }: Props): JSX.Element => {
   const isContentPanelNoMoreThanMd = useIsContentPanelNoMoreThan("md");
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: translations,
     languageExtractor: useCallback((item: Props["translations"][number]) => item.language, []),

src/contexts/AppLayoutContext.tsx

@@ -1,12 +1,8 @@
-import React, { ReactNode, useContext, useEffect, useLayoutEffect, useState } from "react";
+import React, { ReactNode, useContext, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { useLocalStorage, useSessionStorage } from "usehooks-ts";
-import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
+import { isDefined } from "helpers/others";
-import { LibraryItemUserStatus, RequiredNonNullable } from "types/types";
+import { RequiredNonNullable } from "types/types";
-import { useDarkMode } from "hooks/useDarkMode";
-import { Currencies, Languages, Langui } from "helpers/localData";
-import { useCurrencies, useLanguages, useLangui } from "hooks/useLocalData";
-import { getDefaultPreferredLanguages } from "helpers/locales";
 import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage";
 import { useScrollIntoView } from "hooks/useScrollIntoView";
 
@@ -27,52 +23,10 @@ interface AppLayoutState {
   toggleMainPanelOpen: () => void;
   setMainPanelOpen: React.Dispatch<React.SetStateAction<AppLayoutState["mainPanelOpen"]>>;
 
-  darkMode: boolean;
-  toggleDarkMode: () => void;
-  setDarkMode: React.Dispatch<React.SetStateAction<AppLayoutState["darkMode"]>>;
-
-  selectedThemeMode: boolean;
-  toggleSelectedThemeMode: () => void;
-  setSelectedThemeMode: React.Dispatch<React.SetStateAction<AppLayoutState["selectedThemeMode"]>>;
-
-  fontSize: number;
-  setFontSize: React.Dispatch<React.SetStateAction<AppLayoutState["fontSize"]>>;
-
-  dyslexic: boolean;
-  toggleDyslexic: () => void;
-  setDyslexic: React.Dispatch<React.SetStateAction<AppLayoutState["dyslexic"]>>;
-
-  currency: string;
-  setCurrency: React.Dispatch<React.SetStateAction<AppLayoutState["currency"]>>;
-
-  playerName: string;
-  setPlayerName: React.Dispatch<React.SetStateAction<AppLayoutState["playerName"]>>;
-
-  preferredLanguages: string[];
-  setPreferredLanguages: React.Dispatch<React.SetStateAction<AppLayoutState["preferredLanguages"]>>;
-
   menuGestures: boolean;
   toggleMenuGestures: () => void;
   setMenuGestures: React.Dispatch<React.SetStateAction<AppLayoutState["menuGestures"]>>;
 
-  libraryItemUserStatus: Record<string, LibraryItemUserStatus>;
-  setLibraryItemUserStatus: React.Dispatch<
-    React.SetStateAction<AppLayoutState["libraryItemUserStatus"]>
-  >;
-
-  screenWidth: number;
-  setScreenWidth: React.Dispatch<React.SetStateAction<AppLayoutState["screenWidth"]>>;
-
-  contentPanelWidth: number;
-  setContentPanelWidth: React.Dispatch<React.SetStateAction<AppLayoutState["contentPanelWidth"]>>;
-
-  subPanelWidth: number;
-  setSubPanelWidth: React.Dispatch<React.SetStateAction<AppLayoutState["subPanelWidth"]>>;
-
-  langui: Langui;
-  languages: Languages;
-  currencies: Currencies;
-
   hasDisgardedSafariWarning: boolean;
   setHasDisgardedSafariWarning: React.Dispatch<
     React.SetStateAction<AppLayoutState["hasDisgardedSafariWarning"]>
@@ -96,63 +50,23 @@ const initialState: RequiredNonNullable<AppLayoutState> = {
   toggleMainPanelOpen: () => null,
   setMainPanelOpen: () => null,
 
-  darkMode: false,
-  toggleDarkMode: () => null,
-  setDarkMode: () => null,
-
-  selectedThemeMode: false,
-  toggleSelectedThemeMode: () => null,
-  setSelectedThemeMode: () => null,
-
-  fontSize: 1,
-  setFontSize: () => null,
-
-  dyslexic: false,
-  toggleDyslexic: () => null,
-  setDyslexic: () => null,
-
-  currency: "USD",
-  setCurrency: () => null,
-
-  playerName: "",
-  setPlayerName: () => null,
-
-  preferredLanguages: [],
-  setPreferredLanguages: () => null,
-
   menuGestures: true,
   toggleMenuGestures: () => null,
   setMenuGestures: () => null,
 
-  libraryItemUserStatus: {},
-  setLibraryItemUserStatus: () => null,
-
-  screenWidth: 0,
-  setScreenWidth: () => null,
-
-  contentPanelWidth: 0,
-  setContentPanelWidth: () => null,
-
-  subPanelWidth: 0,
-  setSubPanelWidth: () => null,
-
-  currencies: [],
-  languages: [],
-  langui: {},
-
   hasDisgardedSafariWarning: false,
   setHasDisgardedSafariWarning: () => null,
 };
 
-const AppContext = React.createContext<AppLayoutState>(initialState);
+const AppLayoutContext = React.createContext<AppLayoutState>(initialState);
 
-export const useAppLayout = (): AppLayoutState => useContext(AppContext);
+export const useAppLayout = (): AppLayoutState => useContext(AppLayoutContext);
 
 interface Props {
   children: ReactNode;
 }
 
-export const AppContextProvider = (props: Props): JSX.Element => {
+export const AppContextProvider = ({ children }: Props): JSX.Element => {
   const router = useRouter();
 
   const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage(
@@ -175,31 +89,8 @@ export const AppContextProvider = (props: Props): JSX.Element => {
     initialState.mainPanelOpen
   );
 
-  const [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode] = useDarkMode(
-    "darkMode",
-    initialState.darkMode
-  );
-
-  const [fontSize, setFontSize] = useLocalStorage("fontSize", initialState.fontSize);
-
-  const [dyslexic, setDyslexic] = useLocalStorage("dyslexic", initialState.dyslexic);
-
-  const [currency, setCurrency] = useLocalStorage("currency", initialState.currency);
-
-  const [playerName, setPlayerName] = useLocalStorage("playerName", initialState.playerName);
-
-  const [preferredLanguages, setPreferredLanguages] = useLocalStorage(
-    "preferredLanguages",
-    initialState.preferredLanguages
-  );
-
   const [menuGestures, setMenuGestures] = useState(false);
 
-  const [libraryItemUserStatus, setLibraryItemUserStatus] = useLocalStorage(
-    "libraryItemUserStatus",
-    initialState.libraryItemUserStatus
-  );
-
   const [hasDisgardedSafariWarning, setHasDisgardedSafariWarning] = useSessionStorage(
     "hasDisgardedSafariWarning",
     initialState.hasDisgardedSafariWarning
@@ -221,50 +112,10 @@ export const AppContextProvider = (props: Props): JSX.Element => {
     setMainPanelOpen((current) => (isDefined(current) ? !current : current));
   };
 
-  const toggleDarkMode = () => {
-    setDarkMode((current) => (isDefined(current) ? !current : current));
-  };
-
   const toggleMenuGestures = () => {
     setMenuGestures((current) => !current);
   };
 
-  const toggleSelectedThemeMode = () => {
-    setSelectedThemeMode((current) => (isDefined(current) ? !current : current));
-  };
-
-  const toggleDyslexic = () => {
-    setDyslexic((current) => (isDefined(current) ? !current : current));
-  };
-
-  const [screenWidth, setScreenWidth] = useState(0);
-  const [contentPanelWidth, setContentPanelWidth] = useState(0);
-  const [subPanelWidth, setSubPanelWidth] = useState(0);
-
-  const langui = useLangui();
-  const languages = useLanguages();
-  const currencies = useCurrencies();
-
-  useEffect(() => {
-    if (preferredLanguages.length === 0) {
-      if (isDefinedAndNotEmpty(router.locale) && router.locales) {
-        setPreferredLanguages(getDefaultPreferredLanguages(router.locale, router.locales));
-      }
-    } else if (router.locale !== preferredLanguages[0]) {
-      /*
-       * Using a timeout to the code getting stuck into a loop when reaching the website with a
-       * different preferredLanguages[0] from router.locale
-       */
-      setTimeout(
-        async () =>
-          router.replace(router.asPath, router.asPath, {
-            locale: preferredLanguages[0],
-          }),
-        250
-      );
-    }
-  }, [preferredLanguages, router, router.locale, router.locales, setPreferredLanguages]);
-
   useEffect(() => {
     router.events.on("routeChangeStart", () => {
       console.log("[Router Events] on routeChangeStart");
@@ -279,65 +130,30 @@ export const AppContextProvider = (props: Props): JSX.Element => {
     });
   }, [router.events, setConfigPanelOpen, setMainPanelOpen, setSubPanelOpen]);
 
-  useLayoutEffect(() => {
-    const html = document.getElementsByTagName("html")[0];
-    if (isDefined(html)) {
-      html.style.fontSize = `${fontSize * 100}%`;
-    }
-  }, [fontSize]);
-
   useScrollIntoView();
 
   return (
-    <AppContext.Provider
+    <AppLayoutContext.Provider
       value={{
         subPanelOpen,
         configPanelOpen,
         mainPanelReduced,
         mainPanelOpen,
-        darkMode,
-        selectedThemeMode,
-        fontSize,
-        dyslexic,
-        currency,
-        playerName,
-        preferredLanguages,
         menuGestures,
-        libraryItemUserStatus,
-        screenWidth,
-        contentPanelWidth,
-        subPanelWidth,
         hasDisgardedSafariWarning,
         setSubPanelOpen,
         setConfigPanelOpen,
         setMainPanelReduced,
         setMainPanelOpen,
-        setDarkMode,
-        setSelectedThemeMode,
-        setFontSize,
-        setDyslexic,
-        setCurrency,
-        setPlayerName,
-        setPreferredLanguages,
         setMenuGestures,
-        setLibraryItemUserStatus,
+        setHasDisgardedSafariWarning,
         toggleSubPanelOpen,
         toggleConfigPanelOpen,
         toggleMainPanelReduced,
         toggleMainPanelOpen,
-        toggleDarkMode,
         toggleMenuGestures,
-        toggleSelectedThemeMode,
-        toggleDyslexic,
-        setScreenWidth,
-        setContentPanelWidth,
-        setSubPanelWidth,
-        setHasDisgardedSafariWarning,
-        languages,
-        langui,
-        currencies,
       }}>
-      {props.children}
+      {children}
-    </AppContext.Provider>
+    </AppLayoutContext.Provider>
   );
 };

src/contexts/ContainerQueriesContext.tsx

@@ -0,0 +1,54 @@
+import React, { ReactNode, useContext, useState } from "react";
+import { RequiredNonNullable } from "types/types";
+
+interface ContainerQueriesState {
+  screenWidth: number;
+  setScreenWidth: React.Dispatch<React.SetStateAction<ContainerQueriesState["screenWidth"]>>;
+
+  contentPanelWidth: number;
+  setContentPanelWidth: React.Dispatch<
+    React.SetStateAction<ContainerQueriesState["contentPanelWidth"]>
+  >;
+
+  subPanelWidth: number;
+  setSubPanelWidth: React.Dispatch<React.SetStateAction<ContainerQueriesState["subPanelWidth"]>>;
+}
+
+const initialState: RequiredNonNullable<ContainerQueriesState> = {
+  screenWidth: 0,
+  setScreenWidth: () => null,
+
+  contentPanelWidth: 0,
+  setContentPanelWidth: () => null,
+
+  subPanelWidth: 0,
+  setSubPanelWidth: () => null,
+};
+
+const ContainerQueriesContext = React.createContext<ContainerQueriesState>(initialState);
+
+export const useContainerQueries = (): ContainerQueriesState => useContext(ContainerQueriesContext);
+
+interface Props {
+  children: ReactNode;
+}
+
+export const ContainerQueriesContextProvider = ({ children }: Props): JSX.Element => {
+  const [screenWidth, setScreenWidth] = useState(0);
+  const [contentPanelWidth, setContentPanelWidth] = useState(0);
+  const [subPanelWidth, setSubPanelWidth] = useState(0);
+
+  return (
+    <ContainerQueriesContext.Provider
+      value={{
+        screenWidth,
+        contentPanelWidth,
+        subPanelWidth,
+        setScreenWidth,
+        setContentPanelWidth,
+        setSubPanelWidth,
+      }}>
+      {children}
+    </ContainerQueriesContext.Provider>
+  );
+};

src/contexts/LocalDataContext.tsx

@@ -0,0 +1,70 @@
+import React, { ReactNode, useContext, useMemo } from "react";
+import { useRouter } from "next/router";
+import { useFetch } from "usehooks-ts";
+import {
+  Langui,
+  Languages,
+  Currencies,
+  processCurrencies,
+  processLanguages,
+  processLangui,
+} from "helpers/localData";
+import { RequiredNonNullable } from "types/types";
+import { LocalDataFile } from "graphql/fetchLocalData";
+import {
+  LocalDataGetCurrenciesQuery,
+  LocalDataGetLanguagesQuery,
+  LocalDataGetWebsiteInterfacesQuery,
+} from "graphql/generated";
+
+interface LocalDataState {
+  langui: Langui;
+  languages: Languages;
+  currencies: Currencies;
+}
+
+const initialState: RequiredNonNullable<LocalDataState> = {
+  currencies: [],
+  languages: [],
+  langui: {},
+};
+
+const LocalDataContext = React.createContext<LocalDataState>(initialState);
+
+export const useLocalData = (): LocalDataState => useContext(LocalDataContext);
+
+interface Props {
+  children: ReactNode;
+}
+
+export const LocalDataContextProvider = ({ children }: Props): JSX.Element => {
+  const langui = useLangui();
+  const languages = useLanguages();
+  const currencies = useCurrencies();
+
+  return (
+    <LocalDataContext.Provider value={{ langui, languages, currencies }}>
+      {children}
+    </LocalDataContext.Provider>
+  );
+};
+
+const getFileName = (name: LocalDataFile): string => `/local-data/${name}.json`;
+
+const useLangui = (): Langui => {
+  const { locale } = useRouter();
+  const { data: websiteInterfaces } = useFetch<LocalDataGetWebsiteInterfacesQuery>(
+    getFileName("websiteInterfaces")
+  );
+  return useMemo(() => processLangui(websiteInterfaces, locale), [websiteInterfaces, locale]);
+};
+
+const useCurrencies = (): Currencies => {
+  const { data: currencies } = useFetch<LocalDataGetCurrenciesQuery>(getFileName("currencies"));
+  return useMemo(() => processCurrencies(currencies), [currencies]);
+};
+
+const useLanguages = (): Languages => {
+  const { data: languages } = useFetch<LocalDataGetLanguagesQuery>(getFileName("languages"));
+  return useMemo(() => processLanguages(languages), [languages]);
+};

src/contexts/UserSettingsContext.tsx

@@ -0,0 +1,157 @@
+import { useLocalStorage } from "usehooks-ts";
+import React, { ReactNode, useContext, useEffect, useLayoutEffect } from "react";
+import { useRouter } from "next/router";
+import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
+import { RequiredNonNullable } from "types/types";
+import { getDefaultPreferredLanguages } from "helpers/locales";
+import { useDarkMode } from "hooks/useDarkMode";
+
+interface UserSettingsState {
+  fontSize: number;
+  setFontSize: React.Dispatch<React.SetStateAction<UserSettingsState["fontSize"]>>;
+
+  darkMode: boolean;
+  toggleDarkMode: () => void;
+  setDarkMode: React.Dispatch<React.SetStateAction<UserSettingsState["darkMode"]>>;
+
+  selectedThemeMode: boolean;
+  toggleSelectedThemeMode: () => void;
+  setSelectedThemeMode: React.Dispatch<
+    React.SetStateAction<UserSettingsState["selectedThemeMode"]>
+  >;
+
+  dyslexic: boolean;
+  toggleDyslexic: () => void;
+  setDyslexic: React.Dispatch<React.SetStateAction<UserSettingsState["dyslexic"]>>;
+
+  currency: string;
+  setCurrency: React.Dispatch<React.SetStateAction<UserSettingsState["currency"]>>;
+
+  playerName: string;
+  setPlayerName: React.Dispatch<React.SetStateAction<UserSettingsState["playerName"]>>;
+
+  preferredLanguages: string[];
+  setPreferredLanguages: React.Dispatch<
+    React.SetStateAction<UserSettingsState["preferredLanguages"]>
+  >;
+}
+
+const initialState: RequiredNonNullable<UserSettingsState> = {
+  fontSize: 1,
+  setFontSize: () => null,
+
+  darkMode: false,
+  toggleDarkMode: () => null,
+  setDarkMode: () => null,
+
+  selectedThemeMode: false,
+  toggleSelectedThemeMode: () => null,
+  setSelectedThemeMode: () => null,
+
+  dyslexic: false,
+  toggleDyslexic: () => null,
+  setDyslexic: () => null,
+
+  currency: "USD",
+  setCurrency: () => null,
+
+  playerName: "",
+  setPlayerName: () => null,
+
+  preferredLanguages: [],
+  setPreferredLanguages: () => null,
+};
+
+const UserSettingsContext = React.createContext<UserSettingsState>(initialState);
+
+export const useUserSettings = (): UserSettingsState => useContext(UserSettingsContext);
+
+interface Props {
+  children: ReactNode;
+}
+
+export const UserSettingsProvider = ({ children }: Props): JSX.Element => {
+  const router = useRouter();
+
+  const [fontSize, setFontSize] = useLocalStorage("fontSize", initialState.fontSize);
+
+  const [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode] = useDarkMode(
+    "darkMode",
+    initialState.darkMode
+  );
+
+  const [dyslexic, setDyslexic] = useLocalStorage("dyslexic", initialState.dyslexic);
+
+  const [currency, setCurrency] = useLocalStorage("currency", initialState.currency);
+
+  const [playerName, setPlayerName] = useLocalStorage("playerName", initialState.playerName);
+
+  const [preferredLanguages, setPreferredLanguages] = useLocalStorage(
+    "preferredLanguages",
+    initialState.preferredLanguages
+  );
+
+  const toggleDarkMode = () => {
+    setDarkMode((current) => (isDefined(current) ? !current : current));
+  };
+
+  const toggleSelectedThemeMode = () => {
+    setSelectedThemeMode((current) => (isDefined(current) ? !current : current));
+  };
+
+  const toggleDyslexic = () => {
+    setDyslexic((current) => (isDefined(current) ? !current : current));
+  };
+
+  useEffect(() => {
+    if (preferredLanguages.length === 0) {
+      if (isDefinedAndNotEmpty(router.locale) && router.locales) {
+        setPreferredLanguages(getDefaultPreferredLanguages(router.locale, router.locales));
+      }
+    } else if (router.locale !== preferredLanguages[0]) {
+      /*
+       * Using a timeout to the code getting stuck into a loop when reaching the website with a
+       * different preferredLanguages[0] from router.locale
+       */
+      setTimeout(
+        async () =>
+          router.replace(router.asPath, router.asPath, {
+            locale: preferredLanguages[0],
+          }),
+        250
+      );
+    }
+  }, [preferredLanguages, router, router.locale, router.locales, setPreferredLanguages]);
+
+  useLayoutEffect(() => {
+    const html = document.getElementsByTagName("html")[0];
+    if (isDefined(html)) {
+      html.style.fontSize = `${fontSize * 100}%`;
+    }
+  }, [fontSize]);
+
+  return (
+    <UserSettingsContext.Provider
+      value={{
+        fontSize,
+        darkMode,
+        selectedThemeMode,
+        dyslexic,
+        currency,
+        playerName,
+        preferredLanguages,
+        setFontSize,
+        setDarkMode,
+        setSelectedThemeMode,
+        setDyslexic,
+        setCurrency,
+        setPlayerName,
+        setPreferredLanguages,
+        toggleDarkMode,
+        toggleSelectedThemeMode,
+        toggleDyslexic,
+      }}>
+      {children}
+    </UserSettingsContext.Provider>
+  );
+};

src/hooks/useContainerQuery.ts

@@ -1,4 +1,5 @@
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { useUserSettings } from "contexts/UserSettingsContext";
 
 type MediaQuery = { value: number; unit: "px" | "rem"; rule: "max" | "min" };
 
@@ -32,7 +33,7 @@ const sizes: Record<Size, number> = {
 };
 
 export const useIsScreenAtLeast = (size: Size): boolean => {
-  const { screenWidth } = useAppLayout();
+  const { screenWidth } = useContainerQueries();
   return useApplyContainerQuery(screenWidth, {
     value: sizes[size],
     unit: "rem",
@@ -42,7 +43,7 @@ export const useIsScreenAtLeast = (size: Size): boolean => {
 
 // ts-unused-exports:disable-next-line
 export const useIsScreenNoMoreThan = (size: Size): boolean => {
-  const { screenWidth } = useAppLayout();
+  const { screenWidth } = useContainerQueries();
   return useApplyContainerQuery(screenWidth, {
     value: sizes[size],
     unit: "rem",
@@ -51,7 +52,7 @@ export const useIsScreenNoMoreThan = (size: Size): boolean => {
 };
 
 export const useIsContentPanelAtLeast = (size: Size): boolean => {
-  const { contentPanelWidth } = useAppLayout();
+  const { contentPanelWidth } = useContainerQueries();
   return useApplyContainerQuery(contentPanelWidth, {
     value: sizes[size],
     unit: "rem",
@@ -60,7 +61,7 @@ export const useIsContentPanelAtLeast = (size: Size): boolean => {
 };
 
 export const useIsContentPanelNoMoreThan = (size: Size): boolean => {
-  const { contentPanelWidth } = useAppLayout();
+  const { contentPanelWidth } = useContainerQueries();
   return useApplyContainerQuery(contentPanelWidth, {
     value: sizes[size],
     unit: "rem",
@@ -69,7 +70,7 @@ export const useIsContentPanelNoMoreThan = (size: Size): boolean => {
 };
 
 export const useIsSubPanelAtLeast = (size: Size): boolean => {
-  const { subPanelWidth } = useAppLayout();
+  const { subPanelWidth } = useContainerQueries();
   return useApplyContainerQuery(subPanelWidth, {
     value: sizes[size],
     unit: "rem",
@@ -79,7 +80,7 @@ export const useIsSubPanelAtLeast = (size: Size): boolean => {
 
 // ts-unused-exports:disable-next-line
 export const useIsSubPanelNoMoreThan = (size: Size): boolean => {
-  const { subPanelWidth } = useAppLayout();
+  const { subPanelWidth } = useContainerQueries();
   return useApplyContainerQuery(subPanelWidth, {
     value: sizes[size],
     unit: "rem",
@@ -88,7 +89,7 @@ export const useIsSubPanelNoMoreThan = (size: Size): boolean => {
 };
 
 export const useIs3ColumnsLayout = (): boolean => {
-  const { screenWidth } = useAppLayout();
+  const { screenWidth } = useContainerQueries();
   return useApplyContainerQuery(screenWidth, {
     value: sizes["5xl"],
     unit: "rem",
@@ -97,7 +98,7 @@ export const useIs3ColumnsLayout = (): boolean => {
 };
 
 export const useIs1ColumnLayout = (): boolean => {
-  const { screenWidth } = useAppLayout();
+  const { screenWidth } = useContainerQueries();
   return useApplyContainerQuery(screenWidth, {
     value: sizes["5xl"],
     unit: "rem",
@@ -106,7 +107,7 @@ export const useIs1ColumnLayout = (): boolean => {
 };
 
 const useApplyContainerQuery = (width: number, query: MediaQuery) => {
-  const { fontSize } = useAppLayout();
+  const { fontSize } = useUserSettings();
   const breakpoint = query.value * (query.unit === "rem" ? 16 : 1) * fontSize;
   return query.rule === "min" ? width >= breakpoint : width < breakpoint;
 };

src/hooks/useIsTerminalMode.ts

@@ -1,6 +1,6 @@
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useUserSettings } from "contexts/UserSettingsContext";
 
 export const useIsTerminalMode = (): boolean => {
-  const { playerName } = useAppLayout();
+  const { playerName } = useUserSettings();
   return playerName === "root";
 };

src/hooks/useLibraryItemUserStatus.ts

@@ -0,0 +1,15 @@
+import { useLocalStorage } from "usehooks-ts";
+import { LibraryItemUserStatus } from "types/types";
+
+export const useLibraryItemUserStatus = (): {
+  libraryItemUserStatus: Record<string, LibraryItemUserStatus>;
+  setLibraryItemUserStatus: React.Dispatch<
+    React.SetStateAction<Record<string, LibraryItemUserStatus>>
+  >;
+} => {
+  const [libraryItemUserStatus, setLibraryItemUserStatus] = useLocalStorage(
+    "libraryItemUserStatus",
+    {}
+  );
+  return { libraryItemUserStatus, setLibraryItemUserStatus };
+};

src/hooks/useLocalData.ts

@@ -1,32 +0,0 @@
-import { useFetch } from "usehooks-ts";
-import { useRouter } from "next/router";
-import { useMemo } from "react";
-import { LocalDataGetWebsiteInterfacesQuery } from "graphql/generated";
-import {
-  Currencies,
-  Languages,
-  Langui,
-  processCurrencies,
-  processLanguages,
-  processLangui,
-} from "helpers/localData";
-import { LocalDataFile } from "graphql/fetchLocalData";
-
-const useFetchLocalData = (name: LocalDataFile) =>
-  useFetch<LocalDataGetWebsiteInterfacesQuery>(`/local-data/${name}.json`);
-
-export const useLangui = (): Langui => {
-  const { locale } = useRouter();
-  const { data: websiteInterfaces } = useFetchLocalData("websiteInterfaces");
-  return useMemo(() => processLangui(websiteInterfaces, locale), [websiteInterfaces, locale]);
-};
-
-export const useCurrencies = (): Currencies => {
-  const { data: currencies } = useFetchLocalData("currencies");
-  return useMemo(() => processCurrencies(currencies), [currencies]);
-};
-
-export const useLanguages = (): Languages => {
-  const { data: languages } = useFetchLocalData("languages");
-  return useMemo(() => processLanguages(languages), [languages]);
-};

src/hooks/useSmartLanguage.ts

@@ -1,10 +1,10 @@
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
-import { useLanguages } from "./useLocalData";
 import { LanguageSwitcher } from "components/Inputs/LanguageSwitcher";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { filterDefined, isDefined } from "helpers/others";
 import { getPreferredLanguage } from "helpers/locales";
+import { useUserSettings } from "contexts/UserSettingsContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 interface Props<T> {
   items: T[];
@@ -17,8 +17,8 @@ export const useSmartLanguage = <T>({
   languageExtractor,
   transform = (item) => item,
 }: Props<T>): [T | undefined, typeof LanguageSwitcher, Parameters<typeof LanguageSwitcher>[0]] => {
-  const { preferredLanguages } = useAppLayout();
+  const { preferredLanguages } = useUserSettings();
-  const languages = useLanguages();
+  const { languages } = useLocalData();
   const router = useRouter();
 
   const availableLocales = useMemo(() => {

src/pages/404.tsx

@@ -5,7 +5,7 @@ import { ContentPanel } from "components/Panels/ContentPanel";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
 import { Img } from "components/Img";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -15,7 +15,7 @@ import { useAppLayout } from "contexts/AppLayoutContext";
 interface Props extends AppLayoutRequired {}
 
 const FourOhFour = ({ openGraph, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <AppLayout
       contentPanel={

src/pages/500.tsx

@@ -5,7 +5,7 @@ import { ContentPanel } from "components/Panels/ContentPanel";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
 import { Img } from "components/Img";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -15,7 +15,7 @@ import { useAppLayout } from "contexts/AppLayoutContext";
 interface Props extends AppLayoutRequired {}
 
 const FiveHundred = ({ openGraph, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <AppLayout
       contentPanel={

src/pages/_app.tsx

@@ -9,12 +9,21 @@ import type { AppProps } from "next/app";
 import { AppContextProvider } from "contexts/AppLayoutContext";
 import "tailwind.css";
 import { TerminalContextProvider } from "contexts/TerminalContext";
+import { UserSettingsProvider as UserSettingsContextProvider } from "contexts/UserSettingsContext";
+import { LocalDataContextProvider } from "contexts/LocalDataContext";
+import { ContainerQueriesContextProvider } from "contexts/ContainerQueriesContext";
 
 const AccordsLibraryApp = (props: AppProps): JSX.Element => (
   <AppContextProvider>
-    <TerminalContextProvider>
+    <ContainerQueriesContextProvider>
-      <props.Component {...props.pageProps} />
+      <LocalDataContextProvider>
-    </TerminalContextProvider>
+        <UserSettingsContextProvider>
+          <TerminalContextProvider>
+            <props.Component {...props.pageProps} />
+          </TerminalContextProvider>
+        </UserSettingsContextProvider>
+      </LocalDataContextProvider>
+    </ContainerQueriesContextProvider>
   </AppContextProvider>
 );
 export default AccordsLibraryApp;

src/pages/about-us/accords-handbook.tsx

@@ -1,6 +1,6 @@
 import { PostPage } from "components/PostPage";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -8,7 +8,7 @@ import { useAppLayout } from "contexts/AppLayoutContext";
  */
 
 const AccordsHandbook = (props: PostStaticProps): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <PostPage
       {...props}

src/pages/about-us/contact.tsx

@@ -7,8 +7,8 @@ import { cIf, cJoin } from "helpers/className";
 import { randomInt } from "helpers/numbers";
 import { RequestMailProps, ResponseMailProps } from "pages/api/mail";
 import { useIs1ColumnLayout } from "hooks/useContainerQuery";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { sendAnalytics } from "helpers/analytics";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -17,7 +17,7 @@ import { sendAnalytics } from "helpers/analytics";
 
 const AboutUs = (props: PostStaticProps): JSX.Element => {
   const router = useRouter();
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const is1ColumnLayout = useIs1ColumnLayout();
   const [formResponse, setFormResponse] = useState("");
   const [formState, setFormState] = useState<"completed" | "ongoing" | "stale">("stale");

src/pages/about-us/index.tsx

@@ -6,8 +6,8 @@ import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Panels/SubPanel";
 import { getOpenGraph } from "helpers/openGraph";
 import { HorizontalLine } from "components/HorizontalLine";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -17,7 +17,7 @@ import { getLangui } from "graphql/fetchLocalData";
 interface Props extends AppLayoutRequired {}
 
 const AboutUs = (props: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <AppLayout
       subPanel={

src/pages/about-us/legality.tsx

@@ -1,6 +1,6 @@
 import { PostPage } from "components/PostPage";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -8,7 +8,7 @@ import { useAppLayout } from "contexts/AppLayoutContext";
  */
 
 const Legality = (props: PostStaticProps): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <PostPage
       {...props}

src/pages/about-us/sharing-policy.tsx

@@ -1,6 +1,6 @@
 import { PostPage } from "components/PostPage";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
-import { useAppLayout } from "contexts/AppLayoutContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -8,7 +8,7 @@ import { useAppLayout } from "contexts/AppLayoutContext";
  */
 
 const SharingPolicy = (props: PostStaticProps): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <PostPage
       {...props}

src/pages/archives/index.tsx

@@ -7,8 +7,8 @@ import { SubPanel } from "components/Panels/SubPanel";
 import { Icon } from "components/Ico";
 import { getOpenGraph } from "helpers/openGraph";
 import { HorizontalLine } from "components/HorizontalLine";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -18,7 +18,7 @@ import { getLangui } from "graphql/fetchLocalData";
 interface Props extends AppLayoutRequired {}
 
 const Archives = (props: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const subPanel = useMemo(
     () => (
       <SubPanel>

src/pages/archives/videos/c/[uid].tsx

@@ -22,8 +22,8 @@ import { SmartList } from "components/SmartList";
 import { cIf } from "helpers/className";
 import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
 import { TextInput } from "components/Inputs/TextInput";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                         ╭─────────────╮
@@ -45,7 +45,7 @@ interface Props extends AppLayoutRequired {
 
 const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {
   const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const hoverable = useDeviceSupportsHover();
   const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
 

src/pages/archives/videos/index.tsx

@@ -22,8 +22,8 @@ import { compareDate } from "helpers/date";
 import { HorizontalLine } from "components/HorizontalLine";
 import { cIf } from "helpers/className";
 import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                         ╭─────────────╮
@@ -44,7 +44,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const hoverable = useDeviceSupportsHover();
   const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
 

src/pages/archives/videos/v/[uid].tsx

@@ -19,6 +19,7 @@ import { getVideoFile } from "helpers/videos";
 import { getOpenGraph } from "helpers/openGraph";
 import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -31,7 +32,8 @@ interface Props extends AppLayoutRequired {
 
 const Video = ({ video, ...otherProps }: Props): JSX.Element => {
   const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
-  const { setSubPanelOpen, langui } = useAppLayout();
+  const { setSubPanelOpen } = useAppLayout();
+  const { langui } = useLocalData();
   const router = useRouter();
 
   const subPanel = useMemo(

src/pages/chronicles/[slug]/index.tsx

@@ -18,8 +18,8 @@ import { getOpenGraph } from "helpers/openGraph";
 import { getDefaultPreferredLanguages, staticSmartLanguage } from "helpers/locales";
 import { getDescription } from "helpers/description";
 import { TranslatedChroniclesList } from "components/Chronicles/ChroniclesList";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -32,7 +32,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const Chronicle = ({ chronicle, chapters, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: chronicle.translations,
     languageExtractor: useCallback(

src/pages/chronicles/index.tsx

@@ -11,8 +11,8 @@ import { prettySlug } from "helpers/formatters";
 import { getOpenGraph } from "helpers/openGraph";
 import { TranslatedChroniclesList } from "components/Chronicles/ChroniclesList";
 import { HorizontalLine } from "components/HorizontalLine";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -24,7 +24,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const subPanel = useMemo(
     () => (
       <SubPanel>

src/pages/contents/[slug].tsx

@@ -32,8 +32,8 @@ import { TranslatedPreviewLine } from "components/PreviewLine";
 import { useIs1ColumnLayout, useIsContentPanelAtLeast } from "hooks/useContainerQuery";
 import { cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { Ids } from "types/ids";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -47,7 +47,7 @@ interface Props extends AppLayoutRequired {
 const Content = ({ content, ...otherProps }: Props): JSX.Element => {
   const isContentPanelAtLeast2xl = useIsContentPanelAtLeast("2xl");
   const is1ColumnLayout = useIs1ColumnLayout();
-  const { langui, languages } = useAppLayout();
+  const { langui, languages } = useLocalData();
 
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: content.translations,

src/pages/contents/all.tsx

@@ -24,9 +24,9 @@ import { HorizontalLine } from "components/HorizontalLine";
 import { TranslatedPreviewCard } from "components/PreviewCard";
 import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
 import { cJoin, cIf } from "helpers/className";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                         ╭─────────────╮
@@ -50,7 +50,7 @@ interface Props extends AppLayoutRequired {
 
 const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
 
   const [groupingMethod, setGroupingMethod] = useState<number>(

src/pages/contents/folder/[slug].tsx

@@ -21,8 +21,8 @@ import { TranslatedPreviewCard } from "components/PreviewCard";
 import { HorizontalLine } from "components/HorizontalLine";
 import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
 import { cJoin, cIf } from "helpers/className";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -36,7 +36,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
 
   const subPanel = useMemo(
@@ -305,7 +305,7 @@ const TranslatedPreviewFolder = ({
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 const NoContentNorFolderMessage = () => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <div className="grid place-content-center">
       <div

src/pages/index.tsx

@@ -1,9 +1,9 @@
 import { PostPage } from "components/PostPage";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
 import { getOpenGraph } from "helpers/openGraph";
 import { Terminal } from "components/Cli/Terminal";
 import { useIsTerminalMode } from "hooks/useIsTerminalMode";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -11,7 +11,7 @@ import { useIsTerminalMode } from "hooks/useIsTerminalMode";
  */
 
 const Home = ({ ...otherProps }: PostStaticProps): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const isTerminalMode = useIsTerminalMode();
 
   if (isTerminalMode) {

src/pages/library/[slug]/index.tsx

@@ -14,7 +14,6 @@ import { ReturnButton } from "components/PanelComponents/ReturnButton";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Panels/ContentPanel";
 import { SubPanel } from "components/Panels/SubPanel";
 import { PreviewCard } from "components/PreviewCard";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import {
   Enum_Componentmetadatabooks_Binding_Type,
   Enum_Componentmetadatabooks_Page_Order,
@@ -52,9 +51,10 @@ import { getDescription } from "helpers/description";
 import { useIntersectionList } from "hooks/useIntersectionList";
 import { HorizontalLine } from "components/HorizontalLine";
 import { useIsContentPanelNoMoreThan } from "hooks/useContainerQuery";
-import { useCurrencies } from "hooks/useLocalData";
 import { getLangui } from "graphql/fetchLocalData";
 import { Ids } from "types/ids";
+import { useUserSettings } from "contexts/UserSettingsContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                         ╭─────────────╮
@@ -74,9 +74,8 @@ interface Props extends AppLayoutRequired {
 }
 
 const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
-  const { currency } = useAppLayout();
+  const { currency } = useUserSettings();
-  const { langui } = useAppLayout();
+  const { langui, currencies } = useLocalData();
-  const currencies = useCurrencies();
   const isContentPanelNoMoreThan3xl = useIsContentPanelNoMoreThan("3xl");
   const isContentPanelNoMoreThanSm = useIsContentPanelNoMoreThan("sm");
   const hoverable = useDeviceSupportsHover();
@@ -698,7 +697,7 @@ const ContentLine = ({
   parentSlug,
   condensed,
 }: ContentLineProps): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const { value: isOpened, toggle: toggleOpened } = useBoolean(false);
   const [selectedTranslation] = useSmartLanguage({
     items: content?.translations ?? [],

src/pages/library/[slug]/reader.tsx

@@ -27,7 +27,6 @@ import { getAssetFilename, ImageQuality } from "helpers/img";
 import { useIs1ColumnLayout, useIsContentPanelNoMoreThan } from "hooks/useContainerQuery";
 import { cIf, cJoin } from "helpers/className";
 import { clamp, isInteger } from "helpers/numbers";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { SubPanel } from "components/Panels/SubPanel";
 import { Button } from "components/Inputs/Button";
 import { Icon } from "components/Ico";
@@ -44,6 +43,8 @@ import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { TranslatedProps } from "types/TranslatedProps";
 import { prettyInlineTitle, prettySlug } from "helpers/formatters";
 import { useFullscreen } from "hooks/useFullscreen";
+import { useUserSettings } from "contexts/UserSettingsContext";
+import { useLocalData } from "contexts/LocalDataContext";
 
 const CUSTOM_DARK_DROPSHADOW = `
 drop-shadow(0 0    0.5em rgb(var(--theme-color-shade) / 30%))
@@ -110,8 +111,8 @@ const LibrarySlug = ({
   ...otherProps
 }: Props): JSX.Element => {
   const is1ColumnLayout = useIs1ColumnLayout();
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
-  const { darkMode } = useAppLayout();
+  const { darkMode } = useUserSettings();
   const [currentPageIndex, setCurrentPageIndex] = useState(0);
   const [currentZoom, setCurrentZoom] = useState(1);
   const [isGalleryMode, setIsGalleryMode] = useState(false);
@@ -814,7 +815,7 @@ interface PageFiltersProps {
 }
 
 const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
-  const { darkMode } = useAppLayout();
+  const { darkMode } = useUserSettings();
   const commonCss = useMemo(
     () => cJoin("absolute inset-0", cIf(page === "right", "[background-position-x:-100%]")),
     [page]
@@ -906,7 +907,7 @@ interface ScanSetProps {
 
 const ScanSet = ({ onClickOnImage, scanSet, id, title, content }: ScanSetProps): JSX.Element => {
   const is1ColumnLayout = useIsContentPanelNoMoreThan("2xl");
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const [selectedScan, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: scanSet,
     languageExtractor: useCallback(

src/pages/library/index.tsx

@@ -22,7 +22,6 @@ import { PreviewCard } from "components/PreviewCard";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
 import { ButtonGroup } from "components/Inputs/ButtonGroup";
 import { filterHasAttributes, isDefined, isDefinedAndNotEmpty, isUndefined } from "helpers/others";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { convertPrice } from "helpers/numbers";
 import { SmartList } from "components/SmartList";
 import { SelectiveNonNullable } from "types/SelectiveNonNullable";
@@ -31,9 +30,10 @@ import { compareDate } from "helpers/date";
 import { HorizontalLine } from "components/HorizontalLine";
 import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
 import { cIf, cJoin } from "helpers/className";
-import { useCurrencies } from "hooks/useLocalData";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
+import { useLocalData } from "contexts/LocalDataContext";
+import { useLibraryItemUserStatus } from "hooks/useLibraryItemUserStatus";
 
 /*
  *                                         ╭─────────────╮
@@ -62,9 +62,8 @@ interface Props extends AppLayoutRequired {
 
 const Library = ({ items, ...otherProps }: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
-  const currencies = useCurrencies();
+  const { langui, currencies } = useLocalData();
-  const { langui } = useAppLayout();
+  const { libraryItemUserStatus } = useLibraryItemUserStatus();
-  const { libraryItemUserStatus } = useAppLayout();
   const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
 
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);

src/pages/merch/index.tsx

@@ -4,8 +4,8 @@ import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Panels/SubPanel";
 import { Icon } from "components/Ico";
 import { getOpenGraph } from "helpers/openGraph";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -14,7 +14,7 @@ import { getLangui } from "graphql/fetchLocalData";
 
 interface Props extends AppLayoutRequired {}
 const Merch = (props: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   return (
     <AppLayout
       subPanel={

src/pages/news/[slug].tsx

@@ -4,13 +4,13 @@ import { PostPage } from "components/PostPage";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import { filterHasAttributes, isDefined, isDefinedAndNotEmpty } from "helpers/others";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { useIsTerminalMode } from "hooks/useIsTerminalMode";
 import { Terminal } from "components/Cli/Terminal";
 import { PostWithTranslations } from "types/types";
 import { getDefaultPreferredLanguages, staticSmartLanguage } from "helpers/locales";
 import { prettyTerminalBoxedTitle } from "helpers/terminal";
 import { prettyMarkdown } from "helpers/description";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -20,7 +20,7 @@ import { prettyMarkdown } from "helpers/description";
 interface Props extends PostStaticProps {}
 
 const LibrarySlug = (props: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const isTerminalMode = useIsTerminalMode();
   const router = useRouter();
 

src/pages/news/index.tsx

@@ -22,11 +22,11 @@ import { TranslatedPreviewCard } from "components/PreviewCard";
 import { HorizontalLine } from "components/HorizontalLine";
 import { cIf } from "helpers/className";
 import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
 import { useIsTerminalMode } from "hooks/useIsTerminalMode";
 import { Terminal } from "components/Cli/Terminal";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                         ╭─────────────╮
@@ -49,7 +49,7 @@ interface Props extends AppLayoutRequired {
 
 const News = ({ posts, ...otherProps }: Props): JSX.Element => {
   const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const hoverable = useDeviceSupportsHover();
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
   const {

src/pages/wiki/[slug]/index.tsx

@@ -21,11 +21,11 @@ import { getDefaultPreferredLanguages, staticSmartLanguage } from "helpers/local
 import { getDescription } from "helpers/description";
 import { cIf, cJoin } from "helpers/className";
 import { useIs3ColumnsLayout } from "hooks/useContainerQuery";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
 import { Terminal } from "components/Cli/Terminal";
 import { prettyTerminalBoxedTitle, prettyTerminalUnderlinedTitle } from "helpers/terminal";
 import { useIsTerminalMode } from "hooks/useIsTerminalMode";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -37,7 +37,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const router = useRouter();
   const isTerminalMode = useIsTerminalMode();
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({

src/pages/wiki/chronology.tsx

@@ -30,8 +30,8 @@ import { TranslatedProps } from "types/TranslatedProps";
 import { TranslatedNavOption } from "components/PanelComponents/NavOption";
 import { useIntersectionList } from "hooks/useIntersectionList";
 import { HorizontalLine } from "components/HorizontalLine";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                           ╭────────╮
@@ -44,7 +44,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const Chronology = ({ chronologyItems, chronologyEras, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const ids = useMemo(
     () =>
       filterHasAttributes(chronologyEras, ["attributes"] as const).map(
@@ -315,7 +315,7 @@ interface ChronologyEventProps {
 }
 
 export const ChronologyEvent = ({ event, id }: ChronologyEventProps): JSX.Element => {
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: event.translations ?? [],
     languageExtractor: useCallback(

src/pages/wiki/index.tsx

@@ -24,11 +24,11 @@ import { getOpenGraph } from "helpers/openGraph";
 import { TranslatedPreviewCard } from "components/PreviewCard";
 import { useIsContentPanelAtLeast } from "hooks/useContainerQuery";
 import { cIf } from "helpers/className";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
 import { Terminal } from "components/Cli/Terminal";
 import { useIsTerminalMode } from "hooks/useIsTerminalMode";
+import { useLocalData } from "contexts/LocalDataContext";
 
 /*
  *                                         ╭─────────────╮
@@ -52,7 +52,7 @@ interface Props extends AppLayoutRequired {
 
 const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
-  const { langui } = useAppLayout();
+  const { langui } = useLocalData();
   const isContentPanelAtLeast4xl = useIsContentPanelAtLeast("4xl");
   const isTerminalMode = useIsTerminalMode();
 

src/tailwind.css

@@ -25,7 +25,7 @@ a {
 }
 
 mark {
-  @apply bg-mid px-2;
+  @apply bg-mid px-2 text-black;
 }
 
 /* SCROLLBARS STYLING */