fix dark mode css

.eslintrc.json

@@ -1,86 +1,33 @@
 {
   "root": true,
-  "ignorePatterns": [
+  "ignorePatterns": ["projects/**/*"],
-    "projects/**/*"
-  ],
   "overrides": [
     {
-      "files": [
+      "files": ["*.ts"],
-        "*.ts"
+      "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
-      ],
-      "parserOptions": {
-        "project": [
-          "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"
-      ],
       "rules": {
-        "prettier/prettier": [
-          "error",
-          {
-            "endOfLine": "auto"
-          }
-        ],
-        "@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",
+            "style": "camelCase"
-            "type": "attribute"
           }
-        ]
+        ],
-      }
+        "@angular-eslint/component-selector": [
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
-      "rules": {
-        "prettier/prettier": [
           "error",
           {
-            "endOfLine": "auto"
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
           }
         ]
       }
     },
     {
-      "files": [
+      "files": ["*.html"],
-        "*.spec.ts"
+      "extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
-      ],
+      "rules": {}
-      "rules": {
-        "@typescript-eslint/await-thenable": "off",
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-floating-promises": "off",
-        "@typescript-eslint/no-unsafe-argument": "off",
-        "@typescript-eslint/no-unsafe-assignment": "off",
-        "@typescript-eslint/no-unsafe-call": "off",
-        "@typescript-eslint/no-unsafe-member-access": "off",
-        "@typescript-eslint/no-unsafe-return": "off"
-      }
     }
   ]
 }

.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

angular.json

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

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,11 +1,12 @@
 {
   "name": "wgenerator",
-  "version": "1.6",
+  "version": "2.0",
   "scripts": {
     "start": "ng serve",
     "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",
     "update": "ng update @angular/cdk @angular/cli @angular/core @angular/material && ncu -u && npm i && npm fix"
@@ -47,22 +48,16 @@
     "@angular/cli": "^21.2.1",
     "@angular/compiler-cli": "^21.2.2",
     "@angular/language-service": "^21.2.2",
-    "@types/jasmine": "~6.0.0",
-    "@types/jasminewd2": "~2.0.13",
     "@typescript-eslint/eslint-plugin": "^8.57.0",
     "@typescript-eslint/parser": "^8.57.0",
+    "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",
-    "jasmine-core": "~6.1.0",
+    "jsdom": "^29.0.0",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.2.0",
     "prettier": "^3.8.1",
-    "typescript": "~5.9.3"
+    "typescript": "~5.9.3",
+    "vitest": "^4.1.0"
   }
 }

src/app/app-routing.module.ts

@@ -1,5 +1,9 @@
 import {NgModule} from '@angular/core';
-import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
+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';
 
