optimize show filter

fix show filter
optimize firebase monitor reads
2026-03-09 18:29:56 +01:00 · 2026-03-09 17:51:35 +01:00 · 2026-03-09 17:48:59 +01:00 · 2026-03-09 17:44:45 +01:00 · 2026-03-09 17:41:24 +01:00 · 2026-03-09 17:18:49 +01:00
47 changed files with 679 additions and 326 deletions
--- a/README.md
+++ b/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.
--- a/src/app/app.component.less
+++ b/src/app/app.component.less
@@ -1,3 +1,3 @@
 h1 {
-  color: red;
+  color: var(--text);
 }
--- a/src/app/modules/brand/new-user/new-user.component.less
+++ b/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;
  }
 }

--- a/src/app/modules/guest/guest-show-data.service.ts
+++ b/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;
--- a/src/app/modules/guest/guest.component.less
+++ b/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 {
--- a/src/app/modules/presentation/monitor/monitor.component.ts
+++ b/src/app/modules/presentation/monitor/monitor.component.ts
@@ -1,15 +1,14 @@
-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 {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';
@@ -25,7 +24,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
  animations: [songSwitch],
  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;
@@ -37,12 +36,11 @@ 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
@@ -52,40 +50,68 @@ export class MonitorComponent implements OnInit {

  public ngOnInit(): void {
    openFullscreen();
-    this.globalSettingsService.get$
+    const currentShowId$ = this.globalSettingsService.get$
      .pipe(
        debounceTime(100),
        filter(_ => !!_),
        map(_ => _),
        map(_ => _.currentShow),
        distinctUntilChanged(),
-        tap(_ => (this.currentShowId = _))
-      )
+        tap(_ => (this.currentShowId = _)),
+        takeUntil(this.destroy$)
+      );
+
+    const show$ = currentShowId$
      .pipe(
-        switchMap(_ => this.showService.read$(_)),
-        filter(_ => !!_),
-        map(_ => _),
-        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();
+  }
 }
--- a/src/app/modules/presentation/remote/remote.component.less
+++ b/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);
  }
 }
--- a/src/app/modules/presentation/remote/remote.component.ts
+++ b/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,7 +7,7 @@ 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';
@@ -62,7 +62,7 @@ export interface PresentationSong {
    SectionTypePipe,
  ],
 })
-export class RemoteComponent {
+export class RemoteComponent implements OnDestroy {
  public show: Show | null = null;
  public showSongs: ShowSong[] = [];
  public songs$ = this.songService.list$();
@@ -73,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,
@@ -84,11 +85,30 @@ export class RemoteComponent {
  ) {
    globalSettingsService.get$
      .pipe(
-        filter(_ => !!_),
-        map(_ => _.currentShow)
+        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};
+            })
+          )
+        ),
+        takeUntil(this.destroy$)
      )
-      .subscribe(_ => {
-        this.onShowChanged(_);
+      .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();
      });

@@ -102,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;
  }
@@ -142,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();
+  }
 }
--- a/src/app/modules/shows/list/filter/filter.component.html
+++ b/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>
--- a/src/app/modules/shows/list/filter/filter.component.ts
+++ b/src/app/modules/shows/list/filter/filter.component.ts
@@ -54,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));
@@ -87,7 +89,7 @@ export class FilterComponent {

  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);
--- a/src/app/modules/shows/list/list-item/list-item.component.less
+++ b/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);
  }
 }

--- a/src/app/modules/shows/list/list.component.ts
+++ b/src/app/modules/shows/list/list.component.ts
@@ -5,7 +5,7 @@ import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
 import {FilterValues} from './filter/filter-values';
 import {ActivatedRoute, RouterLink} from '@angular/router';
-import {map} from 'rxjs/operators';
+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';
@@ -37,17 +37,32 @@ export class ListComponent {
      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 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 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.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);
+    })
  );

  public constructor(
--- a/src/app/modules/shows/services/show-data.service.ts
+++ b/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;
 }
