From 03f65317a969b916b5696e00ab00eb2488e977c1 Mon Sep 17 00:00:00 2001
From: aits2026 <wxdaochu@gmail.com>
Date: Fri, 6 Mar 2026 15:30:10 +0800
Subject: [PATCH] refactor(sns): use shared jump date popover

---
 src/components/Sns/SnsFilterPanel.tsx | 69 +++++++++++++++++----------
 src/pages/SnsPage.scss                | 12 +++++
 src/pages/SnsPage.tsx                 | 13 -----
 3 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/src/components/Sns/SnsFilterPanel.tsx b/src/components/Sns/SnsFilterPanel.tsx
index 788ac3d..5dbfad0 100644
--- a/src/components/Sns/SnsFilterPanel.tsx
+++ b/src/components/Sns/SnsFilterPanel.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Search, Calendar, User, X, Loader2 } from 'lucide-react'
 import { Avatar } from '../Avatar'
-// import JumpToDateDialog from '../JumpToDateDialog' // Assuming this is imported from parent or moved
+import JumpToDatePopover from '../JumpToDatePopover'
 
 interface Contact {
     username: string
@@ -22,7 +22,6 @@ interface SnsFilterPanelProps {
     setSearchKeyword: (val: string) => void
     jumpTargetDate?: Date
     setJumpTargetDate: (date?: Date) => void
-    onOpenJumpDialog: () => void
     selectedUsernames: string[]
     setSelectedUsernames: (val: string[]) => void
     contacts: Contact[]
@@ -37,7 +36,6 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
     setSearchKeyword,
     jumpTargetDate,
     setJumpTargetDate,
-    onOpenJumpDialog,
     selectedUsernames,
     setSelectedUsernames,
     contacts,
@@ -46,6 +44,19 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
     loading,
     contactsCountProgress
 }) => {
+    const [showJumpPopover, setShowJumpPopover] = useState(false)
+    const jumpCalendarWrapRef = useRef<HTMLDivElement | null>(null)
+
+    useEffect(() => {
+        if (!showJumpPopover) return
+        const handleClickOutside = (event: MouseEvent) => {
+            if (!jumpCalendarWrapRef.current) return
+            if (jumpCalendarWrapRef.current.contains(event.target as Node)) return
+            setShowJumpPopover(false)
+        }
+        document.addEventListener('mousedown', handleClickOutside)
+        return () => document.removeEventListener('mousedown', handleClickOutside)
+    }, [showJumpPopover])
 
     const filteredContacts = contacts.filter(c =>
         (c.displayName || '').toLowerCase().includes(contactSearch.toLowerCase()) ||
@@ -116,27 +127,35 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
                         <Calendar size={14} />
                         <span>时间跳转</span>
                     </div>
-                    <button
-                        className={`date-picker-trigger ${jumpTargetDate ? 'active' : ''}`}
-                        onClick={onOpenJumpDialog}
-                    >
-                        <span className="date-text">
-                            {jumpTargetDate
-                                ? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
-                                : '选择日期...'}
-                        </span>
-                        {jumpTargetDate && (
-                            <div
-                                className="clear-date-btn"
-                                onClick={(e) => {
-                                    e.stopPropagation()
-                                    setJumpTargetDate(undefined)
-                                }}
-                            >
-                                <X size={12} />
-                            </div>
-                        )}
-                    </button>
+                    <div className="jump-calendar-anchor" ref={jumpCalendarWrapRef}>
+                        <button
+                            className={`date-picker-trigger ${jumpTargetDate ? 'active' : ''}`}
+                            onClick={() => setShowJumpPopover(prev => !prev)}
+                        >
+                            <span className="date-text">
+                                {jumpTargetDate
+                                    ? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
+                                    : '选择日期...'}
+                            </span>
+                            {jumpTargetDate && (
+                                <div
+                                    className="clear-date-btn"
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                        setJumpTargetDate(undefined)
+                                    }}
+                                >
+                                    <X size={12} />
+                                </div>
+                            )}
+                        </button>
+                        <JumpToDatePopover
+                            isOpen={showJumpPopover}
+                            currentDate={jumpTargetDate || new Date()}
+                            onClose={() => setShowJumpPopover(false)}
+                            onSelect={(date) => setJumpTargetDate(date)}
+                        />
+                    </div>
                 </div>
 
                 {/* Contact Widget */}
diff --git a/src/pages/SnsPage.scss b/src/pages/SnsPage.scss
index 5f0f160..a3ee46a 100644
--- a/src/pages/SnsPage.scss
+++ b/src/pages/SnsPage.scss
@@ -1063,6 +1063,18 @@
     }
 
     /* Date Widget */
+    .jump-calendar-anchor {
+        position: relative;
+        display: flex;
+        align-items: center;
+        isolation: isolate;
+        z-index: 20;
+
+        .jump-date-popover {
+            z-index: 2600;
+        }
+    }
+
     .date-picker-trigger {
         width: 100%;
         display: flex;
diff --git a/src/pages/SnsPage.tsx b/src/pages/SnsPage.tsx
index c3e0a80..5b082cb 100644
--- a/src/pages/SnsPage.tsx
+++ b/src/pages/SnsPage.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useLayoutEffect, useState, useRef, useCallback, useMemo } from 'react'
 import { RefreshCw, Search, X, Download, FolderOpen, FileJson, FileText, Image, CheckCircle, AlertCircle, Calendar, Users, Info, ChevronLeft, ChevronRight, Shield, ShieldOff, Loader2 } from 'lucide-react'
-import JumpToDateDialog from '../components/JumpToDateDialog'
 import './SnsPage.scss'
 import { SnsPost } from '../types/sns'
 import { SnsPostItem } from '../components/Sns/SnsPostItem'
@@ -118,7 +117,6 @@ export default function SnsPage() {
     })
 
     // UI states
-    const [showJumpDialog, setShowJumpDialog] = useState(false)
     const [debugPost, setDebugPost] = useState<SnsPost | null>(null)
     const [authorTimelineTarget, setAuthorTimelineTarget] = useState<ContactSnsTimelineTarget | null>(null)
 
@@ -1114,7 +1112,6 @@ export default function SnsPage() {
                 setSearchKeyword={setSearchKeyword}
                 jumpTargetDate={jumpTargetDate}
                 setJumpTargetDate={setJumpTargetDate}
-                onOpenJumpDialog={() => setShowJumpDialog(true)}
                 selectedUsernames={selectedUsernames}
                 setSelectedUsernames={setSelectedUsernames}
                 contacts={contacts}
@@ -1125,16 +1122,6 @@ export default function SnsPage() {
             />
 
             {/* Dialogs and Overlays */}
-            <JumpToDateDialog
-                isOpen={showJumpDialog}
-                onClose={() => setShowJumpDialog(false)}
-                onSelect={(date) => {
-                    setJumpTargetDate(date)
-                    setShowJumpDialog(false)
-                }}
-                currentDate={jumpTargetDate || new Date()}
-            />
-
             <ContactSnsTimelineDialog
                 target={authorTimelineTarget}
                 onClose={closeAuthorTimeline}