Add OPDS setup and usage documentation (#1274)

booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.html

@@ -3,6 +3,12 @@
     <h2 class="settings-title">
       <i class="pi pi-server"></i>
       OPDS Settings (New)
+      <i class="pi pi-external-link external-link-icon"
+         pTooltip="Click to view OPDS setup documentation"
+         tooltipPosition="right"
+         (click)="navigateToOpdsDoc()"
+         style="cursor: pointer;">
+      </i>
     </h2>
     <p class="settings-description">
       Manage your OPDS credentials and control how your book collection is shared with reading apps.

booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.scss

@@ -34,6 +34,11 @@
     color: var(--p-primary-color);
     font-size: 1.25rem;
   }
+
+  .external-link-icon {
+    color: #0ea5e9 !important;
+    font-size: 0.875rem !important;
+  }
 }
 
 .settings-description {

booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.ts

@@ -203,6 +203,10 @@ export class OpdsSettingsV2 implements OnInit, OnDestroy {
     this.messageService.add({severity, summary, detail});
   }
 
+  navigateToOpdsDoc(): void {
+    window.open('https://booklore-app.github.io/booklore-docs/docs/integration/opds', '_blank');
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();