optimize show filter

.run/start.run.xml

@@ -7,6 +7,9 @@
     </scripts>
     <node-interpreter value="project" />
     <envs />
+    <EXTENSION ID="com.intellij.lang.javascript.buildTools.npm.rc.StartBrowserRunConfigurationExtension">
+      <browser name="98ca6316-2f89-46d9-a9e5-fa9e2b0625b3" start="true" with-js-debugger="true" url="http://localhost.4200" />
+    </EXTENSION>
     <method v="2" />
   </configuration>
 </component>

README.md

@@ -1 +1,19 @@
 # wgenerator
+
+## Admin migration
+
+If `songUsage` needs to be rebuilt from all existing shows, log in with a user that has the `admin` role and run this in the browser console:
+
+```js
+await window.wgeneratorAdmin.rebuildSongUsage()
+```
+
+The migration:
+
+- resets `songUsage` for all users
+- scans all shows and all `shows/{id}/songs` entries
+- rebuilds the per-user counters based on show ownership
+
+It returns a summary object with processed user, show and show-song counts.
+
+This is intended as a manual one-off migration and is read-heavy by design.

src/app/animations.ts

@@ -25,7 +25,7 @@ export const fader = trigger('fader', [
           transform: 'scale(1) translateY(-10px)',
         }),
       ],
-      {optional: true},
+      {optional: true}
     ),
     // Animate the new page in
     query(
@@ -36,10 +36,10 @@ export const fader = trigger('fader', [
           style({
             opacity: 1,
             transform: 'scale(1) translateY(0)',
-          }),
+          })
         ),
       ],
-      {optional: true},
+      {optional: true}
     ),
   ]),
 ]);

src/app/app-routing.module.ts

@@ -60,5 +60,4 @@ const routes: Routes = [
   ],
   exports: [RouterModule],
 })
-export class AppRoutingModule {
-}
+export class AppRoutingModule {}

src/app/app.component.less

@@ -1,3 +1,3 @@
 h1 {
-  color: red;
+  color: var(--text);
 }

src/app/app.component.spec.ts

@@ -3,14 +3,11 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        imports: [RouterTestingModule],
-        declarations: [AppComponent],
+      imports: [RouterTestingModule, AppComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

@@ -2,6 +2,8 @@ import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
 import {fader} from './animations';
 import {ScrollService} from './services/scroll.service';
 import {register} from 'swiper/element/bundle';
+import {RouterOutlet} from '@angular/router';
+import {NavigationComponent} from './widget-modules/components/application-frame/navigation/navigation.component';
 
 @Component({
   selector: 'app-root',
@@ -9,7 +11,7 @@ import {register} from 'swiper/element/bundle';
   styleUrls: ['./app.component.less'],
   animations: [fader],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [RouterOutlet, NavigationComponent],
 })
 export class AppComponent implements OnInit {
   public constructor(private scrollService: ScrollService) {

src/app/app.module.ts

@@ -1,44 +0,0 @@
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-
-import {AppRoutingModule} from './app-routing.module';
-import {AppComponent} from './app.component';
-import {ServiceWorkerModule} from '@angular/service-worker';
-import {environment} from '../environments/environment';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ApplicationFrameModule} from './widget-modules/components/application-frame/application-frame.module';
-import {AngularFireModule} from '@angular/fire/compat';
-import {AngularFirestoreModule} from '@angular/fire/compat/firestore';
-import {AngularFireStorageModule} from '@angular/fire/compat/storage';
-import {AngularFireDatabaseModule} from '@angular/fire/compat/database';
-import {AngularFireAuthModule} from '@angular/fire/compat/auth';
-import {AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';
-import {MAT_DATE_LOCALE} from '@angular/material/core';
-import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: environment.production,
-    }),
-    BrowserAnimationsModule,
-
-    ApplicationFrameModule,
-
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFirestoreModule.enablePersistence({synchronizeTabs: true}),
-    AngularFireStorageModule,
-    AngularFireDatabaseModule,
-    AngularFireAuthModule,
-    AngularFireAuthGuardModule,
-    FontAwesomeModule,
-  ],
-  providers: [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}],
-  bootstrap: [AppComponent],
-})
-export class AppModule {
-}

src/app/modules/brand/brand.component.spec.ts

@@ -6,13 +6,11 @@ describe('BrandComponent', () => {
   let component: BrandComponent;
   let fixture: ComponentFixture<BrandComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [BrandComponent],
+      imports: [BrandComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BrandComponent);

src/app/modules/brand/brand.component.ts

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
+import {LogoComponent} from '../../widget-modules/components/logo/logo.component';
 
 @Component({
   selector: 'app-brand',
   templateUrl: './brand.component.html',
   styleUrls: ['./brand.component.less'],
-  standalone: false,
+  imports: [LogoComponent],
 })
-export class BrandComponent {
-}
+export class BrandComponent {}

src/app/modules/brand/brand.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {BrandComponent} from './brand.component';
 import {RouterModule, Routes} from '@angular/router';
-import {LogoModule} from '../../widget-modules/components/logo/logo.module';
+
 import {NewUserComponent} from './new-user/new-user.component';
 
 const routes: Routes = [
@@ -18,8 +18,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [BrandComponent, NewUserComponent],
-  imports: [CommonModule, RouterModule.forChild(routes), LogoModule],
+  imports: [CommonModule, RouterModule.forChild(routes), BrandComponent, NewUserComponent],
 })
-export class BrandModule {
-}
+export class BrandModule {}

src/app/modules/brand/new-user/new-user.component.less

@@ -1,4 +1,6 @@
-@animation-duration: 20s;
+:host {
+  --animation-duration: 20s;
+}
 
 .frame {
   width: 512px;
@@ -11,10 +13,10 @@
 .brand {
   position: absolute;
   left: 0;
-  animation: @animation-duration brand ease-in-out forwards;
+  animation: var(--animation-duration) brand ease-in-out forwards;
   opacity: 0;
   @media screen and (max-width: 860px) {
-    animation: @animation-duration brand-mobile ease-in-out forwards;
+    animation: var(--animation-duration) brand-mobile ease-in-out forwards;
   }
 }
 
@@ -34,7 +36,7 @@
     @media screen and (max-width: 860px) {
       font-size: 40px;
     }
-    animation: @animation-duration welcome ease-in-out forwards;
+    animation: var(--animation-duration) welcome ease-in-out forwards;
   }
 
   .name {
@@ -43,14 +45,14 @@
     @media screen and (max-width: 860px) {
       font-size: 30px;
     }
-    animation: @animation-duration name ease-in-out forwards;
+    animation: var(--animation-duration) name ease-in-out forwards;
   }
 
   .roles {
     opacity: 0;
     font-size: 20px;
     margin-top: 40px;
-    animation: @animation-duration roles ease-in-out forwards;
+    animation: var(--animation-duration) roles ease-in-out forwards;
   }
 }
 

src/app/modules/brand/new-user/new-user.component.spec.ts

