From f3ea4b1f3bb09491758508a62f66dd459ff30a71 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 15 Nov 2022 22:20:07 +0100
Subject: [PATCH] feat: bookmarks

---
 components/nav/NavSide.vue          |  4 ++--
 components/status/StatusActions.vue | 20 ++++++++++++++++++++
 pages/bookmarks.vue                 | 22 ++++++++++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 pages/bookmarks.vue

diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index fa736904..1c3ae571 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -32,8 +32,8 @@
       <div i-ri:heart-3-line />
       <span>Favorites</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center>
-      <div i-ri:home-5-line />
+    <NuxtLink flex gap2 items-center to="/bookmarks">
+      <div i-ri:bookmark-line />
       <span>Bookmarks</span>
     </NuxtLink>
   </div>
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 1e29d27d..743263f6 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -19,6 +19,17 @@ async function toggleFavourite() {
     isLoading.value = false
   }
 }
+
+async function toggleBookmark() {
+  try {
+    isLoading.value = true
+    const action = status.bookmarked ? 'unbookmark' : 'bookmark'
+    Object.assign(status, await masto.statuses[action](status.id))
+  }
+  finally {
+    isLoading.value = false
+  }
+}
 </script>
 
 <template>
@@ -45,6 +56,15 @@ async function toggleFavourite() {
       </div>
       <span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
     </button>
+    <button
+      flex gap-1 items-center w-full rounded hover="op100 text-yellow" group
+      :class="status.bookmarked ? 'text-yellow op100' : 'op75'"
+      @click="toggleBookmark()"
+    >
+      <div rounded-full p2 group-hover="bg-rose/10">
+        <div :class="status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line'" />
+      </div>
+    </button>
     <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
       <div rounded-full p2 group-hover="bg-purple/10">
         <div i-ri:share-circle-line />
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
new file mode 100644
index 00000000..fa6f6013
--- /dev/null
+++ b/pages/bookmarks.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+const masto = await useMasto()
+const paginator = masto.bookmarks.getIterator()
+</script>
+
+<template>
+  <MainContent>
+    <template #title>
+      <div i-ri:bookmark-fill h-6 mr-1 /><span>Bookmarks</span>
+    </template>
+    <template #actions>
+      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+    </template>
+    <slot>
+      <TimelinePaginator :paginator="paginator" />
+    </slot>
+  </MainContent>
+</template>