From 95a667cb98a60aba01192547d6522d2f1132319c Mon Sep 17 00:00:00 2001
From: Bastian Wagner <bastian.wagner@softconcis.de>
Date: Wed, 5 Aug 2026 12:26:46 +0200
Subject: [PATCH] feat: add EnvBanner component for non-production environments

Standalone component that renders a small banner whenever
environment.production is false, so the local dev build is never
mistaken for the real app.
---
 .../src/app/shared/env-banner/env-banner.html |  3 ++
 .../src/app/shared/env-banner/env-banner.scss | 14 +++++++++
 .../app/shared/env-banner/env-banner.spec.ts  | 31 +++++++++++++++++++
 .../src/app/shared/env-banner/env-banner.ts   | 13 ++++++++
 4 files changed, 61 insertions(+)
 create mode 100644 myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.html
 create mode 100644 myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.scss
 create mode 100644 myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.spec.ts
 create mode 100644 myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.ts

diff --git a/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.html b/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.html
new file mode 100644
index 0000000..2bb24ae
--- /dev/null
+++ b/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.html
@@ -0,0 +1,3 @@
+@if (showBanner) {
+  <div class="env-banner" role="status">⚠ Entwicklungsumgebung</div>
+}
diff --git a/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.scss b/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.scss
new file mode 100644
index 0000000..532c00d
--- /dev/null
+++ b/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.scss
@@ -0,0 +1,14 @@
+// Höhe muss mit ENV_BANNER_HEIGHT_PX in env-banner.ts übereinstimmen.
+.env-banner {
+  height: 28px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f4a300;
+  color: #20251f;
+  font-weight: 700;
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
diff --git a/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.spec.ts b/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.spec.ts
new file mode 100644
index 0000000..52a970a
--- /dev/null
+++ b/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.spec.ts
@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { EnvBanner } from './env-banner';
+import { environment } from '../../../environments/environment';
+
+describe('EnvBanner', () => {
+  const originalProduction = environment.production;
+
+  afterEach(() => {
+    environment.production = originalProduction;
+  });
+
+  it('shows the environment banner outside production', async () => {
+    environment.production = false;
+    await TestBed.configureTestingModule({ imports: [EnvBanner] }).compileComponents();
+    const fixture = TestBed.createComponent(EnvBanner);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement.querySelector('.env-banner');
+    expect(element?.textContent).toContain('Entwicklungsumgebung');
+  });
+
+  it('renders nothing in production', async () => {
+    environment.production = true;
+    await TestBed.configureTestingModule({ imports: [EnvBanner] }).compileComponents();
+    const fixture = TestBed.createComponent(EnvBanner);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement.querySelector('.env-banner');
+    expect(element).toBeNull();
+  });
+});
diff --git a/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.ts b/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.ts
new file mode 100644
index 0000000..26c57fa
--- /dev/null
+++ b/myteamwallet_frontend_modern/src/app/shared/env-banner/env-banner.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { environment } from '../../../environments/environment';
+
+export const ENV_BANNER_HEIGHT_PX = 28;
+
+@Component({
+  selector: 'app-env-banner',
+  templateUrl: './env-banner.html',
+  styleUrl: './env-banner.scss',
+})
+export class EnvBanner {
+  protected readonly showBanner = !environment.production;
+}