diff --git a/src/app/notes/Paper.tsx b/src/app/notes/Paper.tsx index f113ca8cf2..a0d078f200 100644 --- a/src/app/notes/Paper.tsx +++ b/src/app/notes/Paper.tsx @@ -1,8 +1,10 @@ import { clsxm } from '~/utils/helper' -export const Paper: Component = ({ children, className }) => { +export const Paper: Component<{ + as?: keyof JSX.IntrinsicElements | Component +}> = ({ children, className, as: As = 'main' }) => { return ( -
{ )} > {children} -
+ ) } diff --git a/src/app/notes/[id]/layout.tsx b/src/app/notes/[id]/layout.tsx index a5398719ee..7539f3b3d4 100644 --- a/src/app/notes/[id]/layout.tsx +++ b/src/app/notes/[id]/layout.tsx @@ -2,6 +2,8 @@ import { headers } from 'next/dist/client/components/headers' import type { Metadata } from 'next' import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' +import { Comments } from '~/components/widgets/comment/Comments' +import { NoteMainContainer } from '~/components/widgets/note/NoteMainContainer' import { REQUEST_QUERY } from '~/constants/system' import { attachUA } from '~/lib/attach-ua' import { getSummaryFromMd } from '~/lib/markdown' @@ -78,7 +80,8 @@ export default async ( - {props.children} + {props.children} + ) diff --git a/src/components/ui/theme-switcher/ThemeSwitcher.tsx b/src/components/ui/theme-switcher/ThemeSwitcher.tsx index 131c68fc10..c6055866b3 100644 --- a/src/components/ui/theme-switcher/ThemeSwitcher.tsx +++ b/src/components/ui/theme-switcher/ThemeSwitcher.tsx @@ -112,7 +112,7 @@ const ThemeIndicator = () => { if (!theme) return null return (
= ({ refId }) => { + return ( +
+ Comments WIP, RefId: {refId} +
+ ) +} diff --git a/src/components/widgets/note/NoteActionAside.tsx b/src/components/widgets/note/NoteActionAside.tsx index 03be7be623..f9f125c4e2 100644 --- a/src/components/widgets/note/NoteActionAside.tsx +++ b/src/components/widgets/note/NoteActionAside.tsx @@ -106,15 +106,10 @@ const LikeButton = () => { } const ShareButton = () => { - const hasShare = 'share' in navigator const isClient = useIsClient() if (!isClient) return null - if (!hasShare) { - return null - } - return ( { if (!note) return - navigator.share({ - title: note.title, - text: note.text, - url: urlBuilder( - routeBuilder(Routes.Note, { - id: note.nid.toString(), - }), - ).href, - }) + const hasShare = 'share' in navigator + if (hasShare) + navigator.share({ + title: note.title, + text: note.text, + url: urlBuilder( + routeBuilder(Routes.Note, { + id: note.nid.toString(), + }), + ).href, + }) }} > diff --git a/src/components/widgets/note/NoteLeftSidebar.tsx b/src/components/widgets/note/NoteLeftSidebar.tsx index b2c1d3692b..fd377bf26b 100644 --- a/src/components/widgets/note/NoteLeftSidebar.tsx +++ b/src/components/widgets/note/NoteLeftSidebar.tsx @@ -1,18 +1,34 @@ +'use client' + import { OnlyDesktop } from '~/components/ui/viewport' +import { useNoteMainContainerHeight } from './NoteMainContainer' import { NoteTimeline } from './NoteTimeline' import { NoteTopicInfo } from './NoteTopicInfo' export const NoteLeftSidebar: Component = ({ className }) => { return ( -
+ -
+
+ + ) +} + +const AutoHeightOptimize: Component = ({ children }) => { + const mainContainerHeight = useNoteMainContainerHeight() + return ( +
+ {children}
) } diff --git a/src/components/widgets/note/NoteMainContainer.tsx b/src/components/widgets/note/NoteMainContainer.tsx new file mode 100644 index 0000000000..53db80e619 --- /dev/null +++ b/src/components/widgets/note/NoteMainContainer.tsx @@ -0,0 +1,38 @@ +'use client' + +import { useEffect, useRef } from 'react' +import { atom, useAtomValue, useSetAtom } from 'jotai' + +import { jotaiStore } from '~/lib/store' + +const noteMainContainerHeightAtom = atom(0) +export const NoteMainContainer: Component = ({ className, children }) => { + const mainRef = useRef(null) + const setHeight = useSetAtom(noteMainContainerHeightAtom) + useEffect(() => { + if (!mainRef.current) return + // measure the height of the main element + const mainHeight = mainRef.current.offsetHeight + if (mainHeight) setHeight(mainHeight) + + const ob = new ResizeObserver((entries) => { + const mainHeight = (entries[0].target as HTMLElement).offsetHeight + if (mainHeight) setHeight(mainHeight) + }) + ob.observe(mainRef.current) + + return () => { + ob.disconnect() + jotaiStore.set(noteMainContainerHeightAtom, 0) + } + }, []) + + return ( +
+ {children} +
+ ) +} + +export const useNoteMainContainerHeight = () => + useAtomValue(noteMainContainerHeightAtom) diff --git a/src/components/widgets/note/NoteTimeline.tsx b/src/components/widgets/note/NoteTimeline.tsx index ff7cdb684f..97e1bc098f 100644 --- a/src/components/widgets/note/NoteTimeline.tsx +++ b/src/components/widgets/note/NoteTimeline.tsx @@ -14,11 +14,11 @@ import { clsxm } from '~/utils/helper' import { apiClient } from '~/utils/request' import { springScrollToTop } from '~/utils/scroller' -export const NoteTimeline = () => { +export const NoteTimeline = memo(() => { const noteId = useCurrentNoteId() if (!noteId) return null return -} +}) const NoteTimelineImpl = () => { void useCurrentNoteId() diff --git a/src/components/widgets/note/NoteTopicInfo.tsx b/src/components/widgets/note/NoteTopicInfo.tsx index c7fd10707e..dcd694baae 100644 --- a/src/components/widgets/note/NoteTopicInfo.tsx +++ b/src/components/widgets/note/NoteTopicInfo.tsx @@ -1,17 +1,14 @@ 'use client' +import { memo } from 'react' + import { Divider } from '~/components/ui/divider' import { FloatPopover } from '~/components/ui/float-popover' import { useCurrentNoteDataSelector } from '~/providers/note/CurrentNoteDataProvider' import { NoteTopicDetail, ToTopicLink } from './NoteTopicDetail' -// export const NoteTopicInfo = () => { -// const noteId = useCurrentNoteId() -// if (!noteId) return null -// return -// } -export const NoteTopicInfo = () => { +export const NoteTopicInfo = memo(() => { const topic = useCurrentNoteDataSelector((data) => data?.data.topic) if (!topic) return null @@ -33,4 +30,4 @@ export const NoteTopicInfo = () => { ) -} +})