almost functional with selectize

ui/src/app/app.component.html

@@ -58,7 +58,8 @@
             <div ngbDropdownMenu aria-labelledby="advancedButton" class="dropdown-menu dropdown-menu-end folder-dropdown-menu">
               <div class="input-group">
                 <span class="input-group-text">Download Folder</span>
-                <input type="text" class="form-select" name="folder" [(ngModel)]="folder" (change)="folderChanged()" [disabled]="addInProgress || downloads.loading" />
+                <select class="form-select" name="folder" #folderSelect [(ngModel)]="folder" (change)="folderChanged()" [disabled]="addInProgress || downloads.loading">
+                </select>
               </div>
             </div>
           </div>

ui/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { faTrashAlt, faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
 import { faRedoAlt, faSun, faMoon, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
@@ -7,10 +7,13 @@ import { DownloadsService, Status } from './downloads.service';
 import { MasterCheckboxComponent } from './master-checkbox.component';
 import { Formats, Format, Quality } from './formats';
 
+// jQuery is loaded in angular.json for selectize
+declare var $: any;
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.sass']
+  styleUrls: ['./app.component.sass'],
 })
 export class AppComponent implements AfterViewInit {
   addUrl: string;
@@ -19,6 +22,7 @@ export class AppComponent implements AfterViewInit {
   quality: string;
   format: string;
   folder: string;
+  customDirs: string[] = [];
   addInProgress = false;
   darkMode: boolean;
 
@@ -28,6 +32,7 @@ export class AppComponent implements AfterViewInit {
   @ViewChild('doneDelSelected') doneDelSelected: ElementRef;
   @ViewChild('doneClearCompleted') doneClearCompleted: ElementRef;
   @ViewChild('doneClearFailed') doneClearFailed: ElementRef;
+  @ViewChild('folderSelect') folderSelect: ElementRef;
 
   faTrashAlt = faTrashAlt;
   faCheckCircle = faCheckCircle;
@@ -46,6 +51,13 @@ export class AppComponent implements AfterViewInit {
   }
 
   ngAfterViewInit() {
+    // Trigger folderSelect to update
+    this.downloads.customDirsChanged.subscribe((dirs: string[]) => {
+      console.log("customDirsChanged:", dirs);
+    $(this.folderSelect.nativeElement).selectize({options: dirs});
+      this.customDirs = dirs;
+    });
+
     this.downloads.queueChanged.subscribe(() => {
       this.queueMasterCheckbox.selectionChanged();
     });

ui/src/app/downloads.service.ts

@@ -33,8 +33,8 @@ export class DownloadsService {
   done = new Map<string, Download>();
   queueChanged = new Subject();
   doneChanged = new Subject();
+  customDirsChanged = new Subject<string[]>();
   configuration = {};
-  custom_directories = {};
 
   constructor(private http: HttpClient, private socket: MeTubeSocket) {
     socket.fromEvent('all').subscribe((strdata: string) => {
@@ -84,7 +84,8 @@ export class DownloadsService {
     socket.fromEvent('custom_directories').subscribe((strdata: string) => {
       let data = JSON.parse(strdata);
       console.debug("got custom_directories:", data);
-      this.custom_directories = data["directories"];
+      let customDirectories = data["directories"];
+      this.customDirsChanged.next(customDirectories);
     });
   }