From abcb8e2cb40cdbd5e33ce2bf5733a2298652273f Mon Sep 17 00:00:00 2001
From: Lorenz Hilpert <l.hilpert@paragon-data.de>
Date: Wed, 3 Dec 2025 14:15:50 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(shell-layout):=20?=
 =?UTF-8?q?restructure=20component=20and=20add=20network=20status=20banner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move shell-layout from nested folder to lib root
- Add network-status-banner component for connectivity display
- Remove old component structure and specs
---
 libs/shell/layout/src/index.ts                |  2 +-
 .../network-status-banner.component.css       | 11 ++++++++++
 .../network-status-banner.component.html      | 12 +++++++++++
 .../network-status-banner.component.ts        | 17 +++++++++++++++
 .../layout/src/lib/shell-layout.component.css |  3 +++
 .../src/lib/shell-layout.component.html       |  2 ++
 .../layout/src/lib/shell-layout.component.ts  | 12 +++++++++++
 .../shell-layout/shell-layout.component.css   |  0
 .../shell-layout/shell-layout.component.html  |  1 -
 .../shell-layout.component.spec.ts            | 21 -------------------
 .../shell-layout/shell-layout.component.ts    | 10 ---------
 11 files changed, 58 insertions(+), 33 deletions(-)
 create mode 100644 libs/shell/layout/src/lib/components/network-status-banner.component.css
 create mode 100644 libs/shell/layout/src/lib/components/network-status-banner.component.html
 create mode 100644 libs/shell/layout/src/lib/components/network-status-banner.component.ts
 create mode 100644 libs/shell/layout/src/lib/shell-layout.component.css
 create mode 100644 libs/shell/layout/src/lib/shell-layout.component.html
 create mode 100644 libs/shell/layout/src/lib/shell-layout.component.ts
 delete mode 100644 libs/shell/layout/src/lib/shell-layout/shell-layout.component.css
 delete mode 100644 libs/shell/layout/src/lib/shell-layout/shell-layout.component.html
 delete mode 100644 libs/shell/layout/src/lib/shell-layout/shell-layout.component.spec.ts
 delete mode 100644 libs/shell/layout/src/lib/shell-layout/shell-layout.component.ts

diff --git a/libs/shell/layout/src/index.ts b/libs/shell/layout/src/index.ts
index fb2a8704b..a835806a9 100644
--- a/libs/shell/layout/src/index.ts
+++ b/libs/shell/layout/src/index.ts
@@ -1 +1 @@
-export * from './lib/shell-layout/shell-layout.component';
+export * from './lib/shell-layout.component';
diff --git a/libs/shell/layout/src/lib/components/network-status-banner.component.css b/libs/shell/layout/src/lib/components/network-status-banner.component.css
new file mode 100644
index 000000000..de4b1a53a
--- /dev/null
+++ b/libs/shell/layout/src/lib/components/network-status-banner.component.css
@@ -0,0 +1,11 @@
+:host {
+  @apply none fixed inset-x-0 top-0 z-50 flex justify-center p-4 text-center;
+}
+
+:host.online {
+  @apply block bg-isa-accent-green text-white;
+}
+
+:host.offline {
+  @apply block bg-isa-accent-red text-white;
+}
diff --git a/libs/shell/layout/src/lib/components/network-status-banner.component.html b/libs/shell/layout/src/lib/components/network-status-banner.component.html
new file mode 100644
index 000000000..bebd69f15
--- /dev/null
+++ b/libs/shell/layout/src/lib/components/network-status-banner.component.html
@@ -0,0 +1,12 @@
+@switch (networkStatus()) {
+  @case ('online') {
+    <div>Sie sind wieder online.</div>
+  }
+  @case ('offline') {
+    <div>Sie sind offline, keine Verbindung zum Netzwerk.</div>
+    <div>
+      Bereits geladene Ihnalte werden angezeigt, Interaktionen sind aktuell
+      nicht möglich.
+    </div>
+  }
+}
diff --git a/libs/shell/layout/src/lib/components/network-status-banner.component.ts b/libs/shell/layout/src/lib/components/network-status-banner.component.ts
new file mode 100644
index 000000000..dbf77d7ad
--- /dev/null
+++ b/libs/shell/layout/src/lib/components/network-status-banner.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectNetworkStatus } from '@isa/core/connectivity';
+
+@Component({
+  selector: 'shell-network-status-banner',
+  templateUrl: './network-status-banner.component.html',
+  styleUrls: ['./network-status-banner.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+  host: {
+    '[class.online]': "networkStatus() === 'online'",
+    '[class.offline]': "networkStatus() === 'offline'",
+  },
+})
+export class NetworkBannerStatusComponent {
+  readonly networkStatus = injectNetworkStatus();
+}
diff --git a/libs/shell/layout/src/lib/shell-layout.component.css b/libs/shell/layout/src/lib/shell-layout.component.css
new file mode 100644
index 000000000..7cce79a90
--- /dev/null
+++ b/libs/shell/layout/src/lib/shell-layout.component.css
@@ -0,0 +1,3 @@
+:host {
+  @apply block h-full w-full;
+}
diff --git a/libs/shell/layout/src/lib/shell-layout.component.html b/libs/shell/layout/src/lib/shell-layout.component.html
new file mode 100644
index 000000000..ecb4d3231
--- /dev/null
+++ b/libs/shell/layout/src/lib/shell-layout.component.html
@@ -0,0 +1,2 @@
+<shell-network-status-banner />
+<router-outlet />
diff --git a/libs/shell/layout/src/lib/shell-layout.component.ts b/libs/shell/layout/src/lib/shell-layout.component.ts
new file mode 100644
index 000000000..cec4837c6
--- /dev/null
+++ b/libs/shell/layout/src/lib/shell-layout.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NetworkBannerStatusComponent } from './components/network-status-banner.component';
+
+@Component({
+  selector: 'shell-layout',
+  templateUrl: './shell-layout.component.html',
+  styleUrls: ['./shell-layout.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, NetworkBannerStatusComponent],
+})
+export class ShellLayoutComponent {}
diff --git a/libs/shell/layout/src/lib/shell-layout/shell-layout.component.css b/libs/shell/layout/src/lib/shell-layout/shell-layout.component.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/libs/shell/layout/src/lib/shell-layout/shell-layout.component.html b/libs/shell/layout/src/lib/shell-layout/shell-layout.component.html
deleted file mode 100644
index 8ee25be96..000000000
--- a/libs/shell/layout/src/lib/shell-layout/shell-layout.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>ShellLayout works!</p>
diff --git a/libs/shell/layout/src/lib/shell-layout/shell-layout.component.spec.ts b/libs/shell/layout/src/lib/shell-layout/shell-layout.component.spec.ts
deleted file mode 100644
index a938b6d81..000000000
--- a/libs/shell/layout/src/lib/shell-layout/shell-layout.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ShellLayoutComponent } from './shell-layout.component';
-
-describe('ShellLayoutComponent', () => {
-  let component: ShellLayoutComponent;
-  let fixture: ComponentFixture<ShellLayoutComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ShellLayoutComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ShellLayoutComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/libs/shell/layout/src/lib/shell-layout/shell-layout.component.ts b/libs/shell/layout/src/lib/shell-layout/shell-layout.component.ts
deleted file mode 100644
index 1986f4db2..000000000
--- a/libs/shell/layout/src/lib/shell-layout/shell-layout.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'shell-shell-layout',
-  imports: [CommonModule],
-  templateUrl: './shell-layout.component.html',
-  styleUrl: './shell-layout.component.css',
-})
-export class ShellLayoutComponent {}