@@ -12,6 +16,7 @@ const routes: Routes = [
   {
     path: 'songs',
     loadChildren: () => import('./modules/songs/songs.module').then(m => m.SongsModule),
+    providers: [provideStorage(() => getStorage(inject(FirebaseApp)))],
     canActivate: [AuthGuard, RoleGuard],
     data: {
       requiredRoles: ['user'],
@@ -50,7 +55,6 @@ const routes: Routes = [
 @NgModule({
   imports: [
     RouterModule.forRoot(routes, {
-      preloadingStrategy: PreloadAllModules,
       scrollPositionRestoration: 'enabled',
       // relativeLinkResolution: 'legacy',
     }),

src/app/app.component.html

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

src/app/app.component.spec.ts

@@ -1,13 +1,13 @@
-import {TestBed, waitForAsync} from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 import {RouterTestingModule} from '@angular/router/testing';
 import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
-    void TestBed.configureTestingModule({
+    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} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit, inject} from '@angular/core';
 import {fader} from './animations';
-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',
@@ -14,7 +14,7 @@ import {NavigationComponent} from './widget-modules/components/application-frame
 })
 export class AppComponent implements OnInit {
   public constructor() {
-    register();
+    inject(ThemeService);
   }
 
   public ngOnInit(): void {

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

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

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

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

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

@@ -1,4 +1,5 @@
 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';
@@ -11,6 +12,7 @@ describe('GuestShowDataService', () => {
   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();
@@ -26,9 +28,13 @@ describe('GuestShowDataService', () => {
     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}],
+      providers: [
+        {provide: DbService, useValue: dbServiceSpy},
+        {provide: Firestore, useValue: firestoreStub},
+      ],
     });
 
     service = TestBed.inject(GuestShowDataService);

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

@@ -1,4 +1,5 @@
-import {Injectable, inject} from '@angular/core';
+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';
@@ -9,6 +10,8 @@ import {GuestShow} from './guest-show';
 })
 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(
@@ -19,6 +22,18 @@ export class GuestShowDataService {
   );
 
   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;

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

@@ -38,11 +38,15 @@ describe('GuestShowService', () => {
 
     await expectAsync(service.share(show, songs)).toBeResolvedTo(expectedUrl);
 
-    expect(guestShowDataServiceSpy.add).toHaveBeenCalledWith({
+    const [addPayload] = guestShowDataServiceSpy.add.calls.mostRecent().args as [Record<string, unknown>];
-      showType: 'service-worship',
+    expect(addPayload).toEqual(
-      date: show.date,
+      jasmine.objectContaining({
-      songs,
+        showType: 'service-worship',
-    });
+        date: show.date,
+        songs,
+      })
+    );
+    expect(addPayload['updatedAt']).toEqual(jasmine.any(Date));
     expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {shareId: 'share-1'});
   });
 
@@ -53,11 +57,16 @@ describe('GuestShowService', () => {
 
     await expectAsync(service.share(show, songs)).toBeResolvedTo(expectedUrl);
 
-    expect(guestShowDataServiceSpy.update$).toHaveBeenCalledWith('share-9', {
+    const [shareId, updatePayload] = guestShowDataServiceSpy.update$.calls.mostRecent().args as [string, Record<string, unknown>];
-      showType: 'service-worship',
+    expect(shareId).toBe('share-9');
-      date: show.date,
+    expect(updatePayload).toEqual(
-      songs,
+      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

@@ -15,6 +15,7 @@ export class GuestShowService {
     const data = {
       showType: show.showType,
       date: show.date,
+      updatedAt: new Date(),
       songs: songs,
     };
     let shareId = show.shareId;

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

@@ -5,5 +5,6 @@ export interface GuestShow {
   id: string;
   showType: string;
   date: Timestamp;
+  updatedAt?: Timestamp | Date;
   songs: Song[];
 }

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

@@ -1,12 +1,12 @@
-@if (show$|async; as show) {
+@if (showState$ | async; as state) { @if (state.status === 'loaded') {
 <div class="page">
   <div class="title">
-    <div class="left">{{ show.showType|showType }}</div>
+    <div class="left">{{ state.show.showType | showType }}</div>
-    <div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
+    <div class="right">{{ state.show.date | date: 'dd.MM.yyyy' }}</div>
   </div>
   <div class="view">
     <swiper-container scrollbar="true">
-      @for (song of show.songs; track trackBy(i, song); let i = $index) {
+      @for (song of state.show.songs; track song.id) {
       <swiper-slide class="song-swipe">
         <div class="song-title">{{ song.title }}</div>
         <div class="legal">
@@ -20,4 +20,10 @@
     </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

@@ -57,3 +57,13 @@ app-song-text {
   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,24 +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(() => {
+  beforeEach(async () => {
-    void TestBed.configureTestingModule({
+    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,12 +1,14 @@
 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 {map, switchMap} from 'rxjs/operators';
+import {catchError, map, switchMap} from 'rxjs/operators';
 import {Song} from '../songs/services/song';
-import {ConfigService} from '../../services/config.service';
-import {AsyncPipe, DatePipe} from '@angular/common';
 import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
 import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {concat, from, Observable, of} from 'rxjs';
+import {GuestShow} from './guest-show';
+import {ensureSwiperElement} from '../../services/swiper-element';
 
 @Component({
   selector: 'app-guest',
@@ -18,13 +20,89 @@ import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show
 export class GuestComponent {
   private currentRoute = inject(ActivatedRoute);
   private service = inject(GuestShowDataService);
-  private configService = inject(ConfigService);
 
-  public show$ = this.currentRoute.params.pipe(
+  public constructor() {
+    void ensureSwiperElement();
+  }
+
+  public showState$: Observable<GuestShowState> = this.currentRoute.params.pipe(
     map(param => param.id as string),
-    switchMap(id => this.service.read$(id))
+    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 config$ = this.configService.get$();
 
   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/presentation/monitor/legal/legal.component.spec.ts

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

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

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

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

@@ -36,7 +36,7 @@
   filter: blur(10px);
 
   &.visible {
-    opacity: 0.5;
+    opacity: 0.7;
   }
 }
 
@@ -54,7 +54,7 @@
   filter: blur(5px);
 
   &.visible {
-    opacity: 0.4;
+    opacity: 0.6;
   }
 }
 
@@ -63,7 +63,7 @@
   filter: blur(8px);
 
   &.visible {
-    opacity: 0.2;
+    opacity: 0.4;
   }
 }
 
@@ -72,7 +72,7 @@
   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,11 +6,11 @@ describe('MonitorComponent', () => {
   let component: MonitorComponent;
   let fixture: ComponentFixture<MonitorComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [MonitorComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MonitorComponent);

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

@@ -1,83 +1,128 @@
-@if (show) {
+<app-page-frame title="Präsentation" [withMenu]="false">
-<div @fade>
+  @if (show) {
-  <app-card [closeIcon]="faIcon" [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
+    <app-card [closeIcon]="faIcon"
-    @if (!progress) {
+              [heading]="show.showType | showType"
-    <div class="song">
+              [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
-      @if (show) {
+              closeLink="/presentation/select"
-      <div class="song-parts">
+              content>
-        <div (click)="onSectionClick('title', -1, show.id)" [class.active]="show.presentationSongId === 'title'" class="song-part">
+      @if (!progress) {
-          <div class="head">Veranstaltung</div>
+        <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 (click)="onSectionClick('empty', -1, show.id)" [class.active]="show.presentationSongId === 'empty'" class="song-part">
+        @for (song of presentationSongs; track trackBy($index, song)) {
-          <div class="head">Leer</div>
+          <div class="song">
-        </div>
+            @if (show) {
-      </div>
+              <div [class.active]="show.presentationSongId === song.id" class="title song-part">
-      }
+                <div
-    </div>
+                  (click)="onSectionClick(song.id, -1, show.id)"
-    @for (song of presentationSongs; track trackBy($index, song)) {
+                  (keydown.enter)="onSectionClick(song.id, -1, show.id)"
-    <div class="song">
+                  (keydown.space)="onSectionClick(song.id, -1, show.id)"
-      @if (show) {
+                  class="head"
-      <div [class.active]="show.presentationSongId === song.id" class="title song-part">
+                  role="button"
-        <div (click)="onSectionClick(song.id, -1, show.id)" class="head">{{ song.title }}</div>
+                  tabindex="0"
-      </div>
+                >
-      } @if (show) {
+                  {{ song.title }}
-      <div class="song-parts">
+                </div>
-        @for (section of song.sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
+              </div>
-        <div
+            }
-          (click)="onSectionClick(song.id, i, show.id)"
+            @if (show) {
-          [class.active]="
+              <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"
+                    class="song-part"
-        >
+                    role="button"
-          <div class="head">{{ section.type | sectionType }} {{ section.number + 1 }}</div>
+                    tabindex="0"
-          <div class="fragment">{{ getFirstLine(section) }}</div>
+                  >
-        </div>
+                    <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>
+          }
+          <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>
+        @if (show) {
+          <div class="div-bottom">
+            <app-button [icon]="faDesktop" routerLink="/presentation/monitor">Präsentation starten</app-button>
+
+            <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>
+        }
+        @if (show) {
+          <app-add-song [addedLive]="true" [showSongs]="showSongs" [show]="show" [songs]="songs$|async"></app-add-song>
         }
-      </div>
       }
-    </div>
+    </app-card>
-    }
+  }
-    <div class="song">
+</app-page-frame>
-      @if (show) {
-      <div [class.active]="show.presentationSongId === 'dynamicText'" class="title song-part">
-        <div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">Freier Text</div>
-      </div>
-      }
-      <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>
-    @if (show) {
-    <div class="div-bottom">
-      <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
-        <fa-icon [icon]="faDesktop"></fa-icon>
-        Präsentation starten
-      </button>
-      <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>
-    } @if (show) {
-    <app-add-song [addedLive]="true" [showSongs]="showSongs" [show]="show" [songs]="songs$|async"></app-add-song>
-    } }
-  </app-card>
-</div>
-}

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {RemoteComponent} from './remote.component';
 
@@ -6,11 +6,11 @@ describe('RemoteComponent', () => {
   let component: RemoteComponent;
   let fixture: ComponentFixture<RemoteComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
-    void TestBed.configureTestingModule({
+    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, OnDestroy, inject} 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';
@@ -17,15 +17,15 @@ import {CardComponent} from '../../../widget-modules/components/card/card.compon
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatButton} from '@angular/material/button';
 import {RouterLink} from '@angular/router';
-import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {MatSelect} from '@angular/material/select';
 import {MatOption} from '@angular/material/core';
 import {MatSlider, MatSliderThumb} from '@angular/material/slider';
 import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {SectionTypePipe} from '../../../widget-modules/pipes/section-type-translator/section-type.pipe';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 
 export interface PresentationSong {
   id: string;
@@ -46,9 +46,7 @@ export interface PresentationSong {
     MatInput,
     ReactiveFormsModule,
     FormsModule,
-    MatButton,
     RouterLink,
-    FaIconComponent,
     MatSelect,
     MatOption,
     MatSlider,
@@ -58,6 +56,8 @@ export interface PresentationSong {
     DatePipe,
     ShowTypePipe,
     SectionTypePipe,
+    PageFrameComponent,
+    ButtonComponent,
   ],
 })
 export class RemoteComponent implements OnDestroy {
@@ -87,12 +87,12 @@ export class RemoteComponent implements OnDestroy {
       map(_ => _.currentShow),
       filter((showId): showId is string => !!showId),
       distinctUntilChanged(),
-      takeUntil(this.destroy$)
+      takeUntil(this.destroy$),
     );
 
     const show$ = currentShowId$.pipe(
       switchMap(showId => this.showService.read$(showId)),
-      takeUntil(this.destroy$)
+      takeUntil(this.destroy$),
     );
 
     const parsedSongs$ = currentShowId$.pipe(
@@ -105,7 +105,7 @@ export class RemoteComponent implements OnDestroy {
           sections: this.textRenderingService.parse(song.text, null, false),
         })),
       })),
-      takeUntil(this.destroy$)
+      takeUntil(this.destroy$),
     );
 
     combineLatest([show$, parsedSongs$])

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

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

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

@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {Router} from '@angular/router';
-import {of} from 'rxjs';
+import {firstValueFrom, of} from 'rxjs';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {ShowService} from '../../shows/services/show.service';
 import {SelectComponent} from './select.component';
@@ -19,11 +19,7 @@ describe('SelectComponent', () => {
     routerSpy = jasmine.createSpyObj<Router>('Router', ['navigateByUrl']);
 
     showServiceSpy.list$.and.returnValue(
-      of([
+      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
-        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();
@@ -52,12 +48,11 @@ describe('SelectComponent', () => {
     expect(component.visible).toBeTrue();
   });
 
-  it('should expose recent shows sorted descending by date', done => {
+  it('should expose recent shows sorted descending by date', async () => {
-    component.shows$.subscribe(shows => {
+    const shows = await firstValueFrom(component.shows$);
-      expect(showServiceSpy.list$).toHaveBeenCalledWith(true);
+
-      expect(shows.map(show => show.id)).toEqual(['recent-a', 'recent-b']);
+    expect(showServiceSpy.list$).toHaveBeenCalledWith(true);
-      done();
+    expect(shows.map(show => show.id)).toEqual(['recent-a', 'recent-b']);
-    });
   });
 
   it('should persist the selected show, trigger presentation reset and navigate', async () => {

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

@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} 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';
@@ -7,16 +7,17 @@ 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 {MatButton} from '@angular/material/button';
 import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+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, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe],
+  imports: [CardComponent, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe, PageFrameComponent, ButtonComponent],
 })
 export class SelectComponent implements OnInit {
   private showService = inject(ShowService);

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

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

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

@@ -1,5 +1,6 @@
 <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>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>.
@@ -12,29 +13,29 @@
     </div>
 
     @for (song of data.songs; track song.title + song.ccliNumber) {
-    <div class="list-item">
+      <div class="list-item">
-      <div>{{ song.title }}</div>
+        <div>{{ song.title }}</div>
-      <div class="number-cell">
+        <div class="number-cell">
-        <span>{{ song.ccliNumber }}</span>
+          <span>{{ song.ccliNumber }}</span>
-        <a
+          <a
-          (click)="markOpened(song.ccliNumber)"
+            (click)="markOpened(song.ccliNumber)"
-          [attr.aria-label]="'CCLI-Titel melden: ' + song.title"
+            [attr.aria-label]="'CCLI-Titel melden: ' + song.title"
-          [href]="getSongReportingUrl(song.ccliNumber)"
+            [href]="getSongReportingUrl(song.ccliNumber)"
-          rel="noreferrer"
+            rel="noreferrer"
-          target="_blank"
+            target="_blank"
-          class="btn-icon report-link"
+            class="btn-icon report-link"
-        >
+          >
-          <fa-icon [icon]="faOpen"></fa-icon>
+            <fa-icon [icon]="faOpen"></fa-icon>
-        </a>
+          </a>
-        @if (wasOpened(song.ccliNumber)) {
+          @if (wasOpened(song.ccliNumber)) {
-        <fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
+            <fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
-        }
+          }
+        </div>
       </div>
-    </div>
     }
   </div>
 </div>
-<div mat-dialog-actions>
+<app-button-row>
-  <button [mat-dialog-close]="false" mat-button>Abbrechen</button>
+  <app-button (click)="dialogRef.close(false)" [icon]="faClose">Abbrechen</app-button>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Alle CCLI-Titel wurden gemeldet</button>
+  <app-button (click)="dialogRef.close(true)" [icon]="faReport">Alle CCLI-Titel wurden gemeldet</app-button>
-</div>
+</app-button-row>

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

@@ -14,7 +14,7 @@
 
 .list-head {
   padding: 3px 10px;
-  color: var(--text-muted);
+  color: var(--text-soft);
   font-size: 0.85rem;
   font-weight: 600;
 }
@@ -72,3 +72,7 @@
     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.ts

@@ -1,8 +1,9 @@
 import {Component, inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef} from '@angular/material/dialog';
-import {MatButton} from '@angular/material/button';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {faArrowUpRightFromSquare, faCheck} from '@fortawesome/free-solid-svg-icons';
+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;
@@ -15,7 +16,7 @@ export interface ReportDialogData {
 
 @Component({
   selector: 'app-report-dialog',
-  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose, FaIconComponent],
+  imports: [MatDialogContent, FaIconComponent, ButtonRowComponent, ButtonComponent],
   templateUrl: './report-dialog.component.html',
   styleUrl: './report-dialog.component.less',
   standalone: true,
@@ -25,6 +26,11 @@ export class ReportDialogComponent {
   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 {

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

@@ -1,21 +1,34 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-
 import {ShareDialogComponent} from './share-dialog.component';
-import QRCode from 'qrcode';
+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 () => {
-    spyOn(QRCode, 'toDataURL').and.resolveTo('data:image/jpeg;base64,test');
-
     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();
   });
 

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

@@ -1,7 +1,6 @@
 import {Component, inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
 import {MatButton} from '@angular/material/button';
-import QRCode from 'qrcode';
 import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {Show} from '../../services/show';
 
@@ -24,18 +23,7 @@ export class ShareDialogComponent {
   public constructor() {
     const data = this.data;
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+    void this.generateQrCode(data.url).then(qrCode => (this.qrCode = qrCode));
-    void QRCode.toDataURL(data.url, {
-      type: 'image/jpeg',
-      quality: 0.92,
-      width: 1280,
-      height: 1280,
-      color: {
-        dark: '#010414',
-        light: '#ffffff',
-      },
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return
-    }).then((qrCode: string) => (this.qrCode = qrCode));
   }
 
   public async share(): Promise<void> {
@@ -48,4 +36,18 @@ export class ShareDialogComponent {
         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-page-frame title="Veranstaltungen" [withMenu]="false">
-  <app-card [closeLink]="'/shows/'+form.value.id" heading="Veranstaltung ändern">
+  <div content>
-    <div [formGroup]="form" class="split">
+    <app-card [closeLink]="'/shows/'+form.value.id" heading="Veranstaltung ändern">
-      <mat-form-field appearance="outline">
+      <div [formGroup]="form" class="split">
-        <mat-label>Art der Veranstaltung</mat-label>
+        <mat-form-field appearance="outline">
-        <mat-select formControlName="showType">
+          <mat-label>Art der Veranstaltung</mat-label>
-          <mat-optgroup label="öffentlich">
+          <mat-select formControlName="showType">
-            @for (key of showTypePublic; track key) {
+            <mat-optgroup label="öffentlich">
-            <mat-option [value]="key">{{ key | showType }} </mat-option>
+              @for (key of showTypePublic; track key) {
-            }
+                <mat-option [value]="key">{{ key | showType }}</mat-option>
-          </mat-optgroup>
+              }
-          <mat-optgroup label="privat">
+            </mat-optgroup>
-            @for (key of showTypePrivate; track key) {
+            <mat-optgroup label="privat">
-            <mat-option [value]="key">{{ key | showType }} </mat-option>
+              @for (key of showTypePrivate; track key) {
-            }
+                <mat-option [value]="key">{{ key | showType }}</mat-option>
-          </mat-optgroup>
+              }
-        </mat-select>
+            </mat-optgroup>
-      </mat-form-field>
+          </mat-select>
-      <mat-form-field appearance="outline">
+        </mat-form-field>
-        <mat-label>Datum</mat-label>
+        <mat-form-field appearance="outline">
-        <input [matDatepicker]="picker" formControlName="date" matInput />
+          <mat-label>Datum</mat-label>
-        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+          <input [matDatepicker]="picker" formControlName="date" matInput />
-        <mat-datepicker #picker touchUi></mat-datepicker>
+          <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-      </mat-form-field>
+          <mat-datepicker #picker touchUi></mat-datepicker>
-    </div>
+        </mat-form-field>
+      </div>
 
-    <app-button-row>
+      <app-button-row>
-      <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
+        <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
-    </app-button-row>
+      </app-button-row>
-  </app-card>
+    </app-card>
-</div>
+  </div>
+</app-page-frame>

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

@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} 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';
@@ -18,6 +18,7 @@ import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/m
 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',
@@ -39,6 +40,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
     ButtonRowComponent,
     ButtonComponent,
     ShowTypePipe,
+    PageFrameComponent,
   ],
 })
 export class EditComponent implements OnInit {
@@ -70,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({

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

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

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

@@ -4,7 +4,7 @@
       <mat-label>Zeitraum</mat-label>
       <mat-select formControlName="time">
         @for (time of times; track time) {
-        <mat-option [value]="time.key">{{ time.value }} </mat-option>
+        <mat-option [value]="time.key">{{ time.value }}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -14,7 +14,7 @@
       <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-option [value]="owner.key">{{ owner.value }}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -25,17 +25,18 @@
         <mat-option value="">Alle</mat-option>
         <mat-optgroup label="öffentlich">
           @for (key of showTypePublic; track key) {
-          <mat-option [value]="key">{{ key | showType }} </mat-option>
+          <mat-option [value]="key">{{ key | showType }}</mat-option>
           }
         </mat-optgroup>
         <mat-optgroup label="privat">
           @for (key of showTypePrivate; track key) {
-          <mat-option [value]="key">{{ key | showType }} </mat-option>
+          <mat-option [value]="key">{{ key | showType }}</mat-option>
           }
         </mat-optgroup>
       </mat-select>
     </mat-form-field>
+    <mat-checkbox formControlName="archived">Archiviert</mat-checkbox>
   </div>
 
-  <i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>
+  <!--  <i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>-->
 </div>

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

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

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

@@ -1,4 +1,4 @@
-import {Component, DestroyRef, Input, inject} from '@angular/core';
+import {Component, DestroyRef, inject, Input} from '@angular/core';
 import {KeyValue} from '@angular/common';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
@@ -14,28 +14,23 @@ import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatSelect} from '@angular/material/select';
 import {MatOptgroup, MatOption} from '@angular/material/core';
 import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {MatCheckbox} from '@angular/material/checkbox';
 
 @Component({
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
-  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, ShowTypePipe],
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, ShowTypePipe, MatCheckbox],
 })
 export class FilterComponent {
-  private showService = inject(ShowService);
-  private userService = inject(UserService);
-  private filterStore = inject(FilterStoreService);
-  private destroyRef = inject(DestroyRef);
-
   @Input() public shows: Show[] = [];
-
   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'},
@@ -43,8 +38,11 @@ export class FilterComponent {
     {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);
@@ -53,6 +51,7 @@ export class FilterComponent {
       time: fb.nonNullable.control(1),
       owner: fb.control<string | null>(null),
       showType: fb.control<string | null>(null),
+      archived: fb.nonNullable.control(false),
     });
 
     this.filterStore.showFilter$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(filterValues => {
@@ -61,6 +60,7 @@ export class FilterComponent {
           time: filterValues.time,
           owner: filterValues.owner || null,
           showType: filterValues.showType || null,
+          archived: !!filterValues.archived,
         },
         {emitEvent: false}
       );
@@ -69,6 +69,7 @@ export class FilterComponent {
     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))

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

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

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

@@ -2,6 +2,15 @@
   padding: 5px 20px;
   display: grid;
   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 {
@@ -16,6 +25,23 @@
     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;
+  }
 }
 
 .number {

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

@@ -1,31 +1,45 @@
-<div>
+@if (showSidebar$ | async) {
-  <!--  <app-list-header *appRole="['leader']"></app-list-header>-->
+  <app-page-frame title="Veranstaltungen">
-  <app-list-header *appRole="['leader']">
+    <div class="sidebar-content" sidebar>
-    @if (shows$ | async; as shows) {
+      <app-filter [shows]="(publicShows$ | async) ?? []"></app-filter>
-    <app-filter [shows]="publicShows$ | async"></app-filter>
+    </div>
-    }
+    <div content>
-  </app-list-header>
+      @if (privateShows$ | async; as privateShows) {
-
+        <app-card [padding]="false" heading="Meine Veranstaltungen">
-  <ng-container *appRole="['leader']">
+          @for (show of privateShows; track trackBy($index, show)) {
-    @if (privateShows$ | async; as shows) { @if (shows.length > 0) {
+            <app-list-item
-    <app-card [padding]="false" heading="Meine Veranstaltungen">
+              [routerLink]="show.id"
-      @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
+              [showStatusBadgeType]="show.archived ? 'warn' : show.published ? 'error' : 'none'"
-      <app-list-item
+              [showStatusBadge]="show.archived ? 'archiviert' : show.published ? 'nicht gemeldet' : 'unveröffentlicht'"
-        [routerLink]="show.id"
+              [show]="show"
-        [showStatusBadge]="show.published ? 'nicht gemeldet' : 'unveröffentlicht'"
+            ></app-list-item>
-        [showStatusBadgeType]="show.published ? 'error' : 'none'"
+          }
-        [show]="show"
+          <div *appRole="['leader']" class="list-action">
-      ></app-list-item>
+            <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>
       }
-    </app-card>
-    } }
-  </ng-container>
-
-  @if (publicShows$ | async; as shows) { @if (shows.length > 0) {
-  <app-card [padding]="false" heading="Veröffentlichte Veranstaltungen">
-    @for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
-    <app-list-item [routerLink]="show.id" [show]="show"></app-list-item>
     }
-  </app-card>
+  </div>
-  } }
+}
-</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,5 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {BehaviorSubject, of} from 'rxjs';
+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';
@@ -50,7 +51,7 @@ describe('ListComponent', () => {
     void expect(component).toBeTruthy();
   });
 
-  it('should list own drafts and pending published shows in my shows', done => {
+  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')}}),
@@ -58,13 +59,11 @@ describe('ListComponent', () => {
       createShow({id: 'draft-other', owner: 'user-2', published: false, reportedType: null, date: {toDate: () => new Date('2026-03-04')}}),
     ] as never);
 
-    component.privateShows$.subscribe(shows => {
+    const shows = await firstValueFrom(component.privateShows$);
-      expect(shows.map(show => show.id)).toEqual(['draft-own', 'pending-own']);
+    expect(shows.map(show => show.id)).toEqual(['pending-own', 'draft-own']);
-      done();
-    });
   });
 
-  it('should ignore show filters for my shows', done => {
+  it('should ignore show filters for my shows', async () => {
     const filterStore = TestBed.inject(FilterStoreService);
     filterStore.updateShowFilter({time: 0, showType: 'service-worship'});
     shows$.next([
@@ -72,9 +71,36 @@ describe('ListComponent', () => {
       createShow({id: 'pending-own', owner: 'user-1', published: true, reportedType: 'pending', showType: 'home-group', date: {toDate: () => new Date('2026-03-05')}}),
     ] as never);
 
-    component.privateShows$.subscribe(shows => {
+    const shows = await firstValueFrom(component.privateShows$);
-      expect(shows.map(show => show.id)).toEqual(['older-draft', 'pending-own']);
+    expect(shows.map(show => show.id)).toEqual(['pending-own', 'older-draft']);
-      done();
+  });
-    });
+
+  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

@@ -7,48 +7,65 @@ import {FilterValues} from './filter/filter-values';
 import {RouterLink} from '@angular/router';
 import {map, switchMap} from 'rxjs/operators';
 import {FilterStoreService} from '../../../services/filter-store.service';
-import {RoleDirective} from '../../../services/user/role.directive';
-import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
 import {AsyncPipe} from '@angular/common';
 import {FilterComponent} from './filter/filter.component';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {ListItemComponent} from './list-item/list-item.component';
-import {SortByPipe} from '../../../widget-modules/pipes/sort-by/sort-by.pipe';
 import {UserService} from '../../../services/user/user.service';
+import {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: [RoleDirective, ListHeaderComponent, FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, SortByPipe],
+  imports: [FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, PageFrameComponent, ButtonComponent, RoleDirective],
 })
 export class ListComponent {
-  private showService = inject(ShowService);
+  public faNewShow = faPlus;
   private filterStore = inject(FilterStoreService);
-  private userService = inject(UserService);
-
   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$ = combineLatest([this.shows$, this.userService.user$]).pipe(
-    map(([shows, user]) => shows.filter(show => show.owner === user?.id).filter(show => !show.published || show.reportedType === 'pending'))
-  );
-  public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
   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;
 
-      return shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType);
+      return this.sortShowsByDateDesc(shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType));
-    })
+    }),
   );
+  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;
+        }
+
+        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;
 
@@ -58,4 +75,17 @@ export class ListComponent {
     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-page-frame title="Veranstaltungen" [withMenu]="false">
-  <app-card closeLink="/shows" heading="Neue Veranstaltung">
+  <div content>
-    <div [formGroup]="form" class="split">
+    <app-card closeLink="/shows" heading="Neue Veranstaltung">
-      <mat-form-field appearance="outline">
+      <div [formGroup]="form" class="split">
-        <mat-label>Art der Veranstaltung</mat-label>
+        <mat-form-field appearance="outline">
-        <mat-select formControlName="showType">
+          <mat-label>Art der Veranstaltung</mat-label>
-          <mat-optgroup label="öffentlich">
+          <mat-select formControlName="showType">
-            @for (key of showTypePublic; track key) {
+            <mat-optgroup label="öffentlich">
-            <mat-option [value]="key">{{ key | showType }} </mat-option>
+              @for (key of showTypePublic; track key) {
-            }
+                <mat-option [value]="key">{{ key | showType }}</mat-option>
-          </mat-optgroup>
+              }
-          <mat-optgroup label="privat">
+            </mat-optgroup>
-            @for (key of showTypePrivate; track key) {
+            <mat-optgroup label="privat">
-            <mat-option [value]="key">{{ key | showType }} </mat-option>
+              @for (key of showTypePrivate; track key) {
-            }
+                <mat-option [value]="key">{{ key | showType }}</mat-option>
-          </mat-optgroup>
+              }
-        </mat-select>
+            </mat-optgroup>
-      </mat-form-field>
+          </mat-select>
-      <mat-form-field appearance="outline">
+        </mat-form-field>
-        <mat-label>Datum</mat-label>
+        <mat-form-field appearance="outline">
-        <input [matDatepicker]="picker" formControlName="date" matInput />
+          <mat-label>Datum</mat-label>
-        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+          <input [matDatepicker]="picker" formControlName="date" matInput />
-        <mat-datepicker #picker touchUi></mat-datepicker>
+          <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-      </mat-form-field>
+          <mat-datepicker #picker touchUi></mat-datepicker>
-    </div>
+        </mat-form-field>
+      </div>
 
-    <app-button-row>
+      <app-button-row>
-      <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
+        <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
-    </app-button-row>
+      </app-button-row>
-  </app-card>
+    </app-card>
-</div>
+  </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,11 +6,11 @@ describe('NewComponent', () => {
   let component: NewComponent;
   let fixture: ComponentFixture<NewComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [NewComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewComponent);

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

@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} 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';
@@ -16,6 +16,7 @@ import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/m
 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',
@@ -37,6 +38,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
     ButtonRowComponent,
     ButtonComponent,
     ShowTypePipe,
+    PageFrameComponent,
   ],
 })
 export class NewComponent implements OnInit {

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

@@ -1,13 +1,27 @@
 import {TestBed} from '@angular/core/testing';
-import {Packer} from 'docx';
 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<unknown>;
+    prepareData: (showId: string) => Promise<PreparedData | null>;
-    prepareNewDocument: (data: unknown, options?: unknown) => unknown;
+    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(async () => {
@@ -21,8 +35,8 @@ describe('DocxService', () => {
 
   it('should not try to save a document when the required data cannot be prepared', async () => {
     const serviceInternals = service as DocxServiceInternals;
-    const prepareDataSpy = spyOn<any>(serviceInternals, 'prepareData').and.resolveTo(null);
+    const prepareDataSpy = spyOn(serviceInternals, 'prepareData').and.resolveTo(null);
-    const saveAsSpy = spyOn<any>(serviceInternals, 'saveAs');
+    const saveAsSpy = spyOn(serviceInternals, 'saveAs');
 
     await service.create('show-1');
 
@@ -32,8 +46,13 @@ describe('DocxService', () => {
 
   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<any>(serviceInternals, 'prepareData').and.resolveTo({
+    const prepareDataSpy = spyOn(serviceInternals, 'prepareData').and.resolveTo({
       show: {
         showType: 'service-worship',
         date: {toDate: () => new Date('2026-03-10T00:00:00Z')},
@@ -42,15 +61,17 @@ describe('DocxService', () => {
       user: {name: 'Benjamin'},
       config: {ccliLicenseId: '12345'},
     });
-    const prepareNewDocumentSpy = spyOn<any>(serviceInternals, 'prepareNewDocument').and.returnValue({doc: true});
+    spyOn(serviceInternals, 'loadDocx').and.resolveTo(docxModule);
-    const saveAsSpy = spyOn<any>(serviceInternals, 'saveAs');
+    spyOn(serviceInternals, 'renderTitle').and.returnValue([]);
-    spyOn(Packer, 'toBlob').and.resolveTo(blob);
+    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(Packer.toBlob).toHaveBeenCalledWith({doc: true} as never);
+    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,5 +1,4 @@
 import {Injectable, inject} from '@angular/core';
-import {Document, HeadingLevel, ISectionOptions, Packer, Paragraph} from 'docx';
 import {ShowService} from './show.service';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {ShowSongService} from './show-song.service';
@@ -17,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;
@@ -35,13 +39,14 @@ export class DocxService {
   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: {
@@ -51,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 {
+  private prepareNewDocument(docx: DocxModule, type: string, name: string, options: DownloadOptions, sections: DocxSectionOptions[]): DocxDocument {
-    return new Document({
+    return new docx.Document({
       creator: name,
       title: type,
       description: '... mit Beschreibung',
@@ -91,32 +96,33 @@ export class DocxService {
   }
 
   private renderSongs(
+    docx: DocxModule,
     songs: {
       showSong: ShowSong;
       sections: Section[];
     }[],
     options: DownloadOptions,
     config: Config
-  ): Paragraph[] {
+  ): DocxParagraph[] {
-    return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.showSong, song.sections, options, config)], []);
+    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[] {
+  private renderSong(docx: DocxModule, showSong: ShowSong, song: Song, sections: Section[], options: DownloadOptions, config: Config): DocxParagraph[] {
-    const songTitle = this.renderSongTitle(song);
+    const songTitle = this.renderSongTitle(docx, song);
-    const copyright = this.renderCopyright(song, options, config);
+    const copyright = this.renderCopyright(docx, song, options, config);
-    const songText = this.renderSongText(sections, options?.chordMode ?? showSong.chordMode);
+    const songText = this.renderSongText(docx, sections, options?.chordMode ?? showSong.chordMode);
 
     return copyright ? [songTitle, copyright, ...songText] : [songTitle, ...songText];
   }
 
-  private renderSongText(sections: Section[], chordMode: ChordMode): Paragraph[] {
+  private renderSongText(docx: DocxModule, sections: Section[], chordMode: ChordMode): DocxParagraph[] {
-    return sections.reduce((p: Paragraph[], section) => [...p, ...this.renderSection(section, chordMode)], []);
+    return sections.reduce((p: DocxParagraph[], section) => [...p, ...this.renderSection(docx, section, chordMode)], []);
   }
 
-  private renderSongTitle(song: Song): Paragraph {
+  private renderSongTitle(docx: DocxModule, song: Song): DocxParagraph {
-    return new Paragraph({
+    return new docx.Paragraph({
       text: song.title,
-      heading: HeadingLevel.HEADING_2,
+      heading: docx.HeadingLevel.HEADING_2,
       thematicBreak: true,
       spacing: {
         before: 200,
@@ -124,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;
     }
@@ -135,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) {
@@ -156,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[] {
+  private renderTitle(docx: DocxModule, type: string): DocxParagraph[] {
-    const songTitle = new Paragraph({
+    const songTitle = new docx.Paragraph({
       text: type,
-      heading: HeadingLevel.HEADING_1,
+      heading: docx.HeadingLevel.HEADING_1,
       thematicBreak: true,
     });
 
@@ -232,4 +238,8 @@ export class DocxService {
       document.body.removeChild(a);
     }, 1000);
   }
+
+  private loadDocx(): Promise<DocxModule> {
+    return import('docx');
+  }
 }

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

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

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

@@ -20,13 +20,15 @@ export class ShowService {
   public read$ = (showId: string): Observable<Show | null> => this.showDataService.read$(showId);
   public listPublicSince$ = (lastMonths: number): Observable<Show[]> => this.showDataService.listPublicSince$(lastMonths);
 
-  public list$(publishedOnly = false): Observable<Show[]> {
+  public list$(publishedOnly = false, includeOwnArchived = false): Observable<Show[]> {
     return this.userService.user$.pipe(
       switchMap(
         () => this.showDataService.list$,
         (user: User | null, shows: Show[]) => ({user, shows})
       ),
-      map(s => s.shows.filter(show => !show.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
+      map(s =>
+        s.shows.filter(show => !show.archived || (includeOwnArchived && show.owner === s.user?.id)).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
+      )
     );
   }
 

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

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

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

@@ -1,6 +1,6 @@
 :host {
-  --button-padding-mobile: 10px;
+  --button-padding-mobile: 4px;
-  --button-font-size-mobile: 25px;
+  --button-font-size-mobile: 20px;
 }
 
 .song-row:not(:last-child) {
@@ -59,7 +59,7 @@
 }
 
 .next-song {
-  color: var(--text-muted);
+  color: var(--text-soft);
   position: fixed;
   bottom: 0;
   right: 10px;
@@ -70,7 +70,7 @@
 }
 
 .time {
-  color: var(--text-muted);
+  color: var(--text-soft);
   position: fixed;
   bottom: 0;
   left: 10px;

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

@@ -1,9 +1,16 @@
-import {ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, OnDestroy, OnInit, inject} from '@angular/core';
+import {
-import {filter, map, shareReplay, switchMap, tap} from 'rxjs/operators';
+  ChangeDetectorRef,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  HostListener,
+  inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {filter, map, shareReplay, switchMap, take, tap} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ShowService} from '../services/show.service';
 import {Observable, of, Subscription} from 'rxjs';
-import {take} from 'rxjs/operators';
 import {Show} from '../services/show';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
@@ -14,8 +21,8 @@ import {
   faArrowUpRightFromSquare,
   faBox,
   faBoxOpen,
-  faCheck,
   faChevronRight,
+  faCompactDisc,
   faFileDownload,
   faLock,
   faMagnifyingGlassMinus,
@@ -55,6 +62,8 @@ import {ReportedTypePipe} from '../../../widget-modules/pipes/reported-type-tran
 import {BadgeComponent, BadgeType} from '../../../widget-modules/components/badge/badge.component';
 import {ReportDialogComponent, ReportDialogSong} from '../dialog/report-dialog/report-dialog.component';
 import {PublishedTypePipe} from '../../../widget-modules/pipes/published-type-translator/published-type.pipe';
+import {ensureSwiperElement} from '../../../services/swiper-element';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
 
 @Component({
   selector: 'app-show',
@@ -87,29 +96,19 @@ import {PublishedTypePipe} from '../../../widget-modules/pipes/published-type-tr
     ReportedTypePipe,
     PublishedTypePipe,
     BadgeComponent,
+    PageFrameComponent,
   ],
 })
 export class ShowComponent implements OnInit, OnDestroy {
-  private activatedRoute = inject(ActivatedRoute);
-  private showService = inject(ShowService);
-  private songService = inject(SongService);
-  private showSongService = inject(ShowSongService);
-  private docxService = inject(DocxService);
-  private router = inject(Router);
-  private cRef = inject(ChangeDetectorRef);
-  private userService = inject(UserService);
   public dialog = inject(MatDialog);
-  private guestShowService = inject(GuestShowService);
-
   public show$: Observable<Show | null> | null = null;
   public songs$: Observable<Song[] | null> | null = null;
   public showSongs: ShowSong[] | null = null;
   public showId: string | null = null;
   public showText = false;
-
   public faBox = faBox;
   public faBoxOpen = faBoxOpen;
-  public faReport = faCheck;
+  public faReport = faCompactDisc;
   public faPublish = faUnlock;
   public faUnpublish = faLock;
   public faShare = faArrowUpRightFromSquare;
@@ -125,10 +124,20 @@ export class ShowComponent implements OnInit, OnDestroy {
   public faMaximize = faMaximize;
   public faNextSong = faChevronRight;
   public currentTime!: Date;
+  private activatedRoute = inject(ActivatedRoute);
+  private showService = inject(ShowService);
+  private songService = inject(SongService);
+  private showSongService = inject(ShowSongService);
+  private docxService = inject(DocxService);
+  private router = inject(Router);
+  private cRef = inject(ChangeDetectorRef);
+  private userService = inject(UserService);
+  private guestShowService = inject(GuestShowService);
   private subs: Subscription[] = [];
   private clockIntervalId: ReturnType<typeof setInterval> | null = null;
 
   public ngOnInit(): void {
+    void ensureSwiperElement();
     this.currentTime = new Date();
     this.clockIntervalId = setInterval(() => {
       this.currentTime = new Date();
@@ -141,7 +150,7 @@ export class ShowComponent implements OnInit, OnDestroy {
       shareReplay({
         bufferSize: 1,
         refCount: true,
-      })
+      }),
     );
     this.subs.push(
       this.activatedRoute.params
@@ -149,12 +158,12 @@ export class ShowComponent implements OnInit, OnDestroy {
           map(param => param as {showId: string}),
           map(param => param.showId),
           switchMap(showId => this.showSongService.list$(showId)),
-          filter(_ => !!_ && _.length > 0)
+          filter(_ => !!_ && _.length > 0),
         )
         .subscribe(_ => {
           this.showSongs = _;
           this.cRef.markForCheck();
-        })
+        }),
     );
 
     this.songs$ = this.show$.pipe(
@@ -162,7 +171,7 @@ export class ShowComponent implements OnInit, OnDestroy {
       shareReplay({
         bufferSize: 1,
         refCount: true,
-      })
+      }),
     );
   }
 
@@ -270,24 +279,6 @@ export class ShowComponent implements OnInit, OnDestroy {
     return show.published ? 'ok' : 'none';
   }
 
-  private getReportableSongs(show: Show): ReportDialogSong[] {
-    const uniqueSongs = new Map<string, ReportDialogSong>();
-
-    this.orderedShowSongs(show)
-      .filter(song => song.legalOwner === 'CCLI' && !!song.legalOwnerId)
-      .forEach(song => {
-        const key = song.songId || `${song.title}:${song.legalOwnerId}`;
-        if (!uniqueSongs.has(key)) {
-          uniqueSongs.set(key, {
-            title: song.title,
-            ccliNumber: song.legalOwnerId,
-          });
-        }
-      });
-
-    return Array.from(uniqueSongs.values());
-  }
-
   public async onDownload(): Promise<void> {
     if (this.showId != null) await this.docxService.create(this.showId);
   }
@@ -361,6 +352,24 @@ export class ShowComponent implements OnInit, OnDestroy {
     return `${widthInCh}ch`;
   }
 
+  private getReportableSongs(show: Show): ReportDialogSong[] {
+    const uniqueSongs = new Map<string, ReportDialogSong>();
+
+    this.orderedShowSongs(show)
+      .filter(song => song.legalOwner === 'CCLI' && !!song.legalOwnerId)
+      .forEach(song => {
+        const key = song.songId || `${song.title}:${song.legalOwnerId}`;
+        if (!uniqueSongs.has(key)) {
+          uniqueSongs.set(key, {
+            title: song.title,
+            ccliNumber: song.legalOwnerId,
+          });
+        }
+      });
+
+    return Array.from(uniqueSongs.values());
+  }
+
   private async setArchiveState(archived: boolean): Promise<void> {
     if (!this.showId) {
       return;

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

@@ -13,7 +13,7 @@
     <span class="title">{{ iSong.title }}</span>
     @if (!edit) {
     <div class="keys-container">
-      <div (click)="openKeySelect()" class="keys">
+      <div (click)="openKeySelect()" (keydown.enter)="openKeySelect()" (keydown.space)="openKeySelect()" class="keys" role="button" tabindex="0">
         @if (iSong.keyOriginal !== iSong.key) {
         <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
         }

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

@@ -18,7 +18,7 @@
     grid-template-areas: "keys title edit delete";
 
     @media screen and (max-width: 860px) {
-      grid-template-columns: var(--song-key-column-width, 30px) auto 45px 45px;
+      grid-template-columns: var(--song-key-column-width, 30px) auto 30px 30px;
     }
 
     &.with-drag {
@@ -26,7 +26,7 @@
       grid-template-areas: "drag keys title edit delete";
 
       @media screen and (max-width: 860px) {
-        grid-template-columns: 24px var(--song-key-column-width, 30px) auto 45px 45px;
+        grid-template-columns: 24px var(--song-key-column-width, 30px) auto 30px 30px;
       }
     }
   }
@@ -36,7 +36,7 @@
     grid-template-areas: "title keys edit delete";
 
     @media screen and (max-width: 860px) {
-      grid-template-columns: auto var(--song-key-column-width, 30px) 45px 45px;
+      grid-template-columns: auto var(--song-key-column-width, 30px) 30px 30px;
     }
 
     &.with-drag {
@@ -44,7 +44,7 @@
       grid-template-areas: "drag title keys edit delete";
 
       @media screen and (max-width: 860px) {
-        grid-template-columns: 24px auto var(--song-key-column-width, 30px) 45px 45px;
+        grid-template-columns: 24px auto var(--song-key-column-width, 30px) 30px 30px;
       }
     }
   }
@@ -176,4 +176,5 @@ button {
 
 textarea.edit {
   font-family: 'Ubuntu Mono', monospace;
+  line-height: 15px;
 }

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

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

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

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

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

@@ -30,7 +30,7 @@ describe('FileService', () => {
   });
 
   it('should resolve download urls via AngularFire storage helpers', async () => {
-    const resolveSpy = spyOn<any>(service as FileServiceInternals, 'resolveDownloadUrl').and.resolveTo('https://cdn.example/file.pdf');
+    const resolveSpy = spyOn(service as FileServiceInternals, 'resolveDownloadUrl').and.resolveTo('https://cdn.example/file.pdf');
 
     await expectAsync(service.getDownloadUrl('songs/song-1/file.pdf').toPromise()).toBeResolvedTo('https://cdn.example/file.pdf');
 
@@ -38,7 +38,7 @@ describe('FileService', () => {
   });
 
   it('should delete the file from storage and metadata from firestore', async () => {
-    const deleteFromStorageSpy = spyOn<any>(service as FileServiceInternals, 'deleteFromStorage').and.resolveTo();
+    const deleteFromStorageSpy = spyOn(service as FileServiceInternals, 'deleteFromStorage').and.resolveTo();
 
     await service.delete('songs/song-1/file.pdf', 'song-1', 'file-1');
 

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

@@ -3,9 +3,7 @@ import {deleteObject, getDownloadURL, ref, Storage} from '@angular/fire/storage'
 import {from, Observable} from 'rxjs';
 import {FileDataService} from './file-data.service';
 
-@Injectable({
+@Injectable()
-  providedIn: 'root',
-})
 export class FileService {
   private storage = inject(Storage);
   private fileDataService = inject(FileDataService);

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

@@ -1,5 +1,5 @@
 import {TestBed} from '@angular/core/testing';
-import {of} from 'rxjs';
+import {firstValueFrom, of} from 'rxjs';
 import {SongService} from './song.service';
 import {SongListResolver} from './song-list.resolver';
 
@@ -22,11 +22,8 @@ describe('SongListResolver', () => {
     expect(resolver).toBeTruthy();
   });
 
-  it('should resolve the first emitted song list from the service', done => {
+  it('should resolve the first emitted song list from the service', async () => {
-    resolver.resolve().subscribe(songs => {
+    await expectAsync(firstValueFrom(resolver.resolve())).toBeResolvedTo([{id: 'song-1', title: 'Amazing Grace'}] as never);
-      expect(songServiceSpy.listLoaded$).toHaveBeenCalled();
+    expect(songServiceSpy.listLoaded$).toHaveBeenCalled();
-      expect(songs).toEqual([{id: 'song-1', title: 'Amazing Grace'}] as never);
-      done();
-    });
   });
 });

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

@@ -1,5 +1,5 @@
 import {TestBed} from '@angular/core/testing';
-import {of} from 'rxjs';
+import {firstValueFrom, of} from 'rxjs';
 import {SongDataService} from './song-data.service';
 import {SongService} from './song.service';
 import {UserService} from '../../../services/user/user.service';
@@ -41,11 +41,8 @@ describe('SongService', () => {
     expect(service).toBeTruthy();
   });
 
-  it('should list songs from the data service', done => {
+  it('should list songs from the data service', async () => {
-    service.list$().subscribe(songs => {
+    await expectAsync(firstValueFrom(service.list$())).toBeResolvedTo([song]);
-      expect(songs).toEqual([song]);
-      done();
-    });
   });
 
   it('should delegate reads to the data service', async () => {

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

@@ -38,7 +38,7 @@ Bridge
 Cool bridge without any chords
 `;
 
-  beforeEach(() => void TestBed.configureTestingModule({}));
+  beforeEach(async () => await TestBed.configureTestingModule({}));
 
   it('should be created', () => {
     const service: TextRenderingService = TestBed.inject(TextRenderingService);
@@ -478,12 +478,14 @@ Text`;
       const service: TextRenderingService = TestBed.inject(TextRenderingService);
       const text = 'Strophe\nC\tG\ta\nText';
 
-      void expect(service.validateChordNotation(text)).toContain(
+      void expect(service.validateChordNotation(text)).toEqual(
-        jasmine.objectContaining({
+        expect.arrayContaining([
-          lineNumber: 2,
+          jasmine.objectContaining({
-          token: '\t',
+            lineNumber: 2,
-          reason: 'tab_character',
+            token: '\t',
-        })
+            reason: 'tab_character',
+          }),
+        ])
       );
     });
 

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

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

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

@@ -39,7 +39,7 @@ describe('UploadService', () => {
         success();
       },
     };
-    const uploadSpy = spyOn<any>(service as UploadServiceInternals, 'startUpload').and.returnValue(task);
+    const uploadSpy = spyOn(service as UploadServiceInternals, 'startUpload').and.returnValue(task);
     const upload = new Upload(new File(['content'], 'test.pdf', {type: 'application/pdf'}));
 
     service.pushUpload('song-1', upload);

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

@@ -5,9 +5,7 @@ import {ref, Storage, uploadBytesResumable} from '@angular/fire/storage';
 import {FileBase} from './fileBase';
 import {FileServer} from './fileServer';
 
-@Injectable({
+@Injectable()
-  providedIn: 'root',
-})
 export class UploadService extends FileBase {
   private fileDataService = inject(FileDataService);
   private storage = inject(Storage);

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

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

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

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

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

@@ -1,6 +1,7 @@
 import {Component, DestroyRef, Input, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
 import {SongService} from '../../services/song.service';
 import {FilterValues} from './filter-values';
 import {Song} from '../../services/song';
@@ -52,7 +53,9 @@ export class FilterComponent {
       this.filterFormGroup.patchValue(filterValues, {emitEvent: false});
     });
 
-    this.filterFormGroup.controls.q.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('q', value));
+    this.filterFormGroup.controls.q.valueChanges
+      .pipe(debounceTime(100), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+      .subscribe(value => this.filterValueChanged('q', value));
     this.filterFormGroup.controls.key.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('key', value));
     this.filterFormGroup.controls.type.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('type', value));
     this.filterFormGroup.controls.legalType.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('legalType', value));

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

@@ -1,43 +1,50 @@
 @if (songs$ | async; as songs) {
-<div>
+  <app-page-frame title="Lieder">
-  <app-list-header [anyFilterActive]="anyFilterActive">
+    <div class="sidebar-content" sidebar>
-    <app-filter [songs]="songs"></app-filter>
+      <app-filter [songs]="songs"></app-filter>
-  </app-list-header>
-  <app-card [padding]="false">
-    @for (song of songs; track trackBy($index, song)) {
-    <div [routerLink]="song.id" class="list-item">
-      <div class="number">{{ song.number }}</div>
-      <div class="title">
-        <span>{{ song.title }}</span>
-        @if (song.hasChordValidationIssues) {
-        <span class="validation-star" title="Akkord-Validierungsfehler vorhanden">*</span>
-        }
-      </div>
-      <div>
-        <ng-container *appRole="['contributor']">
-          @if (song.status === 'draft') {
-          <div class="warning">
-            <fa-icon [icon]="faDraft"></fa-icon>
-          </div>
-          } @if (song.status === 'set') {
-          <div class="neutral">
-            <fa-icon [icon]="faDraft"></fa-icon>
-          </div>
-          } @if (song.status === 'final') {
-          <div class="success">
-            <fa-icon [icon]="faFinal"></fa-icon>
-          </div>
-          }
-        </ng-container>
-        @if (song.legalType === 'open') {
-        <div class="warning">
-          <fa-icon [icon]="faLegal"></fa-icon>
-        </div>
-        }
-      </div>
-      <div>{{ song.key }}</div>
     </div>
-    }
+    <div content>
-  </app-card>
+      <app-card [padding]="false">
-</div>
+        @for (song of songs; track trackBy($index, song)) {
+          <div [routerLink]="song.id" class="list-item">
+            <div class="number">{{ song.number }}</div>
+            <div class="title">
+              <span>{{ song.title }}</span>
+              @if (song.hasChordValidationIssues) {
+                <span class="validation-star" title="Akkord-Validierungsfehler vorhanden">*</span>
+              }
+            </div>
+            <div>
+              <ng-container *appRole="['contributor']">
+                @if (song.status === 'draft') {
+                  <div class="warning">
+                    <fa-icon [icon]="faDraft"></fa-icon>
+                  </div>
+                }
+                @if (song.status === 'set') {
+                  <div class="neutral">
+                    <fa-icon [icon]="faDraft"></fa-icon>
+                  </div>
+                }
+                @if (song.status === 'final') {
+                  <div class="success">
+                    <fa-icon [icon]="faFinal"></fa-icon>
+                  </div>
+                }
+              </ng-container>
+              @if (song.legalType === 'open') {
+                <div class="warning">
+                  <fa-icon [icon]="faLegal"></fa-icon>
+                </div>
+              }
+            </div>
+            <div>{{ song.key }}</div>
+          </div>
+        }
+        <div *appRole="['contributor']" class="list-action">
+          <app-button [fullWidth]="true" [icon]="faNewSong" routerLink="new">Neuen Song anlegen</app-button>
+        </div>
+      </app-card>
+    </div>
+  </app-page-frame>
 }

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

@@ -1,3 +1,7 @@
+.sidebar-content {
+  padding: 20px;
+}
+
 .list-item {
   padding: 5px 20px;
   display: grid;
@@ -51,3 +55,7 @@
 .success {
   color: var(--success);
 }
+
+.list-action {
+  margin: var(--gap-m) var(--gap-l);
+}

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {SongListComponent} from './song-list.component';
 import {of} from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
@@ -12,8 +12,8 @@ describe('SongListComponent', () => {
 
   const songs = [{id: 'song-1', title: 'title1', number: 1, text: '', flags: ''}];
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [SongListComponent],
       providers: [
         {provide: ActivatedRoute, useValue: {data: of({songs})}},
@@ -22,7 +22,7 @@ describe('SongListComponent', () => {
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongListComponent);

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

@@ -4,17 +4,18 @@ import {map} from 'rxjs/operators';
 import {combineLatest, Observable} from 'rxjs';
 import {fade} from '../../../animations';
 import {ActivatedRoute, RouterLink} from '@angular/router';
-import {filterSong} from '../../../services/filter.helper';
+import {searchSongs} from '../../../services/filter.helper';
 import {FilterValues} from './filter/filter-values';
-import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons';
+import {faBalanceScaleRight, faCheck, faPencilRuler, faPlus} from '@fortawesome/free-solid-svg-icons';
 import {TextRenderingService} from '../services/text-rendering.service';
 import {FilterStoreService} from '../../../services/filter-store.service';
 import {AsyncPipe} from '@angular/common';
-import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
 import {FilterComponent} from './filter/filter.component';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {RoleDirective} from '../../../services/user/role.directive';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 
 interface SongListItem extends Song {
   hasChordValidationIssues: boolean;
@@ -26,38 +27,34 @@ interface SongListItem extends Song {
   styleUrls: ['./song-list.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fade],
-  imports: [ListHeaderComponent, FilterComponent, CardComponent, RouterLink, RoleDirective, FaIconComponent, AsyncPipe],
+  imports: [FilterComponent, CardComponent, RouterLink, RoleDirective, FaIconComponent, AsyncPipe, PageFrameComponent, ButtonComponent],
 })
 export class SongListComponent {
+  public faLegal = faBalanceScaleRight;
+  public faDraft = faPencilRuler;
+  public faFinal = faCheck;
+  public faNewSong = faPlus;
   private route = inject(ActivatedRoute);
   private textRenderingService = inject(TextRenderingService);
   private filterStore = inject(FilterStoreService);
-
-  public anyFilterActive = false;
   public songs$: Observable<SongListItem[]> = combineLatest([
     this.filterStore.songFilter$,
     this.route.data.pipe(map(data => (data['songs'] as Song[]).slice().sort((a, b) => a.number - b.number))),
   ]).pipe(
     map(([filter, songs]) => {
-      this.anyFilterActive = this.checkIfFilterActive(filter);
+      return searchSongs(songs, filter.q)
-      return songs
         .filter(song => this.filter(song, filter))
         .map(song => ({
           ...song,
           hasChordValidationIssues: this.textRenderingService.validateChordNotation(song.text ?? '').length > 0,
-        }))
+        }));
-        .sort((a, b) => a.title?.localeCompare(b.title));
+    }),
-    })
   );
-  public faLegal = faBalanceScaleRight;
-  public faDraft = faPencilRuler;
-  public faFinal = faCheck;
 
   public trackBy = (index: number, show: SongListItem) => show.id;
 
   private filter(song: Song, filter: FilterValues): boolean {
-    let baseFilter = filterSong(song, filter.q);
+    let baseFilter = !filter.type || filter.type === song.type;
-    baseFilter = baseFilter && (!filter.type || filter.type === song.type);
     baseFilter = baseFilter && (!filter.key || filter.key === song.key);
     baseFilter = baseFilter && (!filter.legalType || filter.legalType === song.legalType);
     baseFilter = baseFilter && (!filter.flag || this.checkFlag(filter.flag, song.flags));
@@ -65,10 +62,6 @@ export class SongListComponent {
     return baseFilter;
   }
 
-  private checkIfFilterActive(filter: FilterValues): boolean {
-    return !!filter.q || !!filter.type || !!filter.key || !!filter.legalType || !!filter.flag;
-  }
-
   private checkFlag(flag: string, flags: string) {
     if (!flags) {
       return false;

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

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

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

@@ -18,6 +18,7 @@ import {FileComponent} from './file/file.component';
   templateUrl: './edit-file.component.html',
   styleUrls: ['./edit-file.component.less'],
   imports: [CardComponent, NgStyle, MatIconButton, MatIcon, FileComponent, AsyncPipe],
+  providers: [UploadService],
 })
 export class EditFileComponent {
   private activatedRoute = inject(ActivatedRoute);

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

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

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

@@ -12,6 +12,7 @@ import {AsyncPipe} from '@angular/common';
   templateUrl: './file.component.html',
   styleUrls: ['./file.component.less'],
   imports: [MatIconButton, FaIconComponent, AsyncPipe],
+  providers: [FileService],
 })
 export class FileComponent {
   private fileService = inject(FileService);

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

@@ -4,8 +4,8 @@ import {EditSongGuard} from './edit-song.guard';
 describe('EditSongGuard', () => {
   let guard: EditSongGuard;
 
-  beforeEach(() => {
+  beforeEach(async () => {
-    void TestBed.configureTestingModule({});
+    await TestBed.configureTestingModule({});
     guard = TestBed.inject(EditSongGuard);
   });
 

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

@@ -24,6 +24,7 @@
 
   textarea {
     font-family: 'Ubuntu Mono', monospace;
+    line-height: 15px;
   }
 }
 

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

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

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

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

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

@@ -1,5 +1,7 @@
-<div>
+<app-page-frame title="Lieder" [withMenu]="false">
-  <app-edit-song></app-edit-song>
+  <div content>
-  <app-edit-file></app-edit-file>
+    <app-edit-song></app-edit-song>
-  <app-history></app-history>
+    <app-edit-file></app-edit-file>
-</div>
+    <app-history></app-history>
+  </div>
+</app-page-frame>

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

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

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

@@ -2,12 +2,13 @@ import {Component, ViewChild} from '@angular/core';
 import {EditSongComponent} from './edit-song/edit-song.component';
 import {EditFileComponent} from './edit-file/edit-file.component';
 import {HistoryComponent} from './history/history.component';
+import {PageFrameComponent} from '../../../../widget-modules/components/sidebar/page-frame.component';
 
 @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.less'],
-  imports: [EditSongComponent, EditFileComponent, HistoryComponent],
+  imports: [EditSongComponent, EditFileComponent, HistoryComponent, PageFrameComponent],
 })
 export class EditComponent {
   @ViewChild(EditSongComponent) public editSongComponent: EditSongComponent | null = null;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {Storage} from '@angular/fire/storage';
 
 import {FileComponent} from './file.component';
@@ -7,12 +7,12 @@ describe('FileComponent', () => {
   let component: FileComponent;
   let fixture: ComponentFixture<FileComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [FileComponent],
       providers: [{provide: Storage, useValue: {}}],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FileComponent);

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

@@ -1,16 +1,18 @@
-<app-card closeLink="../" heading="Neues Lied">
+<app-page-frame title="Lieder" [withMenu]="false">
-  <div [formGroup]="form" class="split">
+  <app-card closeLink="../" heading="Neues Lied" content>
-    <mat-form-field appearance="outline">
+    <div [formGroup]="form" class="split">
-      <mat-label>Nummer</mat-label>
+      <mat-form-field appearance="outline">
-      <input formControlName="number" matInput />
+        <mat-label>Nummer</mat-label>
-    </mat-form-field>
+        <input formControlName="number" matInput />
-    <mat-form-field appearance="outline">
+      </mat-form-field>
-      <mat-label>Titel</mat-label>
+      <mat-form-field appearance="outline">
-      <input autofocus formControlName="title" matInput />
+        <mat-label>Titel</mat-label>
-    </mat-form-field>
+        <input formControlName="title" matInput />
-  </div>
+      </mat-form-field>
+    </div>
 
-  <app-button-row>
+    <app-button-row>
-    <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
+      <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
-  </app-button-row>
+    </app-button-row>
-</app-card>
+  </app-card>
+</app-page-frame>

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

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

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

@@ -1,6 +1,5 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, DestroyRef, inject, OnInit} from '@angular/core';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
-import {DestroyRef} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {SongService} from '../../services/song.service';
@@ -12,12 +11,13 @@ import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
 import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
+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, MatInput, ButtonRowComponent, ButtonComponent],
+  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent, PageFrameComponent],
 })
 export class NewComponent implements OnInit {
   private songService = inject(SongService);

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

@@ -1,61 +1,77 @@
-<div class="split">
+<app-page-frame title="Lieder" [withMenu]="false">
-  @if (song$ | async; as song) {
+  <div class="split" content>
-  <app-card [heading]="song.number + ' - ' + song.title" closeLink="../">
+    @if (song$ | async; as song) {
-    <div class="song">
+      <app-card [heading]="song.number + ' - ' + song.title" closeLink="../">
-      <div>
+        <div class="song">
-        <div *appRole="['leader', 'contributor']" class="detail">
-          <div>Typ: {{ song.type | songType }}</div>
-          <div>Tonart: {{ song.key }}</div>
-          <div>Tempo: {{ song.tempo }}</div>
-          <div>Status: {{ (song.status | status) || "entwurf" }}</div>
-          @if (song.legalOwner) {
-          <div>Rechteinhaber: {{ song.legalOwner | legalOwner }}</div>
-          } @if (song.legalOwnerId && song.legalOwner === 'CCLI') {
           <div>
-            <a href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}" target="_blank"> CCLI Nummer: {{ song.legalOwnerId }} </a>
+            <div *appRole="['leader', 'contributor']" class="detail">
+              <div>Typ: {{ song.type | songType }}</div>
+              <div>Tonart: {{ song.key }}</div>
+              <div>Tempo: {{ song.tempo }}</div>
+              <div>Status: {{ (song.status | status) || "entwurf" }}</div>
+              @if (song.legalOwner) {
+                <div>Rechteinhaber: {{ song.legalOwner | legalOwner }}</div>
+              }
+              @if (song.legalOwnerId && song.legalOwner === 'CCLI') {
+                <div>
+                  <a href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}" target="_blank"> CCLI
+                    Nummer: {{ song.legalOwnerId }} </a>
+                </div>
+              }
+              @if (song.legalOwnerId && song.legalOwner !== 'CCLI') {
+                <div>Rechteinhaber ID: {{ song.legalOwnerId }}</div>
+              }
+              @if (song.artist) {
+                <div>Künstler: {{ song.artist }}</div>
+              }
+              @if (song.label) {
+                <div>Verlag: {{ song.label }}</div>
+              }
+              @if (song.origin) {
+                <div>Quelle: {{ song.origin }}</div>
+              }
+              <div [matTooltip]="songUsageTooltip$ | async" matTooltipPosition="above">Wie oft
+                verwendet: {{ songCount$ | async }}
+              </div>
+            </div>
           </div>
-          } @if (song.legalOwnerId && song.legalOwner !== 'CCLI') {
+          @if (user$ | async; as user) {
-          <div>Rechteinhaber ID: {{ song.legalOwnerId }}</div>
+            <app-song-text [chordMode]="user.chordMode" [showSwitch]="true" [text]="song.text"
-          } @if (song.artist) {
+                           [validateChordNotation]="true"></app-song-text>
-          <div>Künstler: {{ song.artist }}</div>
-          } @if (song.label) {
-          <div>Verlag: {{ song.label }}</div>
-          } @if (song.origin) {
-          <div>Quelle: {{ song.origin }}</div>
           }
-          <div [matTooltip]="songUsageTooltip$ | async" matTooltipPosition="above">Wie oft verwendet: {{ songCount$ | async }}</div>
+          <mat-chip-listbox *appRole="['leader', 'contributor']" aria-label="Attribute">
+            @for (flag of getFlags(song.flags); track flag) {
+              <mat-chip-option>{{ flag }}</mat-chip-option>
+            }
+          </mat-chip-listbox>
+          <div *appRole="['leader', 'contributor']" class="text">{{ song.comment }}</div>
         </div>
-      </div>
+        <app-button-row>
-      @if (user$ | async; as user) {
+          <app-button (click)="onDelete(song.id)" *appRole="['admin']" [icon]="faDelete">Löschen</app-button>
-      <app-song-text [chordMode]="user.chordMode" [showSwitch]="true" [text]="song.text" [validateChordNotation]="true"></app-song-text>
+          <app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit">Bearbeiten</app-button>
-      }
+          <ng-container *appRole="['leader']">
-      <mat-chip-listbox *appRole="['leader', 'contributor']" aria-label="Attribute">
+            <app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu"> Zu Veranstaltung hinzufügen</app-button>
-        @for (flag of getFlags(song.flags); track flag) {
+            <mat-menu #menu="matMenu">
-        <mat-chip-option>{{ flag }} </mat-chip-option>
+              @for (show of privateShows$|async; track show.id) {
-        }
+                <app-button
-      </mat-chip-listbox>
+                  (click)="addSongToShow(show, song)"> {{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }}
-      <div *appRole="['leader', 'contributor']" class="text">{{ song.comment }}</div>
+                </app-button>
-    </div>
+              }
-    <app-button-row>
+            </mat-menu>
-      <app-button (click)="onDelete(song.id)" *appRole="['admin']" [icon]="faDelete">Löschen </app-button>
+          </ng-container>
-      <app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit">Bearbeiten </app-button>
+        </app-button-row>
-      <ng-container *appRole="['leader']">
+      </app-card>
-        <app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu"> Zu Veranstaltung hinzufügen </app-button>
-        <mat-menu #menu="matMenu">
-          @for (show of privateShows$|async; track show.id) {
-          <app-button (click)="addSongToShow(show, song)"> {{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }} </app-button>
-          }
-        </mat-menu>
-      </ng-container>
-    </app-button-row>
-  </app-card>
-  } @if (files$ | async; as files) { @if (files.length > 0) {
-  <app-card heading="Anhänge">
-    @for (file of files$ | async; track file.id) {
-    <p>
-      <app-file [file]="file"></app-file>
-    </p>
     }
-  </app-card>
+    @if (files$ | async; as files) {
-  } }
+      @if (files.length > 0) {
-</div>
+        <app-card heading="Anhänge">
+          @for (file of files$ | async; track file.id) {
+            <p>
+              <app-file [file]="file"></app-file>
+            </p>
+          }
+        </app-card>
+      }
+    }
+  </div>
+</app-page-frame>

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

@@ -1,4 +1,4 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {SongComponent} from './song.component';
 import {of} from 'rxjs';
@@ -17,7 +17,7 @@ describe('SongComponent', () => {
     params: of({songId: '4711'}),
   };
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
     const songServiceSpy = jasmine.createSpyObj<SongService>('SongService', ['read$']);
     const fileDataServiceSpy = jasmine.createSpyObj<FileDataService>('FileDataService', ['read$']);
     const userServiceSpy = jasmine.createSpyObj<UserService>('UserService', ['incSongCount', 'decSongCount'], {
@@ -33,7 +33,7 @@ describe('SongComponent', () => {
     userServiceSpy.loggedIn$ = jasmine.createSpy('loggedIn$').and.returnValue(of(true));
     userServiceSpy.getUserbyId$ = jasmine.createSpy('getUserbyId$').and.returnValue(of({name: 'Benjamin'}));
 
-    void TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [SongComponent],
       providers: [
         {provide: ActivatedRoute, useValue: mockActivatedRoute},
@@ -44,7 +44,7 @@ describe('SongComponent', () => {
         {provide: ShowSongService, useValue: showSongServiceSpy},
       ],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongComponent);

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

@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {ActivatedRoute, Router, RouterLink} from '@angular/router';
 import {SongService} from '../services/song.service';
 import {distinctUntilChanged, map, switchMap} from 'rxjs/operators';
@@ -26,6 +26,7 @@ import {LegalOwnerPipe} from '../../../widget-modules/pipes/legal-owner-translat
 import {StatusPipe} from '../../../widget-modules/pipes/status-translater/status.pipe';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {MatTooltip} from '@angular/material/tooltip';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
 
 @Component({
   selector: 'app-song',
@@ -50,6 +51,7 @@ import {MatTooltip} from '@angular/material/tooltip';
     StatusPipe,
     ShowTypePipe,
     MatTooltip,
+    PageFrameComponent,
   ],
 })
 export class SongComponent implements OnInit {
@@ -84,14 +86,14 @@ export class SongComponent implements OnInit {
     const song$ = this.activatedRoute.params.pipe(
       map(param => param as {songId: string}),
       map(param => param.songId),
-      switchMap(songId => this.songService.read$(songId))
+      switchMap(songId => this.songService.read$(songId)),
     );
     this.song$ = song$;
 
     this.files$ = this.activatedRoute.params.pipe(
       map(param => param as {songId: string}),
       map(param => param.songId),
-      switchMap(songId => this.fileService.read$(songId))
+      switchMap(songId => this.fileService.read$(songId)),
     );
 
     this.songCount$ = combineLatest([this.userService.user$, song$]).pipe(
@@ -102,7 +104,7 @@ export class SongComponent implements OnInit {
 
         return user?.songUsage?.[song.id] ?? 0;
       }),
-      distinctUntilChanged()
+      distinctUntilChanged(),
     );
 
     this.songUsageShows$ = combineLatest([this.userService.user$, this.showService.list$(), song$]).pipe(
@@ -115,7 +117,7 @@ export class SongComponent implements OnInit {
           .filter(show => show.owner === user.id)
           .filter(show => (show.songIds ?? []).includes(song.id))
           .sort((a, b) => b.date.toMillis() - a.date.toMillis());
-      })
+      }),
     );
 
     this.songUsageTooltip$ = combineLatest([this.songCount$, this.songUsageShows$]).pipe(
@@ -129,7 +131,7 @@ export class SongComponent implements OnInit {
         }
 
         return shows.map(show => `${this.dateFormatter.format(show.date.toDate())} - ${this.showTypePipe.transform(show.showType)}`).join('\n');
-      })
+      }),
     );
   }
 

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

@@ -6,6 +6,7 @@ import {EditComponent} from './song/edit/edit.component';
 import {NewComponent} from './song/new/new.component';
 import {EditSongGuard} from './song/edit/edit-song.guard';
 import {SongListResolver} from './services/song-list.resolver';
+import {RoleGuard} from '../../widget-modules/guards/role.guard';
 
 const routes: Routes = [
   {
@@ -19,6 +20,10 @@ const routes: Routes = [
   {
     path: 'new',
     component: NewComponent,
+    canActivate: [RoleGuard],
+    data: {
+      requiredRoles: ['contributor'],
+    },
   },
   {
     path: ':songId/edit',