@@ -6,13 +6,11 @@ describe('NewUserComponent', () => {
   let component: NewUserComponent;
   let fixture: ComponentFixture<NewUserComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [NewUserComponent],
+      imports: [NewUserComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewUserComponent);

src/app/modules/brand/new-user/new-user.component.ts

@@ -2,12 +2,14 @@ import {Component} from '@angular/core';
 import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
+import {BrandComponent} from '../brand.component';
+import {AsyncPipe, NgIf} from '@angular/common';
 
 @Component({
   selector: 'app-new-user',
   templateUrl: './new-user.component.html',
   styleUrls: ['./new-user.component.less'],
-  standalone: false,
+  imports: [BrandComponent, NgIf, AsyncPipe],
 })
 export class NewUserComponent {
   public user$: Observable<User | null> | null = null;

src/app/modules/guest/guest-show-data.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
+import {Observable} from 'rxjs';
+import {shareReplay} from 'rxjs/operators';
 import {DbService} from 'src/app/services/db.service';
 import {GuestShow} from './guest-show';
 
@@ -8,14 +8,17 @@ import {GuestShow} from './guest-show';
   providedIn: 'root',
 })
 export class GuestShowDataService {
-  public list$: BehaviorSubject<GuestShow[]> = new BehaviorSubject<GuestShow[]>([]);
   private collection = 'guest';
+  public list$: Observable<GuestShow[]> = this.dbService.col$<GuestShow>(this.collection).pipe(
+    shareReplay({
+      bufferSize: 1,
+      refCount: true,
+    })
+  );
 
-  public constructor(private dbService: DbService) {
-    this.dbService.col$<GuestShow>(this.collection).subscribe(_ => this.list$.next(_));
-  }
+  public constructor(private dbService: DbService) {}
 
-  public read$: (id: string) => Observable<GuestShow | null> = (id: string): Observable<GuestShow | null> => this.list$.pipe(map(_ => _.find(s => s.id === id) || null));
+  public read$: (id: string) => Observable<GuestShow | null> = (id: string): Observable<GuestShow | null> => this.dbService.doc$(`${this.collection}/${id}`);
   public update$: (id: string, data: Partial<GuestShow>) => Promise<void> = async (id: string, data: Partial<GuestShow>): Promise<void> =>
     await this.dbService.doc(this.collection + '/' + id).update(data);
   public add: (data: Partial<GuestShow>) => Promise<string> = async (data: Partial<GuestShow>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;

src/app/modules/guest/guest-show.service.ts

@@ -10,9 +10,8 @@ import {ShowService} from '../shows/services/show.service';
 export class GuestShowService {
   public constructor(
     private showService: ShowService,
-    private guestShowDataService: GuestShowDataService,
-  ) {
-  }
+    private guestShowDataService: GuestShowDataService
+  ) {}
 
   public async share(show: Show, songs: Song[]): Promise<string> {
     const data = {

src/app/modules/guest/guest.component.less

@@ -1,5 +1,5 @@
 .page {
-  background: #0009;
+  background: var(--overlay);
   position: fixed;
   top: 0;
   bottom: 0;
@@ -7,15 +7,15 @@
   right: 0;
   backdrop-filter: blur(8px);
 
-  --swiper-scrollbar-bg-color: #fff3;
-  --swiper-scrollbar-drag-bg-color: #fff9;
+  --swiper-scrollbar-bg-color: rgba(247, 251, 255, 0.2);
+  --swiper-scrollbar-drag-bg-color: rgba(247, 251, 255, 0.6);
   --swiper-scrollbar-sides-offset: 20px;
   --swiper-scrollbar-top: 100px;
   --swiper-scrollbar-bottom: auto;
 }
 
 .title {
-  color: white;
+  color: var(--text-inverse);
   padding: 70px 20px 0;
   display: flex;
   justify-content: space-between;
@@ -23,7 +23,7 @@
 
   .left {
     font-size: 1.8em;
-    color: #fff;
+    color: var(--text-inverse);
   }
 }
 
@@ -35,7 +35,7 @@
 .legal {
   padding: 0 20px;
   font-size: 0.6em;
-  color: #fff9;
+  color: rgba(247, 251, 255, 0.72);
 }
 
 .view {
@@ -44,7 +44,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  color: white;
+  color: var(--text-inverse);
 }
 
 app-song-text {

src/app/modules/guest/guest.component.spec.ts

@@ -6,13 +6,11 @@ describe('GuestComponent', () => {
   let component: GuestComponent;
   let fixture: ComponentFixture<GuestComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [GuestComponent],
+      imports: [GuestComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(GuestComponent);

src/app/modules/guest/guest.component.ts

@@ -1,29 +1,32 @@
-import {Component} from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {GuestShowDataService} from './guest-show-data.service';
 import {ActivatedRoute} from '@angular/router';
 import {map, switchMap} from 'rxjs/operators';
 import {Song} from '../songs/services/song';
 import {ConfigService} from '../../services/config.service';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-guest',
   templateUrl: './guest.component.html',
   styleUrls: ['./guest.component.less'],
-  standalone: false,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [NgIf, NgFor, SongTextComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class GuestComponent {
   public show$ = this.currentRoute.params.pipe(
     map(param => param.id as string),
-    switchMap(id => this.service.read$(id)),
+    switchMap(id => this.service.read$(id))
   );
   public config$ = this.configService.get$();
 
   public constructor(
     private currentRoute: ActivatedRoute,
     private service: GuestShowDataService,
-    private configService: ConfigService,
-  ) {
-  }
+    private configService: ConfigService
+  ) {}
 
   public trackBy = (index: number, show: Song) => show.id;
 }

src/app/modules/guest/guest.module.ts

@@ -2,11 +2,10 @@ import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GuestComponent} from './guest.component';
 import {RouterModule} from '@angular/router';
-import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @NgModule({
-  declarations: [GuestComponent],
   imports: [
     CommonModule,
     RouterModule.forChild([
@@ -16,7 +15,8 @@ import {SongTextComponent} from '../../widget-modules/components/song-text/song-
       },
     ]),
     SongTextComponent,
-    ShowTypeTranslaterModule,
+    ShowTypePipe,
+    GuestComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

src/app/modules/presentation/monitor/legal/legal.component.spec.ts

@@ -6,13 +6,11 @@ describe('LegalComponent', () => {
   let component: LegalComponent;
   let fixture: ComponentFixture<LegalComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [LegalComponent],
+      imports: [LegalComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LegalComponent);

src/app/modules/presentation/monitor/legal/legal.component.ts

@@ -1,12 +1,13 @@
 import {Component, Input} from '@angular/core';
 import {Song} from '../../../songs/services/song';
 import {Config} from '../../../../services/config';
+import {NgIf} from '@angular/common';
 
 @Component({
   selector: 'app-legal',
   templateUrl: './legal.component.html',
   styleUrls: ['./legal.component.less'],
-  standalone: false,
+  imports: [NgIf],
 })
 export class LegalComponent {
   @Input() public song: Song | null = null;

src/app/modules/presentation/monitor/logo/logo.component.spec.ts

@@ -6,13 +6,11 @@ describe('LogoComponent', () => {
   let component: LogoComponent;
   let fixture: ComponentFixture<LogoComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [LogoComponent],
+      imports: [LogoComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LogoComponent);

src/app/modules/presentation/monitor/logo/logo.component.ts

@@ -4,7 +4,5 @@ import {Component} from '@angular/core';
   selector: 'app-logo',
   templateUrl: './logo.component.html',
   styleUrls: ['./logo.component.less'],
-  standalone: false,
 })
-export class LogoComponent {
-}
+export class LogoComponent {}

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

@@ -34,8 +34,8 @@
     [fullscreen]="true"
     [header]="song.title"
     [index]="index??0"
-    [showSwitch]="false"
     [showComments]="false"
+    [showSwitch]="false"
     [text]="song.text"
     chordMode="hide"
   ></app-song-text>

src/app/modules/presentation/monitor/monitor.component.spec.ts

@@ -6,13 +6,11 @@ describe('MonitorComponent', () => {
   let component: MonitorComponent;
   let fixture: ComponentFixture<MonitorComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [MonitorComponent],
+      imports: [MonitorComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MonitorComponent);

src/app/modules/presentation/monitor/monitor.component.ts

@@ -1,27 +1,30 @@
-import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
-import {debounceTime, distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators';
+import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+import {debounceTime, distinctUntilChanged, filter, map, shareReplay, switchMap, takeUntil, tap} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
-import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Config} from '../../../services/config';
-import {Observable} from 'rxjs';
+import {Observable, Subject} from 'rxjs';
 import {ConfigService} from '../../../services/config.service';
 import {songSwitch} from '../../../widget-modules/components/song-text/animation';
-import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {PresentationBackground, Show} from '../../shows/services/show';
-import {GlobalSettings} from '../../../services/global-settings';
+import {ShowSong} from '../../shows/services/show-song';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {openFullscreen} from '../../../services/fullscreen';
+import {AsyncPipe, DatePipe, NgIf} from '@angular/common';
+import {LogoComponent} from './logo/logo.component';
+import {SongTextComponent} from '../../../widget-modules/components/song-text/song-text.component';
+import {LegalComponent} from './legal/legal.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-monitor',
   templateUrl: './monitor.component.html',
   styleUrls: ['./monitor.component.less'],
   animations: [songSwitch],
-  standalone: false,
+  imports: [NgIf, LogoComponent, SongTextComponent, LegalComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
-export class MonitorComponent implements OnInit {
+export class MonitorComponent implements OnInit, OnDestroy {
   public song: Song | null = null;
   public zoom = 10;
   public currentShowId: string | null = null;
@@ -33,55 +36,82 @@ export class MonitorComponent implements OnInit {
   public date: Date | null = null;
   public config$: Observable<Config | null>;
   public presentationBackground: PresentationBackground = 'none';
+  private destroy$ = new Subject<void>();
 
   public constructor(
     private showService: ShowService,
     private showSongService: ShowSongService,
-    private songService: SongService,
-    private textRenderingService: TextRenderingService,
     private globalSettingsService: GlobalSettingsService,
     private configService: ConfigService,
-    private cRef: ChangeDetectorRef,
+    private cRef: ChangeDetectorRef
   ) {
     this.config$ = configService.get$();
   }
 
   public ngOnInit(): void {
     openFullscreen();
-    this.globalSettingsService.get$
+    const currentShowId$ = this.globalSettingsService.get$
       .pipe(
         debounceTime(100),
         filter(_ => !!_),
-        map(_ => _ as GlobalSettings),
+        map(_ => _),
         map(_ => _.currentShow),
         distinctUntilChanged(),
         tap(_ => (this.currentShowId = _)),
-      )
+        takeUntil(this.destroy$)
+      );
+
+    const show$ = currentShowId$
       .pipe(
-        switchMap(_ => this.showService.read$(_)),
-        filter(_ => !!_),
-        map(_ => _ as Show),
-        tap<Show>(_ => {
-          this.showType = _.showType;
-          this.date = _.date.toDate();
-          this.index = _.presentationSection;
-          this.presentationBackground = _.presentationBackground;
-          this.presentationDynamicCaption = _.presentationDynamicCaption;
-          this.presentationDynamicText = _.presentationDynamicText;
-          this.zoom = _.presentationZoom ?? 30;
-          if (this.songId !== _.presentationSongId) this.songId = 'empty';
+        switchMap(showId => this.showService.read$(showId)),
+        filter((show): show is Show => !!show),
+        shareReplay({
+          bufferSize: 1,
+          refCount: true,
+        }),
+        takeUntil(this.destroy$)
+      );
+
+    show$
+      .pipe(
+        tap(show => {
+          this.showType = show.showType;
+          this.date = show.date.toDate();
+          this.index = show.presentationSection;
+          this.presentationBackground = show.presentationBackground;
+          this.presentationDynamicCaption = show.presentationDynamicCaption;
+          this.presentationDynamicText = show.presentationDynamicText;
+          this.zoom = show.presentationZoom ?? 30;
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(() => this.cRef.markForCheck());
+
+    show$
+      .pipe(
+        map(show => ({showId: show.id, presentationSongId: show.presentationSongId})),
+        distinctUntilChanged((a, b) => a.showId === b.showId && a.presentationSongId === b.presentationSongId),
+        tap(({presentationSongId}) => {
+          if (this.songId !== presentationSongId) {
+            this.songId = 'empty';
+          }
           setTimeout(() => {
-            this.songId = _.presentationSongId;
+            this.songId = presentationSongId;
             this.cRef.markForCheck();
           }, 600);
         }),
-        switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
-        filter(_ => !!_),
-        map(_ => _ as Song),
+        switchMap(({showId, presentationSongId}) => this.showSongService.read$(showId, presentationSongId)),
+        filter((song): song is ShowSong => !!song),
+        takeUntil(this.destroy$)
       )
-      .subscribe(_ => {
-        this.song = _;
+      .subscribe(song => {
+        this.song = song;
         this.cRef.markForCheck();
       });
   }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

src/app/modules/presentation/presentation-routing.module.ts

@@ -28,5 +28,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class PresentationRoutingModule {
-}
+export class PresentationRoutingModule {}

src/app/modules/presentation/presentation.module.ts

@@ -4,11 +4,9 @@ import {CommonModule} from '@angular/common';
 import {PresentationRoutingModule} from './presentation-routing.module';
 import {MonitorComponent} from './monitor/monitor.component';
 import {RemoteComponent} from './remote/remote.component';
-import {CardModule} from '../../widget-modules/components/card/card.module';
+
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
-import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
-import {SectionTypeTranslatorModule} from '../../widget-modules/pipes/section-type-translator/section-type-translator.module';
 import {LegalComponent} from './monitor/legal/legal.component';
 import {MatButtonModule} from '@angular/material/button';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
@@ -17,21 +15,21 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {LogoComponent} from './monitor/logo/logo.component';
 import {SelectComponent} from './select/select.component';
 import {MatInputModule} from '@angular/material/input';
-import {UserNameModule} from '../../services/user/user-name/user-name.module';
+
 import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
 import {AddSongComponent} from '../../widget-modules/components/add-song/add-song.component';
+import {SectionTypePipe} from '../../widget-modules/pipes/section-type-translator/section-type.pipe';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @NgModule({
-  declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent],
   exports: [RemoteComponent],
   imports: [
     CommonModule,
     PresentationRoutingModule,
-    CardModule,
     MatFormFieldModule,
     MatSelectModule,
-    ShowTypeTranslaterModule,
-    SectionTypeTranslatorModule,
+    ShowTypePipe,
+    SectionTypePipe,
     SongTextComponent,
     MatButtonModule,
     FontAwesomeModule,
@@ -40,7 +38,11 @@ import {AddSongComponent} from '../../widget-modules/components/add-song/add-son
     AddSongComponent,
     ReactiveFormsModule,
     MatInputModule,
-    UserNameModule,
+    MonitorComponent,
+    RemoteComponent,
+    LegalComponent,
+    LogoComponent,
+    SelectComponent,
   ],
 })
 export class PresentationModule {}

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

@@ -1,12 +1,14 @@
 @import "../../../../styles/shadow";
 
 .song {
-  background: #fff;
+  background: var(--surface-strong);
   width: 100%;
   padding: 10px;
   border-radius: 8px;
   margin-bottom: 10px;
   box-sizing: border-box;
+  color: var(--text);
+  border: 1px solid var(--surface-border);
 
   @media screen and (max-width: 860px) {
     width: 100vw;
@@ -14,7 +16,7 @@
     border-radius: 0;
     box-sizing: border-box;
     margin: -11px -20px 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--surface-border);
   }
 }
 
@@ -39,31 +41,31 @@
 }
 
 .song-part {
-  background: #fff;
+  background: var(--surface-strong);
   border-radius: 8px;
   overflow: hidden;
-  transition: 300ms all ease-in-out;
+  transition: var(--transition);
   cursor: pointer;
-  outline: 0.5px solid #eee;
+  outline: 1px solid var(--divider);
 
   &:hover {
-    outline: 0.5px solid var(--color-primary-light);
+    outline: 1px solid var(--primary-hover);
   }
 
   &.active {
-    outline: 0.5px solid var(--color-primary);
+    outline: 1px solid var(--primary-color);
 
     .head {
-      background-color: var(--color-primary);
-      color: white;
+      background-color: var(--primary-color);
+      color: var(--text-inverse);
     }
 
   }
 }
 
 .head {
-  transition: 300ms all ease-in-out;
-  background: #eee;
+  transition: var(--transition);
+  background: var(--surface-muted);
   padding: 10px;
   font-weight: bold;
 }
@@ -100,9 +102,9 @@
 a {
   font-size: 30px;
   padding: 10px;
-  transition: all 300ms ease-in-out;
+  transition: var(--transition);
 
   &:hover {
-    color: #4286f4;
+    color: var(--link-color);
   }
 }

src/app/modules/presentation/remote/remote.component.spec.ts

@@ -6,13 +6,11 @@ describe('RemoteComponent', () => {
   let component: RemoteComponent;
   let fixture: ComponentFixture<RemoteComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [RemoteComponent],
+      imports: [RemoteComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RemoteComponent);

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

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
 import {combineLatest, Subject} from 'rxjs';
 import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
@@ -7,12 +7,25 @@ import {faDesktop, faFolderOpen} from '@fortawesome/free-solid-svg-icons';
 import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
-import {debounceTime, filter, map} from 'rxjs/operators';
+import {debounceTime, distinctUntilChanged, filter, map, switchMap, takeUntil} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
-import {GlobalSettings} from '../../../services/global-settings';
 import {LineType} from '../../songs/services/line-type';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatButton} from '@angular/material/button';
+import {RouterLink} from '@angular/router';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {MatSlider, MatSliderThumb} from '@angular/material/slider';
+import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {SectionTypePipe} from '../../../widget-modules/pipes/section-type-translator/section-type.pipe';
 
 export interface PresentationSong {
   id: string;
@@ -26,9 +39,30 @@ export interface PresentationSong {
   styleUrls: ['./remote.component.less'],
   animations: [fade],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    NgIf,
+    CardComponent,
+    NgFor,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    ReactiveFormsModule,
+    FormsModule,
+    MatButton,
+    RouterLink,
+    FaIconComponent,
+    MatSelect,
+    MatOption,
+    MatSlider,
+    MatSliderThumb,
+    AddSongComponent,
+    AsyncPipe,
+    DatePipe,
+    ShowTypePipe,
+    SectionTypePipe,
+  ],
 })
-export class RemoteComponent {
+export class RemoteComponent implements OnDestroy {
   public show: Show | null = null;
   public showSongs: ShowSong[] = [];
   public songs$ = this.songService.list$();
@@ -39,6 +73,7 @@ export class RemoteComponent {
   public faDesktop = faDesktop;
   public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
   public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
+  private destroy$ = new Subject<void>();
 
   public constructor(
     private showService: ShowService,
@@ -46,15 +81,34 @@ export class RemoteComponent {
     private songService: SongService,
     private textRenderingService: TextRenderingService,
     globalSettingsService: GlobalSettingsService,
-    private cRef: ChangeDetectorRef,
+    private cRef: ChangeDetectorRef
   ) {
     globalSettingsService.get$
       .pipe(
-        filter(_ => !!_),
+        filter((settings): settings is NonNullable<typeof settings> => !!settings),
         map(_ => _.currentShow),
+        filter((showId): showId is string => !!showId),
+        distinctUntilChanged(),
+        switchMap(showId =>
+          combineLatest([this.showService.read$(showId), this.showSongService.list$(showId)]).pipe(
+            map(([show, list]) => {
+              const presentationSongs = list.map(song => ({
+                id: song.id,
+                title: song.title,
+                sections: this.textRenderingService.parse(song.text, null, false),
+              }));
+              return {show, list, presentationSongs};
+            })
           )
-      .subscribe(_ => {
-        this.onShowChanged(_);
+        ),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(({show, list, presentationSongs}) => {
+        this.showSongs = list;
+        this.show = show;
+        const order = show?.order ?? [];
+        const presentationSongsById = new Map(presentationSongs.map(song => [song.id, song] as const));
+        this.presentationSongs = order.map(id => presentationSongsById.get(id) ?? null).filter((s): s is PresentationSong => !!s);
         this.cRef.markForCheck();
       });
 
@@ -68,20 +122,6 @@ export class RemoteComponent {
     return item.id;
   }
 
-  public onShowChanged(change: string): void {
-    combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
-      this.showSongs = list;
-      this.show = show;
-      const presentationSongs = list.map(song => ({
-        id: song.id,
-        title: song.title,
-        sections: this.textRenderingService.parse(song.text, null, false),
-      }));
-      this.presentationSongs = show?.order.map(_ => presentationSongs.filter(f => f.id === _)[0]) ?? [];
-      this.cRef.markForCheck();
-    });
-  }
-
   public getFirstLine(section: Section): string {
     return section.lines.filter(_ => _.type === LineType.text)[0].text;
   }
@@ -108,4 +148,9 @@ export class RemoteComponent {
   public onDynamicText(presentationDynamicText: string, showId: string): void {
     this.presentationDynamicTextChanged$.next({presentationDynamicText, showId});
   }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

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

@@ -5,13 +5,18 @@ import {Show} from '../../shows/services/show';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Router} from '@angular/router';
 import {fade} from '../../../animations';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatButton} from '@angular/material/button';
+import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-select',
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.less'],
   animations: [fade],
-  standalone: false,
+  imports: [NgIf, CardComponent, NgFor, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class SelectComponent implements OnInit {
   public visible = false;
@@ -19,8 +24,11 @@ export class SelectComponent implements OnInit {
     .list$(true)
     .pipe(map(_ => _.filter(_ => _.date.toDate() > new Date(new Date().setMonth(new Date().getMonth() - 1))).sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0))));
 
-  public constructor(private showService: ShowService, private globalSettingsService: GlobalSettingsService, private router: Router) {
-  }
+  public constructor(
+    private showService: ShowService,
+    private globalSettingsService: GlobalSettingsService,
+    private router: Router
+  ) {}
 
   public async selectShow(show: Show) {
     this.visible = false;

src/app/modules/presentation/services/presentation.service.ts

@@ -3,5 +3,4 @@ import {Injectable} from '@angular/core';
 @Injectable({
   providedIn: 'root',
 })
-export class PresentationService {
-}
+export class PresentationService {}

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.spec.ts

@@ -8,7 +8,7 @@ describe('ArchiveDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ArchiveDialogComponent],
+      imports: [ArchiveDialogComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ArchiveDialogComponent);
@@ -17,6 +17,6 @@ describe('ArchiveDialogComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.ts

@@ -1,10 +1,11 @@
 import {Component} from '@angular/core';
+import {MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
+import {MatButton} from '@angular/material/button';
 
 @Component({
   selector: 'app-archive-dialog',
   templateUrl: './archive-dialog.component.html',
   styleUrls: ['./archive-dialog.component.less'],
-  standalone: false,
+  imports: [MatDialogContent, MatDialogActions, MatButton, MatDialogClose],
 })
-export class ArchiveDialogComponent {
-}
+export class ArchiveDialogComponent {}

src/app/modules/shows/dialog/share-dialog/share-dialog.component.spec.ts

@@ -17,6 +17,6 @@ describe('ShareDialogComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

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

@@ -3,18 +3,45 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable, take} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
 import firebase from 'firebase/compat/app';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+import {NgFor} from '@angular/common';
+import {MatInput} from '@angular/material/input';
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import Timestamp = firebase.firestore.Timestamp;
 
 @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.less'],
-  standalone: false,
+  imports: [
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOptgroup,
+    NgFor,
+    MatOption,
+    MatInput,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatSuffix,
+    MatDatepicker,
+    ButtonRowComponent,
+    ButtonComponent,
+    ShowTypePipe,
+  ],
 })
 export class EditComponent implements OnInit {
   public shows$: Observable<Show[]>;
@@ -27,7 +54,12 @@ export class EditComponent implements OnInit {
   });
   public faSave = faSave;
 
-  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router, private activatedRoute: ActivatedRoute) {
+  public constructor(
+    private showService: ShowService,
+    showDataService: ShowDataService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute
+  ) {
     this.shows$ = showDataService.list$;
   }
 
@@ -39,7 +71,7 @@ export class EditComponent implements OnInit {
         map(param => param as {showId: string}),
         map(param => param.showId),
         switchMap((showId: string) => this.showService.read$(showId)),
-        take(1),
+        take(1)
       )
       .subscribe(show => {
         this.form.setValue({
@@ -56,13 +88,10 @@ export class EditComponent implements OnInit {
       return;
     }
 
-    await this.showService.update$(
-      this.form.value.id as string,
-      {
+    await this.showService.update$(this.form.value.id, {
       date: Timestamp.fromDate(this.form.value.date),
       showType: this.form.value.showType,
-      } as Partial<Show>,
-    );
+    } as Partial<Show>);
     await this.router.navigateByUrl(`/shows/${this.form.value.id ?? ''}`);
   }
 }

src/app/modules/shows/list/filter/filter.component.html

@@ -14,6 +14,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Ersteller</mat-label>
       <mat-select formControlName="owner">
+        <mat-option [value]="null">Alle</mat-option>
         <mat-option *ngFor="let owner of owners" [value]="owner.key">{{
             owner.value
           }}
@@ -24,6 +25,7 @@
     <mat-form-field appearance="outline">
       <mat-label>Art der Veranstaltung</mat-label>
       <mat-select formControlName="showType">
+        <mat-option [value]="null">Alle</mat-option>
         <mat-optgroup label="öffentlich">
           <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
               key | showType
@@ -41,5 +43,5 @@
 
   </div>
 
-  <i>Anzahl der Suchergebnisse: {{ shows.length }}</i>
+  <i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>
 </div>

src/app/modules/shows/list/filter/filter.component.spec.ts

@@ -8,7 +8,7 @@ describe('FilterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [FilterComponent],
+      imports: [FilterComponent],
     }).compileComponents();
   });
 
@@ -19,6 +19,6 @@ describe('FilterComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/modules/shows/list/filter/filter.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input} from '@angular/core';
-import {KeyValue} from '@angular/common';
+import {KeyValue, NgFor} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {FilterValues} from './filter-values';
 import {Show} from '../../services/show';
 import {ShowService} from '../../services/show.service';
@@ -10,12 +10,16 @@ import {combineLatest, Observable} from 'rxjs';
 import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
 import {UserService} from '../../../../services/user/user.service';
 import {isEqual} from 'lodash';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
-  standalone: false,
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, NgFor, MatOption, MatOptgroup, ShowTypePipe],
 })
 export class FilterComponent {
   @Input() public route = '/shows/';
@@ -39,7 +43,7 @@ export class FilterComponent {
     private showService: ShowService,
     private userService: UserService,
     activatedRoute: ActivatedRoute,
-    fb: UntypedFormBuilder,
+    fb: UntypedFormBuilder
   ) {
     this.filterFormGroup = fb.group({
       time: 1,
@@ -50,6 +54,8 @@ export class FilterComponent {
     activatedRoute.queryParams.subscribe(params => {
       const filterValues = params as FilterValues;
       if (filterValues.time) this.filterFormGroup.controls.time.setValue(+filterValues.time);
+      this.filterFormGroup.controls.owner.setValue(filterValues.owner ?? null, {emitEvent: false});
+      this.filterFormGroup.controls.showType.setValue(filterValues.showType ?? null, {emitEvent: false});
     });
 
     this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number));
@@ -64,7 +70,7 @@ export class FilterComponent {
       this.showService.list$().pipe(
         map(shows => {
           return shows.map(show => show.owner).filter(onlyUnique);
-        }),
+        })
       ),
       this.userService.users$,
     ]).pipe(
@@ -77,13 +83,13 @@ export class FilterComponent {
           .sort(dynamicSort('value'));
       }),
       distinctUntilChanged(isEqual),
-      map(_ => _ as {key: string; value: string}[]),
+      map(_ => _ as {key: string; value: string}[])
     );
   };
 
   private async filerValueChanged<T>(key: string, value: T): Promise<void> {
     const route = this.router.createUrlTree([this.route], {
-      queryParams: {[key]: value},
+      queryParams: {[key]: value || null},
       queryParamsHandling: 'merge',
     });
     await this.router.navigateByUrl(route);

src/app/modules/shows/list/list-item/list-item.component.less

@@ -1,5 +1,3 @@
-@import "../../../../../styles/styles";
-
 .list-item {
   padding: 5px 20px;
   display: grid;
@@ -12,10 +10,11 @@
   }
 
   cursor: pointer;
+  transition: var(--transition);
 
   &:hover {
-    background: @primary-color;
-    color: #fff;
+    background: var(--hover-background);
+    color: var(--text);
   }
 }
 

src/app/modules/shows/list/list-item/list-item.component.spec.ts

@@ -6,13 +6,11 @@ describe('ListItemComponent', () => {
   let component: ListItemComponent;
   let fixture: ComponentFixture<ListItemComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [ListItemComponent],
+      imports: [ListItemComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ListItemComponent);

src/app/modules/shows/list/list-item/list-item.component.ts

@@ -1,11 +1,14 @@
 import {Component, Input} from '@angular/core';
 import {Show} from '../../services/show';
+import {DatePipe, NgIf} from '@angular/common';
+import {UserNameComponent} from '../../../../services/user/user-name/user-name.component';
+import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-list-item',
   templateUrl: './list-item.component.html',
   styleUrls: ['./list-item.component.less'],
-  standalone: false,
+  imports: [NgIf, UserNameComponent, DatePipe, ShowTypePipe],
 })
 export class ListItemComponent {
   @Input() public show: Show | null = null;

src/app/modules/shows/list/list.component.spec.ts

@@ -6,13 +6,11 @@ describe('ListComponent', () => {
   let component: ListComponent;
   let fixture: ComponentFixture<ListComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [ListComponent],
+      imports: [ListComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ListComponent);

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

@@ -4,15 +4,22 @@ import {Show} from '../services/show';
 import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
 import {FilterValues} from './filter/filter-values';
-import {ActivatedRoute} from '@angular/router';
-import {map} from 'rxjs/operators';
+import {ActivatedRoute, RouterLink} from '@angular/router';
+import {map, switchMap} from 'rxjs/operators';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
+import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {FilterComponent} from './filter/filter.component';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {ListItemComponent} from './list-item/list-item.component';
+import {SortByPipe} from '../../../widget-modules/pipes/sort-by/sort-by.pipe';
 
 @Component({
   selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.less'],
   animations: [fade],
-  standalone: false,
+  imports: [RoleDirective, ListHeaderComponent, NgIf, FilterComponent, CardComponent, NgFor, ListItemComponent, RouterLink, AsyncPipe, SortByPipe],
 })
 export class ListComponent {
   public shows$ = this.showService.list$();
@@ -22,32 +29,46 @@ export class ListComponent {
       const filterValues = params as FilterValues;
       if (!filterValues?.time) return 1;
       return +filterValues.time;
-    }),
+    })
   );
   public owner$ = this.activatedRoute.queryParams.pipe(
     map(params => {
       const filterValues = params as FilterValues;
       return filterValues?.owner;
-    }),
+    })
+  );
+  public showType$ = this.activatedRoute.queryParams.pipe(
+    map(params => {
+      const filterValues = params as FilterValues;
+      return filterValues?.showType;
+    })
+  );
+  public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
+
+  public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
+    map(([shows, lastMonths]) => {
+      const startDate = new Date();
+      startDate.setHours(0, 0, 0, 0);
+      startDate.setDate(startDate.getDate() - lastMonths * 30);
+
+      return shows.filter(show => show.published && !show.archived && show.date.toDate() >= startDate);
+    })
   );
 
-  public publicShows$ = combineLatest([this.shows$, this.lastMonths$, this.owner$]).pipe(
-    map(([shows, lastMonths, owner]) =>
-      shows
-        .filter(f => {
-          const d = new Date();
-          d.setMonth(d.getMonth() - lastMonths);
-          return f.published && f.date.toDate() >= d;
+  public publicShows$ = combineLatest([this.queriedPublicShows$, this.fallbackPublicShows$, this.owner$, this.showType$]).pipe(
+    map(([queriedShows, fallbackShows, owner, showType]) => {
+      const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows;
+
+      return shows
+        .filter(show => !owner || show.owner === owner)
+        .filter(show => !showType || show.showType === showType);
     })
-        .filter(show => !owner || show.owner === owner),
-    ),
   );
 
   public constructor(
     private showService: ShowService,
-    private activatedRoute: ActivatedRoute,
-  ) {
-  }
+    private activatedRoute: ActivatedRoute
+  ) {}
 
   public trackBy = (index: number, show: unknown) => (show as Show).id;
 }

src/app/modules/shows/new/new.component.spec.ts

@@ -6,13 +6,11 @@ describe('NewComponent', () => {
   let component: NewComponent;
   let fixture: ComponentFixture<NewComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [NewComponent],
+      imports: [NewComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewComponent);

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

@@ -3,15 +3,42 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+import {NgFor} from '@angular/common';
+import {MatInput} from '@angular/material/input';
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-new',
   templateUrl: './new.component.html',
   styleUrls: ['./new.component.less'],
-  standalone: false,
+  imports: [
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOptgroup,
+    NgFor,
+    MatOption,
+    MatInput,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatSuffix,
+    MatDatepicker,
+    ButtonRowComponent,
+    ButtonComponent,
+    ShowTypePipe,
+  ],
 })
 export class NewComponent implements OnInit {
   public shows$: Observable<Show[]>;
@@ -26,7 +53,7 @@ export class NewComponent implements OnInit {
   public constructor(
     private showService: ShowService,
     showDataService: ShowDataService,
-    private router: Router,
+    private router: Router
   ) {
     this.shows$ = showDataService.list$;
   }

src/app/modules/shows/services/docx.service.ts

@@ -4,7 +4,6 @@ import {ShowService} from './show.service';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {ShowSongService} from './show-song.service';
 import {Song} from '../../songs/services/song';
-import {SongService} from '../../songs/services/song.service';
 import {ShowSong} from './show-song';
 import {Show} from './show';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
@@ -32,7 +31,7 @@ export class DocxService {
     private showSongService: ShowSongService,
     private textRenderingService: TextRenderingService,
     private userService: UserService,
-    private configService: ConfigService,
+    private configService: ConfigService
   ) {}
 
   public async create(showId: string, options: DownloadOptions = {}): Promise<void> {
@@ -214,7 +213,7 @@ export class DocxService {
             sections: Section[];
           }
       );
-    const songs = show.order.map(_ => songsLoaded.filter(f => f.showSong.id === _)[0]);
+    const songs = show.order.map(_ => songsLoaded.find(f => f.showSong.id === _)).filter(_ => !!_);
     return {songs, show, user, config};
   }
 

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

@@ -1,26 +1,48 @@
 import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
+import {Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
-import {map} from 'rxjs/operators';
+import {map, shareReplay} from 'rxjs/operators';
+import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
+import firebase from 'firebase/compat/app';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ShowDataService {
-  public list$ = new BehaviorSubject<Show[]>([]);
   private collection = 'shows';
+  public list$: Observable<Show[]> = this.dbService.col$<Show>(this.collection).pipe(
+    // server-side ordering cuts client work and keeps stable order across subscribers
+    map(shows => [...shows].sort((a, b) => a.date.toMillis() - b.date.toMillis())),
+    shareReplay({
+      bufferSize: 1,
+      refCount: true,
+    })
+  );
 
-  public constructor(private dbService: DbService) {
-    this.dbService.col$<Show>(this.collection).subscribe(_ => this.list$.next(_));
-  }
+  public constructor(private dbService: DbService) {}
 
   public listRaw$ = () => this.dbService.col$<Show>(this.collection);
 
-  public read$ = (showId: string): Observable<Show | null> => this.list$.pipe(map(_ => _.find(s => s.id === showId) || null));
+  public listPublicSince$(lastMonths: number): Observable<Show[]> {
+    const startDate = new Date();
+    startDate.setHours(0, 0, 0, 0);
+    startDate.setDate(startDate.getDate() - lastMonths * 30);
+    const startTimestamp = firebase.firestore.Timestamp.fromDate(startDate);
+
+    const queryFn: QueryFn = ref => ref.where('published', '==', true).where('date', '>=', startTimestamp).orderBy('date', 'desc');
+
+    return this.dbService.col$<Show>(this.collection, queryFn).pipe(
+      map(shows => shows.filter(show => !show.archived)),
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      })
+    );
+  }
+
+  public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
 
-  // public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);
-  // public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
   public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
   public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
 }

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

@@ -3,6 +3,7 @@ import {DbService} from '../../../services/db.service';
 import {Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
+import {shareReplay} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -10,11 +11,31 @@ import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 export class ShowSongDataService {
   private collection = 'shows';
   private subCollection = 'songs';
+  private listCache = new Map<string, Observable<ShowSong[]>>();
 
-  public constructor(private dbService: DbService) {
+  public constructor(private dbService: DbService) {}
+
+  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => {
+    if (queryFn) {
+      return this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
     }
 
-  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
+    const cached = this.listCache.get(showId);
+    if (cached) {
+      return cached;
+    }
+
+    const stream$ = this.dbService.col$<ShowSong>(`${this.collection}/${showId}/${this.subCollection}`).pipe(
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      })
+    );
+
+    this.listCache.set(showId, stream$);
+    return stream$;
+  };
+
   public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
     await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).update(data);

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

@@ -14,9 +14,8 @@ export class ShowSongService {
     private showSongDataService: ShowSongDataService,
     private songDataService: SongDataService,
     private userService: UserService,
-    private showService: ShowService,
-  ) {
-  }
+    private showService: ShowService
+  ) {}
 
   public async new$(showId: string, songId: string, addedLive = false): Promise<string | null> {
     const song = await firstValueFrom(this.songDataService.read$(songId));
@@ -41,14 +40,14 @@ export class ShowSongService {
   public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));
 
   public async delete$(showId: string, showSongId: string, index: number): Promise<void> {
-    const showSong = await this.read(showId, showSongId);
-    await this.showSongDataService.delete(showId, showSongId);
-    const show = await firstValueFrom(this.showService.read$(showId));
+    const [showSong, show] = await Promise.all([this.read(showId, showSongId), firstValueFrom(this.showService.read$(showId))]);
     if (!show) return;
-    const order = show.order;
+    if (!showSong) return;
+
+    const order = [...show.order];
     order.splice(index, 1);
-    await this.showService.update$(showId, {order});
-    await this.userService.decSongCount(showSong.songId);
+
+    await Promise.all([this.showSongDataService.delete(showId, showSongId), this.showService.update$(showId, {order}), this.userService.decSongCount(showSong.songId)]);
   }
 
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);

src/app/modules/shows/services/show.service.spec.ts

@@ -9,7 +9,7 @@ describe('ShowService', () => {
     () =>
       void TestBed.configureTestingModule({
         providers: [{provide: ShowDataService, useValue: mockShowDataService}],
-      }),
+      })
   );
 
   ShowService.SHOW_TYPE_PUBLIC.forEach(type => {

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

@@ -15,24 +15,23 @@ export class ShowService {
   public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private'];
   private user: User | null = null;
 
-  public constructor(private showDataService: ShowDataService, private userService: UserService) {
+  public constructor(
+    private showDataService: ShowDataService,
+    private userService: UserService
+  ) {
     userService.user$.subscribe(_ => (this.user = _));
   }
 
   public read$ = (showId: string): Observable<Show | null> => this.showDataService.read$(showId);
+  public listPublicSince$ = (lastMonths: number): Observable<Show[]> => this.showDataService.listPublicSince$(lastMonths);
 
   public list$(publishedOnly = false): Observable<Show[]> {
     return this.userService.user$.pipe(
       switchMap(
         () => this.showDataService.list$,
-        (user: User | null, shows: Show[]) => ({user, shows}),
-      ),
-      map(s =>
-        s.shows
-          .sort((a, b) => a.date.toMillis() - b.date.toMillis())
-          .filter(_ => !_.archived)
-          .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)),
+        (user: User | null, shows: Show[]) => ({user, shows})
       ),
+      map(s => s.shows.filter(show => !show.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
     );
   }
 

src/app/modules/shows/show/show.component.html

@@ -19,11 +19,12 @@
         <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
                          matTooltip="Vergrößern"></app-menu-button>
         <app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
-                         [icon]="useSwiper ? faFileLines : faFile" class="btn-delete btn-icon"
-                         matTooltip="Swiper umschalten"></app-menu-button>
+                         [icon]="useSwiper ? faRestore : faMaximize" class="btn-delete btn-icon"
+                         matTooltip="Vollbild"></app-menu-button>
       </div>
     </div>
-    <div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper" [cdkDropListDisabled]="show.published || showText"
+    <div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper"
+         [cdkDropListDisabled]="show.published || showText"
          [style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
          [style.font-size]="textSize + 'em'"
          cdkDropList
@@ -52,7 +53,10 @@
           [showText]="true"
           [show]="show"
         ></app-song>
-        <div class="next-song" *ngIf="getNextSong(orderedShowSongs(show), i) as next">{{next}}<fa-icon [icon]="faNextSong"></fa-icon></div>
+        <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
+        <div *ngIf="getNextSong(orderedShowSongs(show), i) as next" class="next-song">{{ next }}
+          <fa-icon [icon]="faNextSong"></fa-icon>
+        </div>
       </swiper-slide>
     </swiper-container>
 

src/app/modules/shows/show/show.component.less

@@ -5,7 +5,7 @@
 
 .song-row:not(:last-child) {
   display: block;
-  border-bottom: 1px solid #0002;
+  border-bottom: 1px solid var(--divider);
 }
 
 .song-swipe {
@@ -21,9 +21,10 @@
 }
 
 .cdk-drag-preview {
-  background-color: white;
+  background-color: var(--surface-strong);
   box-sizing: border-box;
   border-radius: 4px;
+  border: 1px solid var(--surface-border);
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
@@ -51,7 +52,7 @@
 }
 
 .next-song {
-  color: #0008;
+  color: var(--text-muted);
   position: fixed;
   bottom: 0;
   right: 10px;
@@ -60,3 +61,10 @@
     padding: 6px;
   }
 }
+
+.time {
+  color: var(--text-muted);
+  position: fixed;
+  bottom: 0;
+  left: 10px;
+}

src/app/modules/shows/show/show.component.spec.ts

@@ -6,13 +6,11 @@ describe('ShowComponent', () => {
   let component: ShowComponent;
   let fixture: ComponentFixture<ShowComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [ShowComponent],
+      imports: [ShowComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ShowComponent);

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

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {filter, map, switchMap, tap} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ShowService} from '../services/show.service';
@@ -14,31 +14,72 @@ import {
   faBox,
   faBoxOpen,
   faChevronRight,
-  faFile,
   faFileDownload,
-  faFileLines,
   faLock,
   faMagnifyingGlassMinus,
   faMagnifyingGlassPlus,
+  faMaximize,
+  faMinimize,
   faSliders,
   faUnlock,
   faUser,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons';
-import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 import {fade} from '../../../animations';
 import {MatDialog} from '@angular/material/dialog';
 import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component';
 import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
 import {GuestShowService} from '../../guest/guest-show.service';
 import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.component';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
+import {MatCheckbox} from '@angular/material/checkbox';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MenuButtonComponent} from '../../../widget-modules/components/menu-button/menu-button.component';
+import {MatTooltip} from '@angular/material/tooltip';
+import {SongComponent} from './song/song.component';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {OwnerDirective} from '../../../services/user/owner.directive';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {MatMenu, MatMenuTrigger} from '@angular/material/menu';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-show',
   templateUrl: './show.component.html',
   styleUrls: ['./show.component.less'],
   animations: [fade],
-  standalone: false,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    NgIf,
+    CardComponent,
+    UserNameComponent,
+    MatCheckbox,
+    ReactiveFormsModule,
+    FormsModule,
+    MenuButtonComponent,
+    MatTooltip,
+    CdkDropList,
+    NgFor,
+    CdkDrag,
+    SongComponent,
+    FaIconComponent,
+    AddSongComponent,
+    ButtonRowComponent,
+    RoleDirective,
+    OwnerDirective,
+    ButtonComponent,
+    MatMenuTrigger,
+    MatMenu,
+    AsyncPipe,
+    DatePipe,
+    ShowTypePipe,
+  ],
 })
 export class ShowComponent implements OnInit, OnDestroy {
   public show$: Observable<Show | null> | null = null;
@@ -60,9 +101,10 @@ export class ShowComponent implements OnInit, OnDestroy {
   public faZoomOut = faMagnifyingGlassMinus;
   public useSwiper = false;
   public textSize = 1;
-  public faFileLines = faFileLines;
-  public faFile = faFile;
+  public faRestore = faMinimize;
+  public faMaximize = faMaximize;
   public faNextSong = faChevronRight;
+  public currentTime: Date;
   private subs: Subscription[] = [];
 
   public constructor(
@@ -74,16 +116,19 @@ export class ShowComponent implements OnInit, OnDestroy {
     private router: Router,
     private cRef: ChangeDetectorRef,
     public dialog: MatDialog,
-    private guestShowService: GuestShowService,
-  ) {
-  }
+    private guestShowService: GuestShowService
+  ) {}
 
   public ngOnInit(): void {
+    this.currentTime = new Date();
+    setInterval(() => {
+      this.currentTime = new Date();
+    }, 10000);
     this.show$ = this.activatedRoute.params.pipe(
       map(param => param as {showId: string}),
       map(param => param.showId),
       tap((_: string) => (this.showId = _)),
-      switchMap((showId: string) => this.showService.read$(showId)),
+      switchMap((showId: string) => this.showService.read$(showId))
     );
     this.subs.push(
       this.activatedRoute.params
@@ -91,7 +136,7 @@ export class ShowComponent implements OnInit, OnDestroy {
           map(param => param as {showId: string}),
           map(param => param.showId),
           switchMap(showId => this.showSongService.list$(showId)),
-          filter(_ => !!_ && _.length > 0),
+          filter(_ => !!_ && _.length > 0)
         )
         .subscribe(_ => {
           this.showSongs = _;
@@ -103,7 +148,7 @@ export class ShowComponent implements OnInit, OnDestroy {
         .subscribe(_ => {
           this.songs = _;
           this.cRef.markForCheck();
-        }),
+        })
     );
   }
 
@@ -175,7 +220,7 @@ export class ShowComponent implements OnInit, OnDestroy {
     return show.order.map(_ => list.filter(f => f.id === _)[0]);
   }
 
-  public trackBy = (_: number, show: ShowSong) => show.id;
+  public trackBy = (_: number, show: ShowSong) => show?.id;
 
   public async onChange(showId: string) {
     await this.router.navigateByUrl('/shows/' + showId + '/edit');
@@ -183,6 +228,7 @@ export class ShowComponent implements OnInit, OnDestroy {
 
   @HostListener('document:keydown', ['$event'])
   public handleKeyboardEvent(event: KeyboardEvent) {
+    if (!this.useSwiper) return;
     const swiperEl = document.querySelector('swiper-container') as unknown as Swiper;
     switch (event.code) {
       case 'ArrowRight':
@@ -197,6 +243,7 @@ export class ShowComponent implements OnInit, OnDestroy {
   }
 
   public fullscreen(useSwiper: boolean) {
+    this.textSize = useSwiper ? 2 : 1;
     if (useSwiper) openFullscreen();
     else closeFullscreen();
   }

src/app/modules/shows/show/song/song.component.less

@@ -49,8 +49,8 @@
     grid-template-columns: 1em auto;
 
     .key {
-      color: #00b;
-      text-shadow: 0 0 1px #00b;
+      color: var(--primary-active);
+      text-shadow: 0 0 1px var(--primary-hover);
     }
   }
 }

src/app/modules/shows/show/song/song.component.spec.ts

@@ -6,13 +6,11 @@ describe('SongComponent', () => {
   let component: SongComponent;
   let fixture: ComponentFixture<SongComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [SongComponent],
+      imports: [SongComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongComponent);

src/app/modules/shows/show/song/song.component.ts

@@ -2,19 +2,43 @@ import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
-import {UntypedFormControl} from '@angular/forms';
-import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
+import {ReactiveFormsModule, UntypedFormControl} from '@angular/forms';
+import {ChordMode, SongTextComponent} from '../../../../widget-modules/components/song-text/song-text.component';
 import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';
 import {MatSelect} from '@angular/material/select';
+import {NgFor, NgIf} from '@angular/common';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatOption} from '@angular/material/core';
+import {MenuButtonComponent} from '../../../../widget-modules/components/menu-button/menu-button.component';
+import {MatTooltip} from '@angular/material/tooltip';
+import {MatInput} from '@angular/material/input';
+import {CdkTextareaAutosize} from '@angular/cdk/text-field';
+import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
 
 @Component({
   selector: 'app-song',
   templateUrl: './song.component.html',
   styleUrls: ['./song.component.less'],
   animations: [fade],
-  standalone: false,
+  imports: [
+    NgIf,
+    MatFormField,
+    MatSelect,
+    ReactiveFormsModule,
+    NgFor,
+    MatOption,
+    MenuButtonComponent,
+    MatTooltip,
+    MatLabel,
+    MatInput,
+    CdkTextareaAutosize,
+    ButtonRowComponent,
+    ButtonComponent,
+    SongTextComponent,
+  ],
 })
 export class SongComponent implements OnInit {
   @Input() public show: Show | null = null;
@@ -33,8 +57,7 @@ export class SongComponent implements OnInit {
   public editSongControl = new UntypedFormControl();
   @ViewChild('option') private keyOptions: MatSelect;
 
-  public constructor(private showSongService: ShowSongService) {
-  }
+  public constructor(private showSongService: ShowSongService) {}
 
   @Input()
   public set showSong(song: ShowSong) {

src/app/modules/shows/shows-routing.module.ts

@@ -29,5 +29,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class ShowsRoutingModule {
-}
+export class ShowsRoutingModule {}

src/app/modules/shows/shows.module.ts

@@ -3,32 +3,28 @@ import {CommonModule} from '@angular/common';
 
 import {ShowsRoutingModule} from './shows-routing.module';
 import {NewComponent} from './new/new.component';
-import {CardModule} from '../../widget-modules/components/card/card.module';
+
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {ListComponent} from './list/list.component';
 import {ListItemComponent} from './list/list-item/list-item.component';
-import {ListHeaderModule} from '../../widget-modules/components/list-header/list-header.module';
+
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
+
 import {MatButtonModule} from '@angular/material/button';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatSelectModule} from '@angular/material/select';
-import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {MatNativeDateModule} from '@angular/material/core';
 import {ShowComponent} from './show/show.component';
 import {SongComponent} from './show/song/song.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MenuButtonModule} from '../../widget-modules/components/menu-button/menu-button.module';
+
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
-import {ButtonModule} from '../../widget-modules/components/button/button.module';
-import {OwnerModule} from '../../services/user/owner.module';
-import {UserNameModule} from '../../services/user/user-name/user-name.module';
+
 import {MatMenuModule} from '@angular/material/menu';
 import {DragDropModule} from '@angular/cdk/drag-drop';
-import {RoleModule} from '../../services/user/role.module';
-import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module';
+
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {FilterComponent} from './list/filter/filter.component';
 import {EditComponent} from './edit/edit.component';
@@ -36,39 +32,40 @@ import {ArchiveDialogComponent} from './dialog/archive-dialog/archive-dialog.com
 import {MatDialogModule} from '@angular/material/dialog';
 import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
 import {AddSongComponent} from '../../widget-modules/components/add-song/add-song.component';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {SortByPipe} from '../../widget-modules/pipes/sort-by/sort-by.pipe';
 
 @NgModule({
-  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent],
   imports: [
     CommonModule,
     ShowsRoutingModule,
-    CardModule,
     MatFormFieldModule,
     ReactiveFormsModule,
     MatInputModule,
-    ListHeaderModule,
     MatCheckboxModule,
-    ButtonRowModule,
     MatButtonModule,
     MatDatepickerModule,
     MatNativeDateModule,
     MatSelectModule,
-    ShowTypeTranslaterModule,
+    ShowTypePipe,
     FontAwesomeModule,
-    MenuButtonModule,
     FormsModule,
     SongTextComponent,
     NgxMatSelectSearchModule,
     AddSongComponent,
-    ButtonModule,
-    OwnerModule,
-    UserNameModule,
     MatMenuModule,
     DragDropModule,
-    RoleModule,
-    SortByModule,
+    SortByPipe,
     MatTooltipModule,
     MatDialogModule,
+    NewComponent,
+    ListComponent,
+    ListItemComponent,
+    ShowComponent,
+    SongComponent,
+    FilterComponent,
+    EditComponent,
+    ArchiveDialogComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

src/app/modules/songs/services/file-data.service.ts

@@ -8,8 +8,7 @@ import {DbService} from '../../../services/db.service';
   providedIn: 'root',
 })
 export class FileDataService {
-  public constructor(private db: DbService) {
-  }
+  public constructor(private db: DbService) {}
 
   public async set(songId: string, file: FileServer): Promise<string> {
     const songRef = this.db.doc('songs/' + songId);

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

@@ -7,8 +7,10 @@ import {FileDataService} from './file-data.service';
   providedIn: 'root',
 })
 export class FileService {
-  public constructor(private storage: AngularFireStorage, private fileDataService: FileDataService) {
-  }
+  public constructor(
+    private storage: AngularFireStorage,
+    private fileDataService: FileDataService
+  ) {}
 
   public getDownloadUrl(path: string): Observable<string> {
     const ref = this.storage.ref(path);

src/app/modules/songs/services/key.helper.spec.ts

@@ -0,0 +1,15 @@
+import {getScale, scaleMapping} from './key.helper';
+
+describe('key.helper', () => {
+  it('should render Gb correctly', () => {
+    expect(scaleMapping['Gb']).toBe('G♭');
+  });
+
+  it('should expose a sharp-based scale for D', () => {
+    expect(getScale('D')).toEqual(['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'H']);
+  });
+
+  it('should keep flat-based spelling for Db', () => {
+    expect(getScale('Db')).toEqual(['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'B', 'H']);
+  });
+});

src/app/modules/songs/services/key.helper.ts

@@ -82,7 +82,7 @@ const scaleAssignment: {[key: string]: string[]} = {
   C: KEYS_MAJOR_FLAT,
   'C#': KEYS_MAJOR_FLAT,
   Db: KEYS_MAJOR_B,
-  D: KEYS_MAJOR_B,
+  D: KEYS_MAJOR_FLAT,
   'D#': KEYS_MAJOR_FLAT,
   Eb: KEYS_MAJOR_B,
   E: KEYS_MAJOR_FLAT,
@@ -125,7 +125,7 @@ export const scaleMapping: {[key: string]: string} = {
   E: 'E',
   F: 'F',
   'F#': 'F♯',
-  Gb: 'D♭',
+  Gb: 'G♭',
   G: 'G',
   'G#': 'G♯',
   Ab: 'A♭',

src/app/modules/songs/services/song-data.service.spec.ts

@@ -1,8 +1,8 @@
-import {TestBed, waitForAsync} from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
 import {SongDataService} from './song-data.service';
 import {AngularFirestore} from '@angular/fire/compat/firestore';
-import {of} from 'rxjs';
+import {firstValueFrom, of} from 'rxjs';
 
 describe('SongDataService', () => {
   const songs = [{title: 'title1'}];
@@ -19,7 +19,7 @@ describe('SongDataService', () => {
     () =>
       void TestBed.configureTestingModule({
         providers: [{provide: AngularFirestore, useValue: mockAngularFirestore}],
-      }),
+      })
   );
 
   it('should be created', () => {
@@ -27,13 +27,9 @@ describe('SongDataService', () => {
     void expect(service).toBeTruthy();
   });
 
-  it(
-    'should list songs',
-    waitForAsync(() => {
+  it('should list songs', async () => {
     const service: SongDataService = TestBed.inject(SongDataService);
-      service.list$().subscribe(s => {
-        void expect(s[0].title).toEqual('title1');
+    const list = await firstValueFrom(service.list$);
+    void expect(list[0].title).toEqual('title1');
   });
-    }),
-  );
 });

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

@@ -1,23 +1,28 @@
 import {Injectable} from '@angular/core';
 import {Song} from './song';
-import {BehaviorSubject, Observable} from 'rxjs';
+import {Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
-import {map} from 'rxjs/operators';
+import {shareReplay, startWith} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
 })
 export class SongDataService {
-  public list$ = new BehaviorSubject<Song[]>([]);
   private collection = 'songs';
+  public list$: Observable<Song[]> = this.dbService.col$<Song>(this.collection).pipe(
+    startWith([] as Song[]), // immediate empty emit keeps UI responsive while first snapshot arrives
+    shareReplay({
+      bufferSize: 1,
+      refCount: false, // keep the listener alive after first subscription to avoid reloading on navigation
+    })
+  );
 
   public constructor(private dbService: DbService) {
-    this.dbService.col$<Song>(this.collection).subscribe(_ => this.list$.next(_));
+    // Warm the shared stream once at startup to avoid first-navigation delay.
+    // this.list$.subscribe();
   }
-  // public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
 
-  //public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
-  public read$ = (songId: string): Observable<Song | null> => this.list$.pipe(map(_ => _.find(s => s.id === songId) || null));
+  public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
   public update$ = async (songId: string, data: Partial<Song>): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).update(data);
   public add = async (data: Partial<Song>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
   public delete = async (songId: string): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).delete();

src/app/modules/songs/services/song-list.resolver.ts

@@ -3,16 +3,15 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {SongService} from './song.service';
 import {Song} from './song';
-import {filter} from 'rxjs/operators';
+import {take} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
 })
 export class SongListResolver {
-  public constructor(private songService: SongService) {
-  }
+  public constructor(private songService: SongService) {}
 
   public resolve(): Observable<Song[]> {
-    return this.songService.list$().pipe(filter(_ => _.length > 0));
+    return this.songService.list$().pipe(take(1));
   }
 }

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

@@ -15,7 +15,7 @@ describe('SongService', () => {
     () =>
       void TestBed.configureTestingModule({
         providers: [{provide: SongDataService, useValue: mockSongDataService}],
-      }),
+      })
   );
 
   it('should be created', () => {
@@ -23,13 +23,10 @@ describe('SongService', () => {
     void expect(service).toBeTruthy();
   });
 
-  it(
-    'should list songs',
-    waitForAsync(() => {
+  it('should list songs', waitForAsync(() => {
     const service: SongService = TestBed.inject(SongService);
     service.list$().subscribe(s => {
       void expect(s[0].title).toEqual('title1');
     });
-    }),
-  );
+  }));
 });

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

@@ -27,7 +27,7 @@ export class SongService {
 
   public constructor(
     private songDataService: SongDataService,
-    private userService: UserService,
+    private userService: UserService
   ) {
     // importCCLI = (songs: Song[]) => this.updateFromCLI(songs);
   }

src/app/modules/songs/services/transpose.service.spec.ts

@@ -1,6 +1,8 @@
 import {TestBed} from '@angular/core/testing';
 
 import {TransposeService} from './transpose.service';
+import {LineType} from './line-type';
+import {Line} from './line';
 
 describe('TransposeService', () => {
   let service: TransposeService;
@@ -12,7 +14,7 @@ describe('TransposeService', () => {
 
   it('should create map upwards', () => {
     const distance = service.getDistance('D', 'G');
-    const map = service.getMap('D', distance);
+    const map = service.getMap('D', 'G', distance);
 
     if (map) {
       void expect(map['D']).toBe('G');
@@ -21,10 +23,71 @@ describe('TransposeService', () => {
 
   it('should create map downwards', () => {
     const distance = service.getDistance('G', 'D');
-    const map = service.getMap('G', distance);
+    const map = service.getMap('G', 'D', distance);
 
     if (map) {
       void expect(map['G']).toBe('D');
     }
   });
+
+  it('should transpose enharmonic targets by semitone distance', () => {
+    const distance = service.getDistance('C', 'Db');
+    const map = service.getMap('C', 'Db', distance);
+
+    expect(distance).toBe(1);
+    expect(map?.['C']).toBe('Db');
+    expect(map?.['G']).toBe('Ab');
+  });
+
+  it('should keep german B/H notation consistent', () => {
+    const distance = service.getDistance('H', 'C');
+    const map = service.getMap('H', 'C', distance);
+
+    expect(distance).toBe(1);
+    expect(map?.['H']).toBe('C');
+    expect(map?.['B']).toBe('C#');
+  });
+
+  it('should render unknown chords as X', () => {
+    const line: Line = {
+      type: LineType.chord,
+      text: '',
+      chords: [
+        {chord: 'Q', add: 'sus4', slashChord: null, position: 0, length: 1},
+      ],
+    };
+
+    const rendered = service.renderChords(line);
+
+    expect(rendered.text).toBe('Xsus4');
+  });
+
+  it('should render unknown slash chords as X', () => {
+    const line: Line = {
+      type: LineType.chord,
+      text: '',
+      chords: [
+        {chord: 'C', add: null, slashChord: 'Q', position: 0, length: 1},
+      ],
+    };
+
+    const rendered = service.renderChords(line);
+
+    expect(rendered.text).toBe('C/X');
+  });
+
+  it('should transpose lines with long chord positions without truncating', () => {
+    const line: Line = {
+      type: LineType.chord,
+      text: '',
+      chords: [
+        {chord: 'C', add: null, slashChord: null, position: 120, length: 1},
+      ],
+    };
+
+    const rendered = service.renderChords(line);
+
+    expect(rendered.text.length).toBe(121);
+    expect(rendered.text.endsWith('C')).toBeTrue();
+  });
 });

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

@@ -5,16 +5,56 @@ import {Chord} from './chord';
 import {Line} from './line';
 
 type TransposeMap = {[key: string]: string};
+type ScaleVariants = [string[], string[]];
 
 @Injectable({
   providedIn: 'root',
 })
 export class TransposeService {
+  private readonly keyToSemitone: Record<string, number> = {
+    C: 0,
+    'C#': 1,
+    Db: 1,
+    D: 2,
+    'D#': 3,
+    Eb: 3,
+    E: 4,
+    F: 5,
+    'F#': 6,
+    Gb: 6,
+    G: 7,
+    'G#': 8,
+    Ab: 8,
+    A: 9,
+    'A#': 10,
+    B: 10,
+    H: 11,
+    c: 0,
+    'c#': 1,
+    db: 1,
+    d: 2,
+    'd#': 3,
+    eb: 3,
+    e: 4,
+    f: 5,
+    'f#': 6,
+    gb: 6,
+    g: 7,
+    'g#': 8,
+    ab: 8,
+    a: 9,
+    'a#': 10,
+    b: 10,
+    h: 11,
+  };
+
+  private readonly mapCache = new Map<string, TransposeMap>();
+
   public transpose(line: Line, baseKey: string, targetKey: string): Line {
     if (line.type !== LineType.chord || !line.chords) return line;
 
     const difference = this.getDistance(baseKey, targetKey);
-    const map = this.getMap(baseKey, difference);
+    const map = this.getMap(baseKey, targetKey, difference);
 
     const chords = difference !== 0 && map ? line.chords.map(chord => this.transposeChord(chord, map)) : line.chords;
     const renderedLine = this.renderLine(chords);
@@ -32,32 +72,47 @@ export class TransposeService {
   }
 
   public getDistance(baseKey: string, targetKey: string): number {
-    const scale = getScaleType(baseKey);
-    return scale ? (scale[0].indexOf(targetKey) - scale[0].indexOf(baseKey) ?? scale[1].indexOf(targetKey) - scale[1].indexOf(baseKey)) % 12 : 0;
+    const baseSemitone = this.keyToSemitone[baseKey];
+    const targetSemitone = this.keyToSemitone[targetKey];
+
+    if (baseSemitone === undefined || targetSemitone === undefined) {
+      return 0;
     }
 
-  public getMap(baseKey: string, difference: number): TransposeMap | null {
-    const scale = getScaleType(baseKey);
-    if (!scale) {
+    return (targetSemitone - baseSemitone + 12) % 12;
+  }
+
+  public getMap(baseKey: string, targetKey: string, difference: number): TransposeMap | null {
+    const cacheKey = `${baseKey}:${targetKey}:${difference}`;
+    const cachedMap = this.mapCache.get(cacheKey);
+    if (cachedMap) {
+      return cachedMap;
+    }
+
+    const sourceScales = this.getScaleVariants(baseKey);
+    const targetScales = this.getScaleVariants(targetKey);
+    if (!sourceScales || !targetScales) {
       return null;
     }
-    const map: {[key: string]: string} = {};
+
+    const map: TransposeMap = {};
+    sourceScales.forEach((sourceScale, scaleIndex) => {
+      const targetScale = targetScales[scaleIndex];
       for (let i = 0; i < 12; i++) {
-      const source = scale[0][i];
+        const source = sourceScale[i];
         const mappedIndex = (i + difference + 12) % 12;
-      map[source] = scale[0][mappedIndex];
-    }
-    for (let i = 0; i < 12; i++) {
-      const source = scale[1][i];
-      const mappedIndex = (i + difference + 12) % 12;
-      map[source] = scale[1][mappedIndex];
+        map[source] = targetScale[mappedIndex];
       }
+    });
+
+    this.mapCache.set(cacheKey, map);
     return map;
   }
 
   private transposeChord(chord: Chord, map: TransposeMap): Chord {
-    const translatedChord = map[chord.chord];
-    const translatedSlashChord = chord.slashChord ? map[chord.slashChord] : null;
+    const translatedChord = map[chord.chord] ?? 'X';
+    const translatedSlashChord = chord.slashChord ? map[chord.slashChord] ?? 'X' : null;
+
     return {
       ...chord,
       chord: translatedChord,
@@ -66,23 +121,39 @@ export class TransposeService {
   }
 
   private renderLine(chords: Chord[]): string {
-    let template = '                                                                                                    ';
+    const width = chords.reduce((max, chord) => {
+      return Math.max(max, chord.position + this.renderChord(chord).length);
+    }, 0);
+
+    let template = ''.padEnd(width, ' ');
 
     chords.forEach(chord => {
       const pos = chord.position;
       const renderedChord = this.renderChord(chord);
       const newLength = renderedChord.length;
 
-      const pre = template.substr(0, pos);
-      const post = template.substr(pos + newLength);
+      if (template.length < pos + newLength) {
+        template = template.padEnd(pos + newLength, ' ');
+      }
+
+      const pre = template.slice(0, pos);
+      const post = template.slice(pos + newLength);
 
       template = pre + renderedChord + post;
     });
 
-    return template.trimRight();
+    return template.trimEnd();
   }
 
-  private renderChord(chord: Chord) {
-    return scaleMapping[chord.chord] + (chord.add ? chord.add : '') + (chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '');
+  private renderChord(chord: Chord): string {
+    const renderedChord = scaleMapping[chord.chord] ?? 'X';
+    const renderedSlashChord = chord.slashChord ? scaleMapping[chord.slashChord] ?? 'X' : '';
+
+    return renderedChord + (chord.add ?? '') + (renderedSlashChord ? '/' + renderedSlashChord : '');
+  }
+
+  private getScaleVariants(key: string): ScaleVariants | null {
+    const scales = getScaleType(key);
+    return scales ? [scales[0], scales[1]] : null;
   }
 }

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

@@ -10,7 +10,10 @@ import {FileServer} from './fileServer';
   providedIn: 'root',
 })
 export class UploadService extends FileBase {
-  public constructor(private fileDataService: FileDataService, private angularFireStorage: AngularFireStorage) {
+  public constructor(
+    private fileDataService: FileDataService,
+    private angularFireStorage: AngularFireStorage
+  ) {
     super();
   }
 

src/app/modules/songs/song-list/filter/filter.component.spec.ts

@@ -6,13 +6,11 @@ describe('FilterComponent', () => {
   let component: FilterComponent;
   let fixture: ComponentFixture<FilterComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [FilterComponent],
+      imports: [FilterComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FilterComponent);

src/app/modules/songs/song-list/filter/filter.component.ts

@@ -1,16 +1,24 @@
 import {Component, Input} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {FilterValues} from './filter-values';
 import {Song} from '../../services/song';
 import {KEYS} from '../../services/key.helper';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {NgFor} from '@angular/common';
+import {LegalTypePipe} from '../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
+import {KeyPipe} from '../../../../widget-modules/pipes/key-translator/key.pipe';
+import {SongTypePipe} from '../../../../widget-modules/pipes/song-type-translater/song-type.pipe';
 
 @Component({
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
-  standalone: false,
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatSelect, MatOption, NgFor, LegalTypePipe, KeyPipe, SongTypePipe],
 })
 export class FilterComponent {
   public filterFormGroup: UntypedFormGroup;
@@ -20,7 +28,11 @@ export class FilterComponent {
   public legalType = SongService.LEGAL_TYPE;
   public keys = KEYS;
 
-  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
+  public constructor(
+    private router: Router,
+    activatedRoute: ActivatedRoute,
+    fb: UntypedFormBuilder
+  ) {
     this.filterFormGroup = fb.group({
       q: '',
       type: '',

src/app/modules/songs/song-list/song-list.component.less

@@ -1,5 +1,3 @@
-@import "../../../../styles/styles";
-
 .list-item {
   padding: 5px 20px;
   display: grid;
@@ -11,13 +9,14 @@
   }
 
   cursor: pointer;
+  transition: var(--transition);
 
   &:hover {
-    background: @primary-color;
-    color: #fff;
+    background: var(--hover-background);
+    color: var(--text);
 
     .warning {
-      color: #fff;
+      color: var(--danger);
     }
   }
 }
@@ -33,13 +32,13 @@
 }
 
 .neutral {
-  color: #888;
+  color: var(--text-soft);
 }
 
 .warning {
-  color: #ba3500;
+  color: var(--danger);
 }
 
 .success {
-  color: #307501;
+  color: var(--success);
 }

src/app/modules/songs/song-list/song-list.component.spec.ts

@@ -15,15 +15,13 @@ describe('SongListComponent', () => {
     list: () => of(songs),
   };
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [SongListComponent],
+      imports: [SongListComponent],
       providers: [{provide: SongService, useValue: mockSongService}],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongListComponent);

src/app/modules/songs/song-list/song-list.component.ts

@@ -4,11 +4,17 @@ import {Song} from '../services/song';
 import {map} from 'rxjs/operators';
 import {combineLatest, Observable} from 'rxjs';
 import {fade} from '../../../animations';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, RouterLink} from '@angular/router';
 import {filterSong} from '../../../services/filter.helper';
 import {FilterValues} from './filter/filter-values';
 import {ScrollService} from '../../../services/scroll.service';
 import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons';
+import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
+import {FilterComponent} from './filter/filter.component';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 
 @Component({
   selector: 'app-songs',
@@ -16,30 +22,28 @@ import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-sol
   styleUrls: ['./song-list.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fade],
-  standalone: false,
+  imports: [NgIf, ListHeaderComponent, FilterComponent, CardComponent, NgFor, RouterLink, RoleDirective, FaIconComponent, AsyncPipe],
 })
 export class SongListComponent implements OnInit, OnDestroy {
   public anyFilterActive = false;
-  public songs$: Observable<Song[]> | null = combineLatest([
+  public songs$: Observable<Song[]> = combineLatest([
     this.activatedRoute.queryParams.pipe(map(_ => _ as FilterValues)),
-    this.activatedRoute.data.pipe(
-      map(data => data.songList as Song[]),
-      map(songs => songs.sort((a, b) => a.number - b.number)),
-    ),
+    this.songService.list$().pipe(map(songs => [...songs].sort((a, b) => a.number - b.number))),
   ]).pipe(
-    map(_ => {
-      const songs = _[1];
-      const filter = _[0];
+    map(([filter, songs]) => {
       this.anyFilterActive = this.checkIfFilterActive(filter);
       return songs.filter(song => this.filter(song, filter)).sort((a, b) => a.title?.localeCompare(b.title));
-    }),
+    })
   );
   public faLegal = faBalanceScaleRight;
   public faDraft = faPencilRuler;
   public faFinal = faCheck;
 
-  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {
-  }
+  public constructor(
+    private songService: SongService,
+    private activatedRoute: ActivatedRoute,
+    private scrollService: ScrollService
+  ) {}
 
   public ngOnInit(): void {
     setTimeout(() => this.scrollService.restoreScrollPositionFor('songlist'), 100);

src/app/modules/songs/song-list/song-list.module.ts

@@ -1,43 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SongListComponent} from './song-list.component';
-import {CardModule} from '../../../widget-modules/components/card/card.module';
-import {RouterModule} from '@angular/router';
-import {
-  LegalTypeTranslatorModule,
-} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
-import {ListHeaderModule} from '../../../widget-modules/components/list-header/list-header.module';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {FilterComponent} from './filter/filter.component';
-import {ReactiveFormsModule} from '@angular/forms';
-import {MatSelectModule} from '@angular/material/select';
-import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
-import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {RoleModule} from '../../../services/user/role.module';
-import {KeyTranslatorModule} from '../../../widget-modules/pipes/key-translator/key-translator.module';
-
-@NgModule({
-  declarations: [SongListComponent, FilterComponent],
-  exports: [SongListComponent],
-  imports: [
-    CommonModule,
-    RouterModule,
-
-    CardModule,
-    LegalTypeTranslatorModule,
-    ListHeaderModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule,
-    MatSelectModule,
-    SongTypeTranslaterModule,
-    FontAwesomeModule,
-    MatTooltipModule,
-    RoleModule,
-    KeyTranslatorModule,
-  ],
-})
-export class SongListModule {
-}

src/app/modules/songs/song/edit/edit-file/edit-file.component.spec.ts

@@ -6,13 +6,11 @@ describe('EditFileComponent', () => {
   let component: EditFileComponent;
   let fixture: ComponentFixture<EditFileComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [EditFileComponent],
+      imports: [EditFileComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EditFileComponent);

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

@@ -6,12 +6,17 @@ import {map, switchMap} from 'rxjs/operators';
 import {FileDataService} from '../../../services/file-data.service';
 import {Observable} from 'rxjs';
 import {File} from '../../../services/file';
+import {CardComponent} from '../../../../../widget-modules/components/card/card.component';
+import {AsyncPipe, NgFor, NgIf, NgStyle} from '@angular/common';
+import {MatIconButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
+import {FileComponent} from './file/file.component';
 
 @Component({
   selector: 'app-edit-file',
   templateUrl: './edit-file.component.html',
   styleUrls: ['./edit-file.component.less'],
-  standalone: false,
+  imports: [CardComponent, NgIf, NgStyle, MatIconButton, MatIcon, NgFor, FileComponent, AsyncPipe],
 })
 export class EditFileComponent {
   public selectedFiles: FileList | null = null;
@@ -19,11 +24,15 @@ export class EditFileComponent {
   public songId: string | null = null;
   public files$: Observable<File[]>;
 
-  public constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService, private fileService: FileDataService) {
+  public constructor(
+    private activatedRoute: ActivatedRoute,
+    private uploadService: UploadService,
+    private fileService: FileDataService
+  ) {
     this.activatedRoute.params
       .pipe(
         map(param => param as {songId: string}),
-        map(param => param.songId),
+        map(param => param.songId)
       )
       .subscribe(songId => {
         this.songId = songId;
@@ -32,7 +41,7 @@ export class EditFileComponent {
     this.files$ = this.activatedRoute.params.pipe(
       map(param => param as {songId: string}),
       map(param => param.songId),
-      switchMap(songId => this.fileService.read$(songId)),
+      switchMap(songId => this.fileService.read$(songId))
     );
   }
 

src/app/modules/songs/song/edit/edit-file/file/file.component.spec.ts

@@ -6,13 +6,11 @@ describe('FileComponent', () => {
   let component: FileComponent;
   let fixture: ComponentFixture<FileComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [FileComponent],
+      imports: [FileComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FileComponent);

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

@@ -3,12 +3,15 @@ import {Observable} from 'rxjs';
 import {File} from '../../../../services/file';
 import {faTrashAlt} from '@fortawesome/free-solid-svg-icons';
 import {FileService} from '../../../../services/file.service';
+import {MatIconButton} from '@angular/material/button';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-file',
   templateUrl: './file.component.html',
   styleUrls: ['./file.component.less'],
-  standalone: false,
+  imports: [MatIconButton, FaIconComponent, AsyncPipe],
 })
 export class FileComponent {
   public url$: Observable<string> | null = null;
@@ -18,8 +21,7 @@ export class FileComponent {
   private fileId: string | null = null;
   private path: string | null = null;
 
-  public constructor(private fileService: FileService) {
-  }
+  public constructor(private fileService: FileService) {}
 
   @Input()
   public set file(file: File) {

src/app/modules/songs/song/edit/edit-song.guard.ts

@@ -11,7 +11,7 @@ export class EditSongGuard {
     component: EditComponent,
     currentRoute: ActivatedRouteSnapshot,
     currentState: RouterStateSnapshot,
-    nextState: RouterStateSnapshot,
+    nextState: RouterStateSnapshot
   ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     return component.editSongComponent ? component.editSongComponent.askForSave(nextState) : true;
   }

src/app/modules/songs/song/edit/edit-song/edit-song.component.spec.ts

@@ -6,13 +6,11 @@ describe('EditSongComponent', () => {
   let component: EditSongComponent;
   let fixture: ComponentFixture<EditSongComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [EditSongComponent],
+      imports: [EditSongComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EditSongComponent);

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -1,22 +1,64 @@
 import {Component, OnInit} from '@angular/core';
 import {Song} from '../../../services/song';
-import {UntypedFormGroup} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormGroup} from '@angular/forms';
 import {ActivatedRoute, Router, RouterStateSnapshot} from '@angular/router';
 import {SongService} from '../../../services/song.service';
 import {EditService} from '../edit.service';
 import {first, map, switchMap} from 'rxjs/operators';
 import {KEYS} from '../../../services/key.helper';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
-import {MatChipInputEvent} from '@angular/material/chips';
+import {MatChipGrid, MatChipInput, MatChipInputEvent, MatChipRow} from '@angular/material/chips';
 import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
 import {MatDialog} from '@angular/material/dialog';
 import {SaveDialogComponent} from './save-dialog/save-dialog.component';
+import {NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {CdkTextareaAutosize} from '@angular/cdk/text-field';
+import {SongTextComponent} from '../../../../../widget-modules/components/song-text/song-text.component';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {MatTooltip} from '@angular/material/tooltip';
+import {ButtonRowComponent} from '../../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../../widget-modules/components/button/button.component';
+import {SongTypePipe} from '../../../../../widget-modules/pipes/song-type-translater/song-type.pipe';
+import {LegalOwnerPipe} from '../../../../../widget-modules/pipes/legal-owner-translator/legal-owner.pipe';
+import {LegalTypePipe} from '../../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
+import {KeyPipe} from '../../../../../widget-modules/pipes/key-translator/key.pipe';
+import {StatusPipe} from '../../../../../widget-modules/pipes/status-translater/status.pipe';
 
 @Component({
   selector: 'app-edit-song',
   templateUrl: './edit-song.component.html',
   styleUrls: ['./edit-song.component.less'],
-  standalone: false,
+  imports: [
+    NgIf,
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    MatSelect,
+    NgFor,
+    MatOption,
+    CdkTextareaAutosize,
+    SongTextComponent,
+    MatChipGrid,
+    MatChipRow,
+    FaIconComponent,
+    MatChipInput,
+    MatSuffix,
+    MatTooltip,
+    ButtonRowComponent,
+    ButtonComponent,
+    SongTypePipe,
+    LegalOwnerPipe,
+    LegalTypePipe,
+    KeyPipe,
+    StatusPipe,
+  ],
 })
 export class EditSongComponent implements OnInit {
   public song: Song | null = null;
@@ -38,9 +80,8 @@ export class EditSongComponent implements OnInit {
     private songService: SongService,
     private editService: EditService,
     private router: Router,
-    public dialog: MatDialog,
-  ) {
-  }
+    public dialog: MatDialog
+  ) {}
 
   public ngOnInit(): void {
     this.activatedRoute.params
@@ -48,7 +89,7 @@ export class EditSongComponent implements OnInit {
         map(param => param as {songId: string}),
         map(param => param.songId),
         switchMap(songId => this.songService.read$(songId)),
-        first(),
+        first()
       )
       .subscribe(song => {
         this.song = song;

src/app/modules/songs/song/edit/edit-song/save-dialog/save-dialog.component.spec.ts

@@ -6,13 +6,11 @@ describe('SaveDialogComponent', () => {
   let component: SaveDialogComponent;
   let fixture: ComponentFixture<SaveDialogComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
       declarations: [SaveDialogComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SaveDialogComponent);

src/app/modules/songs/song/edit/edit-song/save-dialog/save-dialog.component.ts

@@ -1,10 +1,11 @@
 import {Component} from '@angular/core';
+import {MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle} from '@angular/material/dialog';
+import {MatButton} from '@angular/material/button';
 
 @Component({
   selector: 'app-save-dialog',
   templateUrl: './save-dialog.component.html',
   styleUrls: ['./save-dialog.component.less'],
-  standalone: false,
+  imports: [MatDialogClose, MatDialogTitle, MatDialogContent, MatDialogActions, MatButton],
 })
-export class SaveDialogComponent {
-}
+export class SaveDialogComponent {}

src/app/modules/songs/song/edit/edit.component.spec.ts

@@ -6,13 +6,11 @@ describe('EditComponent', () => {
   let component: EditComponent;
   let fixture: ComponentFixture<EditComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [EditComponent],
+      imports: [EditComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EditComponent);

src/app/modules/songs/song/edit/edit.component.ts

@@ -1,11 +1,13 @@
 import {Component, ViewChild} from '@angular/core';
 import {EditSongComponent} from './edit-song/edit-song.component';
+import {EditFileComponent} from './edit-file/edit-file.component';
+import {HistoryComponent} from './history/history.component';
 
 @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.less'],
-  standalone: false,
+  imports: [EditSongComponent, EditFileComponent, HistoryComponent],
 })
 export class EditComponent {
   @ViewChild(EditSongComponent) public editSongComponent: EditSongComponent | null = null;

src/app/modules/songs/song/edit/edit.module.ts

@@ -1,60 +1,59 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {EditComponent} from './edit.component';
-import {CardModule} from '../../../../widget-modules/components/card/card.module';
-import {SongTypeTranslaterModule} from '../../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
+
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatSelectModule} from '@angular/material/select';
 import {MatButtonModule} from '@angular/material/button';
-import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
+
 import {RouterModule} from '@angular/router';
 import {EditSongComponent} from './edit-song/edit-song.component';
 import {EditFileComponent} from './edit-file/edit-file.component';
 import {MatIconModule} from '@angular/material/icon';
 import {FileComponent} from './edit-file/file/file.component';
-import {LegalOwnerTranslatorModule} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
-import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
-import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translator/key-translator.module';
 import {MatChipsModule} from '@angular/material/chips';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-translater/status-translater.module';
-import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
+
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {SaveDialogComponent} from './edit-song/save-dialog/save-dialog.component';
 import {MatDialogModule} from '@angular/material/dialog';
 import {HistoryComponent} from './history/history.component';
 import {SongTextComponent} from '../../../../widget-modules/components/song-text/song-text.component';
+import {KeyPipe} from '../../../../widget-modules/pipes/key-translator/key.pipe';
+import {LegalOwnerPipe} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner.pipe';
+import {LegalTypePipe} from '../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
+import {SongTypePipe} from '../../../../widget-modules/pipes/song-type-translater/song-type.pipe';
+import {StatusPipe} from '../../../../widget-modules/pipes/status-translater/status.pipe';
 
 @NgModule({
-  declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent, SaveDialogComponent, HistoryComponent],
   exports: [EditComponent],
-  bootstrap: [SaveDialogComponent],
   imports: [
     CommonModule,
-    CardModule,
-    SongTypeTranslaterModule,
+    SongTypePipe,
     ReactiveFormsModule,
     RouterModule,
-
     MatInputModule,
     MatButtonModule,
     MatCheckboxModule,
     MatSelectModule,
-    ButtonRowModule,
-
     MatIconModule,
-    LegalOwnerTranslatorModule,
-    LegalTypeTranslatorModule,
-    KeyTranslatorModule,
+    LegalOwnerPipe,
+    LegalTypePipe,
+    KeyPipe,
     MatChipsModule,
     FontAwesomeModule,
-    StatusTranslaterModule,
-    ButtonModule,
+    StatusPipe,
     MatTooltipModule,
     MatDialogModule,
     SongTextComponent,
+    EditComponent,
+    EditSongComponent,
+    EditFileComponent,
+    FileComponent,
+    HistoryComponent,
+    SaveDialogComponent,
   ],
 })
 export class EditModule {}

src/app/modules/songs/song/edit/history/history.component.spec.ts

@@ -6,13 +6,11 @@ describe('HistoryComponent', () => {
   let component: HistoryComponent;
   let fixture: ComponentFixture<HistoryComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [HistoryComponent],
+      imports: [HistoryComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HistoryComponent);

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

@@ -3,18 +3,22 @@ import {first, map, switchMap} from 'rxjs/operators';
 import {ActivatedRoute} from '@angular/router';
 import {SongService} from '../../../services/song.service';
 import {Song} from '../../../services/song';
+import {DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../../../widget-modules/components/card/card.component';
 
 @Component({
   selector: 'app-history',
   templateUrl: './history.component.html',
   styleUrls: ['./history.component.less'],
-  standalone: false,
+  imports: [NgIf, CardComponent, NgFor, DatePipe],
 })
 export class HistoryComponent implements OnInit {
   public song: Song | null = null;
 
-  public constructor(private activatedRoute: ActivatedRoute, private songService: SongService) {
-  }
+  public constructor(
+    private activatedRoute: ActivatedRoute,
+    private songService: SongService
+  ) {}
 
   public ngOnInit(): void {
     this.activatedRoute.params
@@ -22,7 +26,7 @@ export class HistoryComponent implements OnInit {
         map(param => param as {songId: string}),
         map(param => param.songId),
         switchMap(songId => this.songService.read$(songId)),
-        first(),
+        first()
       )
       .subscribe(song => {
         this.song = song;

src/app/modules/songs/song/file/file.component.spec.ts

@@ -6,13 +6,11 @@ describe('FileComponent', () => {
   let component: FileComponent;
   let fixture: ComponentFixture<FileComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [FileComponent],
+      imports: [FileComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FileComponent);

src/app/modules/songs/song/file/file.component.ts

@@ -2,19 +2,19 @@ import {Component, Input} from '@angular/core';
 import {File} from '../../services/file';
 import {AngularFireStorage} from '@angular/fire/compat/storage';
 import {Observable} from 'rxjs';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-file',
   templateUrl: './file.component.html',
   styleUrls: ['./file.component.less'],
-  standalone: false,
+  imports: [AsyncPipe],
 })
 export class FileComponent {
   public url$: Observable<string> | null = null;
   public name = '';
 
-  public constructor(private storage: AngularFireStorage) {
-  }
+  public constructor(private storage: AngularFireStorage) {}
 
   @Input()
   public set file(file: File) {

src/app/modules/songs/song/new/new.component.spec.ts

@@ -6,13 +6,11 @@ describe('NewComponent', () => {
   let component: NewComponent;
   let fixture: ComponentFixture<NewComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [NewComponent],
+      imports: [NewComponent],
     }).compileComponents();
-    }),
-  );
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewComponent);

src/app/modules/songs/song/new/new.component.ts

@@ -1,16 +1,21 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {Song} from '../../services/song';
 import {Router} from '@angular/router';
 import {Subscription} from 'rxjs';
+import {CardComponent} from '../../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
 
 @Component({
   selector: 'app-new',
   templateUrl: './new.component.html',
   styleUrls: ['./new.component.less'],
-  standalone: false,
+  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent],
 })
 export class NewComponent implements OnInit, OnDestroy {
   public faSave = faSave;
@@ -20,8 +25,10 @@ export class NewComponent implements OnInit, OnDestroy {
   });
   private subs: Subscription[] = [];
 
-  public constructor(private songService: SongService, private router: Router) {
-  }
+  public constructor(
+    private songService: SongService,
+    private router: Router
+  ) {}
 
   public ngOnInit(): void {
     this.form.reset();
@@ -30,7 +37,7 @@ export class NewComponent implements OnInit, OnDestroy {
       this.songService.list$().subscribe(songs => {
         const freeSongnumber = this.getFreeSongNumber(songs);
         this.form.controls.number.setValue(freeSongnumber);
-      }),
+      })
     );
   }
 

src/app/modules/songs/song/new/new.module.ts

@@ -1,17 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {NewComponent} from './new.component';
-import {CardModule} from '../../../../widget-modules/components/card/card.module';
-import {ReactiveFormsModule} from '@angular/forms';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
-import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
-import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/autofocus.module';
-
-@NgModule({
-  declarations: [NewComponent],
-  imports: [CommonModule, CardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, ButtonRowModule, ButtonModule, AutofocusModule],
-})
-export class NewModule {
-}