feat: note header banner

Signed-off-by: Innei <i@innei.in>

src/app/notes/[id]/page.tsx

@@ -17,6 +17,7 @@ import { MdiClockOutline } from '~/components/icons/clock'
 import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { Markdown } from '~/components/ui/markdown'
+import { NoteBanner } from '~/components/widgets/note/NoteBanner'
 import { XLogInfoForNote, XLogSummaryForNote } from '~/components/widgets/xlog'
 import { noopArr } from '~/lib/noop'
 import { MarkdownImageRecordProvider } from '~/providers/article/MarkdownImageRecordProvider'
@@ -65,7 +66,7 @@ const PageImpl = () => {
   )
 }
 
-const NotePage = memo(() => {
+const NotePage = memo(function Notepage() {
   const noteId = useCurrentNoteId()
   if (!noteId) return null
 
@@ -87,6 +88,9 @@ const NotePage = memo(() => {
               <NoteMetaBar />
             </ClientOnly>
           </span>
+          <div className="ml-[-1.25em] mr-[-1.25em] mt-8 text-sm lg:ml-[calc(-3em)] lg:mr-[calc(-3em)]">
+            <NoteBanner />
+          </div>
         </header>
 
         <NoteHideIfSecret>

src/components/ui/link-card/LinkCard.tsx

@@ -10,8 +10,6 @@ import { simpleCamelcaseKeys as camelcaseKeys } from '@mx-space/api-client'
 
 import { LazyLoad } from '~/components/common/Lazyload'
 import { useIsClientTransition } from '~/hooks/common/use-is-client'
-import { useIsUnMounted } from '~/hooks/common/use-is-unmounted'
-import { useSafeSetState } from '~/hooks/common/use-safe-setState'
 import { apiClient } from '~/utils/request'
 
 import styles from './LinkCard.module.css'
@@ -36,20 +34,17 @@ export const LinkCard = (props: LinkCardProps) => {
 }
 const LinkCardImpl: FC<LinkCardProps> = (props) => {
   const { id, source = 'self', className } = props
-  const isUnMounted = useIsUnMounted()
 
   const [loading, setLoading] = useState(true)
   const [isError, setIsError] = useState(false)
   const fetchFnRef = useRef<() => Promise<any>>()
 
-  const [fullUrl, _setFullUrl] = useState('about:blank')
-  const [cardInfo, _setCardInfo] = useState<{
+  const [fullUrl, setFullUrl] = useState('about:blank')
+  const [cardInfo, setCardInfo] = useState<{
     title: string
     desc?: string
     image?: string
   }>()
-  const setFullUrl = useSafeSetState(_setFullUrl, isUnMounted)
-  const setCardInfo = useSafeSetState(_setCardInfo, isUnMounted)
 
   const isValidType = useMemo(() => {
     switch (source) {

src/components/widgets/note/NoteBanner.tsx

@@ -0,0 +1,52 @@
+import { useCurrentNoteDataSelector } from '~/providers/note/CurrentNoteDataProvider'
+import { clsxm } from '~/utils/helper'
+
+const bannerClassNames = {
+  info: `bg-sky-50 dark:bg-sky-800 dark:text-white`,
+  warning: `bg-orange-100 dark:bg-orange-800 dark:text-white`,
+  error: `bg-rose-100 dark:bg-rose-800 dark:text-white`,
+  success: `bg-emerald-100 dark:bg-emerald-800 dark:text-white`,
+  secondary: `bg-sky-100 dark:bg-sky-800 dark:text-white`,
+}
+
+const useNoteBanner = () => {
+  const meta = useCurrentNoteDataSelector((n) => n?.data.meta)
+
+  let banner = meta?.banner as {
+    type: string
+    message: string
+    className: string
+    style?: any
+  }
+
+  if (!banner) {
+    return
+  }
+  if (typeof banner === 'string') {
+    return {
+      type: 'info',
+      message: banner,
+      className: bannerClassNames.info,
+    }
+  }
+  banner = { ...banner }
+  banner.type ??= 'info'
+  banner.className ??=
+    bannerClassNames[banner.type as keyof typeof bannerClassNames]
+
+  return banner
+}
+
+export const NoteBanner = () => {
+  const banner = useNoteBanner()
+
+  if (!banner) return null
+  return (
+    <div
+      className={clsxm('flex justify-center p-4 leading-8', banner.className)}
+      style={banner.style}
+    >
+      {banner.message}
+    </div>
+  )
+}