From 8a0a49dd5766094f60462fbfbe62e9921fbd2373 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 19 Dec 2023 23:02:47 -0800
Subject: [PATCH] Fix formatting

---
 .../app-frame/app-frame.component.html        | 621 ++++++++++--------
 1 file changed, 341 insertions(+), 280 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index dc34fef8c..2ab3fe0ae 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -4,23 +4,29 @@
     (click)="isMenuCollapsed = !isMenuCollapsed">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <a class="navbar-brand col-auto col-md-3 col-lg-2 me-0 px-3 py-3 order-sm-0" [ngClass]="slimSidebarEnabled ? 'slim' : 'col-auto col-md-3 col-lg-2'" routerLink="/dashboard" tourAnchor="tour.intro">
+  <a class="navbar-brand col-auto col-md-3 col-lg-2 me-0 px-3 py-3 order-sm-0"
+    [ngClass]="slimSidebarEnabled ? 'slim' : 'col-auto col-md-3 col-lg-2'" routerLink="/dashboard"
+    tourAnchor="tour.intro">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 238.91" width="1em" class="me-2" fill="currentColor">
-      <path d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z" transform="translate(0 0)"/>
+      <path
+        d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z"
+        transform="translate(0 0)" />
     </svg>
     <span class="ms-2" [class.visually-hidden]="slimSidebarEnabled" i18n="app title">Paperless-ngx</span>
   </a>
-  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1"
+    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
     <form (ngSubmit)="search()" class="form-inline flex-grow-1">
       <svg width="1em" height="1em" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#search"/>
+        <use xlink:href="assets/bootstrap-icons.svg#search" />
       </svg>
       <input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search"
-        [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)" (selectItem)="itemSelected($event)" i18n-placeholder>
+        [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)"
+        (selectItem)="itemSelected($event)" i18n-placeholder>
       @if (!searchFieldEmpty) {
         <button type="button" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0" (click)="resetSearchField()">
           <svg fill="currentColor" class="buttonicon-sm me-1">
-            <use xlink:href="assets/bootstrap-icons.svg#x"/>
+            <use xlink:href="assets/bootstrap-icons.svg#x" />
           </svg>
         </button>
       }
@@ -33,7 +39,7 @@
           {{this.settingsService.displayName}}
         </span>
         <svg width="1.3em" height="1.3em" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#person-circle"/>
+          <use xlink:href="assets/bootstrap-icons.svg#person-circle" />
         </svg>
       </button>
       <div ngbDropdownMenu class="dropdown-menu-end shadow me-2" aria-labelledby="userDropdown">
@@ -43,283 +49,338 @@
         </div>
         <button ngbDropdownItem class="nav-link" (click)="editProfile()">
           <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#person"/>
