feat: linkcard peek

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

src/app/(home)/page.tsx

@@ -105,7 +105,7 @@ const Welcome = () => {
               <span className="opacity-80">{description}</span>
             </BottomToUpTransitionView>
 
-            <ul className="flex space-x-4 center lg:mt-[7rem] lg:block">
+            <ul className="mt-8 flex space-x-4 center lg:mt-[7rem] lg:block">
               {Object.entries(socialIds || noopObj).map(
                 ([type, id]: any, index) => {
                   return (

src/app/notes/[id]/page.module.css

@@ -40,7 +40,7 @@
       line-height: 1.8;
       padding: 1em 1em 1em 2em;
 
-      @apply bg-uk-cyan-light/10 font-normal dark:bg-uk-teal-light/10;
+      @apply bg-accent/20 font-normal dark:bg-accent/5;
       @apply border-none px-12 !outline-none;
 
       & span::first-letter {

src/components/ui/fab/FABContainer.tsx

@@ -35,7 +35,6 @@ export const FABBase = (
     <AnimatePresence mode="wait">
       {show && (
         <m.button
-          layout="position"
           aria-label="Floating action button"
           initial={{ opacity: 0.3, scale: 0.8 }}
           animate={{ opacity: 1, scale: 1 }}
@@ -99,9 +98,7 @@ export const FABContainer = (props: {
   if (!isClient) return null
 
   return (
-    <m.div
-      layout
-      layoutRoot
+    <div
       data-testid="fab-container"
       className={clsx(
         'font-lg fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] right-4 z-[9] flex flex-col',
@@ -118,6 +115,6 @@ export const FABContainer = (props: {
         )
       })}
       {props.children}
-    </m.div>
+    </div>
   )
 }

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

@@ -4,12 +4,14 @@ import axios from 'axios'
 import clsx from 'clsx'
 import Link from 'next/link'
 import RemoveMarkdown from 'remove-markdown'
-import type { FC } from 'react'
+import type { FC, SyntheticEvent } from 'react'
 
 import { simpleCamelcaseKeys as camelcaseKeys } from '@mx-space/api-client'
 
 import { LazyLoad } from '~/components/common/Lazyload'
+import { usePeek } from '~/components/widgets/peek/PeekLink'
 import { useIsClientTransition } from '~/hooks/common/use-is-client'
+import { preventDefault } from '~/lib/dom'
 import { apiClient } from '~/lib/request'
 
 import styles from './LinkCard.module.css'
@@ -46,6 +48,15 @@ const LinkCardImpl: FC<LinkCardProps> = (props) => {
     image?: string
   }>()
 
+  const peek = usePeek()
+  const handleCanPeek = useCallback(
+    async (e: SyntheticEvent<any>) => {
+      const success = await peek(fullUrl)
+      if (success) preventDefault(e)
+    },
+    [fullUrl],
+  )
+
   const isValidType = useMemo(() => {
     switch (source) {
       case 'mx-space':
@@ -171,6 +182,7 @@ const LinkCardImpl: FC<LinkCardProps> = (props) => {
         isError && styles['error'],
         className,
       )}
+      onClick={handleCanPeek}
     >
       <span className={styles['contents']}>
         <span className={styles['title']}>{cardInfo?.title}</span>

src/components/widgets/peek/PeekLink.tsx

@@ -4,26 +4,19 @@ import type { LinkProps } from 'next/link'
 import type { FC, PropsWithChildren, SyntheticEvent } from 'react'
 
 import { useIsMobile } from '~/atoms'
+import { preventDefault } from '~/lib/dom'
 import { useModalStack } from '~/providers/root/modal-stack-provider'
 
 import { PeekModal } from './PeekModal'
 
-export const PeekLink: FC<
-  {
-    href: string
-  } & LinkProps &
-    PropsWithChildren &
-    React.AnchorHTMLAttributes<HTMLAnchorElement>
-> = (props) => {
-  const { href, children, ...rest } = props
+export const usePeek = () => {
   const isMobile = useIsMobile()
   const { present } = useModalStack()
-  const handlePeek = useCallback(
-    async (e: SyntheticEvent) => {
+  return useCallback(
+    async (href: string) => {
       if (isMobile) return
 
       if (href.startsWith('/notes/')) {
-        e.preventDefault()
         const NotePreview = await import('./NotePreview').then(
           (module) => module.NotePreview,
         )
@@ -39,8 +32,9 @@ export const PeekLink: FC<
           ),
           content: () => null,
         })
+
+        return true
       } else if (href.startsWith('/posts/')) {
-        e.preventDefault()
         const PostPreview = await import('./PostPreview').then(
           (module) => module.PostPreview,
         )
@@ -59,9 +53,32 @@ export const PeekLink: FC<
           ),
           content: () => null,
         })
+        return true
       }
+
+      return false
+    },
+    [isMobile, present],
+  )
+}
+
+export const PeekLink: FC<
+  {
+    href: string
+  } & LinkProps &
+    PropsWithChildren &
+    React.AnchorHTMLAttributes<HTMLAnchorElement>
+> = (props) => {
+  const { href, children, ...rest } = props
+
+  const peek = usePeek()
+
+  const handlePeek = useCallback(
+    async (e: SyntheticEvent) => {
+      const success = await peek(href)
+      if (success) preventDefault(e)
     },
-    [href, isMobile, present],
+    [href, peek],
   )
 
   return (

src/components/widgets/peek/PeekModal.tsx

@@ -10,7 +10,7 @@ export const PeekModal = (
     to: string
   }>,
 ) => {
-  const { dismissTop } = useModalStack()
+  const { dismissAll } = useModalStack()
   return (
     <m.div
       initial={{ y: 100, opacity: 0.5 }}
@@ -24,7 +24,7 @@ export const PeekModal = (
       <Link
         className="absolute right-2 top-2 flex h-8 w-8 rounded-full p-1 shadow-sm ring-1 ring-zinc-200 center dark:ring-neutral-800"
         href={props.to}
-        onClick={dismissTop}
+        onClick={dismissAll}
       >
         <i className="icon-[mingcute--fullscreen-2-line] text-lg" />
         <span className="sr-only">Go to this link</span>