feat(electron): multi tabs support (#7440)

use https://www.electronjs.org/docs/latest/api/web-contents-view to serve different tab views
added tabs view manager in electron to handle multi-view actions and events.

fix AF-1111
fix AF-999
fix PD-1459
fix AF-964
PD-1458

packages/frontend/component/src/ui/scrollbar/use-has-scroll-top.tsx

@@ -1,31 +1,27 @@
-import type { RefObject } from 'react';
-import { useEffect, useState } from 'react';
+import { debounce } from 'lodash-es';
+import { useMemo, useState } from 'react';
 
-export function useHasScrollTop(ref: RefObject<HTMLElement> | null) {
+export function useHasScrollTop() {
   const [hasScrollTop, setHasScrollTop] = useState(false);
-
-  useEffect(() => {
-    if (!ref?.current) {
-      return;
-    }
-
-    const container = ref.current;
-
-    function updateScrollTop() {
-      if (container) {
-        setTimeout(() => {
-          const hasScrollTop = container.scrollTop > 0;
-          setHasScrollTop(hasScrollTop);
-        });
-      }
-    }
-
-    container.addEventListener('scroll', updateScrollTop);
-    updateScrollTop();
-    return () => {
-      container.removeEventListener('scroll', updateScrollTop);
+  const containerRefFn = useMemo(() => {
+    let unsub: (() => void) | null = null;
+    return (container: HTMLElement | null) => {
+      unsub?.();
+      const updateScrollTop = debounce(() => {
+        if (container) {
+          setTimeout(() => {
+            const hasScrollTop = container.scrollTop > 0;
+            setHasScrollTop(hasScrollTop);
+          });
+        }
+      }, 50);
+      container?.addEventListener('scroll', updateScrollTop);
+      updateScrollTop();
+      unsub = () => {
+        container?.removeEventListener('scroll', updateScrollTop);
+      };
     };
-  }, [ref]);
+  }, []);
 
-  return hasScrollTop;
+  return [containerRefFn, hasScrollTop] as const;
 }