Finish converting the remaining contexts into Jotai

src/components/AppLayout.tsx

@@ -9,7 +9,6 @@ import { isDefined, isUndefined } from "helpers/others";
 import { cIf, cJoin } from "helpers/className";
 import { OpenGraph, TITLE_PREFIX, TITLE_SEPARATOR } from "helpers/openGraph";
 import { Ids } from "types/ids";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter, useAtomPair } from "helpers/atoms";
 
@@ -52,7 +51,8 @@ export const AppLayout = ({
 
   const langui = useAtomGetter(atoms.localData.langui);
 
-  const { is1ColumnLayout, isScreenAtLeastXs } = useContainerQueries();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
+  const isScreenAtLeastXs = useAtomGetter(atoms.containerQueries.isScreenAtLeastXs);
 
   const handlers = useSwipeable({
     onSwipedLeft: (SwipeEventData) => {

src/components/Containers/ContentPanel.tsx

@@ -1,4 +1,5 @@
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 import { cIf, cJoin } from "helpers/className";
 
 /*
@@ -25,7 +26,7 @@ export const ContentPanel = ({
   children,
   className,
 }: Props): JSX.Element => {
-  const { isContentPanelAtLeast3xl } = useContainerQueries();
+  const isContentPanelAtLeast3xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast3xl);
   return (
     <div className="grid h-full">
       <main

src/components/Containers/SubPanel.tsx

@@ -1,4 +1,5 @@
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 import { cIf, cJoin } from "helpers/className";
 
 /*
@@ -13,7 +14,7 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const SubPanel = ({ children }: Props): JSX.Element => {
-  const { isSubPanelAtLeastXs } = useContainerQueries();
+  const isSubPanelAtLeastXs = useAtomGetter(atoms.containerQueries.isSubPanelAtLeastXs);
   return (
     <div
       className={cJoin(

src/components/LightBox.tsx

@@ -10,7 +10,8 @@ import { Ids } from "types/ids";
 import { UploadImageFragment } from "graphql/generated";
 import { ImageQuality } from "helpers/img";
 import { isDefined } from "helpers/others";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { useAtomGetter } from "helpers/atoms";
+import { atoms } from "contexts/atoms";
 
 interface Props {
   onCloseRequest: () => void;
@@ -138,7 +139,7 @@ const ControlButtons = ({
   onCloseRequest,
   toggleFullscreen,
 }: ControlButtonsProps): JSX.Element => {
-  const { is1ColumnLayout } = useContainerQueries();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
 
   const PreviousButton = () => (
     <Button

src/components/Markdown/Markdawn.tsx

@@ -13,7 +13,6 @@ import { AnchorShare } from "components/AnchorShare";
 import { useIntersectionList } from "hooks/useIntersectionList";
 import { Ico, Icon } from "components/Ico";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 
@@ -32,7 +31,7 @@ interface MarkdawnProps {
 export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Element => {
   const playerName = useAtomGetter(atoms.settings.playerName);
   const router = useRouter();
-  const { isContentPanelAtLeastLg } = useContainerQueries();
+  const isContentPanelAtLeastLg = useAtomGetter(atoms.containerQueries.isContentPanelAtLeastLg);
   const { showLightBox } = useAtomGetter(atoms.lightBox);
 
   /* eslint-disable no-irregular-whitespace */

src/components/PanelComponents/ReturnButton.tsx

@@ -4,7 +4,6 @@ import { Button } from "components/Inputs/Button";
 import { TranslatedProps } from "types/TranslatedProps";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { isDefined } from "helpers/others";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 
@@ -25,7 +24,7 @@ interface Props {
 
 export const ReturnButton = ({ href, title, displayOnlyOn, className }: Props): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
-  const { is3ColumnsLayout } = useContainerQueries();
+  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
 
   return (
     <>

src/components/Panels/MainPanel.tsx

@@ -9,7 +9,6 @@ import { isDefinedAndNotEmpty } from "helpers/others";
 import { Link } from "components/Inputs/Link";
 import { sendAnalytics } from "helpers/analytics";
 import { ColoredSvg } from "components/ColoredSvg";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter, useAtomPair, useAtomSetter } from "helpers/atoms";
 
@@ -19,7 +18,7 @@ import { useAtomGetter, useAtomPair, useAtomSetter } from "helpers/atoms";
  */
 
 export const MainPanel = (): JSX.Element => {
-  const { is3ColumnsLayout } = useContainerQueries();
+  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
   const langui = useAtomGetter(atoms.localData.langui);
   const [isMainPanelReduced, setMainPanelReduced] = useAtomPair(atoms.layout.mainPanelReduced);
   const setSettingsOpened = useAtomSetter(atoms.layout.settingsOpened);

src/components/Panels/SettingsPopup.tsx

@@ -11,10 +11,9 @@ import { sendAnalytics } from "helpers/analytics";
 import { cJoin, cIf } from "helpers/className";
 import { prettyLanguage } from "helpers/formatters";
 import { filterHasAttributes, isDefined } from "helpers/others";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter, useAtomPair } from "helpers/atoms";
-import { ThemeMode } from "contexts/UserSettingsProvider";
+import { ThemeMode } from "contexts/SettingsProvider";
 
 export const SettingsPopup = (): JSX.Element => {
   const [preferredLanguages, setPreferredLanguages] = useAtomPair(
@@ -31,7 +30,7 @@ export const SettingsPopup = (): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
   const currencies = useAtomGetter(atoms.localData.currencies);
 
-  const { is1ColumnLayout } = useContainerQueries();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
 
   const router = useRouter();
 

src/components/SmartList.tsx

@@ -8,7 +8,6 @@ import { cJoin } from "helpers/className";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
 import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import { Ids } from "types/ids";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 
@@ -229,7 +228,7 @@ export const SmartList = <T,>({
  */
 
 const DefaultRenderWhenEmpty = () => {
-  const { is3ColumnsLayout } = useContainerQueries();
+  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
   const langui = useAtomGetter(atoms.localData.langui);
   return (
     <div className="grid h-full place-content-center">

src/components/Wiki/DefinitionCard.tsx

@@ -5,7 +5,6 @@ import { getStatusDescription } from "helpers/others";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { Button } from "components/Inputs/Button";
 import { cIf, cJoin } from "helpers/className";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 
@@ -31,7 +30,7 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 const DefinitionCard = ({ source, translations = [], index, categories }: Props): JSX.Element => {
-  const { isContentPanelAtLeastMd } = useContainerQueries();
+  const isContentPanelAtLeastMd = useAtomGetter(atoms.containerQueries.isContentPanelAtLeastMd);
   const langui = useAtomGetter(atoms.localData.langui);
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: translations,

src/contexts/AppLayoutProvider.tsx

@@ -1,27 +1,8 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import { atomWithStorage } from "jotai/utils";
-import { atom } from "jotai";
-import { atoms } from "contexts/atoms";
-import { settings } from "contexts/UserSettingsProvider";
-import { atomPairing, useAtomSetter } from "helpers/atoms";
 import { useScrollIntoView } from "hooks/useScrollIntoView";
-
+import { useAtomSetter } from "helpers/atoms";
-const mainPanelReduced = atomPairing(atomWithStorage("isMainPanelReduced", false));
+import { atoms } from "contexts/atoms";
-const settingsOpened = atomPairing(atomWithStorage("isSettingsOpened", false));
-const subPanelOpened = atomPairing(atomWithStorage("isSubPanelOpened", false));
-const mainPanelOpened = atomPairing(atomWithStorage("isMainPanelOpened", false));
-const menuGesturesEnabled = atomPairing(atomWithStorage("isMenuGesturesEnabled", false));
-const terminalMode = atom((get) => get(settings.playerName[0]) === "root");
-
-export const layout = {
-  mainPanelReduced,
-  settingsOpened,
-  subPanelOpened,
-  mainPanelOpened,
-  menuGesturesEnabled,
-  terminalMode,
-};
 
 export const AppLayoutProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
   const router = useRouter();

src/contexts/ContainerQueriesContext.tsx

@@ -1,316 +0,0 @@
-import React, { createContext, ReactNode, useContext, useMemo, useState } from "react";
-import { atoms } from "./atoms";
-import { useOnResize } from "hooks/useOnResize";
-import { Ids } from "types/ids";
-import { RequiredNonNullable } from "types/types";
-import { useAtomGetter } from "helpers/atoms";
-
-type Size =
-  | "2xl"
-  | "2xs"
-  | "3xl"
-  | "4xl"
-  | "5xl"
-  | "6xl"
-  | "7xl"
-  | "lg"
-  | "md"
-  | "sm"
-  | "xl"
-  | "xs";
-
-const sizes: Record<Size, number> = {
-  "2xl": 42,
-  "3xl": 48,
-  "4xl": 56,
-  "5xl": 64,
-  "6xl": 72,
-  "7xl": 80,
-  lg: 32,
-  md: 28,
-  sm: 24,
-  xl: 36,
-  xs: 19,
-  "2xs": 16,
-};
-
-type ContainerQueriesContainers = "contentPanel" | "screen" | "subPanel";
-
-type ContainerQueriesKeys =
-  | "is1ColumnLayout"
-  | "is3ColumnsLayout"
-  | `is${Capitalize<ContainerQueriesContainers>}AtLeast${Capitalize<Size>}`;
-
-type ContainerQueriesState = Record<ContainerQueriesKeys, boolean>;
-
-const initialState: RequiredNonNullable<ContainerQueriesState> = {
-  is1ColumnLayout: false,
-  is3ColumnsLayout: false,
-  isContentPanelAtLeast2xl: false,
-  isContentPanelAtLeast2xs: false,
-  isContentPanelAtLeast3xl: false,
-  isContentPanelAtLeast4xl: false,
-  isContentPanelAtLeast5xl: false,
-  isContentPanelAtLeast6xl: false,
-  isContentPanelAtLeast7xl: false,
-  isContentPanelAtLeastLg: false,
-  isContentPanelAtLeastMd: false,
-  isContentPanelAtLeastSm: false,
-  isContentPanelAtLeastXl: false,
-  isContentPanelAtLeastXs: false,
-  isScreenAtLeast2xl: false,
-  isScreenAtLeast2xs: false,
-  isScreenAtLeast3xl: false,
-  isScreenAtLeast4xl: false,
-  isScreenAtLeast5xl: false,
-  isScreenAtLeast6xl: false,
-  isScreenAtLeast7xl: false,
-  isScreenAtLeastLg: false,
-  isScreenAtLeastMd: false,
-  isScreenAtLeastSm: false,
-  isScreenAtLeastXl: false,
-  isScreenAtLeastXs: false,
-  isSubPanelAtLeast2xl: false,
-  isSubPanelAtLeast2xs: false,
-  isSubPanelAtLeast3xl: false,
-  isSubPanelAtLeast4xl: false,
-  isSubPanelAtLeast5xl: false,
-  isSubPanelAtLeast6xl: false,
-  isSubPanelAtLeast7xl: false,
-  isSubPanelAtLeastLg: false,
-  isSubPanelAtLeastMd: false,
-  isSubPanelAtLeastSm: false,
-  isSubPanelAtLeastXl: false,
-  isSubPanelAtLeastXs: false,
-};
-
-const ContainerQueriesContext = 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);
-
-  useOnResize(Ids.Body, (width) => setScreenWidth(width));
-  useOnResize(Ids.ContentPanel, (width) => setContentPanelWidth(width));
-  useOnResize(Ids.SubPanel, (width) => setSubPanelWidth(width));
-
-  const fontSize = useAtomGetter(atoms.settings.fontSize);
-
-  const screenAtLeasts = useMemo(
-    () => ({
-      isScreenAtLeast2xs: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("2xs")
-      ),
-      isScreenAtLeastXs: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("xs")),
-      isScreenAtLeastSm: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("sm")),
-      isScreenAtLeastMd: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("md")),
-      isScreenAtLeastLg: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("lg")),
-      isScreenAtLeastXl: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("xl")),
-      isScreenAtLeast2xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("2xl")
-      ),
-      isScreenAtLeast3xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("3xl")
-      ),
-      isScreenAtLeast4xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("4xl")
-      ),
-      isScreenAtLeast5xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("5xl")
-      ),
-      isScreenAtLeast6xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("6xl")
-      ),
-      isScreenAtLeast7xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("7xl")
-      ),
-    }),
-    [screenWidth, fontSize]
-  );
-
-  const columnLayouts = useMemo(
-    () => ({
-      is1ColumnLayout: !screenAtLeasts.isScreenAtLeast5xl,
-      is3ColumnsLayout: screenAtLeasts.isScreenAtLeast5xl,
-    }),
-    [screenAtLeasts.isScreenAtLeast5xl]
-  );
-
-  const subPanelAtLeasts = useMemo(
-    () => ({
-      isSubPanelAtLeast2xs: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("2xs")
-      ),
-      isSubPanelAtLeastXs: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("xs")
-      ),
-      isSubPanelAtLeastSm: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("sm")
-      ),
-      isSubPanelAtLeastMd: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("md")
-      ),
-      isSubPanelAtLeastLg: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("lg")
-      ),
-      isSubPanelAtLeastXl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("xl")
-      ),
-      isSubPanelAtLeast2xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("2xl")
-      ),
-      isSubPanelAtLeast3xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("3xl")
-      ),
-      isSubPanelAtLeast4xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("4xl")
-      ),
-      isSubPanelAtLeast5xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("5xl")
-      ),
-      isSubPanelAtLeast6xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("6xl")
-      ),
-      isSubPanelAtLeast7xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("7xl")
-      ),
-    }),
-    [subPanelWidth, fontSize]
-  );
-
-  const contentPanelAtLeasts = useMemo(
-    () => ({
-      isContentPanelAtLeast2xs: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("2xs")
-      ),
-      isContentPanelAtLeastXs: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("xs")
-      ),
-      isContentPanelAtLeastSm: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("sm")
-      ),
-      isContentPanelAtLeastMd: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("md")
-      ),
-      isContentPanelAtLeastLg: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("lg")
-      ),
-      isContentPanelAtLeastXl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("xl")
-      ),
-      isContentPanelAtLeast2xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("2xl")
-      ),
-      isContentPanelAtLeast3xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("3xl")
-      ),
-      isContentPanelAtLeast4xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("4xl")
-      ),
-      isContentPanelAtLeast5xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("5xl")
-      ),
-      isContentPanelAtLeast6xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("6xl")
-      ),
-      isContentPanelAtLeast7xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("7xl")
-      ),
-    }),
-    [contentPanelWidth, fontSize]
-  );
-
-  return (
-    <ContainerQueriesContext.Provider
-      value={{
-        ...screenAtLeasts,
-        ...contentPanelAtLeasts,
-        ...subPanelAtLeasts,
-        ...columnLayouts,
-      }}>
-      {children}
-    </ContainerQueriesContext.Provider>
-  );
-};
-
-type MediaQuery = { value: number; unit: "px" | "rem"; rule: "max" | "min" };
-
-const createAtLeastMediaQuery = (size: Size): MediaQuery => ({
-  value: sizes[size],
-  unit: "rem",
-  rule: "min",
-});
-
-const applyContainerQuery = (fontSize: number, width: number, query: MediaQuery): boolean => {
-  const breakpoint = query.value * (query.unit === "rem" ? 16 : 1) * fontSize;
-  return query.rule === "min" ? width >= breakpoint : width < breakpoint;
-};

