From e2195944e4e5f5c9bc366c033a3ef294d124014c Mon Sep 17 00:00:00 2001
From: Sylvain DUARTE <syduarte@bouyguestelecom.fr>
Date: Sat, 14 Mar 2026 11:46:00 +0100
Subject: [PATCH 1/2] Add categories list from settings in add-new-torrent

(cherry picked from commit 20b08c52a73f1f2725d96a520c7cdd511906b8ef)
---
 .../add-new-torrent.component.html            | 23 ++++++++++++++++---
 .../add-new-torrent.component.ts              | 17 ++++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/client/src/app/add-new-torrent/add-new-torrent.component.html b/client/src/app/add-new-torrent/add-new-torrent.component.html
index 56b1c68..8156fc9 100644
--- a/client/src/app/add-new-torrent/add-new-torrent.component.html
+++ b/client/src/app/add-new-torrent/add-new-torrent.component.html
@@ -220,9 +220,26 @@
 
     <div class="field">
       <label class="label">Category</label>
-      <div class="control">
-        <input class="input" type="text" [(ngModel)]="category" />
-      </div>
+      @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>
+            }
+            <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>
+      }
       <p class="help">The category becomes a sub-folder in your main download path.</p>
     </div>
 
diff --git a/client/src/app/add-new-torrent/add-new-torrent.component.ts b/client/src/app/add-new-torrent/add-new-torrent.component.ts
index a96198c..47dd1e0 100644
--- a/client/src/app/add-new-torrent/add-new-torrent.component.ts
+++ b/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 categorySelect: string = '';
   public hostDownloadAction: number = 0;
   public downloadAction: number = 0;
   public finishedAction: number = 0;
@@ -81,6 +83,13 @@ 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);
+      if (this.categories.includes(this.category)) {
+        this.categorySelect = this.category;
+      } else if (this.category) {
+        this.categorySelect = '__custom__';
+      }
       this.hostDownloadAction = this.downloadAction = settings.find((m) => m.key === 'Gui:Default:HostDownloadAction')
         ?.value as number;
       this.downloadAction =
@@ -100,6 +109,14 @@ export class AddNewTorrentComponent implements OnInit {
     });
   }
 
+  public onCategorySelectChange(value: string): void {
+    if (value !== '__custom__') {
+      this.category = value;
+    } else {
+      this.category = '';
+    }
+  }
+
   public setFinishAction() {
     if (this.downloadClient === 2) {
       if (this.finishedAction === 1) {

From cf278e2964347186ba49f8f8143fcb8dc7de2554 Mon Sep 17 00:00:00 2001
From: Sylvain DUARTE <syduarte@bouyguestelecom.fr>
Date: Sat, 14 Mar 2026 18:25:03 +0100
Subject: [PATCH 2/2] Implement category dropdown for add-new-torrent component

---
 .../add-new-torrent.component.html            | 33 +++++++++--------
 .../add-new-torrent.component.scss            | 26 ++++++++++++++
 .../add-new-torrent.component.ts              | 36 ++++++++++++-------
 3 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/client/src/app/add-new-torrent/add-new-torrent.component.html b/client/src/app/add-new-torrent/add-new-torrent.component.html
index 8156fc9..143f2f9 100644
--- a/client/src/app/add-new-torrent/add-new-torrent.component.html
+++ b/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>
 
diff --git a/client/src/app/add-new-torrent/add-new-torrent.component.scss b/client/src/app/add-new-torrent/add-new-torrent.component.scss
index c7038b4..6569a7a 100644
--- a/client/src/app/add-new-torrent/add-new-torrent.component.scss
+++ b/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;
+  }
+}
diff --git a/client/src/app/add-new-torrent/add-new-torrent.component.ts b/client/src/app/add-new-torrent/add-new-torrent.component.ts
index 47dd1e0..2728321 100644
--- a/client/src/app/add-new-torrent/add-new-torrent.component.ts
+++ b/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() {