Implement reblog, favourite, bookmark actions

renderer/components/timelines/status/Actions.tsx

@@ -1,15 +1,71 @@
+import { Entity, MegalodonInterface } from 'megalodon'
 import { FaBookmark, FaEllipsis, FaReply, FaRetweet, FaStar } from 'react-icons/fa6'
 
-type Props = {}
+type Props = {
+  status: Entity.Status
+  client: MegalodonInterface
+  onRefresh: () => void
+}
 
 export default function Actions(props: Props) {
+  const reblog = async () => {
+    if (props.status.reblogged) {
+      await props.client.unreblogStatus(props.status.id)
+    } else {
+      await props.client.reblogStatus(props.status.id)
+    }
+    props.onRefresh()
+  }
+
+  const favourite = async () => {
+    if (props.status.favourited) {
+      await props.client.unfavouriteStatus(props.status.id)
+    } else {
+      await props.client.favouriteStatus(props.status.id)
+    }
+    props.onRefresh()
+  }
+
+  const bookmark = async () => {
+    if (props.status.bookmarked) {
+      await props.client.unbookmarkStatus(props.status.id)
+    } else {
+      await props.client.bookmarkStatus(props.status.id)
+    }
+    props.onRefresh()
+  }
+
   return (
     <div className="flex gap-6">
-      <FaReply className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
-      <FaRetweet className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
-      <FaStar className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
-      <FaBookmark className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
+      <FaReply className={`w-4 text-gray-400 cursor-pointer hover:text-gray-600`} />
+      <FaRetweet className={`${retweetColor(props.status)} w-4 cursor-pointer hover:text-gray-600`} onClick={reblog} />
+      <FaStar className={`${favouriteColor(props.status)} w-4 cursor-pointer hover:text-gray-600`} onClick={favourite} />
+      <FaBookmark className={`${bookmarkColor(props.status)} w-4 cursor-pointer hover:text-gray-600`} onClick={bookmark} />
       <FaEllipsis className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
     </div>
   )
 }
+
+const retweetColor = (status: Entity.Status) => {
+  if (status.reblogged) {
+    return 'text-blue-600'
+  } else {
+    return 'text-gray-400'
+  }
+}
+
+const favouriteColor = (status: Entity.Status) => {
+  if (status.favourited) {
+    return 'text-orange-400'
+  } else {
+    return 'text-gray-400'
+  }
+}
+
+const bookmarkColor = (status: Entity.Status) => {
+  if (status.bookmarked) {
+    return 'text-rose-500'
+  } else {
+    return 'text-gray-400'
+  }
+}

renderer/components/timelines/status/Status.tsx

@@ -47,7 +47,7 @@ export default function Status(props: Props) {
           {status.poll && <Poll poll={status.poll} onRefresh={onRefresh} client={props.client} />}
           {status.card && <Card card={status.card} />}
           <Media media={status.media_attachments} />
-          <Actions />
+          <Actions status={status} client={props.client} onRefresh={onRefresh} />
         </div>
       </div>
     </div>