feat: adjust gap

Signed-off-by: Innei <tukon479@gmail.com>

src/components/widgets/note/NoteActionAside.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useQueryClient } from '@tanstack/react-query'
-import { motion, useAnimationControls } from 'framer-motion'
+import { motion, useAnimationControls, useForceUpdate } from 'framer-motion'
 import { produce } from 'immer'
 import type { NoteWrappedPayload } from '@mx-space/api-client'
 
@@ -12,6 +12,7 @@ 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 { isLikedBefore, setLikeId } from '~/utils/cookie'
 import { clsxm } from '~/utils/helper'
 import { apiClient } from '~/utils/request'
 
@@ -21,7 +22,7 @@ export const NoteActionAside: Component = ({ className }) => {
  return (
  <div
  className={clsxm(
- 'absolute bottom-0 max-h-[300px] flex-col space-y-4',
+ 'absolute bottom-0 max-h-[300px] flex-col space-y-8',
  className,
  )}
  >
@@ -37,10 +38,13 @@ const LikeButton = () => {
 
  const queryClient = useQueryClient()
  const control = useAnimationControls()
+ const [update] = useForceUpdate()
  if (!note) return null
  const id = note.id
  const handleLike = () => {
+ if (isLikedBefore(id)) return
  apiClient.note.likeIt(id).then(() => {
+ setLikeId(id)
  queryClient.setQueriesData(
  queries.note.byNid(note.nid.toString()),
  (old: any) => {
@@ -49,9 +53,12 @@ const LikeButton = () => {
  })
  },
  )
+ update()
  })
  }
 
+ const isLiked = isLikedBefore(id)
+
  return (
  <MotionButtonBase
  className="flex flex-col space-y-2"
@@ -82,7 +89,11 @@ const LikeButton = () => {
  }}
  >
  <motion.i
- className="icon-[mingcute--heart-fill] text-[24px] opacity-80 duration-200 hover:text-uk-red-light hover:opacity-100"
+ className={clsxm(
+ 'icon-[mingcute--heart-fill] text-[24px] opacity-80 duration-200 hover:text-uk-red-light hover:opacity-100',
+
+ isLiked && 'text-uk-red-light',
+ )}
  animate={control}
  variants={{
  tap: {