src/contexts/ContainerQueriesProvider.tsx

@@ -0,0 +1,152 @@
+import { atom, Getter } from "jotai";
+import { atomPairing, useAtomSetter } from "helpers/atoms";
+import { useOnResize } from "hooks/useOnResize";
+import { Ids } from "types/ids";
+import { settings } from "contexts/atoms";
+
+type Size =
+  | "2xl"
+  | "2xs"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl"
+  | "7xl"
+  | "lg"
+  | "md"
+  | "sm"
+  | "xl"
+  | "xs";
+
+const sizes: Record<Size, number> = {
+  "2xl": 42,
+  "3xl": 48,
+  "4xl": 56,
+  "5xl": 64,
+  "6xl": 72,
+  "7xl": 80,
+  lg: 32,
+  md: 28,
+  sm: 24,
+  xl: 36,
+  xs: 19,
+  "2xs": 16,
+};
+
+const isAtLeastContainerQuery = (width: number, size: Size, fontSize: number): boolean =>
+  width >= sizes[size] * 16 * fontSize;
+
+const screenWidth = atomPairing(atom(0));
+const contentPanelWidth = atomPairing(atom(0));
+const subPanelWidth = atomPairing(atom(0));
+
+const screenGetter = (get: Getter, size: Size) =>
+  isAtLeastContainerQuery(get(screenWidth[0]), size, get(settings.fontSize[0]));
+
+const isScreenAtLeast2xs = atom((get) => screenGetter(get, "2xs"));
+const isScreenAtLeastXs = atom((get) => screenGetter(get, "xs"));
+const isScreenAtLeastSm = atom((get) => screenGetter(get, "sm"));
+const isScreenAtLeastMd = atom((get) => screenGetter(get, "md"));
+const isScreenAtLeastLg = atom((get) => screenGetter(get, "lg"));
+const isScreenAtLeastXl = atom((get) => screenGetter(get, "xl"));
+const isScreenAtLeast2xl = atom((get) => screenGetter(get, "2xl"));
+const isScreenAtLeast3xl = atom((get) => screenGetter(get, "3xl"));
+const isScreenAtLeast4xl = atom((get) => screenGetter(get, "4xl"));
+const isScreenAtLeast5xl = atom((get) => screenGetter(get, "5xl"));
+const isScreenAtLeast6xl = atom((get) => screenGetter(get, "6xl"));
+const isScreenAtLeast7xl = atom((get) => screenGetter(get, "7xl"));
+
+const is1ColumnLayout = atom((get) => !get(isScreenAtLeast5xl));
+const is3ColumnsLayout = atom((get) => get(isScreenAtLeast5xl));
+
+const contentPanelGetter = (get: Getter, size: Size) =>
+  isAtLeastContainerQuery(get(contentPanelWidth[0]), size, get(settings.fontSize[0]));
+
+const isContentPanelAtLeast2xs = atom((get) => contentPanelGetter(get, "2xs"));
+const isContentPanelAtLeastXs = atom((get) => contentPanelGetter(get, "xs"));
+const isContentPanelAtLeastSm = atom((get) => contentPanelGetter(get, "sm"));
+const isContentPanelAtLeastMd = atom((get) => contentPanelGetter(get, "md"));
+const isContentPanelAtLeastLg = atom((get) => contentPanelGetter(get, "lg"));
+const isContentPanelAtLeastXl = atom((get) => contentPanelGetter(get, "xl"));
+const isContentPanelAtLeast2xl = atom((get) => contentPanelGetter(get, "2xl"));
+const isContentPanelAtLeast3xl = atom((get) => contentPanelGetter(get, "3xl"));
+const isContentPanelAtLeast4xl = atom((get) => contentPanelGetter(get, "4xl"));
+const isContentPanelAtLeast5xl = atom((get) => contentPanelGetter(get, "5xl"));
+const isContentPanelAtLeast6xl = atom((get) => contentPanelGetter(get, "6xl"));
+const isContentPanelAtLeast7xl = atom((get) => contentPanelGetter(get, "7xl"));
+
+const subPanelGetter = (get: Getter, size: Size) =>
+  isAtLeastContainerQuery(get(subPanelWidth[0]), size, get(settings.fontSize[0]));
+
+const isSubPanelAtLeast2xs = atom((get) => subPanelGetter(get, "2xs"));
+const isSubPanelAtLeastXs = atom((get) => subPanelGetter(get, "xs"));
+const isSubPanelAtLeastSm = atom((get) => subPanelGetter(get, "sm"));
+const isSubPanelAtLeastMd = atom((get) => subPanelGetter(get, "md"));
+const isSubPanelAtLeastLg = atom((get) => subPanelGetter(get, "lg"));
+const isSubPanelAtLeastXl = atom((get) => subPanelGetter(get, "xl"));
+const isSubPanelAtLeast2xl = atom((get) => subPanelGetter(get, "2xl"));
+const isSubPanelAtLeast3xl = atom((get) => subPanelGetter(get, "3xl"));
+const isSubPanelAtLeast4xl = atom((get) => subPanelGetter(get, "4xl"));
+const isSubPanelAtLeast5xl = atom((get) => subPanelGetter(get, "5xl"));
+const isSubPanelAtLeast6xl = atom((get) => subPanelGetter(get, "6xl"));
+const isSubPanelAtLeast7xl = atom((get) => subPanelGetter(get, "7xl"));
+
+export const containerQueries = {
+  is1ColumnLayout,
+  is3ColumnsLayout,
+
+  isScreenAtLeast2xs,
+  isScreenAtLeastXs,
+  isScreenAtLeastSm,
+  isScreenAtLeastMd,
+  isScreenAtLeastLg,
+  isScreenAtLeastXl,
+  isScreenAtLeast2xl,
+  isScreenAtLeast3xl,
+  isScreenAtLeast4xl,
+  isScreenAtLeast5xl,
+  isScreenAtLeast6xl,
+  isScreenAtLeast7xl,
+
+  isContentPanelAtLeast2xs,
+  isContentPanelAtLeastXs,
+  isContentPanelAtLeastSm,
+  isContentPanelAtLeastMd,
+  isContentPanelAtLeastLg,
+  isContentPanelAtLeastXl,
+  isContentPanelAtLeast2xl,
+  isContentPanelAtLeast3xl,
+  isContentPanelAtLeast4xl,
+  isContentPanelAtLeast5xl,
+  isContentPanelAtLeast6xl,
+  isContentPanelAtLeast7xl,
+
+  isSubPanelAtLeast2xs,
+  isSubPanelAtLeastXs,
+  isSubPanelAtLeastSm,
+  isSubPanelAtLeastMd,
+  isSubPanelAtLeastLg,
+  isSubPanelAtLeastXl,
+  isSubPanelAtLeast2xl,
+  isSubPanelAtLeast3xl,
+  isSubPanelAtLeast4xl,
+  isSubPanelAtLeast5xl,
+  isSubPanelAtLeast6xl,
+  isSubPanelAtLeast7xl,
+};
+
+export const ContainerQueriesContextProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element => {
+  const setScreenWidth = useAtomSetter(screenWidth);
+  const setContentPanelWidth = useAtomSetter(contentPanelWidth);
+  const setSubPanelWidth = useAtomSetter(subPanelWidth);
+
+  useOnResize(Ids.Body, (width) => setScreenWidth(width));
+  useOnResize(Ids.ContentPanel, (width) => setContentPanelWidth(width));
+  useOnResize(Ids.SubPanel, (width) => setSubPanelWidth(width));
+
+  return <>{children}</>;
+};

