♻️ refactor(shell-layout): restructure component and add network status banner

- 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

@@ -1 +1 @@
-export * from './lib/shell-layout/shell-layout.component';
+export * from './lib/shell-layout.component';

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;
+}

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>
+  }
+}

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();
+}

libs/shell/layout/src/lib/shell-layout.component.css

@@ -0,0 +1,3 @@
+:host {
+  @apply block h-full w-full;
+}

libs/shell/layout/src/lib/shell-layout.component.html

@@ -0,0 +1,2 @@
+<shell-network-status-banner />
+<router-outlet />

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 {}

libs/shell/layout/src/lib/shell-layout/shell-layout.component.html

@@ -1 +0,0 @@
-<p>ShellLayout works!</p>

libs/shell/layout/src/lib/shell-layout/shell-layout.component.spec.ts

@@ -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();
-  });
-});

libs/shell/layout/src/lib/shell-layout/shell-layout.component.ts

@@ -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 {}