From 8974c582fcf4e04399688808767d4bcde40d142d Mon Sep 17 00:00:00 2001
From: Nicholas Wallace <nicholaslwallace@gmail.com>
Date: Wed, 29 Jan 2025 22:46:53 -0700
Subject: [PATCH 1/3] Add: collection and playlist link to guide

---
 client/components/app/LazyBookshelf.vue | 13 +++++++++++++
 client/strings/en-us.json               |  2 ++
 2 files changed, 15 insertions(+)

diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue
index 29b06df3..22ab731d 100644
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -19,6 +19,14 @@
     </div>
     <div v-else-if="!totalShelves && initialized" class="w-full py-16">
       <p class="text-xl text-center">{{ emptyMessage }}</p>
+      <div v-if="entityName === 'collections' || entityName === 'playlists'" class="flex justify-center mt-4">
+        {{ emptyMessageHelp }}
+        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
+            <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+      </div>
       <!-- Clear filter only available on Library bookshelf -->
       <div v-if="entityName === 'items'" class="flex justify-center mt-2">
         <ui-btn v-if="hasFilter" color="primary" @click="clearFilter">{{ $strings.ButtonClearFilter }}</ui-btn>
@@ -109,6 +117,11 @@ export default {
       }
       return this.$strings.MessageNoResults
     },
