style(sns): move friends count to contact header

src/components/Sns/SnsFilterPanel.tsx

@@ -22,6 +22,7 @@ interface SnsFilterPanelProps {
     setSearchKeyword: (val: string) => void
     jumpTargetDate?: Date
     setJumpTargetDate: (date?: Date) => void
+    totalFriendsLabel?: string
     selectedUsernames: string[]
     setSelectedUsernames: (val: string[]) => void
     contacts: Contact[]
@@ -36,6 +37,7 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
     setSearchKeyword,
     jumpTargetDate,
     setJumpTargetDate,
+    totalFriendsLabel,
     selectedUsernames,
     setSelectedUsernames,
     contacts,
@@ -270,6 +272,9 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
                         {selectedUsernames.length > 0 && (
                             <span className="badge">{selectedUsernames.length}</span>
                         )}
+                        {totalFriendsLabel && (
+                            <span className="widget-header-summary">{totalFriendsLabel}</span>
+                        )}
                     </div>
 
                     <div className="contact-search-bar">

src/pages/SnsPage.scss

@@ -1021,9 +1021,21 @@
                 padding: 2px 6px;
                 border-radius: 10px;
             }
+
+            .widget-header-summary {
+                margin-left: auto;
+                font-size: 12px;
+                font-weight: 500;
+                color: var(--text-tertiary);
+                white-space: nowrap;
+            }
         }
     }
 
+    .contact-widget .widget-header .badge + .widget-header-summary {
+        margin-left: 8px;
+    }
+
     /* Search Widget */
     .input-group {
         position: relative;

src/pages/SnsPage.tsx

@@ -451,7 +451,7 @@ export default function SnsPage() {
         if (overviewStatsStatus === 'loading') {
             return '统计中...'
         }
-        return `共 ${overviewStats.totalPosts} 条 ｜ ${formatDateOnly(overviewStats.earliestTime)} ~ ${formatDateOnly(overviewStats.latestTime)} ｜ ${overviewStats.totalFriends} 位好友`
+        return `共 ${overviewStats.totalPosts} 条 ｜ ${formatDateOnly(overviewStats.earliestTime)} ~ ${formatDateOnly(overviewStats.latestTime)}`
     }
 
     const loadPosts = useCallback(async (options: { reset?: boolean, direction?: 'older' | 'newer' } = {}) => {
@@ -1112,6 +1112,13 @@ export default function SnsPage() {
                 setSearchKeyword={setSearchKeyword}
                 jumpTargetDate={jumpTargetDate}
                 setJumpTargetDate={setJumpTargetDate}
+                totalFriendsLabel={
+                    overviewStatsStatus === 'loading'
+                        ? '统计中'
+                        : overviewStatsStatus === 'ready'
+                            ? `${overviewStats.totalFriends} 位好友`
+                            : undefined
+                }
                 selectedUsernames={selectedUsernames}
                 setSelectedUsernames={setSelectedUsernames}
                 contacts={contacts}