Merge pull request #948 from sylvaindd/categories-select

Add categories list from settings in add-new-torrent

client/src/app/add-new-torrent/add-new-torrent.component.html

@@ -220,8 +220,24 @@
 
     <div class="field">
       <label class="label">Category</label>
-      <div class="control">
+      <div class="control category-combo">
-        <input class="input" type="text" [(ngModel)]="category" />
+        <input
+          class="input"
+          type="text"
+          [(ngModel)]="category"
+          (focus)="categoryDropdownOpen = true"
+          (input)="categoryDropdownOpen = true"
+          (blur)="onCategoryBlur()"
+          placeholder="Type or select a category"
+          autocomplete="off"
+        />
+        @if (categoryDropdownOpen && filteredCategories.length > 0) {
+          <div class="category-dropdown">
+            @for (cat of filteredCategories; track $index) {
+              <a class="category-option" (mousedown)="selectCategory(cat)">{{ cat }}</a>
+            }
+          </div>
+        }
       </div>
       <p class="help">The category becomes a sub-folder in your main download path.</p>
     </div>

client/src/app/add-new-torrent/add-new-torrent.component.scss

@@ -27,3 +27,29 @@
 .separator:not(:empty)::after {
   margin-left: 0.25em;
 }
+
+.category-combo {
+  position: relative;
+}
+
+.category-dropdown {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  background: white;
+  border: 1px solid #dbdbdb;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.category-option {
+  display: block;
+  padding: 0.375rem 0.75rem;
+  color: #363636;
+
+  &:hover {
+    background: #f5f5f5;
+  }
+}

client/src/app/add-new-torrent/add-new-torrent.component.ts

@@ -25,6 +25,8 @@ export class AddNewTorrentComponent implements OnInit {
   public downloadClient: number;
 
   public category: string;
+  public categories: string[] = [];
+  public categoryDropdownOpen = false;
   public hostDownloadAction: number = 0;
   public downloadAction: number = 0;
   public finishedAction: number = 0;
@@ -81,6 +83,18 @@ export class AddNewTorrentComponent implements OnInit {
       this.downloadClient = settings.find((m) => m.key === 'DownloadClient:Client')?.value as number;
 
       this.category = settings.find((m) => m.key === 'Gui:Default:Category')?.value as string;
+      const categoriesSetting = settings.find((m) => m.key === 'General:Categories')?.value as string;
+      this.categories = (categoriesSetting ?? '')
+        .split(',')
+        .map((c) => c.trim())
+        .filter((c) => c.length > 0)
+        .filter((c, i, arr) => arr.findIndex((a) => a.toLowerCase() === c.toLowerCase()) === i);
+      const matchedCategory = this.categories.find(
+        (c) => c.toLowerCase() === (this.category ?? '').toLowerCase(),
+      );
+      if (matchedCategory) {
+        this.category = matchedCategory;
+      }
       this.hostDownloadAction = this.downloadAction = settings.find((m) => m.key === 'Gui:Default:HostDownloadAction')
         ?.value as number;
       this.downloadAction =
@@ -100,6 +114,21 @@ export class AddNewTorrentComponent implements OnInit {
     });
   }
 
+  get filteredCategories(): string[] {
+    if (!this.category) return this.categories;
+    const search = this.category.toLowerCase();
+    return this.categories.filter((c) => c.toLowerCase().includes(search));
+  }
+
+  public selectCategory(cat: string): void {
+    this.category = cat;
+    this.categoryDropdownOpen = false;
+  }
+
+  public onCategoryBlur(): void {
+    setTimeout(() => (this.categoryDropdownOpen = false), 150);
+  }
+
   public setFinishAction() {
     if (this.downloadClient === 2) {
       if (this.finishedAction === 1) {