Display warning on webkit browser

src/components/AppLayout.tsx

@@ -26,6 +26,8 @@ import { useAppLayout } from "contexts/AppLayoutContext";
 import { Button } from "components/Inputs/Button";
 import { OpenGraph } from "helpers/openGraph";
 import { getDefaultPreferredLanguages } from "helpers/locales";
+import useIsClient from "hooks/useIsClient";
+import { useBoolean } from "hooks/useBoolean";
 
 /*
  *                                         ╭─────────────╮
@@ -191,6 +193,21 @@ export const AppLayout = ({
     return "grid-cols-[20rem_0px_1fr]";
   }, [mainPanelReduced, subPanel]);
 
+  const isClient = useIsClient();
+  const { state: hasDisgardSafariWarning, setTrue: disgardSafariWarning } =
+    useBoolean(false);
+  const isSafari = useMemo<boolean>(() => {
+    if (isClient) {
+      const useAgent = navigator.userAgent.toLowerCase();
+      return (
+        useAgent.includes("safari") ||
+        useAgent.includes("iphone") ||
+        useAgent.includes("ipad")
+      );
+    }
+    return false;
+  }, [isClient]);
+
   return (
     <div
       className={cJoin(
@@ -357,7 +374,35 @@ export const AppLayout = ({
           )}
         </div>
 
-        <Popup state={configPanelOpen ?? false} setState={setConfigPanelOpen}>
+        <Popup state={isSafari && !hasDisgardSafariWarning} onClose={() => null}>
+          <h1 className="text-2xl">Hi, you are using Safari!</h1>
+          <p className="max-w-lg text-center">
+            In most cases this wouldn't be a problem but our website is—for some
+            obscure reason—performing terribly on Safari (WebKit). Because of
+            that, we have decided to display this message instead of letting you
+            have a slow and painful experience. We are looking into the problem,
+            and are hoping to fix this soon.
+          </p>
+          <p>
+            In the meanwhile, if you are using an iPhone/iPad, please try using
+            another device.
+          </p>
+          <p>
+            If you are on macOS, please use another browser such as Firefox or
+            Chrome.
+          </p>
+
+          <Button
+            text="Let me in regardless"
+            className="mt-8"
+            onClick={disgardSafariWarning}
+          />
+        </Popup>
+
+        <Popup
+          state={configPanelOpen ?? false}
+          onClose={() => setConfigPanelOpen(false)}
+        >
           <h2 className="text-2xl">{langui.settings}</h2>
 
           <div

src/components/LightBox.tsx

@@ -70,7 +70,12 @@ export const LightBox = ({
             }
           }}
         >
-          <Popup setState={setState} state={state} padding={false} fillViewport>
+          <Popup
+            onClose={() => setState(false)}
+            state={state}
+            padding={false}
+            fillViewport
+          >
             <div
               {...handlers}
               className={`grid h-full w-full grid-cols-[4em,1fr,4em] place-items-center 

src/components/Popup.tsx

@@ -9,9 +9,7 @@ import { cIf, cJoin } from "helpers/className";
  */
 
 interface Props {
-  setState:
+  onClose: () => void;
-    | Dispatch<SetStateAction<boolean | undefined>>
-    | Dispatch<SetStateAction<boolean>>;
   state: boolean;
   children: React.ReactNode;
   fillViewport?: boolean;
@@ -22,7 +20,7 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const Popup = ({
-  setState,
+  onClose,
   state,
   children,
   fillViewport,
@@ -36,13 +34,7 @@ export const Popup = ({
   }, [setMenuGestures, state]);
 
   return (
-    <Hotkeys
+    <Hotkeys keyName="escape" allowRepeat onKeyDown={onClose}>
-      keyName="escape"
-      allowRepeat
-      onKeyDown={() => {
-        setState(false);
-      }}
-    >
       <div
         className={cJoin(
           "fixed inset-0 z-50 grid place-content-center transition-[backdrop-filter] duration-500",
@@ -58,9 +50,7 @@ export const Popup = ({
             "fixed inset-0 bg-shade transition-all duration-500",
             cIf(state, "bg-opacity-50", "bg-opacity-0")
           )}
-          onClick={() => {
+          onClick={onClose}
-            setState(false);
-          }}
         />
 
         <div

src/hooks/useIsClient.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+const useIsClient = (): boolean => {
+  const [isClient, setClient] = useState(false);
+
+  useEffect(() => {
+    setClient(true);
+  }, []);
+
+  return isClient;
+};
+
+export default useIsClient;

src/pages/dev/editor.tsx

@@ -173,7 +173,10 @@ const Editor = ({ langui, ...otherProps }: Props): JSX.Element => {
   const contentPanel = useMemo(
     () => (
       <ContentPanel width={ContentPanelWidthSizes.Full}>
-        <Popup setState={setConverterOpened} state={converterOpened}>
+        <Popup
+          onClose={() => setConverterOpened(false)}
+          state={converterOpened}
+        >
           <div className="text-center">
             <h2 className="mt-4">Convert HTML to markdown</h2>
             <p>