use hostname from patchDB as default server name (#1758)

* replace offline toast with global indicator

* use hostname from patchDB as default server name

* add alert to marketplace delete and reword logout alert

frontend/projects/ui/src/app/components/connection-bar/connection-bar.component.ts

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { combineLatest, map, Observable, startWith, tap } from 'rxjs'
+import { ConnectionService } from 'src/app/services/connection.service'
+import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+
+@Component({
+  selector: 'connection-bar',
+  templateUrl: './connection-bar.component.html',
+  styleUrls: ['./connection-bar.component.scss'],
+  // changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConnectionBarComponent {
+  private readonly websocket$ = this.connectionService.websocketConnected$
+
+  readonly connection$: Observable<{
+    message: string
+    icon: string
+    color: string
+    dots: boolean
+  }> = combineLatest([
+    this.connectionService.networkConnected$,
+    this.websocket$,
+  ]).pipe(
+    map(([network, websocket]) => {
+      if (!network)
+        return {
+          message: 'No Internet',
+          icon: 'cloud-offline-outline',
+          color: 'dark',
+          dots: false,
+        }
+      if (!websocket)
+        return {
+          message: 'Connecting',
+          icon: 'cloud-offline-outline',
+          color: 'warning',
+          dots: true,
+        }
+
+      return {
+        message: 'Connected',
+        icon: 'cloud-done',
+        color: 'success',
+        dots: false,
+      }
+    }),
+  )
+
+  constructor(
+    private readonly connectionService: ConnectionService,
+    private readonly patch: PatchDbService,
+  ) {}
+}