fix dark mode css

.browserslistrc

@@ -1,12 +1,7 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-> 0.5%
-last 2 versions
+# Angular 21-supported baseline to avoid unsupported-browser build warnings.
+last 2 Chrome major versions
+last 2 Edge major versions
+last 2 Firefox major versions
 Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+last 2 Safari major versions
+last 2 iOS major versions

.eslintrc.json

@@ -1,58 +1,32 @@
 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
+  "ignorePatterns": ["projects/**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
-      "parserOptions": {
-        "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
-        ],
-        "createDefaultProgram": true
-      },
-      "extends": [
-        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates",
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-        "plugin:prettier/recommended"
-      ],
+      "files": ["*.ts"],
+      "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
-        "@typescript-eslint/explicit-member-accessibility": "error",
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "prefix": "app",
-            "style": "kebab-case",
-            "type": "element"
-          }
-        ],
-        "@typescript-eslint/unbound-method": [
-          "off"
-        ],
         "@angular-eslint/directive-selector": [
           "error",
           {
+            "type": "attribute",
             "prefix": "app",
-            "style": "camelCase",
-            "type": "attribute"
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
           }
         ]
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
       "rules": {}
     }
   ]

.gitea/workflows/angular-build.yml

@@ -0,0 +1,37 @@
+name: Angular Build
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  build:
+    runs-on: runner
+    container:
+      image: node:20-bullseye
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci -f
+
+      - name: Create firebase.ts
+        run: |
+          mkdir -p src/app
+          cat > src/environments/firebase.ts <<'EOF'
+          export const firebase = {
+            apiKey: "${{ secrets.FIREBASE_API_KEY }}",
+            authDomain: "${{ secrets.FIREBASE_AUTH_DOMAIN }}",
+            databaseURL: 'https://worshipgenerator.firebaseio.com',
+            projectId: "${{ secrets.FIREBASE_PROJECT_ID }}",
+            storageBucket: "${{ secrets.FIREBASE_STORAGE_BUCKET }}",
+            messagingSenderId: "${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}",
+            appId: "${{ secrets.FIREBASE_APP_ID }}"
+          };
+          EOF
+
+      - name: Build Angular
+        run: npm run build

.prettierrc

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

.run/build.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="build" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json"/>
+    <command value="run"/>
+    <scripts>
+      <script value="build"/>
+    </scripts>
+    <node-interpreter value="project"/>
+    <envs/>
+    <method v="2"/>
+  </configuration>
+</component>

.run/deploy.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="deploy" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json"/>
+    <command value="run"/>
+    <scripts>
+      <script value="deploy"/>
+    </scripts>
+    <node-interpreter value="project"/>
+    <envs/>
+    <method v="2"/>
+  </configuration>
+</component>

.run/start.run.xml

@@ -1,12 +1,15 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="start" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json"/>
-    <command value="run"/>
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
     <scripts>
-      <script value="start"/>
+      <script value="start" />
     </scripts>
-    <node-interpreter value="project"/>
-    <envs/>
-    <method v="2"/>
+    <node-interpreter value="project" />
+    <envs />
+    <EXTENSION ID="com.intellij.lang.javascript.buildTools.npm.rc.StartBrowserRunConfigurationExtension">
+      <browser name="98ca6316-2f89-46d9-a9e5-fa9e2b0625b3" start="true" with-js-debugger="true" url="http://localhost.4200" />
+    </EXTENSION>
+    <method v="2" />
   </configuration>
 </component>

README.md

@@ -1 +1,34 @@
-# wgenerator
+# wgenerator
+
+## Admin migration
+
+If `songUsage` needs to be rebuilt from all existing shows, log in with a user that has the `admin` role and run this in the browser console:
+
+```js
+await window.wgeneratorAdmin.rebuildSongUsage()
+```
+
+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
+- scans all shows and all `shows/{id}/songs` entries
+- rebuilds the per-user counters based on show ownership
+
+It returns a summary object with processed user, show and show-song counts.
+
+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,14 +15,18 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/wgenerator",
+            "browser": "src/main.ts",
+            "outputPath": {
+              "base": "dist/wgenerator"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
-            "aot": false,
+            "inlineStyleLanguage": "less",
             "assets": [
               "src/browserconfig.xml",
               "src/android-chrome-192x192.png",
@@ -42,14 +46,10 @@
               "src/styles/shadow.less"
             ],
             "scripts": [],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true,
             "allowedCommonJsDependencies": [
-              "lodash", "docx"
+              "lodash",
+              "docx",
+              "qrcode"
             ]
           },
           "configurations": {
@@ -60,62 +60,49 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "10MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "40kB",
+                  "maximumError": "80kB"
                 }
               ],
-              "serviceWorker": true,
-              "ngswConfigPath": "ngsw-config.json"
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "wgenerator:build"
-          },
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "wgenerator:build:production"
+              "buildTarget": "wgenerator:build:production"
+            },
+            "development": {
+              "buildTarget": "wgenerator:build:development"
             }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "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": []
+            "runnerConfig": true
           }
         },
         "lint": {
@@ -126,26 +113,11 @@
               "src/**/*.html"
             ]
           }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "wgenerator:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "wgenerator:serve:production"
-            }
-          }
         }
       }
     }
   },
   "cli": {
-    "analytics": "4047dcd7-89f4-402f-958e-e365a5505c55",
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "analytics": false
   }
 }

codex-session.json

@@ -0,0 +1,76 @@
+{
+  "updated_at": "2026-03-09",
+  "project": "wgenerator",
+  "summary": {
+    "css_theme": [
+      "LESS @-Variablen durch CSS-Custom-Properties ersetzt",
+      "natuerlichere Farbpalette auf Basis des Body-Gradients eingefuehrt",
+      "Material Icon Buttons auf die Primaerfarbe abgestimmt",
+      "mehrere harte Farben in normale App-Views auf Tokens umgestellt",
+      "Monitor-/Beamer-Ansicht bewusst kontrastreich belassen"
+    ],
+    "material_theme": [
+      "src/custom-theme.scss auf map-basierte Angular-Material-M2-Theme-Definition umgestellt",
+      "Warnung zu legacy define-light-theme-Signatur behoben"
+    ],
+    "transpose": [
+      "TransposeService auf Halbtonlogik umgebaut",
+      "unbekannte Akkorde rendern bewusst als X",
+      "dynamisches Rendern statt festem 100-Zeichen-Template",
+      "Tests fuer Enharmonik, B/H, X-Faelle und Key-Helper ergaenzt",
+      "key.helper Korrekturen: Gb-Mapping und D-Skala"
+    ],
+    "firebase_reads": [
+      "ConfigService und GlobalSettingsService auf Singleton-Streams umgestellt",
+      "read$ fuer shows, songs und guest wieder direkt ueber doc$ statt list$.find(...)",
+      "songUsage Login-Backfill entfernt",
+      "songUsage-Inkremente auf FieldValue.increment(...) umgestellt",
+      "Admin-Konsoleintrag window.wgeneratorAdmin.rebuildSongUsage() hinzugefuegt",
+      "showSongDataService.list$(showId) pro showId gecacht",
+      "monitor.component.ts entkoppelt, damit Show-Metadaten keine unnoetigen Song-Reads triggern"
+    ],
+    "shows_filter": [
+      "showType-Filter funktioniert wieder clientseitig",
+      "Zeitraumfilter fachlich auf heute minus n*30 Tage umgestellt",
+      "oeffentliche Shows werden fuer den Zeitraum serverseitig per Firestore-Query geladen",
+      "owner und showType filtern weiterhin clientseitig auf dem kleineren Resultset",
+      "Null-Fall im Filter-Template abgesichert"
+    ]
+  },
+  "important_files": [
+    "src/styles/styles.less",
+    "src/custom-theme.scss",
+    "src/app/modules/songs/services/transpose.service.ts",
+    "src/app/modules/songs/services/transpose.service.spec.ts",
+    "src/app/modules/songs/services/key.helper.ts",
+    "src/app/modules/songs/services/key.helper.spec.ts",
+    "src/app/services/config.service.ts",
+    "src/app/services/global-settings.service.ts",
+    "src/app/services/user/user.service.ts",
+    "src/main.ts",
+    "src/app/modules/shows/services/show-song-data.service.ts",
+    "src/app/modules/presentation/monitor/monitor.component.ts",
+    "src/app/modules/presentation/remote/remote.component.ts",
+    "src/app/modules/shows/services/show-data.service.ts",
+    "src/app/modules/shows/list/list.component.ts",
+    "src/app/modules/shows/list/filter/filter.component.ts",
+    "src/app/modules/shows/list/filter/filter.component.html",
+    "src/app/modules/songs/song/song.component.ts",
+    "src/app/modules/songs/song/song.component.html",
+    "README.md"
+  ],
+  "console_commands": {
+    "song_usage_rebuild": "await window.wgeneratorAdmin.rebuildSongUsage()"
+  },
+  "known_tradeoffs": [
+    "songUsage wird historisch nicht mehr automatisch beim Login rekonstruiert; dafuer ist die Admin-Migration gedacht",
+    "songUsage decrement kann bei inkonsistenten Aufrufpfaden theoretisch unter 0 laufen",
+    "owner- und showType-Filter fuer Shows laufen noch clientseitig",
+    "oeffentliche Show-Zeitraumquery kann Firestore-Indexe benoetigen"
+  },
+  "next_candidates": [
+    "remote.component.ts weiter entkoppeln, damit textRendering.parse(...) nicht bei jeder Show-Metadatenaenderung fuer alle Songs neu laeuft",
+    "users$ als Voll-Collection-Livestream spaeter auf Einzelreads bzw. gezieltere Nutzung pruefen",
+    "weitere Firestore-Read-Hotspots mit echten Metriken gegenpruefen"
+  ]
+}

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"
-    ]
-  }
-}

firebase.json

