refactor(core): use element atom (#4026)

packages/hooks/package.json

@@ -6,7 +6,8 @@
   },
   "private": true,
   "dependencies": {
-    "foxact": "^0.2.20"
+    "foxact": "^0.2.20",
+    "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {
     "@affine/env": "workspace:*",
@@ -16,7 +17,8 @@
     "@blocksuite/editor": "0.0.0-20230828163942-e5356e86-nightly",
     "@blocksuite/global": "0.0.0-20230828163942-e5356e86-nightly",
     "@blocksuite/lit": "0.0.0-20230828163942-e5356e86-nightly",
-    "@blocksuite/store": "0.0.0-20230828163942-e5356e86-nightly"
+    "@blocksuite/store": "0.0.0-20230828163942-e5356e86-nightly",
+    "@types/lodash.debounce": "^4.0.7"
   },
   "peerDependencies": {
     "@affine/y-provider": "workspace:*",

packages/hooks/src/use-is-tiny-screen.ts

@@ -0,0 +1,86 @@
+import 'foxact/use-debounced-state';
+
+import debounce from 'lodash.debounce';
+import { type RefObject, useEffect, useState } from 'react';
+
+export function useIsTinyScreen({
+  mainContainer,
+  leftStatic,
+  leftSlot,
+  centerDom,
+  rightStatic,
+  rightSlot,
+}: {
+  mainContainer: HTMLElement | null;
+  leftStatic: RefObject<HTMLElement>;
+  leftSlot: RefObject<HTMLElement>[];
+  centerDom: RefObject<HTMLElement>;
+  rightStatic: RefObject<HTMLElement>;
+  rightSlot: RefObject<HTMLElement>[];
+}) {
+  const [isTinyScreen, setIsTinyScreen] = useState(false);
+
+  useEffect(() => {
+    if (!mainContainer) {
+      return;
+    }
+    const handleResize = debounce(() => {
+      if (!centerDom.current) {
+        return;
+      }
+      const leftStaticWidth = leftStatic.current?.clientWidth || 0;
+      const leftSlotWidth = leftSlot.reduce((accWidth, dom) => {
+        return accWidth + (dom.current?.clientWidth || 0);
+      }, 0);
+
+      const rightStaticWidth = rightStatic.current?.clientWidth || 0;
+
+      const rightSlotWidth = rightSlot.reduce((accWidth, dom) => {
+        return accWidth + (dom.current?.clientWidth || 0);
+      }, 0);
+
+      if (!leftSlotWidth && !rightSlotWidth) {
+        if (isTinyScreen) {
+          setIsTinyScreen(false);
+        }
+        return;
+      }
+
+      const containerRect = mainContainer.getBoundingClientRect();
+      const centerRect = centerDom.current.getBoundingClientRect();
+
+      if (
+        leftStaticWidth + leftSlotWidth + containerRect.left >=
+          centerRect.left ||
+        containerRect.right - centerRect.right <=
+          rightSlotWidth + rightStaticWidth
+      ) {
+        setIsTinyScreen(true);
+      } else {
+        setIsTinyScreen(false);
+      }
+    }, 100);
+
+    handleResize();
+
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize();
+    });
+
+    resizeObserver.observe(mainContainer);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [
+    centerDom,
+    isTinyScreen,
+    leftSlot,
+    leftStatic,
+    mainContainer,
+    rightSlot,
+    rightStatic,
+  ]);
+
+  return isTinyScreen;
+}