fix: url navigation for mobile was impacted by the recent update

app/components/iframe/IframeContainer.tsx

@@ -381,26 +381,38 @@ const IframeContainer = forwardRef<IframeContainerRef, IframeContainerProps>(
       () => ({
         resetIframe: (urlId: string) => {
           const url = urls[urlId];
-          if (url) {
-            // Get the current isMobile value at call time, not closure time
-            const currentIsMobile = window.matchMedia("(max-width:600px)").matches;
-            let effectiveUrl = getEffectiveUrl(url, currentIsMobile);
-
-            const iframe = document.querySelector(
-              `[data-iframe-id="${urlId}"]`,
-            ) as HTMLIFrameElement;
-            if (iframe) {
-              // Make sure the URL is marked as loaded in the state
-              dispatch({ type: "LOAD_URL", payload: { urlId } });
-
-              // Reset the iframe
-              iframe.src = "about:blank";
-              setTimeout(() => {
-                iframe.src = effectiveUrl;
-                onLoad?.(urlId);
-              }, 100);
-            }
+          if (!url) return;
+
+          // If the URL is already active and loaded, we should only reset it
+          // if the user explicitly wants to refresh the content
+          const iframe = document.querySelector(`[data-iframe-id="${urlId}"]`) as HTMLIFrameElement;
+          if (!iframe) return;
+
+          // Check if the iframe actually has content loaded (not about:blank)
+          const hasContent = iframe.src && iframe.src !== "about:blank";
+
+          // If the iframe is already loaded with content, we should only
+          // reset it if this is an explicit refresh action (e.g., clicking
+          // on an already active URL in the menu)
+          if (hasContent) {
+            // For an already loaded iframe, store the current URL
+            const currentUrl = iframe.src;
+
+            // Reset the iframe
+            iframe.src = "about:blank";
+            setTimeout(() => {
+              iframe.src = currentUrl;
+              onLoad?.(urlId);
+            }, 100);
+          } else {
+            // If the iframe doesn't have content, load it
+            const effectiveUrl = getEffectiveUrl(url, isMobile);
+            iframe.src = effectiveUrl;
+            onLoad?.(urlId);
           }
+
+          // Make sure the URL is marked as loaded in the state
+          dispatch({ type: "LOAD_URL", payload: { urlId } });
         },
         unloadIframe: (urlId: string) => {
           unloadUrl(urlId);

app/components/ui/AddToHomeScreen/AddToMobileFirefox.tsx

@@ -1,6 +1,4 @@
-import Image from "next/image";
-
-import ffIcon from "@/public/icons/firefox-install.png";
+// import ffIcon from "@/public/icons/firefox-install.png";
 import CloseIcon from "@mui/icons-material/Close";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import SouthEastIcon from "@mui/icons-material/SouthEast";
@@ -126,7 +124,7 @@ export default function AddToMobileFirefox(props: Props) {
           </Typography>
           <AddToHomeOption>
             <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
-              <Image src={ffIcon} alt="Firefox install icon" width={32} height={32} />
+              {/* <Image src={ffIcon} alt="Firefox install icon" width={32} height={32} /> */}
               <Typography variant="body1">Install</Typography>
             </Box>
           </AddToHomeOption>

app/components/url-menu/UrlMenu.tsx

@@ -186,8 +186,6 @@ export const UrlMenu = memo(function UrlMenu({
   onUrlSelect,
   iframeContainerRef,
 }: UrlMenuProps) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   const [searchQuery, setSearchQuery] = useState("");
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -209,24 +207,50 @@ export const UrlMenu = memo(function UrlMenu({
     }
   }, [initialUrlId, selectUrl, mounted]);
 
+  // Add this ref at the component level
+  const lastClickRef = useRef<{ time: number; urlId: string }>({ time: 0, urlId: "" });
+
   // Handle URL selection
   const handleUrlClick = useCallback(
     (urlId: string) => {
+      // Add debounce to prevent double-clicks
+      const now = Date.now();
+
+      // If this is a duplicate click within 300ms, ignore it
+      if (now - lastClickRef.current.time < 300 && lastClickRef.current.urlId === urlId) {
+        // console.log("Ignoring duplicate click");
+        return;
+      }
+
+      // Update last click time and URL
+      lastClickRef.current = { time: now, urlId };
+
       const isActive = urlId === activeUrlId;
       const isLoaded = urls[urlId]?.isLoaded ?? false;
 
-      if (isActive) {
-        if (isLoaded && iframeContainerRef?.current) {
-          // If already active and loaded, reset the iframe
+      // console.log(
+      //   isActive ? "active" : "not active",
+      //   isLoaded ? "and loaded" : "but not loaded",
+      //   urlId,
+      // );
+
+      if (isActive && isLoaded) {
+        // console.log("active and loaded - reset it", urlId);
+        // If the URL is already active and loaded, the user is clicking
+        // to refresh the content, so we should reset the iframe
+        if (iframeContainerRef?.current) {
           iframeContainerRef.current.resetIframe(urlId);
-        } else if (!isLoaded && iframeContainerRef?.current) {
-          // If active but not loaded, use reloadUnloadedIframe
+        }
+      } else if (isActive && !isLoaded) {
+        // console.log("active but not loaded - load it", urlId);
+        // If active but not loaded, load it
+        if (iframeContainerRef?.current) {
           iframeContainerRef.current.reloadUnloadedIframe(urlId);
         } else {
-          // Fallback if ref is not available
           selectUrl(urlId);
         }
       } else {
+        // console.log("not active - make it active", urlId);
         // Not active - make it active
         selectUrl(urlId);
       }