feat(portal): add notifications sidebar (#2516)

* feat(portal): add notifications sidebar

* chore: add service

* chore: simplify style

* chore: fix comments

* WIP, moving notifications to patch-db

* revamp notifications

* chore: small adjustments

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

web/projects/ui/src/app/app.component.html

@@ -18,7 +18,7 @@
           class="left-menu"
         >
           <ion-content color="light" scrollY="false" class="menu">
-            <app-menu *ngIf="authService.isVerified$ | async"></app-menu>
+            <app-menu *ngIf="authService.isVerified$ | async" />
           </ion-content>
         </ion-menu>
 
@@ -38,7 +38,7 @@
               (click)="onResize(drawer)"
             ></button>
           </div>
-          <widgets *ngIf="drawer.open" [wide]="drawer.width === 600"></widgets>
+          <widgets *ngIf="drawer.open" [wide]="drawer.width === 600" />
         </ion-menu>
 
         <ion-router-outlet
@@ -68,22 +68,23 @@
         !(sidebarOpen$ | async)
       "
     >
-      <connection-bar></connection-bar>
+      <connection-bar />
     </ion-footer>
-    <toast-container></toast-container>
+    <toast-container />
   </ion-app>
+  <sidebar-host ngProjectAs="tuiOverContent" />
 </tui-root>
 <ng-container
   *ngIf="authService.isVerified$ | async; else defaultTheme"
   [ngSwitch]="theme$ | async"
 >
   <ng-container *ngSwitchCase="'Dark'">
-    <tui-theme-night></tui-theme-night>
-    <dark-theme></dark-theme>
+    <tui-theme-night />
+    <dark-theme />
   </ng-container>
-  <light-theme *ngSwitchCase="'Light'"></light-theme>
+  <light-theme *ngSwitchCase="'Light'" />
 </ng-container>
 <ng-template #defaultTheme>
-  <tui-theme-night></tui-theme-night>
-  <dark-theme></dark-theme>
+  <tui-theme-night />
+  <dark-theme />
 </ng-template>