-            </svg><ng-container i18n>My Profile</ng-container>
-          </button>
-          <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
-            <svg class="sidebaricon me-2" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#gear"/>
-              </svg><ng-container i18n>Settings</ng-container>
+            <use xlink:href="assets/bootstrap-icons.svg#person" />
+          </svg><ng-container i18n>My Profile</ng-container>
+        </button>
+        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()"
+          *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
+          <svg class="sidebaricon me-2" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#gear" />
+          </svg><ng-container i18n>Settings</ng-container>
+        </a>
+        <a ngbDropdownItem class="nav-link" href="accounts/logout/" (click)="onLogout()">
+          <svg class="sidebaricon me-2" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#door-open" />
+          </svg><ng-container i18n>Logout</ng-container>
+        </a>
+        <div class="dropdown-divider"></div>
+        <a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer"
+          href="https://docs.paperless-ngx.com">
+          <svg class="sidebaricon me-2" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
+          </svg><ng-container i18n>Documentation</ng-container>
+        </a>
+      </div>
+    </li>
+  </ul>
+</nav>
+
+<div class="container-fluid">
+  <div class="row">
+    <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse"
+      [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating"
+      [ngbCollapse]="isMenuCollapsed">
+      <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
+        <svg class="sidebaricon-sm" fill="currentColor">
+          @if (slimSidebarEnabled) {
+            <use xlink:href="assets/bootstrap-icons.svg#chevron-double-right" />
+          } @else {
+            <use xlink:href="assets/bootstrap-icons.svg#chevron-double-left" />
+          }
+        </svg>
+      </button>
+      <div class="sidebar-sticky pt-3 d-flex flex-column justify-space-around">
+        <ul class="nav flex-column">
+          <li class="nav-item">
+            <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#house" />
+              </svg><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
             </a>
-            <a ngbDropdownItem class="nav-link" href="accounts/logout/" (click)="onLogout()">
-              <svg class="sidebaricon me-2" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#door-open"/>
-                </svg><ng-container i18n>Logout</ng-container>
-              </a>
-              <div class="dropdown-divider"></div>
-              <a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com">
-                <svg class="sidebaricon me-2" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#question-circle"/>
-                  </svg><ng-container i18n>Documentation</ng-container>
+          </li>
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+            <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#files" />
+              </svg><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
+            </a>
+          </li>
+        </ul>
+        <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+          @if (savedViewService.loading || savedViewService.sidebarViews?.length > 0) {
+            <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
+              <span i18n>Saved views</span>
+              @if (savedViewService.loading) {
+                <div class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
+              }
+            </h6>
+          }
+          <ul class="nav flex-column mb-2" cdkDropList (cdkDropListDropped)="onDrop($event)">
+            @for (view of savedViewService.sidebarViews; track view) {
+              <li class="nav-item w-100" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
+                cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
+                (cdkDragEnded)="onDragEnd($event)">
+                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}"
+                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                  popoverClass="popover-slim">
+                  <svg class="sidebaricon" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#funnel" />
+                  </svg><span>&nbsp;{{view.name}}</span>
+                </a>
+                @if (settingsService.organizingSidebarSavedViews) {
+                  <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
+                    <svg class="sidebaricon text-muted" fill="currentColor">
+                      <use xlink:href="assets/bootstrap-icons.svg#grip-vertical" />
+                    </svg>
+                  </div>
+                }
+              </li>
+            }
+          </ul>
+        </ng-container>
+
+        <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+          @if (openDocuments.length > 0) {
+            <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
+              <span i18n>Open documents</span>
+            </h6>
+          }
+          <ul class="nav flex-column mb-2">
+            @for (d of openDocuments; track d) {
+              <li class="nav-item w-100">
+                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}"
+                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                  popoverClass="popover-slim">
+                  <svg class="sidebaricon" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#file-text" />
+                  </svg><span>&nbsp;{{d.title | documentTitle}}</span>
+                  <span class="close" (click)="closeDocument(d); $event.preventDefault()">
+                    <svg fill="currentColor" class="toolbaricon">
+                      <use xlink:href="assets/bootstrap-icons.svg#x" />
+                    </svg>
+                  </span>
+                </a>
+              </li>
+            }
+            @if (openDocuments.length >= 1) {
+              <li class="nav-item w-100">
+                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()"
+                  ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                  container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                  <svg class="sidebaricon" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#x" />
+                  </svg><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
+                </a>
+              </li>
+            }
+          </ul>
+        </ng-container>
+
+        <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
+          <span i18n>Manage</span>
+        </h6>
+        <ul class="nav flex-column mb-2">
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
+            <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#person" />
+              </svg><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"
+            tourAnchor="tour.tags">
+            <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#tags" />
+              </svg><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
+            <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#hash" />
+              </svg><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
+            <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#folder" />
+              </svg><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
+            <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#ui-radios" />
+              </svg><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ConsumptionTemplate }"
+            tourAnchor="tour.consumption-templates">
+            <a class="nav-link" routerLink="templates" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Consumption templates" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#file-earmark-ruled" />
+              </svg><span>&nbsp;<ng-container i18n>Templates</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
+            tourAnchor="tour.mail">
+            <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#envelope" />
+              </svg><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
+            </a>
+          </li>
+        </ul>
+
+        <h6 class="sidebar-heading px-3 mt-auto pt-4 mb-1 text-muted">
+          <span i18n>Administration</span>
+        </h6>
+        <ul class="nav flex-column mb-2">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }"
+            tourAnchor="tour.settings">
+            <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#gear" />
+              </svg><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
+            <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#people" />
+              </svg><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }"
+            tourAnchor="tour.file-tasks">
+            <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              @if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) {
+                <span class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
+              }
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#list-task" />
+              </svg><span>&nbsp;<ng-container i18n>File Tasks@if (tasksService.failedFileTasks.length > 0) {
+                    <span><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span>
+                  }</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
+            <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#text-left" />
+              </svg><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item mt-2" tourAnchor="tour.outro">
+            <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none"
+              target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
+              </svg><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
+            <div class="px-3 py-0 text-muted small d-flex align-items-center flex-wrap">
+              <div class="me-3">
+                <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer"
+                  href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                  triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                  {{ versionString }}
                 </a>
               </div>
