Safari only has to disgard warning once per session

src/components/AppLayout.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 import { useSwipeable } from "react-swipeable";
 import UAParser from "ua-parser-js";
-import { useBoolean, useIsClient } from "usehooks-ts";
+import { useIsClient } from "usehooks-ts";
 import Script from "next/script";
 import { layout } from "../../design.config";
 import { Ico, Icon } from "./Ico";
@@ -69,6 +69,8 @@ export const AppLayout = ({
     preferredLanguages,
     selectedThemeMode,
     subPanelOpen,
+    hasDisgardedSafariWarning,
+    setHasDisgardedSafariWarning,
     setConfigPanelOpen,
     setCurrency,
     setDarkMode,
@@ -144,7 +146,7 @@ export const AppLayout = ({
   }, [currencyOptions, currencySelect, setCurrency]);
 
   const isClient = useIsClient();
-  const { value: hasDisgardSafariWarning, setTrue: disgardSafariWarning } = useBoolean(false);
+
   const isSafari = useMemo<boolean>(() => {
     if (isClient) {
       const parser = new UAParser();
@@ -309,7 +311,7 @@ export const AppLayout = ({
           )}
         </div>
 
-        <Popup state={isSafari && !hasDisgardSafariWarning} onClose={() => null}>
+        <Popup state={isSafari && !hasDisgardedSafariWarning} onClose={() => null}>
           <h1 className="text-2xl">Hi, you are using Safari!</h1>
           <p className="max-w-lg text-center">
             In most cases this wouldn&rsquo;t be a problem but our website is—for some obscure
@@ -324,7 +326,7 @@ export const AppLayout = ({
             text="Let me in regardless"
             className="mt-8"
             onClick={() => {
-              disgardSafariWarning();
+              setHasDisgardedSafariWarning(true);
               sendAnalytics("Safari", "Disgard warning");
             }}
           />

src/contexts/AppLayoutContext.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useContext, useEffect, useLayoutEffect, useState } from "react";
 import { useRouter } from "next/router";
-import { useLocalStorage } from "usehooks-ts";
+import { useLocalStorage, useSessionStorage } from "usehooks-ts";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
 import { LibraryItemUserStatus, RequiredNonNullable } from "types/types";
 import { useDarkMode } from "hooks/useDarkMode";
@@ -72,6 +72,11 @@ interface AppLayoutState {
   langui: Langui;
   languages: Languages;
   currencies: Currencies;
+
+  hasDisgardedSafariWarning: boolean;
+  setHasDisgardedSafariWarning: React.Dispatch<
+    React.SetStateAction<AppLayoutState["hasDisgardedSafariWarning"]>
+  >;
 }
 
 const initialState: RequiredNonNullable<AppLayoutState> = {
@@ -134,6 +139,9 @@ const initialState: RequiredNonNullable<AppLayoutState> = {
   currencies: [],
   languages: [],
   langui: {},
+
+  hasDisgardedSafariWarning: false,
+  setHasDisgardedSafariWarning: () => null,
 };
 
 const AppContext = React.createContext<AppLayoutState>(initialState);
@@ -192,6 +200,11 @@ export const AppContextProvider = (props: Props): JSX.Element => {
     initialState.libraryItemUserStatus
   );
 
+  const [hasDisgardedSafariWarning, setHasDisgardedSafariWarning] = useSessionStorage(
+    "hasDisgardedSafariWarning",
+    initialState.hasDisgardedSafariWarning
+  );
+
   const toggleSubPanelOpen = () => {
     setSubPanelOpen((current) => (isDefined(current) ? !current : current));
   };
@@ -294,6 +307,7 @@ export const AppContextProvider = (props: Props): JSX.Element => {
         screenWidth,
         contentPanelWidth,
         subPanelWidth,
+        hasDisgardedSafariWarning,
         setSubPanelOpen,
         setConfigPanelOpen,
         setMainPanelReduced,
@@ -318,6 +332,7 @@ export const AppContextProvider = (props: Props): JSX.Element => {
         setScreenWidth,
         setContentPanelWidth,
         setSubPanelWidth,
+        setHasDisgardedSafariWarning,
         languages,
         langui,
         currencies,

src/helpers/terminal.ts

@@ -13,6 +13,3 @@ export const prettyTerminalBoxedTitle = (string: string | null | undefined): str
        │ ${string} │
        ╰${"─".repeat(string.length + 2)}╯`
     : "";
-
-export const prettyTerminalTitle = (title: string | null | undefined): string =>
-  `\n\n-= ${title?.toUpperCase()} =-`;