feat: note side share

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/common/ToastCard.tsx

@@ -1,4 +1,6 @@
+import { useId } from 'react'
 import clsx from 'clsx'
+import { motion } from 'framer-motion'
 import type { FC } from 'react'
 import type { ToastProps, TypeOptions } from 'react-toastify/dist/types'
 
@@ -21,9 +23,11 @@ export const ToastCard: FC<{
   closeToast?: () => void
 }> = (props) => {
   const { iconElement, message, closeToast } = props
-
+  const id = useId()
   return (
-    <div
+    <motion.div
+      layoutId={id}
+      layout="position"
       className={clsx(
         'relative w-full overflow-hidden rounded-xl shadow-out-sm',
         'my-4 mr-4 px-4 py-5',
@@ -42,6 +46,6 @@ export const ToastCard: FC<{
       >
         <i className="icon-[mingcute--close-fill] p-2" />
       </MotionButtonBase>
-    </div>
+    </motion.div>
   )
 }

src/components/layout/header/internal/UserAuth.tsx

@@ -12,20 +12,16 @@ import {
   useUser,
 } from '@clerk/nextjs'
 
-import { appConfig } from '~/app.config'
 import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon'
 import { GoogleBrandIcon } from '~/components/icons/platform/GoogleBrandIcon'
 import { MailIcon } from '~/components/icons/platform/MailIcon'
 import { UserArrowLeftIcon } from '~/components/icons/user-arrow-left'
 import { FloatPopover } from '~/components/ui/float-popover'
+import { urlBuilder } from '~/lib/url-builder'
 import { clsxm } from '~/utils/helper'
 
 import { HeaderActionButton } from './HeaderActionButton'
 
-function url(path = '') {
-  return new URL(path, appConfig.site.url)
-}
-
 export function UserAuth() {
   const pathname = usePathname()
 
@@ -35,7 +31,7 @@ export function UserAuth() {
         <div className="pointer-events-auto flex h-10 w-full items-center justify-center">
           <div className="relative">
             <UserButton
-              afterSignOutUrl={url(pathname).href}
+              afterSignOutUrl={urlBuilder(pathname).href}
               appearance={{
                 elements: {
                   logoBox: 'w-9 h-9 ring-2 ring-white/20 rounded-full',
@@ -96,7 +92,7 @@ const UserAuthFromIcon: Component = ({ className }) => {
 const TriggerComponent = () => {
   const pathname = usePathname()
   return (
-    <SignInButton mode="modal" redirectUrl={url(pathname).href}>
+    <SignInButton mode="modal" redirectUrl={urlBuilder(pathname).href}>
       <HeaderActionButton>
         <UserArrowLeftIcon className="h-4 w-4" />
       </HeaderActionButton>

src/components/widgets/note/NoteActionAside.tsx

@@ -7,15 +7,19 @@ import type { NoteWrappedPayload } from '@mx-space/api-client'
 
 import { MotionButtonBase } from '~/components/ui/button'
 import { microReboundPreset } from '~/constants/spring'
+import { useIsClient } from '~/hooks/common/use-is-client'
 import { useNoteData } from '~/hooks/data/use-note'
 import { toast } from '~/lib/toast'
+import { urlBuilder } from '~/lib/url-builder'
+import { useAggregationData } from '~/providers/root/aggregation-data-provider'
 import { queries } from '~/queries/definition'
 import { apiClient } from '~/utils/request'
 
 export const NoteActionAside = () => {
   return (
     <div className="absolute bottom-0 max-h-[300px] flex-col space-y-4">
       <LikeButton />
+      <ShareButton />
     </div>
   )
 }
@@ -67,3 +71,31 @@ const LikeButton = () => {
     </MotionButtonBase>
   )
 }
+
+const ShareButton = () => {
+  const hasShare = 'share' in navigator
+  const isClient = useIsClient()
+  const note = useNoteData()
+  const aggregation = useAggregationData()
+  if (!isClient) return null
+  if (!note) return null
+
+  if (!hasShare) {
+    return null
+  }
+  if (!aggregation) return null
+  return (
+    <MotionButtonBase
+      className="flex flex-col space-y-2"
+      onClick={() => {
+        navigator.share({
+          title: note.title,
+          text: note.text,
+          url: urlBuilder(`/notes/${note.nid}`).href,
+        })
+      }}
+    >
+      <i className="icon-[mingcute--share-forward-fill] text-[24px] opacity-80 duration-200 hover:text-uk-cyan-light hover:opacity-100" />
+    </MotionButtonBase>
+  )
+}

src/lib/url-builder.ts

@@ -0,0 +1,5 @@
+import { appConfig } from '~/app.config'
+
+export function urlBuilder(path = '') {
+  return new URL(path, appConfig.site.url)
+}