Add basic ability to select tag and file services in browse page

src/app/browse/browse.component.html

@@ -29,8 +29,18 @@
     <button mat-icon-button [matMenuTriggerFor]="sortMenu" aria-label="Sort">
       <mat-icon>sort</mat-icon>
     </button>
+    <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="Search Options">
+      <mat-icon>more_vert</mat-icon>
+    </button>
   </app-toolbar-actions>
 
+  <mat-menu #moreMenu="matMenu">
+    <ng-template matMenuContent>
+      <button mat-menu-item (click)="tagServiceDialog()">Tag Service: {{(tagService$ | async)?.name ?? 'Unknown'}}</button>
+      <button mat-menu-item (click)="fileServiceDialog()">File Service: {{(fileService$ | async)?.name ?? 'Unknown'}}</button>
+    </ng-template>
+  </mat-menu>
+
   <mat-menu #sortMenu="matMenu">
     <button mat-menu-item disabled>{{sortToString(sort)}}</button>
     @for (sortGroupOrType of displaySortGroups; track sortGroupOrType) {

src/app/browse/browse.component.ts

@@ -1,14 +1,18 @@
 import { Component, OnInit, AfterViewInit, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
 import { SearchService } from '../search.service';
 import { HydrusFilesService } from '../hydrus-files.service';
-import { BehaviorSubject, catchError, combineLatest, filter, map, Observable, of, shareReplay, Subject, switchMap, tap } from 'rxjs';
+import { BehaviorSubject, catchError, combineLatest, filter, firstValueFrom, map, Observable, of, shareReplay, Subject, switchMap, tap } from 'rxjs';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { SettingsService } from '../settings.service';
 import { HydrusSearchTags } from '../hydrus-tags';
 import { defaultSort, displaySortGroups, HydrusSortType, isDisplaySortMetaTypeGroup, isDisplaySortType, SortInfo, sortToString } from '../hydrus-sort';
 import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ErrorService } from '../error.service';
+import { ALL_KNOWN_TAGS_SERVICE_KEY, ALL_MY_FILES_SERVICE_KEY, getTagServices, isFileService, isNonDeletedFileService } from '../hydrus-services';
+import { ServiceSelectDialogComponent } from '../service-select-dialog/service-select-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { HydrusServicesService } from '../hydrus-services.service';
 
 @UntilDestroy()
 @Component({
@@ -26,6 +30,8 @@ export class BrowseComponent implements OnInit, AfterViewInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private errorService: ErrorService,
+    private dialog: MatDialog,
+    private hydrusServices: HydrusServicesService
     ) {
   }
 
@@ -40,22 +46,33 @@ export class BrowseComponent implements OnInit, AfterViewInit, OnDestroy {
 
   refresh$ = new Subject();
 
+  tagServiceKey$ = new BehaviorSubject(ALL_KNOWN_TAGS_SERVICE_KEY);
+  fileServiceKey$ = new BehaviorSubject(ALL_MY_FILES_SERVICE_KEY);
 
+  tagService$ = combineLatest([this.tagServiceKey$, this.hydrusServices.hydrusServicesArray$]).pipe(
+    map(([serviceKey, services]) => services.find(s => s.service_key === serviceKey))
+  )
+
+  fileService$ = combineLatest([this.fileServiceKey$, this.hydrusServices.hydrusServicesArray$]).pipe(
+    map(([serviceKey, services]) => services.find(s => s.service_key === serviceKey))
+  )
 
   displaySortGroups = displaySortGroups;
   isDisplaySortMetaTypeGroup = isDisplaySortMetaTypeGroup;
   isDisplaySortType = isDisplaySortType;
   sortToString = sortToString;
   defaultSort = defaultSort;
 
-  currentSearch$: Observable<number[]> = combineLatest([this.searchTags$, this.sort$, this.refresh$]).pipe(
+  currentSearch$: Observable<number[]> = combineLatest([this.searchTags$, this.sort$, this.tagServiceKey$, this.fileServiceKey$, this.refresh$]).pipe(
     filter(([searchTags]) => this.settingsService.appSettings.browseSearchWhenEmpty || searchTags.length > 0),
     tap(() => this.searching$.next(true)),
-    switchMap(([searchTags, sort]) => this.searchService.searchFiles(
+    switchMap(([searchTags, sort, tagService, fileService]) => this.searchService.searchFiles(
       searchTags,
       {
         file_sort_type: sort.sortType,
-        file_sort_asc: sort.sortAsc
+        file_sort_asc: sort.sortAsc,
+        tag_service_key: tagService,
+        file_service_key: fileService
       }
     ).pipe(
       catchError(error => {
@@ -112,12 +129,28 @@ export class BrowseComponent implements OnInit, AfterViewInit, OnDestroy {
   setSort(sortType: HydrusSortType, sortAsc: boolean) {
     this.setSortInfo({sortType, sortAsc});
   }
-
-
   resetSort() {
     this.setSortInfo(defaultSort);
   }
 
+  async tagServiceDialog() {
+    const serviceDialog = ServiceSelectDialogComponent.open(this.dialog, {serviceFilter: (services) => getTagServices(services)})
+    const service = await firstValueFrom(serviceDialog.afterClosed())
+    if(!service) {
+      return;
+    }
+    this.tagServiceKey$.next(service.service_key);
+  }
+
+  async fileServiceDialog() {
+    const serviceDialog = ServiceSelectDialogComponent.open(this.dialog, {serviceFilter: (services) => services.filter(isNonDeletedFileService)})
+    const service = await firstValueFrom(serviceDialog.afterClosed())
+    if(!service) {
+      return;
+    }
+    this.fileServiceKey$.next(service.service_key);
+  }
+
 /*   search() {
     if(!this.settingsService.appSettings.browseSearchWhenEmpty && this.searchTags.length === 0) {
       return;

src/app/hydrus-api.service.ts

@@ -149,15 +149,12 @@ export class HydrusApiService {
    public searchFiles<Hashes extends boolean, IDs extends boolean>(
     tags: HydrusSearchTags,
     params: {
-      file_service_name?: string;
-      file_service_key?: string;
-      tag_service_name?: string;
       tag_service_key?: string;
       file_sort_type?: HydrusSortType;
       file_sort_asc?: boolean;
       return_hashes?: Hashes;
       return_file_ids?: IDs;
-    } = {},
+    } & HydrusRequestFileDomain = {},
   ): Observable<
     (Hashes extends true ? { hashes: string[] } : Record<string, never>) &
       (IDs extends true ? { file_ids: number[] } : Record<string, never>)

src/app/hydrus-services.ts

@@ -113,8 +113,13 @@ export function getLocalTagServices(serviceArray: HydrusService[]) {
   return serviceArray.filter(s => s.type === HydrusServiceType.LOCAL_TAG)
 }
 
+export const ALL_KNOWN_TAGS_SERVICE_KEY = '616c6c206b6e6f776e2074616773';
+
+export const ALL_KNOWN_FILES_SERVICE_KEY = '616c6c206b6e6f776e2066696c6573';
+export const ALL_MY_FILES_SERVICE_KEY = '616c6c206c6f63616c206d65646961';
+
 export function getAllKnownTagsService(services: HydrusServices) {
-  return services['616c6c206b6e6f776e2074616773'];
+  return services[ALL_KNOWN_TAGS_SERVICE_KEY];
 }
 
 export function isFileService(service: HydrusServiceSimple) {
@@ -130,3 +135,16 @@ export function isFileService(service: HydrusServiceSimple) {
     HydrusServiceType.COMBINED_DELETED_FILE
   ].includes(service.type);
 }
+
+export function isNonDeletedFileService(service: HydrusServiceSimple) {
+  return [
+    HydrusServiceType.FILE_REPOSITORY,
+    HydrusServiceType.LOCAL_FILE_DOMAIN,
+    HydrusServiceType.LOCAL_FILE_UPDATE_DOMAIN,
+    HydrusServiceType.COMBINED_LOCAL_FILE,
+    HydrusServiceType.COMBINED_LOCAL_MEDIA,
+    HydrusServiceType.COMBINED_FILE,
+    HydrusServiceType.IPFS
+  ].includes(service.type);
+}
+

src/app/search.service.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { HydrusSearchTags } from './hydrus-tags';
 import { HydrusSortType } from './hydrus-sort';
+import { HydrusRequestFileDomain } from './hydrus-api';
 
 @Injectable({
   providedIn: 'root'
@@ -14,13 +15,10 @@ export class SearchService {
 
 
   public searchFiles(tags: HydrusSearchTags, options?: {
-    file_service_name?: string;
-    file_service_key?: string;
-    tag_service_name?: string;
     tag_service_key?: string;
     file_sort_type?: HydrusSortType;
     file_sort_asc?: boolean;
-  }): Observable<number[]> {
+  } & HydrusRequestFileDomain): Observable<number[]> {
     return this.api.searchFiles(
       tags,
       {