src/contexts/LightBoxProvider.tsx

@@ -1,27 +1,17 @@
 import React, { useCallback, useState } from "react";
-import { atom } from "jotai";
 import { useEffectOnce } from "usehooks-ts";
 import { UploadImageFragment } from "graphql/generated";
 import { LightBox } from "components/LightBox";
 import { filterDefined } from "helpers/others";
-import { atomPairing, useAtomSetter } from "helpers/atoms";
+import { useAtomSetter } from "helpers/atoms";
-
+import { lightBox } from "contexts/atoms";
-const lightboxAtom = atomPairing(
-  atom<{
-    showLightBox: (
-      images: (UploadImageFragment | string | null | undefined)[],
-      index?: number
-    ) => void;
-  }>({ showLightBox: () => null })
-);
-export const lightBox = lightboxAtom[0];
 
 export const LightBoxProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
   const [isLightBoxVisible, setLightBoxVisibility] = useState(false);
   const [lightBoxImages, setLightBoxImages] = useState<(UploadImageFragment | string)[]>([]);
   const [lightBoxIndex, setLightBoxIndex] = useState(0);
 
-  const setShowLightBox = useAtomSetter(lightboxAtom);
+  const setShowLightBox = useAtomSetter(lightBox);
 
   useEffectOnce(() =>
     setShowLightBox({

src/contexts/SettingsProvider.tsx

@@ -0,0 +1,92 @@
+import { useRouter } from "next/router";
+import { useLayoutEffect, useEffect } from "react";
+import { useAtomGetter, useAtomPair } from "helpers/atoms";
+import { getDefaultPreferredLanguages } from "helpers/locales";
+import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
+import { usePrefersDarkMode } from "hooks/useMediaQuery";
+import { SettingsPopup } from "components/Panels/SettingsPopup";
+import { settings } from "contexts/atoms";
+
+export enum ThemeMode {
+  Dark = "dark",
+  Auto = "auto",
+  Light = "light",
+}
+
+export const SettingsProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
+  const router = useRouter();
+  const [preferredLanguages, setPreferredLanguages] = useAtomPair(settings.preferredLanguages);
+  const fontSize = useAtomGetter(settings.fontSize);
+  const isDyslexic = useAtomGetter(settings.dyslexic);
+  const [isDarkMode, setDarkMode] = useAtomPair(settings.darkMode);
+  const themeMode = useAtomGetter(settings.themeMode);
+
+  useLayoutEffect(() => {
+    const html = document.getElementsByTagName("html")[0];
+    if (isDefined(html)) {
+      html.style.fontSize = `${fontSize * 100}%`;
+    }
+  }, [fontSize]);
+
+  useLayoutEffect(() => {
+    const next = document.getElementById("__next");
+    if (isDefined(next)) {
+      if (isDyslexic) {
+        next.classList.add("set-theme-font-dyslexic");
+        next.classList.remove("set-theme-font-standard");
+      } else {
+        next.classList.add("set-theme-font-standard");
+        next.classList.remove("set-theme-font-dyslexic");
+      }
+    }
+  }, [isDyslexic]);
+
+  /* DARK MODE */
+  const prefersDarkMode = usePrefersDarkMode();
+
+  useEffect(() => {
+    setDarkMode(themeMode === ThemeMode.Auto ? prefersDarkMode : themeMode === ThemeMode.Dark);
+  }, [prefersDarkMode, setDarkMode, themeMode]);
+
+  useLayoutEffect(() => {
+    const next = document.getElementById("__next");
+    if (isDefined(next)) {
+      if (isDarkMode) {
+        next.classList.add("set-theme-dark");
+        next.classList.remove("set-theme-light");
+      } else {
+        next.classList.add("set-theme-light");
+        next.classList.remove("set-theme-dark");
+      }
+    }
+  }, [isDarkMode]);
+
+  /* PREFERRED LANGUAGES */
+
+  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, setPreferredLanguages]);
+
+  return (
+    <>
+      <SettingsPopup />
+      {children}
+    </>
+  );
+};

