From e5579b2c3346c816856e7a9f47740661c6c66699 Mon Sep 17 00:00:00 2001
From: Kieran Eglin <kieran.eglin@gmail.com>
Date: Tue, 28 Nov 2023 11:45:44 -0800
Subject: [PATCH] Improved UI; Added tooltips; Fixed unrelated layout issues

---
 client/components/cards/ItemUploadCard.vue | 27 ++++++++++++----------
 client/pages/upload/index.vue              | 16 +++++++++----
 client/strings/en-us.json                  |  2 ++
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/client/components/cards/ItemUploadCard.vue b/client/components/cards/ItemUploadCard.vue
index 68b77d56..a393a170 100644
--- a/client/components/cards/ItemUploadCard.vue
+++ b/client/components/cards/ItemUploadCard.vue
@@ -8,12 +8,6 @@
       <span class="text-base text-white text-opacity-80 font-mono material-icons">close</span>
     </div>
 
-    <div v-if="!isPodcast"
-      class="w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-primary cursor-pointer"
-      @click="fetchMetadata">
-      <span class="text-base text-white text-opacity-80 font-mono material-icons">refresh</span>
-    </div>
-
     <template v-if="!uploadSuccess && !uploadFailed">
       <widgets-alert v-if="error" type="error">
         <p class="text-base">{{ error }}</p>
@@ -21,24 +15,33 @@
 
       <div class="flex my-2 -mx-2">
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
+          <ui-text-input-with-label v-model.trim="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
         </div>
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-if="!isPodcast" v-model="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
+          <div v-if="!isPodcast" class="flex items-end">
+            <ui-text-input-with-label v-model.trim="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
+            <ui-tooltip :text="$strings.LabelUploaderItemFetchMetadataHelp">
+              <div
+                class="ml-2 mb-1 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-primary cursor-pointer"
+                @click="fetchMetadata">
+                <span class="text-base text-white text-opacity-80 font-mono material-icons">sync</span>
+              </div>
+            </ui-tooltip>
+          </div>
           <div v-else class="w-full">
             <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" />
           </div>
         </div>
       </div>
       <div v-if="!isPodcast" class="flex my-2 -mx-2">
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" />
+          <ui-text-input-with-label v-model.trim="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" inputClass="h-10" />
         </div>
         <div class="w-1/2 px-2">
           <div class="w-full">
-            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
+            <label class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></label>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs h-10" />
           </div>
         </div>
       </div>
diff --git a/client/pages/upload/index.vue b/client/pages/upload/index.vue
index 8dd13990..e29239a0 100644
--- a/client/pages/upload/index.vue
+++ b/client/pages/upload/index.vue
@@ -15,10 +15,16 @@
       </div>
 
       <div v-if="!selectedLibraryIsPodcast" class="flex items-center py-2">
-        <ui-toggle-switch v-model="fetchMetadata.enabled" />
-        <p class="pl-4 text-base">{{ $strings.LabelAutoFetchMetadata }}</p>
+        <label class="flex cursor-pointer">
+          <ui-toggle-switch v-model="fetchMetadata.enabled" />
+          <span class="pl-2 text-base">{{ $strings.LabelAutoFetchMetadata }}</span>
+        </label>
+        <ui-tooltip :text="$strings.LabelAutoFetchMetadataHelp">
+          <span class="pl-1 material-icons icon-text text-sm cursor-pointer">info_outlined</span>
+        </ui-tooltip>
+
         <div class="flex-grow ml-4">
-          <ui-dropdown v-model="fetchMetadata.provider" :items="providers" :label="$strings.LabelProvider" :disabled="!canFetchMetadata" />
+          <ui-dropdown v-model="fetchMetadata.provider" :items="providers" :label="$strings.LabelProvider" />
         </div>
       </div>
 
@@ -110,7 +116,7 @@ export default {
       uploadFinished: false,
       fetchMetadata: {
         enabled: false,
-        provider: 'google'
+        provider: null
       }
     }
   },
@@ -195,7 +201,7 @@ export default {
       }
     },
     setMetadataProvider() {
-      this.fetchMetadata.provider = this.$store.getters['libraries/getLibraryProvider'](this.selectedLibraryId)
+      this.fetchMetadata.provider ||= this.$store.getters['libraries/getLibraryProvider'](this.selectedLibraryId)
     },
     removeItem(item) {
       this.items = this.items.filter((b) => b.index !== item.index)
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 78049f24..5b73de36 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -197,6 +197,7 @@
   "LabelAuthors": "Authors",
   "LabelAutoDownloadEpisodes": "Auto Download Episodes",
   "LabelAutoFetchMetadata": "Auto Fetch Metadata",
+  "LabelAutoFetchMetadataHelp": "Fetches metadata for title, author, and series to streamline uploading. Additional metadata may have to be matched after upload.",
   "LabelAutoLaunch": "Auto Launch",
   "LabelAutoLaunchDescription": "Redirect to the auth provider automatically when navigating to the login page (manual override path <code>/login?autoLaunch=0</code>)",
   "LabelAutoRegister": "Auto Register",
@@ -517,6 +518,7 @@
   "LabelUpdateDetailsHelp": "Allow overwriting of existing details for the selected books when a match is located",
   "LabelUploaderDragAndDrop": "Drag & drop files or folders",
   "LabelUploaderDropFiles": "Drop files",
+  "LabelUploaderItemFetchMetadataHelp": "Automatically fetch title, author, and series",
   "LabelUseChapterTrack": "Use chapter track",
   "LabelUseFullTrack": "Use full track",
   "LabelUser": "User",