ai: hooks: Refactor isMobile logic.

hooks/use-mobile.ts

@@ -1,21 +1,70 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: MIT
+//
+
 import * as React from "react";
 
 const MOBILE_BREAKPOINT = 768;
 
-export function useIsMobile() {
+export function useIsMobile(breakpoint: number = MOBILE_BREAKPOINT) {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
     undefined,
   );
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const mediaQuery = `(max-width: ${breakpoint - 1}px)`;
+    
+    const getIsMobile = () => window.innerWidth < breakpoint;
+
+    const updateIsMobile = () => {
+      setIsMobile(getIsMobile());
+    };
+
+    let mql: MediaQueryList | null = null;
+    let rafId: number | null = null;
+
+    mql = window.matchMedia(mediaQuery);
+    
+    const debouncedUpdate = () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(updateIsMobile);
+    };
+
+    if (mql.addEventListener) {
+      mql.addEventListener("change", debouncedUpdate);
+    } else if (mql.addListener) {
+      mql.addListener(debouncedUpdate);
+    }
+
+    window.addEventListener("resize", debouncedUpdate);
+    window.addEventListener("orientationchange", debouncedUpdate);
+
+    updateIsMobile();
+
+    return () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      
+      if (mql) {
+        if (mql.removeEventListener) {
+          mql.removeEventListener("change", debouncedUpdate);
+        } else if (mql.removeListener) {
+          mql.removeListener(debouncedUpdate);
+        }
+      }
+
+      window.removeEventListener("resize", debouncedUpdate);
+      window.removeEventListener("orientationchange", debouncedUpdate);
     };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
+  }, [breakpoint]);
 
-  return !!isMobile;
+  return typeof isMobile === "boolean" ? isMobile : false;
 }