chore: continue new layout

src/routes/chat/index.js

@@ -7,7 +7,7 @@ import { AiOutlineCaretDown } from "react-icons/ai";
 
 import StyledWrapper from "./styled";
 import AddIcon from "../../assets/icons/add.svg";
-import Search from "../../common/component/Search";
+import Server from "../../common/component/Server";
 import Tooltip from "../../common/component/Tooltip";
 // import Contact from "../../common/component/Contact";
 import CurrentUser from "../../common/component/CurrentUser";
@@ -53,7 +53,7 @@ export default function ChatPage() {
       )}
       <StyledWrapper>
         <div className="left">
-          <Search />
+          <Server />
           <div className="list channels">
             <h3 className="title">
               <span className="txt" onClick={handleToggleExpand}>

src/routes/chat/styled.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
-  padding: 12px 48px 10px 0;
+  padding: 8px 48px 10px 0;
   > .left {
     background-color: #fff;
     position: relative;

src/routes/contacts/styled.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
-  padding: 12px 48px 10px 0;
+  padding: 8px 48px 10px 0;
   > .left {
     border-radius: 16px 0 0 16px;
     background-color: #fff;

src/routes/home/User.js

@@ -0,0 +1,27 @@
+// import React from 'react';
+import styled from "styled-components";
+import Avatar from "../../common/component/Avatar";
+import { useSelector } from "react-redux";
+const StyledWrapper = styled.div`
+  padding: 10px 12px;
+  .avatar {
+    width: 32px;
+    height: 32px;
+    img {
+      border-radius: 50%;
+      width: 100%;
+      height: 100%;
+    }
+  }
+`;
+export default function ServerDropList({ uid = null }) {
+  const user = useSelector((store) => store.contacts.byId[uid]);
+  if (!user) return null;
+  return (
+    <StyledWrapper>
+      <div className="avatar">
+        <Avatar url={user.avatar} name={user.name} />
+      </div>
+    </StyledWrapper>
+  );
+}

src/routes/home/index.js

@@ -3,7 +3,7 @@
 import { Outlet, NavLink, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 import StyledWrapper from "./styled";
-import ServerDropList from "./ServerDropList";
+import User from "./User";
 // import Tools from "./Tools";
 import Loading from "./Loading";
 import Menu from "./Menu";
@@ -18,10 +18,12 @@ import FolderIcon from "../../assets/icons/folder.svg?url";
 export default function HomePage() {
   const { pathname } = useLocation();
   const {
+    loginUid,
     ui: { ready },
   } = useSelector((store) => {
     return {
       ui: store.ui,
+      loginUid: store.authData.uid,
     };
   });
   const { data, loading } = usePreload();
@@ -43,11 +45,7 @@ export default function HomePage() {
       <Notification />
       <StyledWrapper>
         <div className={`col left`}>
-          <ServerDropList
-            data={data?.server}
-            memberCount={data.contacts?.length}
-            expand={false}
-          />
+          <User uid={loginUid} />
           <nav className="nav">
             <NavLink className="link" to={"/chat"}>
               <Tooltip tip="Chat">

src/routes/resources/styled.js

@@ -5,7 +5,9 @@ const Styled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-
+  background-color: #fff;
+  margin: 8px 24px 10px 0;
+  border-radius: 16px;
   .opts {
     padding: 20px 16px;
     display: flex;