diff --git a/src/app/(app)/(page-detail)/[slug]/layout.tsx b/src/app/(app)/(page-detail)/[slug]/layout.tsx index d3f8344625..e72ade454a 100644 --- a/src/app/(app)/(page-detail)/[slug]/layout.tsx +++ b/src/app/(app)/(page-detail)/[slug]/layout.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/display-name */ import React from 'react' import type { Metadata } from 'next' diff --git a/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx b/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx index 6f72efe0ae..5752efb19d 100644 --- a/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx +++ b/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx @@ -72,6 +72,7 @@ interface PageParams { slug: string } +// eslint-disable-next-line react/display-name export default async (props: NextPageParams) => { const data = await getData(props.params) diff --git a/src/components/layout/header/internal/HeaderContent.tsx b/src/components/layout/header/internal/HeaderContent.tsx index f0d0652ebb..3ae9d108fa 100644 --- a/src/components/layout/header/internal/HeaderContent.tsx +++ b/src/components/layout/header/internal/HeaderContent.tsx @@ -49,7 +49,7 @@ const AccessibleMenu: Component = () => { initial={{ y: -20 }} animate={{ y: 0 }} exit={{ y: -20, opacity: 0 }} - className="fixed inset-x-0 top-12 z-10 flex justify-center duration-100" + className="pointer-events-none fixed inset-x-0 top-12 z-10 flex justify-center duration-100" > @@ -110,7 +110,7 @@ const ForDesktop: Component<{ 'shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-md', 'dark:from-zinc-900/70 dark:to-zinc-800/90 dark:ring-zinc-100/10', 'group [--spotlight-color:oklch(var(--a)_/_0.12)]', - 'duration-200', + 'pointer-events-auto duration-200', shouldHideNavBg && '!bg-none !shadow-none !ring-transparent', className, )} diff --git a/src/components/modules/activity/Presence.tsx b/src/components/modules/activity/Presence.tsx index 238711a364..5ad74fdb39 100644 --- a/src/components/modules/activity/Presence.tsx +++ b/src/components/modules/activity/Presence.tsx @@ -37,11 +37,6 @@ import { getColorScheme, stringToHue } from '~/lib/color' import { formatSeconds } from '~/lib/datetime' import { debounce, uniq } from '~/lib/lodash' import { apiClient } from '~/lib/request' -import { springScrollTo } from '~/lib/scroller' -import { - useWrappedElementPosition, - useWrappedElementSize, -} from '~/providers/shared/WrappedElementProvider' import { queries } from '~/queries/definition' import { socketClient } from '~/socket' @@ -49,16 +44,14 @@ import { commentStoragePrefix } from '../comment/CommentBox/providers' import { useRoomContext } from './Room' export const Presence = () => { - const isMobile = useIsMobile() - const isClient = useIsClient() - return isMobile ? null : isClient ? : null + return isClient ? : null } const PresenceImpl = () => { const { roomName } = useRoomContext() - + const isMobile = useIsMobile() const { refetch } = useQuery({ ...queries.activity.presence(roomName), @@ -123,6 +116,8 @@ const PresenceImpl = () => { update(percent) }, [percent, update]) + if (isMobile) return null + return } @@ -216,14 +211,14 @@ const TimelineItem: FC = memo(({ type, identity }) => { TimelineItem.displayName = 'TimelineItem' const MoitonBar = forwardRef< - HTMLButtonElement, + HTMLDivElement, { position: number bgColor: string isCurrent: boolean } >(({ bgColor, isCurrent, position, ...rest }, ref) => { - const elRef = useRef(null) + const elRef = useRef(null) const [memoedPosition] = useState(position) useLayoutEffect(() => { @@ -258,17 +253,10 @@ const MoitonBar = forwardRef< }, ) }, [isCurrent, position]) - const { y } = useWrappedElementPosition() - const { h } = useWrappedElementSize() useImperativeHandle(ref, () => elRef.current!) return ( -