feat: add safari not support modal (#310)

* wip: add safari not support modal

* feat: add link to docs

* fix: safari not supported docs url

* fix: shorten url and word break

* fix: add emphasize on docs url

* fix: update link to docs

Author: johann-crabnebula

clients/web/src/components/dialogs/safari-not-supported-dialog.tsx

@@ -0,0 +1,32 @@
+import { Dialog } from "~/base-components/dialog";
+import { AlertDialog } from "@kobalte/core";
+
+export function SafariNotSupportedDialog() {
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+  return (
+    <Dialog
+      title="Safari is not supported"
+      buttons={
+        <AlertDialog.CloseButton class="border border-neutral-400 hover:bg-neutral-800 hover:border-neutral-100 text-white text-lg py-2 px-4 rounded focus:outline-dashed focus:outline-white focus:outline-offset-2">
+          Dismiss
+        </AlertDialog.CloseButton>
+      }
+      defaultOpen={isSafari}
+    >
+      <p>
+        DevTools Web currently does not support the use of Safari. Sadly Safari
+        does not allow you to make requests to localhost. More information in
+        our docs:{" "}
+        <strong>
+          <a
+            class="break-words underline"
+            href="https://docs.crabnebula.dev/devtools/troubleshoot/broken-connection/#safari-not-supported"
+          >
+            docs.crabnebula.dev/devtools/troubleshoot/broken-connection/#safari-not-supported
+          </a>
+        </strong>
+      </p>
+    </Dialog>
+  );
+}

clients/web/src/views/connect.tsx

@@ -7,7 +7,8 @@ import { checkConnection } from "~/lib/connection/transport";
 import { GithubIcon } from "~/components/icons/github";
 import { ConnectionFailedDialog } from "~/components/dialogs/connection-failed-dialog";
 import { createStore } from "solid-js/store";
-import { createSignal } from "solid-js";
+import { createSignal, DEV, Show } from "solid-js";
+import { SafariNotSupportedDialog } from "~/components/dialogs/safari-not-supported-dialog";
 
 export default function Connect() {
   const navigate = useNavigate();
@@ -134,6 +135,9 @@ export default function Connect() {
         port={connectionStore.port}
         retry={tryToConnect}
       />
+      <Show when={!DEV}>
+        <SafariNotSupportedDialog />
+      </Show>
     </div>
   );
 }