From 62fee3ed00f91196ae98c39058ab6ac53975168b Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 25 Sep 2021 15:07:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../routes/Main/Content/Personal/Sidebar.tsx  | 60 ++++++++++---------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/web/src/routes/Main/Content/Personal/Sidebar.tsx b/web/src/routes/Main/Content/Personal/Sidebar.tsx
index 496041eb..da469d7e 100644
--- a/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Personal/Sidebar.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Icon } from '@iconify/react';
 import { SidebarItem } from '../SidebarItem';
-import { t, useDMConverseList } from 'tailchat-shared';
+import { t, useDMConverseList, useUserInfo } from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';
 import { openModal } from '@/components/Modal';
 import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
 import DevContainer from '@/components/DevContainer';
+import { SectionHeader } from '@/components/SectionHeader';
 
 const SidebarSection: React.FC<{
   action: React.ReactNode;
@@ -28,36 +29,39 @@ SidebarSection.displayName = 'SidebarSection';
  */
 export const PersonalSidebar: React.FC = React.memo(() => {
   const converseList = useDMConverseList();
+  const userInfo = useUserInfo();
 
   return (
-    <div className="p-2">
-      <SidebarItem
-        name={t('好友')}
-        icon={<Icon icon="mdi:account-multiple" />}
-        to="/main/personal/friends"
-      />
-      <SidebarItem
-        name={t('插件中心')}
-        icon={<Icon icon="mdi:puzzle" />}
-        to="/main/personal/plugins"
-      />
+    <div>
+      <SectionHeader>{userInfo?.nickname}</SectionHeader>
 
-      <SidebarSection
-        action={
-          <DevContainer>
-            <Icon
-              icon="mdi:plus"
-              onClick={() => openModal(<CreateDMConverse />)}
-            />
-          </DevContainer>
-        }
-      >
-        {t('私信')}
-      </SidebarSection>
-
-      {converseList.map((converse) => {
-        return <SidebarDMItem key={converse._id} converse={converse} />;
-      })}
+      <div className="p-2">
+        <SidebarItem
+          name={t('好友')}
+          icon={<Icon icon="mdi:account-multiple" />}
+          to="/main/personal/friends"
+        />
+        <SidebarItem
+          name={t('插件中心')}
+          icon={<Icon icon="mdi:puzzle" />}
+          to="/main/personal/plugins"
+        />
+        <SidebarSection
+          action={
+            <DevContainer>
+              <Icon
+                icon="mdi:plus"
+                onClick={() => openModal(<CreateDMConverse />)}
+              />
+            </DevContainer>
+          }
+        >
+          {t('私信')}
+        </SidebarSection>
+        {converseList.map((converse) => {
+          return <SidebarDMItem key={converse._id} converse={converse} />;
+        })}
+      </div>
     </div>
   );
 });