fix: 🐛

2025-05-16 23:35:12 +08:00
parent fa5e198b8a
commit 4b09276943
4 changed files with 122 additions and 82 deletions
--- a/src/components/NoteList/index.tsx
+++ b/src/components/NoteList/index.tsx
@@ -31,7 +31,8 @@ export default function NoteList({
  className,
  filterMutedNotes = true,
  needCheckAlgoRelay = false,
-  isMainFeed = false
+  isMainFeed = false,
+  topSpace = 0
 }: {
  relayUrls?: string[]
  filter?: Filter
@@ -40,6 +41,7 @@ export default function NoteList({
  filterMutedNotes?: boolean
  needCheckAlgoRelay?: boolean
  isMainFeed?: boolean
+  topSpace?: number
 }) {
  const { t } = useTranslation()
  const { isLargeScreen } = useScreenSize()
@@ -315,6 +317,7 @@ export default function NoteList({
            topRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
          }, 0)
        }}
+        threshold={Math.max(800, topSpace)}
      />
      {filteredNewEvents.length > 0 && (
        <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
--- a/src/components/ScrollToTopButton/index.tsx
+++ b/src/components/ScrollToTopButton/index.tsx
@@ -26,7 +26,7 @@ export default function ScrollToTopButton({
  return (
    <div
      className={cn(
-        `fixed sm:sticky z-20 flex justify-end w-full pr-3 pointer-events-none transition-opacity duration-700 ${visible ? '' : 'opacity-0'}`,
+        `fixed sm:sticky z-30 flex justify-end w-full pr-3 pointer-events-none transition-opacity duration-700 ${visible ? '' : 'opacity-0'}`,
        className
      )}
      style={{
--- a/src/components/TabSwitch/index.tsx
+++ b/src/components/TabSwitch/index.tsx
@@ -12,12 +12,14 @@ export default function TabSwitcher({
  tabs,
  value,
  className,
-  onTabChange
+  onTabChange,
+  threshold = 800
 }: {
  tabs: TabDefinition[]
  value: string
  className?: string
  onTabChange?: (tab: string) => void
+  threshold?: number
 }) {
  const { t } = useTranslation()
  const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
@@ -27,7 +29,7 @@ export default function TabSwitcher({
    <div
      className={cn(
        'sticky top-12 bg-background z-30 w-full transition-transform',
-        deepBrowsing && lastScrollTop > 800 ? '-translate-y-[calc(100%+12rem)]' : '',
+        deepBrowsing && lastScrollTop > threshold ? '-translate-y-[calc(100%+12rem)]' : '',
        className
      )}
    >
--- a/src/pages/secondary/ProfilePage/index.tsx
+++ b/src/pages/secondary/ProfilePage/index.tsx
@@ -1,3 +1,4 @@
+import Collapsible from '@/components/Collapsible'
 import FollowButton from '@/components/FollowButton'
 import Nip05 from '@/components/Nip05'
 import NoteList from '@/components/NoteList'
@@ -18,12 +19,11 @@ import { SecondaryPageLink, useSecondaryPage } from '@/PageManager'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { Link, Zap } from 'lucide-react'
-import { forwardRef, useMemo } from 'react'
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import NotFoundPage from '../NotFoundPage'
 import Followings from './Followings'
 import Relays from './Relays'
-import Collapsible from '@/components/Collapsible'

 const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref) => {
  const { t } = useTranslation()
@@ -41,7 +41,35 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
    () => (profile?.pubkey ? generateImageByPubkey(profile?.pubkey) : ''),
    [profile]
  )
+  const [topContainerHeight, setTopContainerHeight] = useState(0)
  const isSelf = accountPubkey === profile?.pubkey
+  const [topContainer, setTopContainer] = useState<HTMLDivElement | null>(null)
+  const topContainerRef = useCallback((node: HTMLDivElement | null) => {
+    if (node) {
+      setTopContainer(node)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!topContainer) return
+
+    const checkHeight = () => {
+      console.log('checkHeight', topContainer.scrollHeight)
+      setTopContainerHeight(topContainer.scrollHeight)
+    }
+
+    checkHeight()
+
+    const observer = new ResizeObserver(() => {
+      checkHeight()
+    })
+
+    observer.observe(topContainer)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [topContainer])

  if (!profile && isFetching) {
    return (
@@ -64,90 +92,97 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
  const { banner, username, about, avatar, pubkey, website, lightningAddress } = profile
  return (
    <SecondaryPageLayout index={index} title={username} displayScrollToTopButton ref={ref}>
-      <div className="sm:px-4">
-        <div className="relative bg-cover bg-center mb-2">
-          <ProfileBanner
-            banner={banner}
-            pubkey={pubkey}
-            className="w-full aspect-video sm:rounded-lg"
-          />
-          <Avatar className="w-24 h-24 absolute left-3 bottom-0 translate-y-1/2 border-4 border-background">
-            <AvatarImage src={avatar} className="object-cover object-center" />
-            <AvatarFallback>
-              <img src={defaultImage} />
-            </AvatarFallback>
-          </Avatar>
+      <div ref={topContainerRef}>
+        <div className="sm:px-4">
+          <div className="relative bg-cover bg-center mb-2">
+            <ProfileBanner
+              banner={banner}
+              pubkey={pubkey}
+              className="w-full aspect-video sm:rounded-lg"
+            />
+            <Avatar className="w-24 h-24 absolute left-3 bottom-0 translate-y-1/2 border-4 border-background">
+              <AvatarImage src={avatar} className="object-cover object-center" />
+              <AvatarFallback>
+                <img src={defaultImage} />
+              </AvatarFallback>
+            </Avatar>
+          </div>
        </div>
-      </div>
-      <div className="px-4">
-        <div className="flex justify-end h-8 gap-2 items-center max-sm:translate-x-2">
-          <ProfileOptions pubkey={pubkey} />
-          {isSelf ? (
-            <Button
-              className="w-20 min-w-20 rounded-full"
-              variant="secondary"
-              onClick={() => push(toProfileEditor())}
-            >
-              {t('Edit')}
-            </Button>
-          ) : (
-            <>
-              {!!lightningAddress && <ProfileZapButton pubkey={pubkey} />}
-              <FollowButton pubkey={pubkey} />
-            </>
-          )}
-        </div>
-        <div className="pt-2">
-          <div className="flex gap-2 items-center">
-            <div className="text-xl font-semibold truncate select-text">{username}</div>
-            {isFollowingYou && (
-              <div className="text-muted-foreground rounded-full bg-muted text-xs h-fit px-2 shrink-0">
-                {t('Follows you')}
+        <div className="px-4">
+          <div className="flex justify-end h-8 gap-2 items-center max-sm:translate-x-2">
+            <ProfileOptions pubkey={pubkey} />
+            {isSelf ? (
+              <Button
+                className="w-20 min-w-20 rounded-full"
+                variant="secondary"
+                onClick={() => push(toProfileEditor())}
+              >
+                {t('Edit')}
+              </Button>
+            ) : (
+              <>
+                {!!lightningAddress && <ProfileZapButton pubkey={pubkey} />}
+                <FollowButton pubkey={pubkey} />
+              </>
+            )}
+          </div>
+          <div className="pt-2">
+            <div className="flex gap-2 items-center">
+              <div className="text-xl font-semibold truncate select-text">{username}</div>
+              {isFollowingYou && (
+                <div className="text-muted-foreground rounded-full bg-muted text-xs h-fit px-2 shrink-0">
+                  {t('Follows you')}
+                </div>
+              )}
+            </div>
+            <Nip05 pubkey={pubkey} />
+            {lightningAddress && (
+              <div className="text-sm text-yellow-400 flex gap-1 items-center select-text">
+                <Zap className="size-4 shrink-0" />
+                <div className="flex-1 max-w-fit w-0 truncate">{lightningAddress}</div>
              </div>
            )}
-          </div>
-          <Nip05 pubkey={pubkey} />
-          {lightningAddress && (
-            <div className="text-sm text-yellow-400 flex gap-1 items-center select-text">
-              <Zap className="size-4 shrink-0" />
-              <div className="flex-1 max-w-fit w-0 truncate">{lightningAddress}</div>
+            <div className="flex gap-1 mt-1">
+              <PubkeyCopy pubkey={pubkey} />
+              <QrCodePopover pubkey={pubkey} />
            </div>
-          )}
-          <div className="flex gap-1 mt-1">
-            <PubkeyCopy pubkey={pubkey} />
-            <QrCodePopover pubkey={pubkey} />
-          </div>
-          <Collapsible>
-            <ProfileAbout
-              about={about}
-              className="text-wrap break-words whitespace-pre-wrap mt-2 select-text"
-            />
-          </Collapsible>
-          {website && (
-            <div className="flex gap-1 items-center text-primary mt-2 truncate select-text">
-              <Link size={14} className="shrink-0" />
-              <a
-                href={website}
-                target="_blank"
-                className="hover:underline truncate flex-1 max-w-fit w-0"
-              >
-                {website}
-              </a>
-            </div>
-          )}
-          <div className="flex gap-4 items-center mt-2 text-sm">
-            <Followings pubkey={pubkey} />
-            <Relays pubkey={pubkey} />
-            {isSelf && (
-              <SecondaryPageLink to={toMuteList()} className="flex gap-1 hover:underline w-fit">
-                {mutePubkeys.length}
-                <div className="text-muted-foreground">{t('Muted')}</div>
-              </SecondaryPageLink>
+            <Collapsible>
+              <ProfileAbout
+                about={about}
+                className="text-wrap break-words whitespace-pre-wrap mt-2 select-text"
+              />
+            </Collapsible>
+            {website && (
+              <div className="flex gap-1 items-center text-primary mt-2 truncate select-text">
+                <Link size={14} className="shrink-0" />
+                <a
+                  href={website}
+                  target="_blank"
+                  className="hover:underline truncate flex-1 max-w-fit w-0"
+                >
+                  {website}
+                </a>
+              </div>
            )}
+            <div className="flex gap-4 items-center mt-2 text-sm">
+              <Followings pubkey={pubkey} />
+              <Relays pubkey={pubkey} />
+              {isSelf && (
+                <SecondaryPageLink to={toMuteList()} className="flex gap-1 hover:underline w-fit">
+                  {mutePubkeys.length}
+                  <div className="text-muted-foreground">{t('Muted')}</div>
+                </SecondaryPageLink>
+              )}
+            </div>
          </div>
        </div>
      </div>
-      <NoteList author={pubkey} className="mt-2" filterMutedNotes={false} />
+      <NoteList
+        author={pubkey}
+        className="mt-2"
+        filterMutedNotes={false}
+        topSpace={topContainerHeight + 100}
+      />
    </SecondaryPageLayout>
  )
 })