+    emptyMessageHelp() {
+      if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollectionsHelp
+      if (this.page === 'playlists') return this.$strings.MessageNoUserPlaylistsHelp
+      return ''
+    },
     entityName() {
       if (!this.page) return 'items'
       return this.page
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 63c5aaf6..e4e1f7cd 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -711,6 +711,7 @@
   "MessageBatchEditPopulateMapDetailsItemHelp": "Populate enabled map details fields with data from this item",
   "MessageBatchQuickMatchDescription": "Quick Match will attempt to add missing covers and metadata for the selected items. Enable the options below to allow Quick Match to overwrite existing covers and/or metadata.",
   "MessageBookshelfNoCollections": "You haven't made any collections yet",
+  "MessageBookshelfNoCollectionsHelp": "Collections are public. All users with access to the library can see them.",
   "MessageBookshelfNoRSSFeeds": "No RSS feeds are open",
   "MessageBookshelfNoResultsForFilter": "No results for filter \"{0}: {1}\"",
   "MessageBookshelfNoResultsForQuery": "No results for query",
@@ -821,6 +822,7 @@
   "MessageNoTasksRunning": "No Tasks Running",
   "MessageNoUpdatesWereNecessary": "No updates were necessary",
   "MessageNoUserPlaylists": "You have no playlists",
+  "MessageNoUserPlaylistsHelp": "Playlists are private. Only the user who creates them can see them.",
   "MessageNotYetImplemented": "Not yet implemented",
   "MessageOpmlPreviewNote": "Note: This is a preview of the parsed OPML file. The actual podcast title will be taken from the RSS feed.",
   "MessageOr": "or",

From 5c0cd98cb3e9be42ecd2323aac392d0e2ff84e31 Mon Sep 17 00:00:00 2001
From: Nicholas Wallace <nicholaslwallace@gmail.com>
Date: Wed, 29 Jan 2025 22:55:34 -0700
Subject: [PATCH 2/3] Add: collection and playlist help text to modal

---
 .../modals/collections/AddCreateModal.vue         | 15 +++++++++++++--
 .../modals/playlists/AddCreateModal.vue           | 14 ++++++++++++--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/client/components/modals/collections/AddCreateModal.vue b/client/components/modals/collections/AddCreateModal.vue
index 94a7f0e7..ee465187 100644
--- a/client/components/modals/collections/AddCreateModal.vue
+++ b/client/components/modals/collections/AddCreateModal.vue
@@ -19,8 +19,19 @@
             </template>
           </transition-group>
         </div>
-        <div v-if="!collections.length" class="flex h-32 items-center justify-center">
-          <p class="text-xl">{{ $strings.MessageNoCollections }}</p>
+        <div v-if="!collections.length" class="flex h-32 items-center justify-center text-center">
+          <div>
+            <p class="text-xl">{{ $strings.MessageNoUserPlaylists }}</p>
+            <p class="text-sm flex items-center justify-center">
+              {{ $strings.MessageBookshelfNoCollectionsHelp }}
+              <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+                <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
+                  <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
+                </a>
+              </ui-tooltip>
+            </p>
+          </div>
+        </div>
         </div>
         <div class="w-full h-px bg-white bg-opacity-10" />
         <form @submit.prevent="submitCreateCollection">
diff --git a/client/components/modals/playlists/AddCreateModal.vue b/client/components/modals/playlists/AddCreateModal.vue
index d1f910b8..51f7e475 100644
--- a/client/components/modals/playlists/AddCreateModal.vue
+++ b/client/components/modals/playlists/AddCreateModal.vue
@@ -19,8 +19,18 @@
             </template>
           </transition-group>
         </div>
-        <div v-if="!playlists.length" class="flex h-32 items-center justify-center">
-          <p class="text-xl">{{ $strings.MessageNoUserPlaylists }}</p>
+        <div v-if="!playlists.length" class="flex h-32 items-center justify-center text-center">
+          <div>
+            <p class="text-xl">{{ $strings.MessageNoUserPlaylists }}</p>
+            <p class="text-sm flex items-center justify-center">
+              {{ $strings.MessageNoUserPlaylistsHelp }}
+              <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+                <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
+                  <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
+                </a>
+              </ui-tooltip>
+            </p>
+          </div>
         </div>
         <div class="w-full h-px bg-white bg-opacity-10" />
         <form @submit.prevent="submitCreatePlaylist">

From 2e13c5bd5021adf37ba63e3c16e2e5647996240d Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 30 Jan 2025 17:47:41 -0600
Subject: [PATCH 3/3] Fix no collections message, ui updates

---
 .../components/modals/collections/AddCreateModal.vue | 12 ++++++------
 .../components/modals/playlists/AddCreateModal.vue   | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/components/modals/collections/AddCreateModal.vue b/client/components/modals/collections/AddCreateModal.vue
index ee465187..c4878adc 100644
--- a/client/components/modals/collections/AddCreateModal.vue
+++ b/client/components/modals/collections/AddCreateModal.vue
@@ -19,20 +19,20 @@
             </template>
           </transition-group>
         </div>
-        <div v-if="!collections.length" class="flex h-32 items-center justify-center text-center">
+        <div v-if="!collections.length" class="flex h-32 items-center justify-center text-center px-2">
           <div>
-            <p class="text-xl">{{ $strings.MessageNoUserPlaylists }}</p>
-            <p class="text-sm flex items-center justify-center">
-              {{ $strings.MessageBookshelfNoCollectionsHelp }}
+            <p class="text-xl mb-2">{{ $strings.MessageNoCollections }}</p>
+            <div class="text-sm flex items-center justify-center text-gray-200">
+              <p>{{ $strings.MessageBookshelfNoCollectionsHelp }}</p>
               <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
                 <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
                   <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
                 </a>
               </ui-tooltip>
-            </p>
+            </div>
           </div>
         </div>
-        </div>
+
         <div class="w-full h-px bg-white bg-opacity-10" />
         <form @submit.prevent="submitCreateCollection">
           <div class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
diff --git a/client/components/modals/playlists/AddCreateModal.vue b/client/components/modals/playlists/AddCreateModal.vue
index 51f7e475..4a7daad9 100644
--- a/client/components/modals/playlists/AddCreateModal.vue
+++ b/client/components/modals/playlists/AddCreateModal.vue
@@ -19,17 +19,17 @@
             </template>
           </transition-group>
         </div>
-        <div v-if="!playlists.length" class="flex h-32 items-center justify-center text-center">
+        <div v-if="!playlists.length" class="flex h-32 items-center justify-center text-center px-2">
           <div>
-            <p class="text-xl">{{ $strings.MessageNoUserPlaylists }}</p>
-            <p class="text-sm flex items-center justify-center">
-              {{ $strings.MessageNoUserPlaylistsHelp }}
+            <p class="text-xl mb-2">{{ $strings.MessageNoUserPlaylists }}</p>
+            <div class="text-sm flex items-center justify-center text-gray-200">
+              <p>{{ $strings.MessageNoUserPlaylistsHelp }}</p>
               <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
                 <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
                   <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
                 </a>
               </ui-tooltip>
-            </p>
+            </div>
           </div>
         </div>
         <div class="w-full h-px bg-white bg-opacity-10" />