fix template loop references

src/app/modules/presentation/remote/remote.component.html

@@ -37,7 +37,7 @@
             }
             @if (show) {
               <div class="song-parts">
-                @for (section of song.sections; track section; let i = $index) {
+                @for (section of song.sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
                   <div
                     (click)="onSectionClick(song.id, i, show.id)"
             [class.active]="

src/app/modules/presentation/select/select.component.html

@@ -9,7 +9,7 @@
         }
         @if (shows.length>0) {
           <div class="list">
-            @for (show of shows; track show) {
+            @for (show of shows; track show.id) {
               <button (click)="selectShow(show)" mat-stroked-button>
                 <app-user-name [userId]="show.owner"></app-user-name>
                 ,

src/app/modules/shows/edit/edit.component.ts

@@ -7,7 +7,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
-import {Timestamp} from '@angular/fire/firestore';
+import {Timestamp} from 'firebase/firestore';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
 import {MatSelect} from '@angular/material/select';

src/app/modules/shows/services/show-song.service.ts

@@ -5,7 +5,7 @@ import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {UserService} from '../../../services/user/user.service';
 import {ShowService} from './show.service';
-import {arrayRemove, arrayUnion} from '@angular/fire/firestore';
+import {arrayRemove, arrayUnion} from 'firebase/firestore';
 
 @Injectable({
   providedIn: 'root',

src/app/modules/songs/services/song.service.ts

@@ -3,7 +3,7 @@ import {firstValueFrom, Observable} from 'rxjs';
 import {Song} from './song';
 import {SongDataService} from './song-data.service';
 import {UserService} from '../../../services/user/user.service';
-import {Timestamp} from '@angular/fire/firestore';
+import {Timestamp} from 'firebase/firestore';
 
 // declare let importCCLI: any;
 

src/app/modules/songs/song/edit/edit-file/edit-file.component.html

@@ -25,7 +25,7 @@
     </button>
   </div>
 
-  @for (file of files$ | async; track file) {
+  @for (file of files$ | async; track file.id) {
     <p>
       <app-file [file]="file" [songId]="songId"></app-file>
     </p>

src/app/modules/songs/song/edit/history/history.component.html

@@ -1,6 +1,6 @@
 @if (song && song.edits) {
   <app-card heading="letzte Änderungen">
-    @for (edit of song.edits; track edit) {
+    @for (edit of song.edits; track edit.username + '-' + edit.timestamp.toMillis()) {
       <div class="list">
         <div>{{ edit.username }}</div>
         <div>{{ edit.timestamp.toDate() | date: "dd.MM.yyyy" }}</div>

src/app/modules/songs/song/song.component.html

@@ -99,7 +99,7 @@
   @if (files$ | async; as files) {
     @if (files.length > 0) {
       <app-card heading="Anhänge">
-        @for (file of files$ | async; track file) {
+        @for (file of files$ | async; track file.id) {
           <p>
             <app-file [file]="file"></app-file>
           </p>

src/app/modules/user/info/users/users.component.html

@@ -1,5 +1,5 @@
 <app-card heading="registrierte Benutzer">
-  @for (user of users$ | async | sortBy: 'asc':'name'; track user) {
+  @for (user of users$ | async | sortBy: 'asc':'name'; track user.id) {
     <app-user [user]="user"></app-user>
   }
 </app-card>

src/app/services/user/user-song-usage.service.ts

@@ -1,7 +1,7 @@
 import {Injectable, inject} from '@angular/core';
 import {firstValueFrom} from 'rxjs';
 import {take} from 'rxjs/operators';
-import {increment} from '@angular/fire/firestore';
+import {increment} from 'firebase/firestore';
 import {DbService} from '../db.service';
 import {ShowDataService} from '../../modules/shows/services/show-data.service';
 import {ShowSongDataService} from '../../modules/shows/services/show-song-data.service';

src/app/widget-modules/components/song-text/song-text.component.html

@@ -14,13 +14,13 @@
       </button>
     }
     <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
-      @for (section of sections; track section; let i = $index) {
+      @for (section of sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
         <div
           #section
           [class.chorus]="section.type === 1"
           class="section"
           >
-          @for (line of getLines(section); track line) {
+          @for (line of getLines(section); track (line.lineNumber ?? $index) + '-' + line.type + '-' + $index) {
             <div
               [class.chord]="line.type === 0"
               [class.comment]="isComment(line.text)"
@@ -64,13 +64,13 @@
       @if (header) {
         <h1>{{ header }}</h1>
       }
-      @for (section of sections; track section; let i = $index) {
+      @for (section of sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
         <div
           #section
           [class.chorus]="section.type === 1"
           class="section"
           >
-          @for (line of getLines(section); track line) {
+          @for (line of getLines(section); track (line.lineNumber ?? $index) + '-' + line.type + '-' + $index) {
             <div
               [class.chord]="line.type === 0"
               [class.disabled]="checkDisabled(i)"