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 @@
- @if (categories.length > 0) {
-
-
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() {