From 996537d262c53ebe4512ab3b64b275c584ca44c6 Mon Sep 17 00:00:00 2001
From: butterfly <butterfly@bogon.com>
Date: Tue, 30 Apr 2024 11:03:37 +0800
Subject: [PATCH] feat: optiminize modal UE on mobile dev

---
 app/components/Modal/index.tsx                 | 18 +++++++++++++++++-
 app/containers/Chat/components/SessionItem.tsx | 12 ++++++------
 app/containers/Chat/index.tsx                  | 13 +++----------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/app/components/Modal/index.tsx b/app/components/Modal/index.tsx
index b6d328291..a0c5cc351 100644
--- a/app/components/Modal/index.tsx
+++ b/app/components/Modal/index.tsx
@@ -26,6 +26,7 @@ export interface ModalProps {
   headerBordered?: boolean;
   modelClassName?: string;
   onOpen?: (v: boolean) => void;
+  maskCloseble?: boolean;
 }
 
 export interface WarnProps
@@ -70,6 +71,7 @@ const Modal = (props: ModalProps) => {
     headerBordered,
     modelClassName,
     onOpen,
+    maskCloseble = true,
   } = props;
 
   const [open, setOpen] = useState(!!visible);
@@ -121,6 +123,11 @@ const Modal = (props: ModalProps) => {
         <AlertDialog.Overlay
           className="bg-modal-mask fixed inset-0 animate-mask "
           style={{ zIndex: baseZIndex - 1 }}
+          onClick={() => {
+            if (maskCloseble) {
+              handleClose();
+            }
+          }}
         />
         <AlertDialog.Content
           className={`
@@ -128,7 +135,16 @@ const Modal = (props: ModalProps) => {
           `}
           style={{ zIndex: baseZIndex - 1 }}
         >
-          <div className="flex-1">&nbsp;</div>
+          <div
+            className="flex-1"
+            onClick={() => {
+              if (maskCloseble) {
+                handleClose();
+              }
+            }}
+          >
+            &nbsp;
+          </div>
           <div
             className={`flex flex-col flex-0      
               bg-moda-panel text-modal-mask    
diff --git a/app/containers/Chat/components/SessionItem.tsx b/app/containers/Chat/components/SessionItem.tsx
index 54871f652..d93f7235a 100644
--- a/app/containers/Chat/components/SessionItem.tsx
+++ b/app/containers/Chat/components/SessionItem.tsx
@@ -54,12 +54,12 @@ export default function SessionItem(props: {
               }
             `}
           onClick={props.onClick}
-          // ref={(ele) => {
-          //   draggableRef.current = ele;
-          //   provided.innerRef(ele);
-          // }}
-          // {...provided.draggableProps}
-          // {...provided.dragHandleProps}
+          ref={(ele) => {
+            draggableRef.current = ele;
+            provided.innerRef(ele);
+          }}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
           title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
             props.count,
           )}`}
diff --git a/app/containers/Chat/index.tsx b/app/containers/Chat/index.tsx
index 84d5c673c..4d39f1c0d 100644
--- a/app/containers/Chat/index.tsx
+++ b/app/containers/Chat/index.tsx
@@ -97,20 +97,13 @@ export default MenuLayout(function SessionList(props) {
         </div>
       </div>
 
-      <div
-        className={`flex-1 overflow-y-auto max-md:pb-chat-panel-mobile `}
-        // onClick={(e) => {
-        //   if (e.target === e.currentTarget) {
-        //     navigate(Path.Home);
-        //   }
-        // }}
-      >
+      <div className={`flex-1 overflow-y-auto max-md:pb-chat-panel-mobile `}>
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="chat-list">
             {(provided) => (
               <div
-                // ref={provided.innerRef}
-                // {...provided.droppableProps}
+                ref={provided.innerRef}
+                {...provided.droppableProps}
                 className={`w-[100%]`}
               >
                 {sessions.map((item, i) => (