feat(post): save and remove to saved posts

components/posts/post/Post.vue

@@ -96,7 +96,10 @@
     >
       <!-- Actions -->
       <div class="flex items-center p-2">
-        <PostSave :post="post" />
+        <PostSave
+          :post="post"
+          :postId="postName"
+        />
 
         <PostDownload
           :mediaName="postName"

components/posts/post/PostSave.vue

@@ -1,37 +1,78 @@
 <script lang="ts" setup>
   import { BookmarkIcon } from '@heroicons/vue/24/outline'
   import { BookmarkIcon as SolidBookmarkIcon } from '@heroicons/vue/24/solid'
-  import { toast } from 'vue-sonner'
   import { IPost } from 'assets/js/post'
+  import { db } from '~/store/SavedPosts'
+  import { liveQuery } from 'dexie'
+  import { useObservable } from '@vueuse/rxjs'
+
+  // TODO: Load this component in <suspense>
 
   const props = defineProps<{
+    postId: string
+
     post: IPost
   }>()
 
   const { isPremium } = useUserData()
 
-  const isPostSaved = computed(() => false)
+  const postCount = useObservable(
+    //
+    liveQuery(() =>
+      //
+      db.posts.where('internal_id').equals(props.postId).count()
+    ) as any,
+    {
+      initialValue: 0
+    }
+  ) as Readonly<globalThis.Ref<number>>
+
+  const isPostSaved = computed(() => postCount.value > 0)
+
+  async function onClick() {
+    switch (isPostSaved.value) {
+      case false: {
+        await savePost()
+        break
+      }
+
+      case true: {
+        await deletePost()
+        break
+      }
 
-  function savePostLocally() {
-    if (!isPremium.value) {
-      toast.error('[Premium feature] save post so you can view it later!')
-      return
+      default:
+        throw new Error('Unknown isPostSaved value: ' + isPostSaved.value)
     }
+  }
+
+  async function savePost() {
+    const originalDomain = props.postId.split('-')[0]
+
+    await db.posts.put({
+      internal_id: toRaw(props.postId),
+
+      original_domain: originalDomain,
+
+      data: toRaw(props.post)
+    })
+  }
 
-    // TODO: implement
+  async function deletePost() {
+    await db.posts.where('internal_id').equals(props.postId).delete()
   }
 </script>
 
 <template>
   <button
     class="hover:hover-bg-util focus-visible:focus-util group rounded-md px-1.5 py-1"
     type="button"
-    @click="savePostLocally"
+    @click="onClick"
   >
     <span class="sr-only"> Save post </span>
 
     <SolidBookmarkIcon
-      v-if="isPostSaved"
+      v-if="isPostSaved > 0"
       class="group-hover:hover-text-util h-5 w-5 text-base-content-highlight"
     />
     <BookmarkIcon

package.json

@@ -25,12 +25,14 @@
     "@vite-pwa/nuxt": "^0.1.0",
     "@vueuse/components": "^10.1.2",
     "@vueuse/core": "^10.1.2",
+    "@vueuse/rxjs": "^10.1.2",
     "dexie": "^3.2.4",
     "js-abbreviation-number": "^1.4.0",
     "lodash-es": "^4.17.21",
     "notiwind": "^2.0.1",
     "nuxt": "^3.5.3",
     "qs": "^6.11.2",
+    "rxjs": "^7.8.1",
     "tailwindcss": "^3.3.2",
     "tippy.js": "^6.3.7",
     "vue-matomo": "^4.2.0",

store/SavedPosts.ts

@@ -2,16 +2,23 @@ import { Dexie } from 'dexie'
 import { IPost } from 'assets/js/post'
 import { BooruObj } from 'assets/lib/rule-34-shared-resources/src/util/BooruUtils'
 
+// TODO: Delay all activity until website is idle
+
 // By defining the interface of table records,
 // you get better type safety and code completion
 export interface ISavedPost {
   id?: number // Primary key. Optional (autoincremented)
 
+  internal_id: string // Internal ID. Used to identify posts across domains
+
   original_domain: BooruObj['domain']
 
-  post_data: IPost
+  data: IPost
 
-  created_at?: Date // Optional. Automatically set when record is created
+  /**
+   * Unix timestamp
+   */
+  created_at?: number // Optional. Automatically set when record is created
 }
 
 export class SavedPostDatabase extends Dexie {
@@ -21,22 +28,23 @@ export class SavedPostDatabase extends Dexie {
     super('SavedPostDatabase')
 
     this.version(1).stores({
-      // Do not index 'post_data' because it's not searchable
-      posts: '++id, original_domain, created_at'
+      // Do not index 'data' because it's not searchable
+      posts: '++id, internal_id, original_domain, created_at'
     })
 
-    // Automatically set 'created_at'
     this.posts.hook('creating', (primKey, obj, transaction) => {
-      obj.created_at = new Date()
+      obj.created_at = Date.now()
     })
 
     // Populate with some default posts
     this.on('populate', async () => {
       await this.posts.bulkAdd([
         {
+          internal_id: 'safebooru.org-1',
+
           original_domain: 'safebooru.org',
 
-          post_data: {
+          data: {
             id: 1,
             score: null,
             high_res_file: {
@@ -103,9 +111,11 @@ export class SavedPostDatabase extends Dexie {
           }
         },
         {
+          internal_id: 'gelbooru.com-5',
+
           original_domain: 'gelbooru.com',
 
-          post_data: {
+          data: {
             id: 5,
             score: 48,
             high_res_file: {