[WEB-5501] refactor: optimize component structures and improve hooks (#8174)

* [WEB-5501] refactor: optimize component structures and improve hooks

- Updated type definitions in AppProvider to use React.ReactNode for children.
- Enhanced HomePeekOverviewsRoot by using MobX observer and integrating issue detail hook.
- Optimized ContentOverflowWrapper to prevent unnecessary re-renders by adjusting useEffect dependencies.
- Updated DashboardQuickLinks to include necessary dependencies in useCallback.
- Refactored GlobalShortcutsProvider to utilize refs for context and handler management, improving performance.
- Changed useCurrentTime to update every minute instead of every second.
- Refactored outside click hooks to use useCallback for better performance.
- Improved IntercomProvider and PostHogProvider to prevent multiple initializations using refs.

* refactor: simplify conditional rendering in HomePeekOverviewsRoot component

* refactor: improve outside click detection in sidebar and peek overview hooks

* refactor: enhance IntercomProvider and PostHogProvider with hydration state management

apps/web/core/hooks/use-peek-overview-outside-click.tsx

@@ -1,42 +1,44 @@
 import type React from "react";
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
 
 const usePeekOverviewOutsideClickDetector = (
   ref: React.RefObject<HTMLElement>,
   callback: () => void,
   issueId: string
 ) => {
-  const handleClick = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      // check for the closest element with attribute name data-prevent-outside-click
-      const preventOutsideClickElement = (event.target as HTMLElement | undefined)?.closest(
-        "[data-prevent-outside-click]"
-      );
-      // if the closest element with attribute name data-prevent-outside-click is found, return
-      if (preventOutsideClickElement) {
-        return;
-      }
-      // check if the click target is the current issue element or its children
-      let targetElement = event.target as HTMLElement | null;
-      while (targetElement) {
-        if (targetElement.id === `issue-${issueId}`) {
-          // if the click target is the current issue element, return
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      if (!(event.target instanceof HTMLElement)) return;
+      if (ref.current && !ref.current.contains(event.target)) {
+        // check for the closest element with attribute name data-prevent-outside-click
+        const preventOutsideClickElement = event.target.closest("[data-prevent-outside-click]");
+        // if the closest element with attribute name data-prevent-outside-click is found, return
+        if (preventOutsideClickElement) {
           return;
         }
-        targetElement = targetElement.parentElement;
+        // check if the click target is the current issue element or its children
+        let targetElement: HTMLElement | null = event.target;
+        while (targetElement) {
+          if (targetElement.id === `issue-${issueId}`) {
+            // if the click target is the current issue element, return
+            return;
+          }
+          targetElement = targetElement.parentElement;
+        }
+        const delayOutsideClickElement = event.target.closest("[data-delay-outside-click]");
+        if (delayOutsideClickElement) {
+          // if the click target is the closest element with attribute name data-delay-outside-click, delay the callback
+          setTimeout(() => {
+            callback();
+          }, 0);
+          return;
+        }
+        // else, call the callback immediately
+        callback();
       }
-      const delayOutsideClickElement = (event.target as HTMLElement | undefined)?.closest("[data-delay-outside-click]");
-      if (delayOutsideClickElement) {
-        // if the click target is the closest element with attribute name data-delay-outside-click, delay the callback
-        setTimeout(() => {
-          callback();
-        }, 0);
-        return;
-      }
-      // else, call the callback immediately
-      callback();
-    }
-  };
+    },
+    [ref, callback, issueId]
+  );
 
   useEffect(() => {
     document.addEventListener("mousedown", handleClick);
@@ -44,7 +46,7 @@ const usePeekOverviewOutsideClickDetector = (
     return () => {
       document.removeEventListener("mousedown", handleClick);
     };
-  });
+  }, [handleClick]);
 };
 
 export default usePeekOverviewOutsideClickDetector;