src/contexts/TerminalProvider.tsx

@@ -1,10 +0,0 @@
-import { atom } from "jotai";
-import { atomPairing } from "helpers/atoms";
-
-const previousLines = atomPairing(atom<string[]>([]));
-const previousCommands = atomPairing(atom<string[]>([]));
-
-export const terminal = {
-  previousLines,
-  previousCommands,
-};

src/contexts/UserSettingsProvider.tsx

@@ -2,7 +2,6 @@ import { atomWithStorage } from "jotai/utils";
 import { atom } from "jotai";
 import { useRouter } from "next/router";
 import { useLayoutEffect, useEffect } from "react";
-import { atoms } from "./atoms";
 import { atomPairing, useAtomGetter, useAtomPair } from "helpers/atoms";
 import { getDefaultPreferredLanguages } from "helpers/locales";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
@@ -35,13 +34,11 @@ export const settings = {
 
 export const UserSettingsProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
   const router = useRouter();
-  const [preferredLanguages, setPreferredLanguages] = useAtomPair(
+  const [preferredLanguages, setPreferredLanguages] = useAtomPair(settings.preferredLanguages);
-    atoms.settings.preferredLanguages
+  const fontSize = useAtomGetter(settings.fontSize);
-  );
+  const isDyslexic = useAtomGetter(settings.dyslexic);
-  const fontSize = useAtomGetter(atoms.settings.fontSize);
+  const [isDarkMode, setDarkMode] = useAtomPair(settings.darkMode);
-  const isDyslexic = useAtomGetter(atoms.settings.dyslexic);
+  const themeMode = useAtomGetter(settings.themeMode);
-  const [isDarkMode, setDarkMode] = useAtomPair(atoms.settings.darkMode);
-  const themeMode = useAtomGetter(atoms.settings.themeMode);
 
   useLayoutEffect(() => {
     const html = document.getElementsByTagName("html")[0];

src/contexts/atoms.ts

@@ -1,13 +1,75 @@
-import { layout } from "contexts/AppLayoutProvider";
+import { atomWithStorage } from "jotai/utils";
-import { terminal } from "contexts/TerminalProvider";
+import { atom } from "jotai";
 import { localData } from "contexts/LocalDataProvider";
-import { settings } from "contexts/UserSettingsProvider";
+import { containerQueries } from "contexts/ContainerQueriesProvider";
-import { lightBox } from "contexts/LightBoxProvider";
+import { atomPairing } from "helpers/atoms";
+import { UploadImageFragment } from "graphql/generated";
+import { ThemeMode } from "contexts/SettingsProvider";
+
+/* [ LAYOUT ATOMS ] */
+
+const mainPanelReduced = atomPairing(atomWithStorage("isMainPanelReduced", false));
+const settingsOpened = atomPairing(atomWithStorage("isSettingsOpened", false));
+const subPanelOpened = atomPairing(atomWithStorage("isSubPanelOpened", false));
+const mainPanelOpened = atomPairing(atomWithStorage("isMainPanelOpened", false));
+const menuGesturesEnabled = atomPairing(atomWithStorage("isMenuGesturesEnabled", false));
+const terminalMode = atom((get) => get(settings.playerName[0]) === "root");
+
+const layout = {
+  mainPanelReduced,
+  settingsOpened,
+  subPanelOpened,
+  mainPanelOpened,
+  menuGesturesEnabled,
+  terminalMode,
+};
+
+/* [ SETTINGS ATOMS ] */
+
+const preferredLanguagesAtom = atomPairing(atomWithStorage<string[]>("preferredLanguages", []));
+const themeModeAtom = atomPairing(atomWithStorage<ThemeMode>("themeMode", ThemeMode.Auto));
+const darkModeAtom = atomPairing(atom(false));
+const fontSizeAtom = atomPairing(atomWithStorage("fontSize", 1));
+const dyslexicAtom = atomPairing(atomWithStorage("isDyslexic", false));
+const currencyAtom = atomPairing(atomWithStorage("currency", "USD"));
+const playerNameAtom = atomPairing(atomWithStorage("playerName", ""));
+
+export const settings = {
+  preferredLanguages: preferredLanguagesAtom,
+  themeMode: themeModeAtom,
+  darkMode: darkModeAtom,
+  fontSize: fontSizeAtom,
+  dyslexic: dyslexicAtom,
+  currency: currencyAtom,
+  playerName: playerNameAtom,
+};
+
+/* [ LIGHTBOX ATOMS ] */
+
+export const lightBox = atomPairing(
+  atom<{
+    showLightBox: (
+      images: (UploadImageFragment | string | null | undefined)[],
+      index?: number
+    ) => void;
+  }>({ showLightBox: () => null })
+);
+
+/* [ TERMINAL ATOMS ] */
+
+const previousLines = atomPairing(atom<string[]>([]));
+const previousCommands = atomPairing(atom<string[]>([]));
+
+export const terminal = {
+  previousLines,
+  previousCommands,
+};
 
 export const atoms = {
   layout,
   terminal,
-  settings,
   localData,
-  lightBox,
+  lightBox: lightBox[0],
+  containerQueries,
+  settings,
 };

src/contexts/settings.tsx

@@ -0,0 +1,33 @@
+import { atomWithStorage } from "jotai/utils";
+import { atom } from "jotai";
+import { useRouter } from "next/router";
+import { useLayoutEffect, useEffect } from "react";
+import { atomPairing, useAtomGetter, useAtomPair } from "helpers/atoms";
+import { getDefaultPreferredLanguages } from "helpers/locales";
+import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
+import { usePrefersDarkMode } from "hooks/useMediaQuery";
+import { SettingsPopup } from "components/Panels/SettingsPopup";
+
+export enum ThemeMode {
+  Dark = "dark",
+  Auto = "auto",
+  Light = "light",
+}
+
+const preferredLanguagesAtom = atomPairing(atomWithStorage<string[]>("preferredLanguages", []));
+const themeModeAtom = atomPairing(atomWithStorage<ThemeMode>("themeMode", ThemeMode.Auto));
+const darkModeAtom = atomPairing(atom(false));
+const fontSizeAtom = atomPairing(atomWithStorage("fontSize", 1));
+const dyslexicAtom = atomPairing(atomWithStorage("isDyslexic", false));
+const currencyAtom = atomPairing(atomWithStorage("currency", "USD"));
+const playerNameAtom = atomPairing(atomWithStorage("playerName", ""));
+
+export const settings = {
+  preferredLanguages: preferredLanguagesAtom,
+  themeMode: themeModeAtom,
+  darkMode: darkModeAtom,
+  fontSize: fontSizeAtom,
+  dyslexic: dyslexicAtom,
+  currency: currencyAtom,
+  playerName: playerNameAtom,
+};

src/pages/_app.tsx

@@ -16,31 +16,29 @@ import "styles/others.css";
 import "styles/rc-slider.css";
 import "styles/tippy.css";
 
-import { ContainerQueriesContextProvider } from "contexts/ContainerQueriesContext";
 import { LocalDataProvider } from "contexts/LocalDataProvider";
-import { UserSettingsProvider } from "contexts/UserSettingsProvider";
 import { LightBoxProvider } from "contexts/LightBoxProvider";
 import { AppLayoutProvider } from "contexts/AppLayoutProvider";
+import { SettingsProvider } from "contexts/SettingsProvider";
+import { ContainerQueriesContextProvider } from "contexts/ContainerQueriesProvider";
 
 const AccordsLibraryApp = (props: AppProps): JSX.Element => (
   <LocalDataProvider>
-    <UserSettingsProvider>
+    <SettingsProvider>
       <AppLayoutProvider>
-        <UserSettingsProvider>
+        <ContainerQueriesContextProvider>
-          <ContainerQueriesContextProvider>
+          <LightBoxProvider>
-            <LightBoxProvider>
+            <Script
-              <Script
+              async
-                async
+              defer
-                defer
+              data-website-id={process.env.NEXT_PUBLIC_UMAMI_ID}
-                data-website-id={process.env.NEXT_PUBLIC_UMAMI_ID}
+              src={`${process.env.NEXT_PUBLIC_UMAMI_URL}/umami.js`}
-                src={`${process.env.NEXT_PUBLIC_UMAMI_URL}/umami.js`}
+            />
-              />
+            <props.Component {...props.pageProps} />
-              <props.Component {...props.pageProps} />
+          </LightBoxProvider>
-            </LightBoxProvider>
+        </ContainerQueriesContextProvider>
-          </ContainerQueriesContextProvider>
-        </UserSettingsProvider>
       </AppLayoutProvider>
-    </UserSettingsProvider>
+    </SettingsProvider>
   </LocalDataProvider>
 );
 export default AccordsLibraryApp;

src/pages/about-us/contact.tsx

@@ -9,7 +9,6 @@ import { RequestMailProps, ResponseMailProps } from "pages/api/mail";
 import { sendAnalytics } from "helpers/analytics";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                           ╭────────╮
@@ -19,7 +18,7 @@ import { useContainerQueries } from "contexts/ContainerQueriesContext";
 const AboutUs = (props: PostStaticProps): JSX.Element => {
   const router = useRouter();
   const langui = useAtomGetter(atoms.localData.langui);
-  const { is1ColumnLayout } = useContainerQueries();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
   const [formResponse, setFormResponse] = useState("");
   const [formState, setFormState] = useState<"completed" | "ongoing" | "stale">("stale");
 

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

@@ -24,7 +24,6 @@ import { TextInput } from "components/Inputs/TextInput";
 import { getLangui } from "graphql/fetchLocalData";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                         ╭─────────────╮
@@ -48,7 +47,8 @@ const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {
   const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
   const langui = useAtomGetter(atoms.localData.langui);
   const hoverable = useDeviceSupportsHover();
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+
 
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
 

src/pages/archives/videos/index.tsx

@@ -24,7 +24,6 @@ import { cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                         ╭─────────────╮
@@ -47,7 +46,7 @@ interface Props extends AppLayoutRequired {
 const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
   const hoverable = useDeviceSupportsHover();
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
 
   const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
 

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

@@ -19,7 +19,6 @@ import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                           ╭────────╮
@@ -31,7 +30,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const Video = ({ video, ...otherProps }: Props): JSX.Element => {
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
   const langui = useAtomGetter(atoms.localData.langui);
   const router = useRouter();
 

src/pages/contents/[slug].tsx

@@ -34,7 +34,6 @@ import { getLangui } from "graphql/fetchLocalData";
 import { Ids } from "types/ids";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                           ╭────────╮
@@ -46,7 +45,9 @@ interface Props extends AppLayoutRequired {
 }
 
 const Content = ({ content, ...otherProps }: Props): JSX.Element => {
-  const { isContentPanelAtLeast2xl, is1ColumnLayout } = useContainerQueries();
+  const isContentPanelAtLeast2xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast2xl);
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
+
   const langui = useAtomGetter(atoms.localData.langui);
   const languages = useAtomGetter(atoms.localData.languages);
 

src/pages/contents/all.tsx

@@ -27,7 +27,6 @@ import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                         ╭─────────────╮
@@ -52,7 +51,8 @@ interface Props extends AppLayoutRequired {
 const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
   const langui = useAtomGetter(atoms.localData.langui);
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+
 
   const [groupingMethod, setGroupingMethod] = useState<number>(
     DEFAULT_FILTERS_STATE.groupingMethod

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

@@ -20,7 +20,6 @@ import { cJoin, cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 import { TranslatedPreviewFolder } from "components/Contents/PreviewFolder";
 
 /*
@@ -36,7 +35,8 @@ interface Props extends AppLayoutRequired {
 
 const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+
 
   const subPanel = useMemo(
     () => (

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

@@ -53,7 +53,6 @@ import { getLangui } from "graphql/fetchLocalData";
 import { Ids } from "types/ids";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                         ╭─────────────╮
@@ -77,7 +76,9 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
   const currencies = useAtomGetter(atoms.localData.currencies);
 
-  const { isContentPanelAtLeast3xl, isContentPanelAtLeastSm } = useContainerQueries();
+  const isContentPanelAtLeast3xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast3xl);
+  const isContentPanelAtLeastSm = useAtomGetter(atoms.containerQueries.isContentPanelAtLeastSm);
+
   const hoverable = useDeviceSupportsHover();
   const router = useRouter();
   const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(false);

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

@@ -44,7 +44,6 @@ import { useFullscreen } from "hooks/useFullscreen";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 import { FilterSettings, useReaderSettings } from "hooks/useReaderSettings";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 const CUSTOM_DARK_DROPSHADOW = `
   drop-shadow(0 0    0.5em rgb(var(--theme-color-shade) / 30%))
@@ -90,7 +89,7 @@ const LibrarySlug = ({
   item,
   ...otherProps
 }: Props): JSX.Element => {
-  const { is1ColumnLayout } = useContainerQueries();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
   const langui = useAtomGetter(atoms.localData.langui);
   const isDarkMode = useAtomGetter(atoms.settings.darkMode);
   const {
@@ -889,7 +888,7 @@ interface ScanSetProps {
 }
 
 const ScanSet = ({ onClickOnImage, scanSet, id, title, content }: ScanSetProps): JSX.Element => {
-  const { is1ColumnLayout } = useContainerQueries();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
   const langui = useAtomGetter(atoms.localData.langui);
   const [selectedScan, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: scanSet,

src/pages/library/index.tsx

@@ -34,7 +34,6 @@ import { sendAnalytics } from "helpers/analytics";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 import { useLibraryItemUserStatus } from "hooks/useLibraryItemUserStatus";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                         ╭─────────────╮
@@ -67,7 +66,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
   const currencies = useAtomGetter(atoms.localData.currencies);
 
   const { libraryItemUserStatus } = useLibraryItemUserStatus();
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
 
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
 

src/pages/news/index.tsx

@@ -26,7 +26,6 @@ import { sendAnalytics } from "helpers/analytics";
 import { Terminal } from "components/Cli/Terminal";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                         ╭─────────────╮
@@ -48,7 +47,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const News = ({ posts, ...otherProps }: Props): JSX.Element => {
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
   const langui = useAtomGetter(atoms.localData.langui);
   const hoverable = useDeviceSupportsHover();
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);

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

@@ -24,7 +24,6 @@ import { Terminal } from "components/Cli/Terminal";
 import { prettyTerminalBoxedTitle, prettyTerminalUnderlinedTitle } from "helpers/terminal";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                           ╭────────╮
@@ -48,7 +47,7 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
       []
     ),
   });
-  const { is3ColumnsLayout } = useContainerQueries();
+  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
 
   const subPanel = useMemo(
     () => (

src/pages/wiki/index.tsx

@@ -27,7 +27,6 @@ import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
 import { Terminal } from "components/Cli/Terminal";
 import { atoms } from "contexts/atoms";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 import { useAtomGetter } from "helpers/atoms";
 
 /*
@@ -53,7 +52,7 @@ interface Props extends AppLayoutRequired {
 const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
   const langui = useAtomGetter(atoms.localData.langui);
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
   const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
 
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);