vitest implementation

.eslintrc.json

@@ -10,8 +10,7 @@
       ],
       "parserOptions": {
         "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
+          "tsconfig.json"
         ],
         "createDefaultProgram": true
       },
@@ -24,6 +23,12 @@
         "plugin:prettier/recommended"
       ],
       "rules": {
+        "prettier/prettier": [
+          "error",
+          {
+            "endOfLine": "auto"
+          }
+        ],
         "@typescript-eslint/explicit-member-accessibility": "error",
         "@angular-eslint/component-selector": [
           "error",
@@ -53,7 +58,29 @@
       "extends": [
         "plugin:@angular-eslint/template/recommended"
       ],
-      "rules": {}
+      "rules": {
+        "prettier/prettier": [
+          "error",
+          {
+            "endOfLine": "auto"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.spec.ts"
+      ],
+      "rules": {
+        "@typescript-eslint/await-thenable": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-floating-promises": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/no-unsafe-return": "off"
+      }
     }
   ]
 }

.prettierrc

@@ -5,6 +5,7 @@
   "singleQuote": true,
   "quoteProps": "as-needed",
   "trailingComma": "es5",
+  "endOfLine": "auto",
   "bracketSpacing": false,
   "arrowParens": "avoid",
   "jsxBracketSameLine": false,

README.md

@@ -8,6 +8,14 @@ If `songUsage` needs to be rebuilt from all existing shows, log in with a user t
 await window.wgeneratorAdmin.rebuildSongUsage()
 ```
 
+If the `songIds` index on shows needs to be backfilled for tooltip usage in song details, run:
+
+```js
+await window.wgeneratorAdmin.rebuildShowSongIds()
+```
+
+The command logs progress in the browser console while it runs and prints the final summary when finished.
+
 The migration:
 
 - resets `songUsage` for all users
@@ -16,4 +24,11 @@ The migration:
 
 It returns a summary object with processed user, show and show-song counts.
 
+The show index migration:
+
+- scans all shows and all `shows/{id}/songs` entries
+- writes the distinct `songIds` array to each show document
+
+It returns a summary object with processed show and show-song counts.
+
 This is intended as a manual one-off migration and is read-heavy by design.

angular.json

@@ -15,8 +15,9 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
+            "browser": "src/main.ts",
             "outputPath": {
               "base": "dist/wgenerator"
             },
@@ -25,7 +26,7 @@
               "src/polyfills.ts"
             ],
             "tsConfig": "tsconfig.app.json",
-            "aot": false,
+            "inlineStyleLanguage": "less",
             "assets": [
               "src/browserconfig.xml",
               "src/android-chrome-192x192.png",
@@ -45,16 +46,11 @@
               "src/styles/shadow.less"
             ],
             "scripts": [],
-            "extractLicenses": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true,
             "allowedCommonJsDependencies": [
               "lodash",
               "docx",
               "qrcode"
-            ],
-            "browser": "src/main.ts"
+            ]
           },
           "configurations": {
             "production": {
@@ -64,121 +60,55 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "10MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
                 }
               ],
-              "serviceWorker": "ngsw-config.json"
-            }
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
             }
           },
+          "defaultConfiguration": "production"
+        },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "buildTarget": "wgenerator:build"
-          },
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "wgenerator:build:production"
-            }
+            },
+            "development": {
+              "buildTarget": "wgenerator:build:development"
             }
           },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "wgenerator:build"
-          }
+          "defaultConfiguration": "development"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "runner": "vitest",
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
+            "setupFiles": [
+              "src/test-vitest.ts"
             ],
-            "styles": [],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "wgenerator:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "wgenerator:serve:production"
-            }
+            "runnerConfig": true
           }
         }
       }
     }
   },
   "cli": {
-    "analytics": "4047dcd7-89f4-402f-958e-e365a5505c55",
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
-  },
-  "schematics": {
-    "@angular-eslint/schematics:application": {
-      "setParserOptionsProject": true
-    },
-    "@angular-eslint/schematics:library": {
-      "setParserOptionsProject": true
-    },
-    "@schematics/angular:component": {
-      "type": "component"
-    },
-    "@schematics/angular:directive": {
-      "type": "directive"
-    },
-    "@schematics/angular:service": {
-      "type": "service"
-    },
-    "@schematics/angular:guard": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:interceptor": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:module": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:pipe": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:resolver": {
-      "typeSeparator": "."
-    }
+    "analytics": false
   }
 }

e2e/protractor.conf.js

@@ -1,32 +0,0 @@
-// @ts-check
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-/**
- * @type { import("protractor").Config }
- */
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    browserName: 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};

e2e/src/app.e2e-spec.ts

@@ -1,25 +0,0 @@
-import {AppPage} from './app.po';
-import {browser, logging} from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    void page.navigateTo();
-    void expect(page.getTitleText()).toEqual('wgenerator app is running!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    void expect(logs).not.toContain(
-      jasmine.objectContaining({
-        level: logging.Level.SEVERE,
-      } as logging.Entry)
-    );
-  });
-});

e2e/src/app.po.ts

@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
-  }
-
-  getTitleText() {
-    return element(by.css('app-root .content span')).getText() as Promise<string>;
-  }
-}

e2e/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es2018",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}

karma.conf.js

@@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/wgenerator'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package.json

@@ -3,7 +3,8 @@
   "version": "1.6",
   "scripts": {
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --configuration production",
+    "build:dev": "ng build --configuration development",
     "deploy": "ng build --configuration production && firebase deploy",
     "test": "ng test",
     "lint": "ng lint --fix",
@@ -46,22 +47,15 @@
     "@angular/cli": "^21.2.1",
     "@angular/compiler-cli": "^21.2.2",
     "@angular/language-service": "^21.2.2",
-    "@types/jasmine": "~6.0.0",
-    "@types/jasminewd2": "~2.0.13",
     "@typescript-eslint/eslint-plugin": "^8.57.0",
     "@typescript-eslint/parser": "^8.57.0",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "firebase-tools": "^15.9.1",
-    "jasmine-core": "~6.1.0",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.2.0",
+    "jsdom": "^29.0.0",
     "prettier": "^3.8.1",
-    "typescript": "~5.9.3"
+    "typescript": "~5.9.3",
+    "vitest": "^4.1.0"
   }
 }

src/app/app.component.html

@@ -1,6 +1,5 @@
 <app-navigation></app-navigation>
 
-<div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
-  <router-outlet #o="outlet"></router-outlet>
+<div class="content">
+  <router-outlet></router-outlet>
 </div>
-

src/app/app.component.spec.ts

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

src/app/app.component.ts

@@ -1,6 +1,5 @@
-import {ChangeDetectionStrategy, Component, OnInit, inject} from '@angular/core';
+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';
@@ -14,8 +13,6 @@ import {NavigationComponent} from './widget-modules/components/application-frame
   imports: [RouterOutlet, NavigationComponent],
 })
 export class AppComponent implements OnInit {
-  private scrollService = inject(ScrollService);
-
   public constructor() {
     register();
   }
@@ -24,8 +21,4 @@ export class AppComponent implements OnInit {
     setTimeout(() => document.querySelector('#load-bg')?.classList.add('hidden'), 1000);
     setTimeout(() => document.querySelector('#load-bg')?.remove(), 5000);
   }
-
-  public onScoll($event: {srcElement: {scrollTop: number}}): void {
-    this.scrollService.saveScrollPosition($event.srcElement.scrollTop);
-  }
 }

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {BrandComponent} from './brand.component';
 
@@ -6,11 +6,11 @@ describe('BrandComponent', () => {
   let component: BrandComponent;
   let fixture: ComponentFixture<BrandComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [BrandComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BrandComponent);

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

@@ -4,10 +4,7 @@
   <div class="text">
     <div class="welcome">WILLKOMMEN</div>
     <div class="name">{{ user.name }}</div>
-      <div class="roles">
-        Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den
-        Administrator!
-      </div>
+    <div class="roles">Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator!</div>
   </div>
   }
 </div>

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {NewUserComponent} from './new-user.component';
 
@@ -6,11 +6,11 @@ describe('NewUserComponent', () => {
   let component: NewUserComponent;
   let fixture: ComponentFixture<NewUserComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [NewUserComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewUserComponent);

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

@@ -12,7 +12,7 @@ describe('GuestShowDataService', () => {
   let colSpy: jasmine.Spy;
   let dbServiceSpy: jasmine.SpyObj<DbService>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
     docDeleteSpy = jasmine.createSpy('delete').and.resolveTo();
     docSpy = jasmine.createSpy('doc').and.returnValue({
@@ -27,7 +27,7 @@ describe('GuestShowDataService', () => {
     dbServiceSpy.doc.and.callFake(docSpy);
     dbServiceSpy.col.and.callFake(colSpy);
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       providers: [{provide: DbService, useValue: dbServiceSpy}],
     });
 

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

@@ -2,20 +2,22 @@ import {TestBed} from '@angular/core/testing';
 import {GuestShowDataService} from './guest-show-data.service';
 import {GuestShowService} from './guest-show.service';
 import {ShowService} from '../shows/services/show.service';
+import {Show} from '../shows/services/show';
+import {Song} from '../songs/services/song';
 
 describe('GuestShowService', () => {
   let service: GuestShowService;
   let guestShowDataServiceSpy: jasmine.SpyObj<GuestShowDataService>;
   let showServiceSpy: jasmine.SpyObj<ShowService>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     guestShowDataServiceSpy = jasmine.createSpyObj<GuestShowDataService>('GuestShowDataService', ['add', 'update$']);
     showServiceSpy = jasmine.createSpyObj<ShowService>('ShowService', ['update$']);
     guestShowDataServiceSpy.add.and.resolveTo('share-1');
     guestShowDataServiceSpy.update$.and.resolveTo();
     showServiceSpy.update$.and.resolveTo();
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       providers: [
         {provide: GuestShowDataService, useValue: guestShowDataServiceSpy},
         {provide: ShowService, useValue: showServiceSpy},
@@ -30,8 +32,8 @@ describe('GuestShowService', () => {
   });
 
   it('should create a new guest share, persist the generated shareId on the show and return the share url', async () => {
-    const show = {id: 'show-1', showType: 'service-worship', date: new Date(), shareId: ''} as any;
-    const songs = [{id: 'song-1'}] as any;
+    const show = {id: 'show-1', showType: 'service-worship', date: new Date(), shareId: ''} as unknown as Show;
+    const songs = [{id: 'song-1'}] as unknown as Song[];
     const expectedUrl = window.location.protocol + '//' + window.location.host + '/guest/share-1';
 
     await expectAsync(service.share(show, songs)).toBeResolvedTo(expectedUrl);
@@ -45,8 +47,8 @@ describe('GuestShowService', () => {
   });
 
   it('should update an existing share and reuse its id in the returned url', async () => {
-    const show = {id: 'show-1', showType: 'service-worship', date: new Date(), shareId: 'share-9'} as any;
-    const songs = [{id: 'song-1'}] as any;
+    const show = {id: 'show-1', showType: 'service-worship', date: new Date(), shareId: 'share-9'} as unknown as Show;
+    const songs = [{id: 'song-1'}] as unknown as Song[];
     const expectedUrl = window.location.protocol + '//' + window.location.host + '/guest/share-9';
 
     await expectAsync(service.share(show, songs)).toBeResolvedTo(expectedUrl);

src/app/modules/guest/guest.component.html

@@ -1,5 +1,5 @@
 @if (show$|async; as show) {
-  <div class="page">
+<div class="page">
   <div class="title">
     <div class="left">{{ show.showType|showType }}</div>
     <div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
@@ -7,22 +7,17 @@
   <div class="view">
     <swiper-container scrollbar="true">
       @for (song of show.songs; track trackBy(i, song); let i = $index) {
-          <swiper-slide
-            class="song-swipe">
+      <swiper-slide class="song-swipe">
         <div class="song-title">{{ song.title }}</div>
         <div class="legal">
           @if (song.artist) {
           <p>{{ song.artist }}</p>
           }
         </div>
-            <app-song-text
-              [text]="song.text"
-            ></app-song-text>
+        <app-song-text [text]="song.text"></app-song-text>
       </swiper-slide>
       }
     </swiper-container>
   </div>
-  </div>
+</div>
 }
-
-

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {GuestComponent} from './guest.component';
 
@@ -6,11 +6,11 @@ describe('GuestComponent', () => {
   let component: GuestComponent;
   let fixture: ComponentFixture<GuestComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [GuestComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(GuestComponent);

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

@@ -1,27 +1,17 @@
-@if (song) {
-  @if (song.artist) {
-    <p>{{ song.artist }}</p>
-  }
-  @if (song.label) {
-    <p>{{ song.label }}</p>
-  }
-  @if (song.termsOfUse) {
-    <p class="terms-of-use">{{ song.termsOfUse }}</p>
-  }
-  @if (song.origin) {
-    <p>{{ song.origin }}</p>
-  }
-  @if (song.legalOwnerId) {
-    <div>
+@if (song) { @if (song.artist) {
+<p>{{ song.artist }}</p>
+} @if (song.label) {
+<p>{{ song.label }}</p>
+} @if (song.termsOfUse) {
+<p class="terms-of-use">{{ song.termsOfUse }}</p>
+} @if (song.origin) {
+<p>{{ song.origin }}</p>
+} @if (song.legalOwnerId) {
+<div>
   @if (song.legalOwner === 'CCLI' && config) {
-        <p>
-          CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
-          {{ config.ccliLicenseId }}
-        </p>
-      }
-      @if (song.legalOwner !== 'CCLI') {
+  <p>CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer {{ config.ccliLicenseId }}</p>
+  } @if (song.legalOwner !== 'CCLI') {
   <p>Liednummer {{ song.legalOwnerId }}</p>
   }
-    </div>
-  }
-}
+</div>
+} }

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {LegalComponent} from './legal.component';
 
@@ -6,11 +6,11 @@ describe('LegalComponent', () => {
   let component: LegalComponent;
   let fixture: ComponentFixture<LegalComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [LegalComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LegalComponent);

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {LogoComponent} from './logo.component';
 
@@ -6,11 +6,11 @@ describe('LogoComponent', () => {
   let component: LogoComponent;
   let fixture: ComponentFixture<LogoComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [LogoComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LogoComponent);

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

@@ -1,6 +1,6 @@
 <div class="fullscreen background"></div>
 @if (showType) {
-  <div [style.font-size.px]="zoom" class="fullscreen background">
+<div [style.font-size.px]="zoom" class="fullscreen background">
   <div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
   <div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
   <div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
@@ -20,14 +20,12 @@
     <div>{{ showType | showType }}</div>
     <div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
   </div>
-    }
-    @if (songId === 'dynamicText') {
+  } @if (songId === 'dynamicText') {
   <div @songSwitch class="start fullscreen dynamic-text">
     <div>{{ presentationDynamicCaption }}</div>
     <div class="date">{{ presentationDynamicText }}</div>
   </div>
-    }
-    @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
+  } @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
   <app-song-text
     [@songSwitch]="songId"
     [fullscreen]="true"
@@ -38,13 +36,8 @@
     [text]="song.text"
     chordMode="hide"
   ></app-song-text>
+  } @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
+  <app-legal [@songSwitch]="songId" [config]="config$ | async" [song]="song"></app-legal>
   }
-    @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
-      <app-legal
-        [@songSwitch]="songId"
-        [config]="config$ | async"
-        [song]="song"
-      ></app-legal>
-    }
-  </div>
+</div>
 }

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {MonitorComponent} from './monitor.component';
 
@@ -6,11 +6,11 @@ describe('MonitorComponent', () => {
   let component: MonitorComponent;
   let fixture: ComponentFixture<MonitorComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [MonitorComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MonitorComponent);

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

@@ -43,6 +43,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
   public config$: Observable<Config | null>;
   public presentationBackground: PresentationBackground = 'none';
   private destroy$ = new Subject<void>();
+  private songSwitchTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
   public constructor() {
     const configService = this.configService;
@@ -97,7 +98,10 @@ export class MonitorComponent implements OnInit, OnDestroy {
           if (this.songId !== presentationSongId) {
             this.songId = 'empty';
           }
-          setTimeout(() => {
+          if (this.songSwitchTimeoutId) {
+            clearTimeout(this.songSwitchTimeoutId);
+          }
+          this.songSwitchTimeoutId = setTimeout(() => {
             this.songId = presentationSongId;
             this.cRef.markForCheck();
           }, 600);
@@ -113,6 +117,9 @@ export class MonitorComponent implements OnInit, OnDestroy {
   }
 
   public ngOnDestroy(): void {
+    if (this.songSwitchTimeoutId) {
+      clearTimeout(this.songSwitchTimeoutId);
+    }
     this.destroy$.next();
     this.destroy$.complete();
   }

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

@@ -1,23 +1,13 @@
 @if (show) {
-  <div @fade>
-    <app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
-      [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
+<app-card [closeIcon]="faIcon" [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
   @if (!progress) {
   <div class="song">
     @if (show) {
     <div class="song-parts">
-              <div
-                (click)="onSectionClick('title', -1, show.id)"
-                [class.active]="show.presentationSongId === 'title'"
-                class="song-part"
-                >
+      <div (click)="onSectionClick('title', -1, show.id)" [class.active]="show.presentationSongId === 'title'" class="song-part">
         <div class="head">Veranstaltung</div>
       </div>
-              <div
-                (click)="onSectionClick('empty', -1, show.id)"
-                [class.active]="show.presentationSongId === 'empty'"
-                class="song-part"
-                >
+      <div (click)="onSectionClick('empty', -1, show.id)" [class.active]="show.presentationSongId === 'empty'" class="song-part">
         <div class="head">Leer</div>
       </div>
     </div>
@@ -26,18 +16,12 @@
   @for (song of presentationSongs; track trackBy($index, song)) {
   <div class="song">
     @if (show) {
-              <div
-                [class.active]="show.presentationSongId === song.id"
-                class="title song-part"
-                >
-                <div (click)="onSectionClick(song.id, -1, show.id)" class="head">
-                  {{ song.title }}
+    <div [class.active]="show.presentationSongId === song.id" class="title song-part">
+      <div (click)="onSectionClick(song.id, -1, show.id)" class="head">{{ song.title }}</div>
     </div>
-              </div>
-            }
-            @if (show) {
+    } @if (show) {
     <div class="song-parts">
-                @for (section of song.sections; track section; let i = $index) {
+      @for (section of song.sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
       <div
         (click)="onSectionClick(song.id, i, show.id)"
         [class.active]="
@@ -46,9 +30,7 @@
             "
         class="song-part"
       >
-                    <div class="head">
-                      {{ section.type | sectionType }} {{ section.number + 1 }}
-                    </div>
+        <div class="head">{{ section.type | sectionType }} {{ section.number + 1 }}</div>
         <div class="fragment">{{ getFirstLine(section) }}</div>
       </div>
       }
@@ -58,27 +40,17 @@
   }
   <div class="song">
     @if (show) {
-            <div
-              [class.active]="show.presentationSongId === 'dynamicText'"
-              class="title song-part"
-              >
-              <div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">
-                Freier Text
-              </div>
+    <div [class.active]="show.presentationSongId === 'dynamicText'" class="title song-part">
+      <div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">Freier Text</div>
     </div>
     }
     <mat-form-field appearance="outline">
       <mat-label>Überschrift</mat-label>
-            <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
-              autocomplete="off" id="dynamic-caption"
-              matInput
-              type="text">
+      <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption" autocomplete="off" id="dynamic-caption" matInput type="text" />
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-label>Text</mat-label>
-            <textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText"
-              autocomplete="off" id="dynamic-text"
-            matInput></textarea>
+      <textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText" autocomplete="off" id="dynamic-text" matInput></textarea>
     </mat-form-field>
   </div>
   @if (show) {
@@ -89,9 +61,7 @@
     </button>
     <mat-form-field appearance="outline">
       <mat-label>Hintergrund</mat-label>
-              <mat-select
-                (ngModelChange)="onBackground($event, show.id)"
-                [ngModel]="show.presentationBackground">
+      <mat-select (ngModelChange)="onBackground($event, show.id)" [ngModel]="show.presentationBackground">
         <mat-option value="none">kein Hintergrund</mat-option>
         <mat-option value="blue">Sternenhimmel</mat-option>
         <mat-option value="green">Blätter</mat-option>
@@ -100,29 +70,12 @@
         <mat-option value="bible">Bibel</mat-option>
       </mat-select>
     </mat-form-field>
-            <mat-slider
-              #slider
-              [max]="100"
-              [min]="10"
-              [step]="2"
-              class="zoom-slider"
-              color="primary"
-              ngDefaultControl
-              ><input (ngModelChange)="onZoom($event, show.id)"
-              [ngModel]="show.presentationZoom"
-              matSliderThumb>
+    <mat-slider #slider [max]="100" [min]="10" [step]="2" class="zoom-slider" color="primary" ngDefaultControl
+      ><input (ngModelChange)="onZoom($event, show.id)" [ngModel]="show.presentationZoom" matSliderThumb />
     </mat-slider>
   </div>
-        }
-        @if (show) {
-          <app-add-song
-            [addedLive]="true"
-            [showSongs]="showSongs"
-            [show]="show"
-            [songs]="songs$|async"
-          ></app-add-song>
-        }
-      }
-    </app-card>
-  </div>
+  } @if (show) {
+  <app-add-song [addedLive]="true" [showSongs]="showSongs" [show]="show" [songs]="songs$|async"></app-add-song>
+  } }
+</app-card>
 }

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {RemoteComponent} from './remote.component';
 
@@ -6,11 +6,11 @@ describe('RemoteComponent', () => {
   let component: RemoteComponent;
   let fixture: ComponentFixture<RemoteComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [RemoteComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RemoteComponent);

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

@@ -120,9 +120,11 @@ export class RemoteComponent implements OnDestroy {
       });
 
     this.presentationDynamicCaptionChanged$
-      .pipe(debounceTime(1000))
+      .pipe(debounceTime(1000), takeUntil(this.destroy$))
       .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
-    this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
+    this.presentationDynamicTextChanged$
+      .pipe(debounceTime(1000), takeUntil(this.destroy$))
+      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
   }
 
   public trackBy(index: number, item: PresentationSong): string {

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

@@ -1,25 +1,20 @@
 @if (shows$ | async; as shows) {
-  <div @fade>
+<div @fade>
   @if (visible) {
   <app-card heading="Bitte eine Veranstaltung auswählen">
     @if (!shows.length) {
-          <p>
-            Es ist derzeit keine Veranstaltung vorhanden
-          </p>
-        }
-        @if (shows.length>0) {
+    <p>Es ist derzeit keine Veranstaltung vorhanden</p>
+    } @if (shows.length>0) {
     <div class="list">
-            @for (show of shows; track show) {
+      @for (show of shows; track show.id) {
       <button (click)="selectShow(show)" mat-stroked-button>
         <app-user-name [userId]="show.owner"></app-user-name>
-                ,
-                {{ show.showType | showType }},
-                {{ show.date.toDate() | date: "dd.MM.yyyy" }}
+        , {{ show.showType | showType }}, {{ show.date.toDate() | date: "dd.MM.yyyy" }}
       </button>
       }
     </div>
     }
   </app-card>
   }
-  </div>
+</div>
 }

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

@@ -0,0 +1,73 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Router} from '@angular/router';
+import {firstValueFrom, of} from 'rxjs';
+import {GlobalSettingsService} from '../../../services/global-settings.service';
+import {ShowService} from '../../shows/services/show.service';
+import {SelectComponent} from './select.component';
+
+describe('SelectComponent', () => {
+  let component: SelectComponent;
+  let fixture: ComponentFixture<SelectComponent>;
+  let showServiceSpy: jasmine.SpyObj<ShowService>;
+  let globalSettingsServiceSpy: jasmine.SpyObj<GlobalSettingsService>;
+  let routerSpy: jasmine.SpyObj<Router>;
+  const createShow = (id: string, isoDate: string) => ({id, date: {toDate: () => new Date(isoDate)}});
+
+  beforeEach(async () => {
+    showServiceSpy = jasmine.createSpyObj<ShowService>('ShowService', ['list$', 'update$']);
+    globalSettingsServiceSpy = jasmine.createSpyObj<GlobalSettingsService>('GlobalSettingsService', ['set']);
+    routerSpy = jasmine.createSpyObj<Router>('Router', ['navigateByUrl']);
+
+    showServiceSpy.list$.and.returnValue(
+      of([
+        createShow('older', '2025-12-15T00:00:00Z'),
+        createShow('recent-a', '2026-03-01T00:00:00Z'),
+        createShow('recent-b', '2026-02-20T00:00:00Z'),
+      ]) as never
+    );
+    showServiceSpy.update$.and.resolveTo();
+    globalSettingsServiceSpy.set.and.resolveTo();
+    routerSpy.navigateByUrl.and.resolveTo(true);
+
+    await TestBed.configureTestingModule({
+      imports: [SelectComponent],
+      providers: [
+        {provide: ShowService, useValue: showServiceSpy},
+        {provide: GlobalSettingsService, useValue: globalSettingsServiceSpy},
+        {provide: Router, useValue: routerSpy},
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SelectComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should become visible on init', () => {
+    component.ngOnInit();
+
+    expect(component.visible).toBeTrue();
+  });
+
+  it('should expose recent shows sorted descending by date', async () => {
+    const shows = await firstValueFrom(component.shows$);
+
+    expect(showServiceSpy.list$).toHaveBeenCalledWith(true);
+    expect(shows.map(show => show.id)).toEqual(['recent-a', 'recent-b']);
+  });
+
+  it('should persist the selected show, trigger presentation reset and navigate', async () => {
+    const show = {id: 'show-1'} as never;
+    component.visible = true;
+
+    await component.selectShow(show);
+
+    expect(component.visible).toBeFalse();
+    expect(globalSettingsServiceSpy.set).toHaveBeenCalledWith({currentShow: 'show-1'});
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {presentationSongId: 'title'});
+    expect(routerSpy.navigateByUrl).toHaveBeenCalledWith('/presentation/remote');
+  });
+});

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

@@ -5,8 +5,8 @@ import {PresentationService} from './presentation.service';
 describe('PresentationService', () => {
   let service: PresentationService;
 
-  beforeEach(() => {
-    void TestBed.configureTestingModule({});
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({});
     service = TestBed.inject(PresentationService);
   });
 

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

@@ -3,7 +3,5 @@
 </div>
 <div mat-dialog-actions>
   <button [mat-dialog-close]="false" mat-button>Abbrechen</button>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>
-    Archivieren
-  </button>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Archivieren</button>
 </div>

src/app/modules/shows/dialog/report-dialog/report-dialog.component.html

@@ -0,0 +1,40 @@
+<div mat-dialog-content>
+  <p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
+  <p>
+    Die Meldung erfolgt über
+    <a [href]="reportingUrl" rel="noreferrer" target="_blank">{{ reportingUrl }}</a>.
+  </p>
+
+  <div class="song-list">
+    <div class="list-head">
+      <div>Titel</div>
+      <div>CCLI-Nummer</div>
+    </div>
+
+    @for (song of data.songs; track song.title + song.ccliNumber) {
+    <div class="list-item">
+      <div>{{ song.title }}</div>
+      <div class="number-cell">
+        <span>{{ song.ccliNumber }}</span>
+        <a
+          (click)="markOpened(song.ccliNumber)"
+          [attr.aria-label]="'CCLI-Titel melden: ' + song.title"
+          [href]="getSongReportingUrl(song.ccliNumber)"
+          rel="noreferrer"
+          target="_blank"
+          class="btn-icon report-link"
+        >
+          <fa-icon [icon]="faOpen"></fa-icon>
+        </a>
+        @if (wasOpened(song.ccliNumber)) {
+        <fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
+        }
+      </div>
+    </div>
+    }
+  </div>
+</div>
+<div mat-dialog-actions>
+  <button [mat-dialog-close]="false" mat-button>Abbrechen</button>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Alle CCLI-Titel wurden gemeldet</button>
+</div>

src/app/modules/shows/dialog/report-dialog/report-dialog.component.less

@@ -0,0 +1,74 @@
+.song-list {
+  width: 100%;
+}
+
+.list-head,
+.list-item {
+  display: grid;
+  grid-template-columns: auto 180px;
+  gap: 0;
+  align-items: center;
+
+  border-bottom: 1px solid var(--overlay)
+}
+
+.list-head {
+  padding: 3px 10px;
+  color: var(--text-soft);
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.list-item {
+  padding: 3px 10px;
+  transition: var(--transition);
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--divider)
+  }
+}
+
+.list-head > div,
+.list-item > div {
+  display: flex;
+  align-items: center;
+}
+
+.number-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.report-link {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+.opened-check {
+  color: var(--success);
+  font-size: 0.85rem;
+}
+
+@media screen and (max-width: 640px) {
+  .list-head,
+  .list-item {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .list-head {
+    display: none;
+  }
+
+  .list-item {
+    padding: 10px 16px;
+  }
+
+  .number-cell {
+    justify-content: flex-start;
+  }
+}

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

@@ -0,0 +1,40 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {ReportDialogComponent} from './report-dialog.component';
+
+describe('ReportDialogComponent', () => {
+  let component: ReportDialogComponent;
+  let fixture: ComponentFixture<ReportDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReportDialogComponent],
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {songs: [{title: 'Amazing Grace', ccliNumber: '12345'}]},
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ReportDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('create an instance', () => {
+    void expect(component).toBeTruthy();
+  });
+
+  it('should build direct reporting urls', () => {
+    expect(component.getSongReportingUrl('5770492')).toBe('https://reporting.ccli.com/search?s=5770492');
+  });
+
+  it('should mark numbers as opened locally', () => {
+    expect(component.wasOpened('12345')).toBeFalse();
+
+    component.markOpened('12345');
+
+    expect(component.wasOpened('12345')).toBeTrue();
+  });
+});

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

@@ -0,0 +1,41 @@
+import {Component, inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
+import {MatButton} from '@angular/material/button';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {faArrowUpRightFromSquare, faCheck} from '@fortawesome/free-solid-svg-icons';
+
+export interface ReportDialogSong {
+  title: string;
+  ccliNumber: string;
+}
+
+export interface ReportDialogData {
+  songs: ReportDialogSong[];
+}
+
+@Component({
+  selector: 'app-report-dialog',
+  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose, FaIconComponent],
+  templateUrl: './report-dialog.component.html',
+  styleUrl: './report-dialog.component.less',
+  standalone: true,
+})
+export class ReportDialogComponent {
+  public readonly reportingUrl = 'https://reporting.ccli.com/search';
+  public readonly faOpen = faArrowUpRightFromSquare;
+  public readonly faCheck = faCheck;
+  public data = inject<ReportDialogData>(MAT_DIALOG_DATA);
+  private readonly openedNumbers = new Set<string>();
+
+  public getSongReportingUrl(ccliNumber: string): string {
+    return `${this.reportingUrl}?s=${encodeURIComponent(ccliNumber)}`;
+  }
+
+  public markOpened(ccliNumber: string): void {
+    this.openedNumbers.add(ccliNumber);
+  }
+
+  public wasOpened(ccliNumber: string): boolean {
+    return this.openedNumbers.has(ccliNumber);
+  }
+}

src/app/modules/shows/dialog/share-dialog/share-dialog.component.html

@@ -1,13 +1,8 @@
 <div mat-dialog-content>
   <a [href]="data.url">{{ data.url }}</a>
-  <div [style.background-image]="'url('+qrCode+')'" alt="qrcode" class="qrcode">
-  </div>
+  <div [style.background-image]="'url('+qrCode+')'" alt="qrcode" class="qrcode"></div>
 </div>
 <div mat-dialog-actions>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>
-    Schließen
-  </button>
-  <button (click)="share()" mat-button>
-    Teilen
-  </button>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Schließen</button>
+  <button (click)="share()" mat-button>Teilen</button>
 </div>

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

@@ -19,13 +19,13 @@ export interface ShareDialogData {
 export class ShareDialogComponent {
   public data = inject<ShareDialogData>(MAT_DIALOG_DATA);
 
-  public qrCode: string;
+  public qrCode = '';
 
   public constructor() {
     const data = this.data;
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
-    QRCode.toDataURL(data.url, {
+    void QRCode.toDataURL(data.url, {
       type: 'image/jpeg',
       quality: 0.92,
       width: 1280,
@@ -35,10 +35,10 @@ export class ShareDialogComponent {
         light: '#ffffff',
       },
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return
-    }).then(_ => (this.qrCode = _));
+    }).then((qrCode: string) => (this.qrCode = qrCode));
   }
 
-  public async share() {
+  public async share(): Promise<void> {
     if (navigator.clipboard) await navigator.clipboard.writeText(this.data.url);
 
     if (navigator.share)

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

@@ -6,18 +6,12 @@
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
             @for (key of showTypePublic; track key) {
-              <mat-option [value]="key">{{
-                key | showType
-                }}
-              </mat-option>
+            <mat-option [value]="key">{{ key | showType }} </mat-option>
             }
           </mat-optgroup>
           <mat-optgroup label="privat">
             @for (key of showTypePrivate; track key) {
-              <mat-option [value]="key">{{
-                key | showType
-                }}
-              </mat-option>
+            <mat-option [value]="key">{{ key | showType }} </mat-option>
             }
           </mat-optgroup>
         </mat-select>

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

@@ -0,0 +1,83 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Timestamp} from '@angular/fire/firestore';
+import {of} from 'rxjs';
+import {ShowDataService} from '../services/show-data.service';
+import {ShowService} from '../services/show.service';
+import {EditComponent} from './edit.component';
+
+describe('EditComponent', () => {
+  let component: EditComponent;
+  let fixture: ComponentFixture<EditComponent>;
+  let showServiceSpy: jasmine.SpyObj<ShowService>;
+  let showDataServiceStub: Pick<ShowDataService, 'list$'>;
+  let routerSpy: jasmine.SpyObj<Router>;
+  const createDate = (isoDate: string) => ({toDate: () => new Date(isoDate)});
+
+  beforeEach(async () => {
+    showServiceSpy = jasmine.createSpyObj<ShowService>('ShowService', ['read$', 'update$']);
+    showDataServiceStub = {list$: of([]) as ShowDataService['list$']};
+    routerSpy = jasmine.createSpyObj<Router>('Router', ['navigateByUrl']);
+
+    showServiceSpy.read$.and.returnValue(
+      of({
+        id: 'show-1',
+        showType: 'service-worship',
+        date: createDate('2026-03-10T00:00:00Z'),
+      } as never)
+    );
+    showServiceSpy.update$.and.resolveTo();
+    routerSpy.navigateByUrl.and.resolveTo(true);
+
+    await TestBed.configureTestingModule({
+      imports: [EditComponent],
+      providers: [
+        {provide: ShowService, useValue: showServiceSpy},
+        {provide: ShowDataService, useValue: showDataServiceStub},
+        {provide: Router, useValue: routerSpy},
+        {provide: ActivatedRoute, useValue: {params: of({showId: 'show-1'})}},
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should load the current show into the form on init', () => {
+    component.ngOnInit();
+
+    expect(showServiceSpy.read$).toHaveBeenCalledWith('show-1');
+    expect(component.form.value.id).toBe('show-1');
+    expect(component.form.value.showType).toBe('service-worship');
+    expect(component.form.value.date).toEqual(new Date('2026-03-10T00:00:00Z'));
+  });
+
+  it('should not save when the form is invalid', async () => {
+    component.form.setValue({id: null, date: null, showType: null});
+
+    await component.onSave();
+
+    expect(showServiceSpy.update$).not.toHaveBeenCalled();
+    expect(routerSpy.navigateByUrl).not.toHaveBeenCalled();
+  });
+
+  it('should update the show and navigate back to the detail page', async () => {
+    const date = new Date('2026-03-11T00:00:00Z');
+    const firestoreTimestamp = {seconds: 1} as never;
+    spyOn(Timestamp, 'fromDate').and.returnValue(firestoreTimestamp);
+    component.form.setValue({id: 'show-1', date, showType: 'home-group'});
+
+    await component.onSave();
+
+    expect(Timestamp.fromDate).toHaveBeenCalledWith(date);
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {
+      date: firestoreTimestamp,
+      showType: 'home-group',
+    } as never);
+    expect(routerSpy.navigateByUrl).toHaveBeenCalledWith('/shows/show-1');
+  });
+});

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

@@ -7,7 +7,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
-import {Timestamp} from '@angular/fire/firestore';
+import {Timestamp} from 'firebase/firestore';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
 import {MatSelect} from '@angular/material/select';
@@ -87,10 +87,15 @@ export class EditComponent implements OnInit {
       return;
     }
 
-    await this.showService.update$(this.form.value.id, {
-      date: Timestamp.fromDate(this.form.value.date),
-      showType: this.form.value.showType,
+    const {id, date, showType} = this.form.getRawValue();
+    if (!id || !date || !showType) {
+      return;
+    }
+
+    await this.showService.update$(id, {
+      date: Timestamp.fromDate(date),
+      showType,
     } as Partial<Show>);
-    await this.router.navigateByUrl(`/shows/${this.form.value.id ?? ''}`);
+    await this.router.navigateByUrl(`/shows/${id}`);
   }
 }

src/app/modules/shows/list/filter/filter-values.ts

@@ -2,4 +2,5 @@ export interface FilterValues {
   time: number;
   owner: string;
   showType: string;
+  archived: boolean;
 }

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

@@ -1,14 +1,10 @@
 <div [formGroup]="filterFormGroup">
-
   <div class="third">
     <mat-form-field appearance="outline">
       <mat-label>Zeitraum</mat-label>
       <mat-select formControlName="time">
         @for (time of times; track time) {
-          <mat-option [value]="time.key">{{
-            time.value
-            }}
-          </mat-option>
+        <mat-option [value]="time.key">{{ time.value }}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -16,12 +12,9 @@
     <mat-form-field appearance="outline">
       <mat-label>Ersteller</mat-label>
       <mat-select formControlName="owner">
-        <mat-option [value]="null">Alle</mat-option>
+        <mat-option value="">Alle</mat-option>
         @for (owner of owners; track owner) {
-          <mat-option [value]="owner.key">{{
-            owner.value
-            }}
-          </mat-option>
+        <mat-option [value]="owner.key">{{ owner.value }}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -29,27 +22,21 @@
     <mat-form-field appearance="outline">
       <mat-label>Art der Veranstaltung</mat-label>
       <mat-select formControlName="showType">
-        <mat-option [value]="null">Alle</mat-option>
+        <mat-option value="">Alle</mat-option>
         <mat-optgroup label="öffentlich">
           @for (key of showTypePublic; track key) {
-            <mat-option [value]="key">{{
-              key | showType
-              }}
-            </mat-option>
+          <mat-option [value]="key">{{ key | showType }}</mat-option>
           }
         </mat-optgroup>
         <mat-optgroup label="privat">
           @for (key of showTypePrivate; track key) {
-            <mat-option [value]="key">{{
-              key | showType
-              }}
-            </mat-option>
+          <mat-option [value]="key">{{ key | showType }}</mat-option>
           }
         </mat-optgroup>
       </mat-select>
     </mat-form-field>
-
+    <mat-checkbox formControlName="archived">Archiviert</mat-checkbox>
   </div>
 
-  <i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>
+  <!--  <i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>-->
 </div>

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

@@ -1,5 +1,14 @@
-.third {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  column-gap: 20px;
+.third,
+div[formGroup] {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.third {
+  gap: 0;
+}
+
+:host ::ng-deep .mat-mdc-form-field {
+  width: 100%;
 }

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

@@ -1,7 +1,7 @@
-import {Component, Input, inject} from '@angular/core';
+import {Component, DestroyRef, inject, Input} from '@angular/core';
 import {KeyValue} from '@angular/common';
-import {ActivatedRoute, Router} from '@angular/router';
-import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {FilterValues} from './filter-values';
 import {Show} from '../../services/show';
 import {ShowService} from '../../services/show.service';
@@ -9,60 +9,71 @@ import {distinctUntilChanged, map, switchMap} from 'rxjs/operators';
 import {combineLatest, Observable, of} from 'rxjs';
 import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
 import {UserService} from '../../../../services/user/user.service';
+import {FilterStoreService} from '../../../../services/filter-store.service';
 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';
+import {MatCheckbox} from '@angular/material/checkbox';
 
 @Component({
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
-  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, ShowTypePipe],
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, ShowTypePipe, MatCheckbox],
 })
 export class FilterComponent {
-  private router = inject(Router);
-  private showService = inject(ShowService);
-  private userService = inject(UserService);
-
-  @Input() public route = '/shows/';
   @Input() public shows: Show[] = [];
-
   public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
   public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
-
-  public filterFormGroup: UntypedFormGroup;
+  public filterFormGroup: FormGroup<{
+    time: FormControl<number>;
+    owner: FormControl<string | null>;
+    showType: FormControl<string | null>;
+    archived: FormControl<boolean>;
+  }>;
   public times: KeyValue<number, string>[] = [
     {key: 1, value: 'letzter Monat'},
     {key: 3, value: 'letztes Quartal'},
     {key: 12, value: 'letztes Jahr'},
     {key: 99999, value: 'alle'},
   ];
-
   public owners: {key: string; value: string}[] = [];
+  private showService = inject(ShowService);
+  private userService = inject(UserService);
+  private filterStore = inject(FilterStoreService);
+  private destroyRef = inject(DestroyRef);
 
   public constructor() {
-    const activatedRoute = inject(ActivatedRoute);
-    const fb = inject(UntypedFormBuilder);
+    const fb = inject(FormBuilder);
 
     this.filterFormGroup = fb.group({
-      time: 1,
-      owner: null,
-      showType: null,
+      time: fb.nonNullable.control(1),
+      owner: fb.control<string | null>(null),
+      showType: fb.control<string | null>(null),
+      archived: fb.nonNullable.control(false),
     });
 
-    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.filterStore.showFilter$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(filterValues => {
+      this.filterFormGroup.patchValue(
+        {
+          time: filterValues.time,
+          owner: filterValues.owner || null,
+          showType: filterValues.showType || null,
+          archived: !!filterValues.archived,
+        },
+        {emitEvent: false}
+      );
     });
 
-    this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number));
-    this.filterFormGroup.controls.owner.valueChanges.subscribe(_ => void this.filerValueChanged('owner', _ as string));
-    this.filterFormGroup.controls.showType.valueChanges.subscribe(_ => void this.filerValueChanged('showType', _ as string));
+    this.filterFormGroup.controls.time.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('time', value));
+    this.filterFormGroup.controls.owner.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('owner', value ?? ''));
+    this.filterFormGroup.controls.showType.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('showType', value ?? ''));
+    this.filterFormGroup.controls.archived.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('archived', value));
 
-    this.owners$().subscribe(owners => (this.owners = owners));
+    this.owners$()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(owners => (this.owners = owners));
   }
 
   public owners$ = (): Observable<{key: string; value: string}[]> => {
@@ -83,26 +94,20 @@ export class FilterComponent {
             this.userService.getUserbyId$(ownerId).pipe(
               map(user => ({
                 key: ownerId,
-                value: user?.name,
+                value: user?.name ?? ownerId,
               }))
             )
           )
         );
       }),
-      map(owners => {
-        return owners.sort(dynamicSort('value'));
-      }),
+      map(owners => owners.sort(dynamicSort<{key: string; value: string}>('value'))),
       distinctUntilChanged((left, right) => this.sameOwners(left, right)),
-      map(_ => _ as {key: string; value: string}[])
+      map(owners => owners 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 || null},
-      queryParamsHandling: 'merge',
-    });
-    await this.router.navigateByUrl(route);
+  private filterValueChanged<T>(key: keyof FilterValues, value: T): void {
+    this.filterStore.updateShowFilter({[key]: value} as Partial<FilterValues>);
   }
 
   private sameOwners(left: {key: string; value: string}[], right: {key: string; value: string}[]): boolean {

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

@@ -1,9 +1,14 @@
 @if (show) {
-  <div class="list-item">
+<div class="list-item">
   <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
   <div>
     <app-user-name [userId]="show.owner"></app-user-name>
   </div>
   <div>{{ show.showType | showType }}</div>
+  <div>
+    @if (showStatusBadge) {
+    <app-badge [type]="showStatusBadgeType">{{ showStatusBadge }}</app-badge>
+    }
   </div>
+</div>
 }

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

@@ -1,7 +1,7 @@
 .list-item {
   padding: 5px 20px;
   display: grid;
-  grid-template-columns: 100px 150px auto;
+  grid-template-columns: 100px 150px auto 160px;
   min-height: 21px;
 
   & > div {

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

@@ -1,24 +1,45 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
-
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BehaviorSubject, of} from 'rxjs';
 import {ListItemComponent} from './list-item.component';
+import {UserService} from '../../../../services/user/user.service';
 
 describe('ListItemComponent', () => {
   let component: ListItemComponent;
   let fixture: ComponentFixture<ListItemComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [ListItemComponent],
+      providers: [
+        {
+          provide: UserService,
+          useValue: {
+            user$: new BehaviorSubject<unknown>({id: 'user-1'}).asObservable(),
+            userId$: new BehaviorSubject<string | null>('user-1').asObservable(),
+            loggedIn$: () => of(true),
+            getUserbyId$: () => of({name: 'Benjamin'}),
+          },
+        },
+      ],
     }).compileComponents();
-  }));
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(ListItemComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     void expect(component).toBeTruthy();
   });
+
+  it('should render a status badge when provided', () => {
+    component.show = {date: {toDate: () => new Date('2026-03-15')} as never, owner: 'user-1', showType: 'misc-private'} as never;
+    component.showStatusBadge = 'nicht gemeldet';
+    component.showStatusBadgeType = 'error';
+
+    fixture.detectChanges();
+
+    const badge = fixture.nativeElement.querySelector('app-badge .badge');
+    expect(badge?.textContent?.trim()).toBe('nicht gemeldet');
+    expect(badge?.className).toContain('error');
+  });
 });

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

@@ -3,13 +3,16 @@ import {Show} from '../../services/show';
 import {DatePipe} 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';
+import {BadgeComponent, BadgeType} from '../../../../widget-modules/components/badge/badge.component';
 
 @Component({
   selector: 'app-list-item',
   templateUrl: './list-item.component.html',
   styleUrls: ['./list-item.component.less'],
-  imports: [UserNameComponent, DatePipe, ShowTypePipe],
+  imports: [UserNameComponent, DatePipe, ShowTypePipe, BadgeComponent],
 })
 export class ListItemComponent {
   @Input() public show: Show | null = null;
+  @Input() public showStatusBadge: string | null = null;
+  @Input() public showStatusBadgeType: BadgeType = 'none';
 }

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

@@ -1,42 +1,42 @@
+@if (showSidebar$ | async) {
+<app-sidebar>
+  <div class="sidebar-content" sidebar>
+    <app-filter [shows]="(publicShows$ | async) ?? []"></app-filter>
+  </div>
+  <div content>
+    @if (privateShows$ | async; as privateShows) {
+    <app-card [padding]="false" heading="Meine Veranstaltungen">
+      @for (show of privateShows; track trackBy($index, show)) {
+      <app-list-item
+        [routerLink]="show.id"
+        [showStatusBadgeType]="show.archived ? 'warn' : show.published ? 'error' : 'none'"
+        [showStatusBadge]="show.archived ? 'archiviert' : show.published ? 'nicht gemeldet' : 'unveröffentlicht'"
+        [show]="show"
+      ></app-list-item>
+      }
+      <div *appRole="['leader']" class="list-action">
+        <app-button [fullWidth]="true" [icon]="faNewShow" routerLink="new">Neue Veranstaltung anlegen </app-button>
+      </div>
+    </app-card>
+    }
+
+    @if (publicShows$ | async; as shows) { @if (shows.length > 0) {
+    <app-card [padding]="false" heading="Veröffentlichte Veranstaltungen">
+      @for (show of shows; track trackBy($index, show)) {
+      <app-list-item [routerLink]="show.id" [show]="show"></app-list-item>
+      }
+    </app-card>
+    } }
+  </div>
+</app-sidebar>
+} @else {
 <div>
-  <!--  <app-list-header *appRole="['leader']"></app-list-header>-->
-  <app-list-header *appRole="['leader']">
-    @if (shows$ | async; as shows) {
-      <app-filter [shows]="publicShows$ | async"></app-filter>
-    }
-  </app-list-header>
-
-  <ng-container *appRole="['leader']">
-    @if (privateShows$ | async; as shows) {
-      @if (shows.length > 0) {
-        <app-card
-          [padding]="false"
-          heading="Meine Veranstaltungen"
-          >
-          @for (show of shows | sortBy: 'desc':'date'; track show) {
-            <app-list-item
-              [routerLink]="show.id"
-              [show]="show"
-            ></app-list-item>
+  @if (publicShows$ | async; as shows) { @if (shows.length > 0) {
+  <app-card [padding]="false" heading="Veröffentlichte Veranstaltungen">
+    @for (show of shows; track trackBy($index, show)) {
+    <app-list-item [routerLink]="show.id" [show]="show"></app-list-item>
     }
   </app-card>
-      }
-    }
-  </ng-container>
-
-  @if (publicShows$ | async; as shows) {
-    @if (shows.length > 0) {
-      <app-card
-        [padding]="false"
-        heading="Veröffentlichte Veranstaltungen"
-        >
-        @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
-          <app-list-item
-            [routerLink]="show.id"
-            [show]="show"
-          ></app-list-item>
-        }
-      </app-card>
-    }
-  }
+  } }
 </div>
+}

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

@@ -0,0 +1,3 @@
+.sidebar-content {
+  padding: 20px;
+}

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

@@ -1,24 +1,106 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
-
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BehaviorSubject, firstValueFrom, of} from 'rxjs';
+import {skip, take} from 'rxjs/operators';
 import {ListComponent} from './list.component';
+import {ShowService} from '../services/show.service';
+import {UserService} from '../../../services/user/user.service';
+import {FilterStoreService} from '../../../services/filter-store.service';
 
 describe('ListComponent', () => {
   let component: ListComponent;
   let fixture: ComponentFixture<ListComponent>;
+  let shows$: BehaviorSubject<unknown[]>;
+  let user$: BehaviorSubject<unknown>;
+  const createShow = (overrides: Record<string, unknown>) => ({
+    archived: false,
+    date: {toDate: () => new Date('2026-03-01')},
+    ...overrides,
+  });
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    shows$ = new BehaviorSubject<unknown[]>([]);
+    user$ = new BehaviorSubject<unknown>({id: 'user-1'});
+
+    await TestBed.configureTestingModule({
       imports: [ListComponent],
+      providers: [
+        {
+          provide: ShowService,
+          useValue: {
+            list$: () => shows$.asObservable(),
+            listPublicSince$: () => of([]),
+          },
+        },
+        {
+          provide: UserService,
+          useValue: {
+            user$: user$.asObservable(),
+            loggedIn$: () => of(true),
+            getUserbyId$: () => of({name: 'Benjamin'}),
+          },
+        },
+        FilterStoreService,
+      ],
     }).compileComponents();
-  }));
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(ListComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     void expect(component).toBeTruthy();
   });
+
+  it('should list own drafts and pending published shows in my shows', async () => {
+    shows$.next([
+      createShow({id: 'draft-own', owner: 'user-1', published: false, reportedType: null}),
+      createShow({id: 'pending-own', owner: 'user-1', published: true, reportedType: 'pending', date: {toDate: () => new Date('2026-03-02')}}),
+      createShow({id: 'reported-own', owner: 'user-1', published: true, reportedType: 'reported', date: {toDate: () => new Date('2026-03-03')}}),
+      createShow({id: 'draft-other', owner: 'user-2', published: false, reportedType: null, date: {toDate: () => new Date('2026-03-04')}}),
+    ] as never);
+
+    const shows = await firstValueFrom(component.privateShows$);
+    expect(shows.map(show => show.id)).toEqual(['pending-own', 'draft-own']);
+  });
+
+  it('should ignore show filters for my shows', async () => {
+    const filterStore = TestBed.inject(FilterStoreService);
+    filterStore.updateShowFilter({time: 0, showType: 'service-worship'});
+    shows$.next([
+      createShow({id: 'older-draft', owner: 'user-1', published: false, reportedType: null, showType: 'misc-private', date: {toDate: () => new Date('2025-01-01')}}),
+      createShow({id: 'pending-own', owner: 'user-1', published: true, reportedType: 'pending', showType: 'home-group', date: {toDate: () => new Date('2026-03-05')}}),
+    ] as never);
+
+    const shows = await firstValueFrom(component.privateShows$);
+    expect(shows.map(show => show.id)).toEqual(['pending-own', 'older-draft']);
+  });
+
+  it('should hide archived own shows until archived filter is enabled', async () => {
+    const filterStore = TestBed.inject(FilterStoreService);
+    shows$.next([
+      createShow({id: 'draft-own', owner: 'user-1', published: false, reportedType: null, date: {toDate: () => new Date('2026-03-02')}}),
+      createShow({id: 'archived-own', owner: 'user-1', published: true, archived: true, reportedType: 'reported', date: {toDate: () => new Date('2026-03-03')}}),
+    ] as never);
+
+    const initialShows = await firstValueFrom(component.privateShows$.pipe(take(1)));
+    expect(initialShows.map(show => show.id)).toEqual(['draft-own']);
+
+    const updatedShowsPromise = firstValueFrom(component.privateShows$.pipe(skip(1), take(1)));
+    filterStore.updateShowFilter({archived: true});
+    const updatedShows = await updatedShowsPromise;
+    expect(updatedShows.map(show => show.id)).toEqual(['archived-own', 'draft-own']);
+  });
+
+  it('should sort public shows by date descending', async () => {
+    const filterStore = TestBed.inject(FilterStoreService);
+    filterStore.updateShowFilter({time: 99999});
+    shows$.next([
+      createShow({id: 'old-public', owner: 'user-2', published: true, archived: false, date: {toDate: () => new Date('2026-01-01')}}),
+      createShow({id: 'new-public', owner: 'user-3', published: true, archived: false, date: {toDate: () => new Date('2026-03-10')}}),
+      createShow({id: 'mid-public', owner: 'user-4', published: true, archived: false, date: {toDate: () => new Date('2026-02-05')}}),
+    ] as never);
+
+    const shows = await firstValueFrom(component.publicShows$.pipe(take(1)));
+    expect(shows.map(show => show.id)).toEqual(['new-public', 'mid-public', 'old-public']);
+  });
 });

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

@@ -4,65 +4,89 @@ import {Show} from '../services/show';
 import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
 import {FilterValues} from './filter/filter-values';
-import {ActivatedRoute, RouterLink} from '@angular/router';
+import {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 {FilterStoreService} from '../../../services/filter-store.service';
 import {AsyncPipe} 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';
+import {UserService} from '../../../services/user/user.service';
+import {SidebarComponent} from '../../../widget-modules/components/sidebar/sidebar.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {faPlus} from '@fortawesome/free-solid-svg-icons';
+import {RoleDirective} from '../../../services/user/role.directive';
 
 @Component({
   selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.less'],
   animations: [fade],
-  imports: [RoleDirective, ListHeaderComponent, FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, SortByPipe],
+  imports: [FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, SidebarComponent, ButtonComponent, RoleDirective],
 })
 export class ListComponent {
+  public faNewShow = faPlus;
   private showService = inject(ShowService);
-  private activatedRoute = inject(ActivatedRoute);
+  private filterStore = inject(FilterStoreService);
+  private userService = inject(UserService);
 
-  public lastMonths$ = this.activatedRoute.queryParams.pipe(
-    map(params => {
-      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 filter$ = this.filterStore.showFilter$;
+  public lastMonths$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.time || 1));
+  public owner$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.owner));
+  public showType$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.showType));
+  public archived$ = this.filter$.pipe(map((filterValues: FilterValues) => !!filterValues.archived));
   public shows$ = this.showService.list$();
-  public privateShows$ = this.showService.list$().pipe(map(show => show.filter(_ => !_.published)));
+  public ownShows$ = this.showService.list$(false, true);
+  public privateShows$ = combineLatest([this.ownShows$, this.userService.user$, this.archived$]).pipe(
+    map(([shows, user, showArchived]) =>
+      shows.filter(show => {
+        if (show.owner !== user?.id) {
+          return false;
+        }
+
+        if (show.archived) {
+          return showArchived;
+        }
+
+        return !show.published || show.reportedType === 'pending';
+      })
+    ),
+    map(shows => this.sortShowsByDateDesc(shows))
+  );
   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);
+      return shows.filter(show => show.published && !show.archived).filter(show => this.matchesTimeFilter(show, lastMonths));
     })
   );
   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);
+      return this.sortShowsByDateDesc(shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType));
     })
   );
+  public showSidebar$ = this.userService.user$.pipe(map(user => this.hasSidebarAccess(user?.role)));
 
   public trackBy = (index: number, show: unknown) => (show as Show).id;
+
+  private matchesTimeFilter(show: Show, lastMonths: number): boolean {
+    const startDate = new Date();
+    startDate.setHours(0, 0, 0, 0);
+    startDate.setDate(startDate.getDate() - lastMonths * 30);
+    return show.date.toDate() >= startDate;
+  }
+
+  private sortShowsByDateDesc(shows: Show[]): Show[] {
+    return [...shows].sort((left, right) => right.date.toDate().getTime() - left.date.toDate().getTime());
+  }
+
+  private hasSidebarAccess(role: string | null | undefined): boolean {
+    if (!role) {
+      return false;
+    }
+
+    const roles = role.split(';').map(item => item.trim());
+    return roles.includes('admin') || roles.includes('leader');
+  }
 }

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

@@ -6,18 +6,12 @@
         <mat-select formControlName="showType">
           <mat-optgroup label="öffentlich">
             @for (key of showTypePublic; track key) {
-              <mat-option [value]="key">{{
-                key | showType
-                }}
-              </mat-option>
+            <mat-option [value]="key">{{ key | showType }} </mat-option>
             }
           </mat-optgroup>
           <mat-optgroup label="privat">
             @for (key of showTypePrivate; track key) {
-              <mat-option [value]="key">{{
-                key | showType
-                }}
-              </mat-option>
+            <mat-option [value]="key">{{ key | showType }} </mat-option>
             }
           </mat-optgroup>
         </mat-select>

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {NewComponent} from './new.component';
 
@@ -6,11 +6,11 @@ describe('NewComponent', () => {
   let component: NewComponent;
   let fixture: ComponentFixture<NewComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [NewComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewComponent);

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

@@ -3,7 +3,7 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, 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';
@@ -46,9 +46,9 @@ export class NewComponent implements OnInit {
   public shows$: Observable<Show[]>;
   public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
   public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
-  public form: UntypedFormGroup = new UntypedFormGroup({
-    date: new UntypedFormControl(null, Validators.required),
-    showType: new UntypedFormControl(null, Validators.required),
+  public form = new FormGroup({
+    date: new FormControl<Date | null>(null, Validators.required),
+    showType: new FormControl<string | null>(null, Validators.required),
   });
   public faSave = faSave;
 
@@ -68,7 +68,11 @@ export class NewComponent implements OnInit {
       return;
     }
 
-    const id = await this.showService.new$(this.form.value as Partial<Show>);
+    const {date, showType} = this.form.getRawValue();
+    const id = await this.showService.new$({
+      date,
+      showType,
+    } as unknown as Partial<Show>);
     await this.router.navigateByUrl(`/shows/${id ?? ''}`);
   }
 }

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

@@ -1,16 +1,56 @@
 import {TestBed} from '@angular/core/testing';
-
+import {Packer} from 'docx';
 import {DocxService} from './docx.service';
 
 describe('DocxService', () => {
   let service: DocxService;
+  type DocxServiceInternals = DocxService & {
+    prepareData: (showId: string) => Promise<unknown>;
+    prepareNewDocument: (data: unknown, options?: unknown) => unknown;
+    saveAs: (blob: Blob, name: string) => void;
+  };
 
-  beforeEach(() => {
-    void TestBed.configureTestingModule({});
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({});
     service = TestBed.inject(DocxService);
   });
 
   it('should be created', () => {
     void expect(service).toBeTruthy();
   });
+
+  it('should not try to save a document when the required data cannot be prepared', async () => {
+    const serviceInternals = service as DocxServiceInternals;
+    const prepareDataSpy = spyOn<any>(serviceInternals, 'prepareData').and.resolveTo(null);
+    const saveAsSpy = spyOn<any>(serviceInternals, 'saveAs');
+
+    await service.create('show-1');
+
+    expect(prepareDataSpy).toHaveBeenCalledWith('show-1');
+    expect(saveAsSpy).not.toHaveBeenCalled();
+  });
+
+  it('should build and save a docx file when all data is available', async () => {
+    const blob = new Blob(['docx']);
+    const serviceInternals = service as DocxServiceInternals;
+    const prepareDataSpy = spyOn<any>(serviceInternals, 'prepareData').and.resolveTo({
+      show: {
+        showType: 'service-worship',
+        date: {toDate: () => new Date('2026-03-10T00:00:00Z')},
+      },
+      songs: [],
+      user: {name: 'Benjamin'},
+      config: {ccliLicenseId: '12345'},
+    });
+    const prepareNewDocumentSpy = spyOn<any>(serviceInternals, 'prepareNewDocument').and.returnValue({doc: true});
+    const saveAsSpy = spyOn<any>(serviceInternals, 'saveAs');
+    spyOn(Packer, 'toBlob').and.resolveTo(blob);
+
+    await service.create('show-1', {copyright: true});
+
+    expect(prepareDataSpy).toHaveBeenCalledWith('show-1');
+    expect(prepareNewDocumentSpy).toHaveBeenCalled();
+    expect(Packer.toBlob).toHaveBeenCalledWith({doc: true} as never);
+    expect(saveAsSpy).toHaveBeenCalledWith(blob, jasmine.stringMatching(/\.docx$/));
+  });
 });

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

@@ -1,6 +1,6 @@
 import {TestBed} from '@angular/core/testing';
 import {firstValueFrom, of, Subject} from 'rxjs';
-import {skip, take} from 'rxjs/operators';
+import {take} from 'rxjs/operators';
 import {DbService} from '../../../services/db.service';
 import {ShowDataService} from './show-data.service';
 
@@ -13,7 +13,7 @@ describe('ShowDataService', () => {
   let colSpy: jasmine.Spy;
   let dbServiceSpy: jasmine.SpyObj<DbService>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     shows$ = new Subject<Array<{id: string; date: {toMillis: () => number}; archived?: boolean}>>();
     docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
     docSpy = jasmine.createSpy('doc').and.returnValue({update: docUpdateSpy});
@@ -25,7 +25,7 @@ describe('ShowDataService', () => {
     dbServiceSpy.doc.and.callFake(docSpy);
     dbServiceSpy.col.and.callFake(colSpy);
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       providers: [{provide: DbService, useValue: dbServiceSpy}],
     });
 
@@ -76,11 +76,7 @@ describe('ShowDataService', () => {
   });
 
   it('should request only published recent shows and filter archived entries', async () => {
-    const publicShows$ = of([
-      {id: 'show-1', archived: false},
-      {id: 'show-2', archived: true},
-      {id: 'show-3'},
-    ]);
+    const publicShows$ = of([{id: 'show-1', archived: false}, {id: 'show-2', archived: true}, {id: 'show-3'}]);
     dbServiceSpy.col$.and.returnValue(publicShows$ as never);
 
     const result = await firstValueFrom(service.listPublicSince$(3));

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

@@ -24,12 +24,15 @@ export class ShowDataService {
   public listRaw$ = () => this.dbService.col$<Show>(this.collection);
 
   public listPublicSince$(lastMonths: number): Observable<Show[]> {
+    const queryConstraints: QueryConstraint[] = [where('published', '==', true), orderBy('date', 'desc')];
+
+    if (lastMonths < 99999) {
       const startDate = new Date();
       startDate.setHours(0, 0, 0, 0);
       startDate.setDate(startDate.getDate() - lastMonths * 30);
       const startTimestamp = Timestamp.fromDate(startDate);
-
-    const queryConstraints: QueryConstraint[] = [where('published', '==', true), where('date', '>=', startTimestamp), orderBy('date', 'desc')];
+      queryConstraints.splice(1, 0, where('date', '>=', startTimestamp));
+    }
 
     return this.dbService.col$<Show>(this.collection, queryConstraints).pipe(
       map(shows => shows.filter(show => !show.archived)),

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

@@ -12,7 +12,7 @@ describe('ShowSongDataService', () => {
   let colSpy: jasmine.Spy;
   let dbServiceSpy: jasmine.SpyObj<DbService>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
     docDeleteSpy = jasmine.createSpy('delete').and.resolveTo();
     docSpy = jasmine.createSpy('doc').and.returnValue({
@@ -27,7 +27,7 @@ describe('ShowSongDataService', () => {
     dbServiceSpy.doc.and.callFake(docSpy);
     dbServiceSpy.col.and.callFake(colSpy);
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       providers: [{provide: DbService, useValue: dbServiceSpy}],
     });
 

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

@@ -0,0 +1,60 @@
+import {TestBed} from '@angular/core/testing';
+import {of} from 'rxjs';
+import {ShowDataService} from './show-data.service';
+import {ShowSongDataService} from './show-song-data.service';
+import {ShowSongIndexService} from './show-song-index.service';
+import {UserSessionService} from '../../../services/user/user-session.service';
+import {User} from '../../../services/user/user';
+
+describe('ShowSongIndexService', () => {
+  let service: ShowSongIndexService;
+  let showDataServiceSpy: jasmine.SpyObj<ShowDataService>;
+  let showSongDataServiceSpy: jasmine.SpyObj<ShowSongDataService>;
+  let sessionSpy: jasmine.SpyObj<UserSessionService>;
+
+  beforeEach(async () => {
+    showDataServiceSpy = jasmine.createSpyObj<ShowDataService>('ShowDataService', ['listRaw$', 'update']);
+    showSongDataServiceSpy = jasmine.createSpyObj<ShowSongDataService>('ShowSongDataService', ['list$']);
+    sessionSpy = jasmine.createSpyObj<UserSessionService>('UserSessionService', ['update$'], {
+      user$: of({id: 'admin-1', name: 'Admin', role: 'admin', chordMode: 'onlyFirst', songUsage: {}} as User),
+    });
+
+    showDataServiceSpy.listRaw$.and.returnValue(of([{id: 'show-1'}, {id: 'show-2'}] as never) as unknown as ReturnType<ShowDataService['listRaw$']>);
+    showDataServiceSpy.update.and.resolveTo();
+    showSongDataServiceSpy.list$.and.callFake((showId: string) => {
+      if (showId === 'show-1') {
+        return of([{songId: 'song-1'}, {songId: 'song-2'}, {songId: 'song-1'}] as never) as never;
+      }
+
+      return of([{songId: 'song-3'}] as never) as never;
+    });
+
+    await TestBed.configureTestingModule({
+      providers: [
+        {provide: ShowDataService, useValue: showDataServiceSpy},
+        {provide: ShowSongDataService, useValue: showSongDataServiceSpy},
+        {provide: UserSessionService, useValue: sessionSpy},
+      ],
+    });
+
+    service = TestBed.inject(ShowSongIndexService);
+  });
+
+  it('should rebuild the distinct songIds index for all shows', async () => {
+    await expectAsync(service.rebuildShowSongIds()).toBeResolvedTo({
+      showsProcessed: 2,
+      showSongsProcessed: 4,
+    });
+
+    expect(showDataServiceSpy.update).toHaveBeenCalledWith('show-1', {songIds: ['song-1', 'song-2']});
+    expect(showDataServiceSpy.update).toHaveBeenCalledWith('show-2', {songIds: ['song-3']});
+  });
+
+  it('should reject index rebuilds for non-admin users', async () => {
+    Object.defineProperty(sessionSpy, 'user$', {
+      value: of({id: 'user-1', name: 'User', role: 'leader', chordMode: 'onlyFirst', songUsage: {}} as User),
+    });
+
+    await expectAsync(service.rebuildShowSongIds()).toBeRejectedWithError('Admin role required to rebuild show song ids.');
+  });
+});

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

@@ -0,0 +1,65 @@
+import {Injectable, inject} from '@angular/core';
+import {firstValueFrom} from 'rxjs';
+import {take} from 'rxjs/operators';
+import {ShowDataService} from './show-data.service';
+import {ShowSongDataService} from './show-song-data.service';
+import {UserSessionService} from '../../../services/user/user-session.service';
+
+export interface ShowSongIndexMigrationResult {
+  showsProcessed: number;
+  showSongsProcessed: number;
+}
+
+export interface MigrationProgress {
+  processed: number;
+  total: number;
+  showId: string;
+  showSongsProcessed: number;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ShowSongIndexService {
+  private session = inject(UserSessionService);
+  private showDataService = inject(ShowDataService);
+  private showSongDataService = inject(ShowSongDataService);
+
+  public async rebuildShowSongIds(onProgress?: (progress: MigrationProgress) => void): Promise<ShowSongIndexMigrationResult> {
+    const currentUser = await firstValueFrom(this.session.user$.pipe(take(1)));
+    if (!currentUser || !this.hasAdminRole(currentUser.role)) {
+      throw new Error('Admin role required to rebuild show song ids.');
+    }
+
+    const shows = await firstValueFrom(this.showDataService.listRaw$());
+    let showSongsProcessed = 0;
+    let processed = 0;
+
+    for (const show of shows) {
+      const showSongs = await firstValueFrom(this.showSongDataService.list$(show.id));
+      const songIds = [...new Set(showSongs.map(showSong => showSong.songId).filter(Boolean))];
+      showSongsProcessed += showSongs.length;
+      await this.showDataService.update(show.id, {songIds});
+      processed += 1;
+      onProgress?.({
+        processed,
+        total: shows.length,
+        showId: show.id,
+        showSongsProcessed,
+      });
+    }
+
+    return {
+      showsProcessed: shows.length,
+      showSongsProcessed,
+    };
+  }
+
+  private hasAdminRole(role: string | null | undefined): boolean {
+    if (!role) {
+      return false;
+    }
+
+    return role.split(';').includes('admin');
+  }
+}

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

@@ -5,6 +5,10 @@ import {UserService} from '../../../services/user/user.service';
 import {ShowService} from './show.service';
 import {ShowSongDataService} from './show-song-data.service';
 import {ShowSongService} from './show-song.service';
+import {ShowSong} from './show-song';
+import {Song} from '../../songs/services/song';
+import {Show} from './show';
+import {User} from '../../../services/user/user';
 
 describe('ShowSongService', () => {
   let service: ShowSongService;
@@ -12,13 +16,13 @@ describe('ShowSongService', () => {
   let songDataServiceSpy: jasmine.SpyObj<SongDataService>;
   let userServiceSpy: jasmine.SpyObj<UserService>;
   let showServiceSpy: jasmine.SpyObj<ShowService>;
-  let user$: BehaviorSubject<any>;
-  const song = {id: 'song-1', key: 'G', title: 'Amazing Grace'} as any;
-  const showSong = {id: 'show-song-1', songId: 'song-1'} as any;
-  const show = {id: 'show-1', order: ['show-song-1', 'show-song-2']} as any;
+  let user$: BehaviorSubject<User | null>;
+  const song = {id: 'song-1', key: 'G', title: 'Amazing Grace'} as unknown as Song;
+  const showSong = {id: 'show-song-1', songId: 'song-1'} as unknown as ShowSong;
+  const show = {id: 'show-1', order: ['show-song-1', 'show-song-2']} as unknown as Show;
 
-  beforeEach(() => {
-    user$ = new BehaviorSubject<any>({id: 'user-1', name: 'Benjamin', role: 'editor', chordMode: 'letters', songUsage: {}});
+  beforeEach(async () => {
+    user$ = new BehaviorSubject<User | null>({id: 'user-1', name: 'Benjamin', role: 'editor', chordMode: 'onlyFirst', songUsage: {}});
     showSongDataServiceSpy = jasmine.createSpyObj<ShowSongDataService>('ShowSongDataService', ['add', 'read$', 'list$', 'delete', 'update$']);
     songDataServiceSpy = jasmine.createSpyObj<SongDataService>('SongDataService', ['read$']);
     userServiceSpy = jasmine.createSpyObj<UserService>('UserService', ['incSongCount', 'decSongCount'], {
@@ -37,7 +41,7 @@ describe('ShowSongService', () => {
     showServiceSpy.read$.and.returnValue(of(show));
     showServiceSpy.update$.and.resolveTo();
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       providers: [
         {provide: ShowSongDataService, useValue: showSongDataServiceSpy},
         {provide: SongDataService, useValue: songDataServiceSpy},
@@ -62,7 +66,7 @@ describe('ShowSongService', () => {
       songId: 'song-1',
       key: 'G',
       keyOriginal: 'G',
-      chordMode: 'letters',
+      chordMode: 'onlyFirst',
       addedLive: true,
     });
   });
@@ -99,7 +103,7 @@ describe('ShowSongService', () => {
     await service.delete$('show-1', 'show-song-1', 0);
 
     expect(showSongDataServiceSpy.delete).toHaveBeenCalledWith('show-1', 'show-song-1');
-    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {order: ['show-song-2']});
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', jasmine.objectContaining({order: ['show-song-2']}));
     expect(userServiceSpy.decSongCount).toHaveBeenCalledWith('song-1');
   });
 

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

@@ -5,6 +5,7 @@ import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {UserService} from '../../../services/user/user.service';
 import {ShowService} from './show.service';
+import {arrayRemove, arrayUnion} from 'firebase/firestore';
 
 @Injectable({
   providedIn: 'root',
@@ -27,8 +28,9 @@ export class ShowSongService {
       chordMode: user.chordMode,
       addedLive,
     };
-    await this.userService.incSongCount(songId);
-    return await this.showSongDataService.add(showId, data);
+    const showSongId = await this.showSongDataService.add(showId, data);
+    await Promise.all([this.userService.incSongCount(songId), this.showService.update$(showId, {songIds: arrayUnion(songId) as never})]);
+    return showSongId;
   }
 
   public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.showSongDataService.read$(showId, songId);
@@ -38,14 +40,19 @@ 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, show] = await Promise.all([this.read(showId, showSongId), firstValueFrom(this.showService.read$(showId))]);
+    const [showSong, show, showSongs] = await Promise.all([this.read(showId, showSongId), firstValueFrom(this.showService.read$(showId)), this.list(showId)]);
     if (!show) return;
     if (!showSong) return;
 
     const order = [...show.order];
     order.splice(index, 1);
+    const hasSameSongStillInShow = showSongs.some(song => song.id !== showSongId && song.songId === showSong.songId);
 
-    await Promise.all([this.showSongDataService.delete(showId, showSongId), this.showService.update$(showId, {order}), this.userService.decSongCount(showSong.songId)]);
+    await Promise.all([
+      this.showSongDataService.delete(showId, showSongId),
+      this.showService.update$(showId, hasSameSongStillInShow ? {order} : {order, songIds: arrayRemove(showSong.songId) as never}),
+      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

@@ -1,5 +1,5 @@
 import {TestBed} from '@angular/core/testing';
-import {BehaviorSubject, of} from 'rxjs';
+import {BehaviorSubject, firstValueFrom, of} from 'rxjs';
 import {ShowDataService} from './show-data.service';
 import {ShowService} from './show.service';
 import {UserService} from '../../../services/user/user.service';
@@ -8,23 +8,25 @@ describe('ShowService', () => {
   let service: ShowService;
   let showDataServiceSpy: jasmine.SpyObj<ShowDataService>;
   let user$: BehaviorSubject<unknown>;
+  let shows$: BehaviorSubject<unknown[]>;
   const shows = [
     {id: 'show-1', owner: 'user-1', published: false, archived: false},
     {id: 'show-2', owner: 'other-user', published: true, archived: false},
     {id: 'show-3', owner: 'user-1', published: true, archived: true},
   ] as never;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     user$ = new BehaviorSubject<unknown>({id: 'user-1'});
+    shows$ = new BehaviorSubject<unknown[]>(shows as unknown[]);
     showDataServiceSpy = jasmine.createSpyObj<ShowDataService>('ShowDataService', ['read$', 'listPublicSince$', 'update', 'add'], {
-      list$: of(shows),
+      list$: shows$.asObservable() as unknown as ShowDataService['list$'],
     });
     showDataServiceSpy.read$.and.returnValue(of(shows[0]));
     showDataServiceSpy.listPublicSince$.and.returnValue(of([shows[1]]));
     showDataServiceSpy.update.and.resolveTo();
     showDataServiceSpy.add.and.resolveTo('new-show-id');
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       providers: [
         {provide: ShowDataService, useValue: showDataServiceSpy},
         {provide: UserService, useValue: {user$: user$.asObservable()}},
@@ -38,34 +40,39 @@ describe('ShowService', () => {
     expect(service).toBeTruthy();
   });
 
-  it('should list published shows and own drafts, but exclude archived ones', done => {
-    service.list$().subscribe(result => {
+  it('should list published shows and own drafts, but exclude archived ones', async () => {
+    const result = await firstValueFrom(service.list$());
     expect(result.map(show => show.id)).toEqual(['show-1', 'show-2']);
-      done();
-    });
   });
 
-  it('should filter out private drafts when publishedOnly is true', done => {
-    service.list$(true).subscribe(result => {
+  it('should filter out private drafts when publishedOnly is true', async () => {
+    const result = await firstValueFrom(service.list$(true));
     expect(result.map(show => show.id)).toEqual(['show-2']);
-      done();
-    });
   });
 
-  it('should delegate public listing to the data service', done => {
-    service.listPublicSince$(6).subscribe(result => {
-      expect(result).toEqual([shows[1]]);
+  it('should include own archived shows when requested', async () => {
+    const result = await firstValueFrom(service.list$(false, true));
+    expect(result.map(show => show.id)).toEqual(['show-1', 'show-2', 'show-3']);
+  });
+
+  it('should not include archived shows from other users when requested', async () => {
+    shows$.next([
+      ...(shows as unknown as unknown[]),
+      {id: 'show-4', owner: 'other-user', published: true, archived: true},
+    ]);
+
+    const result = await firstValueFrom(service.list$(false, true));
+    expect(result.map(show => show.id)).toEqual(['show-1', 'show-2', 'show-3']);
+  });
+
+  it('should delegate public listing to the data service', async () => {
+    await expectAsync(firstValueFrom(service.listPublicSince$(6))).toBeResolvedTo([shows[1]]);
     expect(showDataServiceSpy.listPublicSince$).toHaveBeenCalledWith(6);
-      done();
-    });
   });
 
-  it('should delegate reads to the data service', done => {
-    service.read$('show-1').subscribe(result => {
-      expect(result).toEqual(shows[0]);
+  it('should delegate reads to the data service', async () => {
+    await expectAsync(firstValueFrom(service.read$('show-1'))).toBeResolvedTo(shows[0]);
     expect(showDataServiceSpy.read$).toHaveBeenCalledWith('show-1');
-      done();
-    });
   });
 
   it('should delegate updates to the data service', async () => {
@@ -97,6 +104,7 @@ describe('ShowService', () => {
         showType: type,
         owner: 'user-1',
         order: [],
+        songIds: [],
         public: true,
       });
     });
@@ -111,6 +119,7 @@ describe('ShowService', () => {
         showType: type,
         owner: 'user-1',
         order: [],
+        songIds: [],
         public: false,
       });
     });

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

@@ -20,13 +20,17 @@ 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[]> {
+  public list$(publishedOnly = false, includeOwnArchived = false): Observable<Show[]> {
     return this.userService.user$.pipe(
       switchMap(
         () => this.showDataService.list$,
         (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)))
+      map(s =>
+        s.shows
+          .filter(show => !show.archived || (includeOwnArchived && show.owner === s.user?.id))
+          .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
+      )
     );
   }
 
@@ -39,6 +43,7 @@ export class ShowService {
       ...data,
       owner: user.id,
       order: [],
+      songIds: [],
       public: ShowService.SHOW_TYPE_PUBLIC.indexOf(data.showType) !== -1,
     };
     return await this.showDataService.add(calculatedData);

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

@@ -1,14 +1,16 @@
 import {Timestamp} from '@angular/fire/firestore';
 
 export type PresentationBackground = 'none' | 'blue' | 'green' | 'leder' | 'praise' | 'bible';
+export type ReportedType = null | 'pending' | 'reported' | 'not-required';
 
 export interface Show {
   id: string;
   showType: string;
   date: Timestamp;
   owner: string;
+  songIds?: string[];
   public: boolean;
-  reported: boolean;
+  reportedType: ReportedType;
   published: boolean;
   archived: boolean;
   order: string[];

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

@@ -1,5 +1,5 @@
 @if (show$ | async; as show) {
-  <div>
+<div>
   <app-card
     [fullscreen]="useSwiper"
     closeLink="../"
@@ -8,8 +8,15 @@
     }} - {{ getStatus(show) }}"
   >
     @if (!useSwiper) {
-        <p>{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
+    <p class="show-meta">
+      {{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
       <app-user-name [userId]="show.owner"></app-user-name>
+      <ng-container *appOwner="show.owner">
+        <app-badge [type]="getPublishedBadgeType(show)">{{ show.published | publishedType }}</app-badge>
+        @if (show.reportedType) {
+        <app-badge [type]="getReportedTypeBadgeType(show)">{{ show.reportedType | reportedType }}</app-badge>
+        }
+      </ng-container>
     </p>
     }
     <div class="head">
@@ -19,25 +26,30 @@
         }
       </div>
       <div [class.floating]="useSwiper">
-          <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
-          matTooltip="Verkleinern"></app-menu-button>
-          <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 ? faRestore : faMaximize" class="btn-delete btn-icon"
-          matTooltip="Vollbild"></app-menu-button>
+        <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon" matTooltip="Verkleinern"></app-menu-button>
+        <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 ? faRestore : faMaximize"
+          class="btn-delete btn-icon"
+          matTooltip="Vollbild"
+        ></app-menu-button>
       </div>
     </div>
     @if (showSongs && !useSwiper) {
-        <div (cdkDropListDropped)="drop($event, show)"
+    <div
+      (cdkDropListDropped)="drop($event, show)"
       [cdkDropListDisabled]="show.published || showText"
-          [style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
+      [style.--song-key-column-width]="getSongKeyColumnWidth(show)"
       [style.font-size]="textSize + 'em'"
       cdkDropList
-          class="song-list">
+      class="song-list"
+    >
       @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
       <div cdkDrag class="song-row">
         <app-song
+          [dragHandle]="!(show.published || showText)"
           [fullscreen]="useSwiper"
           [index]="i"
           [showId]="showId"
@@ -48,89 +60,51 @@
       </div>
       }
     </div>
-      }
-      @if (useSwiper) {
+    } @if (useSwiper) {
     <swiper-container scrollbar="true">
       @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
-            <swiper-slide
-              [style.font-size]="textSize + 'em'"
-              class="song-swipe">
-              <app-song
-                [fullscreen]="true"
-                [index]="i"
-                [showId]="showId"
-                [showSong]="song"
-                [showText]="true"
-                [show]="show"
-              ></app-song>
+      <swiper-slide [style.font-size]="textSize + 'em'" class="song-swipe">
+        <app-song [fullscreen]="true" [index]="i" [showId]="showId" [showSong]="song" [showText]="true" [show]="show"></app-song>
         <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
         @if (getNextSong(orderedShowSongs(show), i); as next) {
-                <div class="next-song">{{ next }}
+        <div class="next-song">
+          {{ next }}
           <fa-icon [icon]="faNextSong"></fa-icon>
         </div>
         }
       </swiper-slide>
       }
     </swiper-container>
-      }
-      @if (songs$ | async; as songs) {
-        @if (songs && !show.published && !useSwiper) {
-          <app-add-song
-            [showSongs]="showSongs"
-            [show]="show"
-            [songs]="songs"
-          ></app-add-song>
-        }
-      }
-      @if (!useSwiper) {
+    } @if (songs$ | async; as songs) { @if (songs && !show.published && !useSwiper) {
+    <app-add-song [showSongs]="showSongs" [show]="show" [songs]="songs"></app-add-song>
+    } } @if (!useSwiper) {
     <app-button-row>
       <ng-container *appRole="['leader']">
         <ng-container *appOwner="show.owner">
           @if (!show.archived) {
-                <app-button (click)="onArchive(true)" [icon]="faBox">
-                  Archivieren
-                </app-button>
-              }
-              @if (show.archived) {
-                <app-button (click)="onArchive(false)" [icon]="faBoxOpen">
-                  Wiederherstellen
-                </app-button>
-              }
-              @if (!show.published) {
-                <app-button (click)="onPublish(true)" [icon]="faPublish">
-                  Veröffentlichen
-                </app-button>
-              }
-              @if (show.published) {
-                <app-button (click)="onPublish(false)" [icon]="faUnpublish">
-                  Veröffentlichung zurückziehen
-                </app-button>
-              }
-              @if (show.published) {
-                <app-button (click)="onShare(show)" [icon]="faShare">
-                  Teilen
-                </app-button>
-              }
-              @if (!show.published) {
-                <app-button (click)="onChange(show.id)" [icon]="faSliders">
-                  Ändern
-                </app-button>
+          <app-button (click)="onArchive(true)" [icon]="faBox"> Archivieren </app-button>
+          } @if (show.archived) {
+          <app-button (click)="onArchive(false)" [icon]="faBoxOpen"> Wiederherstellen </app-button>
+          } @if (!show.published) {
+          <app-button (click)="onPublish(show, true)" [icon]="faPublish"> Veröffentlichen </app-button>
+          } @if (show.published) {
+          <app-button (click)="onPublish(show, false)" [icon]="faUnpublish"> Veröffentlichung zurückziehen </app-button>
+          } @if (show.published) {
+          <app-button (click)="onShare(show)" [icon]="faShare"> Teilen </app-button>
+          } @if (show.published && show.reportedType === 'pending') {
+          <app-button (click)="onReport(show)" [icon]="faReport"> Melden </app-button>
+          } @if (!show.published) {
+          <app-button (click)="onChange(show.id)" [icon]="faSliders"> Ändern </app-button>
           }
         </ng-container>
       </ng-container>
-          <app-button [icon]="faDownload" [matMenuTriggerFor]="menu">
-            Herunterladen
-          </app-button>
+      <app-button [icon]="faDownload" [matMenuTriggerFor]="menu"> Herunterladen </app-button>
       <mat-menu #menu="matMenu">
-            <app-button (click)="onDownload()" [icon]="faUser">
-              Ablauf für Lobpreisgruppe
-            </app-button>
-            <app-button (click)="onDownloadHandout()" [icon]="faUsers">
-              Handout mit Copyright Infos
-            </app-button>
+        <app-button (click)="onDownload()" [icon]="faUser"> Ablauf für Lobpreisgruppe </app-button>
+        <app-button (click)="onDownloadHandout()" [icon]="faUsers"> Handout mit Copyright Infos </app-button>
       </mat-menu>
     </app-button-row>
     }
   </app-card>
-  </div>
+</div>
 }

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

@@ -13,6 +13,13 @@
   min-height: calc(100vh - 60px);
 }
 
+.show-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 
 .head {
   display: flex;
@@ -52,7 +59,7 @@
 }
 
 .next-song {
-  color: var(--text-muted);
+  color: var(--text-soft);
   position: fixed;
   bottom: 0;
   right: 10px;
@@ -63,7 +70,7 @@
 }
 
 .time {
-  color: var(--text-muted);
+  color: var(--text-soft);
   position: fixed;
   bottom: 0;
   left: 10px;

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

@@ -1,24 +1,114 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
-
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BehaviorSubject, of} from 'rxjs';
 import {ShowComponent} from './show.component';
+import {ActivatedRoute, Router} from '@angular/router';
+import {ShowService} from '../services/show.service';
+import {SongService} from '../../songs/services/song.service';
+import {ShowSongService} from '../services/show-song.service';
+import {DocxService} from '../services/docx.service';
+import {UserService} from '../../../services/user/user.service';
+import {MatDialog} from '@angular/material/dialog';
+import {GuestShowService} from '../../guest/guest-show.service';
 
 describe('ShowComponent', () => {
   let component: ShowComponent;
   let fixture: ComponentFixture<ShowComponent>;
+  let showServiceSpy: jasmine.SpyObj<ShowService>;
+  let showSongServiceSpy: jasmine.SpyObj<ShowSongService>;
+  let dialogSpy: jasmine.SpyObj<MatDialog>;
+  let user$: BehaviorSubject<unknown>;
+  let userId$: BehaviorSubject<string | null>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    showServiceSpy = jasmine.createSpyObj<ShowService>('ShowService', ['update$', 'read$']);
+    showSongServiceSpy = jasmine.createSpyObj<ShowSongService>('ShowSongService', ['list$', 'list']);
+    dialogSpy = jasmine.createSpyObj<MatDialog>('MatDialog', ['open']);
+    user$ = new BehaviorSubject<unknown>({id: 'user-1', role: ['leader']});
+    userId$ = new BehaviorSubject<string | null>('user-1');
+
+    showServiceSpy.read$.and.returnValue(of(null));
+    showServiceSpy.update$.and.resolveTo();
+    showSongServiceSpy.list$.and.returnValue(of([]));
+    showSongServiceSpy.list.and.resolveTo([]);
+
+    await TestBed.configureTestingModule({
       imports: [ShowComponent],
+      providers: [
+        {provide: ActivatedRoute, useValue: {params: of({showId: 'show-1'})}},
+        {provide: ShowService, useValue: showServiceSpy},
+        {provide: SongService, useValue: {list$: () => of([])}},
+        {provide: ShowSongService, useValue: showSongServiceSpy},
+        {provide: DocxService, useValue: {create: jasmine.createSpy('create').and.resolveTo()}},
+        {provide: Router, useValue: {navigateByUrl: jasmine.createSpy('navigateByUrl')}},
+        {
+          provide: UserService,
+          useValue: {
+            user$: user$.asObservable(),
+            userId$: userId$.asObservable(),
+            loggedIn$: () => of(true),
+          },
+        },
+        {provide: MatDialog, useValue: dialogSpy},
+        {provide: GuestShowService, useValue: {share: jasmine.createSpy('share').and.resolveTo('https://example.invalid')}},
+      ],
     }).compileComponents();
-  }));
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(ShowComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     void expect(component).toBeTruthy();
   });
+
+  it('should reset reportedType when unpublishing', async () => {
+    await component.onPublish({id: 'show-1', public: true} as never, false);
+
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {published: false, reportedType: null});
+  });
+
+  it('should set not-required for private shows when publishing', async () => {
+    await component.onPublish({id: 'show-1', public: false} as never, true);
+
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {published: true, reportedType: 'not-required'});
+  });
+
+  it('should set pending for public shows with reportable CCLI songs', async () => {
+    showSongServiceSpy.list.and.resolveTo([{legalOwner: 'CCLI', legalOwnerId: '123'}] as never);
+
+    await component.onPublish({id: 'show-1', public: true} as never, true);
+
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {published: true, reportedType: 'pending'});
+  });
+
+  it('should set not-required for public shows without reportable CCLI songs', async () => {
+    showSongServiceSpy.list.and.resolveTo([{legalOwner: 'CCLI', legalOwnerId: ''}] as never);
+
+    await component.onPublish({id: 'show-1', public: true} as never, true);
+
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {published: true, reportedType: 'not-required'});
+  });
+
+  it('should open report dialog with deduplicated reportable songs and mark show as reported', () => {
+    component.showSongs = [
+      {id: 'show-song-1', songId: 'song-1', title: 'Alpha', legalOwner: 'CCLI', legalOwnerId: '123'},
+      {id: 'show-song-2', songId: 'song-1', title: 'Alpha', legalOwner: 'CCLI', legalOwnerId: '123'},
+      {id: 'show-song-3', songId: 'song-2', title: 'Beta', legalOwner: 'other', legalOwnerId: '456'},
+      {id: 'show-song-4', songId: 'song-3', title: 'Gamma', legalOwner: 'CCLI', legalOwnerId: '789'},
+    ] as never;
+    dialogSpy.open.and.returnValue({afterClosed: () => of(true)} as never);
+
+    component.onReport({id: 'show-1', order: ['show-song-1', 'show-song-2', 'show-song-3', 'show-song-4']} as never);
+
+    expect(dialogSpy.open).toHaveBeenCalledWith(jasmine.any(Function), {
+      width: '640px',
+      data: {
+        songs: [
+          {title: 'Alpha', ccliNumber: '123'},
+          {title: 'Gamma', ccliNumber: '789'},
+        ],
+      },
+    });
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {reportedType: 'reported'});
+  });
 });

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

@@ -3,6 +3,7 @@ import {filter, map, shareReplay, switchMap, tap} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ShowService} from '../services/show.service';
 import {Observable, of, Subscription} from 'rxjs';
+import {take} from 'rxjs/operators';
 import {Show} from '../services/show';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
@@ -13,6 +14,7 @@ import {
   faArrowUpRightFromSquare,
   faBox,
   faBoxOpen,
+  faCheck,
   faChevronRight,
   faFileDownload,
   faLock,
@@ -48,6 +50,11 @@ 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';
+import {UserService} from '../../../services/user/user.service';
+import {ReportedTypePipe} from '../../../widget-modules/pipes/reported-type-translator/reported-type.pipe';
+import {BadgeComponent, BadgeType} from '../../../widget-modules/components/badge/badge.component';
+import {ReportDialogComponent, ReportDialogSong} from '../dialog/report-dialog/report-dialog.component';
+import {PublishedTypePipe} from '../../../widget-modules/pipes/published-type-translator/published-type.pipe';
 
 @Component({
   selector: 'app-show',
@@ -77,6 +84,9 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
     AsyncPipe,
     DatePipe,
     ShowTypePipe,
+    ReportedTypePipe,
+    PublishedTypePipe,
+    BadgeComponent,
   ],
 })
 export class ShowComponent implements OnInit, OnDestroy {
@@ -87,6 +97,7 @@ export class ShowComponent implements OnInit, OnDestroy {
   private docxService = inject(DocxService);
   private router = inject(Router);
   private cRef = inject(ChangeDetectorRef);
+  private userService = inject(UserService);
   public dialog = inject(MatDialog);
   private guestShowService = inject(GuestShowService);
 
@@ -98,6 +109,7 @@ export class ShowComponent implements OnInit, OnDestroy {
 
   public faBox = faBox;
   public faBoxOpen = faBoxOpen;
+  public faReport = faCheck;
   public faPublish = faUnlock;
   public faUnpublish = faLock;
   public faShare = faArrowUpRightFromSquare;
@@ -112,12 +124,13 @@ export class ShowComponent implements OnInit, OnDestroy {
   public faRestore = faMinimize;
   public faMaximize = faMaximize;
   public faNextSong = faChevronRight;
-  public currentTime: Date;
+  public currentTime!: Date;
   private subs: Subscription[] = [];
+  private clockIntervalId: ReturnType<typeof setInterval> | null = null;
 
   public ngOnInit(): void {
     this.currentTime = new Date();
-    setInterval(() => {
+    this.clockIntervalId = setInterval(() => {
       this.currentTime = new Date();
     }, 10000);
     this.show$ = this.activatedRoute.params.pipe(
@@ -155,6 +168,9 @@ export class ShowComponent implements OnInit, OnDestroy {
 
   public ngOnDestroy(): void {
     this.subs.forEach(_ => _.unsubscribe());
+    if (this.clockIntervalId) {
+      clearInterval(this.clockIntervalId);
+    }
   }
 
   public onZoomIn() {
@@ -166,20 +182,39 @@ export class ShowComponent implements OnInit, OnDestroy {
   }
 
   public onArchive(archived: boolean): void {
-    if (!archived && this.showId != null) void this.showService.update$(this.showId, {archived});
+    if (!archived && this.showId != null) void this.setArchiveState(false);
     else {
       const dialogRef = this.dialog.open(ArchiveDialogComponent, {
         width: '350px',
       });
 
-      dialogRef.afterClosed().subscribe((archive: boolean) => {
-        if (archive && this.showId != null) void this.showService.update$(this.showId, {archived});
+      dialogRef
+        .afterClosed()
+        .pipe(take(1))
+        .subscribe((archive: boolean) => {
+          if (archive && this.showId != null) void this.setArchiveState(true);
         });
     }
   }
 
-  public async onPublish(published: boolean): Promise<void> {
-    if (this.showId != null) await this.showService.update$(this.showId, {published});
+  public async onPublish(show: Show, published: boolean): Promise<void> {
+    if (!show.id) {
+      return;
+    }
+
+    if (!published) {
+      await this.showService.update$(show.id, {published: false, reportedType: null});
+      return;
+    }
+
+    if (!show.public) {
+      await this.showService.update$(show.id, {published: true, reportedType: 'not-required'});
+      return;
+    }
+
+    const showSongs = this.showSongs ?? (await this.showSongService.list(show.id));
+    const reportedType = showSongs.some(song => song.legalOwner === 'CCLI' && !!song.legalOwnerId) ? 'pending' : 'not-required';
+    await this.showService.update$(show.id, {published: true, reportedType});
   }
 
   public onShare = async (show: Show): Promise<void> => {
@@ -187,16 +222,72 @@ export class ShowComponent implements OnInit, OnDestroy {
     this.dialog.open(ShareDialogComponent, {data: {url, show}});
   };
 
+  public onReport(show: Show): void {
+    const songs = this.getReportableSongs(show);
+    if (songs.length === 0) {
+      return;
+    }
+
+    const dialogRef = this.dialog.open(ReportDialogComponent, {
+      width: '640px',
+      data: {songs},
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(take(1))
+      .subscribe((reported: boolean) => {
+        if (reported) {
+          void this.showService.update$(show.id, {reportedType: 'reported'});
+        }
+      });
+  }
+
   public getStatus(show: Show): string {
     if (show.published) {
       return 'veröffentlicht';
     }
-    if (show.reported) {
+    if (show.reportedType === 'reported') {
       return 'gemeldet';
     }
     return 'entwurf';
   }
 
+  public getReportedTypeBadgeType(show: Show): BadgeType {
+    switch (show.reportedType) {
+      case 'pending':
+        return 'error';
+      case 'reported':
+        return 'ok';
+      case 'not-required':
+        return 'none';
+      default:
+        return 'none';
+    }
+  }
+
+  public getPublishedBadgeType(show: Show): BadgeType {
+    return show.published ? 'ok' : 'none';
+  }
+
+  private getReportableSongs(show: Show): ReportDialogSong[] {
+    const uniqueSongs = new Map<string, ReportDialogSong>();
+
+    this.orderedShowSongs(show)
+      .filter(song => song.legalOwner === 'CCLI' && !!song.legalOwnerId)
+      .forEach(song => {
+        const key = song.songId || `${song.title}:${song.legalOwnerId}`;
+        if (!uniqueSongs.has(key)) {
+          uniqueSongs.set(key, {
+            title: song.title,
+            ccliNumber: song.legalOwnerId,
+          });
+        }
+      });
+
+    return Array.from(uniqueSongs.values());
+  }
+
   public async onDownload(): Promise<void> {
     if (this.showId != null) await this.docxService.create(this.showId);
   }
@@ -255,6 +346,34 @@ export class ShowComponent implements OnInit, OnDestroy {
     const song = showSongs[i + 1];
     return song?.title ?? '';
   }
+
+  public getSongKeyColumnWidth(show: Show): string {
+    const labels = this.orderedShowSongs(show).map(song => {
+      if (song.keyOriginal && song.keyOriginal !== song.key) {
+        return `${song.keyOriginal} -> ${song.key}`;
+      }
+
+      return song.key ?? '';
+    });
+
+    const longestLabelLength = labels.reduce((max, label) => Math.max(max, label.length), 0);
+    const widthInCh = Math.max(3, longestLabelLength);
+    return `${widthInCh}ch`;
+  }
+
+  private async setArchiveState(archived: boolean): Promise<void> {
+    if (!this.showId) {
+      return;
+    }
+
+    const updates: Array<Promise<void | null>> = [this.showService.update$(this.showId, {archived})];
+
+    (this.showSongs ?? []).forEach(showSong => {
+      updates.push(archived ? this.userService.decSongCount(showSong.songId) : this.userService.incSongCount(showSong.songId));
+    });
+
+    await Promise.all(updates);
+  }
 }
 
 export interface Swiper {

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

@@ -1,62 +1,74 @@
 @if (iSong && iSong && show) {
-  <div>
+<div>
   @if (show.published || fullscreen) {
   <div class="title published">
     <div class="key">{{ iSong.key }}</div>
     <div>{{ iSong.title }}</div>
   </div>
+  } @if (!show.published && !fullscreen) {
+  <div class="song" [class.show-text-layout]="!!showText" [class.compact-layout]="!showText" [class.with-drag]="dragHandle && !edit">
+    @if (dragHandle && !edit) {
+    <button aria-label="Lied verschieben" cdkDragHandle class="drag-handle" type="button"></button>
     }
-    @if (!show.published && !fullscreen) {
-      <div class="song">
     <span class="title">{{ iSong.title }}</span>
     @if (!edit) {
-          <span class="keys">
+    <div class="keys-container">
+      <div (click)="openKeySelect()" class="keys">
         @if (iSong.keyOriginal !== iSong.key) {
         <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
-              }<span
-            (click)="openKeySelect()">{{ iSong.key }}</span>
-            @if (keys) {
-              <mat-form-field (click)="option.open()" class="transpose">
-                <mat-select #option [formControl]="keyFormControl">
+        }
+        <span>{{ iSong.key }}</span>
+      </div>
+    </div>
+    } @if (!edit) {
+    <app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon" matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
+    } @if (!edit) {
+    <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon" matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
+    }
+  </div>
+  @if (!edit) {
+  <div aria-hidden="true" class="song select" [class.show-text-layout]="!!showText" [class.compact-layout]="!showText" [class.with-drag]="dragHandle">
+    @if (dragHandle) {
+    <span class="drag-handle-placeholder"></span>
+    } @if (!showText) {
+    <span class="keys">
+      <mat-form-field class="keys-select">
+        <mat-select #option [formControl]="keyFormControl" tabIndex="-1">
           @for (key of keys; track key) {
           <mat-option [value]="key">{{ key }}</mat-option>
           }
         </mat-select>
       </mat-form-field>
+    </span>
+    <span class="title"></span>
+    } @else {
+    <span class="title"></span>
+    <span class="keys">
+      <mat-form-field class="keys-select">
+        <mat-select #option [formControl]="keyFormControl" tabIndex="-1">
+          @for (key of keys; track key) {
+          <mat-option [value]="key">{{ key }}</mat-option>
           }
+        </mat-select>
+      </mat-form-field>
     </span>
     }
-        @if (!edit) {
-          <app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon"
-          matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
-        }
-        @if (!edit) {
-          <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"
-          matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
-        }
+    <span class="btn-edit"></span>
+    <span class="btn-delete"></span>
   </div>
-    }
-    @if (edit) {
+  } } @if (edit) {
   <mat-form-field appearance="outline">
     <mat-label>Songtext</mat-label>
-        <textarea [cdkTextareaAutosize]="true"
-          [formControl]="editSongControl"
-          class="edit"
-          matInput
-          matTooltip="Tonart ändern"
-        ></textarea>
+    <textarea [cdkTextareaAutosize]="true" [formControl]="editSongControl" class="edit" matInput matTooltip="Tonart ändern"></textarea>
   </mat-form-field>
-    }
-    @if (edit) {
+  } @if (edit) {
   <div>Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
-    }
-    @if (edit) {
+  } @if (edit) {
   <app-button-row>
     <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
     <app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
   </app-button-row>
-    }
-    @if (!edit && (showText )) {
+  } @if (!edit && (showText)) {
   <app-song-text
     (chordModeChanged)="onChordModeChanged($event)"
     [chordMode]="iSong.chordMode"
@@ -65,5 +77,5 @@
     [transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
   ></app-song-text>
   }
-  </div>
+</div>
 }

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

@@ -1,12 +1,10 @@
 
 .song {
+  &:not(.select) {
     min-height: 28px;
-  display: grid;
-  grid-template-columns: auto 70px 25px 25px;
-  @media screen and (max-width: 860px) {
-    grid-template-columns: auto 70px 45px 45px;
   }
-  grid-template-areas: "title keys edit delete";
+
+  display: grid;
 
   & > * {
     display: flex;
@@ -14,12 +12,109 @@
   }
 
   overflow: hidden;
+
+  &.compact-layout {
+    grid-template-columns: var(--song-key-column-width, 30px) auto 25px 25px;
+    grid-template-areas: "keys title edit delete";
+
+    @media screen and (max-width: 860px) {
+      grid-template-columns: var(--song-key-column-width, 30px) auto 45px 45px;
+    }
+
+    &.with-drag {
+      grid-template-columns: 24px var(--song-key-column-width, 30px) auto 25px 25px;
+      grid-template-areas: "drag keys title edit delete";
+
+      @media screen and (max-width: 860px) {
+        grid-template-columns: 24px var(--song-key-column-width, 30px) auto 45px 45px;
+      }
+    }
+  }
+
+  &.show-text-layout {
+    grid-template-columns: auto var(--song-key-column-width, 30px) 25px 25px;
+    grid-template-areas: "title keys edit delete";
+
+    @media screen and (max-width: 860px) {
+      grid-template-columns: auto var(--song-key-column-width, 30px) 45px 45px;
+    }
+
+    &.with-drag {
+      grid-template-columns: 24px auto var(--song-key-column-width, 30px) 25px 25px;
+      grid-template-areas: "drag title keys edit delete";
+
+      @media screen and (max-width: 860px) {
+        grid-template-columns: 24px auto var(--song-key-column-width, 30px) 45px 45px;
+      }
+    }
+  }
+}
+
+.drag-handle,
+.drag-handle-placeholder {
+  grid-area: drag;
+}
+
+.drag-handle {
+  width: 16px;
+  height: 36px;
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  cursor: grab;
+  justify-self: start;
+  position: relative;
+
+  &::before {
+    content: "";
+    width: 10px;
+    height: 18px;
+    display: block;
+    border-radius: 999px;
+    background-image: radial-gradient(circle, var(--text-soft) 1.2px, transparent 1.3px),
+    radial-gradient(circle, var(--text-soft) 1.2px, transparent 1.3px);
+    background-position: 0 0, 6px 0;
+    background-size: 6px 6px;
+    background-repeat: repeat-y;
+    opacity: 0.65;
+    transition: var(--transition);
+  }
+
+  &:hover::before {
+    opacity: 1;
+    background-image: radial-gradient(circle, var(--primary-color) 1.2px, transparent 1.3px),
+    radial-gradient(circle, var(--primary-color) 1.2px, transparent 1.3px);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.drag-handle-placeholder {
+  width: 16px;
+}
+
+.keys-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.keys-select {
+  height: 0;
+  overflow: hidden;
+  line-height: 0;
+  min-width: max(100px, var(--song-key-column-width, 30px));
 }
 
 .keys {
+  display: flex;
+  align-items: center;
   position: relative;
   margin-right: 10px;
   cursor: pointer;
+  flex-grow: 0;
+  height: 100%;
 
   &:hover {
     color: var(--color-primary);
@@ -41,6 +136,7 @@
 
 .title {
   grid-area: title;
+  min-width: 0;
 
   &.published {
     margin: 10px 0;

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {SongComponent} from './song.component';
 
@@ -6,11 +6,11 @@ describe('SongComponent', () => {
   let component: SongComponent;
   let fixture: ComponentFixture<SongComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [SongComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongComponent);

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

@@ -1,8 +1,9 @@
-import {Component, Input, OnInit, ViewChild, inject} from '@angular/core';
+import {Component, DestroyRef, Input, OnInit, ViewChild, inject} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
-import {ReactiveFormsModule, UntypedFormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} 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';
@@ -17,6 +18,7 @@ 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';
+import {CdkDragHandle} from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'app-song',
@@ -36,14 +38,17 @@ import {ButtonComponent} from '../../../../widget-modules/components/button/butt
     ButtonRowComponent,
     ButtonComponent,
     SongTextComponent,
+    CdkDragHandle,
   ],
 })
 export class SongComponent implements OnInit {
   private showSongService = inject(ShowSongService);
+  private destroyRef = inject(DestroyRef);
 
   @Input() public show: Show | null = null;
   @Input() public showId: string | null = null;
   @Input() public showText: boolean | null = null;
+  @Input() public dragHandle = false;
   @Input() public index = -1;
   @Input() public fullscreen = false;
   public keys: string[] = [];
@@ -51,11 +56,11 @@ export class SongComponent implements OnInit {
   public faEdit = faPenToSquare;
   public faSave = faSave;
   public faEraser = faEraser;
-  public keyFormControl: UntypedFormControl = new UntypedFormControl();
+  public keyFormControl = new FormControl<string>('', {nonNullable: true});
   public iSong: ShowSong | null = null;
   public edit = false;
-  public editSongControl = new UntypedFormControl();
-  @ViewChild('option') private keyOptions: MatSelect;
+  public editSongControl = new FormControl<string | null>(null);
+  @ViewChild('option') private keyOptions!: MatSelect;
 
   @Input()
   public set showSong(song: ShowSong) {
@@ -65,8 +70,8 @@ export class SongComponent implements OnInit {
 
   public ngOnInit(): void {
     if (!this.iSong) return;
-    this.keyFormControl = new UntypedFormControl(this.iSong.key);
-    this.keyFormControl.valueChanges.subscribe((value: string) => {
+    this.keyFormControl = new FormControl<string>(this.iSong.key, {nonNullable: true});
+    this.keyFormControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
       if (!this.showId || !this.iSong) return;
       void this.showSongService.update$(this.showId, this.iSong.id, {key: value});
     });

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

@@ -4,6 +4,7 @@ import {NewComponent} from './new/new.component';
 import {ListComponent} from './list/list.component';
 import {ShowComponent} from './show/show.component';
 import {EditComponent} from './edit/edit.component';
+import {RoleGuard} from '../../widget-modules/guards/role.guard';
 
 const routes: Routes = [
   {
@@ -14,6 +15,10 @@ const routes: Routes = [
   {
     path: 'new',
     component: NewComponent,
+    canActivate: [RoleGuard],
+    data: {
+      requiredRoles: ['leader'],
+    },
   },
   {
     path: ':showId/edit',

src/app/modules/songs/services/chord.ts

@@ -1,7 +1,29 @@
+export interface ChordAddDescriptor {
+  raw: string;
+  quality: 'major' | 'minor' | 'diminished' | 'augmented' | null;
+  extensions: string[];
+  additions: string[];
+  suspensions: string[];
+  alterations: string[];
+  modifiers: string[];
+}
+
+export interface ChordValidationIssue {
+  lineNumber: number;
+  lineText: string;
+  token: string;
+  suggestion: string | null;
+  reason: 'alias' | 'minor_format' | 'major_format' | 'invalid_suffix' | 'unknown_token' | 'tab_character';
+  message: string;
+}
+
 export interface Chord {
   chord: string;
   length: number;
   position: number;
   slashChord: string | null;
   add: string | null;
+  addDescriptor?: ChordAddDescriptor | null;
+  prefix?: string;
+  suffix?: string;
 }

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

@@ -12,7 +12,7 @@ describe('FileDataService', () => {
   let fileDeleteSpy: jasmine.Spy;
   let dbServiceSpy: jasmine.SpyObj<DbService>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     filesCollectionValueChangesSpy = jasmine.createSpy('valueChanges').and.returnValue(of([{id: 'file-1', name: 'plan.pdf'}]));
     filesCollectionAddSpy = jasmine.createSpy('add').and.resolveTo({id: 'file-2'});
     songDocCollectionSpy = jasmine.createSpy('collection').and.returnValue({
@@ -30,7 +30,7 @@ describe('FileDataService', () => {
     dbServiceSpy = jasmine.createSpyObj<DbService>('DbService', ['doc']);
     dbServiceSpy.doc.and.callFake(songDocSpy);
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       providers: [{provide: DbService, useValue: dbServiceSpy}],
     });
 

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

@@ -1,23 +1,48 @@
 import {TestBed} from '@angular/core/testing';
 import {Storage} from '@angular/fire/storage';
-
-import {FileService} from './file.service';
 import {FileDataService} from './file-data.service';
+import {FileService} from './file.service';
 
 describe('FileService', () => {
   let service: FileService;
+  let fileDataServiceSpy: jasmine.SpyObj<FileDataService>;
+  type FileServiceInternals = FileService & {
+    resolveDownloadUrl: (path: string) => Promise<string>;
+    deleteFromStorage: (path: string) => Promise<void>;
+  };
 
-  beforeEach(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    fileDataServiceSpy = jasmine.createSpyObj<FileDataService>('FileDataService', ['delete']);
+    fileDataServiceSpy.delete.and.resolveTo();
+
+    await TestBed.configureTestingModule({
       providers: [
-        {provide: Storage, useValue: {}},
-        {provide: FileDataService, useValue: {delete: () => Promise.resolve()}},
+        {provide: Storage, useValue: {app: 'test-storage'}},
+        {provide: FileDataService, useValue: fileDataServiceSpy},
       ],
     });
+
     service = TestBed.inject(FileService);
   });
 
   it('should be created', () => {
-    void expect(service).toBeTruthy();
+    expect(service).toBeTruthy();
+  });
+
+  it('should resolve download urls via AngularFire storage helpers', async () => {
+    const resolveSpy = spyOn<any>(service as FileServiceInternals, 'resolveDownloadUrl').and.resolveTo('https://cdn.example/file.pdf');
+
+    await expectAsync(service.getDownloadUrl('songs/song-1/file.pdf').toPromise()).toBeResolvedTo('https://cdn.example/file.pdf');
+
+    expect(resolveSpy).toHaveBeenCalledWith('songs/song-1/file.pdf');
+  });
+
+  it('should delete the file from storage and metadata from firestore', async () => {
+    const deleteFromStorageSpy = spyOn<any>(service as FileServiceInternals, 'deleteFromStorage').and.resolveTo();
+
+    await service.delete('songs/song-1/file.pdf', 'song-1', 'file-1');
+
+    expect(deleteFromStorageSpy).toHaveBeenCalledWith('songs/song-1/file.pdf');
+    expect(fileDataServiceSpy.delete).toHaveBeenCalledWith('song-1', 'file-1');
   });
 });

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

@@ -1,4 +1,4 @@
-import {EnvironmentInjector, Injectable, inject, runInInjectionContext} from '@angular/core';
+import {EnvironmentInjector, inject, Injectable, runInInjectionContext} from '@angular/core';
 import {deleteObject, getDownloadURL, ref, Storage} from '@angular/fire/storage';
 import {from, Observable} from 'rxjs';
 import {FileDataService} from './file-data.service';
@@ -12,11 +12,19 @@ export class FileService {
   private environmentInjector = inject(EnvironmentInjector);
 
   public getDownloadUrl(path: string): Observable<string> {
-    return from(runInInjectionContext(this.environmentInjector, () => getDownloadURL(ref(this.storage, path))));
+    return from(runInInjectionContext(this.environmentInjector, () => this.resolveDownloadUrl(path)));
   }
 
   public delete(path: string, songId: string, fileId: string): void {
-    void runInInjectionContext(this.environmentInjector, () => deleteObject(ref(this.storage, path)));
+    void runInInjectionContext(this.environmentInjector, () => this.deleteFromStorage(path));
     void this.fileDataService.delete(songId, fileId);
   }
+
+  private resolveDownloadUrl(path: string): Promise<string> {
+    return getDownloadURL(ref(this.storage, path));
+  }
+
+  private deleteFromStorage(path: string): Promise<void> {
+    return deleteObject(ref(this.storage, path));
+  }
 }

src/app/modules/songs/services/line.ts

@@ -5,4 +5,5 @@ export interface Line {
   type: LineType;
   text: string;
   chords: Chord[] | null;
+  lineNumber?: number;
 }

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

@@ -1,6 +1,6 @@
 import {TestBed} from '@angular/core/testing';
 import {firstValueFrom, Subject} from 'rxjs';
-import {skip, take, toArray} from 'rxjs/operators';
+import {take, toArray} from 'rxjs/operators';
 import {DbService} from '../../../services/db.service';
 import {SongDataService} from './song-data.service';
 
@@ -14,7 +14,7 @@ describe('SongDataService', () => {
   let colSpy: jasmine.Spy;
   let dbServiceSpy: jasmine.SpyObj<DbService>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     songs$ = new Subject<Array<{id: string; title: string}>>();
     docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
     docDeleteSpy = jasmine.createSpy('delete').and.resolveTo();
@@ -32,7 +32,7 @@ describe('SongDataService', () => {
     dbServiceSpy.doc.and.callFake(docSpy);
     dbServiceSpy.col.and.callFake(colSpy);
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       providers: [{provide: DbService, useValue: dbServiceSpy}],
     });
 

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

@@ -11,13 +11,20 @@ export class SongDataService {
   private dbService = inject(DbService);
 
   private collection = 'songs';
-  public list$: Observable<Song[]> = this.dbService.col$<Song>(this.collection).pipe(
+  private loadedList$: Observable<Song[]> = this.dbService.col$<Song>(this.collection).pipe(
+    shareReplay({
+      bufferSize: 1,
+      refCount: false, // keep the listener alive after first subscription to avoid reloading on navigation
+    })
+  );
+  public list$: Observable<Song[]> = this.loadedList$.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 listLoaded$ = (): Observable<Song[]> => this.loadedList$;
 
   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);

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

@@ -0,0 +1,29 @@
+import {TestBed} from '@angular/core/testing';
+import {firstValueFrom, of} from 'rxjs';
+import {SongService} from './song.service';
+import {SongListResolver} from './song-list.resolver';
+
+describe('SongListResolver', () => {
+  let resolver: SongListResolver;
+  let songServiceSpy: jasmine.SpyObj<SongService>;
+
+  beforeEach(async () => {
+    songServiceSpy = jasmine.createSpyObj<SongService>('SongService', ['listLoaded$']);
+    songServiceSpy.listLoaded$.and.returnValue(of([{id: 'song-1', title: 'Amazing Grace'}]) as never);
+
+    await TestBed.configureTestingModule({
+      providers: [{provide: SongService, useValue: songServiceSpy}],
+    });
+
+    resolver = TestBed.inject(SongListResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+
+  it('should resolve the first emitted song list from the service', async () => {
+    await expectAsync(firstValueFrom(resolver.resolve())).toBeResolvedTo([{id: 'song-1', title: 'Amazing Grace'}] as never);
+    expect(songServiceSpy.listLoaded$).toHaveBeenCalled();
+  });
+});

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

@@ -12,6 +12,6 @@ export class SongListResolver {
   private songService = inject(SongService);
 
   public resolve(): Observable<Song[]> {
-    return this.songService.list$().pipe(take(1));
+    return this.songService.listLoaded$().pipe(take(1));
   }
 }

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

@@ -1,5 +1,5 @@
 import {TestBed} from '@angular/core/testing';
-import {of} from 'rxjs';
+import {firstValueFrom, of} from 'rxjs';
 import {SongDataService} from './song-data.service';
 import {SongService} from './song.service';
 import {UserService} from '../../../services/user/user.service';
@@ -15,7 +15,7 @@ describe('SongService', () => {
     edits: [],
   } as never;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     songDataServiceSpy = jasmine.createSpyObj<SongDataService>('SongDataService', ['read$', 'update$', 'add', 'delete'], {
       list$: of([song]),
     });
@@ -27,7 +27,7 @@ describe('SongService', () => {
     songDataServiceSpy.delete.and.resolveTo();
     userServiceSpy.currentUser.and.resolveTo({name: 'Benjamin'} as never);
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       providers: [
         {provide: SongDataService, useValue: songDataServiceSpy},
         {provide: UserService, useValue: userServiceSpy},
@@ -41,11 +41,8 @@ describe('SongService', () => {
     expect(service).toBeTruthy();
   });
 
-  it('should list songs from the data service', done => {
-    service.list$().subscribe(songs => {
-      expect(songs).toEqual([song]);
-      done();
-    });
+  it('should list songs from the data service', async () => {
+    await expectAsync(firstValueFrom(service.list$())).toBeResolvedTo([song]);
   });
 
   it('should delegate reads to the data service', async () => {

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

@@ -3,7 +3,7 @@ import {firstValueFrom, Observable} from 'rxjs';
 import {Song} from './song';
 import {SongDataService} from './song-data.service';
 import {UserService} from '../../../services/user/user.service';
-import {Timestamp} from '@angular/fire/firestore';
+import {Timestamp} from 'firebase/firestore';
 
 // declare let importCCLI: any;
 
@@ -26,6 +26,7 @@ export class SongService {
   public static LEGAL_TYPE: SongLegalType[] = ['open', 'allowed'];
 
   public list$ = (): Observable<Song[]> => this.songDataService.list$; //.pipe(tap(_ => (this.list = _)));
+  public listLoaded$ = (): Observable<Song[]> => this.songDataService.listLoaded$();
   public read$ = (songId: string): Observable<Song | null> => this.songDataService.read$(songId);
   public read = (songId: string): Promise<Song | null> => firstValueFrom(this.read$(songId));
 

src/app/modules/songs/services/text-rendering.service.spec.ts

@@ -2,8 +2,22 @@ import {TestBed} from '@angular/core/testing';
 import {TextRenderingService} from './text-rendering.service';
 import {LineType} from './line-type';
 import {SectionType} from './section-type';
+import {TransposeService} from './transpose.service';
+import {ChordAddDescriptor} from './chord';
 
 describe('TextRenderingService', () => {
+  const descriptor = (raw: string, partial: Partial<ChordAddDescriptor>) =>
+    jasmine.objectContaining({
+      raw,
+      quality: null,
+      extensions: [],
+      additions: [],
+      suspensions: [],
+      alterations: [],
+      modifiers: [],
+      ...partial,
+    });
+
   const testText = `Strophe
 C D E F G A H
 Text Line 1-1
@@ -24,13 +38,14 @@ Bridge
 Cool bridge without any chords
 `;
 
-  beforeEach(() => void TestBed.configureTestingModule({}));
+  beforeEach(async () => await TestBed.configureTestingModule({}));
 
   it('should be created', () => {
     const service: TextRenderingService = TestBed.inject(TextRenderingService);
     void expect(service).toBeTruthy();
   });
 
+  describe('section parsing', () => {
     it('should parse section types', () => {
       const service: TextRenderingService = TestBed.inject(TextRenderingService);
       const sections = service.parse(testText, null);
@@ -44,6 +59,53 @@ Cool bridge without any chords
       void expect(sections[3].number).toBe(0);
     });
 
+    it('should accept section headers with numbering and lowercase letters', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `strophe 1
+Text A
+Refrain 2
+Text B`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections.length).toBe(2);
+      void expect(sections[0].type).toBe(SectionType.Verse);
+      void expect(sections[1].type).toBe(SectionType.Chorus);
+    });
+
+    it('should return an empty array for empty input', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+
+      void expect(service.parse('', null)).toEqual([]);
+    });
+
+    it('should ignore content before the first recognized section header', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Intro ohne Section
+Noch eine Zeile
+Strophe
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections.length).toBe(1);
+      void expect(sections[0].lines.length).toBe(1);
+      void expect(sections[0].lines[0].text).toBe('Text');
+    });
+
+    it('should support windows line endings', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = 'Strophe\r\nC D E\r\nText\r\nRefrain\r\nG A H';
+
+      const sections = service.parse(text, null);
+
+      void expect(sections.length).toBe(2);
+      void expect(sections[0].lines[0].type).toBe(LineType.chord);
+      void expect(sections[1].lines[0].type).toBe(LineType.chord);
+    });
+  });
+
+  describe('comments and text lines', () => {
     it('should parse text lines', () => {
       const service: TextRenderingService = TestBed.inject(TextRenderingService);
       const sections = service.parse(testText, null);
@@ -61,6 +123,66 @@ Cool bridge without any chords
       void expect(sections[3].lines[0].text).toBe('Cool bridge without any chords');
     });
 
+    it('should ignore indented comment lines when comments are disabled', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+  # hidden comment
+Text`;
+
+      const sections = service.parse(text, null, false);
+
+      void expect(sections[0].lines.length).toBe(1);
+      void expect(sections[0].lines[0].text).toBe('Text');
+    });
+
+    it('should keep comment lines when comments are enabled', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+# Kommentar
+Text`;
+
+      const sections = service.parse(text, null, true);
+
+      void expect(sections[0].lines.length).toBe(2);
+      void expect(sections[0].lines[0].text).toBe('# Kommentar');
+      void expect(sections[0].lines[1].text).toBe('Text');
+    });
+
+    it('should not classify ordinary text with isolated note letters as a chord line', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Anna geht heute baden
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].type).toBe(LineType.text);
+      void expect(sections[0].lines[0].chords).toBeNull();
+    });
+
+    it('should treat compact prose-like tokens as text when the chord ratio is too low', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Das ist C nicht D sondern Text
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].type).toBe(LineType.text);
+      void expect(sections[0].lines[0].chords).toBeNull();
+    });
+
+    it('should ignore prose lines even if they contain note-like words', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Heute singt Fis nicht mit
+Text`;
+
+      void expect(service.validateChordNotation(text)).toEqual([]);
+    });
+  });
+
+  describe('chord parsing', () => {
     it('should parse chord lines', () => {
       const service: TextRenderingService = TestBed.inject(TextRenderingService);
       const sections = service.parse(testText, null);
@@ -73,16 +195,15 @@ Cool bridge without any chords
       void expect(sections[1].lines[2].type).toBe(LineType.chord);
       void expect(sections[1].lines[2].text).toBe(' a d e f g a h c b');
       void expect(sections[2].lines[0].type).toBe(LineType.chord);
-    void expect(sections[2].lines[0].text).toBe('c c♯ d♭ c7   cmaj7    c/e');
+      void expect(sections[2].lines[0].text).toBe('c c# db c7   cmaj7    c/e');
 
-    // c c# db c7   cmaj7    c/e
       void expect(sections[2].lines[0].chords).toEqual([
-      {chord: 'c', length: 1, position: 0, add: null, slashChord: null},
-      {chord: 'c#', length: 2, position: 2, add: null, slashChord: null},
-      {chord: 'db', length: 2, position: 5, add: null, slashChord: null},
-      {chord: 'c', length: 2, position: 8, add: '7', slashChord: null},
-      {chord: 'c', length: 5, position: 13, add: 'maj7', slashChord: null},
-      {chord: 'c', length: 3, position: 22, add: null, slashChord: 'e'},
+        jasmine.objectContaining({chord: 'c', length: 1, position: 0, add: null, slashChord: null, addDescriptor: null}),
+        jasmine.objectContaining({chord: 'c#', length: 2, position: 2, add: null, slashChord: null, addDescriptor: null}),
+        jasmine.objectContaining({chord: 'db', length: 2, position: 5, add: null, slashChord: null, addDescriptor: null}),
+        jasmine.objectContaining({chord: 'c', length: 2, position: 8, add: '7', slashChord: null, addDescriptor: descriptor('7', {extensions: ['7']})}),
+        jasmine.objectContaining({chord: 'c', length: 5, position: 13, add: 'maj7', slashChord: null, addDescriptor: descriptor('maj7', {quality: 'major', extensions: ['7']})}),
+        jasmine.objectContaining({chord: 'c', length: 3, position: 22, add: null, slashChord: 'e', addDescriptor: null}),
       ]);
     });
 
@@ -97,4 +218,280 @@ text`;
       void expect(sections[0].lines[1].type).toBe(LineType.text);
       void expect(sections[0].lines[1].text).toBe('text');
     });
+
+    it('should preserve exact chord positions for spaced chord lines', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+C       G/B      Am
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].chords).toEqual([
+        jasmine.objectContaining({chord: 'C', length: 1, position: 0, add: null, slashChord: null, addDescriptor: null}),
+        jasmine.objectContaining({chord: 'G', length: 3, position: 8, add: null, slashChord: 'B', addDescriptor: null}),
+        jasmine.objectContaining({chord: 'A', length: 2, position: 17, add: 'm', slashChord: null, addDescriptor: descriptor('m', {quality: 'minor'})}),
+      ]);
+    });
+
+    it('should parse common international chord suffixes and slash chords after the suffix', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Cmaj7 Dm7 Gsus4 Aadd9 Cmaj7/E
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].type).toBe(LineType.chord);
+      void expect(sections[0].lines[0].chords).toEqual([
+        jasmine.objectContaining({chord: 'C', length: 5, position: 0, add: 'maj7', slashChord: null, addDescriptor: descriptor('maj7', {quality: 'major', extensions: ['7']})}),
+        jasmine.objectContaining({chord: 'D', length: 3, position: 6, add: 'm7', slashChord: null, addDescriptor: descriptor('m7', {quality: 'minor', extensions: ['7']})}),
+        jasmine.objectContaining({chord: 'G', length: 5, position: 10, add: 'sus4', slashChord: null, addDescriptor: descriptor('sus4', {suspensions: ['4']})}),
+        jasmine.objectContaining({chord: 'A', length: 5, position: 16, add: 'add9', slashChord: null, addDescriptor: descriptor('add9', {additions: ['9']})}),
+        jasmine.objectContaining({chord: 'C', length: 7, position: 22, add: 'maj7', slashChord: 'E', addDescriptor: descriptor('maj7', {quality: 'major', extensions: ['7']})}),
+      ]);
+    });
+
+    it('should parse german chord suffixes', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Hmoll Edur Cverm Faug
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].type).toBe(LineType.chord);
+      void expect(sections[0].lines[0].chords).toEqual([
+        jasmine.objectContaining({chord: 'H', length: 5, position: 0, add: 'moll', slashChord: null, addDescriptor: descriptor('moll', {quality: 'minor'})}),
+        jasmine.objectContaining({chord: 'E', length: 4, position: 6, add: 'dur', slashChord: null, addDescriptor: descriptor('dur', {quality: 'major'})}),
+        jasmine.objectContaining({chord: 'C', length: 5, position: 11, add: 'verm', slashChord: null, addDescriptor: descriptor('verm', {quality: 'diminished'})}),
+        jasmine.objectContaining({chord: 'F', length: 4, position: 17, add: 'aug', slashChord: null, addDescriptor: descriptor('aug', {quality: 'augmented'})}),
+      ]);
+    });
+
+    it('should parse numeric and altered chord suffixes', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+C7 D9 E11 F13 Gadd#9 A7-5
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].chords).toEqual([
+        jasmine.objectContaining({chord: 'C', length: 2, position: 0, add: '7', slashChord: null, addDescriptor: descriptor('7', {extensions: ['7']})}),
+        jasmine.objectContaining({chord: 'D', length: 2, position: 3, add: '9', slashChord: null, addDescriptor: descriptor('9', {extensions: ['9']})}),
+        jasmine.objectContaining({chord: 'E', length: 3, position: 6, add: '11', slashChord: null, addDescriptor: descriptor('11', {extensions: ['11']})}),
+        jasmine.objectContaining({chord: 'F', length: 3, position: 10, add: '13', slashChord: null, addDescriptor: descriptor('13', {extensions: ['13']})}),
+        jasmine.objectContaining({chord: 'G', length: 6, position: 14, add: 'add#9', slashChord: null, addDescriptor: descriptor('add#9', {additions: ['#9']})}),
+        jasmine.objectContaining({chord: 'A', length: 4, position: 21, add: '7-5', slashChord: null, addDescriptor: descriptor('7-5', {extensions: ['7'], alterations: ['-5']})}),
+      ]);
+    });
+
+    it('should parse lowercase roots with suffixes and slash chords', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+emoll d/F# cmaj7/e
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].chords).toEqual([
+        jasmine.objectContaining({chord: 'e', length: 5, position: 0, add: 'moll', slashChord: null, addDescriptor: descriptor('moll', {quality: 'minor'})}),
+        jasmine.objectContaining({chord: 'd', length: 4, position: 6, add: null, slashChord: 'F#', addDescriptor: null}),
+        jasmine.objectContaining({chord: 'c', length: 7, position: 11, add: 'maj7', slashChord: 'e', addDescriptor: descriptor('maj7', {quality: 'major', extensions: ['7']})}),
+      ]);
+    });
+
+    it('should expose semantic descriptors for complex chord additions', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Cmaj7(add9) Dm7 Gsus4 A7-5
+Text`;
+
+      const sections = service.parse(text, null);
+      const chords = sections[0].lines[0].chords ?? [];
+
+      void expect(chords[0].addDescriptor).toEqual(
+        descriptor('maj7(add9)', {
+          quality: 'major',
+          extensions: ['7'],
+          modifiers: ['(add9)'],
+        })
+      );
+      void expect(chords[1].addDescriptor).toEqual(descriptor('m7', {quality: 'minor', extensions: ['7']}));
+      void expect(chords[2].addDescriptor).toEqual(descriptor('sus4', {suspensions: ['4']}));
+      void expect(chords[3].addDescriptor).toEqual(descriptor('7-5', {extensions: ['7'], alterations: ['-5']}));
+    });
+
+    it('should not misinterpret modifier parentheses as group wrappers', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Cmaj7(add9)
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].text).toBe('Cmaj7(add9)');
+      void expect(sections[0].lines[0].chords).toEqual([
+        jasmine.objectContaining({
+          chord: 'C',
+          length: 11,
+          position: 0,
+          add: 'maj7(add9)',
+          slashChord: null,
+          addDescriptor: descriptor('maj7(add9)', {
+            quality: 'major',
+            extensions: ['7'],
+            modifiers: ['(add9)'],
+          }),
+        }),
+      ]);
+      void expect(service.validateChordNotation(text)).toEqual([]);
+    });
+  });
+
+  describe('parenthesized groups', () => {
+    it('should keep parentheses around alternative chord groups', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+C F G e C  (F G)
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].type).toBe(LineType.chord);
+      void expect(sections[0].lines[0].text).toBe('C F G e C  (F G)');
+      void expect(sections[0].lines[0].chords).toEqual([
+        jasmine.objectContaining({chord: 'C', length: 1, position: 0, add: null, slashChord: null, addDescriptor: null}),
+        jasmine.objectContaining({chord: 'F', length: 1, position: 2, add: null, slashChord: null, addDescriptor: null}),
+        jasmine.objectContaining({chord: 'G', length: 1, position: 4, add: null, slashChord: null, addDescriptor: null}),
+        jasmine.objectContaining({chord: 'e', length: 1, position: 6, add: null, slashChord: null, addDescriptor: null}),
+        jasmine.objectContaining({chord: 'C', length: 1, position: 8, add: null, slashChord: null, addDescriptor: null}),
+        jasmine.objectContaining({chord: 'F', length: 2, position: 11, add: null, slashChord: null, addDescriptor: null, prefix: '('}),
+        jasmine.objectContaining({chord: 'G', length: 2, position: 14, add: null, slashChord: null, addDescriptor: null, suffix: ')'}),
+      ]);
+    });
+
+    it('should transpose multiple chords inside a parenthesized group', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+C F G e C  (F G)
+Text`;
+
+      const sections = service.parse(text, {baseKey: 'C', targetKey: 'D'});
+
+      void expect(sections[0].lines[0].type).toBe(LineType.chord);
+      void expect(sections[0].lines[0].text).toBe('D G A f♯D  (G A)');
+    });
+  });
+
+  describe('transpose integration', () => {
+    it('should call the transpose service when a transpose mode is provided', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const transposeService = TestBed.inject(TransposeService);
+      const transposeSpy = spyOn(transposeService, 'transpose').and.callThrough();
+      const renderSpy = spyOn(transposeService, 'renderChords').and.callThrough();
+      const text = `Strophe
+C D E
+Text`;
+
+      service.parse(text, {baseKey: 'C', targetKey: 'D'});
+
+      void expect(transposeSpy).toHaveBeenCalledTimes(2);
+      void expect(renderSpy).not.toHaveBeenCalled();
+    });
+
+    it('should use renderChords when no transpose mode is provided', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const transposeService = TestBed.inject(TransposeService);
+      const transposeSpy = spyOn(transposeService, 'transpose').and.callThrough();
+      const renderSpy = spyOn(transposeService, 'renderChords').and.callThrough();
+      const text = `Strophe
+C D E
+Text`;
+
+      service.parse(text, null);
+
+      void expect(renderSpy).toHaveBeenCalledTimes(2);
+      void expect(transposeSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('notation validation', () => {
+    it('should report non-canonical sharp and flat aliases on chord lines', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Fis Hmoll Des/Fis
+Text`;
+
+      void expect(service.validateChordNotation(text)).toEqual([]);
+    });
+
+    it('should report uppercase minor and lowercase major chord notation', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Am Dm7 cdur C
+Text`;
+
+      void expect(service.validateChordNotation(text)).toEqual([
+        jasmine.objectContaining({lineNumber: 2, token: 'Am', suggestion: 'a', reason: 'minor_format'}),
+        jasmine.objectContaining({lineNumber: 2, token: 'Dm7', suggestion: 'd7', reason: 'minor_format'}),
+        jasmine.objectContaining({lineNumber: 2, token: 'cdur', suggestion: 'C', reason: 'major_format'}),
+      ]);
+    });
+
+    it('should keep slash bass notes uppercase in canonical minor suggestions', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+Am/C# Dm7/F#
+Text`;
+
+      void expect(service.validateChordNotation(text)).toEqual([
+        jasmine.objectContaining({lineNumber: 2, token: 'Am/C#', suggestion: 'a/C#', reason: 'minor_format'}),
+        jasmine.objectContaining({lineNumber: 2, token: 'Dm7/F#', suggestion: 'd7/F#', reason: 'minor_format'}),
+      ]);
+    });
+
+    it('should keep mostly-chord lines with unknown tokens in chord mode', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+C Es G
+Text`;
+
+      const sections = service.parse(text, null);
+
+      void expect(sections[0].lines[0].type).toBe(LineType.chord);
+      void expect(sections[0].lines[0].text).toBe('C Es G');
+      void expect(service.validateChordNotation(text)).toEqual([jasmine.objectContaining({lineNumber: 2, token: 'Es', reason: 'unknown_token', suggestion: null})]);
+    });
+
+    it('should flag unknown tokens on mostly chord lines', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = `Strophe
+C Foo G a
+Text`;
+
+      void expect(service.validateChordNotation(text)).toEqual([jasmine.objectContaining({lineNumber: 2, token: 'Foo', reason: 'unknown_token', suggestion: null})]);
+    });
+
+    it('should reject tabs on chord lines', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = 'Strophe\nC\tG\ta\nText';
+
+      void expect(service.validateChordNotation(text)).toEqual(expect.arrayContaining([
+        jasmine.objectContaining({
+          lineNumber: 2,
+          token: '\t',
+          reason: 'tab_character',
+        }),
+      ]));
+    });
+
+    it('should not flag tabs on non chord lines', () => {
+      const service: TextRenderingService = TestBed.inject(TextRenderingService);
+      const text = 'Strophe\nDas\tist normaler Text\nText';
+
+      void expect(service.validateChordNotation(text)).toEqual([]);
+    });
+  });
 });

src/app/modules/songs/services/text-rendering.service.ts

@@ -4,52 +4,168 @@ import {TransposeMode} from './transpose-mode';
 import {SectionType} from './section-type';
 import {Section} from './section';
 import {LineType} from './line-type';
-import {Chord} from './chord';
+import {Chord, ChordAddDescriptor, ChordValidationIssue} from './chord';
 import {Line} from './line';
 
+type ChordRootDefinition = {
+  canonical: string;
+  aliases: string[];
+};
+
+const CHORD_ROOT_DEFINITIONS: readonly ChordRootDefinition[] = [
+  {canonical: 'C#', aliases: ['Cis']},
+  {canonical: 'Db', aliases: ['Des']},
+  {canonical: 'D#', aliases: ['Dis']},
+  {canonical: 'Eb', aliases: ['Es']},
+  {canonical: 'F#', aliases: ['Fis']},
+  {canonical: 'Gb', aliases: ['Ges']},
+  {canonical: 'G#', aliases: ['Gis']},
+  {canonical: 'Ab', aliases: ['As']},
+  {canonical: 'A#', aliases: ['Ais']},
+  {canonical: 'C', aliases: []},
+  {canonical: 'D', aliases: []},
+  {canonical: 'E', aliases: []},
+  {canonical: 'F', aliases: []},
+  {canonical: 'G', aliases: []},
+  {canonical: 'A', aliases: []},
+  {canonical: 'B', aliases: ['Hb']},
+  {canonical: 'H', aliases: []},
+  {canonical: 'c#', aliases: ['cis']},
+  {canonical: 'db', aliases: ['des']},
+  {canonical: 'd#', aliases: ['dis']},
+  {canonical: 'eb', aliases: ['es']},
+  {canonical: 'f#', aliases: ['fis']},
+  {canonical: 'gb', aliases: ['ges']},
+  {canonical: 'g#', aliases: ['gis']},
+  {canonical: 'ab', aliases: ['as']},
+  {canonical: 'a#', aliases: ['ais']},
+  {canonical: 'c', aliases: []},
+  {canonical: 'd', aliases: []},
+  {canonical: 'e', aliases: []},
+  {canonical: 'f', aliases: []},
+  {canonical: 'g', aliases: []},
+  {canonical: 'a', aliases: []},
+  {canonical: 'b', aliases: ['hb']},
+  {canonical: 'h', aliases: []},
+] as const;
+
+const CANONICAL_CHORD_ROOTS = CHORD_ROOT_DEFINITIONS.map(entry => entry.canonical);
+const ALTERNATIVE_CHORD_ROOTS = CHORD_ROOT_DEFINITIONS.reduce<Record<string, string>>((aliases, entry) => {
+  entry.aliases.forEach(alias => {
+    aliases[alias] = entry.canonical;
+  });
+  return aliases;
+}, {});
+
+interface ParsedValidationToken {
+  prefix: string;
+  root: string;
+  suffix: string;
+  slashChord: string | null;
+  rootWasAlias: boolean;
+  slashWasAlias: boolean;
+  tokenSuffix: string;
+}
+
+interface ChordLineValidationResult {
+  chords: Chord[];
+  issues: ChordValidationIssue[];
+  isStrictChordLine: boolean;
+  isChordLike: boolean;
+}
+
+interface ParsedTokenCandidate {
+  token: string;
+  parsed: ParsedValidationToken | null;
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class TextRenderingService {
   private transposeService = inject(TransposeService);
 
-  private regexSection = /(Strophe|Refrain|Bridge)/;
+  private readonly regexSection = /^\s*(Strophe|Refrain|Bridge)\b/i;
+  private readonly chordRoots = CANONICAL_CHORD_ROOTS;
+  private readonly suffixKeywords = ['moll', 'verm', 'maj', 'min', 'dur', 'dim', 'aug', 'sus', 'add', 'm'] as const;
+  private readonly suffixChars = new Set(['#', 'b', '+', '-', '(', ')']);
+  private readonly alternativeChordRoots = ALTERNATIVE_CHORD_ROOTS;
 
   public parse(text: string, transpose: TransposeMode | null, withComments = true): Section[] {
     if (!text) {
       return [];
     }
-    const arrayOfLines = text.split(/\r?\n/).filter(_ => _ && (!_.startsWith('#') || withComments));
-    const indices = {
+
+    const indices: Record<SectionType, number> = {
       [SectionType.Bridge]: 0,
       [SectionType.Chorus]: 0,
       [SectionType.Verse]: 0,
+      [SectionType.Comment]: 0,
     };
-    return arrayOfLines.reduce((array, line) => {
+    const sections: Section[] = [];
+
+    for (const [lineIndex, line] of text.split(/\r?\n/).entries()) {
+      if (!line || this.isCommentLine(line, withComments)) {
+        continue;
+      }
+
       const type = this.getSectionTypeOfLine(line);
-      if (this.regexSection.exec(line) && type !== null) {
-        const section: Section = {
+      if (type !== null) {
+        sections.push({
           type,
           number: indices[type]++,
           lines: [],
-        };
-        return [...array, section];
-      }
-      const lineOfLineText = this.getLineOfLineText(line, transpose);
-      if (array.length === 0) return array;
-      if (lineOfLineText) array[array.length - 1].lines.push(lineOfLineText);
-      return array;
-    }, [] as Section[]);
+        });
+        continue;
       }
 
-  private getLineOfLineText(text: string, transpose: TransposeMode | null): Line | null {
+      if (sections.length === 0) {
+        continue;
+      }
+
+      const renderedLine = this.getLineOfLineText(line, transpose, lineIndex + 1);
+      if (renderedLine) {
+        sections[sections.length - 1].lines.push(renderedLine);
+      }
+    }
+
+    return sections;
+  }
+
+  public validateChordNotation(text: string, withComments = true): ChordValidationIssue[] {
+    if (!text) {
+      return [];
+    }
+
+    const issues: ChordValidationIssue[] = [];
+    const lines = text.split(/\r?\n/);
+
+    lines.forEach((line, lineIndex) => {
+      if (!line || this.isCommentLine(line, withComments) || this.getSectionTypeOfLine(line) !== null) {
+        return;
+      }
+
+      const validationResult = this.getChordLineValidationResult(line, lineIndex + 1);
+      issues.push(...validationResult.issues);
+    });
+
+    return issues;
+  }
+
+  private getLineOfLineText(text: string, transpose: TransposeMode | null, lineNumber?: number): Line | null {
     if (!text) return null;
 
-    const cords = this.readChords(text);
-    const hasMatches = cords.length > 0;
-    const type = hasMatches ? LineType.chord : LineType.text;
+    const validationResult = lineNumber ? this.getChordLineValidationResult(text, lineNumber) : {chords: [], issues: [], isStrictChordLine: false, isChordLike: false};
+    const validationIssues = validationResult.issues;
+    const hasMatches = validationResult.isStrictChordLine;
+    const isChordLikeLine = hasMatches || validationResult.isChordLike;
+    const type = isChordLikeLine ? LineType.chord : LineType.text;
+
+    const line: Line = {type, text, chords: hasMatches ? validationResult.chords : null, lineNumber};
+    if (validationIssues.length > 0 || (!hasMatches && isChordLikeLine)) {
+      return line;
+    }
 
-    const line: Line = {type, text, chords: hasMatches ? cords : null};
     return transpose !== null && transpose !== undefined ? this.transposeService.transpose(line, transpose.baseKey, transpose.targetKey) : this.transposeService.renderChords(line);
   }
 
@@ -61,48 +177,548 @@ export class TextRenderingService {
     if (!match || match.length < 2) {
       return null;
     }
-    const typeString = match[1];
+    const typeString = match[1].toLowerCase();
     switch (typeString) {
-      case 'Strophe':
+      case 'strophe':
         return SectionType.Verse;
-      case 'Refrain':
+      case 'refrain':
         return SectionType.Chorus;
-      case 'Bridge':
+      case 'bridge':
         return SectionType.Bridge;
     }
 
     return null;
   }
 
-  private readChords(chordLine: string): Chord[] {
-    let match: string[] | null;
+  private getParsedChords(chordLine: string): Chord[] {
     const chords: Chord[] = [];
+    const tokens = chordLine.match(/\S+/g) ?? [];
 
-    // https://regex101.com/r/68jMB8/5
-    const regex =
-      /(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h)(\/(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h))?(\d+|maj7)?/gm;
-
-    while ((match = regex.exec(chordLine)) !== null) {
-      const chord: Chord = {
-        chord: match[1],
-        length: match[0].length,
-        position: regex.lastIndex - match[0].length,
-        slashChord: null,
-        add: null,
-      };
-      if (match[3]) {
-        chord.slashChord = match[3];
-      }
-      if (match[4]) {
-        chord.add = match[4];
-      }
-
+    for (const token of tokens) {
+      const position = chordLine.indexOf(token, chords.length > 0 ? chords[chords.length - 1].position + chords[chords.length - 1].length : 0);
+      const chord = this.parseChordToken(token, position);
+      if (chord) {
         chords.push(chord);
       }
+    }
 
-    const chordCount = chords.reduce((acc: number, cur: Chord) => acc + cur.length, 0);
-    const lineCount = chordLine.replace(/\s/g, '').length;
-    const isChrod = chordCount * 1.2 > lineCount;
-    return isChrod ? chords : [];
+    return chords;
+  }
+
+  private getChordLineValidationResult(line: string, lineNumber: number): ChordLineValidationResult {
+    const tokens: string[] = line.match(/\S+/g) ?? [];
+    const chords = this.getParsedChords(line);
+    const parsedTokens: ParsedTokenCandidate[] = tokens.map(token => ({
+      token,
+      parsed: this.parseValidationToken(token),
+    }));
+
+    const recognizedTokens = parsedTokens.filter((entry): entry is {token: string; parsed: ParsedValidationToken} => entry.parsed !== null);
+
+    const strictChordCount = chords.reduce((sum, chord) => sum + chord.length, 0);
+    const parsedLength = recognizedTokens.reduce((sum, entry) => sum + entry.token.length, 0);
+    const compactLineLength = line.replace(/\s/g, '').length;
+    const isStrictChordLine = compactLineLength > 0 && strictChordCount * 1.2 > compactLineLength;
+    const strictlyChordLike = compactLineLength > 0 && parsedLength * 1.2 > compactLineLength;
+    const heuristicallyChordLike = tokens.length >= 2 && recognizedTokens.length >= Math.ceil(tokens.length * 0.6);
+    const isChordLike = strictlyChordLike || heuristicallyChordLike;
+
+    if (!isChordLike) {
+      return {chords, issues: [], isStrictChordLine, isChordLike: false};
+    }
+
+    const issues: ChordValidationIssue[] = [];
+    if (line.includes('\t')) {
+      issues.push(this.createTabCharacterIssue(line, lineNumber));
+    }
+
+    return {
+      chords,
+      issues: [
+        ...issues,
+        ...parsedTokens
+          .map(entry => {
+            if (!entry.parsed) {
+              return this.createUnknownTokenIssue(line, lineNumber, entry.token);
+            }
+
+            return this.createValidationIssue(line, lineNumber, entry.token, entry.parsed);
+          })
+          .filter((issue): issue is ChordValidationIssue => issue !== null),
+      ],
+      isStrictChordLine,
+      isChordLike: true,
+    };
+  }
+
+  private isCommentLine(line: string, withComments: boolean): boolean {
+    return !withComments && line.trimStart().startsWith('#');
+  }
+
+  private parseChordToken(token: string, position: number): Chord | null {
+    const decoratedToken = this.splitTokenDecorators(token);
+    const root = this.readChordRoot(decoratedToken.core, 0);
+    if (!root) {
+      return null;
+    }
+
+    let cursor = root.length;
+    const suffix = this.readChordSuffix(decoratedToken.core, cursor);
+    cursor += suffix.length;
+
+    let slashChord: string | null = null;
+    if (decoratedToken.core[cursor] === '/') {
+      const slash = this.readChordRoot(decoratedToken.core, cursor + 1);
+      if (!slash) {
+        return null;
+      }
+      slashChord = slash;
+      cursor += 1 + slash.length;
+    }
+
+    if (cursor !== decoratedToken.core.length) {
+      return null;
+    }
+
+    return {
+      chord: root,
+      length: token.length,
+      position,
+      slashChord,
+      add: suffix || null,
+      addDescriptor: this.parseChordAddDescriptor(suffix || null),
+      prefix: decoratedToken.prefix || undefined,
+      suffix: decoratedToken.suffix || undefined,
+    };
+  }
+
+  private readChordRoot(token: string, start: number): string | null {
+    return this.chordRoots.find(root => token.startsWith(root, start)) ?? null;
+  }
+
+  private readValidationChordRoot(token: string, start: number): {root: string; length: number; wasAlias: boolean} | null {
+    const directMatch = this.readChordRoot(token, start);
+    if (directMatch) {
+      return {root: directMatch, length: directMatch.length, wasAlias: false};
+    }
+
+    const aliasMatch = Object.entries(this.alternativeChordRoots).find(([alias]) => token.startsWith(alias, start));
+    if (!aliasMatch) {
+      return null;
+    }
+
+    return {root: aliasMatch[1], length: aliasMatch[0].length, wasAlias: true};
+  }
+
+  private readChordSuffix(token: string, start: number): string {
+    let cursor = start;
+    let suffix = '';
+
+    while (cursor < token.length) {
+      const keyword = this.suffixKeywords.find(entry => token.startsWith(entry, cursor));
+      if (keyword) {
+        suffix += keyword;
+        cursor += keyword.length;
+        continue;
+      }
+
+      const char = token[cursor];
+      if (this.isDigit(char) || this.suffixChars.has(char)) {
+        suffix += char;
+        cursor += 1;
+        continue;
+      }
+
+      break;
+    }
+
+    return suffix;
+  }
+
+  private readValidationChordSuffix(token: string, start: number): string {
+    let cursor = start;
+    let suffix = '';
+
+    while (cursor < token.length) {
+      const keyword = this.suffixKeywords.find(entry => token.slice(cursor, cursor + entry.length).toLowerCase() === entry);
+      if (keyword) {
+        suffix += token.slice(cursor, cursor + keyword.length);
+        cursor += keyword.length;
+        continue;
+      }
+
+      const char = token[cursor];
+      if (this.isDigit(char) || this.suffixChars.has(char)) {
+        suffix += char;
+        cursor += 1;
+        continue;
+      }
+
+      break;
+    }
+
+    return suffix;
+  }
+
+  private isDigit(char: string | undefined): boolean {
+    return !!char && char >= '0' && char <= '9';
+  }
+
+  private parseValidationToken(token: string): ParsedValidationToken | null {
+    const decoratedToken = this.splitTokenDecorators(token);
+    const root = this.readValidationChordRoot(decoratedToken.core, 0);
+    if (!root) {
+      return null;
+    }
+
+    let cursor = root.length;
+    const suffix = this.readValidationChordSuffix(decoratedToken.core, cursor);
+    cursor += suffix.length;
+
+    let slashChord: string | null = null;
+    let slashWasAlias = false;
+    if (decoratedToken.core[cursor] === '/') {
+      const slash = this.readValidationChordRoot(decoratedToken.core, cursor + 1);
+      if (!slash) {
+        return null;
+      }
+      slashChord = slash.root;
+      slashWasAlias = slash.wasAlias;
+      cursor += 1 + slash.length;
+    }
+
+    if (cursor !== decoratedToken.core.length) {
+      return null;
+    }
+
+    return {
+      prefix: decoratedToken.prefix,
+      root: root.root,
+      suffix,
+      slashChord,
+      rootWasAlias: root.wasAlias,
+      slashWasAlias,
+      tokenSuffix: decoratedToken.suffix,
+    };
+  }
+
+  private createValidationIssue(line: string, lineNumber: number, token: string, parsed: ParsedValidationToken): ChordValidationIssue | null {
+    const suggestion = this.getCanonicalChordToken(parsed);
+    if (suggestion === token) {
+      return null;
+    }
+
+    if (parsed.rootWasAlias || parsed.slashWasAlias) {
+      return {
+        lineNumber,
+        lineText: line,
+        token,
+        suggestion,
+        reason: 'alias',
+        message: `Bitte #/b statt is/es verwenden: ${suggestion}`,
+      };
+    }
+
+    const descriptor = this.parseChordAddDescriptor(parsed.suffix);
+    if (descriptor?.quality === 'minor' && this.isMajorRoot(parsed.root)) {
+      return {
+        lineNumber,
+        lineText: line,
+        token,
+        suggestion,
+        reason: 'minor_format',
+        message: `Mollakkorde bitte mit kleinem Grundton schreiben: ${suggestion}`,
+      };
+    }
+
+    if (this.isMinorRoot(parsed.root) && descriptor?.quality === 'major') {
+      return {
+        lineNumber,
+        lineText: line,
+        token,
+        suggestion,
+        reason: 'major_format',
+        message: `Durakkorde bitte mit grossem Grundton schreiben: ${suggestion}`,
+      };
+    }
+
+    if (parsed.suffix !== this.normalizeSuffix(parsed.suffix)) {
+      return {
+        lineNumber,
+        lineText: line,
+        token,
+        suggestion,
+        reason: 'invalid_suffix',
+        message: `Bitte die vorgegebene Akkordschreibweise verwenden: ${suggestion}`,
+      };
+    }
+
+    return null;
+  }
+
+  private createUnknownTokenIssue(line: string, lineNumber: number, token: string): ChordValidationIssue {
+    return {
+      lineNumber,
+      lineText: line,
+      token,
+      suggestion: null,
+      reason: 'unknown_token',
+      message: 'Unbekannter Akkord oder falsche Schreibweise',
+    };
+  }
+
+  private createTabCharacterIssue(line: string, lineNumber: number): ChordValidationIssue {
+    return {
+      lineNumber,
+      lineText: line,
+      token: '\t',
+      suggestion: null,
+      reason: 'tab_character',
+      message: 'Tabulatoren sind in Akkordzeilen nicht erlaubt, bitte Leerzeichen verwenden',
+    };
+  }
+
+  private getCanonicalChordToken(parsed: ParsedValidationToken): string {
+    const descriptor = this.parseChordAddDescriptor(parsed.suffix);
+    const normalizedSuffix = this.normalizeSuffix(parsed.suffix);
+
+    let root = parsed.root;
+    let suffix = normalizedSuffix;
+
+    if (descriptor?.quality === 'minor') {
+      root = this.toMinorRoot(root);
+      suffix = this.stripLeadingMinorMarker(normalizedSuffix);
+    } else if (descriptor?.quality === 'major') {
+      root = this.toMajorRoot(root);
+      suffix = this.stripLeadingDurMarker(normalizedSuffix);
+    }
+
+    const slashChord = parsed.slashChord ? this.toMajorRoot(parsed.slashChord) : null;
+
+    return parsed.prefix + root + suffix + (slashChord ? `/${slashChord}` : '') + parsed.tokenSuffix;
+  }
+
+  private normalizeSuffix(suffix: string): string {
+    if (!suffix) {
+      return suffix;
+    }
+
+    let rest = suffix;
+    let normalized = '';
+
+    const prefixMap: Array<[string, string]> = [
+      ['moll', 'moll'],
+      ['min', 'min'],
+      ['maj', 'maj'],
+      ['dur', 'dur'],
+      ['dim', 'dim'],
+      ['verm', 'verm'],
+      ['aug', 'aug'],
+      ['sus', 'sus'],
+      ['add', 'add'],
+      ['m', 'm'],
+    ];
+
+    while (rest.length > 0) {
+      const keyword = prefixMap.find(([key]) => rest.slice(0, key.length).toLowerCase() === key);
+      if (keyword) {
+        normalized += keyword[1];
+        rest = rest.slice(keyword[0].length);
+        continue;
+      }
+
+      normalized += rest[0];
+      rest = rest.slice(1);
+    }
+
+    return normalized;
+  }
+
+  private stripLeadingMinorMarker(suffix: string): string {
+    return suffix.replace(/^(moll|min|m)/, '');
+  }
+
+  private stripLeadingDurMarker(suffix: string): string {
+    return suffix.replace(/^dur/, '');
+  }
+
+  private isMajorRoot(root: string): boolean {
+    return root[0] === root[0].toUpperCase();
+  }
+
+  private isMinorRoot(root: string): boolean {
+    return root[0] === root[0].toLowerCase();
+  }
+
+  private toMinorRoot(root: string): string {
+    return root[0].toLowerCase() + root.slice(1);
+  }
+
+  private toMajorRoot(root: string): string {
+    return root[0].toUpperCase() + root.slice(1);
+  }
+
+  private splitTokenDecorators(token: string): {prefix: string; core: string; suffix: string} {
+    let prefix = '';
+    let suffix = '';
+    let core = token;
+
+    while (core.startsWith('(') && !this.isFullyWrappedByOuterParentheses(core)) {
+      const matchingClosingParen = this.findMatchingClosingParen(core, 0);
+      if (matchingClosingParen !== -1) {
+        break;
+      }
+
+      prefix += '(';
+      core = core.slice(1);
+    }
+
+    while (core.endsWith(')') && !this.isFullyWrappedByOuterParentheses(core)) {
+      const matchingOpeningParen = this.findMatchingOpeningParen(core, core.length - 1);
+      if (matchingOpeningParen !== -1) {
+        break;
+      }
+
+      suffix = ')' + suffix;
+      core = core.slice(0, -1);
+    }
+
+    while (this.isFullyWrappedByOuterParentheses(core)) {
+      prefix += '(';
+      suffix = ')' + suffix;
+      core = core.slice(1, -1);
+    }
+
+    return {
+      prefix,
+      core,
+      suffix,
+    };
+  }
+
+  private isFullyWrappedByOuterParentheses(value: string): boolean {
+    if (!value.startsWith('(') || !value.endsWith(')')) {
+      return false;
+    }
+
+    return this.findMatchingClosingParen(value, 0) === value.length - 1;
+  }
+
+  private findMatchingClosingParen(value: string, start: number): number {
+    let depth = 0;
+    for (let i = start; i < value.length; i++) {
+      if (value[i] === '(') {
+        depth++;
+      } else if (value[i] === ')') {
+        depth--;
+        if (depth === 0) {
+          return i;
+        }
+        if (depth < 0) {
+          return -1;
+        }
+      }
+    }
+
+    return -1;
+  }
+
+  private findMatchingOpeningParen(value: string, end: number): number {
+    let depth = 0;
+    for (let i = end; i >= 0; i--) {
+      if (value[i] === ')') {
+        depth++;
+      } else if (value[i] === '(') {
+        depth--;
+        if (depth === 0) {
+          return i;
+        }
+        if (depth < 0) {
+          return -1;
+        }
+      }
+    }
+
+    return -1;
+  }
+
+  private parseChordAddDescriptor(suffix: string | null): ChordAddDescriptor | null {
+    if (!suffix) {
+      return null;
+    }
+
+    let rest = suffix;
+    let quality: ChordAddDescriptor['quality'] = null;
+
+    const qualityMatchers: Array<[string, NonNullable<ChordAddDescriptor['quality']>]> = [
+      ['moll', 'minor'],
+      ['min', 'minor'],
+      ['maj', 'major'],
+      ['dur', 'major'],
+      ['dim', 'diminished'],
+      ['verm', 'diminished'],
+      ['aug', 'augmented'],
+      ['m', 'minor'],
+    ];
+
+    for (const [prefix, normalized] of qualityMatchers) {
+      if (rest.startsWith(prefix)) {
+        quality = normalized;
+        rest = rest.slice(prefix.length);
+        break;
+      }
+    }
+
+    const descriptor: ChordAddDescriptor = {
+      raw: suffix,
+      quality,
+      extensions: [],
+      additions: [],
+      suspensions: [],
+      alterations: [],
+      modifiers: [],
+    };
+
+    while (rest.length > 0) {
+      const additionMatch = rest.match(/^add([#b+-]?\d+)/);
+      if (additionMatch) {
+        descriptor.additions.push(additionMatch[1]);
+        rest = rest.slice(additionMatch[0].length);
+        continue;
+      }
+
+      const suspensionMatch = rest.match(/^sus(\d*)/);
+      if (suspensionMatch) {
+        descriptor.suspensions.push(suspensionMatch[1] || 'sus');
+        rest = rest.slice(suspensionMatch[0].length);
+        continue;
+      }
+
+      const extensionMatch = rest.match(/^\d+/);
+      if (extensionMatch) {
+        descriptor.extensions.push(extensionMatch[0]);
+        rest = rest.slice(extensionMatch[0].length);
+        continue;
+      }
+
+      const alterationMatch = rest.match(/^[#b+-]\d+/);
+      if (alterationMatch) {
+        descriptor.alterations.push(alterationMatch[0]);
+        rest = rest.slice(alterationMatch[0].length);
+        continue;
+      }
+
+      const modifierMatch = rest.match(/^\([^)]*\)/);
+      if (modifierMatch) {
+        descriptor.modifiers.push(modifierMatch[0]);
+        rest = rest.slice(modifierMatch[0].length);
+        continue;
+      }
+
+      descriptor.modifiers.push(rest);
+      break;
+    }
+
+    return descriptor;
   }
 }

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

@@ -7,14 +7,13 @@ import {Line} from './line';
 describe('TransposeService', () => {
   let service: TransposeService;
 
-  beforeEach(() => {
-    void TestBed.configureTestingModule({});
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({});
     service = TestBed.inject(TransposeService);
   });
 
   it('should create map upwards', () => {
-    const distance = service.getDistance('D', 'G');
-    const map = service.getMap('D', 'G', distance);
+    const map = service.getMap('D', 'G');
 
     if (map) {
       void expect(map['D']).toBe('G');
@@ -22,8 +21,7 @@ describe('TransposeService', () => {
   });
 
   it('should create map downwards', () => {
-    const distance = service.getDistance('G', 'D');
-    const map = service.getMap('G', 'D', distance);
+    const map = service.getMap('G', 'D');
 
     if (map) {
       void expect(map['G']).toBe('D');
@@ -32,7 +30,7 @@ describe('TransposeService', () => {
 
   it('should transpose enharmonic targets by semitone distance', () => {
     const distance = service.getDistance('C', 'Db');
-    const map = service.getMap('C', 'Db', distance);
+    const map = service.getMap('C', 'Db');
 
     void expect(distance).toBe(1);
     void expect(map?.['C']).toBe('Db');
@@ -41,7 +39,7 @@ describe('TransposeService', () => {
 
   it('should keep german B/H notation consistent', () => {
     const distance = service.getDistance('H', 'C');
-    const map = service.getMap('H', 'C', distance);
+    const map = service.getMap('H', 'C');
 
     void expect(distance).toBe(1);
     void expect(map?.['H']).toBe('C');

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

@@ -67,7 +67,7 @@ export class TransposeService {
     if (line.type !== LineType.chord || !line.chords) return line;
 
     const difference = this.getDistance(baseKey, targetKey);
-    const map = this.getMap(baseKey, targetKey, difference);
+    const map = this.getMap(baseKey, targetKey);
 
     const chords = difference !== 0 && map ? line.chords.map(chord => this.transposeChord(chord, map)) : line.chords;
     const renderedLine = this.renderLine(chords);
@@ -85,8 +85,8 @@ export class TransposeService {
   }
 
   public getDistance(baseKey: string, targetKey: string): number {
-    const baseSemitone = this.keyToSemitone[baseKey];
-    const targetSemitone = this.keyToSemitone[targetKey];
+    const baseSemitone = this.getSemitone(baseKey);
+    const targetSemitone = this.getSemitone(targetKey);
 
     if (baseSemitone === undefined || targetSemitone === undefined) {
       return 0;
@@ -95,8 +95,8 @@ export class TransposeService {
     return (targetSemitone - baseSemitone + 12) % 12;
   }
 
-  public getMap(baseKey: string, targetKey: string, difference: number): TransposeMap | null {
-    const cacheKey = `${baseKey}:${targetKey}:${difference}`;
+  public getMap(baseKey: string, targetKey: string): TransposeMap | null {
+    const cacheKey = `${baseKey}:${targetKey}`;
     const cachedMap = this.mapCache.get(cacheKey);
     if (cachedMap) {
       return cachedMap;
@@ -108,6 +108,7 @@ export class TransposeService {
       return null;
     }
 
+    const difference = this.getDistance(baseKey, targetKey);
     const map: TransposeMap = {};
     sourceScales.forEach((sourceScale, scaleIndex) => {
       const targetScale = targetScales[scaleIndex];
@@ -132,6 +133,8 @@ export class TransposeService {
   }
 
   private transposeChord(chord: Chord, map: TransposeMap): Chord {
+    // Intentional fallback: unknown chord tokens must stay visibly invalid as "X".
+    // Do not replace this with the original token without explicit product approval.
     const translatedChord = map[chord.chord] ?? 'X';
     const translatedSlashChord = chord.slashChord ? (map[chord.slashChord] ?? 'X') : null;
 
@@ -147,31 +150,38 @@ export class TransposeService {
       return Math.max(max, chord.position + this.renderChord(chord).length);
     }, 0);
 
-    let template = ''.padEnd(width, ' ');
+    const buffer = Array.from({length: width}, () => ' ');
 
     chords.forEach(chord => {
       const pos = chord.position;
       const renderedChord = this.renderChord(chord);
-      const newLength = renderedChord.length;
+      const requiredLength = pos + renderedChord.length;
 
-      if (template.length < pos + newLength) {
-        template = template.padEnd(pos + newLength, ' ');
+      while (buffer.length < requiredLength) {
+        buffer.push(' ');
       }
 
-      const pre = template.slice(0, pos);
-      const post = template.slice(pos + newLength);
-
-      template = pre + renderedChord + post;
+      for (let i = 0; i < renderedChord.length; i++) {
+        buffer[pos + i] = renderedChord[i];
+      }
     });
 
-    return template.trimEnd();
+    return buffer.join('').trimEnd();
   }
 
   private renderChord(chord: Chord): string {
+    // Intentional fallback: unknown chord tokens must stay visibly invalid as "X".
+    // Do not replace this with the original token without explicit product approval.
     const renderedChord = scaleMapping[chord.chord] ?? 'X';
     const renderedSlashChord = chord.slashChord ? (scaleMapping[chord.slashChord] ?? 'X') : '';
+    const prefix = chord.prefix ?? '';
+    const suffix = chord.suffix ?? '';
 
-    return renderedChord + (chord.add ?? '') + (renderedSlashChord ? '/' + renderedSlashChord : '');
+    return prefix + renderedChord + (chord.add ?? '') + (renderedSlashChord ? '/' + renderedSlashChord : '') + suffix;
+  }
+
+  private getSemitone(key: string): number | undefined {
+    return this.keyToSemitone[key];
   }
 
   private getScaleVariants(key: string): ScaleVariants | null {

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

@@ -1,22 +1,60 @@
 import {TestBed} from '@angular/core/testing';
 import {Storage} from '@angular/fire/storage';
-
-import {UploadService} from './upload.service';
 import {FileDataService} from './file-data.service';
+import {Upload} from './upload';
+import {UploadService} from './upload.service';
 
-describe('UploadServiceService', () => {
-  beforeEach(
-    () =>
-      void TestBed.configureTestingModule({
+describe('UploadService', () => {
+  let service: UploadService;
+  let fileDataServiceSpy: jasmine.SpyObj<FileDataService>;
+  type UploadTaskLike = {
+    on: (event: string, progress: (snapshot: {bytesTransferred: number; totalBytes: number}) => void, error: () => void, success: () => void) => void;
+  };
+  type UploadServiceInternals = UploadService & {
+    startUpload: (path: string, file: File) => UploadTaskLike;
+  };
+
+  beforeEach(async () => {
+    fileDataServiceSpy = jasmine.createSpyObj<FileDataService>('FileDataService', ['set']);
+    fileDataServiceSpy.set.and.resolveTo('file-1');
+
+    await TestBed.configureTestingModule({
       providers: [
-          {provide: Storage, useValue: {}},
-          {provide: FileDataService, useValue: {set: () => Promise.resolve('')}},
+        {provide: Storage, useValue: {app: 'test-storage'}},
+        {provide: FileDataService, useValue: fileDataServiceSpy},
       ],
-      })
-  );
+    });
+
+    service = TestBed.inject(UploadService);
+  });
 
   it('should be created', () => {
-    const service: UploadService = TestBed.inject(UploadService);
-    void expect(service).toBeTruthy();
+    expect(service).toBeTruthy();
+  });
+
+  it('should upload the file, update progress and persist file metadata on success', async () => {
+    const task: UploadTaskLike = {
+      on: (event: string, progress: (snapshot: {bytesTransferred: number; totalBytes: number}) => void, error: () => void, success: () => void) => {
+        progress({bytesTransferred: 50, totalBytes: 100});
+        success();
+      },
+    };
+    const uploadSpy = spyOn<any>(service as UploadServiceInternals, 'startUpload').and.returnValue(task);
+    const upload = new Upload(new File(['content'], 'test.pdf', {type: 'application/pdf'}));
+
+    service.pushUpload('song-1', upload);
+    await Promise.resolve();
+
+    expect(uploadSpy).toHaveBeenCalledWith('/attachments/song-1/test.pdf', upload.file);
+    expect(upload.progress).toBe(50);
+    expect(upload.path).toBe('/attachments/song-1');
+    expect(fileDataServiceSpy.set).toHaveBeenCalledWith(
+      'song-1',
+      jasmine.objectContaining({
+        name: 'test.pdf',
+        path: '/attachments/song-1',
+        createdAt: jasmine.any(Date),
+      })
+    );
   });
 });

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

@@ -18,12 +18,7 @@ export class UploadService extends FileBase {
     const filePath = `${directory}/${upload.file.name}`;
     upload.path = directory;
 
-    const {task} = runInInjectionContext(this.environmentInjector, () => {
-      const storageRef = ref(this.storage, filePath);
-      return {
-        task: uploadBytesResumable(storageRef, upload.file),
-      };
-    });
+    const task = runInInjectionContext(this.environmentInjector, () => this.startUpload(filePath, upload.file));
 
     task.on(
       'state_changed',
@@ -45,4 +40,9 @@ export class UploadService extends FileBase {
     };
     await this.fileDataService.set(songId, file);
   }
+
+  private startUpload(filePath: string, file: File) {
+    const storageRef = ref(this.storage, filePath);
+    return uploadBytesResumable(storageRef, file);
+  }
 }

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

@@ -10,10 +10,7 @@
       <mat-select formControlName="type">
         <mat-option [value]="null">- kein Filter -</mat-option>
         @for (type of types; track type) {
-          <mat-option [value]="type">{{
-            type | songType
-            }}
-          </mat-option>
+        <mat-option [value]="type">{{ type | songType }} </mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -23,10 +20,7 @@
       <mat-select formControlName="key">
         <mat-option [value]="null">- kein Filter -</mat-option>
         @for (key of keys; track key) {
-          <mat-option [value]="key">{{
-            key | key
-            }}
-          </mat-option>
+        <mat-option [value]="key">{{ key | key }} </mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -36,10 +30,7 @@
       <mat-select formControlName="legalType">
         <mat-option [value]="null">- kein Filter -</mat-option>
         @for (key of legalType; track key) {
-          <mat-option [value]="key">{{
-            key | legalType
-            }}
-          </mat-option>
+        <mat-option [value]="key">{{ key | legalType }} </mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -49,10 +40,7 @@
       <mat-select formControlName="flag">
         <mat-option [value]="null">- kein Filter -</mat-option>
         @for (flag of getFlags(); track flag) {
-          <mat-option [value]="flag">{{
-            flag
-            }}
-          </mat-option>
+        <mat-option [value]="flag">{{ flag }} </mat-option>
         }
       </mat-select>
     </mat-form-field>

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

@@ -1,5 +1,15 @@
-.third {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  column-gap: 20px;
+.third,
+:host ::ng-deep form,
+div[formGroup] {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.third {
+  gap: 0;
+}
+
+:host ::ng-deep .mat-mdc-form-field {
+  width: 100%;
 }

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {FilterComponent} from './filter.component';
 
@@ -6,11 +6,11 @@ describe('FilterComponent', () => {
   let component: FilterComponent;
   let fixture: ComponentFixture<FilterComponent>;
 
-  beforeEach(waitForAsync(() => {
-    void TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [FilterComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FilterComponent);

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

@@ -1,10 +1,11 @@
-import {Component, Input, inject} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {Component, DestroyRef, Input, inject} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} 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 {FilterStoreService} from '../../../../services/filter-store.service';
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {MatSelect} from '@angular/material/select';
@@ -21,20 +22,25 @@ import {SongTypePipe} from '../../../../widget-modules/pipes/song-type-translate
   imports: [ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatSelect, MatOption, LegalTypePipe, KeyPipe, SongTypePipe],
 })
 export class FilterComponent {
-  private router = inject(Router);
+  private filterStore = inject(FilterStoreService);
+  private destroyRef = inject(DestroyRef);
 
-  public filterFormGroup: UntypedFormGroup;
-  @Input() public route = '/';
+  public filterFormGroup: FormGroup<{
+    q: FormControl<string>;
+    type: FormControl<string>;
+    key: FormControl<string>;
+    legalType: FormControl<string>;
+    flag: FormControl<string>;
+  }>;
   @Input() public songs: Song[] = [];
   public types = SongService.TYPES;
   public legalType = SongService.LEGAL_TYPE;
   public keys = KEYS;
 
   public constructor() {
-    const activatedRoute = inject(ActivatedRoute);
-    const fb = inject(UntypedFormBuilder);
+    const fb = inject(FormBuilder);
 
-    this.filterFormGroup = fb.group({
+    this.filterFormGroup = fb.nonNullable.group({
       q: '',
       type: '',
       key: '',
@@ -42,20 +48,15 @@ export class FilterComponent {
       flag: '',
     });
 
-    activatedRoute.queryParams.subscribe(params => {
-      const filterValues = params as FilterValues;
-      if (filterValues.q) this.filterFormGroup.controls.q.setValue(filterValues.q);
-      if (filterValues.type) this.filterFormGroup.controls.type.setValue(filterValues.type);
-      if (filterValues.key) this.filterFormGroup.controls.key.setValue(filterValues.key);
-      if (filterValues.legalType) this.filterFormGroup.controls.legalType.setValue(filterValues.legalType);
-      if (filterValues.flag) this.filterFormGroup.controls.flag.setValue(filterValues.flag);
+    this.filterStore.songFilter$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(filterValues => {
+      this.filterFormGroup.patchValue(filterValues, {emitEvent: false});
     });
 
-    this.filterFormGroup.controls.q.valueChanges.subscribe(_ => void this.filerValueChanged('q', _ as string));
-    this.filterFormGroup.controls.key.valueChanges.subscribe(_ => void this.filerValueChanged('key', _ as string));
-    this.filterFormGroup.controls.type.valueChanges.subscribe(_ => void this.filerValueChanged('type', _ as string));
-    this.filterFormGroup.controls.legalType.valueChanges.subscribe(_ => void this.filerValueChanged('legalType', _ as string));
-    this.filterFormGroup.controls.flag.valueChanges.subscribe(_ => void this.filerValueChanged('flag', _ as string));
+    this.filterFormGroup.controls.q.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('q', value));
+    this.filterFormGroup.controls.key.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('key', value));
+    this.filterFormGroup.controls.type.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('type', value));
+    this.filterFormGroup.controls.legalType.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('legalType', value));
+    this.filterFormGroup.controls.flag.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('flag', value));
   }
 
   public getFlags(): string[] {
@@ -69,11 +70,7 @@ export class FilterComponent {
     return flags.filter((n, i) => flags.indexOf(n) === i);
   }
 
-  private async filerValueChanged(key: string, value: string): Promise<void> {
-    const route = this.router.createUrlTree([this.route], {
-      queryParams: {[key]: value},
-      queryParamsHandling: 'merge',
-    });
-    await this.router.navigateByUrl(route);
+  private filterValueChanged(key: keyof FilterValues, value: string): void {
+    this.filterStore.updateSongFilter({[key]: value} as Partial<FilterValues>);
   }
 }