fix download folder selection dropdown. closes #678

app/main.py

@@ -224,7 +224,7 @@ def get_custom_dirs():
                 return re.search(config.CUSTOM_DIRS_EXCLUDE_REGEX, d) is None
 
         # Recursively lists all subdirectories of DOWNLOAD_DIR
-        dirs = list(filter(include_dir, map(convert, path.glob('**'))))
+        dirs = list(filter(include_dir, map(convert, path.glob('**/'))))
 
         return dirs
 

ui/src/app/app.component.html

@@ -136,6 +136,11 @@
                               bindLabel="folder" 
                               [(ngModel)]="folder" 
                               [disabled]="addInProgress || downloads.loading"
+                              [virtualScroll]="true"
+                              [clearable]="true"
+                              [loading]="downloads.loading"
+                              [searchable]="true"
+                              [closeOnSelect]="true"
                               ngbTooltip="Choose where to save downloads. Type to create a new folder.">
                     </ng-select>
                   </div>

ui/src/app/app.component.sass

@@ -111,3 +111,18 @@ td
  
   .spinner-border
     margin-right: 0.5rem
+
+::ng-deep .ng-select
+    flex: 1
+    .ng-select-container
+        min-height: 38px
+    .ng-value
+        white-space: nowrap
+        overflow: visible
+    .ng-dropdown-panel
+        .ng-dropdown-panel-items
+            max-height: 300px
+            .ng-option
+                white-space: nowrap
+                overflow: visible
+                text-overflow: ellipsis

ui/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { faTrashAlt, faCheckCircle, faTimesCircle, IconDefinition } from '@fortawesome/free-regular-svg-icons';
 import { faRedoAlt, faSun, faMoon, faCircleHalfStroke, faCheck, faExternalLinkAlt, faDownload, faFileImport, faFileExport, faCopy } from '@fortawesome/free-solid-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
-import { map, Observable, of } from 'rxjs';
+import { map, Observable, of, distinctUntilChanged } from 'rxjs';
 
 import { Download, DownloadsService, Status } from './downloads.service';
 import { MasterCheckboxComponent } from './master-checkbox.component';
@@ -135,7 +135,8 @@ export class AppComponent implements AfterViewInit {
   }
 
   getMatchingCustomDir() : Observable<string[]> {
-    return this.downloads.customDirsChanged.asObservable().pipe(map((output) => {
+    return this.downloads.customDirsChanged.asObservable().pipe(
+      map((output) => {
         // Keep logic consistent with app/ytdl.py
         if (this.isAudioType()) {
           console.debug("Showing audio-specific download directories");
@@ -144,7 +145,9 @@ export class AppComponent implements AfterViewInit {
           console.debug("Showing default download directories");
           return output["download_dir"];
         }
-    }));
+      }),
+      distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
+    );
   }
 
   getConfiguration() {