optimize show filter

fix show filter
optimize firebase monitor reads
2026-03-09 18:29:56 +01:00 · 2026-03-09 17:51:35 +01:00 · 2026-03-09 17:48:59 +01:00 · 2026-03-09 17:44:45 +01:00 · 2026-03-09 17:41:24 +01:00 · 2026-03-09 17:18:49 +01:00
234 changed files with 26404 additions and 30562 deletions
--- a/.run/build.run.xml
+++ b/.run/build.run.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="build" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json"/>
+    <command value="run"/>
+    <scripts>
+      <script value="build"/>
+    </scripts>
+    <node-interpreter value="project"/>
+    <envs/>
+    <method v="2"/>
+  </configuration>
+</component>
--- a/.run/deploy.run.xml
+++ b/.run/deploy.run.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="deploy" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json"/>
+    <command value="run"/>
+    <scripts>
+      <script value="deploy"/>
+    </scripts>
+    <node-interpreter value="project"/>
+    <envs/>
+    <method v="2"/>
+  </configuration>
+</component>
--- a/.run/start.run.xml
+++ b/.run/start.run.xml
@@ -1,12 +1,15 @@
 <component name="ProjectRunConfigurationManager">
  <configuration default="false" name="start" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json"/>
-    <command value="run"/>
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
    <scripts>
-      <script value="start"/>
+      <script value="start" />
    </scripts>
-    <node-interpreter value="project"/>
-    <envs/>
-    <method v="2"/>
+    <node-interpreter value="project" />
+    <envs />
+    <EXTENSION ID="com.intellij.lang.javascript.buildTools.npm.rc.StartBrowserRunConfigurationExtension">
+      <browser name="98ca6316-2f89-46d9-a9e5-fa9e2b0625b3" start="true" with-js-debugger="true" url="http://localhost.4200" />
+    </EXTENSION>
+    <method v="2" />
  </configuration>
 </component>
--- a/README.md
+++ b/README.md
@@ -1 +1,19 @@
 # wgenerator
+
+## Admin migration
+
+If `songUsage` needs to be rebuilt from all existing shows, log in with a user that has the `admin` role and run this in the browser console:
+
+```js
+await window.wgeneratorAdmin.rebuildSongUsage()
+```
+
+The migration:
+
+- resets `songUsage` for all users
+- scans all shows and all `shows/{id}/songs` entries
+- rebuilds the per-user counters based on show ownership
+
+It returns a summary object with processed user, show and show-song counts.
+
+This is intended as a manual one-off migration and is read-heavy by design.
--- a/angular.json
+++ b/angular.json
@@ -15,12 +15,15 @@
      "prefix": "app",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
          "options": {
-            "outputPath": "dist/wgenerator",
+            "outputPath": {
+              "base": "dist/wgenerator"
+            },
            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
@@ -42,15 +45,16 @@
              "src/styles/shadow.less"
            ],
            "scripts": [],
-            "vendorChunk": true,
            "extractLicenses": false,
-            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true,
            "allowedCommonJsDependencies": [
-              "lodash", "docx"
-            ]
+              "lodash",
+              "docx",
+              "qrcode"
+            ],
+            "browser": "src/main.ts"
          },
          "configurations": {
            "production": {
@@ -66,8 +70,6 @@
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
@@ -80,26 +82,25 @@
                  "maximumError": "10kb"
                }
              ],
-              "serviceWorker": true,
-              "ngswConfigPath": "ngsw-config.json"
+              "serviceWorker": "ngsw-config.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
-            "browserTarget": "wgenerator:build"
+            "buildTarget": "wgenerator:build"
          },
          "configurations": {
            "production": {
-              "browserTarget": "wgenerator:build:production"
+              "buildTarget": "wgenerator:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "browserTarget": "wgenerator:build"
+            "buildTarget": "wgenerator:build"
          }
        },
        "test": {
@@ -147,5 +148,13 @@
    "schematicCollections": [
      "@angular-eslint/schematics"
    ]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
  }
 }
--- a/firebase.json
+++ b/firebase.json
@@ -4,7 +4,7 @@
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
-    "public": "dist/wgenerator",
+    "public": "dist/wgenerator/browser",
    "ignore": [
      "firebase.json",
      "**/.*",
--- a/firestore.rules
+++ b/firestore.rules
@@ -17,6 +17,10 @@ service cloud.firestore {
      allow read: if request.auth.uid != null;
    }

+    match /guest/{guestId} {
+      allow read: if true;
+      allow write: if request.auth.uid != null;
+    }
    match /songs/{song} {
      allow read: if request.auth.uid != null;
      allow write: if request.auth.uid != null;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,75 +1,70 @@
 {
  "name": "wgenerator",
-  "version": "1.3",
+  "version": "1.6",
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "deploy": "ng build --configuration production && firebase deploy",
    "test": "ng test",
    "lint": "ng lint --fix",
-    "postinstall": "ngcc"
+    "update": "ng update @angular/cdk @angular/cli @angular/core @angular/material && ncu -u && npm i && npm fix"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^14.2.10",
-    "@angular/cdk": "^14.2.6",
-    "@angular/common": "^14.2.10",
-    "@angular/compiler": "^14.2.10",
-    "@angular/core": "^14.2.10",
-    "@angular/fire": "^7.4.1",
-    "@angular/forms": "^14.2.10",
-    "@angular/material": "^14.2.6",
-    "@angular/platform-browser": "^14.2.10",
-    "@angular/platform-browser-dynamic": "^14.2.10",
-    "@angular/router": "^14.2.10",
-    "@angular/service-worker": "^14.2.10",
-    "@fortawesome/angular-fontawesome": "^0.11.1",
-    "@fortawesome/fontawesome-svg-core": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "docx": "^7.4.1",
-    "firebase": "^9.6.10",
+    "@angular/animations": "^19.0.5",
+    "@angular/cdk": "^19.0.4",
+    "@angular/common": "^19.0.5",
+    "@angular/compiler": "^19.0.5",
+    "@angular/core": "^19.0.5",
+    "@angular/fire": "^18.0.1",
+    "@angular/forms": "^19.0.5",
+    "@angular/material": "^19.0.4",
+    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/router": "^19.0.5",
+    "@angular/service-worker": "^19.0.5",
+    "@fortawesome/angular-fontawesome": "^0.14.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "docx": "^8.5.0",
+    "firebase": "^10.8.0",
    "lodash": "^4.17.21",
-    "ngx-mat-select-search": "^4.2.1",
-    "ngx-perfect-scrollbar": "^10.1.1",
-    "rxfire": "^6.0.3",
-    "rxjs": "~7.5.6",
-    "swiper": "^9.3.2",
-    "tslib": "^2.4.0",
-    "uuid": "^8.3.2",
-    "zone.js": "~0.11.8"
+    "ngx-mat-select-search": "^7.0.5",
+    "qrcode": "^1.5.3",
+    "rxfire": "^6.0.5",
+    "rxjs": "~7.8.1",
+    "swiper": "^11.0.6",
+    "tslib": "^2.6.2",
+    "zone.js": "~0.15.0"
  },
  "devDependencies": {
-    "@angular-devkit/architect": "0.1402.9",
-    "@angular-devkit/build-angular": "^14.2.9",
-    "@angular-eslint/builder": "14.1.2",
-    "@angular-eslint/eslint-plugin": "14.1.2",
-    "@angular-eslint/eslint-plugin-template": "14.1.2",
-    "@angular-eslint/schematics": "14.1.2",
-    "@angular-eslint/template-parser": "14.1.2",
-    "@angular/cli": "^14.2.9",
-    "@angular/compiler-cli": "^14.2.10",
-    "@angular/language-service": "^14.2.10",
-    "@types/jasmine": "~4.0.3",
-    "@types/jasminewd2": "~2.0.10",
-    "@types/lodash": "^4.14.182",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.22.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "firebase-tools": "^11.6.0",
-    "fuzzy": "^0.1.3",
-    "inquirer": "^9.1.0",
-    "inquirer-autocomplete-prompt": "^2.0.0",
-    "jasmine-core": "~4.3.0",
+    "@angular-devkit/architect": "0.1900.6",
+    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular-eslint/builder": "19.0.2",
+    "@angular-eslint/eslint-plugin": "19.0.2",
+    "@angular-eslint/eslint-plugin-template": "19.0.2",
+    "@angular-eslint/schematics": "19.0.2",
+    "@angular-eslint/template-parser": "19.0.2",
+    "@angular/cli": "^19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
+    "@angular/language-service": "^19.0.5",
+    "@types/jasmine": "~5.1.4",
+    "@types/jasminewd2": "~2.0.13",
+    "@types/lodash": "^4.14.202",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "firebase-tools": "^13.3.1",
+    "jasmine-core": "~5.1.2",
    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.1",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
-    "prettier": "^2.7.1",
-    "protractor": "~7.0.0",
-    "typescript": "~4.7.4"
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "prettier": "^3.2.5",
+    "typescript": "~5.5.4"
  }
 }
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -54,7 +54,8 @@ const routes: Routes = [
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
-      relativeLinkResolution: 'legacy',
+      scrollPositionRestoration: 'enabled',
+      // relativeLinkResolution: 'legacy',
    }),
  ],
  exports: [RouterModule],
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,12 +1,6 @@
 <app-navigation></app-navigation>
-<perfect-scrollbar
-  #scrollbar
-  (psScrollY)="onScoll($event)"
-  [perfectScrollbar]
-  class="scroll"
-  style="max-height: calc(100vh); width: 100%; overflow: hidden"
->
-  <div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
+
+<div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
  <router-outlet #o="outlet"></router-outlet>
-  </div>
-</perfect-scrollbar>
+</div>
+
--- a/src/app/app.component.less
+++ b/src/app/app.component.less
@@ -1,10 +1,3 @@
 h1 {
-  color: red;
-}
-
-
-.manager {
-  //display: grid;
-  //grid-template-columns: 1fr 1fr;
-  //transition: all 1s ease-in-out;
+  color: var(--text);
 }
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -3,14 +3,11 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {AppComponent} from './app.component';

 describe('AppComponent', () => {
-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        imports: [RouterTestingModule],
-        declarations: [AppComponent],
+      imports: [RouterTestingModule, AppComponent],
    }).compileComponents();
-    })
-  );
+  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,8 +1,9 @@
-import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
 import {fader} from './animations';
 import {ScrollService} from './services/scroll.service';
-import {PerfectScrollbarComponent} from 'ngx-perfect-scrollbar';
 import {register} from 'swiper/element/bundle';
+import {RouterOutlet} from '@angular/router';
+import {NavigationComponent} from './widget-modules/components/application-frame/navigation/navigation.component';

