Add documentation for setting up Amazon cookies (#1235)

booklore-ui/src/app/settings/global-preferences/metadata-provider-settings/metadata-provider-settings.component.html

@@ -30,7 +30,15 @@
         </div>
 
         <div class="config-field">
-          <label class="config-label">Cookie (Optional)</label>
+          <div class="config-label-row">
+            <label class="config-label">Cookie (Optional, but highly recommended)</label>
+            <i class="pi pi-external-link external-link-icon"
+               pTooltip="Click to view Amazon cookie setup documentation"
+               tooltipPosition="right"
+               (click)="navigateToAmazonCookieDocumentation()"
+               style="cursor: pointer;">
+            </i>
+          </div>
           <p class="config-description">
             <i class="pi pi-info-circle"></i>
             Providing your Amazon session cookie allows the app to access richer book metadata and bypass rate limits. Optional but recommended for best results.
@@ -39,7 +47,8 @@
             type="text"
             pInputText
             placeholder="Paste your Amazon cookie"
-            class="config-input"
+            fluid
+            class="max-w-[60rem]"
             [(ngModel)]="amazonCookie" />
         </div>
       </div>
@@ -82,7 +91,8 @@
             type="text"
             pInputText
             placeholder="Enter Hardcover API token"
-            class="config-input"
+            fluid
+            class="max-w-[60rem]"
             [(ngModel)]="hardcoverToken"
             (ngModelChange)="onTokenChange($event)" />
         </div>
@@ -108,7 +118,8 @@
             type="text"
             pInputText
             placeholder="Enter Comic Vine API token"
-            class="config-input"
+            fluid
+            class="max-w-[60rem]"
             [(ngModel)]="comicvineToken"
             (ngModelChange)="onComicTokenChange($event)" />
         </div>

booklore-ui/src/app/settings/global-preferences/metadata-provider-settings/metadata-provider-settings.component.scss

@@ -102,6 +102,21 @@
     font-size: 0.875rem;
   }
 
+  .config-label-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .config-label {
+      margin: 0;
+    }
+
+    .external-link-icon {
+      color: #0ea5e9 !important;
+      font-size: 0.875rem !important;
+    }
+  }
+
   .config-description {
     display: flex;
     align-items: flex-start;
@@ -118,11 +133,6 @@
     }
   }
 
-  .config-input {
-    width: 100%;
-    max-width: 24rem;
-  }
-
   .config-select {
     width: 100%;
     max-width: 13rem;
@@ -134,4 +144,3 @@
   justify-content: flex-start;
   padding-top: 1rem;
 }
-

booklore-ui/src/app/settings/global-preferences/metadata-provider-settings/metadata-provider-settings.component.ts

@@ -9,6 +9,7 @@ import {filter, take} from 'rxjs/operators';
 import {MessageService} from 'primeng/api';
 import {AppSettingKey} from '../../../core/model/app-settings.model';
 import {Select} from 'primeng/select';
+import {Tooltip} from 'primeng/tooltip';
 
 @Component({
   selector: 'app-metadata-provider-settings',
@@ -19,7 +20,8 @@ import {Select} from 'primeng/select';
     InputText,
     Button,
     FormsModule,
-    Select
+    Select,
+    Tooltip
   ],
   templateUrl: './metadata-provider-settings.component.html',
   styleUrl: './metadata-provider-settings.component.scss'
@@ -142,4 +144,8 @@ export class MetadataProviderSettingsComponent implements OnInit {
         })
     });
   }
+
+  navigateToAmazonCookieDocumentation() {
+    window.open('https://booklore-app.github.io/booklore-docs/docs/metadata/amazon-cookie', '_blank');
+  }
 }