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">
+    <div>
-      <SidebarItem
+      <SectionHeader>{userInfo?.nickname}</SectionHeader>
-        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
+      <div className="p-2">
-        action={
+        <SidebarItem
-          <DevContainer>
+          name={t('好友')}
-            <Icon
+          icon={<Icon icon="mdi:account-multiple" />}
-              icon="mdi:plus"
+          to="/main/personal/friends"
-              onClick={() => openModal(<CreateDMConverse />)}
+        />
-            />
+        <SidebarItem
-          </DevContainer>
+          name={t('插件中心')}
-        }
+          icon={<Icon icon="mdi:puzzle" />}
-      >
+          to="/main/personal/plugins"
-        {t('私信')}
+        />
-      </SidebarSection>
+        <SidebarSection
-
+          action={
-      {converseList.map((converse) => {
+            <DevContainer>
-        return <SidebarDMItem key={converse._id} converse={converse} />;
+              <Icon
-      })}
+                icon="mdi:plus"
+                onClick={() => openModal(<CreateDMConverse />)}
+              />
+            </DevContainer>
+          }
+        >
+          {t('私信')}
+        </SidebarSection>
+        {converseList.map((converse) => {
+          return <SidebarDMItem key={converse._id} converse={converse} />;
+        })}
+      </div>
     </div>
   );
 });