--- a/src/app/modules/shows/services/show-song-data.service.ts
+++ b/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,10 +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 list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
+  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => {
+    if (queryFn) {
+      return 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);
--- a/src/app/modules/shows/services/show-song.service.ts
+++ b/src/app/modules/shows/services/show-song.service.ts
@@ -40,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);
--- a/src/app/modules/shows/services/show.service.ts
+++ b/src/app/modules/shows/services/show.service.ts
@@ -23,6 +23,7 @@ export class ShowService {
  }

  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(
@@ -30,12 +31,7 @@ export class ShowService {
        () => 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))
-      )
+      map(s => s.shows.filter(show => !show.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
    );
  }

--- a/src/app/modules/shows/show/show.component.less
+++ b/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;
@@ -62,7 +63,7 @@
 }

 .time {
-  color: #0008;
+  color: var(--text-muted);
  position: fixed;
  bottom: 0;
  left: 10px;
--- a/src/app/modules/shows/show/song/song.component.less
+++ b/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);
    }
  }
 }
--- a/src/app/modules/songs/services/key.helper.spec.ts
+++ b/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']);
+  });
+});
--- a/src/app/modules/songs/services/key.helper.ts
+++ b/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♭',
--- a/src/app/modules/songs/services/song-data.service.ts
+++ b/src/app/modules/songs/services/song-data.service.ts
@@ -1,24 +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();
--- a/src/app/modules/songs/services/song-list.resolver.ts
+++ b/src/app/modules/songs/services/song-list.resolver.ts
@@ -3,7 +3,7 @@ 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',
@@ -12,6 +12,6 @@ export class SongListResolver {
  public constructor(private songService: SongService) {}

  public resolve(): Observable<Song[]> {
-    return this.songService.list$().pipe(filter(_ => _.length > 0));
+    return this.songService.list$().pipe(take(1));
  }
 }
--- a/src/app/modules/songs/services/transpose.service.spec.ts
+++ b/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();
+  });
 });
--- a/src/app/modules/songs/services/transpose.service.ts
+++ b/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;
+    }
+
+    return (targetSemitone - baseSemitone + 12) % 12;
  }

-  public getMap(baseKey: string, difference: number): TransposeMap | null {
-    const scale = getScaleType(baseKey);
-    if (!scale) {
+  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} = {};
-    for (let i = 0; i < 12; i++) {
-      const source = scale[0][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];
-    }
+
+    const map: TransposeMap = {};
+    sourceScales.forEach((sourceScale, scaleIndex) => {
+      const targetScale = targetScales[scaleIndex];
+      for (let i = 0; i < 12; i++) {
+        const source = sourceScale[i];
+        const mappedIndex = (i + difference + 12) % 12;
+        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;
  }
 }
--- a/src/app/modules/songs/song-list/song-list.component.less
+++ b/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);
 }
--- a/src/app/modules/songs/song-list/song-list.component.ts
+++ b/src/app/modules/songs/song-list/song-list.component.ts
@@ -26,16 +26,11 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 })
 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));
    })
--- a/src/app/modules/songs/song/song.component.html
+++ b/src/app/modules/songs/song/song.component.html
@@ -28,8 +28,7 @@
          <div *ngIf="song.artist">Künstler: {{ song.artist }}</div>
          <div *ngIf="song.label">Verlag: {{ song.label }}</div>
          <div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
-          <div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
-          <div *ngIf="songCount$()|async as count">Wie oft verwendet: {{ count }}</div>
+          <div>Wie oft verwendet: {{ songCount$ | async }}</div>
        </div>
      </div>

