feat: session list responsive

src/assets/icons/list.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6H21M8 12H21M8 18H21M3 6H3.01M3 12H3.01M3 18H3.01" stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/common/component/Message/styled.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 const StyledMsg = styled.div`
+width: 100%;
   position: relative;
   display: flex;
   align-items: flex-start;

src/common/component/MixedInput/index.tsx

@@ -19,7 +19,6 @@ import {
 import { createComboboxPlugin } from "@udecode/plate-combobox";
 import { ReactEditor } from "slate-react";
 import useUploadFile from "../../hook/useUploadFile";
-import Styled from "./styled";
 import { CONFIG } from "./config";
 import User from "../User";
 import { useAppSelector } from "../../../app/store";
@@ -56,12 +55,12 @@ const Plugins: FC<Props> = ({
   const editableRef = useRef(null);
   const initialProps = {
     ...CONFIG.editableProps,
-    className: "box",
+    className: "flex flex-col gap-2",
     placeholder
   };
   const plateEditor = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${id}`);
   useEffect(() => {
-    const handlePasteEvent = (evt: ClipboardEvent) => {
+    const handlePasteEvent = (evt: ClipboardEvent<Window>) => {
       const files = [...evt.clipboardData.files];
       if (files.length) {
         const filesData = files.map((file) => {
@@ -80,7 +79,6 @@ const Plugins: FC<Props> = ({
       //   updateDraft(plateEditor.children);
       // }
     };
-    // window.addEventListener("paste")
   }, [id, updateDraft]);
 
   useKey(
@@ -117,21 +115,21 @@ const Plugins: FC<Props> = ({
   const plugins = createPlugins(
     enableMentions
       ? pluginArr.concat([
-          createComboboxPlugin(),
+        createComboboxPlugin(),
-          createMentionPlugin({
+        createMentionPlugin({
-            options: {
+          options: {
-              createMentionNode: (item) => {
+            createMentionNode: (item) => {
-                // console.log("mention", item);
+              // console.log("mention", item);
-                const {
+              const {
-                  text,
+                text,
-                  data: { uid }
+                data: { uid }
-                } = item;
+              } = item;
-                return { value: `@${text}`, uid };
+              return { value: `@${text}`, uid };
-              },
+            },
-              insertSpaceAfterMention: true
+            insertSpaceAfterMention: true
-            }
+          }
-          })
+        })
-        ])
+      ])
       : pluginArr,
     {
       components
@@ -174,12 +172,12 @@ const Plugins: FC<Props> = ({
       const arr = tmps.map((tmp) => {
         return Array.isArray(tmp)
           ? {
-              type: "text",
+            type: "text",
-              content: tmp.map((t) => t.content).join("\n"),
+            content: tmp.map((t) => t.content).join("\n"),
-              properties: {
+            properties: {
-                mentions: tmp.map((t) => t.properties?.mentions || []).flat()
+              mentions: tmp.map((t) => t.properties?.mentions || []).flat()
-              }
             }
+          }
           : tmp;
       });
       const msgs = arr.filter(({ content }) => !!content);
@@ -188,8 +186,9 @@ const Plugins: FC<Props> = ({
     [msgs]
   );
 
+
   return (
-    <Styled className="input" ref={editableRef}>
+    <div className="input max-h-[50vh] overflow-auto text-sm text-gray-600" ref={editableRef}>
       <Plate
         id={`${TEXT_EDITOR_PREFIX}_${id}`}
         onChange={handleChange}
@@ -222,7 +221,7 @@ const Plugins: FC<Props> = ({
           />
         ) : null}
       </Plate>
-    </Styled>
+    </div>
   );
 };
 

src/common/component/MixedInput/styled.ts

@@ -1,20 +0,0 @@
-import styled from "styled-components";
-
-const Styled = styled.div`
-  max-height: 50vh;
-  overflow: auto;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
-  color: #475467;
-  > .box {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    p {
-      padding: 0;
-    }
-  }
-`;
-
-export default Styled;

src/common/component/Send/Toolbar.tsx

@@ -1,5 +1,4 @@
 import { ChangeEvent, useRef, FC } from "react";
-import styled from "styled-components";
 import Tooltip from "../Tooltip";
 import AddIcon from "../../../assets/icons/add.solid.svg";
 import MarkdownIcon from "../../../assets/icons/markdown.svg";
@@ -8,41 +7,6 @@ import ExitFullscreenIcon from "../../../assets/icons/fullscreen.exit.svg";
 import useUploadFile from "../../hook/useUploadFile";
 import { useTranslation } from "react-i18next";
 
-const Styled = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-  &.markdown .add {
-    display: none;
-  }
-  .md {
-    cursor: pointer;
-    display: flex;
-    gap: 14px;
-    .markdown path {
-      fill: #22ccee;
-    }
-  }
-  .add {
-    cursor: pointer;
-    position: relative;
-    width: 24px;
-    height: 24px;
-    label {
-      opacity: 0;
-      cursor: pointer;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      input {
-        display: none;
-      }
-    }
-  }
-`;
 type Props = {
   toggleMarkdownFullscreen: () => void;
   fullscreen: boolean;
@@ -79,13 +43,14 @@ const Toolbar: FC<Props> = ({
     // setFiles([...evt.target.files]);
   };
 
+  const isMarkdown = mode == 'markdown';
   return (
-    <Styled className={mode}>
+    <div className={`flex flex-col items-center justify-end gap-2.5 md:flex-row`}>
-      <div className="md">
+      <div className="cursor-pointer flex gap-3.5">
         <Tooltip placement="top" tip="Markdown">
-          <MarkdownIcon className={mode} onClick={toggleMode} />
+          <MarkdownIcon className="fill-[#22ccee]" onClick={toggleMode} />
         </Tooltip>
-        {mode == "markdown" &&
+        {isMarkdown &&
           (fullscreen ? (
             <Tooltip placement="top" tip="Exit Fullscreen">
               <ExitFullscreenIcon onClick={toggleMarkdownFullscreen} />
@@ -96,11 +61,12 @@ const Toolbar: FC<Props> = ({
             </Tooltip>
           ))}
       </div>
-      <Tooltip placement="top" tip={t("action.upload")}>
+      {!isMarkdown && <Tooltip placement="top" tip={t("action.upload")}>
-        <div className="add">
+        <div className="cursor-pointer relative w-6 h-6">
           <AddIcon />
-          <label htmlFor="file">
+          <label htmlFor="file" className=" cursor-pointer absolute left-0 top-0 w-full h-full opacity-0">
             <input
+              className="hidden"
               size={24}
               ref={fileInputRef}
               multiple={true}
@@ -111,8 +77,8 @@ const Toolbar: FC<Props> = ({
             />
           </label>
         </div>
-      </Tooltip>
+      </Tooltip>}
-    </Styled>
+    </div>
   );
 };
 export default Toolbar;

src/routes/404/index.tsx

@@ -1,5 +1,4 @@
-import StyledWrapper from "./styled";
 
 export default function NotFoundPage() {
-  return <StyledWrapper>404 page</StyledWrapper>;
+  return <div>404 page</div>;
 }

src/routes/404/styled.tsx

@@ -1,7 +0,0 @@
-import styled from "styled-components";
-
-const StyledWrapper = styled.div`
-  display: flex;
-`;
-
-export default StyledWrapper;

src/routes/callback/index.tsx

@@ -1,7 +1,14 @@
+import { DOMAttributes, ReactNode } from "react";
 import { useParams } from "react-router-dom";
 import PaymentSuccess from "./PaymentSuccess";
 import GithubCallback, { GithubLoginSource } from "./GithubCallback";
-import StyledWrapper from "./styled";
+
+const StyledWrapper = ({ children }: DOMAttributes<HTMLDivElement> & { children?: ReactNode }) => {
+
+  return <div className="flex-center w-screen h-screen break-words leading-normal">
+    {children}
+  </div>;
+};
 // type Props = {
 //   type: "payment_success";
 // };

src/routes/callback/styled.tsx

@@ -1,10 +0,0 @@
-import { DOMAttributes, ReactNode } from "react";
-
-const StyledWrapper = ({ children }: DOMAttributes<HTMLDivElement> & { children?: ReactNode }) => {
-
-  return <div className="flex-center w-screen h-screen break-words leading-normal">
-    {children}
-  </div>;
-};
-
-export default StyledWrapper;

src/routes/chat/Layout/index.tsx

@@ -123,8 +123,8 @@ const Layout: FC<Props> = ({
               {selects && <Operations context={context} id={to} />}
             </div>
           </div>
-          {users && <div className="members">{users}</div>}
+          {users && <div className="members hidden md:block">{users}</div>}
-          {aside && <div className="aside">{aside}</div>}
+          {aside && <div className="aside !hidden md:!block">{aside}</div>}
         </main>
         {!readonly && isActive && (
           <DnDTip context={context} name={name} />

src/routes/chat/index.tsx

@@ -1,5 +1,6 @@
 import { memo, useState } from "react";
 import { useParams } from "react-router-dom";
+import clsx from "clsx";
 import StyledWrapper from "./styled";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
 import Server from "../../common/component/Server";
@@ -12,7 +13,9 @@ import { useAppSelector } from "../../app/store";
 import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
 import GuestChannelChat from "./GuestChannelChat";
 import GuestSessionList from "./GuestSessionList";
+import IconList from '../../assets/icons/list.svg';
 function ChatPage() {
+  const [sessionListVisible, setSessionListVisible] = useState(false);
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [usersModalVisible, setUsersModalVisible] = useState(false);
   const { channel_id = 0, user_id = 0 } = useParams();
@@ -28,6 +31,9 @@ function ChatPage() {
   const toggleChannelModalVisible = () => {
     setChannelModalVisible((prev) => !prev);
   };
+  const toggleSessionList = () => {
+    setSessionListVisible(prev => !prev);
+  };
   const tmpSession =
     sessionUids.findIndex((i) => i == user_id) > -1
       ? undefined
@@ -45,10 +51,13 @@ function ChatPage() {
         <ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
       )}
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
-      <StyledWrapper className={isGuest ? "guest" : ""}>
+      <StyledWrapper className={`${isGuest ? "!pr-1" : ""} md:!pr-12`}>
-        <div className="left hidden md:flex">
+        <div className={clsx("left !fixed top-0 left-0 z-40 transition-all md:!relative md:translate-x-0 md:overflow-auto", sessionListVisible ? "translate-x-0" : "-translate-x-full")}>
           <Server readonly={isGuest} />
           {isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
+          <button className="absolute top-1/2 -right-[24px] z-50 p-2 rounded-full bg-slate-300/80 md:hidden" onClick={toggleSessionList}>
+            <IconList />
+          </button>
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && (isGuest ? <GuestBlankPlaceholder /> : <BlankPlaceholder />)}

src/routes/chat/styled.tsx

@@ -2,10 +2,9 @@ import styled from "styled-components";
 const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
-  padding: 8px 48px 10px 0;
+  padding-top: 8px;
-  &.guest {
+  padding-bottom: 10px;
-    padding-right: 0;
+  padding-right: 4px;
-  }
   > .left {
     background-color: #fff;
     position: relative;
@@ -14,7 +13,7 @@ const StyledWrapper = styled.div`
     min-width: 268px;
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
     height: 100%;
-    overflow: auto;
+    /* overflow: auto; */
     border-radius: 16px 0 0 16px;
     .list {
       margin: 12px 8px;

src/routes/chat/utils.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import dayjs from "dayjs";
-import styled from "styled-components";
 import { useDispatch } from "react-redux";
 import { isImage } from "../../common/utils";
 import { ContentTypes } from "../../app/config";
@@ -86,38 +85,6 @@ export const renderPreviewMessage = (message = null) => {
   }
   return res;
 };
-const StyledWrapper = styled.div`
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  > .overlay {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-  > .check {
-    display: none;
-    margin-top: 18px;
-    margin-left: 8px;
-  }
-  > .message {
-    flex: 1;
-  }
-  &.select {
-    &:hover {
-      border-radius: var(--br);
-      background: #f5f6f7;
-    }
-    > .check {
-      display: block;
-    }
-  }
-`;
 
 const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...rest }) => {
   const dispatch = useDispatch();
@@ -129,13 +96,13 @@ const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...res
     dispatch(updateSelectMessages({ context, id, operation, data: mid }));
   };
   return (
-    <StyledWrapper className={selectMode ? "select" : ""} {...rest}>
+    <div className={`flex items-start gap-2 relative w-full ${selectMode ? "hover:bg-slate-100" : ""}`} {...rest}>
-      <Checkbox className="check" checked={selected} />
+      {selectMode && <Checkbox className="!mt-4 !ml-2" checked={selected} />}
       {children}
       {selectMode && (
-        <div className="overlay" onClick={selectMode ? toggleSelect : undefined}></div>
+        <div className="absolute left-0 top-0 w-full h-full cursor-pointer" onClick={selectMode ? toggleSelect : undefined}></div>
       )}
-    </StyledWrapper>
+    </div>
   );
 };
 type Params = {