feat: bookmarks

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>

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 />

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>