--- a/src/app/modules/songs/song/song.component.ts
+++ b/src/app/modules/songs/song/song.component.ts
@@ -56,6 +56,7 @@ export class SongComponent implements OnInit {
  public song$: Observable<Song | null> | null = null;
  public files$: Observable<File[] | null> | null = null;
  public user$: Observable<User | null> | null = null;
+  public songCount$: Observable<number> | null = null;
  public faEdit = faEdit;
  public faDelete = faTrash;
  public faFileCirclePlus = faFileCirclePlus;
@@ -85,6 +86,17 @@ export class SongComponent implements OnInit {
      map(param => param.songId),
      switchMap(songId => this.fileService.read$(songId))
    );
+
+    this.songCount$ = combineLatest([this.user$, this.song$]).pipe(
+      map(([user, song]) => {
+        if (!song) {
+          return 0;
+        }
+
+        return user?.songUsage?.[song.id] ?? 0;
+      }),
+      distinctUntilChanged()
+    );
  }

  public getFlags = (flags: string): string[] => {
@@ -105,12 +117,4 @@ export class SongComponent implements OnInit {
    await this.showService.update$(show?.id, {order: [...show.order, newId ?? '']});
    await this.router.navigateByUrl('/shows/' + show.id);
  }
-
-  public songCount$ = () =>
-    combineLatest([this.user$, this.song$]).pipe(
-      map(([user, song]) => {
-        return user.songUsage[song.id];
-      }),
-      distinctUntilChanged()
-    );
 }
--- a/src/app/modules/songs/songs-routing.module.ts
+++ b/src/app/modules/songs/songs-routing.module.ts
@@ -5,13 +5,11 @@ import {SongListComponent} from './song-list/song-list.component';
 import {EditComponent} from './song/edit/edit.component';
 import {NewComponent} from './song/new/new.component';
 import {EditSongGuard} from './song/edit/edit-song.guard';
