feat: bookmarks

This commit is contained in:
patak 2022-11-15 22:20:07 +01:00
parent 94bde9487a
commit f3ea4b1f3b
3 changed files with 44 additions and 2 deletions

View file

@ -32,8 +32,8 @@
<div i-ri:heart-3-line /> <div i-ri:heart-3-line />
<span>Favorites</span> <span>Favorites</span>
</NuxtLink> </NuxtLink>
<NuxtLink flex gap2 items-center> <NuxtLink flex gap2 items-center to="/bookmarks">
<div i-ri:home-5-line /> <div i-ri:bookmark-line />
<span>Bookmarks</span> <span>Bookmarks</span>
</NuxtLink> </NuxtLink>
</div> </div>

View file

@ -19,6 +19,17 @@ async function toggleFavourite() {
isLoading.value = false 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> </script>
<template> <template>
@ -45,6 +56,15 @@ async function toggleFavourite() {
</div> </div>
<span v-if="status.favouritesCount">{{ status.favouritesCount }}</span> <span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
</button> </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> <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 rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line /> <div i-ri:share-circle-line />

22
pages/bookmarks.vue Normal file
View file

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