refactor: use useResizeObserver hook from usehooks-ts (#2346)

- Refactor useScrollState in body/index.tsx to use useResizeObserver with onResize callback
- Refactor ProfileSection in sidebar/profile/index.tsx to use useResizeObserver with onResize callback
- Remove manual ResizeObserver instantiation in favor of the hook

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: yujonglee <[email protected]>

Author: devin-ai-integration[bot]

apps/desktop/src/components/main/body/index.tsx

@@ -564,18 +564,20 @@ function useScrollState(
     });
   }, [ref]);
 
+  useResizeObserver({
+    ref: ref as React.RefObject<HTMLDivElement>,
+    onResize: updateScrollState,
+  });
+
   useEffect(() => {
     const container = ref.current;
     if (!container) return;
 
     updateScrollState();
     container.addEventListener("scroll", updateScrollState);
-    const resizeObserver = new ResizeObserver(updateScrollState);
-    resizeObserver.observe(container);
 
     return () => {
       container.removeEventListener("scroll", updateScrollState);
-      resizeObserver.disconnect();
     };
   }, [updateScrollState, ...deps]);
 

apps/desktop/src/components/main/sidebar/profile/index.tsx

@@ -10,13 +10,8 @@ import {
   UsersIcon,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useResizeObserver } from "usehooks-ts";
 
 import { Kbd, KbdGroup } from "@hypr/ui/components/ui/kbd";
 import { cn } from "@hypr/utils";
@@ -69,35 +64,22 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
     }
   }, [isExpanded]);
 
-  useLayoutEffect(() => {
-    if (!isExpanded || currentView !== "main") {
-      return;
-    }
-
-    const element = mainViewRef.current;
-    if (!element) {
-      return;
-    }
-
-    const updateHeight = () => {
-      const height = element.getBoundingClientRect().height;
-      if (height > 0) {
+  const handleMainViewResize = useCallback(
+    ({ height }: { width?: number; height?: number }) => {
+      if (!isExpanded || currentView !== "main") {
+        return;
+      }
+      if (height && height > 0) {
         setMainViewHeight(height);
       }
-    };
-
-    updateHeight();
-
-    const observer = new ResizeObserver(() => {
-      updateHeight();
-    });
-
-    observer.observe(element);
+    },
+    [isExpanded, currentView],
+  );
 
-    return () => {
-      observer.disconnect();
-    };
-  }, [isExpanded, currentView, isAuthenticated]);
+  useResizeObserver({
+    ref: mainViewRef as React.RefObject<HTMLDivElement>,
+    onResize: handleMainViewResize,
+  });
 
   const profileRef = useAutoCloser(closeMenu, {
     esc: isExpanded,