Implement category dropdown for add-new-torrent component

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

@@ -220,26 +220,25 @@
 
     <div class="field">
       <label class="label">Category</label>
-      @if (categories.length > 0) {
-        <div class="control select is-fullwidth">
-          <select [(ngModel)]="categorySelect" (ngModelChange)="onCategorySelectChange($event)">
-            <option value="">— None —</option>
-            @for (cat of categories; track cat) {
-              <option [value]="cat">{{ cat }}</option>
+      <div class="control category-combo">
+        <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>
             }
-            <option value="__custom__">Custom…</option>
-          </select>
-        </div>
-        @if (categorySelect === '__custom__') {
-          <div class="control" style="margin-top: 0.5rem">
-            <input class="input" type="text" placeholder="Enter custom category" [(ngModel)]="category" />
           </div>
         }
-      } @else {
-        <div class="control">
-          <input class="input" type="text" [(ngModel)]="category" />
-        </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

@@ -26,7 +26,7 @@ export class AddNewTorrentComponent implements OnInit {
 
   public category: string;
   public categories: string[] = [];
-  public categorySelect: string = '';
+  public categoryDropdownOpen = false;
   public hostDownloadAction: number = 0;
   public downloadAction: number = 0;
   public finishedAction: number = 0;
@@ -84,11 +84,16 @@ export class AddNewTorrentComponent implements OnInit {
 
       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);
-      if (this.categories.includes(this.category)) {
-        this.categorySelect = this.category;
-      } else if (this.category) {
-        this.categorySelect = '__custom__';
+      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;
@@ -109,12 +114,19 @@ export class AddNewTorrentComponent implements OnInit {
     });
   }
 
-  public onCategorySelectChange(value: string): void {
-    if (value !== '__custom__') {
-      this.category = value;
-    } else {
-      this.category = '';
-    }
+  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() {