pwa

listify-client/src/app/app.html

@@ -19,6 +19,18 @@
   <span class="spacer"></span>
 
   @if (auth.isAuthenticated()) {
+    <span
+      class="connection-status"
+      [class.offline]="!onlineStatus.online()"
+      [title]="onlineStatus.online() ? 'Online' : 'Offline'"
+    >
+      <mat-icon aria-hidden="true">
+        {{ onlineStatus.online() ? 'cloud_done' : 'cloud_off' }}
+      </mat-icon>
+      @if (offlineSync.pendingCount() > 0) {
+        <span>{{ offlineSync.pendingCount() }}</span>
+      }
+    </span>
     <span class="toolbar-user">{{ auth.user()?.name || auth.user()?.email }}</span>
   } @else {
     <a