Allow closing individual documents from sidebar

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

@@ -92,9 +92,14 @@
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
               </svg>&nbsp;{{d.title | documentTitle}}
+              <span class="close bg-light" (click)="closeDocument(d); $event.preventDefault()">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+                  <use xlink:href="assets/bootstrap-icons.svg#x"/>
+                </svg>
+              </span>
             </a>
           </li>
-          <li class="nav-item w-100" *ngIf="openDocuments.length >= 1">
+          <li class="nav-item w-100" *ngIf="openDocuments.length > 1">
             <a class="nav-link text-truncate" [routerLink]="" (click)="closeAll()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#x"/>

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

@@ -62,16 +62,37 @@
   flex-wrap: nowrap;
 }
 
-.nav-item .nav-link-additional {
-  margin-top: 0.2rem;
-  margin-left: 0.25rem;
-  padding-top: 0.5rem;
+.nav-item {
+  position: relative;
 
-  svg {
-    margin-bottom: 2px;
+  &:hover .close {
+    display: block;
+  }
+
+  .close {
+    display: none;
+    position: absolute;
+    cursor: pointer;
+    opacity: 1;
+    top: 0;
+    padding: .25rem .3rem 0;
+    right: .4rem;
+    width: 1.8rem;
+    height: 100%;
+  }
+
+  .nav-item .nav-link-additional {
+    margin-top: 0.2rem;
+    margin-left: 0.25rem;
+    padding-top: 0.5rem;
+
+    svg {
+      margin-bottom: 2px;
+    }
   }
 }
 
+
 /*
  * Navbar
  */

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

@@ -77,6 +77,20 @@ export class AppFrameComponent implements OnInit {
     this.router.navigate(['search'], {queryParams: {query: this.searchField.value}})
   }
 
+  closeDocument(d: PaperlessDocument) {
+    this.closeMenu()
+    this.openDocumentsService.closeDocument(d)
+
+    // TODO: is there a better way to do this? (taken from closeAll)
+    let route = this.activatedRoute
+    while (route.firstChild) {
+      route = route.firstChild
+    }
+    if (route.component == DocumentDetailComponent) {
+      this.router.navigate([""])
+    }
+  }
+
   closeAll() {
     this.closeMenu()
     this.openDocumentsService.closeAll()

src-ui/src/theme_dark.scss

@@ -63,6 +63,10 @@ $border-color-dark-mode: #47494f;
       background-color: $bg-dark-mode;
       color: $text-color-dark-mode;
       border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
+
+      .close {
+        background-color: inherit !important;
+      }
     }
 
     &:hover {