@@ -4,7 +4,7 @@
     "indexes": "firestore.indexes.json"
   },
   "hosting": {
-    "public": "dist/wgenerator",
+    "public": "dist/wgenerator/browser",
     "ignore": [
       "firebase.json",
       "**/.*",

firestore.rules

@@ -17,6 +17,10 @@ service cloud.firestore {
       allow read: if request.auth.uid != null;
     }
 
+    match /guest/{guestId} {
+      allow read: if true;
+      allow write: if request.auth.uid != null;
+    }
     match /songs/{song} {
       allow read: if request.auth.uid != null;
       allow write: if request.auth.uid != null;

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

@@ -1,75 +1,63 @@
 {
   "name": "wgenerator",
-  "version": "1.3",
+  "version": "2.0",
   "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",
+    "deploy-beta": "ng b && firebase hosting:channel:deploy beta",
     "test": "ng test",
     "lint": "ng lint --fix",
-    "postinstall": "ngcc"
+    "update": "ng update @angular/cdk @angular/cli @angular/core @angular/material && ncu -u && npm i && npm fix"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.10",
-    "@angular/cdk": "^14.2.6",
-    "@angular/common": "^14.2.10",
-    "@angular/compiler": "^14.2.10",
-    "@angular/core": "^14.2.10",
-    "@angular/fire": "^7.4.1",
-    "@angular/forms": "^14.2.10",
-    "@angular/material": "^14.2.6",
-    "@angular/platform-browser": "^14.2.10",
-    "@angular/platform-browser-dynamic": "^14.2.10",
-    "@angular/router": "^14.2.10",
-    "@angular/service-worker": "^14.2.10",
-    "@fortawesome/angular-fontawesome": "^0.11.1",
-    "@fortawesome/fontawesome-svg-core": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "docx": "^7.4.1",
-    "firebase": "^9.6.10",
-    "lodash": "^4.17.21",
-    "ngx-mat-select-search": "^4.2.1",
-    "ngx-perfect-scrollbar": "^10.1.1",
-    "rxfire": "^6.0.3",
-    "rxjs": "~7.5.6",
-    "swiper": "^9.3.2",
-    "tslib": "^2.4.0",
-    "uuid": "^8.3.2",
-    "zone.js": "~0.11.8"
+    "@angular/animations": "^21.2.2",
+    "@angular/cdk": "^21.2.1",
+    "@angular/common": "^21.2.2",
+    "@angular/compiler": "^21.2.2",
+    "@angular/core": "^21.2.2",
+    "@angular/fire": "21.0.0-rc.0",
+    "@angular/forms": "^21.2.2",
+    "@angular/material": "^21.2.1",
+    "@angular/platform-browser": "^21.2.2",
+    "@angular/platform-browser-dynamic": "^21.2.2",
+    "@angular/router": "^21.2.2",
+    "@angular/service-worker": "^21.2.2",
+    "@fortawesome/angular-fontawesome": "^4.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "docx": "^9.6.0",
+    "firebase": "^12.10.0",
+    "ngx-mat-select-search": "^8.0.4",
+    "qrcode": "^1.5.4",
+    "rxjs": "~7.8.1",
+    "swiper": "^12.1.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1402.9",
-    "@angular-devkit/build-angular": "^14.2.9",
-    "@angular-eslint/builder": "14.1.2",
-    "@angular-eslint/eslint-plugin": "14.1.2",
-    "@angular-eslint/eslint-plugin-template": "14.1.2",
-    "@angular-eslint/schematics": "14.1.2",
-    "@angular-eslint/template-parser": "14.1.2",
-    "@angular/cli": "^14.2.9",
-    "@angular/compiler-cli": "^14.2.10",
-    "@angular/language-service": "^14.2.10",
-    "@types/jasmine": "~4.0.3",
-    "@types/jasminewd2": "~2.0.10",
-    "@types/lodash": "^4.14.182",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.22.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "firebase-tools": "^11.6.0",
-    "fuzzy": "^0.1.3",
-    "inquirer": "^9.1.0",
-    "inquirer-autocomplete-prompt": "^2.0.0",
-    "jasmine-core": "~4.3.0",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
-    "prettier": "^2.7.1",
-    "protractor": "~7.0.0",
-    "typescript": "~4.7.4"
+    "@angular-devkit/architect": "0.2102.1",
+    "@angular-devkit/build-angular": "^21.2.1",
+    "@angular-eslint/builder": "21.3.0",
+    "@angular-eslint/eslint-plugin": "21.3.0",
+    "@angular-eslint/eslint-plugin-template": "21.3.0",
+    "@angular-eslint/schematics": "21.3.0",
+    "@angular-eslint/template-parser": "21.3.0",
+    "@angular/cli": "^21.2.1",
+    "@angular/compiler-cli": "^21.2.2",
+    "@angular/language-service": "^21.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "angular-eslint": "^21.3.1",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "firebase-tools": "^15.9.1",
+    "jsdom": "^29.0.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.3",
+    "vitest": "^4.1.0"
   }
 }

src/app/app-routing.module.ts

@@ -1,7 +1,11 @@
 import {NgModule} from '@angular/core';
-import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
-import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/compat/auth-guard';
+import {RouterModule, Routes} from '@angular/router';
+import {FirebaseApp} from '@angular/fire/app';
+import {provideStorage} from '@angular/fire/storage';
+import {inject} from '@angular/core';
+import {getStorage} from 'firebase/storage';
 import {RoleGuard} from './widget-modules/guards/role.guard';
+import {AuthGuard} from './widget-modules/guards/auth.guard';
 
 const routes: Routes = [
   {
@@ -12,27 +16,25 @@ const routes: Routes = [
   {
     path: 'songs',
     loadChildren: () => import('./modules/songs/songs.module').then(m => m.SongsModule),
-    canActivate: [AngularFireAuthGuard, RoleGuard],
+    providers: [provideStorage(() => getStorage(inject(FirebaseApp)))],
+    canActivate: [AuthGuard, RoleGuard],
     data: {
-      authGuardPipe: () => redirectUnauthorizedTo(['user', 'login']),
       requiredRoles: ['user'],
     },
   },
   {
     path: 'shows',
     loadChildren: () => import('./modules/shows/shows.module').then(m => m.ShowsModule),
-    canActivate: [AngularFireAuthGuard, RoleGuard],
+    canActivate: [AuthGuard, RoleGuard],
     data: {
-      authGuardPipe: () => redirectUnauthorizedTo(['user', 'login']),
       requiredRoles: ['leader', 'member'],
     },
   },
   {
     path: 'presentation',
     loadChildren: () => import('./modules/presentation/presentation.module').then(m => m.PresentationModule),
-    canActivate: [AngularFireAuthGuard, RoleGuard],
+    canActivate: [AuthGuard, RoleGuard],
     data: {
-      authGuardPipe: () => redirectUnauthorizedTo(['user', 'login']),
       requiredRoles: ['presenter'],
     },
   },
@@ -53,8 +55,8 @@ const routes: Routes = [
 @NgModule({
   imports: [
     RouterModule.forRoot(routes, {
-      preloadingStrategy: PreloadAllModules,
-      relativeLinkResolution: 'legacy',
+      scrollPositionRestoration: 'enabled',
+      // relativeLinkResolution: 'legacy',
     }),
   ],
   exports: [RouterModule],

src/app/app.component.html

@@ -1,12 +1,5 @@
 <app-navigation></app-navigation>
-<perfect-scrollbar
-  #scrollbar
-  (psScrollY)="onScoll($event)"
-  [perfectScrollbar]
-  class="scroll"
-  style="max-height: calc(100vh); width: 100%; overflow: hidden"
->
-  <div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
-    <router-outlet #o="outlet"></router-outlet>
-  </div>
-</perfect-scrollbar>
+
+<div class="content">
+  <router-outlet></router-outlet>
+</div>

src/app/app.component.less

@@ -1,10 +1,3 @@
 h1 {
-  color: red;
-}
-
-
-.manager {
-  //display: grid;
-  //grid-template-columns: 1fr 1fr;
-  //transition: all 1s ease-in-out;
+  color: var(--text);
 }

src/app/app.component.spec.ts

@@ -1,16 +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({
-        imports: [RouterTestingModule],
-        declarations: [AppComponent],
-      }).compileComponents();
-    })
-  );
+  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,8 +1,8 @@
-import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit, inject} from '@angular/core';
 import {fader} from './animations';
-import {ScrollService} from './services/scroll.service';
-import {PerfectScrollbarComponent} from 'ngx-perfect-scrollbar';
-import {register} from 'swiper/element/bundle';
+import {RouterOutlet} from '@angular/router';
+import {NavigationComponent} from './widget-modules/components/application-frame/navigation/navigation.component';
+import {ThemeService} from './services/theme/theme.service';
 
 @Component({
   selector: 'app-root',
@@ -10,23 +10,15 @@ import {register} from 'swiper/element/bundle';
   styleUrls: ['./app.component.less'],
   animations: [fader],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, NavigationComponent],
 })
 export class AppComponent implements OnInit {
-  @ViewChild('scrollbar', {static: false}) public scrollbar: PerfectScrollbarComponent | null = null;
-
-  public constructor(private scrollService: ScrollService) {
-    scrollService.restoreScrollPosition$.subscribe(pos => {
-      if (this.scrollbar && pos) this.scrollbar.directiveRef?.scrollTo(0, pos, 300);
-    });
-    register();
+  public constructor() {
+    inject(ThemeService);
   }
 
   public ngOnInit(): void {
     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/app.module.ts

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

src/app/modules/brand/brand.component.html

@@ -1,4 +1,4 @@
 <div class="brand">
   <app-logo></app-logo>
-  <div class="copyright">© 2019 - 2023 - Benjamin Ifland</div>
+  <div class="copyright">© 2019 - 2026 - Benjamin Ifland</div>
 </div>

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

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

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

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

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

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

@@ -1,11 +1,10 @@
 <div class="frame">
   <app-brand class="brand"></app-brand>
-  <div *ngIf="user$ | async as user" class="text">
+  @if (user$ | async; as user) {
+  <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.less

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

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

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

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

@@ -1,17 +1,24 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
+import {BrandComponent} from '../brand.component';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-new-user',
   templateUrl: './new-user.component.html',
   styleUrls: ['./new-user.component.less'],
+  imports: [BrandComponent, AsyncPipe],
 })
 export class NewUserComponent {
+  private userService = inject(UserService);
+
   public user$: Observable<User | null> | null = null;
 
-  public constructor(private userService: UserService) {
+  public constructor() {
+    const userService = this.userService;
+
     this.user$ = userService.user$;
   }
 }

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

@@ -0,0 +1,81 @@
+import {TestBed} from '@angular/core/testing';
+import {Firestore} from '@angular/fire/firestore';
+import {of} from 'rxjs';
+import {DbService} from 'src/app/services/db.service';
+import {GuestShowDataService} from './guest-show-data.service';
+
+describe('GuestShowDataService', () => {
+  let service: GuestShowDataService;
+  let docUpdateSpy: jasmine.Spy<() => Promise<void>>;
+  let docDeleteSpy: jasmine.Spy<() => Promise<void>>;
+  let docSpy: jasmine.Spy;
+  let colAddSpy: jasmine.Spy<() => Promise<{id: string}>>;
+  let colSpy: jasmine.Spy;
+  let dbServiceSpy: jasmine.SpyObj<DbService>;
+  let firestoreStub: Firestore;
+
+  beforeEach(async () => {
+    docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
+    docDeleteSpy = jasmine.createSpy('delete').and.resolveTo();
+    docSpy = jasmine.createSpy('doc').and.returnValue({
+      update: docUpdateSpy,
+      delete: docDeleteSpy,
+    });
+    colAddSpy = jasmine.createSpy('add').and.resolveTo({id: 'guest-2'});
+    colSpy = jasmine.createSpy('col').and.returnValue({add: colAddSpy});
+    dbServiceSpy = jasmine.createSpyObj<DbService>('DbService', ['col$', 'doc$', 'doc', 'col']);
+    dbServiceSpy.col$.and.returnValue(of([{id: 'guest-1'}]) as never);
+    dbServiceSpy.doc$.and.returnValue(of({id: 'guest-1'}) as never);
+    dbServiceSpy.doc.and.callFake(docSpy);
+    dbServiceSpy.col.and.callFake(colSpy);
+    firestoreStub = {} as Firestore;
+
+    await TestBed.configureTestingModule({
+      providers: [
+        {provide: DbService, useValue: dbServiceSpy},
+        {provide: Firestore, useValue: firestoreStub},
+      ],
+    });
+
+    service = TestBed.inject(GuestShowDataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should read the guest collection for list$', () => {
+    service.list$.subscribe();
+
+    expect(dbServiceSpy.col$).toHaveBeenCalledWith('guest');
+  });
+
+  it('should read a single guest show by id', () => {
+    service.read$('guest-7').subscribe();
+
+    expect(dbServiceSpy.doc$).toHaveBeenCalledWith('guest/guest-7');
+  });
+
+  it('should update a guest show document', async () => {
+    await service.update$('guest-7', {published: true} as never);
+
+    expect(docSpy).toHaveBeenCalledWith('guest/guest-7');
+    const [updatePayload] = docUpdateSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
+    expect(updatePayload).toEqual({published: true});
+  });
+
+  it('should add a guest show and return the created id', async () => {
+    await expectAsync(service.add({published: false} as never)).toBeResolvedTo('guest-2');
+
+    expect(colSpy).toHaveBeenCalledWith('guest');
+    const [addPayload] = colAddSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
+    expect(addPayload).toEqual({published: false});
+  });
+
+  it('should delete a guest show document', async () => {
+    await service.delete('guest-7');
+
+    expect(docSpy).toHaveBeenCalledWith('guest/guest-7');
+    expect(docDeleteSpy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,41 @@
+import {EnvironmentInjector, Injectable, inject, runInInjectionContext} from '@angular/core';
+import {doc, Firestore, getDoc} from '@angular/fire/firestore';
+import {Observable} from 'rxjs';
+import {shareReplay} from 'rxjs/operators';
+import {DbService} from 'src/app/services/db.service';
+import {GuestShow} from './guest-show';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestShowDataService {
+  private dbService = inject(DbService);
+  private firestore = inject(Firestore);
+  private environmentInjector = inject(EnvironmentInjector);
+
+  private collection = 'guest';
+  public list$: Observable<GuestShow[]> = this.dbService.col$<GuestShow>(this.collection).pipe(
+    shareReplay({
+      bufferSize: 1,
+      refCount: true,
+    })
+  );
+
+  public read$: (id: string) => Observable<GuestShow | null> = (id: string): Observable<GuestShow | null> => this.dbService.doc$(`${this.collection}/${id}`);
+  public read: (id: string) => Promise<GuestShow | null> = async (id: string): Promise<GuestShow | null> => {
+    const snapshot = await runInInjectionContext(this.environmentInjector, () => getDoc(doc(this.firestore, `${this.collection}/${id}`)));
+
+    if (!snapshot.exists()) {
+      return null;
+    }
+
+    return {
+      id: snapshot.id,
+      ...(snapshot.data() as Omit<GuestShow, 'id'>),
+    };
+  };
+  public update$: (id: string, data: Partial<GuestShow>) => Promise<void> = async (id: string, data: Partial<GuestShow>): Promise<void> =>
+    await this.dbService.doc(this.collection + '/' + id).update(data);
+  public add: (data: Partial<GuestShow>) => Promise<string> = async (data: Partial<GuestShow>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
+  public delete: (id: string) => Promise<void> = async (id: string): Promise<void> => await this.dbService.doc(this.collection + '/' + id).delete();
+}

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

@@ -0,0 +1,73 @@
+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(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();
+
+    await TestBed.configureTestingModule({
+      providers: [
+        {provide: GuestShowDataService, useValue: guestShowDataServiceSpy},
+        {provide: ShowService, useValue: showServiceSpy},
+      ],
+    });
+
+    service = TestBed.inject(GuestShowService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  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 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);
+
+    const [addPayload] = guestShowDataServiceSpy.add.calls.mostRecent().args as [Record<string, unknown>];
+    expect(addPayload).toEqual(
+      jasmine.objectContaining({
+        showType: 'service-worship',
+        date: show.date,
+        songs,
+      })
+    );
+    expect(addPayload['updatedAt']).toEqual(jasmine.any(Date));
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {shareId: 'share-1'});
+  });
+
+  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 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);
+
+    const [shareId, updatePayload] = guestShowDataServiceSpy.update$.calls.mostRecent().args as [string, Record<string, unknown>];
+    expect(shareId).toBe('share-9');
+    expect(updatePayload).toEqual(
+      jasmine.objectContaining({
+        showType: 'service-worship',
+        date: show.date,
+        songs,
+      })
+    );
+    expect(updatePayload['updatedAt']).toEqual(jasmine.any(Date));
+    expect(guestShowDataServiceSpy.add).not.toHaveBeenCalled();
+    expect(showServiceSpy.update$).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,32 @@
+import {Injectable, inject} from '@angular/core';
+import {Show} from '../shows/services/show';
+import {Song} from '../songs/services/song';
+import {GuestShowDataService} from './guest-show-data.service';
+import {ShowService} from '../shows/services/show.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestShowService {
+  private showService = inject(ShowService);
+  private guestShowDataService = inject(GuestShowDataService);
+
+  public async share(show: Show, songs: Song[]): Promise<string> {
+    const data = {
+      showType: show.showType,
+      date: show.date,
+      updatedAt: new Date(),
+      songs: songs,
+    };
+    let shareId = show.shareId;
+
+    if (!show.shareId) {
+      shareId = await this.guestShowDataService.add(data);
+      await this.showService.update$(show.id, {shareId});
+    } else {
+      await this.guestShowDataService.update$(show.shareId, data);
+    }
+
+    return window.location.protocol + '//' + window.location.host + '/guest/' + shareId;
+  }
+}

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

@@ -0,0 +1,10 @@
+import {Song} from '../songs/services/song';
+import {Timestamp} from '@angular/fire/firestore';
+
+export interface GuestShow {
+  id: string;
+  showType: string;
+  date: Timestamp;
+  updatedAt?: Timestamp | Date;
+  songs: Song[];
+}

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

@@ -1,11 +1,29 @@
-<div *ngIf="songs$ | async as songs" class="view">
-<!--  <swiper>-->
-<!--    <div *ngFor="let song of songs" class="song">-->
-<!--      <app-song-text-->
-<!--        [showSwitch]="false"-->
-<!--        [text]="song"-->
-<!--        chordMode="hide"-->
-<!--      ></app-song-text>-->
-<!--    </div>-->
-<!--  </swiper>-->
+@if (showState$ | async; as state) { @if (state.status === 'loaded') {
+<div class="page">
+  <div class="title">
+    <div class="left">{{ state.show.showType | showType }}</div>
+    <div class="right">{{ state.show.date | date: 'dd.MM.yyyy' }}</div>
+  </div>
+  <div class="view">
+    <swiper-container scrollbar="true">
+      @for (song of state.show.songs; track song.id) {
+      <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>
+      </swiper-slide>
+      }
+    </swiper-container>
+  </div>
 </div>
+} @else if (state.status === 'loading') {
+<div class="empty-state">Gastansicht wird geladen.</div>
+} @else if (state.status === 'not-found') {
+<div class="empty-state">Für diesen Link wurde keine Gastansicht gefunden.</div>
+} @else {
+<div class="empty-state">{{ state.message }}</div>
+} }

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

@@ -1,16 +1,69 @@
+.page {
+  background: var(--overlay);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  backdrop-filter: blur(8px);
+
+  --swiper-scrollbar-bg-color: rgba(247, 251, 255, 0.2);
+  --swiper-scrollbar-drag-bg-color: rgba(247, 251, 255, 0.6);
+  --swiper-scrollbar-sides-offset: 20px;
+  --swiper-scrollbar-top: 100px;
+  --swiper-scrollbar-bottom: auto;
+}
+
+.title {
+  color: var(--text-inverse);
+  padding: 70px 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .left {
+    font-size: 1.8em;
+    color: var(--text-inverse);
+  }
+}
+
+.song-title {
+  padding: 20px 20px 0;
+  font-size: 1.3em;
+}
+
+.legal {
+  padding: 0 20px;
+  font-size: 0.6em;
+  color: rgba(247, 251, 255, 0.72);
+}
+
 .view {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: #0003;
-  backdrop-filter: blur(10px);
-  z-index: 1;
-  color: white;
+  color: var(--text-inverse);
 }
 
 app-song-text {
   margin: 20px;
   display: block;
 }
+
+.song-swipe {
+  margin-top: 100px;
+  margin-bottom: 50px;
+  min-height: calc(100vh - 150px);
+}
+
+.empty-state {
+  color: var(--text-inverse);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 50px);
+  padding: 24px;
+  text-align: center;
+}

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

@@ -1,26 +1,97 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
-
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute} from '@angular/router';
+import {BehaviorSubject, of} from 'rxjs';
 import {GuestComponent} from './guest.component';
+import {GuestShowDataService} from './guest-show-data.service';
 
 describe('GuestComponent', () => {
   let component: GuestComponent;
   let fixture: ComponentFixture<GuestComponent>;
+  let guestShowDataServiceSpy: jasmine.SpyObj<GuestShowDataService>;
+  let guestShowSubject: BehaviorSubject<unknown>;
 
-  beforeEach(
-    waitForAsync(() => {
-      void TestBed.configureTestingModule({
-        declarations: [GuestComponent],
-      }).compileComponents();
-    })
-  );
+  beforeEach(async () => {
+    guestShowSubject = new BehaviorSubject<unknown>({
+      id: 'guest-1',
+      showType: 'service-worship',
+      date: {
+        toDate: () => new Date('2026-03-20T00:00:00Z'),
+      },
+      songs: [
+        {
+          id: 'song-1',
+          title: 'Titel',
+          text: 'Text',
+          artist: 'Artist',
+        },
+      ],
+    });
+    guestShowDataServiceSpy = jasmine.createSpyObj<GuestShowDataService>('GuestShowDataService', ['read', 'read$']);
+    guestShowDataServiceSpy.read.and.resolveTo({
+      id: 'guest-1',
+      showType: 'service-worship',
+      date: {
+        toDate: () => new Date('2026-03-20T00:00:00Z'),
+      },
+      songs: [
+        {
+          id: 'song-1',
+          title: 'Titel',
+          text: 'Text',
+          artist: 'Artist',
+        },
+      ],
+    } as never);
+    guestShowDataServiceSpy.read$.and.returnValue(guestShowSubject.asObservable() as never);
+
+    await TestBed.configureTestingModule({
+      imports: [GuestComponent],
+      providers: [
+        {provide: ActivatedRoute, useValue: {params: of({id: 'guest-1'})}},
+        {provide: GuestShowDataService, useValue: guestShowDataServiceSpy},
+      ],
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(GuestComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
   });
 
   it('should create', () => {
-    void expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
+  });
+
+  it('should load and render the guest show', () => {
+    expect(guestShowDataServiceSpy.read).toHaveBeenCalledWith('guest-1');
+    expect(guestShowDataServiceSpy.read$).toHaveBeenCalledWith('guest-1');
+    expect(fixture.nativeElement.textContent).toContain('Titel');
+    expect(fixture.nativeElement.textContent).toContain('20.03.2026');
+  });
+
+  it('should update the rendered guest show when live data changes', async () => {
+    guestShowSubject.next({
+      id: 'guest-1',
+      showType: 'service-worship',
+      date: {
+        toDate: () => new Date('2026-03-21T00:00:00Z'),
+      },
+      songs: [
+        {
+          id: 'song-2',
+          title: 'Neuer Titel',
+          text: 'Neuer Text',
+          artist: 'Neue Artistin',
+        },
+      ],
+    });
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('Neuer Titel');
+    expect(fixture.nativeElement.textContent).toContain('21.03.2026');
   });
 });

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

@@ -1,32 +1,108 @@
-import {Component} from '@angular/core';
-import {SongService} from '../songs/services/song.service';
-import {GlobalSettingsService} from '../../services/global-settings.service';
-import {Observable} from 'rxjs';
-import {filter, map, switchMap} from 'rxjs/operators';
-import {ShowSongService} from '../shows/services/show-song.service';
-import {GlobalSettings} from '../../services/global-settings';
-import {ShowService} from '../shows/services/show.service';
+import {Component, CUSTOM_ELEMENTS_SCHEMA, inject} from '@angular/core';
+import {AsyncPipe, DatePipe} from '@angular/common';
+import {GuestShowDataService} from './guest-show-data.service';
+import {ActivatedRoute} from '@angular/router';
+import {catchError, map, switchMap} from 'rxjs/operators';
+import {Song} from '../songs/services/song';
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {concat, from, Observable, of} from 'rxjs';
+import {GuestShow} from './guest-show';
+import {ensureSwiperElement} from '../../services/swiper-element';
 
 @Component({
   selector: 'app-guest',
   templateUrl: './guest.component.html',
   styleUrls: ['./guest.component.less'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [SongTextComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class GuestComponent {
-  public songs$: Observable<string[]> = this.globalSettingsService.get$.pipe(
-    filter(_ => !!_),
-    map(_ => _ as GlobalSettings),
-    map(_ => _.currentShow),
-    switchMap(_ => this.showSongService.list$(_).pipe(map(l => ({showSongs: l, currentShow: _})))),
-    switchMap(_ => this.showService.read$(_.currentShow).pipe(map(l => ({showSongs: _.showSongs, show: l})))),
-    filter(_ => !!_.showSongs),
-    map(_ => (_?.show ? _.show.order.map(o => _.showSongs.find(f => f.id === o) ?? _.showSongs[0]).map(m => m.text) : []))
+  private currentRoute = inject(ActivatedRoute);
+  private service = inject(GuestShowDataService);
+
+  public constructor() {
+    void ensureSwiperElement();
+  }
+
+  public showState$: Observable<GuestShowState> = this.currentRoute.params.pipe(
+    map(param => param.id as string),
+    switchMap(id =>
+      concat(
+        of<GuestShowState>({status: 'loading'}),
+        from(this.service.read(id)).pipe(
+          switchMap(show => {
+            const normalizedShow = this.normalizeShow(show);
+
+            if (!normalizedShow) {
+              return of<GuestShowState>({status: 'not-found'});
+            }
+
+            return concat(
+              of<GuestShowState>({status: 'loaded', show: normalizedShow}),
+              this.service.read$(id).pipe(
+                map(liveShow => this.normalizeShow(liveShow)),
+                map(liveShow => (liveShow ? ({status: 'loaded', show: liveShow} as GuestShowState) : ({status: 'not-found'} as GuestShowState))),
+                catchError(() => of<GuestShowState>({status: 'error', message: 'Live-Aktualisierung fehlgeschlagen.'}))
+              )
+            );
+          }),
+          catchError(() => of<GuestShowState>({status: 'error', message: 'Gastansicht konnte nicht geladen werden.'}))
+        )
+      )
+    )
   );
 
-  public constructor(
-    private songService: SongService,
-    private showService: ShowService,
-    private globalSettingsService: GlobalSettingsService,
-    private showSongService: ShowSongService
-  ) {}
+  public trackBy = (index: number, show: Song) => show.id;
+
+  private normalizeShow(show: GuestShow | null): GuestShowView | null {
+    if (!show) {
+      return null;
+    }
+
+    return {
+      ...show,
+      date: this.toDate(show.date),
+      updatedAt: this.toDate(show.updatedAt ?? null),
+      songs: Array.isArray(show.songs) ? show.songs : [],
+    };
+  }
+
+  private toDate(value: unknown): Date | null {
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      if (this.hasToDate(value)) {
+        return value.toDate();
+      }
+
+      if ('seconds' in value && typeof value.seconds === 'number') {
+        return new Date(value.seconds * 1000);
+      }
+    }
+
+    if (typeof value === 'string' || typeof value === 'number') {
+      const parsedDate = new Date(value);
+      return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
+    }
+
+    return null;
+  }
+
+  private hasToDate(value: object): value is FirestoreDateLike {
+    return 'toDate' in value && typeof value.toDate === 'function';
+  }
 }
+
+interface GuestShowView extends Omit<GuestShow, 'date' | 'updatedAt'> {
+  date: Date | null;
+  updatedAt: Date | null;
+}
+
+type GuestShowState = {status: 'loading'} | {status: 'not-found'} | {status: 'error'; message: string} | {status: 'loaded'; show: GuestShowView};
+
+type FirestoreDateLike = {
+  toDate: () => Date;
+};

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

@@ -1,11 +1,23 @@
-import {NgModule} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GuestComponent} from './guest.component';
 import {RouterModule} from '@angular/router';
-import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @NgModule({
-  declarations: [GuestComponent],
-  imports: [CommonModule, RouterModule.forChild([{path: '', component: GuestComponent}]), SongTextModule],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: ':id',
+        component: GuestComponent,
+      },
+    ]),
+    SongTextComponent,
+    ShowTypePipe,
+    GuestComponent,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class GuestModule {}

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

@@ -1,14 +1,17 @@
-<ng-container *ngIf="song">
-  <p *ngIf="song.artist">{{ song.artist }}</p>
-  <p *ngIf="song.label">{{ song.label }}</p>
-  <p *ngIf="song.termsOfUse" class="terms-of-use">{{ song.termsOfUse }}</p>
-  <p *ngIf="song.origin">{{ song.origin }}</p>
-
-  <div *ngIf="song.legalOwnerId">
-    <p *ngIf="song.legalOwner === 'CCLI' && config">
-      CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
-      {{ config.ccliLicenseId }}
-    </p>
-    <p *ngIf="song.legalOwner !== 'CCLI'">Liednummer {{ song.legalOwnerId }}</p>
-  </div>
-</ng-container>
+@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>Liednummer {{ song.legalOwnerId }}</p>
+  }
+</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,13 +6,11 @@ describe('LegalComponent', () => {
   let component: LegalComponent;
   let fixture: ComponentFixture<LegalComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      void TestBed.configureTestingModule({
-        declarations: [LegalComponent],
-      }).compileComponents();
-    })
-  );
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LegalComponent],
+    }).compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LegalComponent);

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

@@ -6,6 +6,7 @@ import {Config} from '../../../../services/config';
   selector: 'app-legal',
   templateUrl: './legal.component.html',
   styleUrls: ['./legal.component.less'],
+  imports: [],
 })
 export class LegalComponent {
   @Input() public song: Song | null = null;

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

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

@@ -1,47 +1,43 @@
 <div class="fullscreen background"></div>
-<div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
-
-  <div class="bg-blue fullscreen bg-image" [class.visible]="presentationBackground==='blue'"></div>
-  <div class="bg-green fullscreen bg-image" [class.visible]="presentationBackground==='green'"></div>
-  <div class="bg-leder fullscreen bg-image" [class.visible]="presentationBackground==='leder'"></div>
-  <div class="bg-praise fullscreen bg-image" [class.visible]="presentationBackground==='praise'"></div>
-  <div class="bg-bible fullscreen bg-image" [class.visible]="presentationBackground==='bible'"></div>
-
-
+@if (showType) {
+<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>
+  <div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
+  <div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
   <div
     [@songSwitch]="songId"
     [class.blur]="songId === 'title' || songId === 'dynamicText'"
-    [class.no-logo]="presentationBackground!=='none'"
     [class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
+    [class.no-logo]="presentationBackground!=='none'"
     class="start fullscreen logo"
   >
     <app-logo></app-logo>
   </div>
-
-  <div *ngIf="songId === 'title'" @songSwitch class="start fullscreen">
+  @if (songId === 'title') {
+  <div @songSwitch class="start fullscreen">
     <div>{{ showType | showType }}</div>
     <div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
   </div>
-
-  <div *ngIf="songId === 'dynamicText'" @songSwitch class="start fullscreen dynamic-text">
+  } @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') {
   <app-song-text
-    [header]="song.title"
-    *ngIf="songId !== 'title' && songId !== 'empty'"
     [@songSwitch]="songId"
     [fullscreen]="true"
+    [header]="song.title"
     [index]="index??0"
+    [showComments]="false"
     [showSwitch]="false"
     [text]="song.text"
     chordMode="hide"
   ></app-song-text>
-  <app-legal
-    *ngIf="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
-    [@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>
+}

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

@@ -34,14 +34,16 @@
 .bg-blue {
   background-image: url("/assets/bg-dark-blue.jpg");
   filter: blur(10px);
+
   &.visible {
-    opacity: 0.5;
+    opacity: 0.7;
   }
 }
 
 .bg-green {
   background-image: url("/assets/bg-dark-green.jpg");
   filter: blur(5px);
+
   &.visible {
     opacity: 0.9;
   }
@@ -50,24 +52,27 @@
 .bg-leder {
   background-image: url("/assets/bg-leder.jpg");
   filter: blur(5px);
+
   &.visible {
-    opacity: 0.4;
+    opacity: 0.6;
   }
 }
 
 .bg-praise {
   background-image: url("/assets/bg-praise.jpg");
   filter: blur(8px);
+
   &.visible {
-    opacity: 0.2;
+    opacity: 0.4;
   }
 }
 
 .bg-bible {
   background-image: url("/assets/bg-bible.jpg");
   filter: blur(8px);
+
   &.visible {
-    opacity: 0.2;
+    opacity: 0.4;
   }
 }
 

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

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

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

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

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

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

@@ -1,123 +1,128 @@
-<div *ngIf="show" @fade>
-  <app-card [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
-            closeLink="/presentation/select" [closeIcon]="faIcon">
-
-    <ng-container *ngIf="!progress">
-      <div class="song">
-        <div *ngIf="show" class="song-parts">
-          <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 class="head">Leer</div>
-          </div>
+<app-page-frame title="Präsentation" [withMenu]="false">
+  @if (show) {
+    <app-card [closeIcon]="faIcon"
+              [heading]="show.showType | showType"
+              [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
+              closeLink="/presentation/select"
+              content>
+      @if (!progress) {
+        <div class="song">
+          @if (show) {
+            <div class="song-parts">
+              <div
+                (click)="onSectionClick('title', -1, show.id)"
+                (keydown.enter)="onSectionClick('title', -1, show.id)"
+                (keydown.space)="onSectionClick('title', -1, show.id)"
+                [class.active]="show.presentationSongId === 'title'"
+                class="song-part"
+                role="button"
+                tabindex="0"
+              >
+                <div class="head">Veranstaltung</div>
+              </div>
+              <div
+                (click)="onSectionClick('empty', -1, show.id)"
+                (keydown.enter)="onSectionClick('empty', -1, show.id)"
+                (keydown.space)="onSectionClick('empty', -1, show.id)"
+                [class.active]="show.presentationSongId === 'empty'"
+                class="song-part"
+                role="button"
+                tabindex="0"
+              >
+                <div class="head">Leer</div>
+              </div>
+            </div>
+          }
         </div>
-      </div>
-
-      <div *ngFor="let song of presentationSongs; trackBy: trackBy" class="song">
-        <div *ngIf="show"
-             [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 *ngIf="show" class="song-parts">
-          <div
-            (click)="onSectionClick(song.id, i, show.id)"
-            *ngFor="let section of song.sections; index as i"
-            [class.active]="
+        @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)"
+                  (keydown.enter)="onSectionClick(song.id, -1, show.id)"
+                  (keydown.space)="onSectionClick(song.id, -1, show.id)"
+                  class="head"
+                  role="button"
+                  tabindex="0"
+                >
+                  {{ song.title }}
+                </div>
+              </div>
+            }
+            @if (show) {
+              <div class="song-parts">
+                @for (section of song.sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
+                  <div
+                    (click)="onSectionClick(song.id, i, show.id)"
+                    (keydown.enter)="onSectionClick(song.id, i, show.id)"
+                    (keydown.space)="onSectionClick(song.id, i, show.id)"
+                    [class.active]="
               show.presentationSongId === song.id &&
               show.presentationSection === i
             "
-            class="song-part"
-          >
-            <div class="head">
-              {{ section.type | sectionType }} {{ section.number + 1 }}
+                    class="song-part"
+                    role="button"
+                    tabindex="0"
+                  >
+                    <div class="head">{{ section.type | sectionType }} {{ section.number + 1 }}</div>
+                    <div class="fragment">{{ getFirstLine(section) }}</div>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        }
+        <div class="song">
+          @if (show) {
+            <div [class.active]="show.presentationSongId === 'dynamicText'" class="title song-part">
+              <div
+                (click)="onSectionClick('dynamicText', -1, show.id)"
+                (keydown.enter)="onSectionClick('dynamicText', -1, show.id)"
+                (keydown.space)="onSectionClick('dynamicText', -1, show.id)"
+                class="head"
+                role="button"
+                tabindex="0"
+              >
+                Freier Text
+              </div>
             </div>
-            <div class="fragment">{{ getFirstLine(section) }}</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" />
+          </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>
+          </mat-form-field>
         </div>
-      </div>
+        @if (show) {
+          <div class="div-bottom">
+            <app-button [icon]="faDesktop" routerLink="/presentation/monitor">Präsentation starten</app-button>
 
-      <div class="song">
-        <div *ngIf="show"
-             [class.active]="show.presentationSongId === 'dynamicText'"
-             class="title song-part"
-        >
-          <div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">
-            Freier Text
+            <mat-form-field appearance="outline">
+              <mat-label>Hintergrund</mat-label>
+              <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>
+                <mat-option value="leder">Leder</mat-option>
+                <mat-option value="praise">Lobpreis</mat-option>
+                <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>
           </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">
-        </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>
-        </mat-form-field>
-
-      </div>
-
-      <div *ngIf="show" class="div-bottom">
-
-        <button routerLink="/presentation/monitor" mat-button>
-          <fa-icon [icon]="faDesktop"></fa-icon>
-          Präsentation starten
-        </button>
-
-
-        <mat-form-field appearance="outline">
-          <mat-label>Hintergrund</mat-label>
-          <mat-select
-            [ngModel]="show.presentationBackground"
-            (ngModelChange)="onBackground($event, show.id)">
-            <mat-option value="none">kein Hintergrund</mat-option>
-            <mat-option value="blue">Sternenhimmel</mat-option>
-            <mat-option value="green">Blätter</mat-option>
-            <mat-option value="leder">Leder</mat-option>
-            <mat-option value="praise">Lobpreis</mat-option>
-            <mat-option value="bible">Bibel</mat-option>
-          </mat-select>
-        </mat-form-field>
-
-        <mat-slider
-          (ngModelChange)="onZoom($event, show.id)"
-          [max]="100"
-          [min]="10"
-          [ngModel]="show.presentationZoom"
-          [step]="2"
-          [thumbLabel]="true"
-          color="primary"
-          class="zoom-slider"
-        >
-        </mat-slider>
-
-      </div>
-
-      <app-add-song
-        *ngIf="show"
-        [addedLive]="true"
-        [showSongs]="showSongs"
-        [songs]="songs$|async"
-        [show]="show"
-      ></app-add-song>
-    </ng-container>
-  </app-card>
-</div>
+        }
+        @if (show) {
+          <app-add-song [addedLive]="true" [showSongs]="showSongs" [show]="show" [songs]="songs$|async"></app-add-song>
+        }
+      }
+    </app-card>
+  }
+</app-page-frame>

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

@@ -1,12 +1,13 @@
 @import "../../../../styles/shadow";
 
 .song {
-  background: #fff;
+  background: var(--surface-strong);
   width: 100%;
   padding: 10px;
   border-radius: 8px;
   margin-bottom: 10px;
   box-sizing: border-box;
+  color: var(--text);
 
   @media screen and (max-width: 860px) {
     width: 100vw;
@@ -14,7 +15,7 @@
     border-radius: 0;
     box-sizing: border-box;
     margin: -11px -20px 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--surface-border);
   }
 }
 
@@ -39,35 +40,31 @@
 }
 
 .song-part {
-  background: #fff;
+  background: var(--surface-strong);
   border-radius: 8px;
   overflow: hidden;
-  transition: 300ms all ease-in-out;
+  transition: var(--transition);
   cursor: pointer;
-  outline: 0.5px solid #eee;
+  outline: 1px solid var(--surface-muted);
 
   &:hover {
-    .card-1;
-    outline: 0 solid transparent;
+    outline: 1px solid var(--primary-hover);
   }
 
   &.active {
-    .card-2;
-    outline: 0 solid transparent;
+    outline: 1px solid var(--primary-color);
 
     .head {
-      background: #4286f4;
-      color: white;
+      background-color: var(--primary-color);
+      color: var(--text-inverse);
     }
 
-    .fragment {
-    }
   }
 }
 
 .head {
-  transition: 300ms all ease-in-out;
-  background: #eee;
+  transition: var(--transition);
+  background: var(--surface-muted);
   padding: 10px;
   font-weight: bold;
 }
@@ -79,7 +76,11 @@
 .div-bottom {
   display: grid;
   gap: 20px;
-  grid-template-columns: min-content min-content auto;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  .btn-start-presentation {
+    height: 56px;
+  }
 
   @media screen and (max-width: 860px) {
     gap: 10px;
@@ -100,9 +101,9 @@
 a {
   font-size: 30px;
   padding: 10px;
-  transition: all 300ms ease-in-out;
+  transition: var(--transition);
 
   &:hover {
-    color: #4286f4;
+    color: var(--link-color);
   }
 }

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

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

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

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy} from '@angular/core';
 import {combineLatest, Subject} from 'rxjs';
 import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
@@ -7,11 +7,25 @@ import {faDesktop, faFolderOpen} from '@fortawesome/free-solid-svg-icons';
 import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
-import {debounceTime, filter, map} from 'rxjs/operators';
+import {debounceTime, distinctUntilChanged, filter, map, switchMap, takeUntil} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
-import {GlobalSettings} from '../../../services/global-settings';
+import {LineType} from '../../songs/services/line-type';
+import {AsyncPipe, DatePipe} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {RouterLink} from '@angular/router';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {MatSlider, MatSliderThumb} from '@angular/material/slider';
+import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {SectionTypePipe} from '../../../widget-modules/pipes/section-type-translator/section-type.pipe';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 
 export interface PresentationSong {
   id: string;
@@ -25,8 +39,34 @@ export interface PresentationSong {
   styleUrls: ['./remote.component.less'],
   animations: [fade],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CardComponent,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    ReactiveFormsModule,
+    FormsModule,
+    RouterLink,
+    MatSelect,
+    MatOption,
+    MatSlider,
+    MatSliderThumb,
+    AddSongComponent,
+    AsyncPipe,
+    DatePipe,
+    ShowTypePipe,
+    SectionTypePipe,
+    PageFrameComponent,
+    ButtonComponent,
+  ],
 })
-export class RemoteComponent {
+export class RemoteComponent implements OnDestroy {
+  private showService = inject(ShowService);
+  private showSongService = inject(ShowSongService);
+  private songService = inject(SongService);
+  private textRenderingService = inject(TextRenderingService);
+  private cRef = inject(ChangeDetectorRef);
+
   public show: Show | null = null;
   public showSongs: ShowSong[] = [];
   public songs$ = this.songService.list$();
@@ -35,29 +75,64 @@ export class RemoteComponent {
   public faIcon = faFolderOpen;
 
   public faDesktop = faDesktop;
+  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
+  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
+  private destroy$ = new Subject<void>();
+
+  public constructor() {
+    const globalSettingsService = inject(GlobalSettingsService);
+
+    const currentShowId$ = globalSettingsService.get$.pipe(
+      filter((settings): settings is NonNullable<typeof settings> => !!settings),
+      map(_ => _.currentShow),
+      filter((showId): showId is string => !!showId),
+      distinctUntilChanged(),
+      takeUntil(this.destroy$),
+    );
+
+    const show$ = currentShowId$.pipe(
+      switchMap(showId => this.showService.read$(showId)),
+      takeUntil(this.destroy$),
+    );
+
+    const parsedSongs$ = currentShowId$.pipe(
+      switchMap(showId => this.showSongService.list$(showId)),
+      map(list => ({
+        list,
+        parsed: list.map(song => ({
+          id: song.id,
+          title: song.title,
+          sections: this.textRenderingService.parse(song.text, null, false),
+        })),
+      })),
+      takeUntil(this.destroy$),
+    );
+
+    combineLatest([show$, parsedSongs$])
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(([show, parsedSongs]) => {
+        this.showSongs = parsedSongs.list;
+        this.show = show;
+        const order = show?.order ?? [];
+        const presentationSongsById = new Map(parsedSongs.parsed.map(song => [song.id, song] as const));
+        this.presentationSongs = order.map(id => presentationSongsById.get(id) ?? null).filter((s): s is PresentationSong => !!s);
+        this.cRef.markForCheck();
+      });
+
+    this.presentationDynamicCaptionChanged$
+      .pipe(debounceTime(1000), takeUntil(this.destroy$))
+      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
+    this.presentationDynamicTextChanged$
+      .pipe(debounceTime(1000), takeUntil(this.destroy$))
+      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
+  }
 
   public trackBy(index: number, item: PresentationSong): string {
     return item.id;
   }
 
-  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
-
-  public onShowChanged(change: string): void {
-    combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
-      this.showSongs = list;
-      this.show = show;
-      const presentationSongs = list.map(song => ({
-        id: song.id,
-        title: song.title,
-        sections: this.textRenderingService.parse(song.text, null),
-      }));
-      this.presentationSongs = show?.order.map(_ => presentationSongs.filter(f => f.id === _)[0]) ?? [];
-      this.cRef.markForCheck();
-    });
-  }
-
   public getFirstLine(section: Section): string {
-    return section.lines.filter(_ => _.type === 1)[0].text;
+    return section.lines.filter(_ => _.type === LineType.text)[0].text;
   }
 
   public async onSectionClick(id: string, index: number, showId: string): Promise<void> {
@@ -74,32 +149,6 @@ export class RemoteComponent {
   public async onBackground(presentationBackground: PresentationBackground, showId: string): Promise<void> {
     await this.showService.update$(showId, {presentationBackground});
   }
-  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
-
-  public constructor(
-    private showService: ShowService,
-    private showSongService: ShowSongService,
-    private songService: SongService,
-    private textRenderingService: TextRenderingService,
-    private globalSettingsService: GlobalSettingsService,
-    private cRef: ChangeDetectorRef
-  ) {
-    globalSettingsService.get$
-      .pipe(
-        filter(_ => !!_),
-        map(_ => _ as GlobalSettings),
-        map(_ => _.currentShow)
-      )
-      .subscribe(_ => {
-        this.onShowChanged(_);
-        this.cRef.markForCheck();
-      });
-
-    this.presentationDynamicCaptionChanged$
-      .pipe(debounceTime(1000))
-      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
-    this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
-  }
 
   public onDynamicCaption(presentationDynamicCaption: string, showId: string): void {
     this.presentationDynamicCaptionChanged$.next({presentationDynamicCaption, showId});
@@ -108,4 +157,9 @@ export class RemoteComponent {
   public onDynamicText(presentationDynamicText: string, showId: string): void {
     this.presentationDynamicTextChanged$.next({presentationDynamicText, showId});
   }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

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

@@ -1,16 +1,24 @@
-<div *ngIf="shows$ | async as shows" @fade>
-  <app-card heading="Bitte eine Veranstaltung auswählen" *ngIf="visible">
-    <p *ngIf="!shows.length">
-      Es ist derzeit keine Veranstaltung vorhanden
-    </p>
+<app-page-frame title="Präsentation" [withMenu]="false">
+  @if (shows$ | async; as shows) {
+    <div @fade content>
+      @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) {
+            <div class="list">
+              @for (show of shows; track show.id) {
+                <app-button (click)="selectShow(show)" class="full-width">
+                  <app-user-name [userId]="show.owner"></app-user-name>
+                  , {{ show.showType | showType }}, {{ show.date.toDate() | date: "dd.MM.yyyy" }}
+                </app-button>
 
-    <div *ngIf="shows.length>0" class="list">
-      <button mat-stroked-button *ngFor="let show of shows" (click)="selectShow(show)">
-        <app-user-name [userId]="show.owner"></app-user-name>
-        ,
-        {{ show.showType | showType }},
-        {{ show.date.toDate() | date: "dd.MM.yyyy" }}
-      </button>
+              }
+            </div>
+          }
+        </app-card>
+      }
     </div>
-  </app-card>
-</div>
+  }
+</app-page-frame>

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

@@ -0,0 +1,69 @@
+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/select/select.component.ts

@@ -1,21 +1,30 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {map} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
 import {Show} from '../../shows/services/show';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Router} from '@angular/router';
 import {fade} from '../../../animations';
+import {AsyncPipe, DatePipe} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 
 @Component({
   selector: 'app-select',
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.less'],
   animations: [fade],
+  imports: [CardComponent, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe, PageFrameComponent, ButtonComponent],
 })
 export class SelectComponent implements OnInit {
-  public constructor(private showService: ShowService, private globalSettingsService: GlobalSettingsService, private router: Router) {}
-  public visible = false;
+  private showService = inject(ShowService);
+  private globalSettingsService = inject(GlobalSettingsService);
+  private router = inject(Router);
 
+  public visible = false;
   public shows$ = this.showService
     .list$(true)
     .pipe(map(_ => _.filter(_ => _.date.toDate() > new Date(new Date().setMonth(new Date().getMonth() - 1))).sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0))));

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/archive-dialog/archive-dialog.component.spec.ts

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

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

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

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

@@ -0,0 +1,41 @@
+<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>
+<app-button-row>
+  <app-button (click)="dialogRef.close(false)" [icon]="faClose">Abbrechen</app-button>
+  <app-button (click)="dialogRef.close(true)" [icon]="faReport">Alle CCLI-Titel wurden gemeldet</app-button>
+</app-button-row>

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

@@ -0,0 +1,78 @@
+.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;
+  }
+}
+
+app-button-row {
+  margin: 0 var(--gap-l) var(--gap-l);
+}

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,47 @@
+import {Component, inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef} from '@angular/material/dialog';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {faArrowUpRightFromSquare, faCheck, faCompactDisc, faXmark} from '@fortawesome/free-solid-svg-icons';
+import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
+
+export interface ReportDialogSong {
+  title: string;
+  ccliNumber: string;
+}
+
+export interface ReportDialogData {
+  songs: ReportDialogSong[];
+}
+
+@Component({
+  selector: 'app-report-dialog',
+  imports: [MatDialogContent, FaIconComponent, ButtonRowComponent, ButtonComponent],
+  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);
+  public dialogRef = inject(MatDialogRef<ReportDialogComponent>);
+
+  public faReport = faCompactDisc;
+  public faClose = faXmark;
+
+  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

@@ -0,0 +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>
+<div mat-dialog-actions>
+  <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.less

@@ -0,0 +1,7 @@
+.qrcode {
+  width: 300px;
+  height: 300px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}

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

@@ -0,0 +1,38 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ShareDialogComponent} from './share-dialog.component';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+describe('ShareDialogComponent', () => {
+  let component: ShareDialogComponent;
+  let fixture: ComponentFixture<ShareDialogComponent>;
+  type ShareDialogComponentInternals = ShareDialogComponent & {
+    generateQrCode: () => Promise<string>;
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ShareDialogComponent],
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            url: 'https://example.com/guest/1',
+            show: {
+              showType: 'service-worship',
+              date: {toDate: () => new Date('2026-03-20T00:00:00Z')},
+            },
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ShareDialogComponent);
+    component = fixture.componentInstance;
+    spyOn(component as ShareDialogComponentInternals, 'generateQrCode').and.resolveTo('data:image/jpeg;base64,test');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    void expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,53 @@
+import {Component, inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
+import {MatButton} from '@angular/material/button';
+import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {Show} from '../../services/show';
+
+export interface ShareDialogData {
+  url: string;
+  show: Show;
+}
+
+@Component({
+  selector: 'app-share-dialog',
+  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose],
+  templateUrl: './share-dialog.component.html',
+  styleUrl: './share-dialog.component.less',
+})
+export class ShareDialogComponent {
+  public data = inject<ShareDialogData>(MAT_DIALOG_DATA);
+
+  public qrCode = '';
+
+  public constructor() {
+    const data = this.data;
+
+    void this.generateQrCode(data.url).then(qrCode => (this.qrCode = qrCode));
+  }
+
+  public async share(): Promise<void> {
+    if (navigator.clipboard) await navigator.clipboard.writeText(this.data.url);
+
+    if (navigator.share)
+      await navigator.share({
+        title: new ShowTypePipe().transform(this.data.show.showType),
+        text: new ShowTypePipe().transform(this.data.show.showType) + ' am ' + this.data.show.date.toDate().toLocaleString('de'),
+        url: this.data.url,
+      });
+  }
+
+  private async generateQrCode(url: string): Promise<string> {
+    const {default: QRCode} = await import('qrcode');
+    return await QRCode.toDataURL(url, {
+      type: 'image/jpeg',
+      quality: 0.92,
+      width: 1280,
+      height: 1280,
+      color: {
+        dark: '#010414',
+        light: '#ffffff',
+      },
+    });
+  }
+}

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

@@ -1,31 +1,33 @@
-<div>
-  <app-card [closeLink]="'/shows/'+form.value.id" heading="Veranstaltung ändern">
-    <div [formGroup]="form" class="split">
-      <mat-form-field appearance="outline">
-        <mat-label>Art der Veranstaltung</mat-label>
-        <mat-select formControlName="showType">
-          <mat-optgroup label="öffentlich">
-            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
-              key | showType
-              }}</mat-option>
-          </mat-optgroup>
-          <mat-optgroup label="privat">
-            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
-              key | showType
-              }}</mat-option>
-          </mat-optgroup>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field appearance="outline">
-        <mat-label>Datum</mat-label>
-        <input [matDatepicker]="picker" formControlName="date" matInput/>
-        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-        <mat-datepicker #picker touchUi></mat-datepicker>
-      </mat-form-field>
-    </div>
+<app-page-frame title="Veranstaltungen" [withMenu]="false">
+  <div content>
+    <app-card [closeLink]="'/shows/'+form.value.id" heading="Veranstaltung ändern">
+      <div [formGroup]="form" class="split">
+        <mat-form-field appearance="outline">
+          <mat-label>Art der Veranstaltung</mat-label>
+          <mat-select formControlName="showType">
+            <mat-optgroup label="öffentlich">
+              @for (key of showTypePublic; track key) {
+                <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-optgroup>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Datum</mat-label>
+          <input [matDatepicker]="picker" formControlName="date" matInput />
+          <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+          <mat-datepicker #picker touchUi></mat-datepicker>
+        </mat-form-field>
+      </div>
 
-    <app-button-row>
-      <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
-    </app-button-row>
-  </app-card>
-</div>
+      <app-button-row>
+        <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
+      </app-button-row>
+    </app-card>
+  </div>
+</app-page-frame>

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

@@ -1,19 +1,53 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {ShowDataService} from '../services/show-data.service';
 import {Observable, take} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
+import {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';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+
+import {MatInput} from '@angular/material/input';
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
 
 @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.less'],
+  imports: [
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOptgroup,
+    MatOption,
+    MatInput,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatSuffix,
+    MatDatepicker,
+    ButtonRowComponent,
+    ButtonComponent,
+    ShowTypePipe,
+    PageFrameComponent,
+  ],
 })
 export class EditComponent implements OnInit {
+  private showService = inject(ShowService);
+  private router = inject(Router);
+  private activatedRoute = inject(ActivatedRoute);
+
   public shows$: Observable<Show[]>;
   public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
   public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
@@ -24,7 +58,9 @@ export class EditComponent implements OnInit {
   });
   public faSave = faSave;
 
-  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router, private activatedRoute: ActivatedRoute) {
+  public constructor() {
+    const showDataService = inject(ShowDataService);
+
     this.shows$ = showDataService.list$;
   }
 
@@ -36,7 +72,7 @@ export class EditComponent implements OnInit {
         map(param => param as {showId: string}),
         map(param => param.showId),
         switchMap((showId: string) => this.showService.read$(showId)),
-        take(1)
+        take(1),
       )
       .subscribe(show => {
         this.form.setValue({
@@ -53,13 +89,15 @@ export class EditComponent implements OnInit {
       return;
     }
 
-    await this.showService.update$(
-      this.form.value.id as string,
-      {
-        date: this.form.value.date,
-        showType: this.form.value.showType,
-      } as Partial<Show>
-    );
-    await this.router.navigateByUrl(`/shows/${this.form.value.id ?? ''}`);
+    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/${id}`);
   }
 }

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

@@ -1,3 +1,6 @@
 export interface FilterValues {
   time: number;
+  owner: string;
+  showType: string;
+  archived: boolean;
 }

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

@@ -1,16 +1,42 @@
 <div [formGroup]="filterFormGroup">
-
   <div class="third">
     <mat-form-field appearance="outline">
       <mat-label>Zeitraum</mat-label>
       <mat-select formControlName="time">
-        <mat-option *ngFor="let time of times" [value]="time.key">{{
-          time.value
-          }}</mat-option>
+        @for (time of times; track time) {
+        <mat-option [value]="time.key">{{ time.value }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
+    <mat-form-field appearance="outline">
+      <mat-label>Ersteller</mat-label>
+      <mat-select formControlName="owner">
+        <mat-option value="">Alle</mat-option>
+        @for (owner of owners; track owner) {
+        <mat-option [value]="owner.key">{{ owner.value }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Art der Veranstaltung</mat-label>
+      <mat-select formControlName="showType">
+        <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-optgroup>
+        <mat-optgroup label="privat">
+          @for (key of showTypePrivate; track key) {
+          <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 }}</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 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.spec.ts

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

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

@@ -1,45 +1,120 @@
-import {Component, Input} from '@angular/core';
+import {Component, DestroyRef, inject, Input} from '@angular/core';
 import {KeyValue} from '@angular/common';
-import {ActivatedRoute, Router} from '@angular/router';
-import {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';
+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, MatCheckbox],
 })
 export class FilterComponent {
-  @Input() public route = '/shows/';
   @Input() public shows: Show[] = [];
-
-  public filterFormGroup: UntypedFormGroup;
+  public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
+  public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
+  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 fb = inject(FormBuilder);
 
-  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
     this.filterFormGroup = fb.group({
-      time: 1,
+      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.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.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$()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(owners => (this.owners = owners));
   }
 
-  private async filerValueChanged<T>(key: string, value: T): Promise<void> {
-    const route = this.router.createUrlTree([this.route], {
-      queryParams: {[key]: value},
-      queryParamsHandling: 'merge',
-    });
-    await this.router.navigateByUrl(route);
+  public owners$ = (): Observable<{key: string; value: string}[]> => {
+    return this.showService.list$().pipe(
+      map(shows =>
+        shows
+          .map(show => show.owner)
+          .filter(onlyUnique)
+          .filter((ownerId): ownerId is string => !!ownerId)
+      ),
+      switchMap(ownerIds => {
+        if (ownerIds.length === 0) {
+          return of([] as {key: string; value: string}[]);
+        }
+
+        return combineLatest(
+          ownerIds.map(ownerId =>
+            this.userService.getUserbyId$(ownerId).pipe(
+              map(user => ({
+                key: ownerId,
+                value: user?.name ?? ownerId,
+              }))
+            )
+          )
+        );
+      }),
+      map(owners => owners.sort(dynamicSort<{key: string; value: string}>('value'))),
+      distinctUntilChanged((left, right) => this.sameOwners(left, right)),
+      map(owners => owners as {key: string; value: string}[])
+    );
+  };
+
+  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 {
+    if (left.length !== right.length) {
+      return false;
+    }
+
+    return left.every((owner, index) => owner.key === right[index]?.key && owner.value === right[index]?.value);
   }
 }

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

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

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

@@ -1,9 +1,16 @@
-@import "../../../../../styles/styles";
-
 .list-item {
   padding: 5px 20px;
   display: grid;
-  grid-template-columns: 100px 150px auto;
+  grid-template-columns: 100px 150px auto 160px;
+  grid-template-areas: "date user show-type badge";
+
+  @media screen and (max-width: 860px) {
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "date user badge" ". show-type badge";
+    row-gap: 3px;
+  }
+
   min-height: 21px;
 
   & > div {
@@ -12,10 +19,28 @@
   }
 
   cursor: pointer;
+  transition: var(--transition);
 
   &:hover {
-    background: @primary-color;
-    color: #fff;
+    background: var(--hover-background);
+    color: var(--text);
+  }
+
+  .date {
+    grid-area: date;
+  }
+
+  .user {
+    grid-area: user;
+  }
+
+  .show-type {
+    grid-area: show-type;
+  }
+
+  .badge {
+    grid-area: badge;
+    justify-content: end;
   }
 }
 

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

@@ -1,26 +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({
-        declarations: [ListItemComponent],
-      }).compileComponents();
-    })
-  );
+  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

@@ -1,11 +1,18 @@
 import {Component, Input} from '@angular/core';
 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, 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,36 +1,45 @@
-<div>
-<!--  <app-list-header *appRole="['leader']"></app-list-header>-->
-  <app-list-header *appRole="['leader']">
-    <app-filter *ngIf="shows$ | async as shows" [shows]="publicShows$ | async"></app-filter>
-  </app-list-header>
-
-  <ng-container *appRole="['leader']">
-    <ng-container *ngIf="privateShows$ | async as shows">
-      <app-card
-        *ngIf="shows.length > 0"
-        [padding]="false"
-        heading="meine Veranstaltungen"
-      >
-        <app-list-item
-          *ngFor="let show of shows | sortBy: 'desc':'date'"
-          [routerLink]="show.id"
-          [show]="show"
-        ></app-list-item>
-      </app-card>
-    </ng-container>
-  </ng-container>
-
-  <ng-container *ngIf="publicShows$ | async as shows">
-    <app-card
-      *ngIf="shows.length > 0"
-      [padding]="false"
-      heading="veröffentlichte Veranstaltungen"
-    >
-      <app-list-item
-        *ngFor="let show of shows | sortBy: 'desc':'date'; trackBy: trackBy"
-        [routerLink]="show.id"
-        [show]="show"
-      ></app-list-item>
-    </app-card>
-  </ng-container>
-</div>
+@if (showSidebar$ | async) {
+  <app-page-frame title="Veranstaltungen">
+    <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-page-frame>
+} @else {
+  <div>
+    @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>
+}

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

@@ -0,0 +1,7 @@
+.sidebar-content {
+  padding: 20px;
+}
+
+.list-action {
+  margin: 10px 20px;
+}

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

@@ -1,26 +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({
-        declarations: [ListComponent],
-      }).compileComponents();
-    })
-  );
+  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

@@ -1,40 +1,91 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {combineLatest} from 'rxjs';
 import {Show} from '../services/show';
 import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
 import {FilterValues} from './filter/filter-values';
-import {ActivatedRoute} from '@angular/router';
-import {map} from 'rxjs/operators';
+import {RouterLink} from '@angular/router';
+import {map, switchMap} from 'rxjs/operators';
+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 {UserService} from '../../../services/user/user.service';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.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: [FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, PageFrameComponent, ButtonComponent, RoleDirective],
 })
 export class ListComponent {
+  public faNewShow = faPlus;
+  private filterStore = inject(FilterStoreService);
+  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));
+  private showService = inject(ShowService);
   public shows$ = this.showService.list$();
-  public privateShows$ = this.showService.list$().pipe(map(show => show.filter(_ => !_.published)));
-  public lastMonths$ = this.activatedRoute.queryParams.pipe(
-    map(params => {
-      const filterValues = params as FilterValues;
-      if (!filterValues?.time) return 1;
-      return +filterValues.time;
-    })
+  public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
+    map(([shows, lastMonths]) => {
+      return shows.filter(show => show.published && !show.archived).filter(show => this.matchesTimeFilter(show, lastMonths));
+    }),
   );
+  public ownShows$ = this.showService.list$(false, true);
+  public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(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;
 
-  public publicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
-    map(_ =>
-      _[0].filter(f => {
-        const d = new Date();
-        d.setMonth(d.getMonth() - _[1]);
-        return f.published && f.date.toDate() >= d;
-      })
-    )
+      return this.sortShowsByDateDesc(shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType));
+    }),
   );
+  private userService = inject(UserService);
+  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;
+        }
 
-  public constructor(private showService: ShowService, private activatedRoute: ActivatedRoute) {}
+        if (show.archived) {
+          return showArchived;
+        }
+
+        return !show.published || show.reportedType === 'pending';
+      }),
+    ),
+    map(shows => this.sortShowsByDateDesc(shows)),
+  );
+  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

@@ -1,31 +1,33 @@
-<div>
-  <app-card closeLink="/shows" heading="Neue Veranstaltung">
-    <div [formGroup]="form" class="split">
-      <mat-form-field appearance="outline">
-        <mat-label>Art der Veranstaltung</mat-label>
-        <mat-select formControlName="showType">
-          <mat-optgroup label="öffentlich">
-            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
-              key | showType
-              }}</mat-option>
-          </mat-optgroup>
-          <mat-optgroup label="privat">
-            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
-              key | showType
-              }}</mat-option>
-          </mat-optgroup>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field appearance="outline">
-        <mat-label>Datum</mat-label>
-        <input [matDatepicker]="picker" formControlName="date" matInput/>
-        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-        <mat-datepicker #picker touchUi></mat-datepicker>
-      </mat-form-field>
-    </div>
+<app-page-frame title="Veranstaltungen" [withMenu]="false">
+  <div content>
+    <app-card closeLink="/shows" heading="Neue Veranstaltung">
+      <div [formGroup]="form" class="split">
+        <mat-form-field appearance="outline">
+          <mat-label>Art der Veranstaltung</mat-label>
+          <mat-select formControlName="showType">
+            <mat-optgroup label="öffentlich">
+              @for (key of showTypePublic; track key) {
+                <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-optgroup>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Datum</mat-label>
+          <input [matDatepicker]="picker" formControlName="date" matInput />
+          <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+          <mat-datepicker #picker touchUi></mat-datepicker>
+        </mat-form-field>
+      </div>
 
-    <app-button-row>
-      <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
-    </app-button-row>
-  </app-card>
-</div>
+      <app-button-row>
+        <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
+      </app-button-row>
+    </app-card>
+  </div>
+</app-page-frame>

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

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

@@ -1,28 +1,62 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {ShowDataService} from '../services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {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';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+
+import {MatInput} from '@angular/material/input';
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
 
 @Component({
   selector: 'app-new',
   templateUrl: './new.component.html',
   styleUrls: ['./new.component.less'],
+  imports: [
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOptgroup,
+    MatOption,
+    MatInput,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatSuffix,
+    MatDatepicker,
+    ButtonRowComponent,
+    ButtonComponent,
+    ShowTypePipe,
+    PageFrameComponent,
+  ],
 })
 export class NewComponent implements OnInit {
+  private showService = inject(ShowService);
+  private router = inject(Router);
+
   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;
 
-  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
+  public constructor() {
+    const showDataService = inject(ShowDataService);
+
     this.shows$ = showDataService.list$;
   }
 
@@ -36,7 +70,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,77 @@
 import {TestBed} from '@angular/core/testing';
-
 import {DocxService} from './docx.service';
 
 describe('DocxService', () => {
   let service: DocxService;
+  type PreparedData = {
+    show: {
+      showType: string;
+      date: {toDate: () => Date};
+    };
+    songs: unknown[];
+    user: {name: string};
+    config: {ccliLicenseId: string};
+  };
+  type DocxModuleLike = {
+    Packer: {toBlob: (document: unknown) => Promise<Blob>};
+  };
+  type DocxServiceInternals = DocxService & {
+    prepareData: (showId: string) => Promise<PreparedData | null>;
+    renderTitle: (docx: unknown, title: string) => unknown[];
+    renderSongs: (docx: unknown, songs: unknown[], options: unknown, config: unknown) => unknown[];
+    prepareNewDocument: (docx: unknown, data: unknown, options?: unknown, sections?: unknown) => unknown;
+    saveAs: (blob: Blob, name: string) => void;
+    loadDocx: () => Promise<DocxModuleLike>;
+  };
 
-  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(serviceInternals, 'prepareData').and.resolveTo(null);
+    const saveAsSpy = spyOn(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 docxModule: DocxModuleLike = {
+      Packer: {
+        toBlob: jasmine.createSpy('toBlob').and.resolveTo(blob),
+      },
+    };
+    const serviceInternals = service as DocxServiceInternals;
+    const prepareDataSpy = spyOn(serviceInternals, 'prepareData').and.resolveTo({
+      show: {
+        showType: 'service-worship',
+        date: {toDate: () => new Date('2026-03-10T00:00:00Z')},
+      },
+      songs: [],
+      user: {name: 'Benjamin'},
+      config: {ccliLicenseId: '12345'},
+    });
+    spyOn(serviceInternals, 'loadDocx').and.resolveTo(docxModule);
+    spyOn(serviceInternals, 'renderTitle').and.returnValue([]);
+    spyOn(serviceInternals, 'renderSongs').and.returnValue([]);
+    const prepareNewDocumentSpy = spyOn(serviceInternals, 'prepareNewDocument').and.returnValue({doc: true});
+    const saveAsSpy = spyOn(serviceInternals, 'saveAs');
+
+    await service.create('show-1', {copyright: true});
+
+    expect(prepareDataSpy).toHaveBeenCalledWith('show-1');
+    expect(prepareNewDocumentSpy).toHaveBeenCalled();
+    expect(docxModule.Packer.toBlob).toHaveBeenCalledWith({doc: true} as never);
+    expect(saveAsSpy).toHaveBeenCalledWith(blob, jasmine.stringMatching(/\.docx$/));
+  });
 });

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

@@ -1,10 +1,8 @@
-import {Injectable} from '@angular/core';
-import {Document, HeadingLevel, ISectionOptions, Packer, Paragraph} from 'docx';
+import {Injectable, inject} from '@angular/core';
 import {ShowService} from './show.service';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {ShowSongService} from './show-song.service';
 import {Song} from '../../songs/services/song';
-import {SongService} from '../../songs/services/song.service';
 import {ShowSong} from './show-song';
 import {Show} from './show';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
@@ -18,6 +16,11 @@ import {LineType} from '../../songs/services/line-type';
 import {Line} from '../../songs/services/line';
 import {firstValueFrom} from 'rxjs';
 
+type DocxModule = typeof import('docx');
+type DocxDocument = import('docx').Document;
+type DocxParagraph = import('docx').Paragraph;
+type DocxSectionOptions = import('docx').ISectionOptions;
+
 export interface DownloadOptions {
   copyright?: boolean;
   chordMode?: ChordMode;
@@ -27,25 +30,23 @@ export interface DownloadOptions {
   providedIn: 'root',
 })
 export class DocxService {
-  public constructor(
-    private showService: ShowService,
-    private showSongService: ShowSongService,
-    private songService: SongService,
-    private textRenderingService: TextRenderingService,
-    private userService: UserService,
-    private configService: ConfigService
-  ) {}
+  private showService = inject(ShowService);
+  private showSongService = inject(ShowSongService);
+  private textRenderingService = inject(TextRenderingService);
+  private userService = inject(UserService);
+  private configService = inject(ConfigService);
 
   public async create(showId: string, options: DownloadOptions = {}): Promise<void> {
     const data = await this.prepareData(showId);
     if (!data) return;
+    const docx = await this.loadDocx();
     const {show, songs, user, config} = data;
     const type = new ShowTypePipe().transform(show.showType);
     const title = `${type} ${show.date.toDate().toLocaleDateString()}`;
 
-    const paragraphs = [...this.renderTitle(title), ...this.renderSongs(songs, options, config)];
+    const paragraphs = [...this.renderTitle(docx, title), ...this.renderSongs(docx, songs, options, config)];
 
-    const sections: ISectionOptions[] = [
+    const sections: DocxSectionOptions[] = [
       {
         properties: {
           page: {
@@ -55,16 +56,16 @@ export class DocxService {
         children: paragraphs,
       },
     ];
-    const document = this.prepareNewDocument(type, user.name, options, sections);
+    const document = this.prepareNewDocument(docx, type, user.name, options, sections);
 
-    const blob = await Packer.toBlob(document);
+    const blob = await docx.Packer.toBlob(document);
 
     // saveAs from FileSaver will download the file
     this.saveAs(blob, `${title}.docx`);
   }
 
-  private prepareNewDocument(type: string, name: string, options: DownloadOptions, sections: ISectionOptions[]): Document {
-    return new Document({
+  private prepareNewDocument(docx: DocxModule, type: string, name: string, options: DownloadOptions, sections: DocxSectionOptions[]): DocxDocument {
+    return new docx.Document({
       creator: name,
       title: type,
       description: '... mit Beschreibung',
@@ -94,26 +95,34 @@ export class DocxService {
     });
   }
 
-  private renderSongs(songs: {showSong: ShowSong; sections: Section[]}[], options: DownloadOptions, config: Config): Paragraph[] {
-    return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.showSong, song.sections, options, config)], []);
+  private renderSongs(
+    docx: DocxModule,
+    songs: {
+      showSong: ShowSong;
+      sections: Section[];
+    }[],
+    options: DownloadOptions,
+    config: Config
+  ): DocxParagraph[] {
+    return songs.reduce((p: DocxParagraph[], song) => [...p, ...this.renderSong(docx, song.showSong, song.showSong, song.sections, options, config)], []);
   }
 
-  private renderSong(showSong: ShowSong, song: Song, sections: Section[], options: DownloadOptions, config: Config): Paragraph[] {
-    const songTitle = this.renderSongTitle(song);
-    const copyright = this.renderCopyright(song, options, config);
-    const songText = this.renderSongText(sections, options?.chordMode ?? showSong.chordMode);
+  private renderSong(docx: DocxModule, showSong: ShowSong, song: Song, sections: Section[], options: DownloadOptions, config: Config): DocxParagraph[] {
+    const songTitle = this.renderSongTitle(docx, song);
+    const copyright = this.renderCopyright(docx, song, options, config);
+    const songText = this.renderSongText(docx, sections, options?.chordMode ?? showSong.chordMode);
 
     return copyright ? [songTitle, copyright, ...songText] : [songTitle, ...songText];
   }
 
-  private renderSongText(sections: Section[], chordMode: ChordMode): Paragraph[] {
-    return sections.reduce((p: Paragraph[], section) => [...p, ...this.renderSection(section, chordMode)], []);
+  private renderSongText(docx: DocxModule, sections: Section[], chordMode: ChordMode): DocxParagraph[] {
+    return sections.reduce((p: DocxParagraph[], section) => [...p, ...this.renderSection(docx, section, chordMode)], []);
   }
 
-  private renderSongTitle(song: Song): Paragraph {
-    return new Paragraph({
+  private renderSongTitle(docx: DocxModule, song: Song): DocxParagraph {
+    return new docx.Paragraph({
       text: song.title,
-      heading: HeadingLevel.HEADING_2,
+      heading: docx.HeadingLevel.HEADING_2,
       thematicBreak: true,
       spacing: {
         before: 200,
@@ -121,7 +130,7 @@ export class DocxService {
     });
   }
 
-  private renderCopyright(song: Song, options: DownloadOptions, config: Config): Paragraph | null {
+  private renderCopyright(docx: DocxModule, song: Song, options: DownloadOptions, config: Config): DocxParagraph | null {
     if (!options?.copyright) {
       return null;
     }
@@ -132,13 +141,13 @@ export class DocxService {
     const origin = song.origin ? song.origin + ', ' : '';
     const licence = song.legalOwner === 'CCLI' ? 'CCLI-Liednummer: ' + song.legalOwnerId + ', CCLI-Lizenz: ' + config.ccliLicenseId : 'CCLI-Liednummer: ' + song.legalOwnerId;
 
-    return new Paragraph({
+    return new docx.Paragraph({
       text: artist + label + termsOfUse + origin + licence,
       style: 'licence',
     });
   }
 
-  private renderSection(section: Section, chordMode: ChordMode): Paragraph[] {
+  private renderSection(docx: DocxModule, section: Section, chordMode: ChordMode): DocxParagraph[] {
     return section.lines
       .filter(line => {
         if (line.type === LineType.text) {
@@ -153,22 +162,22 @@ export class DocxService {
             return section.number === 0;
         }
       })
-      .map((line, i) => this.renderLine(line, i === 0));
+      .map((line, i) => this.renderLine(docx, line, i === 0));
   }
 
-  private renderLine(line: Line, isFirstLine: boolean): Paragraph {
+  private renderLine(docx: DocxModule, line: Line, isFirstLine: boolean): DocxParagraph {
     const spacing = isFirstLine ? {before: 200} : {};
-    return new Paragraph({
+    return new docx.Paragraph({
       text: line.text,
       style: 'songtext',
       spacing,
     });
   }
 
-  private renderTitle(type: string): Paragraph[] {
-    const songTitle = new Paragraph({
+  private renderTitle(docx: DocxModule, type: string): DocxParagraph[] {
+    const songTitle = new docx.Paragraph({
       text: type,
-      heading: HeadingLevel.HEADING_1,
+      heading: docx.HeadingLevel.HEADING_1,
       thematicBreak: true,
     });
 
@@ -189,18 +198,26 @@ export class DocxService {
     if (!config) return null;
 
     const showSongs = await this.showSongService.list(showId);
-    const songsAsync = showSongs.map(showSong => {
-      const sections = this.textRenderingService.parse(showSong.text, {
-        baseKey: showSong.keyOriginal,
-        targetKey: showSong.key,
-      });
-      return {
-        showSong,
-        sections,
-      };
-    });
-    const songsLoaded = (await Promise.all(songsAsync)).filter(_ => !!_).map(_ => _ as {showSong: ShowSong; sections: Section[]});
-    const songs = show.order.map(_ => songsLoaded.filter(f => f.showSong.id === _)[0]);
+    const songsLoaded = showSongs
+      .map(showSong => {
+        const sections = this.textRenderingService.parse(showSong.text, {
+          baseKey: showSong.keyOriginal,
+          targetKey: showSong.key,
+        });
+        return {
+          showSong,
+          sections,
+        };
+      })
+      .filter(_ => !!_)
+      .map(
+        _ =>
+          _ as {
+            showSong: ShowSong;
+            sections: Section[];
+          }
+      );
+    const songs = show.order.map(_ => songsLoaded.find(f => f.showSong.id === _)).filter(_ => !!_);
     return {songs, show, user, config};
   }
 
@@ -221,4 +238,8 @@ export class DocxService {
       document.body.removeChild(a);
     }, 1000);
   }
+
+  private loadDocx(): Promise<DocxModule> {
+    return import('docx');
+  }
 }

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

@@ -1,12 +1,111 @@
 import {TestBed} from '@angular/core/testing';
-
+import {firstValueFrom, of, Subject} from 'rxjs';
+import {take} from 'rxjs/operators';
+import {DbService} from '../../../services/db.service';
 import {ShowDataService} from './show-data.service';
 
 describe('ShowDataService', () => {
-  beforeEach(() => void TestBed.configureTestingModule({}));
+  let service: ShowDataService;
+  let shows$: Subject<Array<{id: string; date: {toMillis: () => number}; archived?: boolean}>>;
+  let docUpdateSpy: jasmine.Spy<() => Promise<void>>;
+  let docSpy: jasmine.Spy;
+  let colAddSpy: jasmine.Spy<() => Promise<{id: string}>>;
+  let colSpy: jasmine.Spy;
+  let dbServiceSpy: jasmine.SpyObj<DbService>;
+
+  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});
+    colAddSpy = jasmine.createSpy('add').and.resolveTo({id: 'show-3'});
+    colSpy = jasmine.createSpy('col').and.returnValue({add: colAddSpy});
+    dbServiceSpy = jasmine.createSpyObj<DbService>('DbService', ['col$', 'doc$', 'doc', 'col']);
+    dbServiceSpy.col$.and.returnValue(shows$.asObservable());
+    dbServiceSpy.doc$.and.returnValue(of(null));
+    dbServiceSpy.doc.and.callFake(docSpy);
+    dbServiceSpy.col.and.callFake(colSpy);
+
+    await TestBed.configureTestingModule({
+      providers: [{provide: DbService, useValue: dbServiceSpy}],
+    });
+
+    service = TestBed.inject(ShowDataService);
+  });
 
   it('should be created', () => {
-    const service: ShowDataService = TestBed.inject(ShowDataService);
-    void expect(service).toBeTruthy();
+    expect(service).toBeTruthy();
+  });
+
+  it('should load the raw show list from the shows collection on creation', () => {
+    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows');
+  });
+
+  it('should sort the list by ascending show date', async () => {
+    const listPromise = firstValueFrom(service.list$.pipe(take(1)));
+
+    shows$.next([
+      {id: 'show-2', date: {toMillis: () => 200}},
+      {id: 'show-1', date: {toMillis: () => 100}},
+      {id: 'show-3', date: {toMillis: () => 300}},
+    ]);
+
+    const list = await listPromise;
+
+    expect(list.map(show => show.id)).toEqual(['show-1', 'show-2', 'show-3']);
+  });
+
+  it('should replay the latest sorted list to late subscribers', async () => {
+    const initialSubscription = service.list$.subscribe();
+
+    shows$.next([
+      {id: 'show-2', date: {toMillis: () => 200}},
+      {id: 'show-1', date: {toMillis: () => 100}},
+    ]);
+
+    const replayedList = await firstValueFrom(service.list$.pipe(take(1)));
+
+    expect(replayedList.map(show => show.id)).toEqual(['show-1', 'show-2']);
+
+    initialSubscription.unsubscribe();
+  });
+
+  it('should expose the raw list without sorting via listRaw$', () => {
+    service.listRaw$().subscribe();
+
+    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows');
+  });
+
+  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'}]);
+    dbServiceSpy.col$.and.returnValue(publicShows$ as never);
+
+    const result = await firstValueFrom(service.listPublicSince$(3));
+
+    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows', jasmine.any(Array));
+    const [, queryConstraints] = dbServiceSpy.col$.calls.mostRecent().args as [string, unknown[]];
+    expect(queryConstraints.length).toBe(3);
+    expect(result.map(show => show.id)).toEqual(['show-1', 'show-3']);
+  });
+
+  it('should read a single show by id', () => {
+    service.read$('show-7').subscribe();
+
+    expect(dbServiceSpy.doc$).toHaveBeenCalledWith('shows/show-7');
+  });
+
+  it('should update a show at the expected document path', async () => {
+    await service.update('show-8', {archived: true});
+
+    expect(docSpy).toHaveBeenCalledWith('shows/show-8');
+    const [updatePayload] = docUpdateSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
+    expect(updatePayload).toEqual({archived: true});
+  });
+
+  it('should add a show to the shows collection and return the new id', async () => {
+    await expectAsync(service.add({published: true})).toBeResolvedTo('show-3');
+
+    expect(colSpy).toHaveBeenCalledWith('shows');
+    const [addPayload] = colAddSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
+    expect(addPayload).toEqual({published: true});
   });
 });

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

@@ -1,26 +1,50 @@
-import {Injectable} from '@angular/core';
-import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
+import {Injectable, inject} from '@angular/core';
+import {Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
-import {map} from 'rxjs/operators';
+import {map, shareReplay} from 'rxjs/operators';
+import {orderBy, QueryConstraint, Timestamp, where} from 'firebase/firestore';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ShowDataService {
-  private collection = 'shows';
+  private dbService = inject(DbService);
 
-  public constructor(private dbService: DbService) {
-    this.dbService.col$<Show>(this.collection).subscribe(_ => this.list$.next(_));
+  private collection = 'shows';
+  public list$: Observable<Show[]> = this.dbService.col$<Show>(this.collection).pipe(
+    // server-side ordering cuts client work and keeps stable order across subscribers
+    map(shows => [...shows].sort((a, b) => a.date.toMillis() - b.date.toMillis())),
+    shareReplay({
+      bufferSize: 1,
+      refCount: true,
+    })
+  );
+
+  public 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);
+      queryConstraints.splice(1, 0, where('date', '>=', startTimestamp));
+    }
+
+    return this.dbService.col$<Show>(this.collection, queryConstraints).pipe(
+      map(shows => shows.filter(show => !show.archived)),
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      })
+    );
   }
 
-  public list$ = new BehaviorSubject<Show[]>([]);
-  public list = () => firstValueFrom(this.dbService.col$<Show>(this.collection));
+  public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
 
-  public read$ = (showId: string): Observable<Show | null> => this.list$.pipe(map(_ => _.find(s => s.id === showId) || null));
-
-  // public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);
-  // public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
   public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
   public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
 }

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

@@ -1,16 +1,98 @@
 import {TestBed} from '@angular/core/testing';
-
+import {of} from 'rxjs';
+import {DbService} from '../../../services/db.service';
 import {ShowSongDataService} from './show-song-data.service';
 
 describe('ShowSongDataService', () => {
   let service: ShowSongDataService;
+  let docUpdateSpy: jasmine.Spy<() => Promise<void>>;
+  let docDeleteSpy: jasmine.Spy<() => Promise<void>>;
+  let docSpy: jasmine.Spy;
+  let colAddSpy: jasmine.Spy<() => Promise<{id: string}>>;
+  let colSpy: jasmine.Spy;
+  let dbServiceSpy: jasmine.SpyObj<DbService>;
+
+  beforeEach(async () => {
+    docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
+    docDeleteSpy = jasmine.createSpy('delete').and.resolveTo();
+    docSpy = jasmine.createSpy('doc').and.returnValue({
+      update: docUpdateSpy,
+      delete: docDeleteSpy,
+    });
+    colAddSpy = jasmine.createSpy('add').and.resolveTo({id: 'show-song-3'});
+    colSpy = jasmine.createSpy('col').and.returnValue({add: colAddSpy});
+    dbServiceSpy = jasmine.createSpyObj<DbService>('DbService', ['col$', 'doc$', 'doc', 'col']);
+    dbServiceSpy.col$.and.callFake(() => of([{id: 'show-song-1'}]) as never);
+    dbServiceSpy.doc$.and.returnValue(of({id: 'show-song-1'}) as never);
+    dbServiceSpy.doc.and.callFake(docSpy);
+    dbServiceSpy.col.and.callFake(colSpy);
+
+    await TestBed.configureTestingModule({
+      providers: [{provide: DbService, useValue: dbServiceSpy}],
+    });
 
-  beforeEach(() => {
-    void TestBed.configureTestingModule({});
     service = TestBed.inject(ShowSongDataService);
   });
 
   it('should be created', () => {
-    void expect(service).toBeTruthy();
+    expect(service).toBeTruthy();
+  });
+
+  it('should cache the list observable per show id when no query constraints are passed', () => {
+    const first = service.list$('show-1');
+    const second = service.list$('show-1');
+
+    expect(first).toBe(second);
+    expect(dbServiceSpy.col$).toHaveBeenCalledTimes(1);
+    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows/show-1/songs');
+  });
+
+  it('should not reuse the cache when query constraints are passed', () => {
+    const constraints = [{}] as never[];
+
+    const first = service.list$('show-1', constraints as never);
+    const second = service.list$('show-1', constraints as never);
+
+    expect(first).not.toBe(second);
+    expect(dbServiceSpy.col$).toHaveBeenCalledTimes(2);
+    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows/show-1/songs', constraints as never);
+  });
+
+  it('should keep separate caches for different shows', () => {
+    service.list$('show-1');
+    service.list$('show-2');
+
+    expect(dbServiceSpy.col$).toHaveBeenCalledTimes(2);
+    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows/show-1/songs');
+    expect(dbServiceSpy.col$).toHaveBeenCalledWith('shows/show-2/songs');
+  });
+
+  it('should read a single show song by nested document path', () => {
+    service.read$('show-4', 'song-5').subscribe();
+
+    expect(dbServiceSpy.doc$).toHaveBeenCalledWith('shows/show-4/songs/song-5');
+  });
+
+  it('should update a nested show song document', async () => {
+    await service.update$('show-4', 'song-5', {title: 'Updated'} as never);
+
+    expect(docSpy).toHaveBeenCalledWith('shows/show-4/songs/song-5');
+    const [updatePayload] = docUpdateSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
+    expect(updatePayload).toEqual({title: 'Updated'});
+  });
+
+  it('should delete a nested show song document', async () => {
+    await service.delete('show-4', 'song-5');
+
+    expect(docSpy).toHaveBeenCalledWith('shows/show-4/songs/song-5');
+    expect(docDeleteSpy).toHaveBeenCalled();
+  });
+
+  it('should add a song to the nested show songs collection and return the id', async () => {
+    await expectAsync(service.add('show-4', {songId: 'song-5'} as never)).toBeResolvedTo('show-song-3');
+
+    expect(colSpy).toHaveBeenCalledWith('shows/show-4/songs');
+    const [addPayload] = colAddSpy.calls.mostRecent().args as unknown as [Record<string, unknown>];
+    expect(addPayload).toEqual({songId: 'song-5'});
   });
 });

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

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

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

@@ -1,16 +1,135 @@
 import {TestBed} from '@angular/core/testing';
-
+import {BehaviorSubject, of} from 'rxjs';
+import {SongDataService} from '../../songs/services/song-data.service';
+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;
+  let showSongDataServiceSpy: jasmine.SpyObj<ShowSongDataService>;
+  let songDataServiceSpy: jasmine.SpyObj<SongDataService>;
+  let userServiceSpy: jasmine.SpyObj<UserService>;
+  let showServiceSpy: jasmine.SpyObj<ShowService>;
+  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(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'], {
+      user$: user$.asObservable(),
+    });
+    showServiceSpy = jasmine.createSpyObj<ShowService>('ShowService', ['read$', 'update$']);
+
+    showSongDataServiceSpy.add.and.resolveTo('show-song-2');
+    showSongDataServiceSpy.read$.and.returnValue(of(showSong));
+    showSongDataServiceSpy.list$.and.returnValue(of([showSong]));
+    showSongDataServiceSpy.delete.and.resolveTo();
+    showSongDataServiceSpy.update$.and.resolveTo();
+    songDataServiceSpy.read$.and.returnValue(of(song));
+    userServiceSpy.incSongCount.and.resolveTo();
+    userServiceSpy.decSongCount.and.resolveTo();
+    showServiceSpy.read$.and.returnValue(of(show));
+    showServiceSpy.update$.and.resolveTo();
+
+    await TestBed.configureTestingModule({
+      providers: [
+        {provide: ShowSongDataService, useValue: showSongDataServiceSpy},
+        {provide: SongDataService, useValue: songDataServiceSpy},
+        {provide: UserService, useValue: userServiceSpy},
+        {provide: ShowService, useValue: showServiceSpy},
+      ],
+    });
 
-  beforeEach(() => {
-    void TestBed.configureTestingModule({});
     service = TestBed.inject(ShowSongService);
   });
 
   it('should be created', () => {
-    void expect(service).toBeTruthy();
+    expect(service).toBeTruthy();
+  });
+
+  it('should create a show song from the song and current user', async () => {
+    await expectAsync(service.new$('show-1', 'song-1', true)).toBeResolvedTo('show-song-2');
+
+    expect(userServiceSpy.incSongCount).toHaveBeenCalledWith('song-1');
+    expect(showSongDataServiceSpy.add).toHaveBeenCalledWith('show-1', {
+      ...song,
+      songId: 'song-1',
+      key: 'G',
+      keyOriginal: 'G',
+      chordMode: 'onlyFirst',
+      addedLive: true,
+    });
+  });
+
+  it('should return null when the song is missing', async () => {
+    songDataServiceSpy.read$.and.returnValue(of(null));
+
+    await expectAsync(service.new$('show-1', 'song-1')).toBeResolvedTo(null);
+
+    expect(showSongDataServiceSpy.add).not.toHaveBeenCalled();
+    expect(userServiceSpy.incSongCount).not.toHaveBeenCalled();
+  });
+
+  it('should return null when the current user is missing', async () => {
+    user$.next(null);
+
+    await expectAsync(service.new$('show-1', 'song-1')).toBeResolvedTo(null);
+
+    expect(showSongDataServiceSpy.add).not.toHaveBeenCalled();
+    expect(userServiceSpy.incSongCount).not.toHaveBeenCalled();
+  });
+
+  it('should delegate reads to the data service', async () => {
+    await expectAsync(service.read('show-1', 'show-song-1')).toBeResolvedTo(showSong);
+    expect(showSongDataServiceSpy.read$).toHaveBeenCalledWith('show-1', 'show-song-1');
+  });
+
+  it('should delegate list access to the data service', async () => {
+    await expectAsync(service.list('show-1')).toBeResolvedTo([showSong]);
+    expect(showSongDataServiceSpy.list$).toHaveBeenCalledWith('show-1');
+  });
+
+  it('should delete a show song, update the order and decrement song usage', async () => {
+    await service.delete$('show-1', 'show-song-1', 0);
+
+    expect(showSongDataServiceSpy.delete).toHaveBeenCalledWith('show-1', 'show-song-1');
+    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', jasmine.objectContaining({order: ['show-song-2']}));
+    expect(userServiceSpy.decSongCount).toHaveBeenCalledWith('song-1');
+  });
+
+  it('should stop delete when the show is missing', async () => {
+    showServiceSpy.read$.and.returnValue(of(null));
+
+    await service.delete$('show-1', 'show-song-1', 0);
+
+    expect(showSongDataServiceSpy.delete).not.toHaveBeenCalled();
+    expect(showServiceSpy.update$).not.toHaveBeenCalled();
+    expect(userServiceSpy.decSongCount).not.toHaveBeenCalled();
+  });
+
+  it('should stop delete when the show song is missing', async () => {
+    showSongDataServiceSpy.read$.and.returnValue(of(null));
+
+    await service.delete$('show-1', 'show-song-1', 0);
+
+    expect(showSongDataServiceSpy.delete).not.toHaveBeenCalled();
+    expect(showServiceSpy.update$).not.toHaveBeenCalled();
+    expect(userServiceSpy.decSongCount).not.toHaveBeenCalled();
+  });
+
+  it('should delegate updates to the data service', async () => {
+    await service.update$('show-1', 'show-song-1', {title: 'Updated'} as never);
+
+    expect(showSongDataServiceSpy.update$).toHaveBeenCalledWith('show-1', 'show-song-1', {title: 'Updated'} as never);
   });
 });