feat: 首页增加用户名

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>
   );
 });