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