Various fixes

src/app/app-settings/app-settings.component.html

@@ -21,7 +21,7 @@ <h2>Upload</h2>
       <mat-label>Filename Tag Service</mat-label>
       <mat-select formControlName="uploadFilenameTagService">
         <mat-option>None (disabled)</mat-option>
-        @for (service of (apiSettings.apiSet ? (tagServices$ | async) : []); track service) {
+        @for (service of (apiSettings.apiSet ? (tagServices$ | async) : []); track service.service_key) {
           <mat-option [value]="service.service_key">
             {{service.name}}
           </mat-option>

src/app/browse/browse.component.html

@@ -49,7 +49,7 @@
 
   <mat-menu #sortGroupSubMenu="matMenu">
     <ng-template matMenuContent let-sortGroup="sortGroup">
-      @for (sortType of sortGroup.sortTypes; track sortType) {
+      @for (sortType of sortGroup.sortTypes; track sortType.sortType) {
         @if (!sortType.sortOrder.canAsc) {
           <button type="button" mat-menu-item [disabled]="sort.sortType === sortType.sortType" (click)="setSort(sortType.sortType, sortType.sortOrder.defaultAsc)">{{sortType.basicString}}</button>
         } @else {

src/app/file-info-sheet/file-info-sheet.component.html

@@ -129,7 +129,7 @@ <h2 mat-dialog-title class="sheet-title">File Info</h2>
             Ratings
           </mat-expansion-panel-header>
           <mat-list>
-            @for (rating of file.ratings_array; track trackByRating($index, rating)) {
+            @for (rating of file.ratings_array; track rating.service_key) {
               @if (isNumericalRatingService(rating)) {
                 <mat-list-item>
                   <p matLine>{{rating.name}} ({{rating.value ?? 'not set'}})</p>
@@ -175,7 +175,7 @@ <h3 class="mat-subheading-2">Notes</h3>
           <button mat-icon-button (click)="addNoteDialog()" matTooltip="Add note"><mat-icon>note_add</mat-icon></button>
         </div>
         <mat-accordion multi>
-          @for (note of file.notesMapArray; track trackByNote($index, note)) {
+          @for (note of file.notesMapArray; track note.name) {
             <mat-expansion-panel >
               <mat-expansion-panel-header>
                 {{note.name}}
@@ -202,7 +202,7 @@ <h3 class="mat-subheading-2">Tags</h3>
           <mat-slide-toggle labelPosition="before" [(ngModel)]="fileInfoSheetService.showStorageTags" [disabled]="!file.storageTags">Edit mode</mat-slide-toggle>
         </div>
         <mat-accordion multi>
-          @for (service of (fileInfoSheetService.showStorageTags ? file.storageTags : file.displayTags) | orderBy: 'serviceName' | orderBy: '-serviceType'; track trackByTagService($index, service)) {
+          @for (service of (fileInfoSheetService.showStorageTags ? file.storageTags : file.displayTags) | orderBy: 'serviceName' | orderBy: '-serviceType'; track service.serviceKey ?? service.serviceName) {
             <mat-expansion-panel >
               <mat-expansion-panel-header>
                 {{service.serviceName}} ({{service.tags.length}})

src/app/file-info-sheet/file-info-sheet.component.ts

@@ -158,18 +158,6 @@ export class FileInfoSheetComponent {
     this.reload$.next(null);
   }
 
-  trackByTagService(index: number, item: TagServiceItem) {
-    return item.serviceKey ?? item.serviceName;
-  }
-
-  trackByNote(index: number, item: { name: string, value: string }) {
-    return item.name;
-  }
-
-  trackByRating(index: number, rating: HydrusRating) {
-    return rating.service_key;
-  }
-
 
   navigatorShare = navigator.share;
 

src/app/image-list/image-list.component.html

@@ -1,7 +1,7 @@
 <virtual-scroller class="virtual-scroll" #scroll [items]="files" (vsEnd)="vsEnd($event)"
   [parentScroll]="scrollElement" [bufferAmount]="24">
   <ul class="mdc-image-list browse-image-list" #container>
-    @for (file of scroll.viewPortItems; track scrollTrackByFunction($index, file)) {
+    @for (file of scroll.viewPortItems; track file.file_id) {
       <li class="mdc-image-list__item grid-item"
         >
         <a [href]="file.file_url"

src/app/image-list/image-list.component.ts

@@ -47,8 +47,4 @@ export class ImageListComponent implements OnInit, OnChanges {
     }
   }
 
-  public scrollTrackByFunction(index: number, file: HydrusBasicFile): number {
-    return file.file_id;
-  }
-
 }

src/app/pages/pages.component.html

@@ -2,7 +2,7 @@
   <ng-template #recursiveList let-list>
 
     <mat-tab-group animationDuration="0ms" dynamicHeight class="pages-tab-group">
-      @for (page of list; track page) {
+      @for (page of list; track page.page_key) {
         <mat-tab>
           <ng-template mat-tab-label>
             <div [matTooltip]="page.name" class="mat-tab-label-content">

src/app/send/send.component.html

@@ -44,7 +44,7 @@ <h2 class="mat-display-1">Send to Hydrus</h2>
                   Not yet imported
                 </mat-list-item>
               }
-              @for (file of this.currentUrlFiles.url_file_statuses; track file) {
+              @for (file of this.currentUrlFiles.url_file_statuses; track file.hash) {
                 <mat-list-item class="file-list-item">
                   @if (file.status === 2) {
                     <mat-icon matListIcon>check</mat-icon>

src/app/service-select-dialog/service-select-dialog.component.html

@@ -5,7 +5,7 @@ <h1 mat-dialog-title>{{this.data.title}}</h1>
       <mat-form-field appearance="outline" hideRequiredMarker>
         <mat-label>Service</mat-label>
         <mat-select formControlName="service" [compareWith]="serviceCompare">
-          @for (service of services$ | async; track service) {
+          @for (service of services$ | async; track service.service_key) {
             <mat-option [value]="service">
               {{service.name}}
             </mat-option>

src/app/services-info-dialog/services-info-dialog.component.html

@@ -3,7 +3,7 @@ <h1 mat-dialog-title>Hydrus Services</h1>
   @if (services.hydrusServicesArray$ | async; as services) {
     <div>
       <mat-list>
-        @for (service of services; track service) {
+        @for (service of services; track service.service_key) {
           <mat-list-item>
             <h2 matLine>{{service.name}}</h2>
             <p matLine>{{service.type_pretty}}</p>

src/app/tag-input/tag-input.component.html

@@ -53,7 +53,7 @@
           </mat-option>
         </cdk-virtual-scroll-viewport>
       } @else {
-        @for (tag of tags; track tag) {
+        @for (tag of tags; track tag.value) {
           <mat-option [value]="tag.value" [ngClass]="tag.value | tagClass" class="tag-color">
             {{tag.value}} ({{tag.count | number}})
           </mat-option>
@@ -86,7 +86,7 @@
   </mat-menu>
 
   <mat-menu #predicatesMenu="matMenu">
-    @for (pred of predicateButtons; track pred) {
+    @for (pred of predicateButtons; track pred.name) {
       @if (isConvertedPredicateSingle(pred)) {
         <button type="button" mat-menu-item (click)="systemPredicateButton(pred.predicate)">{{pred.name}}</button>
       } @else {
@@ -99,7 +99,7 @@
 
   <mat-menu #predicateSubMenu="matMenu">
     <ng-template matMenuContent let-predicates="predicates">
-      @for (pred of predicates; track pred) {
+      @for (pred of predicates; track pred.predicate) {
         <button mat-menu-item (click)="systemPredicateButton(pred.predicate)">{{pred.name}}</button>
       }
     </ng-template>

src/app/tag-siblings-parents-dialog/tag-siblings-parents-dialog.component.html

@@ -4,7 +4,7 @@ <h1 mat-dialog-title>Siblings and Parents for "{{data.tag}}"</h1>
   @if (siblingsAndParents$ | async; as siblingsAndParents) {
     <div>
       <mat-tab-group animationDuration="0ms" dynamicHeight>
-        @for (service of siblingsAndParents | orderBy: 'serviceName' | orderBy: '-serviceType'; track trackByTagService($index, service)) {
+        @for (service of siblingsAndParents | orderBy: 'serviceName' | orderBy: '-serviceType'; track service.serviceKey) {
           <mat-tab [label]="service.serviceName">
             <ng-template matTabContent>
               <p>

src/app/tag-siblings-parents-dialog/tag-siblings-parents-dialog.component.ts

@@ -44,10 +44,6 @@ export class TagSiblingsParentsDialogComponent implements OnInit {
     );
   }
 
-  trackByTagService(index: number, item: {serviceKey: string}) {
-    return item.serviceKey;
-  }
-
   searchTag(tag: string) {
     this.dialogRef.close({action: 'searchTag', tag});
   }