-import {SongListResolver} from './services/song-list.resolver';

 const routes: Routes = [
  {
    path: '',
    component: SongListComponent,
-    resolve: {songList: SongListResolver},
    pathMatch: 'full',
  },
  {
--- a/src/app/modules/user/info/info.component.less
+++ b/src/app/modules/user/info/info.component.less
@@ -1,5 +1,5 @@
 .warn {
-  color: #621700;
+  color: var(--danger);
 }

 p {
--- a/src/app/modules/user/info/users/user/user.component.less
+++ b/src/app/modules/user/info/users/user/user.component.less
@@ -1,5 +1,3 @@
-@import "../../../../../../styles/styles";
-
 .users {
  display: grid;
  grid-template-columns: 1fr 1fr 40px;
@@ -10,6 +8,6 @@
  cursor: pointer;

  &:hover {
-    color: @primary-color;
+    color: var(--primary-color);
  }
 }
--- a/src/app/modules/user/login/login.component.less
+++ b/src/app/modules/user/login/login.component.less
@@ -4,7 +4,7 @@

 p.error {
  margin: 8px 10px;
-  color: darkred;
+  color: var(--danger);
 }

 .login {
@@ -12,9 +12,11 @@ p.error {
  padding: 20px;
  width: 400px;
  margin: 100px 0;
-  background: #fffa;
+  background: var(--surface);
+  border: 1px solid var(--surface-border);
  border-radius: 8px;
  font-size: 18px;
+  color: var(--text);
  position: relative;
  @media screen and (max-width: 860px) {
    margin: 20px;
@@ -33,11 +35,11 @@ button {

 .btn-password {
  margin-bottom: 20px;
-  color: #888;
+  color: var(--text-soft);
 }

 .btn-user {
-  color: #888;
+  color: var(--text-soft);
 }

 .frame {
--- a/src/app/modules/user/password/password.component.less
+++ b/src/app/modules/user/password/password.component.less
@@ -4,5 +4,5 @@

 p.error {
  margin: 8px 10px;
-  color: darkred;
+  color: var(--danger);
 }
--- a/src/app/services/config.service.ts
+++ b/src/app/services/config.service.ts
@@ -2,13 +2,21 @@ import {Injectable} from '@angular/core';
 import {DbService} from './db.service';
 import {firstValueFrom, Observable} from 'rxjs';
 import {Config} from './config';
+import {shareReplay} from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
 })
 export class ConfigService {
+  private readonly config$ = this.db.doc$<Config>('global/config').pipe(
+    shareReplay({
+      bufferSize: 1,
+      refCount: true,
+    })
+  );
+
  public constructor(private db: DbService) {}

-  public get$ = (): Observable<Config | null> => this.db.doc$<Config>('global/config');
+  public get$ = (): Observable<Config | null> => this.config$;
  public get = (): Promise<Config | null> => firstValueFrom(this.get$());
 }
--- a/src/app/services/filter.helper.spec.ts
+++ b/src/app/services/filter.helper.spec.ts
@@ -5,10 +5,10 @@ describe('Filter Helper', () => {
  const song: Song = {
    title: 'Song Title',
    text: "This is a songtext, aa?bb!cc,dd.ee'ff",
-    legalOwner: '',
+    legalOwner: 'other',
    label: '',
    id: '',
-    legalType: '',
+    legalType: 'open',
    artist: '',
    comment: '',
    edits: [],
@@ -18,9 +18,9 @@ describe('Filter Helper', () => {
    number: 1,
    legalOwnerId: '',
    origin: '',
-    status: '',
+    status: 'draft',
    tempo: 10,
-    type: '',
+    type: 'Misc',
    termsOfUse: '',
  };

--- a/src/app/services/global-settings.service.ts
+++ b/src/app/services/global-settings.service.ts
@@ -2,15 +2,23 @@ import {Injectable} from '@angular/core';
 import {DbService} from './db.service';
 import {GlobalSettings} from './global-settings';
 import {Observable} from 'rxjs';
+import {shareReplay} from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
 })
 export class GlobalSettingsService {
+  private readonly settings$ = this.db.doc$<GlobalSettings>('global/static').pipe(
+    shareReplay({
+      bufferSize: 1,
+      refCount: true,
+    })
+  );
+
  public constructor(private db: DbService) {}

  public get get$(): Observable<GlobalSettings | null> {
-    return this.db.doc$<GlobalSettings>('global/static');
+    return this.settings$;
  }

  public async set(data: Partial<GlobalSettings>): Promise<void> {
--- a/src/app/services/user/user.service.ts
+++ b/src/app/services/user/user.service.ts
@@ -1,19 +1,26 @@
 import {Injectable} from '@angular/core';
 import {AngularFireAuth} from '@angular/fire/compat/auth';
 import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
-import {filter, map, switchMap, tap} from 'rxjs/operators';
+import {filter, map, shareReplay, switchMap, take, tap} from 'rxjs/operators';
 import {User} from './user';
 import {DbService} from '../db.service';
 import {environment} from '../../../environments/environment';
 import {Router} from '@angular/router';
 import {ShowDataService} from '../../modules/shows/services/show-data.service';
 import {ShowSongDataService} from '../../modules/shows/services/show-song-data.service';
+import firebase from 'firebase/compat/app';
+
+export interface SongUsageMigrationResult {
+  usersProcessed: number;
+  showsProcessed: number;
+  showSongsProcessed: number;
+}

@Injectable({
  providedIn: 'root',
 })
 export class UserService {
-  public users$ = new BehaviorSubject<User[]>([]);
+  public users$ = this.db.col$<User>('users').pipe(shareReplay({bufferSize: 1, refCount: true}));
  private iUserId$ = new BehaviorSubject<string | null>(null);
  private iUser$ = new BehaviorSubject<User | null>(null);

@@ -32,8 +39,6 @@ export class UserService {
        switchMap(uid => this.readUser$(uid))
      )
      .subscribe(_ => this.iUser$.next(_));
-
-    this.db.col$<User>('users/').subscribe(_ => this.users$.next(_));
  }

  public get userId$(): Observable<string | null> {
@@ -53,6 +58,7 @@ export class UserService {
    const aUser = await this.afAuth.signInWithEmailAndPassword(user, password);
    if (!aUser.user) return null;
    const dUser = await this.readUser(aUser.user.uid);
+    if (!dUser) return null;
    await this.initSongUsage(dUser);
    this.iUser$.next(dUser);
    this.iUserId$.next(aUser.user.uid);
@@ -62,7 +68,7 @@ export class UserService {

  public loggedIn$: () => Observable<boolean> = () => this.afAuth.authState.pipe(map(_ => !!_));

-  public list$: () => Observable<User[]> = (): Observable<User[]> => this.db.col$('users');
+  public list$: () => Observable<User[]> = (): Observable<User[]> => this.users$;

  public async logout(): Promise<void> {
    await this.afAuth.signOut();
@@ -83,8 +89,9 @@ export class UserService {
    const aUser = await this.afAuth.createUserWithEmailAndPassword(user, password);
    if (!aUser.user) return;
    const userId = aUser.user.uid;
-    await this.db.doc('users/' + userId).set({name, chordMode: 'onlyFirst'});
+    await this.db.doc('users/' + userId).set({name, chordMode: 'onlyFirst', songUsage: {}});
    const dUser = await this.readUser(aUser.user.uid);
+    if (!dUser) return;
    this.iUser$.next(dUser);
    await this.router.navigateByUrl('/brand/new-user');
  }
@@ -92,35 +99,71 @@ export class UserService {
  public incSongCount = (songId: string) => this.updateSongUsage(songId, 1);
  public decSongCount = (songId: string) => this.updateSongUsage(songId, -1);

+  public async rebuildSongUsage(): Promise<SongUsageMigrationResult> {
+    const currentUser = await firstValueFrom(this.iUser$.pipe(take(1)));
+    if (!currentUser || !this.hasAdminRole(currentUser.role)) {
+      throw new Error('Admin role required to rebuild songUsage.');
+    }
+
+    const [users, shows] = await Promise.all([firstValueFrom(this.users$), firstValueFrom(this.showDataService.listRaw$())]);
+    const songUsageByUserId: Record<string, Record<string, number>> = {};
+
+    users.forEach(user => {
+      songUsageByUserId[user.id] = {};
+    });
+
+    let showSongsProcessed = 0;
+    for (const show of shows) {
+      const ownerId = show.owner;
+      if (!ownerId) {
+        continue;
+      }
+
+      const showSongs = await firstValueFrom(this.showSongDataService.list$(show.id));
+      const usage = songUsageByUserId[ownerId] ?? {};
+      songUsageByUserId[ownerId] = usage;
+
+      for (const showSong of showSongs) {
+        showSongsProcessed += 1;
+        usage[showSong.songId] = (usage[showSong.songId] ?? 0) + 1;
+      }
+    }
+
+    await Promise.all(
+      users.map(user =>
+        this.update$(user.id, {
+          songUsage: songUsageByUserId[user.id] ?? {},
+        })
+      )
+    );
+
+    return {
+      usersProcessed: users.length,
+      showsProcessed: shows.length,
+      showSongsProcessed,
+    };
+  }
+
  private async updateSongUsage(songId: string, direction: number) {
    const user = await firstValueFrom(this.user$);
    if (!user) return null;

-    const songUsage = user?.songUsage ?? {};
-    let currentSongCount = songUsage[songId];
-    if (currentSongCount === null || currentSongCount === undefined) currentSongCount = 0;
-    else currentSongCount = currentSongCount + direction;
-    songUsage[songId] = Math.max(0, currentSongCount);
-
-    await this.update$(user.id, {songUsage});
+    await this.db.doc<User>('users/' + user.id).update({
+      [`songUsage.${songId}`]: firebase.firestore.FieldValue.increment(direction),
+    });
  }

  private async initSongUsage(user: User) {
    if (user.songUsage) return;
+    await this.update$(user.id, {songUsage: {}});
+  }

-    const shows = await firstValueFrom(this.showDataService.listRaw$());
-    const myShows = shows.filter(show => show.owner === user.id);
-    const songUsage: {[songId: string]: number} = {};
-    for (const show of myShows) {
-      const showSongs = await firstValueFrom(this.showSongDataService.list$(show.id));
-      for (const showSong of showSongs) {
-        const current = songUsage[showSong.songId] ?? 0;
-        songUsage[showSong.songId] = current + 1;
-      }
+  private hasAdminRole(role: string | null | undefined): boolean {
+    if (!role) {
+      return false;
    }

-    await this.update$(user.id, {songUsage});
-    return;
+    return role.split(';').includes('admin');
  }

  private readUser$ = (uid: string) => this.db.doc$<User>('users/' + uid);
--- a/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less
+++ b/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less
@@ -1,16 +1,15 @@
-@import "../../../../../../styles/styles";
-
 input {
  font-size: 16px;
  background: transparent;
  border: none;
-  border-bottom: 1px solid #888;
-  color: #888;
-  transition: all 300ms ease-in-out;
+  border-bottom: 1px solid var(--text-soft);
+  color: var(--text-soft);
+  transition: var(--transition);

  &:focus {
    outline: none;
-    border-bottom: 1px solid @primary-color;
+    border-bottom: 1px solid var(--primary-color);
+    color: var(--text-inverse);
  }

  @media screen and (max-width: 500px) {
--- a/src/app/widget-modules/components/application-frame/navigation/link/link.component.less
+++ b/src/app/widget-modules/components/application-frame/navigation/link/link.component.less
@@ -1,5 +1,3 @@
-@import "../../../../../../styles/styles";
-
 a {
  opacity: 0.8;
  display: block;
@@ -10,13 +8,13 @@ a {
  padding: 15px;
  box-sizing: border-box;
  background: transparent;
-  transition: @transition;
-  border-color: #222;
+  transition: var(--transition);
+  border-color: transparent;

  fa-icon {
    display: inline-block;
    transform: scale(1);
-    transition: @transition;
+    transition: var(--transition);
  }

  @media screen and (max-width: 860px) {
@@ -26,8 +24,9 @@ a {
  }

  &:hover {
-    opacity: 0.9;
-    border-bottom: 5px solid #555;
+    opacity: 1;
+    color: var(--primary-hover);
+    border-bottom: 5px solid var(--hover-background);

    fa-icon {
      transform: scale(1.2);
@@ -35,8 +34,9 @@ a {
  }

  &.active {
-    border-bottom: 5px solid @primary-color;
+    border-bottom: 5px solid var(--primary-color);
    opacity: 1;
+    color: var(--text-inverse);

    fa-icon {
      transform: scale(1.3);
--- a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less
+++ b/src/app/widget-modules/components/application-frame/navigation/navigation.component.less
@@ -8,12 +8,12 @@ nav {
    left: 0;
    right: 0;
    height: 50px;
-    background: #222b;
-    color: #fff;
+    background: var(--navigation-background);
+    color: var(--text-inverse);
    z-index: 1;
    box-shadow: 0px -5px 20px 4px rgba(0, 0, 0, 0.39), 1px 0px 6px 4px rgba(0, 0, 0, 0.53);
    backdrop-filter: blur(10px);
-    transition: all 300ms ease-in-out;
+    transition: var(--transition);

    display: flex;
    align-items: flex-end;
--- a/src/app/widget-modules/components/button/button.component.less
+++ b/src/app/widget-modules/components/button/button.component.less
@@ -1,5 +1,11 @@
 button {
-  color: #373b44;
+  color: var(--text);
+  transition: var(--transition);
+
+  &:hover {
+    color: var(--primary-active);
+  }
+
  @media screen and (max-width: 860px) {
    font-size: 30px;
  }
--- a/src/app/widget-modules/components/card/card.component.less
+++ b/src/app/widget-modules/components/card/card.component.less
@@ -3,18 +3,20 @@
 .card {
  margin: 20px;
  border-radius: 8px;
-  background: #fffc;
+  background: var(--surface);
  backdrop-filter: blur(15px);
+  border: 1px solid var(--surface-border);
  overflow: hidden;
  width: 800px;
  position: relative;
+  color: var(--text);

  @media screen and (max-width: 860px) {
    width: 100vw;
    border-radius: 0;
-    background: #ffff;
+    background: var(--surface-strong);
    margin: 0;
-    color: #000;
+    color: var(--text);
  }

  &.padding {
@@ -25,9 +27,9 @@

  &.fullscreen {
    border-radius: 0;
-    background: #ffff;
+    background: var(--surface-strong);
    margin: 0;
-    color: #000;
+    color: var(--text);
    position: fixed;
    left: 0;
    right: 0;
@@ -44,6 +46,7 @@
  margin-bottom: 20px;
  margin-right: 20px;
  opacity: 0.7;
+  color: var(--text);
  padding-left: 20px;
  padding-top: 20px;
 }
@@ -54,6 +57,7 @@
  margin-bottom: 20px;
  margin-right: 20px;
  opacity: 0.7;
+  color: var(--text-muted);
  padding-left: 20px;
  padding-top: 20px;
 }
@@ -68,4 +72,5 @@
  right: 10px;
  top: 15px;
  opacity: 0.7;
+  color: var(--text-muted);
 }
--- a/src/app/widget-modules/components/list-header/list-header.component.less
+++ b/src/app/widget-modules/components/list-header/list-header.component.less
@@ -10,11 +10,11 @@
  display: flex;
  align-items: center;
  justify-content: flex-end;
-  color: #A6C4F5;
+  color: var(--primary-hover);

 }

 .filter-active {
-  color: #a21;
+  color: var(--danger);
  cursor: not-allowed;
 }
--- a/src/app/widget-modules/components/song-text/song-text.component.less
+++ b/src/app/widget-modules/components/song-text/song-text.component.less
@@ -54,8 +54,8 @@
 }

 .chord {
-  color: #00b;
-  text-shadow: 0 0 1px #00b;
+  color: var(--primary-active);
+  text-shadow: 0 0 1px var(--primary-hover);
 }

 .offset {
@@ -68,14 +68,14 @@
 }

 .error {
-  color: red;
+  color: var(--danger);
  font-size: 1.2em;
  font-weight: bold;
 }

 .comment {
-  color: #00b;
-  border-left: 2px solid #00b;
+  color: var(--primary-active);
+  border-left: 2px solid var(--primary-hover);
  padding-left: 6px;
  font-style: italic;
 }
--- a/src/custom-theme.scss
+++ b/src/custom-theme.scss
@@ -1,58 +1,22 @@
@use '@angular/material' as mat;

-
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-// Plus imports for other components in your app.
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
-//  The following line adds:
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+// Include the common styles for Angular Material once.
@include mat.all-component-typographies();
@include mat.elevation-classes();
@include mat.app-background();

-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
 $wgenerator-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
 $wgenerator-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
 $wgenerator-warn: mat.m2-define-palette(mat.$m2-red-palette);

-// Create the theme object (a Sass map containing all of the palettes).
-$wgenerator-theme: mat.m2-define-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn);
+$wgenerator-theme: mat.m2-define-light-theme((
+  color: (
+    primary: $wgenerator-primary,
+    accent: $wgenerator-accent,
+    warn: $wgenerator-warn,
+  ),
+  typography: mat.m2-define-typography-config(),
+  density: 0,
+));

-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
@include mat.all-component-themes($wgenerator-theme);
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-// Plus imports for other components in your app.
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
-//  The following line adds:
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
-@include mat.all-component-typographies();
-@include mat.elevation-classes();
-@include mat.app-background();
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,17 @@ import {AngularFireAuthModule} from '@angular/fire/compat/auth';
 import {AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {AppComponent} from './app/app.component';
+import {provideFirebaseApp, initializeApp} from '@angular/fire/app';
+import {provideFirestore, getFirestore} from '@angular/fire/firestore';
+import {UserService} from './app/services/user/user.service';
+
+declare global {
+  interface Window {
+    wgeneratorAdmin?: {
+      rebuildSongUsage(): Promise<unknown>;
+    };
+  }
+}

 if (environment.production) {
  enableProdMode();
@@ -35,8 +46,16 @@ bootstrapApplication(AppComponent, {
      AngularFireAuthGuardModule,
      FontAwesomeModule
    ),
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideFirestore(() => getFirestore()),
    {provide: MAT_DATE_LOCALE, useValue: 'de-DE'},
    provideAnimations(),
-    provideAnimations(),
  ],
-}).catch(err => console.error(err));
+})
+  .then(appRef => {
+    const userService = appRef.injector.get(UserService);
+    window.wgeneratorAdmin = {
+      rebuildSongUsage: () => userService.rebuildSongUsage(),
+    };
+  })
+  .catch(err => console.error(err));
--- a/src/styles/styles.less
+++ b/src/styles/styles.less
@@ -1,12 +1,39 @@
-@primary-color: #4286f4;
-
-@navigation-background: #fffffff1;
-
-@transition: all 300ms ease-in-out;
-
 :root {
-  --color-primary: #4286f4;
-  --color-primary-light: #639af3;
+  --bg-deep: #292e49;
+  --bg-mid: #536976;
+  --bg-soft: #bbd2c5;
+
+  --surface: rgba(244, 247, 245, 0.88);
+  --surface-strong: rgba(255, 255, 255, 0.96);
+  --surface-dark: rgba(30, 36, 52, 0.72);
+  --surface-border: rgba(41, 46, 73, 0.16);
+  --surface-subtle: rgba(255, 255, 255, 0.38);
+  --surface-muted: rgba(41, 46, 73, 0.06);
+
+  --text: #1f2433;
+  --text-muted: #5f6b73;
+  --text-soft: #7a858c;
+  --text-inverse: #f7fbff;
+
+  --color-primary: #6f8f95;
+  --color-primary-light: #85a4aa;
+  --primary-color: #6f8f95;
+  --primary-hover: #85a4aa;
+  --primary-active: #5b797e;
+  --accent-color: #7fd1b9;
+
+  --success: #4e9b6f;
+  --warning: #d79a55;
+  --danger: #c96b72;
+
+  --navigation-background: rgba(30, 36, 52, 0.72);
+  --hover-background: rgba(111, 143, 149, 0.16);
+  --overlay: rgba(18, 24, 37, 0.62);
+  --overlay-strong: rgba(18, 24, 37, 0.88);
+  --divider: rgba(31, 36, 51, 0.12);
+  --link-color: var(--primary-active);
+  --focus-ring: 0 0 0 2px rgba(111, 143, 149, 0.28);
+  --transition: all 300ms ease-in-out;
 }

 html {
@@ -18,11 +45,9 @@ body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
-  color: #333;
+  color: var(--text);

-  background-image: url("/assets/background.jpg");
-  background-size: cover;
-  background-position: center;
+  background: linear-gradient(39deg, var(--bg-deep), var(--bg-mid), var(--bg-soft));
  overflow: auto;
 }

@@ -44,7 +69,14 @@ a {
  width: 100%;
 }

+.mat-mdc-icon-button {
+  color: var(--primary-color) !important;
+  transition: var(--transition);

+  &:hover {
+    color: var(--primary-active) !important;
+  }
+}


 .content > *:not(router-outlet) {
@@ -60,7 +92,7 @@ a {

 .btn-icon {
  opacity: 0.2;
-  transition: all 300ms ease-in-out;
+  transition: var(--transition);

  &:hover {
    opacity: 1;
Author	SHA1	Message	Date
benjamin	36e1241539	optimize show filter	2026-03-09 18:29:56 +01:00
benjamin	194f9ac556	fix show filter	2026-03-09 17:51:35 +01:00
benjamin	ce9e5b5585	optimize firebase monitor reads	2026-03-09 17:48:59 +01:00
benjamin	3e10762eaf	optimize firebase remote reads	2026-03-09 17:44:45 +01:00
benjamin	d81fb3743b	optimize firebase reads	2026-03-09 17:41:24 +01:00
benjamin	4141824b00	optimize transpose service	2026-03-09 17:18:49 +01:00
benjamin	f7e11b792c	fix transpose warning	2026-03-09 17:04:00 +01:00
benjamin	a12e1ccb2f	fix material palette warning	2026-03-09 17:02:18 +01:00
benjamin	4e8a50374e	color palette rework #2	2026-03-09 16:53:55 +01:00
benjamin	0c2157bd0a	color palette rework	2026-03-09 16:47:08 +01:00
benjamin	0b831e45d5	replace less variables	2026-03-09 16:39:41 +01:00
benjamin	3fb2e8b341	optimize read calls	2026-03-09 16:32:13 +01:00
benjamin	ed69d9e972	optimize remote	2025-11-29 15:23:01 +01:00