feat: maskpage&newchatpage adapt new ui framework done

app/hooks/useListenWinResize.ts

@@ -10,7 +10,6 @@ import {
   MIN_SIDEBAR_WIDTH,
 } from "@/app/constant";
 import { useAppConfig } from "../store/config";
-import { useReducer, useState } from "react";
 
 export const MOBILE_MAX_WIDTH = 768;
 
@@ -25,8 +24,6 @@ const widths = [
 export default function useListenWinResize() {
   const config = useAppConfig();
 
-  const [_, refresh] = useReducer((x) => x + 1, 0);
-
   useWindowSize((size) => {
     let nextSidebar = config.sidebarWidth;
     if (!nextSidebar) {
@@ -56,6 +53,5 @@ export default function useListenWinResize() {
     config.update((config) => {
       config.sidebarWidth = nextSidebar;
     });
-    refresh();
   });
 }

app/hooks/useMobileScreen.ts

@@ -1,16 +1,9 @@
 import { useWindowSize } from "@/app/hooks/useWindowSize";
-import { useRef } from "react";
 
 export const MOBILE_MAX_WIDTH = 768;
 
 export default function useMobileScreen() {
-  const widthRef = useRef<number>(0);
+  const { width } = useWindowSize();
 
-  useWindowSize((size) => {
-    widthRef.current = size.width;
-  });
-
-  const isMobile = widthRef.current <= MOBILE_MAX_WIDTH;
-
-  return isMobile;
+  return width <= MOBILE_MAX_WIDTH;
 }

app/hooks/useScrollToBottom.ts

@@ -10,9 +10,13 @@ export default function useScrollToBottom(
       ) <= 1
     : false;
 
-  const initScrolled = useRef(false);
   // for auto-scroll
   const [autoScroll, setAutoScroll] = useState(true);
+
+  const autoScrollRef = useRef<typeof autoScroll>();
+
+  autoScrollRef.current = autoScroll;
+
   function scrollDomToBottom() {
     const dom = scrollRef.current;
     if (dom) {
@@ -23,13 +27,30 @@ export default function useScrollToBottom(
     }
   }
 
+  // useEffect(() => {
+  //   const dom = scrollRef.current;
+  //   if (dom) {
+  //     dom.ontouchstart = (e) => {
+  //       const autoScroll = autoScrollRef.current;
+  //       if (autoScroll) {
+  //         setAutoScroll(false);
+  //       }
+  //     }
+  //     dom.onscroll = (e) => {
+  //       const autoScroll = autoScrollRef.current;
+  //       if (autoScroll) {
+  //         setAutoScroll(false);
+  //       }
+  //     }
+  //   }
+  // }, []);
+
   // auto scroll
   useEffect(() => {
-    if (autoScroll && !detach && !initScrolled.current) {
+    if (autoScroll && !detach) {
       scrollDomToBottom();
-      initScrolled.current = true;
     }
-  }, [autoScroll, detach]);
+  });
 
   return {
     scrollRef,

app/hooks/useWindowSize.ts

@@ -1,26 +1,35 @@
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 
 type Size = {
   width: number;
   height: number;
 };
 
-export function useWindowSize(callback: (size: Size) => void) {
+export function useWindowSize(callback?: (size: Size) => void) {
   const callbackRef = useRef<typeof callback>();
 
   callbackRef.current = callback;
 
+  const [size, setSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
   useLayoutEffect(() => {
     const onResize = () => {
       callbackRef.current?.({
         width: window.innerWidth,
         height: window.innerHeight,
       });
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
     };
 
     window.addEventListener("resize", onResize);
 
-    callback({
+    callback?.({
       width: window.innerWidth,
       height: window.innerHeight,
     });
@@ -29,4 +38,6 @@ export function useWindowSize(callback: (size: Size) => void) {
       window.removeEventListener("resize", onResize);
     };
   }, []);
+
+  return size;
 }