-            </li>
-          </ul>
-        </nav>
-
-        <div class="container-fluid">
-          <div class="row">
-            <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse" [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating" [ngbCollapse]="isMenuCollapsed">
-              <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
-                <svg class="sidebaricon-sm" fill="currentColor">
-                  @if (slimSidebarEnabled) {
-                    <use xlink:href="assets/bootstrap-icons.svg#chevron-double-right"/>
-                  }
-                  @if (!slimSidebarEnabled) {
-                    <use xlink:href="assets/bootstrap-icons.svg#chevron-double-left"/>
-                  }
-                </svg>
-              </button>
-              <div class="sidebar-sticky pt-3 d-flex flex-column justify-space-around">
-                <ul class="nav flex-column">
-                  <li class="nav-item">
-                    <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                      <svg class="sidebaricon" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#house"/>
-                        </svg><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
+              @if (!settingsService.updateCheckingIsSet || appRemoteVersion) {
+                <div class="version-check">
+                  <ng-template #updateAvailablePopContent>
+                    <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is
+                        available.</ng-container><br /><ng-container i18n>Click to view.</ng-container></span>
+                  </ng-template>
+                  <ng-template #updateCheckingNotEnabledPopContent>
+                    <p class="small mb-2">
+                      <ng-container i18n>Paperless-ngx can automatically check for updates</ng-container>
+                    </p>
+                    <div class="btn-group btn-group-xs flex-fill w-100">
+                      <button class="btn btn-outline-primary" (click)="setUpdateChecking(true)">Enable</button>
+                      <button class="btn btn-outline-secondary" (click)="setUpdateChecking(false)">Disable</button>
+                    </div>
+                    <p class="small mb-0 mt-2">
+                      <a class="small text-decoration-none fst-italic" routerLink="/settings" fragment="update-checking" i18n>
+                        How does this work?
                       </a>
-                    </li>
-                    <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-                      <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                        <svg class="sidebaricon" fill="currentColor">
-                          <use xlink:href="assets/bootstrap-icons.svg#files"/>
-                          </svg><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
-                        </a>
-                      </li>
-                    </ul>
-                    <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
-                      @if (savedViewService.loading || savedViewService.sidebarViews?.length > 0) {
-                        <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
-                          <span i18n>Saved views</span>
-                          @if (savedViewService.loading) {
-                            <div class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
-                          }
-                        </h6>
-                      }
-                      <ul class="nav flex-column mb-2" cdkDropList (cdkDropListDropped)="onDrop($event)">
-                        @for (view of savedViewService.sidebarViews; track view) {
-                          <li class="nav-item w-100"
-                            cdkDrag
-                            [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
-                            cdkDragPreviewContainer="parent"
-                            cdkDragPreviewClass="navItemDrag"
-                            (cdkDragStarted)="onDragStart($event)"
-                            (cdkDragEnded)="onDragEnd($event)">
-                            <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                              <svg class="sidebaricon" fill="currentColor">
-                                <use xlink:href="assets/bootstrap-icons.svg#funnel"/>
-                                </svg><span>&nbsp;{{view.name}}</span>
-                              </a>
-                              @if (settingsService.organizingSidebarSavedViews) {
-                                <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
-                                  <svg class="sidebaricon text-muted" fill="currentColor">
-                                    <use xlink:href="assets/bootstrap-icons.svg#grip-vertical"/>
-                                  </svg>
-                                </div>
-                              }
-                            </li>
-                          }
-                        </ul>
-                      </ng-container>
-
-                      <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-                        @if (openDocuments.length > 0) {
-                          <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
-                            <span i18n>Open documents</span>
-                          </h6>
+                    </p>
+                  </ng-template>
+                  @if (settingsService.updateCheckingIsSet) {
+                    @if (appRemoteVersion.update_available) {
+                      <a class="small text-decoration-none" target="_blank" rel="noopener noreferrer"
+                        href="https://github.com/paperless-ngx/paperless-ngx/releases"
+                        [ngbPopover]="updateAvailablePopContent" 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>
+                        @if (appRemoteVersion?.update_available) {
+                        <ng-container i18n>Update available</ng-container>
                         }
-                        <ul class="nav flex-column mb-2">
-                          @for (d of openDocuments; track d) {
-                            <li class="nav-item w-100">
-                              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                <svg class="sidebaricon" fill="currentColor">
-                                  <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-                                  </svg><span>&nbsp;{{d.title | documentTitle}}</span>
-                                  <span class="close" (click)="closeDocument(d); $event.preventDefault()">
-                                    <svg fill="currentColor" class="toolbaricon">
-                                      <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                                    </svg>
-                                  </span>
-                                </a>
-                              </li>
-                            }
-                            @if (openDocuments.length >= 1) {
-                              <li class="nav-item w-100">
-                                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()" ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                  <svg class="sidebaricon" fill="currentColor">
-                                    <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                                    </svg><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
-                                  </a>
-                                </li>
-                              }
-                            </ul>
-                          </ng-container>
-
-                          <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
-                            <span i18n>Manage</span>
-                          </h6>
-                          <ul class="nav flex-column mb-2">
-                            <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
-                              <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                <svg class="sidebaricon" fill="currentColor">
-                                  <use xlink:href="assets/bootstrap-icons.svg#person"/>
-                                  </svg><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
-                                </a>
-                              </li>
-                              <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }" tourAnchor="tour.tags">
-                                <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                  <svg class="sidebaricon" fill="currentColor">
-                                    <use xlink:href="assets/bootstrap-icons.svg#tags"/>
-                                    </svg><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
-                                  </a>
-                                </li>
-                                <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
-                                  <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                    <svg class="sidebaricon" fill="currentColor">
-                                      <use xlink:href="assets/bootstrap-icons.svg#hash"/>
-                                      </svg><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
-                                    </a>
-                                  </li>
-                                  <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
-                                    <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                      <svg class="sidebaricon" fill="currentColor">
-                                        <use xlink:href="assets/bootstrap-icons.svg#folder"/>
-                                        </svg><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
-                                      </a>
-                                    </li>
-                                    <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
-                                      <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                        <svg class="sidebaricon" fill="currentColor">
-                                          <use xlink:href="assets/bootstrap-icons.svg#ui-radios"/>
-                                          </svg><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
-                                        </a>
-                                      </li>
-                                      <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ConsumptionTemplate }" tourAnchor="tour.consumption-templates">
-                                        <a class="nav-link" routerLink="templates" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Consumption templates" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                          <svg class="sidebaricon" fill="currentColor">
-                                            <use xlink:href="assets/bootstrap-icons.svg#file-earmark-ruled"/>
-                                            </svg><span>&nbsp;<ng-container i18n>Templates</ng-container></span>
-                                          </a>
-                                        </li>
-                                        <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }" tourAnchor="tour.mail">
-                                          <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                            <svg class="sidebaricon" fill="currentColor">
-                                              <use xlink:href="assets/bootstrap-icons.svg#envelope"/>
-                                              </svg><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
-                                            </a>
-                                          </li>
-                                        </ul>
-
-                                        <h6 class="sidebar-heading px-3 mt-auto pt-4 mb-1 text-muted">
-                                          <span i18n>Administration</span>
-                                        </h6>
-                                        <ul class="nav flex-column mb-2">
-                                          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }" tourAnchor="tour.settings">
-                                            <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                              <svg class="sidebaricon" fill="currentColor">
-                                                <use xlink:href="assets/bootstrap-icons.svg#gear"/>
-                                                </svg><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
-                                              </a>
-                                            </li>
-                                            <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
-                                              <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                                <svg class="sidebaricon" fill="currentColor">
-                                                  <use xlink:href="assets/bootstrap-icons.svg#people"/>
-                                                  </svg><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
-                                                </a>
-                                              </li>
-                                              <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }" tourAnchor="tour.file-tasks">
-                                                <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                                  @if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) {
-                                                    <span class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
-                                                  }
-                                                  <svg class="sidebaricon" fill="currentColor">
-                                                    <use xlink:href="assets/bootstrap-icons.svg#list-task"/>
-                                                  </svg><span>&nbsp;<ng-container i18n>File Tasks@if (tasksService.failedFileTasks.length > 0) {
-<span><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span>
-}</ng-container></span>
-                                              </a>
-                                            </li>
-                                            <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
-                                              <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                                <svg class="sidebaricon" fill="currentColor">
-                                                  <use xlink:href="assets/bootstrap-icons.svg#text-left"/>
-                                                  </svg><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
-                                                </a>
-                                              </li>
-                                              <li class="nav-item mt-2" tourAnchor="tour.outro">
-                                                <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                                  <svg class="sidebaricon" fill="currentColor">
-                                                    <use xlink:href="assets/bootstrap-icons.svg#question-circle"/>
-                                                    </svg><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
-                                                  </a>
-                                                </li>
-                                                <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
-                                                  <div class="px-3 py-0 text-muted small d-flex align-items-center flex-wrap">
-                                                    <div class="me-3">
-                                                      <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                                                        {{ versionString }}
-                                                      </a>
-                                                    </div>
-                                                    @if (!settingsService.updateCheckingIsSet || appRemoteVersion) {
-                                                      <div class="version-check">
-                                                        <ng-template #updateAvailablePopContent>
-                                                          <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is available.</ng-container><br/><ng-container i18n>Click to view.</ng-container></span>
-                                                        </ng-template>
-                                                        <ng-template #updateCheckingNotEnabledPopContent>
-                                                          <p class="small mb-2">
-                                                            <ng-container i18n>Paperless-ngx can automatically check for updates</ng-container>
-                                                          </p>
-                                                          <div class="btn-group btn-group-xs flex-fill w-100">
-                                                            <button class="btn btn-outline-primary" (click)="setUpdateChecking(true)">Enable</button>
-                                                            <button class="btn btn-outline-secondary" (click)="setUpdateChecking(false)">Disable</button>
-                                                          </div>
-                                                          <p class="small mb-0 mt-2">
-                                                            <a class="small text-decoration-none fst-italic" routerLink="/settings" fragment="update-checking" i18n>
-                      How does this work?
+                      </a>
+                    }
+                  } @else {
+                    <a class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
+                      [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter"
+                      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>
                     </a>
-                                                          </p>
-                                                        </ng-template>
-                                                        @if (settingsService.updateCheckingIsSet) {
-                                                          @if (appRemoteVersion.update_available) {
-                                                            <a class="small text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://github.com/paperless-ngx/paperless-ngx/releases"
-                                                              [ngbPopover]="updateAvailablePopContent" 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>
-                                                              @if (appRemoteVersion?.update_available) {
-                                                                <ng-container i18n>Update available</ng-container>
-                                                              }
-                                                            </a>
-                                                          }
-                                                        } @else {
-                                                          <a class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
-                                                            [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter" 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>
-                                                          </a>
-                                                        }
-                                                      </div>
-                                                    }
-                                                  </div>
-                                                </li>
-                                              </ul>
-                                            </div>
-                                          </nav>
+                  }
+                </div>
+              }
+            </div>
+          </li>
+        </ul>
+      </div>
+    </nav>
 
-                                          <main role="main" class="ms-sm-auto px-md-4" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
-                                            <router-outlet></router-outlet>
-                                          </main>
-                                        </div>
-                                      </div>
+    <main role="main" class="ms-sm-auto px-md-4"
+      [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
+      <router-outlet></router-outlet>
+    </main>
+  </div>
+</div>