From 681f3db2216a8a0d9298af31dc56cf6c56056d4f Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Mon, 19 Jun 2023 14:29:22 +0800
Subject: [PATCH] feat: adjust gap

Signed-off-by: Innei <tukon479@gmail.com>
---
 src/components/widgets/note/NoteActionAside.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/widgets/note/NoteActionAside.tsx b/src/components/widgets/note/NoteActionAside.tsx
index 92ec2d876f..2f1ee4bacb 100644
--- a/src/components/widgets/note/NoteActionAside.tsx
+++ b/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: {