From 416aa3bd60629313b45af69a67e2c6eeb393c46f Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 13 Nov 2021 16:06:32 -0600
Subject: [PATCH] Add: collections no longer experimental & add collections in
 book card more menu

---
 client/components/app/SideRail.vue                | 2 +-
 client/components/cards/BookCard.vue              | 9 ++++++++-
 client/components/modals/UserCollectionsModal.vue | 9 +++++++++
 client/pages/audiobook/_id/index.vue              | 2 +-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/client/components/app/SideRail.vue b/client/components/app/SideRail.vue
index ce2c724c..6e3f6afe 100644
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@@ -31,7 +31,7 @@
       <div v-show="paramId === 'series'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
-    <nuxt-link v-if="showExperimentalFeatures" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
       </svg> -->
diff --git a/client/components/cards/BookCard.vue b/client/components/cards/BookCard.vue
index 80b56616..4209524f 100644
--- a/client/components/cards/BookCard.vue
+++ b/client/components/cards/BookCard.vue
@@ -243,6 +243,10 @@ export default {
         {
           func: 'toggleRead',
           text: `Mark as ${this.userIsRead ? 'Not Read' : 'Read'}`
+        },
+        {
+          func: 'openCollections',
+          text: 'Add to Collection'
         }
       ]
       if (this.userCanUpdate) {
@@ -252,7 +256,6 @@ export default {
             text: 'Tracks'
           })
         }
-
         items.push({
           func: 'showEditModalMatch',
           text: 'Match'
@@ -347,6 +350,10 @@ export default {
       // More menu func
       this.$store.commit('showEditModalOnTab', { audiobook: this.audiobook, tab: 'download' })
     },
+    openCollections() {
+      this.$store.commit('setSelectedAudiobook', this.audiobook)
+      this.$store.commit('globals/setShowUserCollectionsModal', true)
+    },
     createMoreMenu() {
       if (!this.$refs.moreIcon) return
 
diff --git a/client/components/modals/UserCollectionsModal.vue b/client/components/modals/UserCollectionsModal.vue
index 121401e1..53e208e2 100644
--- a/client/components/modals/UserCollectionsModal.vue
+++ b/client/components/modals/UserCollectionsModal.vue
@@ -1,5 +1,11 @@
 <template>
   <modals-modal v-model="show" name="collections" :processing="processing" :width="500" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+
     <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
       <div v-if="show" class="w-full h-full">
         <div class="py-4 px-4">
@@ -56,6 +62,9 @@ export default {
         this.$store.commit('globals/setShowUserCollectionsModal', val)
       }
     },
+    title() {
+      return this.selectedAudiobook ? this.selectedAudiobook.book.title : ''
+    },
     selectedAudiobook() {
       return this.$store.state.selectedAudiobook
     },
diff --git a/client/pages/audiobook/_id/index.vue b/client/pages/audiobook/_id/index.vue
index 899ed3b6..783719a1 100644
--- a/client/pages/audiobook/_id/index.vue
+++ b/client/pages/audiobook/_id/index.vue
@@ -113,7 +113,7 @@
               <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="isRead" class="mx-0.5" @click="toggleRead" />
             </ui-tooltip>
 
-            <ui-tooltip v-if="showExperimentalFeatures" text="Collections" direction="top">
+            <ui-tooltip text="Collections" direction="top">
               <ui-icon-btn icon="collections_bookmark" class="mx-0.5" outlined @click="collectionsClick" />
             </ui-tooltip>