feat: let users dismiss blocking error in unsupported browsers (#5158)

Ref #1818

Users want to use builder in safari and firefox even though we don't
officially support them. So we will let users dismiss blocking error.

<img width="522" alt="image"
src="https://github.com/user-attachments/assets/4871fb06-38c9-41b9-8595-0d01a62b9f20"
/>

Author: TrySound

apps/builder/app/builder/features/blocking-alerts/alert.tsx

@@ -1,5 +1,8 @@
+import { atom } from "nanostores";
+import { useStore } from "@nanostores/react";
 import type { ReactNode } from "react";
 import {
+  Button,
   css,
   Flex,
   Popover,
@@ -23,7 +26,19 @@ const contentStyle = css({
   color: theme.colors.foregroundDestructive,
 });
 
-export const Alert = ({ message }: { message: string | ReactNode }) => {
+const $isAlertDismissed = atom(false);
+
+export const Alert = ({
+  message,
+  isDismissable,
+}: {
+  message: string | ReactNode;
+  isDismissable?: boolean;
+}) => {
+  const isAlertDismissed = useStore($isAlertDismissed);
+  if (isAlertDismissed) {
+    return;
+  }
   return (
     <Popover open>
       <PopoverContent css={{ zIndex: theme.zIndices.max }}>
@@ -38,6 +53,14 @@ export const Alert = ({ message }: { message: string | ReactNode }) => {
             <Text color="contrast" align="center">
               {message}
             </Text>
+            {isDismissable && (
+              <Button
+                color="destructive"
+                onClick={() => $isAlertDismissed.set(true)}
+              >
+                Dismiss
+              </Button>
+            )}
           </Flex>
         </Flex>
       </PopoverContent>

apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx

@@ -93,8 +93,9 @@ export const BlockingAlerts = () => {
   const isPreviewMode = useStore($isPreviewMode);
   const loadingState = useStore($loadingState);
 
+  const unsupportedBrowsersMessage = useUnsupportedBrowser();
   // Takes the latest message, order matters
-  const message = [useTooSmallMessage(), useUnsupportedBrowser()]
+  const message = [useTooSmallMessage(), unsupportedBrowsersMessage]
     .filter(Boolean)
     .pop();
 
@@ -107,5 +108,10 @@ export const BlockingAlerts = () => {
     return;
   }
 
-  return <Alert message={message} />;
+  return (
+    <Alert
+      message={message}
+      isDismissable={unsupportedBrowsersMessage !== undefined}
+    />
+  );
 };