@Component({
  selector: 'app-root',
@@ -10,14 +11,10 @@ import {register} from 'swiper/element/bundle';
  styleUrls: ['./app.component.less'],
  animations: [fader],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, NavigationComponent],
 })
 export class AppComponent implements OnInit {
-  @ViewChild('scrollbar', {static: false}) public scrollbar: PerfectScrollbarComponent | null = null;
-
  public constructor(private scrollService: ScrollService) {
-    scrollService.restoreScrollPosition$.subscribe(pos => {
-      if (this.scrollbar && pos) this.scrollbar.directiveRef?.scrollTo(0, pos, 300);
-    });
    register();
  }

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,45 +0,0 @@
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-
-import {AppRoutingModule} from './app-routing.module';
-import {AppComponent} from './app.component';
-import {ServiceWorkerModule} from '@angular/service-worker';
-import {environment} from '../environments/environment';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ApplicationFrameModule} from './widget-modules/components/application-frame/application-frame.module';
-import {AngularFireModule} from '@angular/fire/compat';
-import {AngularFirestoreModule} from '@angular/fire/compat/firestore';
-import {AngularFireStorageModule} from '@angular/fire/compat/storage';
-import {AngularFireDatabaseModule} from '@angular/fire/compat/database';
-import {AngularFireAuthModule} from '@angular/fire/compat/auth';
-import {AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';
-import {MAT_DATE_LOCALE} from '@angular/material/core';
-import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: environment.production,
-    }),
-    BrowserAnimationsModule,
-
-    ApplicationFrameModule,
-
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFirestoreModule.enablePersistence({synchronizeTabs: true}),
-    AngularFireStorageModule,
-    AngularFireDatabaseModule,
-    AngularFireAuthModule,
-    AngularFireAuthGuardModule,
-    FontAwesomeModule,
-    PerfectScrollbarModule,
-  ],
-  providers: [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
--- a/src/app/modules/brand/brand.component.html
+++ b/src/app/modules/brand/brand.component.html
@@ -1,4 +1,4 @@
 <div class="brand">
  <app-logo></app-logo>
-  <div class="copyright">© 2019 - 2023 - Benjamin Ifland</div>
+  <div class="copyright">© 2019 - 2024 - Benjamin Ifland</div>
 </div>
--- a/src/app/modules/brand/brand.component.spec.ts
+++ b/src/app/modules/brand/brand.component.spec.ts
@@ -6,13 +6,11 @@ describe('BrandComponent', () => {
  let component: BrandComponent;
  let fixture: ComponentFixture<BrandComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [BrandComponent],
+      imports: [BrandComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BrandComponent);
--- a/src/app/modules/brand/brand.component.ts
+++ b/src/app/modules/brand/brand.component.ts
@@ -1,8 +1,10 @@
 import {Component} from '@angular/core';
+import {LogoComponent} from '../../widget-modules/components/logo/logo.component';

@Component({
  selector: 'app-brand',
  templateUrl: './brand.component.html',
  styleUrls: ['./brand.component.less'],
+  imports: [LogoComponent],
 })
 export class BrandComponent {}
--- a/src/app/modules/brand/brand.module.ts
+++ b/src/app/modules/brand/brand.module.ts
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {BrandComponent} from './brand.component';
 import {RouterModule, Routes} from '@angular/router';
-import {LogoModule} from '../../widget-modules/components/logo/logo.module';
+
 import {NewUserComponent} from './new-user/new-user.component';

 const routes: Routes = [
@@ -18,7 +18,6 @@ const routes: Routes = [
 ];

@NgModule({
-  declarations: [BrandComponent, NewUserComponent],
-  imports: [CommonModule, RouterModule.forChild(routes), LogoModule],
+  imports: [CommonModule, RouterModule.forChild(routes), BrandComponent, NewUserComponent],
 })
 export class BrandModule {}
--- a/src/app/modules/brand/new-user/new-user.component.less
+++ b/src/app/modules/brand/new-user/new-user.component.less
@@ -1,4 +1,6 @@
-@animation-duration: 20s;
+:host {
+  --animation-duration: 20s;
+}

 .frame {
  width: 512px;
@@ -11,10 +13,10 @@
 .brand {
  position: absolute;
  left: 0;
-  animation: @animation-duration brand ease-in-out forwards;
+  animation: var(--animation-duration) brand ease-in-out forwards;
  opacity: 0;
  @media screen and (max-width: 860px) {
-    animation: @animation-duration brand-mobile ease-in-out forwards;
+    animation: var(--animation-duration) brand-mobile ease-in-out forwards;
  }
 }

@@ -34,7 +36,7 @@
    @media screen and (max-width: 860px) {
      font-size: 40px;
    }
-    animation: @animation-duration welcome ease-in-out forwards;
+    animation: var(--animation-duration) welcome ease-in-out forwards;
  }

  .name {
@@ -43,14 +45,14 @@
    @media screen and (max-width: 860px) {
      font-size: 30px;
    }
-    animation: @animation-duration name ease-in-out forwards;
+    animation: var(--animation-duration) name ease-in-out forwards;
  }

  .roles {
    opacity: 0;
    font-size: 20px;
    margin-top: 40px;
-    animation: @animation-duration roles ease-in-out forwards;
+    animation: var(--animation-duration) roles ease-in-out forwards;
  }
 }

--- a/src/app/modules/brand/new-user/new-user.component.spec.ts
+++ b/src/app/modules/brand/new-user/new-user.component.spec.ts
@@ -6,13 +6,11 @@ describe('NewUserComponent', () => {
  let component: NewUserComponent;
  let fixture: ComponentFixture<NewUserComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [NewUserComponent],
+      imports: [NewUserComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NewUserComponent);
--- a/src/app/modules/brand/new-user/new-user.component.ts
+++ b/src/app/modules/brand/new-user/new-user.component.ts
@@ -2,11 +2,14 @@ import {Component} from '@angular/core';
 import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
+import {BrandComponent} from '../brand.component';
+import {AsyncPipe, NgIf} from '@angular/common';

@Component({
  selector: 'app-new-user',
  templateUrl: './new-user.component.html',
  styleUrls: ['./new-user.component.less'],
+  imports: [BrandComponent, NgIf, AsyncPipe],
 })
 export class NewUserComponent {
  public user$: Observable<User | null> | null = null;
--- a/src/app/modules/guest/guest-show-data.service.ts
+++ b/src/app/modules/guest/guest-show-data.service.ts
@@ -0,0 +1,26 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {shareReplay} from 'rxjs/operators';
+import {DbService} from 'src/app/services/db.service';
+import {GuestShow} from './guest-show';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestShowDataService {
+  private collection = 'guest';
+  public list$: Observable<GuestShow[]> = this.dbService.col$<GuestShow>(this.collection).pipe(
+    shareReplay({
+      bufferSize: 1,
+      refCount: true,
+    })
+  );
+
+  public constructor(private dbService: DbService) {}
+
+  public read$: (id: string) => Observable<GuestShow | null> = (id: string): Observable<GuestShow | null> => this.dbService.doc$(`${this.collection}/${id}`);
+  public update$: (id: string, data: Partial<GuestShow>) => Promise<void> = async (id: string, data: Partial<GuestShow>): Promise<void> =>
+    await this.dbService.doc(this.collection + '/' + id).update(data);
+  public add: (data: Partial<GuestShow>) => Promise<string> = async (data: Partial<GuestShow>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
+  public delete: (id: string) => Promise<void> = async (id: string): Promise<void> => await this.dbService.doc(this.collection + '/' + id).delete();
+}
--- a/src/app/modules/guest/guest-show.service.ts
+++ b/src/app/modules/guest/guest-show.service.ts
@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {Show} from '../shows/services/show';
+import {Song} from '../songs/services/song';
+import {GuestShowDataService} from './guest-show-data.service';
+import {ShowService} from '../shows/services/show.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestShowService {
+  public constructor(
+    private showService: ShowService,
+    private guestShowDataService: GuestShowDataService
+  ) {}
+
+  public async share(show: Show, songs: Song[]): Promise<string> {
+    const data = {
+      showType: show.showType,
+      date: show.date,
+      songs: songs,
+    };
+
+    if (!show.shareId) {
+      const shareId = await this.guestShowDataService.add(data);
+      await this.showService.update$(show.id, {shareId});
+    } else {
+      await this.guestShowDataService.update$(show.shareId, data);
+    }
+
+    return window.location.protocol + '//' + window.location.host + '/guest/' + show.shareId;
+  }
+}
--- a/src/app/modules/guest/guest-show.ts
+++ b/src/app/modules/guest/guest-show.ts
@@ -0,0 +1,10 @@
+import firebase from 'firebase/compat/app';
+import {Song} from '../songs/services/song';
+import Timestamp = firebase.firestore.Timestamp;
+
+export interface GuestShow {
+  id: string;
+  showType: string;
+  date: Timestamp;
+  songs: Song[];
+}
--- a/src/app/modules/guest/guest.component.html
+++ b/src/app/modules/guest/guest.component.html
@@ -1,11 +1,25 @@
-<div *ngIf="songs$ | async as songs" class="view">
-<!--  <swiper>-->
-<!--    <div *ngFor="let song of songs" class="song">-->
-<!--      <app-song-text-->
-<!--        [showSwitch]="false"-->
-<!--        [text]="song"-->
-<!--        chordMode="hide"-->
-<!--      ></app-song-text>-->
-<!--    </div>-->
-<!--  </swiper>-->
+<div *ngIf="show$|async as show" class="page">
+  <div class="title">
+    <div class="left">{{ show.showType|showType }}</div>
+    <div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
+  </div>
+
+  <div class="view">
+    <swiper-container scrollbar="true">
+      <swiper-slide *ngFor="let song of show.songs; let i = index; trackBy: trackBy"
+                    class="song-swipe">
+        <div class="song-title">{{ song.title }}</div>
+
+        <div class="legal">
+          <p *ngIf="song.artist">{{ song.artist }}</p>
+        </div>
+
+        <app-song-text
+          [text]="song.text"
+        ></app-song-text>
+      </swiper-slide>
+    </swiper-container>
+  </div>
 </div>
+
+
--- a/src/app/modules/guest/guest.component.less
+++ b/src/app/modules/guest/guest.component.less
@@ -1,16 +1,59 @@
+.page {
+  background: var(--overlay);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  backdrop-filter: blur(8px);
+
+  --swiper-scrollbar-bg-color: rgba(247, 251, 255, 0.2);
+  --swiper-scrollbar-drag-bg-color: rgba(247, 251, 255, 0.6);
+  --swiper-scrollbar-sides-offset: 20px;
+  --swiper-scrollbar-top: 100px;
+  --swiper-scrollbar-bottom: auto;
+}
+
+.title {
+  color: var(--text-inverse);
+  padding: 70px 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .left {
+    font-size: 1.8em;
+    color: var(--text-inverse);
+  }
+}
+
+.song-title {
+  padding: 20px 20px 0;
+  font-size: 1.3em;
+}
+
+.legal {
+  padding: 0 20px;
+  font-size: 0.6em;
+  color: rgba(247, 251, 255, 0.72);
+}
+
 .view {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
-  background: #0003;
-  backdrop-filter: blur(10px);
-  z-index: 1;
-  color: white;
+  color: var(--text-inverse);
 }

 app-song-text {
  margin: 20px;
  display: block;
 }
+
+.song-swipe {
+  margin-top: 100px;
+  margin-bottom: 50px;
+  min-height: calc(100vh - 150px);
+}
--- a/src/app/modules/guest/guest.component.spec.ts
+++ b/src/app/modules/guest/guest.component.spec.ts
@@ -6,13 +6,11 @@ describe('GuestComponent', () => {
  let component: GuestComponent;
  let fixture: ComponentFixture<GuestComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [GuestComponent],
+      imports: [GuestComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(GuestComponent);
--- a/src/app/modules/guest/guest.component.ts
+++ b/src/app/modules/guest/guest.component.ts
@@ -1,32 +1,32 @@
-import {Component} from '@angular/core';
-import {SongService} from '../songs/services/song.service';
-import {GlobalSettingsService} from '../../services/global-settings.service';
-import {Observable} from 'rxjs';
-import {filter, map, switchMap} from 'rxjs/operators';
-import {ShowSongService} from '../shows/services/show-song.service';
-import {GlobalSettings} from '../../services/global-settings';
-import {ShowService} from '../shows/services/show.service';
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {GuestShowDataService} from './guest-show-data.service';
+import {ActivatedRoute} from '@angular/router';
+import {map, switchMap} from 'rxjs/operators';
+import {Song} from '../songs/services/song';
+import {ConfigService} from '../../services/config.service';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';

@Component({
  selector: 'app-guest',
  templateUrl: './guest.component.html',
  styleUrls: ['./guest.component.less'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [NgIf, NgFor, SongTextComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class GuestComponent {
-  public songs$: Observable<string[]> = this.globalSettingsService.get$.pipe(
-    filter(_ => !!_),
-    map(_ => _ as GlobalSettings),
-    map(_ => _.currentShow),
-    switchMap(_ => this.showSongService.list$(_).pipe(map(l => ({showSongs: l, currentShow: _})))),
-    switchMap(_ => this.showService.read$(_.currentShow).pipe(map(l => ({showSongs: _.showSongs, show: l})))),
-    filter(_ => !!_.showSongs),
-    map(_ => (_?.show ? _.show.order.map(o => _.showSongs.find(f => f.id === o) ?? _.showSongs[0]).map(m => m.text) : []))
+  public show$ = this.currentRoute.params.pipe(
+    map(param => param.id as string),
+    switchMap(id => this.service.read$(id))
  );
+  public config$ = this.configService.get$();

  public constructor(
-    private songService: SongService,
-    private showService: ShowService,
-    private globalSettingsService: GlobalSettingsService,
-    private showSongService: ShowSongService
+    private currentRoute: ActivatedRoute,
+    private service: GuestShowDataService,
+    private configService: ConfigService
  ) {}
+
+  public trackBy = (index: number, show: Song) => show.id;
 }
--- a/src/app/modules/guest/guest.module.ts
+++ b/src/app/modules/guest/guest.module.ts
@@ -1,11 +1,23 @@
-import {NgModule} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GuestComponent} from './guest.component';
 import {RouterModule} from '@angular/router';
-import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';

@NgModule({
-  declarations: [GuestComponent],
-  imports: [CommonModule, RouterModule.forChild([{path: '', component: GuestComponent}]), SongTextModule],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: ':id',
+        component: GuestComponent,
+      },
+    ]),
+    SongTextComponent,
+    ShowTypePipe,
+    GuestComponent,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class GuestModule {}
--- a/src/app/modules/presentation/monitor/legal/legal.component.spec.ts
+++ b/src/app/modules/presentation/monitor/legal/legal.component.spec.ts
@@ -6,13 +6,11 @@ describe('LegalComponent', () => {
  let component: LegalComponent;
  let fixture: ComponentFixture<LegalComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [LegalComponent],
+      imports: [LegalComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LegalComponent);
--- a/src/app/modules/presentation/monitor/legal/legal.component.ts
+++ b/src/app/modules/presentation/monitor/legal/legal.component.ts
@@ -1,11 +1,13 @@
 import {Component, Input} from '@angular/core';
 import {Song} from '../../../songs/services/song';
 import {Config} from '../../../../services/config';
+import {NgIf} from '@angular/common';

@Component({
  selector: 'app-legal',
  templateUrl: './legal.component.html',
  styleUrls: ['./legal.component.less'],
+  imports: [NgIf],
 })
 export class LegalComponent {
  @Input() public song: Song | null = null;
--- a/src/app/modules/presentation/monitor/logo/logo.component.spec.ts
+++ b/src/app/modules/presentation/monitor/logo/logo.component.spec.ts
@@ -6,13 +6,11 @@ describe('LogoComponent', () => {
  let component: LogoComponent;
  let fixture: ComponentFixture<LogoComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [LogoComponent],
+      imports: [LogoComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LogoComponent);
--- a/src/app/modules/presentation/monitor/monitor.component.html
+++ b/src/app/modules/presentation/monitor/monitor.component.html
@@ -1,18 +1,18 @@
 <div class="fullscreen background"></div>
 <div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">

-  <div class="bg-blue fullscreen bg-image" [class.visible]="presentationBackground==='blue'"></div>
-  <div class="bg-green fullscreen bg-image" [class.visible]="presentationBackground==='green'"></div>
-  <div class="bg-leder fullscreen bg-image" [class.visible]="presentationBackground==='leder'"></div>
-  <div class="bg-praise fullscreen bg-image" [class.visible]="presentationBackground==='praise'"></div>
-  <div class="bg-bible fullscreen bg-image" [class.visible]="presentationBackground==='bible'"></div>
+  <div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
+  <div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
+  <div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
+  <div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
+  <div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>


  <div
    [@songSwitch]="songId"
    [class.blur]="songId === 'title' || songId === 'dynamicText'"
-    [class.no-logo]="presentationBackground!=='none'"
    [class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
+    [class.no-logo]="presentationBackground!=='none'"
    class="start fullscreen logo"
  >
    <app-logo></app-logo>
@@ -29,11 +29,12 @@
  </div>

  <app-song-text
-    [header]="song.title"
    *ngIf="songId !== 'title' && songId !== 'empty'"
    [@songSwitch]="songId"
    [fullscreen]="true"
+    [header]="song.title"
    [index]="index??0"
+    [showComments]="false"
    [showSwitch]="false"
    [text]="song.text"
    chordMode="hide"
--- a/src/app/modules/presentation/monitor/monitor.component.less
+++ b/src/app/modules/presentation/monitor/monitor.component.less
@@ -34,6 +34,7 @@
 .bg-blue {
  background-image: url("/assets/bg-dark-blue.jpg");
  filter: blur(10px);
+
  &.visible {
    opacity: 0.5;
  }
@@ -42,6 +43,7 @@
 .bg-green {
  background-image: url("/assets/bg-dark-green.jpg");
  filter: blur(5px);
+
  &.visible {
    opacity: 0.9;
  }
@@ -50,6 +52,7 @@
 .bg-leder {
  background-image: url("/assets/bg-leder.jpg");
  filter: blur(5px);
+
  &.visible {
    opacity: 0.4;
  }
@@ -58,6 +61,7 @@
 .bg-praise {
  background-image: url("/assets/bg-praise.jpg");
  filter: blur(8px);
+
  &.visible {
    opacity: 0.2;
  }
@@ -66,6 +70,7 @@
 .bg-bible {
  background-image: url("/assets/bg-bible.jpg");
  filter: blur(8px);
+
  &.visible {
    opacity: 0.2;
  }
--- a/src/app/modules/presentation/monitor/monitor.component.spec.ts
+++ b/src/app/modules/presentation/monitor/monitor.component.spec.ts
@@ -6,13 +6,11 @@ describe('MonitorComponent', () => {
  let component: MonitorComponent;
  let fixture: ComponentFixture<MonitorComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [MonitorComponent],
+      imports: [MonitorComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MonitorComponent);
--- a/src/app/modules/presentation/monitor/monitor.component.ts
+++ b/src/app/modules/presentation/monitor/monitor.component.ts
@@ -1,26 +1,30 @@
-import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
-import {debounceTime, distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators';
+import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+import {debounceTime, distinctUntilChanged, filter, map, shareReplay, switchMap, takeUntil, tap} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
-import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Config} from '../../../services/config';
-import {Observable} from 'rxjs';
+import {Observable, Subject} from 'rxjs';
 import {ConfigService} from '../../../services/config.service';
 import {songSwitch} from '../../../widget-modules/components/song-text/animation';
-import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {PresentationBackground, Show} from '../../shows/services/show';
-import {GlobalSettings} from '../../../services/global-settings';
+import {ShowSong} from '../../shows/services/show-song';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {openFullscreen} from '../../../services/fullscreen';
+import {AsyncPipe, DatePipe, NgIf} from '@angular/common';
+import {LogoComponent} from './logo/logo.component';
+import {SongTextComponent} from '../../../widget-modules/components/song-text/song-text.component';
+import {LegalComponent} from './legal/legal.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';

@Component({
  selector: 'app-monitor',
  templateUrl: './monitor.component.html',
  styleUrls: ['./monitor.component.less'],
  animations: [songSwitch],
+  imports: [NgIf, LogoComponent, SongTextComponent, LegalComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
-export class MonitorComponent implements OnInit {
+export class MonitorComponent implements OnInit, OnDestroy {
  public song: Song | null = null;
  public zoom = 10;
  public currentShowId: string | null = null;
@@ -32,12 +36,11 @@ export class MonitorComponent implements OnInit {
  public date: Date | null = null;
  public config$: Observable<Config | null>;
  public presentationBackground: PresentationBackground = 'none';
+  private destroy$ = new Subject<void>();

  public constructor(
    private showService: ShowService,
    private showSongService: ShowSongService,
-    private songService: SongService,
-    private textRenderingService: TextRenderingService,
    private globalSettingsService: GlobalSettingsService,
    private configService: ConfigService,
    private cRef: ChangeDetectorRef
@@ -47,40 +50,68 @@ export class MonitorComponent implements OnInit {

  public ngOnInit(): void {
    openFullscreen();
-    this.globalSettingsService.get$
+    const currentShowId$ = this.globalSettingsService.get$
      .pipe(
        debounceTime(100),
        filter(_ => !!_),
-        map(_ => _ as GlobalSettings),
+        map(_ => _),
        map(_ => _.currentShow),
        distinctUntilChanged(),
-        tap(_ => (this.currentShowId = _))
-      )
+        tap(_ => (this.currentShowId = _)),
+        takeUntil(this.destroy$)
+      );
+
+    const show$ = currentShowId$
      .pipe(
-        switchMap(_ => this.showService.read$(_)),
-        filter(_ => !!_),
-        map(_ => _ as Show),
-        tap<Show>(_ => {
-          this.showType = _.showType;
-          this.date = _.date.toDate();
-          this.index = _.presentationSection;
-          this.presentationBackground = _.presentationBackground;
-          this.presentationDynamicCaption = _.presentationDynamicCaption;
-          this.presentationDynamicText = _.presentationDynamicText;
-          this.zoom = _.presentationZoom ?? 30;
-          if (this.songId !== _.presentationSongId) this.songId = 'empty';
+        switchMap(showId => this.showService.read$(showId)),
+        filter((show): show is Show => !!show),
+        shareReplay({
+          bufferSize: 1,
+          refCount: true,
+        }),
+        takeUntil(this.destroy$)
+      );
+
+    show$
+      .pipe(
+        tap(show => {
+          this.showType = show.showType;
+          this.date = show.date.toDate();
+          this.index = show.presentationSection;
+          this.presentationBackground = show.presentationBackground;
+          this.presentationDynamicCaption = show.presentationDynamicCaption;
+          this.presentationDynamicText = show.presentationDynamicText;
+          this.zoom = show.presentationZoom ?? 30;
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(() => this.cRef.markForCheck());
+
+    show$
+      .pipe(
+        map(show => ({showId: show.id, presentationSongId: show.presentationSongId})),
+        distinctUntilChanged((a, b) => a.showId === b.showId && a.presentationSongId === b.presentationSongId),
+        tap(({presentationSongId}) => {
+          if (this.songId !== presentationSongId) {
+            this.songId = 'empty';
+          }
          setTimeout(() => {
-            this.songId = _.presentationSongId;
+            this.songId = presentationSongId;
            this.cRef.markForCheck();
          }, 600);
        }),
-        switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
-        filter(_ => !!_),
-        map(_ => _ as Song)
+        switchMap(({showId, presentationSongId}) => this.showSongService.read$(showId, presentationSongId)),
+        filter((song): song is ShowSong => !!song),
+        takeUntil(this.destroy$)
      )
-      .subscribe(_ => {
-        this.song = _;
+      .subscribe(song => {
+        this.song = song;
        this.cRef.markForCheck();
      });
  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }
--- a/src/app/modules/presentation/presentation.module.ts
+++ b/src/app/modules/presentation/presentation.module.ts
@@ -4,43 +4,45 @@ import {CommonModule} from '@angular/common';
 import {PresentationRoutingModule} from './presentation-routing.module';
 import {MonitorComponent} from './monitor/monitor.component';
 import {RemoteComponent} from './remote/remote.component';
-import {CardModule} from '../../widget-modules/components/card/card.module';
+
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
-import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
-import {SectionTypeTranslatorModule} from '../../widget-modules/pipes/section-type-translator/section-type-translator.module';
-import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 import {LegalComponent} from './monitor/legal/legal.component';
 import {MatButtonModule} from '@angular/material/button';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatSliderModule} from '@angular/material/slider';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 import {LogoComponent} from './monitor/logo/logo.component';
 import {SelectComponent} from './select/select.component';
 import {MatInputModule} from '@angular/material/input';
-import {UserNameModule} from '../../services/user/user-name/user-name.module';
+
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {AddSongComponent} from '../../widget-modules/components/add-song/add-song.component';
+import {SectionTypePipe} from '../../widget-modules/pipes/section-type-translator/section-type.pipe';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';

@NgModule({
-  declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent],
  exports: [RemoteComponent],
  imports: [
    CommonModule,
    PresentationRoutingModule,
-    CardModule,
    MatFormFieldModule,
    MatSelectModule,
-    ShowTypeTranslaterModule,
-    SectionTypeTranslatorModule,
-    SongTextModule,
+    ShowTypePipe,
+    SectionTypePipe,
+    SongTextComponent,
    MatButtonModule,
    FontAwesomeModule,
    MatSliderModule,
    FormsModule,
-    AddSongModule,
+    AddSongComponent,
    ReactiveFormsModule,
    MatInputModule,
-    UserNameModule,
+    MonitorComponent,
+    RemoteComponent,
+    LegalComponent,
+    LogoComponent,
+    SelectComponent,
  ],
 })
 export class PresentationModule {}
--- a/src/app/modules/presentation/remote/remote.component.html
+++ b/src/app/modules/presentation/remote/remote.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="show" @fade>
-  <app-card [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
-            closeLink="/presentation/select" [closeIcon]="faIcon">
+  <app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
+            [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">

    <ng-container *ngIf="!progress">
      <div class="song">
@@ -61,7 +61,8 @@

        <mat-form-field appearance="outline">
          <mat-label>Überschrift</mat-label>
-          <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption" autocomplete="off" id="dynamic-caption"
+          <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
+                 autocomplete="off" id="dynamic-caption"
                 matInput
                 type="text">
        </mat-form-field>
@@ -77,7 +78,7 @@

      <div *ngIf="show" class="div-bottom">

-        <button routerLink="/presentation/monitor" mat-button>
+        <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
          <fa-icon [icon]="faDesktop"></fa-icon>
          Präsentation starten
        </button>
@@ -86,8 +87,8 @@
        <mat-form-field appearance="outline">
          <mat-label>Hintergrund</mat-label>
          <mat-select
-            [ngModel]="show.presentationBackground"
-            (ngModelChange)="onBackground($event, show.id)">
+            (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>
@@ -98,25 +99,27 @@
        </mat-form-field>

        <mat-slider
-          (ngModelChange)="onZoom($event, show.id)"
+          #slider
          [max]="100"
          [min]="10"
-          [ngModel]="show.presentationZoom"
          [step]="2"
-          [thumbLabel]="true"
-          color="primary"
          class="zoom-slider"
-        >
+          color="primary"
+          ngDefaultControl
+        ><input (ngModelChange)="onZoom($event, show.id)"
+                [ngModel]="show.presentationZoom"
+                matSliderThumb>
        </mat-slider>

+
      </div>

      <app-add-song
        *ngIf="show"
        [addedLive]="true"
        [showSongs]="showSongs"
-        [songs]="songs$|async"
        [show]="show"
+        [songs]="songs$|async"
      ></app-add-song>
    </ng-container>
  </app-card>
--- a/src/app/modules/presentation/remote/remote.component.less
+++ b/src/app/modules/presentation/remote/remote.component.less
@@ -1,12 +1,14 @@
@import "../../../../styles/shadow";

 .song {
-  background: #fff;
+  background: var(--surface-strong);
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
+  color: var(--text);
+  border: 1px solid var(--surface-border);

  @media screen and (max-width: 860px) {
    width: 100vw;
@@ -14,7 +16,7 @@
    border-radius: 0;
    box-sizing: border-box;
    margin: -11px -20px 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--surface-border);
  }
 }

@@ -39,35 +41,31 @@
 }

 .song-part {
-  background: #fff;
+  background: var(--surface-strong);
  border-radius: 8px;
  overflow: hidden;
-  transition: 300ms all ease-in-out;
+  transition: var(--transition);
  cursor: pointer;
-  outline: 0.5px solid #eee;
+  outline: 1px solid var(--divider);

  &:hover {
-    .card-1;
-    outline: 0 solid transparent;
+    outline: 1px solid var(--primary-hover);
  }

  &.active {
-    .card-2;
-    outline: 0 solid transparent;
+    outline: 1px solid var(--primary-color);

    .head {
-      background: #4286f4;
-      color: white;
+      background-color: var(--primary-color);
+      color: var(--text-inverse);
    }

-    .fragment {
-    }
  }
 }

 .head {
-  transition: 300ms all ease-in-out;
-  background: #eee;
+  transition: var(--transition);
+  background: var(--surface-muted);
  padding: 10px;
  font-weight: bold;
 }
@@ -79,7 +77,11 @@
 .div-bottom {
  display: grid;
  gap: 20px;
-  grid-template-columns: min-content min-content auto;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  .btn-start-presentation {
+    height: 56px;
+  }

  @media screen and (max-width: 860px) {
    gap: 10px;
@@ -100,9 +102,9 @@
 a {
  font-size: 30px;
  padding: 10px;
-  transition: all 300ms ease-in-out;
+  transition: var(--transition);

  &:hover {
-    color: #4286f4;
+    color: var(--link-color);
  }
 }
--- a/src/app/modules/presentation/remote/remote.component.spec.ts
+++ b/src/app/modules/presentation/remote/remote.component.spec.ts
@@ -6,13 +6,11 @@ describe('RemoteComponent', () => {
  let component: RemoteComponent;
  let fixture: ComponentFixture<RemoteComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [RemoteComponent],
+      imports: [RemoteComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(RemoteComponent);
--- a/src/app/modules/presentation/remote/remote.component.ts
+++ b/src/app/modules/presentation/remote/remote.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
 import {combineLatest, Subject} from 'rxjs';
 import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
@@ -7,11 +7,25 @@ import {faDesktop, faFolderOpen} from '@fortawesome/free-solid-svg-icons';
 import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
-import {debounceTime, filter, map} from 'rxjs/operators';
+import {debounceTime, distinctUntilChanged, filter, map, switchMap, takeUntil} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
-import {GlobalSettings} from '../../../services/global-settings';
+import {LineType} from '../../songs/services/line-type';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatButton} from '@angular/material/button';
+import {RouterLink} from '@angular/router';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {MatSlider, MatSliderThumb} from '@angular/material/slider';
+import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {SectionTypePipe} from '../../../widget-modules/pipes/section-type-translator/section-type.pipe';

 export interface PresentationSong {
  id: string;
@@ -25,8 +39,30 @@ export interface PresentationSong {
  styleUrls: ['./remote.component.less'],
  animations: [fade],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgIf,
+    CardComponent,
+    NgFor,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    ReactiveFormsModule,
+    FormsModule,
+    MatButton,
+    RouterLink,
+    FaIconComponent,
+    MatSelect,
+    MatOption,
+    MatSlider,
+    MatSliderThumb,
+    AddSongComponent,
+    AsyncPipe,
+    DatePipe,
+    ShowTypePipe,
+    SectionTypePipe,
+  ],
 })
-export class RemoteComponent {
+export class RemoteComponent implements OnDestroy {
  public show: Show | null = null;
  public showSongs: ShowSong[] = [];
  public songs$ = this.songService.list$();
@@ -35,29 +71,59 @@ export class RemoteComponent {
  public faIcon = faFolderOpen;

  public faDesktop = faDesktop;
+  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
+  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
+  private destroy$ = new Subject<void>();
+
+  public constructor(
+    private showService: ShowService,
+    private showSongService: ShowSongService,
+    private songService: SongService,
+    private textRenderingService: TextRenderingService,
+    globalSettingsService: GlobalSettingsService,
+    private cRef: ChangeDetectorRef
+  ) {
+    globalSettingsService.get$
+      .pipe(
+        filter((settings): settings is NonNullable<typeof settings> => !!settings),
+        map(_ => _.currentShow),
+        filter((showId): showId is string => !!showId),
+        distinctUntilChanged(),
+        switchMap(showId =>
+          combineLatest([this.showService.read$(showId), this.showSongService.list$(showId)]).pipe(
+            map(([show, list]) => {
+              const presentationSongs = list.map(song => ({
+                id: song.id,
+                title: song.title,
+                sections: this.textRenderingService.parse(song.text, null, false),
+              }));
+              return {show, list, presentationSongs};
+            })
+          )
+        ),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(({show, list, presentationSongs}) => {
+        this.showSongs = list;
+        this.show = show;
+        const order = show?.order ?? [];
+        const presentationSongsById = new Map(presentationSongs.map(song => [song.id, song] as const));
+        this.presentationSongs = order.map(id => presentationSongsById.get(id) ?? null).filter((s): s is PresentationSong => !!s);
+        this.cRef.markForCheck();
+      });
+
+    this.presentationDynamicCaptionChanged$
+      .pipe(debounceTime(1000))
+      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
+    this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
+  }

  public trackBy(index: number, item: PresentationSong): string {
    return item.id;
  }

-  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
-
-  public onShowChanged(change: string): void {
-    combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
-      this.showSongs = list;
-      this.show = show;
-      const presentationSongs = list.map(song => ({
-        id: song.id,
-        title: song.title,
-        sections: this.textRenderingService.parse(song.text, null),
-      }));
-      this.presentationSongs = show?.order.map(_ => presentationSongs.filter(f => f.id === _)[0]) ?? [];
-      this.cRef.markForCheck();
-    });
-  }
-
  public getFirstLine(section: Section): string {
-    return section.lines.filter(_ => _.type === 1)[0].text;
+    return section.lines.filter(_ => _.type === LineType.text)[0].text;
  }

  public async onSectionClick(id: string, index: number, showId: string): Promise<void> {
@@ -74,32 +140,6 @@ export class RemoteComponent {
  public async onBackground(presentationBackground: PresentationBackground, showId: string): Promise<void> {
    await this.showService.update$(showId, {presentationBackground});
  }
-  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
-
-  public constructor(
-    private showService: ShowService,
-    private showSongService: ShowSongService,
-    private songService: SongService,
-    private textRenderingService: TextRenderingService,
-    private globalSettingsService: GlobalSettingsService,
-    private cRef: ChangeDetectorRef
-  ) {
-    globalSettingsService.get$
-      .pipe(
-        filter(_ => !!_),
-        map(_ => _ as GlobalSettings),
-        map(_ => _.currentShow)
-      )
-      .subscribe(_ => {
-        this.onShowChanged(_);
-        this.cRef.markForCheck();
-      });
-
-    this.presentationDynamicCaptionChanged$
-      .pipe(debounceTime(1000))
-      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
-    this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
-  }

  public onDynamicCaption(presentationDynamicCaption: string, showId: string): void {
    this.presentationDynamicCaptionChanged$.next({presentationDynamicCaption, showId});
@@ -108,4 +148,9 @@ export class RemoteComponent {
  public onDynamicText(presentationDynamicText: string, showId: string): void {
    this.presentationDynamicTextChanged$.next({presentationDynamicText, showId});
  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }
--- a/src/app/modules/presentation/select/select.component.html
+++ b/src/app/modules/presentation/select/select.component.html
@@ -1,11 +1,11 @@
 <div *ngIf="shows$ | async as shows" @fade>
-  <app-card heading="Bitte eine Veranstaltung auswählen" *ngIf="visible">
+  <app-card *ngIf="visible" heading="Bitte eine Veranstaltung auswählen">
    <p *ngIf="!shows.length">
      Es ist derzeit keine Veranstaltung vorhanden
    </p>

    <div *ngIf="shows.length>0" class="list">
-      <button mat-stroked-button *ngFor="let show of shows" (click)="selectShow(show)">
+      <button (click)="selectShow(show)" *ngFor="let show of shows" mat-stroked-button>
        <app-user-name [userId]="show.owner"></app-user-name>
        ,
        {{ show.showType | showType }},
--- a/src/app/modules/presentation/select/select.component.ts
+++ b/src/app/modules/presentation/select/select.component.ts
@@ -5,21 +5,31 @@ import {Show} from '../../shows/services/show';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Router} from '@angular/router';
 import {fade} from '../../../animations';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatButton} from '@angular/material/button';
+import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.less'],
  animations: [fade],
+  imports: [NgIf, CardComponent, NgFor, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class SelectComponent implements OnInit {
-  public constructor(private showService: ShowService, private globalSettingsService: GlobalSettingsService, private router: Router) {}
  public visible = false;
-
  public shows$ = this.showService
    .list$(true)
    .pipe(map(_ => _.filter(_ => _.date.toDate() > new Date(new Date().setMonth(new Date().getMonth() - 1))).sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0))));

+  public constructor(
+    private showService: ShowService,
+    private globalSettingsService: GlobalSettingsService,
+    private router: Router
+  ) {}
+
  public async selectShow(show: Show) {
    this.visible = false;

--- a/src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.spec.ts
+++ b/src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.spec.ts
@@ -8,7 +8,7 @@ describe('ArchiveDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [ArchiveDialogComponent],
+      imports: [ArchiveDialogComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(ArchiveDialogComponent);
@@ -17,6 +17,6 @@ describe('ArchiveDialogComponent', () => {
  });

  it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
  });
 });
--- a/src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.ts
+++ b/src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.ts
@@ -1,8 +1,11 @@
 import {Component} from '@angular/core';
+import {MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
+import {MatButton} from '@angular/material/button';

@Component({
  selector: 'app-archive-dialog',
  templateUrl: './archive-dialog.component.html',
  styleUrls: ['./archive-dialog.component.less'],
+  imports: [MatDialogContent, MatDialogActions, MatButton, MatDialogClose],
 })
 export class ArchiveDialogComponent {}
--- a/src/app/modules/shows/dialog/share-dialog/share-dialog.component.html
+++ b/src/app/modules/shows/dialog/share-dialog/share-dialog.component.html
@@ -0,0 +1,13 @@
+<div mat-dialog-content>
+  <a [href]="data.url">{{ data.url }}</a>
+  <div [style.background-image]="'url('+qrCode+')'" alt="qrcode" class="qrcode">
+  </div>
+</div>
+<div mat-dialog-actions>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>
+    Schließen
+  </button>
+  <button (click)="share()" mat-button>
+    Teilen
+  </button>
+</div>
--- a/src/app/modules/shows/dialog/share-dialog/share-dialog.component.less
+++ b/src/app/modules/shows/dialog/share-dialog/share-dialog.component.less
@@ -0,0 +1,7 @@
+.qrcode {
+  width: 300px;
+  height: 300px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
--- a/src/app/modules/shows/dialog/share-dialog/share-dialog.component.spec.ts
+++ b/src/app/modules/shows/dialog/share-dialog/share-dialog.component.spec.ts
@@ -0,0 +1,22 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ShareDialogComponent} from './share-dialog.component';
+
+describe('ShareDialogComponent', () => {
+  let component: ShareDialogComponent;
+  let fixture: ComponentFixture<ShareDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ShareDialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ShareDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    void expect(component).toBeTruthy();
+  });
+});
--- a/src/app/modules/shows/dialog/share-dialog/share-dialog.component.ts
+++ b/src/app/modules/shows/dialog/share-dialog/share-dialog.component.ts
@@ -0,0 +1,47 @@
+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';
+
+export interface ShareDialogData {
+  url: string;
+  show: Show;
+}
+
+@Component({
+  selector: 'app-share-dialog',
+  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose],
+  templateUrl: './share-dialog.component.html',
+  styleUrl: './share-dialog.component.less',
+})
+export class ShareDialogComponent {
+  public qrCode: string;
+
+  public constructor(@Inject(MAT_DIALOG_DATA) public data: ShareDialogData) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+    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(_ => (this.qrCode = _));
+  }
+
+  public async share() {
+    if (navigator.clipboard) await navigator.clipboard.writeText(this.data.url);
+
+    if (navigator.share)
+      await navigator.share({
+        title: new ShowTypePipe().transform(this.data.show.showType),
+        text: new ShowTypePipe().transform(this.data.show.showType) + ' am ' + this.data.show.date.toDate().toLocaleString('de'),
+        url: this.data.url,
+      });
+  }
+}
--- a/src/app/modules/shows/edit/edit.component.html
+++ b/src/app/modules/shows/edit/edit.component.html
@@ -7,18 +7,20 @@
          <mat-optgroup label="öffentlich">
            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
                key | showType
-              }}</mat-option>
+              }}
+            </mat-option>
          </mat-optgroup>
          <mat-optgroup label="privat">
            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
                key | showType
-              }}</mat-option>
+              }}
+            </mat-option>
          </mat-optgroup>
        </mat-select>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Datum</mat-label>
-        <input [matDatepicker]="picker" formControlName="date" matInput/>
+        <input [matDatepicker]="picker" formControlName="date" matInput />
        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
        <mat-datepicker #picker touchUi></mat-datepicker>
      </mat-form-field>
--- a/src/app/modules/shows/edit/edit.component.ts
+++ b/src/app/modules/shows/edit/edit.component.ts
@@ -3,15 +3,45 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable, take} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
+import firebase from 'firebase/compat/app';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+import {NgFor} from '@angular/common';
+import {MatInput} from '@angular/material/input';
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import Timestamp = firebase.firestore.Timestamp;

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.less'],
+  imports: [
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOptgroup,
+    NgFor,
+    MatOption,
+    MatInput,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatSuffix,
+    MatDatepicker,
+    ButtonRowComponent,
+    ButtonComponent,
+    ShowTypePipe,
+  ],
 })
 export class EditComponent implements OnInit {
  public shows$: Observable<Show[]>;
@@ -24,7 +54,12 @@ export class EditComponent implements OnInit {
  });
  public faSave = faSave;

-  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router, private activatedRoute: ActivatedRoute) {
+  public constructor(
+    private showService: ShowService,
+    showDataService: ShowDataService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute
+  ) {
    this.shows$ = showDataService.list$;
  }

@@ -53,13 +88,10 @@ export class EditComponent implements OnInit {
      return;
    }

-    await this.showService.update$(
-      this.form.value.id as string,
-      {
-        date: this.form.value.date,
+    await this.showService.update$(this.form.value.id, {
+      date: Timestamp.fromDate(this.form.value.date),
      showType: this.form.value.showType,
-      } as Partial<Show>
-    );
+    } as Partial<Show>);
    await this.router.navigateByUrl(`/shows/${this.form.value.id ?? ''}`);
  }
 }
--- a/src/app/modules/shows/list/filter/filter-values.ts
+++ b/src/app/modules/shows/list/filter/filter-values.ts
@@ -1,3 +1,5 @@
 export interface FilterValues {
  time: number;
+  owner: string;
+  showType: string;
 }
--- a/src/app/modules/shows/list/filter/filter.component.html
+++ b/src/app/modules/shows/list/filter/filter.component.html
@@ -6,11 +6,42 @@
      <mat-select formControlName="time">
        <mat-option *ngFor="let time of times" [value]="time.key">{{
            time.value
-          }}</mat-option>
+          }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Ersteller</mat-label>
+      <mat-select formControlName="owner">
+        <mat-option [value]="null">Alle</mat-option>
+        <mat-option *ngFor="let owner of owners" [value]="owner.key">{{
+            owner.value
+          }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Art der Veranstaltung</mat-label>
+      <mat-select formControlName="showType">
+        <mat-option [value]="null">Alle</mat-option>
+        <mat-optgroup label="öffentlich">
+          <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
+              key | showType
+            }}
+          </mat-option>
+        </mat-optgroup>
+        <mat-optgroup label="privat">
+          <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
+              key | showType
+            }}
+          </mat-option>
+        </mat-optgroup>
      </mat-select>
    </mat-form-field>

  </div>

-  <i>Anzahl der Suchergebnisse: {{ shows.length }}</i>
+  <i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>
 </div>
--- a/src/app/modules/shows/list/filter/filter.component.less
+++ b/src/app/modules/shows/list/filter/filter.component.less
@@ -1,5 +1,5 @@
 .third {
  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
 }
--- a/src/app/modules/shows/list/filter/filter.component.spec.ts
+++ b/src/app/modules/shows/list/filter/filter.component.spec.ts
@@ -8,7 +8,7 @@ describe('FilterComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [FilterComponent],
+      imports: [FilterComponent],
    }).compileComponents();
  });

@@ -19,6 +19,6 @@ describe('FilterComponent', () => {
  });

  it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
  });
 });
--- a/src/app/modules/shows/list/filter/filter.component.ts
+++ b/src/app/modules/shows/list/filter/filter.component.ts
@@ -1,19 +1,33 @@
 import {Component, Input} from '@angular/core';
-import {KeyValue} from '@angular/common';
+import {KeyValue, NgFor} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {FilterValues} from './filter-values';
 import {Show} from '../../services/show';
+import {ShowService} from '../../services/show.service';
+import {distinctUntilChanged, map} from 'rxjs/operators';
+import {combineLatest, Observable} from 'rxjs';
+import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
+import {UserService} from '../../../../services/user/user.service';
+import {isEqual} from 'lodash';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.less'],
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, NgFor, MatOption, MatOptgroup, ShowTypePipe],
 })
 export class FilterComponent {
  @Input() public route = '/shows/';
  @Input() public shows: Show[] = [];

+  public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
+  public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
+
  public filterFormGroup: UntypedFormGroup;
  public times: KeyValue<number, string>[] = [
    {key: 1, value: 'letzter Monat'},
@@ -22,22 +36,60 @@ export class FilterComponent {
    {key: 99999, value: 'alle'},
  ];

-  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
+  public owners: {key: string; value: string}[] = [];
+
+  public constructor(
+    private router: Router,
+    private showService: ShowService,
+    private userService: UserService,
+    activatedRoute: ActivatedRoute,
+    fb: UntypedFormBuilder
+  ) {
    this.filterFormGroup = fb.group({
      time: 1,
+      owner: null,
+      showType: null,
    });

    activatedRoute.queryParams.subscribe(params => {
      const filterValues = params as FilterValues;
      if (filterValues.time) this.filterFormGroup.controls.time.setValue(+filterValues.time);
+      this.filterFormGroup.controls.owner.setValue(filterValues.owner ?? null, {emitEvent: false});
+      this.filterFormGroup.controls.showType.setValue(filterValues.showType ?? null, {emitEvent: false});
    });

    this.filterFormGroup.controls.time.valueChanges.subscribe(_ => void this.filerValueChanged('time', _ as number));
+    this.filterFormGroup.controls.owner.valueChanges.subscribe(_ => void this.filerValueChanged('owner', _ as string));
+    this.filterFormGroup.controls.showType.valueChanges.subscribe(_ => void this.filerValueChanged('showType', _ as string));
+
+    this.owners$().subscribe(owners => (this.owners = owners));
  }

+  public owners$ = (): Observable<{key: string; value: string}[]> => {
+    return combineLatest([
+      this.showService.list$().pipe(
+        map(shows => {
+          return shows.map(show => show.owner).filter(onlyUnique);
+        })
+      ),
+      this.userService.users$,
+    ]).pipe(
+      map(([owners, users]) => {
+        return owners
+          .map(ownerId => ({
+            key: ownerId,
+            value: users.find(user => user.id === ownerId)?.name,
+          }))
+          .sort(dynamicSort('value'));
+      }),
+      distinctUntilChanged(isEqual),
+      map(_ => _ as {key: string; value: string}[])
+    );
+  };
+
  private async filerValueChanged<T>(key: string, value: T): Promise<void> {
    const route = this.router.createUrlTree([this.route], {
-      queryParams: {[key]: value},
+      queryParams: {[key]: value || null},
      queryParamsHandling: 'merge',
    });
    await this.router.navigateByUrl(route);
--- a/src/app/modules/shows/list/list-item/list-item.component.html
+++ b/src/app/modules/shows/list/list-item/list-item.component.html
@@ -1,5 +1,7 @@
-<div class="list-item" *ngIf="show">
+<div *ngIf="show" class="list-item">
  <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
-  <div><app-user-name [userId]="show.owner"></app-user-name></div>
+  <div>
+    <app-user-name [userId]="show.owner"></app-user-name>
+  </div>
  <div>{{ show.showType | showType }}</div>
 </div>
--- a/src/app/modules/shows/list/list-item/list-item.component.less
+++ b/src/app/modules/shows/list/list-item/list-item.component.less
@@ -1,5 +1,3 @@
-@import "../../../../../styles/styles";
-
 .list-item {
  padding: 5px 20px;
  display: grid;
@@ -12,10 +10,11 @@
  }

  cursor: pointer;
+  transition: var(--transition);

  &:hover {
-    background: @primary-color;
-    color: #fff;
+    background: var(--hover-background);
+    color: var(--text);
  }
 }

--- a/src/app/modules/shows/list/list-item/list-item.component.spec.ts
+++ b/src/app/modules/shows/list/list-item/list-item.component.spec.ts
@@ -6,13 +6,11 @@ describe('ListItemComponent', () => {
  let component: ListItemComponent;
  let fixture: ComponentFixture<ListItemComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [ListItemComponent],
+      imports: [ListItemComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ListItemComponent);
--- a/src/app/modules/shows/list/list-item/list-item.component.ts
+++ b/src/app/modules/shows/list/list-item/list-item.component.ts
@@ -1,10 +1,14 @@
 import {Component, Input} from '@angular/core';
 import {Show} from '../../services/show';
+import {DatePipe, NgIf} from '@angular/common';
+import {UserNameComponent} from '../../../../services/user/user-name/user-name.component';
+import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';

@Component({
  selector: 'app-list-item',
  templateUrl: './list-item.component.html',
  styleUrls: ['./list-item.component.less'],
+  imports: [NgIf, UserNameComponent, DatePipe, ShowTypePipe],
 })
 export class ListItemComponent {
  @Input() public show: Show | null = null;
--- a/src/app/modules/shows/list/list.component.html
+++ b/src/app/modules/shows/list/list.component.html
@@ -1,5 +1,5 @@
 <div>
-<!--  <app-list-header *appRole="['leader']"></app-list-header>-->
+  <!--  <app-list-header *appRole="['leader']"></app-list-header>-->
  <app-list-header *appRole="['leader']">
    <app-filter *ngIf="shows$ | async as shows" [shows]="publicShows$ | async"></app-filter>
  </app-list-header>
@@ -9,7 +9,7 @@
      <app-card
        *ngIf="shows.length > 0"
        [padding]="false"
-        heading="meine Veranstaltungen"
+        heading="Meine Veranstaltungen"
      >
        <app-list-item
          *ngFor="let show of shows | sortBy: 'desc':'date'"
@@ -24,7 +24,7 @@
    <app-card
      *ngIf="shows.length > 0"
      [padding]="false"
-      heading="veröffentlichte Veranstaltungen"
+      heading="Veröffentlichte Veranstaltungen"
    >
      <app-list-item
        *ngFor="let show of shows | sortBy: 'desc':'date'; trackBy: trackBy"
--- a/src/app/modules/shows/list/list.component.spec.ts
+++ b/src/app/modules/shows/list/list.component.spec.ts
@@ -6,13 +6,11 @@ describe('ListComponent', () => {
  let component: ListComponent;
  let fixture: ComponentFixture<ListComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [ListComponent],
+      imports: [ListComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ListComponent);
--- a/src/app/modules/shows/list/list.component.ts
+++ b/src/app/modules/shows/list/list.component.ts
@@ -4,14 +4,22 @@ import {Show} from '../services/show';
 import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
 import {FilterValues} from './filter/filter-values';
-import {ActivatedRoute} from '@angular/router';
-import {map} from 'rxjs/operators';
+import {ActivatedRoute, RouterLink} from '@angular/router';
+import {map, switchMap} from 'rxjs/operators';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
+import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {FilterComponent} from './filter/filter.component';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {ListItemComponent} from './list-item/list-item.component';
+import {SortByPipe} from '../../../widget-modules/pipes/sort-by/sort-by.pipe';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.less'],
  animations: [fade],
+  imports: [RoleDirective, ListHeaderComponent, NgIf, FilterComponent, CardComponent, NgFor, ListItemComponent, RouterLink, AsyncPipe, SortByPipe],
 })
 export class ListComponent {
  public shows$ = this.showService.list$();
@@ -23,18 +31,44 @@ export class ListComponent {
      return +filterValues.time;
    })
  );
-
-  public publicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
-    map(_ =>
-      _[0].filter(f => {
-        const d = new Date();
-        d.setMonth(d.getMonth() - _[1]);
-        return f.published && f.date.toDate() >= d;
+  public owner$ = this.activatedRoute.queryParams.pipe(
+    map(params => {
+      const filterValues = params as FilterValues;
+      return filterValues?.owner;
+    })
+  );
+  public showType$ = this.activatedRoute.queryParams.pipe(
+    map(params => {
+      const filterValues = params as FilterValues;
+      return filterValues?.showType;
+    })
+  );
+  public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
+
+  public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
+    map(([shows, lastMonths]) => {
+      const startDate = new Date();
+      startDate.setHours(0, 0, 0, 0);
+      startDate.setDate(startDate.getDate() - lastMonths * 30);
+
+      return shows.filter(show => show.published && !show.archived && show.date.toDate() >= startDate);
    })
-    )
  );

-  public constructor(private showService: ShowService, private activatedRoute: ActivatedRoute) {}
+  public publicShows$ = combineLatest([this.queriedPublicShows$, this.fallbackPublicShows$, this.owner$, this.showType$]).pipe(
+    map(([queriedShows, fallbackShows, owner, showType]) => {
+      const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows;
+
+      return shows
+        .filter(show => !owner || show.owner === owner)
+        .filter(show => !showType || show.showType === showType);
+    })
+  );
+
+  public constructor(
+    private showService: ShowService,
+    private activatedRoute: ActivatedRoute
+  ) {}

  public trackBy = (index: number, show: unknown) => (show as Show).id;
 }
--- a/src/app/modules/shows/new/new.component.html
+++ b/src/app/modules/shows/new/new.component.html
@@ -7,18 +7,20 @@
          <mat-optgroup label="öffentlich">
            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
                key | showType
-              }}</mat-option>
+              }}
+            </mat-option>
          </mat-optgroup>
          <mat-optgroup label="privat">
            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
                key | showType
-              }}</mat-option>
+              }}
+            </mat-option>
          </mat-optgroup>
        </mat-select>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Datum</mat-label>
-        <input [matDatepicker]="picker" formControlName="date" matInput/>
+        <input [matDatepicker]="picker" formControlName="date" matInput />
        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
        <mat-datepicker #picker touchUi></mat-datepicker>
      </mat-form-field>
--- a/src/app/modules/shows/new/new.component.spec.ts
+++ b/src/app/modules/shows/new/new.component.spec.ts
@@ -6,13 +6,11 @@ describe('NewComponent', () => {
  let component: NewComponent;
  let fixture: ComponentFixture<NewComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [NewComponent],
+      imports: [NewComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NewComponent);
--- a/src/app/modules/shows/new/new.component.ts
+++ b/src/app/modules/shows/new/new.component.ts
@@ -3,14 +3,42 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+import {NgFor} from '@angular/common';
+import {MatInput} from '@angular/material/input';
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';

@Component({
  selector: 'app-new',
  templateUrl: './new.component.html',
  styleUrls: ['./new.component.less'],
+  imports: [
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOptgroup,
+    NgFor,
+    MatOption,
+    MatInput,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatSuffix,
+    MatDatepicker,
+    ButtonRowComponent,
+    ButtonComponent,
+    ShowTypePipe,
+  ],
 })
 export class NewComponent implements OnInit {
  public shows$: Observable<Show[]>;
@@ -22,7 +50,11 @@ export class NewComponent implements OnInit {
  });
  public faSave = faSave;

-  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
+  public constructor(
+    private showService: ShowService,
+    showDataService: ShowDataService,
+    private router: Router
+  ) {
    this.shows$ = showDataService.list$;
  }

--- a/src/app/modules/shows/services/docx.service.ts
+++ b/src/app/modules/shows/services/docx.service.ts
@@ -4,7 +4,6 @@ import {ShowService} from './show.service';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {ShowSongService} from './show-song.service';
 import {Song} from '../../songs/services/song';
-import {SongService} from '../../songs/services/song.service';
 import {ShowSong} from './show-song';
 import {Show} from './show';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
@@ -30,7 +29,6 @@ export class DocxService {
  public constructor(
    private showService: ShowService,
    private showSongService: ShowSongService,
-    private songService: SongService,
    private textRenderingService: TextRenderingService,
    private userService: UserService,
    private configService: ConfigService
@@ -94,7 +92,14 @@ export class DocxService {
    });
  }

-  private renderSongs(songs: {showSong: ShowSong; sections: Section[]}[], options: DownloadOptions, config: Config): Paragraph[] {
+  private renderSongs(
+    songs: {
+      showSong: ShowSong;
+      sections: Section[];
+    }[],
+    options: DownloadOptions,
+    config: Config
+  ): Paragraph[] {
    return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.showSong, song.sections, options, config)], []);
  }

@@ -199,8 +204,16 @@ export class DocxService {
        sections,
      };
    });
-    const songsLoaded = (await Promise.all(songsAsync)).filter(_ => !!_).map(_ => _ as {showSong: ShowSong; sections: Section[]});
-    const songs = show.order.map(_ => songsLoaded.filter(f => f.showSong.id === _)[0]);
+    const songsLoaded = (await Promise.all(songsAsync))
+      .filter(_ => !!_)
+      .map(
+        _ =>
+          _ as {
+            showSong: ShowSong;
+            sections: Section[];
+          }
+      );
+    const songs = show.order.map(_ => songsLoaded.find(f => f.showSong.id === _)).filter(_ => !!_);
    return {songs, show, user, config};
  }

--- a/src/app/modules/shows/services/show-data.service.ts
+++ b/src/app/modules/shows/services/show-data.service.ts
@@ -1,26 +1,48 @@
 import {Injectable} from '@angular/core';
-import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
+import {Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
-import {map} from 'rxjs/operators';
+import {map, shareReplay} from 'rxjs/operators';
+import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
+import firebase from 'firebase/compat/app';

@Injectable({
  providedIn: 'root',
 })
 export class ShowDataService {
  private collection = 'shows';
+  public list$: Observable<Show[]> = this.dbService.col$<Show>(this.collection).pipe(
+    // server-side ordering cuts client work and keeps stable order across subscribers
+    map(shows => [...shows].sort((a, b) => a.date.toMillis() - b.date.toMillis())),
+    shareReplay({
+      bufferSize: 1,
+      refCount: true,
+    })
+  );

-  public constructor(private dbService: DbService) {
-    this.dbService.col$<Show>(this.collection).subscribe(_ => this.list$.next(_));
+  public constructor(private dbService: DbService) {}
+
+  public listRaw$ = () => this.dbService.col$<Show>(this.collection);
+
+  public listPublicSince$(lastMonths: number): Observable<Show[]> {
+    const startDate = new Date();
+    startDate.setHours(0, 0, 0, 0);
+    startDate.setDate(startDate.getDate() - lastMonths * 30);
+    const startTimestamp = firebase.firestore.Timestamp.fromDate(startDate);
+
+    const queryFn: QueryFn = ref => ref.where('published', '==', true).where('date', '>=', startTimestamp).orderBy('date', 'desc');
+
+    return this.dbService.col$<Show>(this.collection, queryFn).pipe(
+      map(shows => shows.filter(show => !show.archived)),
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      })
+    );
  }

-  public list$ = new BehaviorSubject<Show[]>([]);
-  public list = () => firstValueFrom(this.dbService.col$<Show>(this.collection));
+  public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);

-  public read$ = (showId: string): Observable<Show | null> => this.list$.pipe(map(_ => _.find(s => s.id === showId) || null));
-
-  // public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);
-  // public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
  public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
  public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
 }
--- a/src/app/modules/shows/services/show-song-data.service.ts
+++ b/src/app/modules/shows/services/show-song-data.service.ts
@@ -1,8 +1,9 @@
 import {Injectable} from '@angular/core';
 import {DbService} from '../../../services/db.service';
-import {firstValueFrom, Observable} from 'rxjs';
+import {Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
+import {shareReplay} from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
@@ -10,11 +11,30 @@ import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 export class ShowSongDataService {
  private collection = 'shows';
  private subCollection = 'songs';
+  private listCache = new Map<string, Observable<ShowSong[]>>();

  public constructor(private dbService: DbService) {}

-  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
-  public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));
+  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => {
+    if (queryFn) {
+      return this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
+    }
+
+    const cached = this.listCache.get(showId);
+    if (cached) {
+      return cached;
+    }
+
+    const stream$ = this.dbService.col$<ShowSong>(`${this.collection}/${showId}/${this.subCollection}`).pipe(
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      })
+    );
+
+    this.listCache.set(showId, stream$);
+    return stream$;
+  };

  public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
  public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
--- a/src/app/modules/shows/services/show-song.service.ts
+++ b/src/app/modules/shows/services/show-song.service.ts
@@ -1,12 +1,10 @@
 import {Injectable} from '@angular/core';
 import {ShowSongDataService} from './show-song-data.service';
-import {firstValueFrom, forkJoin, mergeMap, Observable} from 'rxjs';
+import {firstValueFrom, Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {UserService} from '../../../services/user/user.service';
 import {ShowService} from './show.service';
-import {map, switchMap} from 'rxjs/operators';
-import {ShowDataService} from './show-data.service';

@Injectable({
  providedIn: 'root',
@@ -16,8 +14,7 @@ export class ShowSongService {
    private showSongDataService: ShowSongDataService,
    private songDataService: SongDataService,
    private userService: UserService,
-    private showService: ShowService,
-    private showDataService: ShowDataService
+    private showService: ShowService
  ) {}

  public async new$(showId: string, songId: string, addedLive = false): Promise<string | null> {
@@ -32,6 +29,7 @@ export class ShowSongService {
      chordMode: user.chordMode,
      addedLive,
    };
+    await this.userService.incSongCount(songId);
    return await this.showSongDataService.add(showId, data);
  }

@@ -41,47 +39,15 @@ export class ShowSongService {
  public list$ = (showId: string): Observable<ShowSong[]> => this.showSongDataService.list$(showId);
  public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));

-  public async delete$(showId: string, songId: string, index: number): Promise<void> {
-    await this.showSongDataService.delete(showId, songId);
-    const show = await firstValueFrom(this.showService.read$(showId));
+  public async delete$(showId: string, showSongId: string, index: number): Promise<void> {
+    const [showSong, show] = await Promise.all([this.read(showId, showSongId), firstValueFrom(this.showService.read$(showId))]);
    if (!show) return;
-    const order = show.order;
+    if (!showSong) return;
+
+    const order = [...show.order];
    order.splice(index, 1);
-    await this.showService.update$(showId, {order});
-  }

-  public countSongUsage$(songId: string) {
-    return this.userService.user$.pipe(
-      switchMap(user =>
-        this.showService.list$().pipe(
-          map(shows => {
-            const myShows = shows.filter(_ => _.owner === user?.id);
-            return myShows.map(show => this.list$(show.id));
-          }),
-          mergeMap(songs => forkJoin(songs)),
-          map(songs => songs.reduce((pn, u) => [...pn, ...u], [])),
-          map(songs => songs.reduce((count, song) => (song.songId === songId ? 1 : 0), 0))
-        )
-      )
-    );
-  }
-
-  public async countSongUsage(songId: string) {
-    // return 0; // todo
-
-    const user = await this.userService.currentUser();
-    const userId = user?.id;
-    if (!userId) return null;
-    const shows = await this.showDataService.list();
-    let count = 0;
-    for (const show of shows.filter(_ => _.owner === userId)) {
-      const songs = await this.showSongDataService.list(show.id);
-      for (const song of songs) {
-        if (song.songId === songId) count++;
-      }
-    }
-
-    return count;
+    await Promise.all([this.showSongDataService.delete(showId, showSongId), this.showService.update$(showId, {order}), this.userService.decSongCount(showSong.songId)]);
  }

  public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);
--- a/src/app/modules/shows/services/show.service.ts
+++ b/src/app/modules/shows/services/show.service.ts
@@ -15,11 +15,15 @@ export class ShowService {
  public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private'];
  private user: User | null = null;

-  public constructor(private showDataService: ShowDataService, private userService: UserService) {
+  public constructor(
+    private showDataService: ShowDataService,
+    private userService: UserService
+  ) {
    userService.user$.subscribe(_ => (this.user = _));
  }

  public read$ = (showId: string): Observable<Show | null> => this.showDataService.read$(showId);
+  public listPublicSince$ = (lastMonths: number): Observable<Show[]> => this.showDataService.listPublicSince$(lastMonths);

  public list$(publishedOnly = false): Observable<Show[]> {
    return this.userService.user$.pipe(
@@ -27,12 +31,7 @@ export class ShowService {
        () => this.showDataService.list$,
        (user: User | null, shows: Show[]) => ({user, shows})
      ),
-      map(s =>
-        s.shows
-          .sort((a, b) => a.date.toMillis() - b.date.toMillis())
-          .filter(_ => !_.archived)
-          .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
-      )
+      map(s => s.shows.filter(show => !show.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
    );
  }

--- a/src/app/modules/shows/services/show.ts
+++ b/src/app/modules/shows/services/show.ts
@@ -13,6 +13,7 @@ export interface Show {
  published: boolean;
  archived: boolean;
  order: string[];
+  shareId: string;

  presentationSongId: string;
  presentationDynamicCaption: string;
--- a/src/app/modules/shows/show/show.component.html
+++ b/src/app/modules/shows/show/show.component.html
@@ -6,7 +6,7 @@
      show.date.toDate() | date: 'dd.MM.yyyy'
    }} - {{ getStatus(show) }}"
  >
-    <p *ngIf="!useSwiper">{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
+    <p *ngIf="!useSwiper">{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
      <app-user-name [userId]="show.owner"></app-user-name>
    </p>
    <div class="head">
@@ -14,34 +14,36 @@
        <mat-checkbox *ngIf="!useSwiper" [(ngModel)]="showText">Text anzeigen</mat-checkbox>
      </div>
      <div [class.floating]="useSwiper">
-        <app-menu-button @fade (click)="onZoomOut()" [icon]="faZoomOut" class="btn-delete btn-icon"
+        <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
                         matTooltip="Verkleinern"></app-menu-button>
-        <app-menu-button @fade (click)="onZoomIn()" [icon]="faZoomIn" class="btn-delete btn-icon"
+        <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
                         matTooltip="Vergrößern"></app-menu-button>
        <app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
-                         [icon]="useSwiper ? faFileLines : faFile" class="btn-delete btn-icon"
-                         matTooltip="Swiper umschalten"></app-menu-button>
+                         [icon]="useSwiper ? faRestore : faMaximize" class="btn-delete btn-icon"
+                         matTooltip="Vollbild"></app-menu-button>
      </div>
    </div>
-    <div *ngIf="showSongs && !useSwiper" [cdkDropListDisabled]="show.published || showText" cdkDropList
-         class="song-list"
+    <div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper"
+         [cdkDropListDisabled]="show.published || showText"
         [style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
         [style.font-size]="textSize + 'em'"
-         (cdkDropListDropped)="drop($event, show)">
-      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" class="song-row" cdkDrag>
+         cdkDropList
+         class="song-list">
+      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" cdkDrag class="song-row">
        <app-song
-          [showSong]="song"
-          [showId]="showId"
-          [showText]="showText"
-          [show]="show"
          [fullscreen]="useSwiper"
          [index]="i"
+          [showId]="showId"
+          [showSong]="song"
+          [showText]="showText"
+          [show]="show"
        ></app-song>
      </div>
    </div>

    <swiper-container *ngIf="useSwiper" scrollbar="true">
-      <swiper-slide *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" [style.font-size]="textSize + 'em'"
+      <swiper-slide *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy"
+                    [style.font-size]="textSize + 'em'"
                    class="song-swipe">
        <app-song
          [fullscreen]="true"
@@ -51,13 +53,17 @@
          [showText]="true"
          [show]="show"
        ></app-song>
+        <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
+        <div *ngIf="getNextSong(orderedShowSongs(show), i) as next" class="next-song">{{ next }}
+          <fa-icon [icon]="faNextSong"></fa-icon>
+        </div>
      </swiper-slide>
    </swiper-container>

    <app-add-song
      *ngIf="songs && !show.published && !useSwiper"
-      [show]="show"
      [showSongs]="showSongs"
+      [show]="show"
      [songs]="songs"
    ></app-add-song>

@@ -76,7 +82,10 @@
          <app-button (click)="onPublish(false)" *ngIf="show.published" [icon]="faUnpublish">
            Veröffentlichung zurückziehen
          </app-button>
-          <app-button (click)="onChange(show.id)" [icon]="faSliders" *ngIf="!show.published">
+          <app-button (click)="onShare(show)" *ngIf="show.published" [icon]="faShare">
+            Teilen
+          </app-button>
+          <app-button (click)="onChange(show.id)" *ngIf="!show.published" [icon]="faSliders">
            Ändern
          </app-button>
        </ng-container>
--- a/src/app/modules/shows/show/show.component.less
+++ b/src/app/modules/shows/show/show.component.less
@@ -5,7 +5,7 @@

 .song-row:not(:last-child) {
  display: block;
-  border-bottom: 1px solid #0002;
+  border-bottom: 1px solid var(--divider);
 }

 .song-swipe {
@@ -21,9 +21,10 @@
 }

 .cdk-drag-preview {
-  background-color: white;
+  background-color: var(--surface-strong);
  box-sizing: border-box;
  border-radius: 4px;
+  border: 1px solid var(--surface-border);
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }

@@ -49,3 +50,21 @@
  top: 12px;
  z-index: 5;
 }
+
+.next-song {
+  color: var(--text-muted);
+  position: fixed;
+  bottom: 0;
+  right: 10px;
+
+  fa-icon {
+    padding: 6px;
+  }
+}
+
+.time {
+  color: var(--text-muted);
+  position: fixed;
+  bottom: 0;
+  left: 10px;
+}
--- a/src/app/modules/shows/show/show.component.spec.ts
+++ b/src/app/modules/shows/show/show.component.spec.ts
@@ -6,13 +6,11 @@ describe('ShowComponent', () => {
  let component: ShowComponent;
  let fixture: ComponentFixture<ShowComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [ShowComponent],
+      imports: [ShowComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ShowComponent);
--- a/src/app/modules/shows/show/show.component.ts
+++ b/src/app/modules/shows/show/show.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {filter, map, switchMap, tap} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ShowService} from '../services/show.service';
@@ -10,30 +10,76 @@ import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
 import {
+  faArrowUpRightFromSquare,
  faBox,
  faBoxOpen,
-  faExternalLinkAlt,
-  faFile,
+  faChevronRight,
  faFileDownload,
-  faFileLines,
  faLock,
  faMagnifyingGlassMinus,
  faMagnifyingGlassPlus,
+  faMaximize,
+  faMinimize,
  faSliders,
+  faUnlock,
  faUser,
  faUsers,
 } from '@fortawesome/free-solid-svg-icons';
-import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 import {fade} from '../../../animations';
 import {MatDialog} from '@angular/material/dialog';
 import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component';
 import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
+import {GuestShowService} from '../../guest/guest-show.service';
+import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.component';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
+import {MatCheckbox} from '@angular/material/checkbox';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MenuButtonComponent} from '../../../widget-modules/components/menu-button/menu-button.component';
+import {MatTooltip} from '@angular/material/tooltip';
+import {SongComponent} from './song/song.component';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {OwnerDirective} from '../../../services/user/owner.directive';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {MatMenu, MatMenuTrigger} from '@angular/material/menu';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.less'],
  animations: [fade],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    NgIf,
+    CardComponent,
+    UserNameComponent,
+    MatCheckbox,
+    ReactiveFormsModule,
+    FormsModule,
+    MenuButtonComponent,
+    MatTooltip,
+    CdkDropList,
+    NgFor,
+    CdkDrag,
+    SongComponent,
+    FaIconComponent,
+    AddSongComponent,
+    ButtonRowComponent,
+    RoleDirective,
+    OwnerDirective,
+    ButtonComponent,
+    MatMenuTrigger,
+    MatMenu,
+    AsyncPipe,
+    DatePipe,
+    ShowTypePipe,
+  ],
 })
 export class ShowComponent implements OnInit, OnDestroy {
  public show$: Observable<Show | null> | null = null;
@@ -44,18 +90,22 @@ export class ShowComponent implements OnInit, OnDestroy {

  public faBox = faBox;
  public faBoxOpen = faBoxOpen;
-  public faPublish = faExternalLinkAlt;
+  public faPublish = faUnlock;
  public faUnpublish = faLock;
+  public faShare = faArrowUpRightFromSquare;
  public faDownload = faFileDownload;
  public faSliders = faSliders;
  public faUser = faUser;
  public faUsers = faUsers;
  public faZoomIn = faMagnifyingGlassPlus;
  public faZoomOut = faMagnifyingGlassMinus;
-  public faPage = faFile;
-  public faLines = faFileLines;
-  private subs: Subscription[] = [];
  public useSwiper = false;
+  public textSize = 1;
+  public faRestore = faMinimize;
+  public faMaximize = faMaximize;
+  public faNextSong = faChevronRight;
+  public currentTime: Date;
+  private subs: Subscription[] = [];

  public constructor(
    private activatedRoute: ActivatedRoute,
@@ -65,10 +115,15 @@ export class ShowComponent implements OnInit, OnDestroy {
    private docxService: DocxService,
    private router: Router,
    private cRef: ChangeDetectorRef,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private guestShowService: GuestShowService
  ) {}

  public ngOnInit(): void {
+    this.currentTime = new Date();
+    setInterval(() => {
+      this.currentTime = new Date();
+    }, 10000);
    this.show$ = this.activatedRoute.params.pipe(
      map(param => param as {showId: string}),
      map(param => param.showId),
@@ -101,8 +156,6 @@ export class ShowComponent implements OnInit, OnDestroy {
    this.subs.forEach(_ => _.unsubscribe());
  }

-  public textSize = 1;
-
  public onZoomIn() {
    this.textSize += 0.1;
  }
@@ -128,6 +181,11 @@ export class ShowComponent implements OnInit, OnDestroy {
    if (this.showId != null) await this.showService.update$(this.showId, {published});
  }

+  public onShare = async (show: Show): Promise<void> => {
+    const url = await this.guestShowService.share(show, this.orderedShowSongs(show));
+    this.dialog.open(ShareDialogComponent, {data: {url, show}});
+  };
+
  public getStatus(show: Show): string {
    if (show.published) {
      return 'veröffentlicht';
@@ -162,17 +220,15 @@ export class ShowComponent implements OnInit, OnDestroy {
    return show.order.map(_ => list.filter(f => f.id === _)[0]);
  }

-  public trackBy = (index: number, show: ShowSong) => show.id;
+  public trackBy = (_: number, show: ShowSong) => show?.id;

  public async onChange(showId: string) {
    await this.router.navigateByUrl('/shows/' + showId + '/edit');
  }

-  public faFileLines = faFileLines;
-  public faFile = faFile;
-
  @HostListener('document:keydown', ['$event'])
  public handleKeyboardEvent(event: KeyboardEvent) {
+    if (!this.useSwiper) return;
    const swiperEl = document.querySelector('swiper-container') as unknown as Swiper;
    switch (event.code) {
      case 'ArrowRight':
@@ -187,9 +243,16 @@ export class ShowComponent implements OnInit, OnDestroy {
  }

  public fullscreen(useSwiper: boolean) {
+    this.textSize = useSwiper ? 2 : 1;
    if (useSwiper) openFullscreen();
    else closeFullscreen();
  }
+
+  public getNextSong(showSongs: ShowSong[], i: number): string {
+    if (!showSongs || showSongs.length === 0) return '';
+    const song = showSongs[i + 1];
+    return song?.title ?? '';
+  }
 }

 export interface Swiper {
--- a/src/app/modules/shows/show/song/song.component.html
+++ b/src/app/modules/shows/show/song/song.component.html
@@ -7,9 +7,10 @@
  <div *ngIf="!show.published && !fullscreen" class="song">
    <span class="title">{{ iSong.title }}</span>
    <span *ngIf="!edit" class="keys">
-      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
-      <mat-form-field *ngIf="keys" appearance="standard" class="keys">
-        <mat-select [formControl]="keyFormControl">
+      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span><span
+      (click)="openKeySelect()">{{ iSong.key }}</span>
+      <mat-form-field (click)="option.open()" *ngIf="keys" class="transpose">
+        <mat-select #option [formControl]="keyFormControl">
          <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
        </mat-select>
      </mat-form-field>
@@ -22,10 +23,11 @@

  <mat-form-field *ngIf="edit" appearance="outline">
    <mat-label>Songtext</mat-label>
-    <textarea matTooltip="Tonart ändern"
-              [cdkTextareaAutosize]="true"
+    <textarea [cdkTextareaAutosize]="true"
              [formControl]="editSongControl"
+              class="edit"
              matInput
+              matTooltip="Tonart ändern"
    ></textarea>
  </mat-form-field>
  <div *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
--- a/src/app/modules/shows/show/song/song.component.less
+++ b/src/app/modules/shows/show/song/song.component.less
@@ -17,8 +17,18 @@
 }

 .keys {
-  width: 40px;
-  margin: -24px 0 -20px 0;
+  position: relative;
+  margin-right: 10px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+.transpose {
+  height: 0;
+  position: absolute;
 }

 .btn-up {
@@ -39,8 +49,8 @@
    grid-template-columns: 1em auto;

    .key {
-      color: #00b;
-      text-shadow: 0 0 1px #00b;
+      color: var(--primary-active);
+      text-shadow: 0 0 1px var(--primary-hover);
    }
  }
 }
@@ -54,6 +64,7 @@
  grid-area: delete;
  justify-content: flex-end;
 }
+
 .btn-edit {
  grid-area: edit;
  justify-content: flex-end;
@@ -67,6 +78,6 @@ button {

 }

-textarea {
+textarea.edit {
  font-family: 'Ubuntu Mono', monospace;
 }
--- a/src/app/modules/shows/show/song/song.component.spec.ts
+++ b/src/app/modules/shows/show/song/song.component.spec.ts
@@ -6,13 +6,11 @@ describe('SongComponent', () => {
  let component: SongComponent;
  let fixture: ComponentFixture<SongComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [SongComponent],
+      imports: [SongComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SongComponent);
--- a/src/app/modules/shows/show/song/song.component.ts
+++ b/src/app/modules/shows/show/song/song.component.ts
@@ -1,18 +1,44 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
-import {UntypedFormControl} from '@angular/forms';
-import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
+import {ReactiveFormsModule, UntypedFormControl} from '@angular/forms';
+import {ChordMode, SongTextComponent} from '../../../../widget-modules/components/song-text/song-text.component';
 import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';
+import {MatSelect} from '@angular/material/select';
+import {NgFor, NgIf} from '@angular/common';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatOption} from '@angular/material/core';
+import {MenuButtonComponent} from '../../../../widget-modules/components/menu-button/menu-button.component';
+import {MatTooltip} from '@angular/material/tooltip';
+import {MatInput} from '@angular/material/input';
+import {CdkTextareaAutosize} from '@angular/cdk/text-field';
+import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';

@Component({
  selector: 'app-song',
  templateUrl: './song.component.html',
  styleUrls: ['./song.component.less'],
  animations: [fade],
+  imports: [
+    NgIf,
+    MatFormField,
+    MatSelect,
+    ReactiveFormsModule,
+    NgFor,
+    MatOption,
+    MenuButtonComponent,
+    MatTooltip,
+    MatLabel,
+    MatInput,
+    CdkTextareaAutosize,
+    ButtonRowComponent,
+    ButtonComponent,
+    SongTextComponent,
+  ],
 })
 export class SongComponent implements OnInit {
  @Input() public show: Show | null = null;
@@ -20,7 +46,6 @@ export class SongComponent implements OnInit {
  @Input() public showText: boolean | null = null;
  @Input() public index = -1;
  @Input() public fullscreen = false;
-
  public keys: string[] = [];
  public faDelete = faTrash;
  public faEdit = faPenToSquare;
@@ -30,6 +55,7 @@ export class SongComponent implements OnInit {
  public iSong: ShowSong | null = null;
  public edit = false;
  public editSongControl = new UntypedFormControl();
+  @ViewChild('option') private keyOptions: MatSelect;

  public constructor(private showSongService: ShowSongService) {}

@@ -75,4 +101,8 @@ export class SongComponent implements OnInit {
      chordMode: value,
    });
  }
+
+  public openKeySelect(): void {
+    this.keyOptions.open();
+  }
 }
--- a/src/app/modules/shows/shows.module.ts
+++ b/src/app/modules/shows/shows.module.ts
@@ -3,72 +3,69 @@ import {CommonModule} from '@angular/common';

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

@NgModule({
-  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent],
  imports: [
    CommonModule,
    ShowsRoutingModule,
-    CardModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatInputModule,
-    ListHeaderModule,
    MatCheckboxModule,
-    ButtonRowModule,
    MatButtonModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSelectModule,
-    ShowTypeTranslaterModule,
+    ShowTypePipe,
    FontAwesomeModule,
-    MenuButtonModule,
    FormsModule,
-    SongTextModule,
+    SongTextComponent,
    NgxMatSelectSearchModule,
-    AddSongModule,
-    ButtonModule,
-    OwnerModule,
-    UserNameModule,
+    AddSongComponent,
    MatMenuModule,
    DragDropModule,
-    RoleModule,
-    SortByModule,
+    SortByPipe,
    MatTooltipModule,
    MatDialogModule,
+    NewComponent,
+    ListComponent,
+    ListItemComponent,
+    ShowComponent,
+    SongComponent,
+    FilterComponent,
+    EditComponent,
+    ArchiveDialogComponent,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
--- a/src/app/modules/songs/services/file.service.ts
+++ b/src/app/modules/songs/services/file.service.ts
@@ -7,7 +7,10 @@ import {FileDataService} from './file-data.service';
  providedIn: 'root',
 })
 export class FileService {
-  public constructor(private storage: AngularFireStorage, private fileDataService: FileDataService) {}
+  public constructor(
+    private storage: AngularFireStorage,
+    private fileDataService: FileDataService
+  ) {}

  public getDownloadUrl(path: string): Observable<string> {
    const ref = this.storage.ref(path);
--- a/src/app/modules/songs/services/key.helper.spec.ts
+++ b/src/app/modules/songs/services/key.helper.spec.ts
@@ -0,0 +1,15 @@
+import {getScale, scaleMapping} from './key.helper';
+
+describe('key.helper', () => {
+  it('should render Gb correctly', () => {
+    expect(scaleMapping['Gb']).toBe('G♭');
+  });
+
+  it('should expose a sharp-based scale for D', () => {
+    expect(getScale('D')).toEqual(['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'H']);
+  });
+
+  it('should keep flat-based spelling for Db', () => {
+    expect(getScale('Db')).toEqual(['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'B', 'H']);
+  });
+});
--- a/src/app/modules/songs/services/key.helper.ts
+++ b/src/app/modules/songs/services/key.helper.ts
@@ -82,7 +82,7 @@ const scaleAssignment: {[key: string]: string[]} = {
  C: KEYS_MAJOR_FLAT,
  'C#': KEYS_MAJOR_FLAT,
  Db: KEYS_MAJOR_B,
-  D: KEYS_MAJOR_B,
+  D: KEYS_MAJOR_FLAT,
  'D#': KEYS_MAJOR_FLAT,
  Eb: KEYS_MAJOR_B,
  E: KEYS_MAJOR_FLAT,
@@ -125,7 +125,7 @@ export const scaleMapping: {[key: string]: string} = {
  E: 'E',
  F: 'F',
  'F#': 'F♯',
-  Gb: 'D♭',
+  Gb: 'G♭',
  G: 'G',
  'G#': 'G♯',
  Ab: 'A♭',
--- a/src/app/modules/songs/services/section-type.ts
+++ b/src/app/modules/songs/services/section-type.ts
@@ -2,4 +2,5 @@ export enum SectionType {
  Verse,
  Chorus,
  Bridge,
+  Comment,
 }
--- a/src/app/modules/songs/services/song-data.service.spec.ts
+++ b/src/app/modules/songs/services/song-data.service.spec.ts
@@ -1,8 +1,8 @@
-import {TestBed, waitForAsync} from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';

 import {SongDataService} from './song-data.service';
 import {AngularFirestore} from '@angular/fire/compat/firestore';
-import {of} from 'rxjs';
+import {firstValueFrom, of} from 'rxjs';

 describe('SongDataService', () => {
  const songs = [{title: 'title1'}];
@@ -27,13 +27,9 @@ describe('SongDataService', () => {
    void expect(service).toBeTruthy();
  });

-  it(
-    'should list songs',
-    waitForAsync(() => {
+  it('should list songs', async () => {
    const service: SongDataService = TestBed.inject(SongDataService);
-      service.list$().subscribe(s => {
-        void expect(s[0].title).toEqual('title1');
+    const list = await firstValueFrom(service.list$);
+    void expect(list[0].title).toEqual('title1');
  });
-    })
-  );
 });
--- a/src/app/modules/songs/services/song-data.service.ts
+++ b/src/app/modules/songs/services/song-data.service.ts
@@ -1,23 +1,28 @@
 import {Injectable} from '@angular/core';
 import {Song} from './song';
-import {BehaviorSubject, Observable} from 'rxjs';
+import {Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
-import {map} from 'rxjs/operators';
+import {shareReplay, startWith} from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
 })
 export class SongDataService {
  private collection = 'songs';
+  public list$: Observable<Song[]> = this.dbService.col$<Song>(this.collection).pipe(
+    startWith([] as Song[]), // immediate empty emit keeps UI responsive while first snapshot arrives
+    shareReplay({
+      bufferSize: 1,
+      refCount: false, // keep the listener alive after first subscription to avoid reloading on navigation
+    })
+  );

  public constructor(private dbService: DbService) {
-    this.dbService.col$<Song>(this.collection).subscribe(_ => this.list$.next(_));
+    // Warm the shared stream once at startup to avoid first-navigation delay.
+    // this.list$.subscribe();
  }

-  public list$ = new BehaviorSubject<Song[]>([]);
-  // public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
-  //public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
-  public read$ = (songId: string): Observable<Song | null> => this.list$.pipe(map(_ => _.find(s => s.id === songId) || null));
+  public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
  public update$ = async (songId: string, data: Partial<Song>): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).update(data);
  public add = async (data: Partial<Song>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
  public delete = async (songId: string): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).delete();
--- a/src/app/modules/songs/services/song-list.resolver.ts
+++ b/src/app/modules/songs/services/song-list.resolver.ts
@@ -1,17 +1,17 @@
 import {Injectable} from '@angular/core';
-import {Resolve} from '@angular/router';
+
 import {Observable} from 'rxjs';
 import {SongService} from './song.service';
 import {Song} from './song';
-import {filter} from 'rxjs/operators';
+import {take} from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
 })
-export class SongListResolver implements Resolve<Song[]> {
+export class SongListResolver {
  public constructor(private songService: SongService) {}

  public resolve(): Observable<Song[]> {
-    return this.songService.list$().pipe(filter(_ => _.length > 0));
+    return this.songService.list$().pipe(take(1));
  }
 }
--- a/src/app/modules/songs/services/song.service.spec.ts
+++ b/src/app/modules/songs/services/song.service.spec.ts
@@ -23,13 +23,10 @@ describe('SongService', () => {
    void expect(service).toBeTruthy();
  });

-  it(
-    'should list songs',
-    waitForAsync(() => {
+  it('should list songs', waitForAsync(() => {
    const service: SongService = TestBed.inject(SongService);
    service.list$().subscribe(s => {
      void expect(s[0].title).toEqual('title1');
    });
-    })
-  );
+  }));
 });
--- a/src/app/modules/songs/services/song.service.ts
+++ b/src/app/modules/songs/services/song.service.ts
@@ -25,7 +25,10 @@ export class SongService {

  // private list: Song[];

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

--- a/src/app/modules/songs/services/text-rendering.service.ts
+++ b/src/app/modules/songs/services/text-rendering.service.ts
@@ -15,11 +15,11 @@ export class TextRenderingService {

  public constructor(private transposeService: TransposeService) {}

-  public parse(text: string, transpose: TransposeMode | null): Section[] {
+  public parse(text: string, transpose: TransposeMode | null, withComments = true): Section[] {
    if (!text) {
      return [];
    }
-    const arrayOfLines = text.split(/\r?\n/).filter(_ => _);
+    const arrayOfLines = text.split(/\r?\n/).filter(_ => _ && (!_.startsWith('#') || withComments));
    const indices = {
      [SectionType.Bridge]: 0,
      [SectionType.Chorus]: 0,
--- a/src/app/modules/songs/services/transpose.service.spec.ts
+++ b/src/app/modules/songs/services/transpose.service.spec.ts
@@ -1,6 +1,8 @@
 import {TestBed} from '@angular/core/testing';

 import {TransposeService} from './transpose.service';
+import {LineType} from './line-type';
+import {Line} from './line';

 describe('TransposeService', () => {
  let service: TransposeService;
@@ -12,7 +14,7 @@ describe('TransposeService', () => {

  it('should create map upwards', () => {
    const distance = service.getDistance('D', 'G');
-    const map = service.getMap('D', distance);
+    const map = service.getMap('D', 'G', distance);

    if (map) {
      void expect(map['D']).toBe('G');
@@ -21,10 +23,71 @@ describe('TransposeService', () => {

  it('should create map downwards', () => {
    const distance = service.getDistance('G', 'D');
-    const map = service.getMap('G', distance);
+    const map = service.getMap('G', 'D', distance);

    if (map) {
      void expect(map['G']).toBe('D');
    }
  });
+
+  it('should transpose enharmonic targets by semitone distance', () => {
+    const distance = service.getDistance('C', 'Db');
+    const map = service.getMap('C', 'Db', distance);
+
+    expect(distance).toBe(1);
+    expect(map?.['C']).toBe('Db');
+    expect(map?.['G']).toBe('Ab');
+  });
+
+  it('should keep german B/H notation consistent', () => {
+    const distance = service.getDistance('H', 'C');
+    const map = service.getMap('H', 'C', distance);
+
+    expect(distance).toBe(1);
+    expect(map?.['H']).toBe('C');
+    expect(map?.['B']).toBe('C#');
+  });
+
+  it('should render unknown chords as X', () => {
+    const line: Line = {
+      type: LineType.chord,
+      text: '',
+      chords: [
+        {chord: 'Q', add: 'sus4', slashChord: null, position: 0, length: 1},
+      ],
+    };
+
+    const rendered = service.renderChords(line);
+
+    expect(rendered.text).toBe('Xsus4');
+  });
+
+  it('should render unknown slash chords as X', () => {
+    const line: Line = {
+      type: LineType.chord,
+      text: '',
+      chords: [
+        {chord: 'C', add: null, slashChord: 'Q', position: 0, length: 1},
+      ],
+    };
+
+    const rendered = service.renderChords(line);
+
+    expect(rendered.text).toBe('C/X');
+  });
+
+  it('should transpose lines with long chord positions without truncating', () => {
+    const line: Line = {
+      type: LineType.chord,
+      text: '',
+      chords: [
+        {chord: 'C', add: null, slashChord: null, position: 120, length: 1},
+      ],
+    };
+
+    const rendered = service.renderChords(line);
+
+    expect(rendered.text.length).toBe(121);
+    expect(rendered.text.endsWith('C')).toBeTrue();
+  });
 });
--- a/src/app/modules/songs/services/transpose.service.ts
+++ b/src/app/modules/songs/services/transpose.service.ts
@@ -5,16 +5,56 @@ import {Chord} from './chord';
 import {Line} from './line';

 type TransposeMap = {[key: string]: string};
+type ScaleVariants = [string[], string[]];

@Injectable({
  providedIn: 'root',
 })
 export class TransposeService {
+  private readonly keyToSemitone: Record<string, number> = {
+    C: 0,
+    'C#': 1,
+    Db: 1,
+    D: 2,
+    'D#': 3,
+    Eb: 3,
+    E: 4,
+    F: 5,
+    'F#': 6,
+    Gb: 6,
+    G: 7,
+    'G#': 8,
+    Ab: 8,
+    A: 9,
+    'A#': 10,
+    B: 10,
+    H: 11,
+    c: 0,
+    'c#': 1,
+    db: 1,
+    d: 2,
+    'd#': 3,
+    eb: 3,
+    e: 4,
+    f: 5,
+    'f#': 6,
+    gb: 6,
+    g: 7,
+    'g#': 8,
+    ab: 8,
+    a: 9,
+    'a#': 10,
+    b: 10,
+    h: 11,
+  };
+
+  private readonly mapCache = new Map<string, TransposeMap>();
+
  public transpose(line: Line, baseKey: string, targetKey: string): Line {
    if (line.type !== LineType.chord || !line.chords) return line;

    const difference = this.getDistance(baseKey, targetKey);
-    const map = this.getMap(baseKey, difference);
+    const map = this.getMap(baseKey, targetKey, difference);

    const chords = difference !== 0 && map ? line.chords.map(chord => this.transposeChord(chord, map)) : line.chords;
    const renderedLine = this.renderLine(chords);
@@ -32,32 +72,47 @@ export class TransposeService {
  }

  public getDistance(baseKey: string, targetKey: string): number {
-    const scale = getScaleType(baseKey);
-    return scale ? (scale[0].indexOf(targetKey) - scale[0].indexOf(baseKey) ?? scale[1].indexOf(targetKey) - scale[1].indexOf(baseKey)) % 12 : 0;
+    const baseSemitone = this.keyToSemitone[baseKey];
+    const targetSemitone = this.keyToSemitone[targetKey];
+
+    if (baseSemitone === undefined || targetSemitone === undefined) {
+      return 0;
    }

-  public getMap(baseKey: string, difference: number): TransposeMap | null {
-    const scale = getScaleType(baseKey);
-    if (!scale) {
+    return (targetSemitone - baseSemitone + 12) % 12;
+  }
+
+  public getMap(baseKey: string, targetKey: string, difference: number): TransposeMap | null {
+    const cacheKey = `${baseKey}:${targetKey}:${difference}`;
+    const cachedMap = this.mapCache.get(cacheKey);
+    if (cachedMap) {
+      return cachedMap;
+    }
+
+    const sourceScales = this.getScaleVariants(baseKey);
+    const targetScales = this.getScaleVariants(targetKey);
+    if (!sourceScales || !targetScales) {
      return null;
    }
-    const map: {[key: string]: string} = {};
+
+    const map: TransposeMap = {};
+    sourceScales.forEach((sourceScale, scaleIndex) => {
+      const targetScale = targetScales[scaleIndex];
      for (let i = 0; i < 12; i++) {
-      const source = scale[0][i];
+        const source = sourceScale[i];
        const mappedIndex = (i + difference + 12) % 12;
-      map[source] = scale[0][mappedIndex];
-    }
-    for (let i = 0; i < 12; i++) {
-      const source = scale[1][i];
-      const mappedIndex = (i + difference + 12) % 12;
-      map[source] = scale[1][mappedIndex];
+        map[source] = targetScale[mappedIndex];
      }
+    });
+
+    this.mapCache.set(cacheKey, map);
    return map;
  }

  private transposeChord(chord: Chord, map: TransposeMap): Chord {
-    const translatedChord = map[chord.chord];
-    const translatedSlashChord = chord.slashChord ? map[chord.slashChord] : null;
+    const translatedChord = map[chord.chord] ?? 'X';
+    const translatedSlashChord = chord.slashChord ? map[chord.slashChord] ?? 'X' : null;
+
    return {
      ...chord,
      chord: translatedChord,
@@ -66,23 +121,39 @@ export class TransposeService {
  }

  private renderLine(chords: Chord[]): string {
-    let template = '                                                                                                    ';
+    const width = chords.reduce((max, chord) => {
+      return Math.max(max, chord.position + this.renderChord(chord).length);
+    }, 0);
+
+    let template = ''.padEnd(width, ' ');

    chords.forEach(chord => {
      const pos = chord.position;
      const renderedChord = this.renderChord(chord);
      const newLength = renderedChord.length;

-      const pre = template.substr(0, pos);
-      const post = template.substr(pos + newLength);
+      if (template.length < pos + newLength) {
+        template = template.padEnd(pos + newLength, ' ');
+      }
+
+      const pre = template.slice(0, pos);
+      const post = template.slice(pos + newLength);

      template = pre + renderedChord + post;
    });

-    return template.trimRight();
+    return template.trimEnd();
  }

-  private renderChord(chord: Chord) {
-    return scaleMapping[chord.chord] + (chord.add ? chord.add : '') + (chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '');
+  private renderChord(chord: Chord): string {
+    const renderedChord = scaleMapping[chord.chord] ?? 'X';
+    const renderedSlashChord = chord.slashChord ? scaleMapping[chord.slashChord] ?? 'X' : '';
+
+    return renderedChord + (chord.add ?? '') + (renderedSlashChord ? '/' + renderedSlashChord : '');
+  }
+
+  private getScaleVariants(key: string): ScaleVariants | null {
+    const scales = getScaleType(key);
+    return scales ? [scales[0], scales[1]] : null;
  }
 }
--- a/src/app/modules/songs/services/upload.service.ts
+++ b/src/app/modules/songs/services/upload.service.ts
@@ -10,7 +10,10 @@ import {FileServer} from './fileServer';
  providedIn: 'root',
 })
 export class UploadService extends FileBase {
-  public constructor(private fileDataService: FileDataService, private angularFireStorage: AngularFireStorage) {
+  public constructor(
+    private fileDataService: FileDataService,
+    private angularFireStorage: AngularFireStorage
+  ) {
    super();
  }

--- a/src/app/modules/songs/song-list/filter/filter.component.html
+++ b/src/app/modules/songs/song-list/filter/filter.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="filterFormGroup">
  <mat-form-field appearance="outline">
    <mat-label>Titel oder Text</mat-label>
-    <input formControlName="q" matInput/>
+    <input formControlName="q" matInput />
  </mat-form-field>

  <div class="third">
@@ -11,7 +11,8 @@
        <mat-option [value]="null">- kein Filter -</mat-option>
        <mat-option *ngFor="let type of types" [value]="type">{{
            type | songType
-          }}</mat-option>
+          }}
+        </mat-option>
      </mat-select>
    </mat-form-field>

@@ -21,7 +22,8 @@
        <mat-option [value]="null">- kein Filter -</mat-option>
        <mat-option *ngFor="let key of keys" [value]="key">{{
            key | key
-          }}</mat-option>
+          }}
+        </mat-option>
      </mat-select>
    </mat-form-field>

@@ -31,7 +33,8 @@
        <mat-option [value]="null">- kein Filter -</mat-option>
        <mat-option *ngFor="let key of legalType" [value]="key">{{
            key | legalType
-          }}</mat-option>
+          }}
+        </mat-option>
      </mat-select>
    </mat-form-field>

@@ -41,7 +44,8 @@
        <mat-option [value]="null">- kein Filter -</mat-option>
        <mat-option *ngFor="let flag of getFlags()" [value]="flag">{{
            flag
-          }}</mat-option>
+          }}
+        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
--- a/src/app/modules/songs/song-list/filter/filter.component.spec.ts
+++ b/src/app/modules/songs/song-list/filter/filter.component.spec.ts
@@ -6,13 +6,11 @@ describe('FilterComponent', () => {
  let component: FilterComponent;
  let fixture: ComponentFixture<FilterComponent>;

-  beforeEach(
-    waitForAsync(() => {
+  beforeEach(waitForAsync(() => {
    void TestBed.configureTestingModule({
-        declarations: [FilterComponent],
+      imports: [FilterComponent],
    }).compileComponents();
-    })
-  );
+  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FilterComponent);
--- a/src/app/modules/songs/song-list/filter/filter.component.ts
+++ b/src/app/modules/songs/song-list/filter/filter.component.ts
@@ -1,15 +1,24 @@
 import {Component, Input} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {FilterValues} from './filter-values';
 import {Song} from '../../services/song';
 import {KEYS} from '../../services/key.helper';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {NgFor} from '@angular/common';
+import {LegalTypePipe} from '../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
+import {KeyPipe} from '../../../../widget-modules/pipes/key-translator/key.pipe';
+import {SongTypePipe} from '../../../../widget-modules/pipes/song-type-translater/song-type.pipe';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.less'],
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatSelect, MatOption, NgFor, LegalTypePipe, KeyPipe, SongTypePipe],
 })
 export class FilterComponent {
  public filterFormGroup: UntypedFormGroup;
@@ -19,7 +28,11 @@ export class FilterComponent {
  public legalType = SongService.LEGAL_TYPE;
  public keys = KEYS;

-  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
+  public constructor(
+    private router: Router,
+    activatedRoute: ActivatedRoute,
+    fb: UntypedFormBuilder
+  ) {
    this.filterFormGroup = fb.group({
      q: '',
      type: '',
--- a/src/app/modules/songs/song-list/song-list.component.html
+++ b/src/app/modules/songs/song-list/song-list.component.html
@@ -9,11 +9,19 @@
      <div>{{ song.title }}</div>
      <div>
        <ng-container *appRole="['contributor']">
-          <div *ngIf="song.status === 'draft'" class="warning"><fa-icon [icon]="faDraft"></fa-icon></div>
-          <div *ngIf="song.status === 'set'" class="neutral"><fa-icon [icon]="faDraft"></fa-icon></div>
-          <div *ngIf="song.status === 'final'" class="success"><fa-icon [icon]="faFinal"></fa-icon></div>
+          <div *ngIf="song.status === 'draft'" class="warning">
+            <fa-icon [icon]="faDraft"></fa-icon>
+          </div>
+          <div *ngIf="song.status === 'set'" class="neutral">
+            <fa-icon [icon]="faDraft"></fa-icon>
+          </div>
+          <div *ngIf="song.status === 'final'" class="success">
+            <fa-icon [icon]="faFinal"></fa-icon>
+          </div>
        </ng-container>
-        <div *ngIf="song.legalType === 'open'" class="warning" ><fa-icon [icon]="faLegal"></fa-icon></div>
+        <div *ngIf="song.legalType === 'open'" class="warning">
+          <fa-icon [icon]="faLegal"></fa-icon>
+        </div>
      </div>
      <div>{{ song.key }}</div>
    </div>
--- a/src/app/modules/songs/song-list/song-list.component.less
+++ b/src/app/modules/songs/song-list/song-list.component.less
@@ -1,5 +1,3 @@
-@import "../../../../styles/styles";
-
 .list-item {
  padding: 5px 20px;
  display: grid;
@@ -11,13 +9,14 @@
  }

  cursor: pointer;
+  transition: var(--transition);

  &:hover {
-    background: @primary-color;
-    color: #fff;
+    background: var(--hover-background);
+    color: var(--text);

    .warning {
-      color: #fff;
+      color: var(--danger);
    }
  }
 }
@@ -33,13 +32,13 @@
 }

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

 .warning {
-  color: #ba3500;
+  color: var(--danger);
 }

 .success {
-  color: #307501;
+  color: var(--success);
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
benjamin	36e1241539	optimize show filter	2026-03-09 18:29:56 +01:00
benjamin	194f9ac556	fix show filter	2026-03-09 17:51:35 +01:00
benjamin	ce9e5b5585	optimize firebase monitor reads	2026-03-09 17:48:59 +01:00
benjamin	3e10762eaf	optimize firebase remote reads	2026-03-09 17:44:45 +01:00
benjamin	d81fb3743b	optimize firebase reads	2026-03-09 17:41:24 +01:00
benjamin	4141824b00	optimize transpose service	2026-03-09 17:18:49 +01:00
benjamin	f7e11b792c	fix transpose warning	2026-03-09 17:04:00 +01:00
benjamin	a12e1ccb2f	fix material palette warning	2026-03-09 17:02:18 +01:00
benjamin	4e8a50374e	color palette rework #2	2026-03-09 16:53:55 +01:00
benjamin	0c2157bd0a	color palette rework	2026-03-09 16:47:08 +01:00
benjamin	0b831e45d5	replace less variables	2026-03-09 16:39:41 +01:00
benjamin	3fb2e8b341	optimize read calls	2026-03-09 16:32:13 +01:00
benjamin	ed69d9e972	optimize remote	2025-11-29 15:23:01 +01:00
benjamin	f49404f8be	fix key events and add time to fullscreen	2025-02-16 12:40:08 +01:00
benjamin	83573fde31	fix delete show song and not deleted order song causes crash	2025-02-16 12:24:38 +01:00
benjamin	2d38af1c27	fix lint files #2	2025-01-05 10:45:23 +01:00
benjamin	26fd61e90a	fix lint files	2025-01-05 10:40:49 +01:00
benjamin	189478f078	clean up and lint files	2025-01-05 10:29:29 +01:00
benjamin	54ee9a5b11	auto migrate standalone components	2025-01-05 10:26:35 +01:00
benjamin	8b8395fc3c	migrate standalone pipes	2025-01-05 10:20:05 +01:00
benjamin	597e89ffb3	fix standalone	2025-01-05 09:55:54 +01:00
benjamin	e3fa1678c2	fix trimmed text	2025-01-05 09:32:57 +01:00
benjamin	88a574aa80	show next song in page view	2025-01-03 21:01:56 +01:00
benjamin	898c6c4d7e	add comments in show	2025-01-03 15:59:00 +01:00
benjamin	802c309679	update angular	2025-01-02 15:01:59 +01:00
benjamin	73d3ecfd42	optimize styling definitions	2024-06-09 22:51:14 +02:00
smuddyx	3ff7c8c17e	RELEASE 1.6	2024-06-09 22:28:43 +02:00
smuddyx	2f523c5092	set song count	2024-06-09 22:28:18 +02:00
smuddyx	669bd0d852	better show filters	2024-04-09 20:33:59 +02:00
smuddyx	3d31594dbc	RELEASE 1.5	2024-02-24 22:32:53 +01:00
smuddyx	107fc41c4f	update packages	2024-02-24 22:18:15 +01:00
smuddyx	9025d2c8a5	add updater to script list	2024-02-24 22:15:31 +01:00
smuddyx	4aeb452434	guest mode	2024-02-24 22:01:48 +01:00
smuddyx	150e20ccfb	update npm packages	2024-02-17 18:14:30 +01:00
smuddyx	9cd565acb8	update ng packages	2024-02-17 16:14:03 +01:00
smuddyx	5cb7b12508	fix console log	2024-02-17 16:01:51 +01:00
smuddyx	a364536127	fix textarea font	2024-02-17 16:00:31 +01:00
smuddyx	8a9e2d58c5	fix background	2024-02-13 17:32:18 +01:00
smuddyx	45677eb1c3	RELEASE 1.4	2024-02-11 18:01:34 +01:00
smuddyx	28b669fc2d	ng update 17	2024-02-11 17:50:14 +01:00
smuddyx	2f5a732ffc	fixes after ng update	2024-02-11 17:37:50 +01:00
smuddyx	d71bd41495	remove ngx scrollbar	2023-11-02 22:26:42 +01:00
smuddyx	c19e115b43	ng update 15	2023-11-02 22:03:55 +01:00