Add version check to app frame

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -183,8 +183,20 @@
             </div>
           </li>
           <li class="nav-item mt-2">
-            <div class="px-3 py-2 text-muted small">
-              {{versionString}}
+            <div class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap">
+              <div class="me-3">{{ versionString }}</div>
+              <div *ngIf="appRemoteVersion?.greater_than_current" class="version-check">
+                <ng-template #updatePopContent>
+                  <span class="small">Paperless-ngx v{{ appRemoteVersion.version }} <ng-container i18n>is available.</ng-container><br/><ng-container i18n>Click to view.</ng-container></span>
+                </ng-template>
+                <a class="small text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://github.com/paperless-ngx/paperless-ngx/releases"
+                [ngbPopover]="updatePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave" container="body">
+                  <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
+                    <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
+                  </svg>
+                  <ng-container i18n>Update available</ng-container>
+                </a>
+              </div>
             </div>
           </li>
         </ul>

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -176,3 +176,22 @@
     }
   }
 }
+
+.version-check {
+  animation: pulse 2s ease-in-out 0s 1;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 100%;
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 100%;
+  }
+}

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -18,6 +18,10 @@ import { DocumentDetailComponent } from '../document-detail/document-detail.comp
 import { Meta } from '@angular/platform-browser'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { FILTER_FULLTEXT_QUERY } from 'src/app/data/filter-rule-type'
+import {
+  RemoteVersionService,
+  AppRemoteVersion,
+} from 'src/app/services/rest/remote-version.service'
 
 @Component({
   selector: 'app-app-frame',
@@ -32,10 +36,18 @@ export class AppFrameComponent {
     private searchService: SearchService,
     public savedViewService: SavedViewService,
     private list: DocumentListViewService,
-    private meta: Meta
-  ) {}
+    private meta: Meta,
+    private remoteVersionService: RemoteVersionService
+  ) {
+    this.remoteVersionService
+      .checkForUpdates()
+      .subscribe((appRemoteVersion: AppRemoteVersion) => {
+        this.appRemoteVersion = appRemoteVersion
+      })
+  }
 
   versionString = `${environment.appTitle} ${environment.version}`
+  appRemoteVersion
 
   isMenuCollapsed: boolean = true
 

src-ui/src/theme.scss

@@ -271,6 +271,7 @@ table.table {
   .popover-body {
     background-color: var(--ngx-bg-alt);
     border-color: var(--bs-border-color);
+    color: var(--bs-body-color);
   }
 }