Add: collections no longer experimental & add collections in book card more menu

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

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
 

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
     },

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>