Merge remote-tracking branch 'upstream/dev' into feature/updated-nav-bar

2025-07-28 18:24:38 -05:00 · 2021-01-01 12:16:55 -08:00
parent 0a5c82a908 16a546ded8
commit dc1d2d08f0
54 changed files with 1079 additions and 411 deletions
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -5,7 +5,9 @@
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand col-auto col-md-3 col-lg-2 mr-0 px-3 py-3 order-sm-0" routerLink="/dashboard">
-    <img src="assets/logo-dark-notext.svg" height="18px" class="mr-2">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 238.91" width="16px" class="mr-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)"/>
+    </svg>
    <ng-container i18n="app title">Paperless-ng</ng-container>
  </a>
  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 pl-md-4 mr-sm-auto order-3 order-sm-1">
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -20,7 +20,7 @@
        </div>
      </div>
      <div *ngIf="selectionModel.items" class="items">
-        <ng-container *ngFor="let item of selectionModel.items | filter: filterText">
+        <ng-container *ngFor="let item of (editing ? selectionModel.itemsSorted : selectionModel.items) | filter: filterText">
          <app-toggleable-dropdown-button *ngIf="allowSelectNone || item.id" [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)"></app-toggleable-dropdown-button>
        </ng-container>
      </div>
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -18,6 +18,18 @@ export class FilterableDropdownSelectionModel {

  items: MatchingModel[] = []

+  get itemsSorted(): MatchingModel[] {
+    return this.items.sort((a,b) => {
+      if (this.getNonTemporary(a.id) == ToggleableItemState.NotSelected && this.getNonTemporary(b.id) != ToggleableItemState.NotSelected) {
+        return 1
+      } else if (this.getNonTemporary(a.id) != ToggleableItemState.NotSelected && this.getNonTemporary(b.id) == ToggleableItemState.NotSelected) {
+        return -1
+      } else {
+        return a.name.localeCompare(b.name)
+      }
+    })
+  }
+
  private selectionStates = new Map<number, ToggleableItemState>()

  private temporarySelectionStates = new Map<number, ToggleableItemState>()
@@ -69,6 +81,10 @@ export class FilterableDropdownSelectionModel {
    
  }

+  private getNonTemporary(id: number) {
+    return this.selectionStates.get(id) || ToggleableItemState.NotSelected
+  }
+
  get(id: number) {
    return this.temporarySelectionStates.get(id) || ToggleableItemState.NotSelected
  }
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -5,7 +5,9 @@
    <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue"
      [multiple]="true"
      [closeOnSelect]="false"
+      [clearSearchOnAdd]="true"
      [disabled]="disabled"
+      [hideSelected]="true"
      (change)="ngSelectChange()">

      <ng-template ng-label-tmp let-item="item">
--- a/src-ui/src/app/components/dashboard/dashboard.component.html
+++ b/src-ui/src/app/components/dashboard/dashboard.component.html
--- a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html
@@ -4,7 +4,7 @@
    <img src="assets/save-filter.png" class="float-right">
    <p i18n>Paperless is running! :)</p>
    <p i18n>You can start uploading documents by dropping them in the file upload box to the right or by dropping them in the configured consumption folder and they'll start showing up in the documents list.
-      After you've added some metadata to your documents, use the filtering mechanisms of paperless to create custom views (such as 'Recently added', 'Tagged TODO') and have they will be shown on the dashboard instead of this message.</p>
+      After you've added some metadata to your documents, use the filtering mechanisms of paperless to create custom views (such as 'Recently added', 'Tagged TODO') and they will appear on the dashboard instead of this message.</p>
    <p i18n>Paperless offers some more features that try to make your life easier:</p>
    <ul>
      <li i18n>Once you've got a couple documents in paperless and added metadata to them, paperless can assign that metadata to new documents automatically.</li>
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -159,7 +159,7 @@ export class DocumentDetailComponent implements OnInit {
  delete() {
    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
    modal.componentInstance.title = $localize`Confirm delete`
-    modal.componentInstance.messageBold = $localize`Do you really want to delete document '${this.document.title}'?`
+    modal.componentInstance.messageBold = $localize`Do you really want to delete document "${this.document.title}"?`
    modal.componentInstance.message = $localize`The files for this document will be deleted permanently. This operation cannot be undone.`
    modal.componentInstance.btnClass = "btn-danger"
    modal.componentInstance.btnCaption = $localize`Delete document`
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
@@ -115,16 +115,16 @@ export class BulkEditorComponent {
      modal.componentInstance.title = $localize`Confirm tags assignment`
      if (changedTags.itemsToAdd.length == 1 && changedTags.itemsToRemove.length == 0) {
        let tag = changedTags.itemsToAdd[0]
-        modal.componentInstance.message = $localize`This operation will add the tag "${tag.name}" to all ${this.list.selected.size} selected document(s).`
+        modal.componentInstance.message = $localize`This operation will add the tag "${tag.name}" to ${this.list.selected.size} selected document(s).`
      } else if (changedTags.itemsToAdd.length > 1 && changedTags.itemsToRemove.length == 0) {
-        modal.componentInstance.message = $localize`This operation will add the tags ${this._localizeList(changedTags.itemsToAdd)} to all ${this.list.selected.size} selected document(s).`
+        modal.componentInstance.message = $localize`This operation will add the tags ${this._localizeList(changedTags.itemsToAdd)} to ${this.list.selected.size} selected document(s).`
      } else if (changedTags.itemsToAdd.length == 0 && changedTags.itemsToRemove.length == 1) {
        let tag = changedTags.itemsToRemove[0]
-        modal.componentInstance.message = $localize`This operation will remove the tag "${tag.name}" from all ${this.list.selected.size} selected document(s).`
+        modal.componentInstance.message = $localize`This operation will remove the tag "${tag.name}" from ${this.list.selected.size} selected document(s).`
      } else if (changedTags.itemsToAdd.length == 0 && changedTags.itemsToRemove.length > 1) {
-        modal.componentInstance.message = $localize`This operation will remove the tags ${this._localizeList(changedTags.itemsToRemove)} from all ${this.list.selected.size} selected document(s).`
+        modal.componentInstance.message = $localize`This operation will remove the tags ${this._localizeList(changedTags.itemsToRemove)} from ${this.list.selected.size} selected document(s).`
      } else {
-        modal.componentInstance.message = $localize`This operation will add the tags ${this._localizeList(changedTags.itemsToAdd)} and remove the tags ${this._localizeList(changedTags.itemsToRemove)} on all ${this.list.selected.size} selected document(s).`
+        modal.componentInstance.message = $localize`This operation will add the tags ${this._localizeList(changedTags.itemsToAdd)} and remove the tags ${this._localizeList(changedTags.itemsToRemove)} on ${this.list.selected.size} selected document(s).`
      }
      
      modal.componentInstance.btnClass = "btn-warning"
@@ -156,9 +156,9 @@ export class BulkEditorComponent {
      let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
      modal.componentInstance.title = $localize`Confirm correspondent assignment`
      if (correspondent) {
-        modal.componentInstance.message = $localize`This operation will assign the correspondent "${correspondent.name}" to all ${this.list.selected.size} selected document(s).`
+        modal.componentInstance.message = $localize`This operation will assign the correspondent "${correspondent.name}" to ${this.list.selected.size} selected document(s).`
      } else {
-        modal.componentInstance.message = $localize`This operation will remove the correspondent from all ${this.list.selected.size} selected document(s).`
+        modal.componentInstance.message = $localize`This operation will remove the correspondent from ${this.list.selected.size} selected document(s).`
      }
      modal.componentInstance.btnClass = "btn-warning"
      modal.componentInstance.btnCaption = $localize`Confirm`
@@ -189,9 +189,9 @@ export class BulkEditorComponent {
      let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
      modal.componentInstance.title = $localize`Confirm document type assignment`
      if (documentType) {
-        modal.componentInstance.message = $localize`This operation will assign the document type "${documentType.name}" to all ${this.list.selected.size} selected document(s).`
+        modal.componentInstance.message = $localize`This operation will assign the document type "${documentType.name}" to ${this.list.selected.size} selected document(s).`
      } else {
-        modal.componentInstance.message = $localize`This operation will remove the document type from all ${this.list.selected.size} selected document(s).`
+        modal.componentInstance.message = $localize`This operation will remove the document type from ${this.list.selected.size} selected document(s).`
      }
      modal.componentInstance.btnClass = "btn-warning"
      modal.componentInstance.btnCaption = $localize`Confirm`
@@ -217,7 +217,7 @@ export class BulkEditorComponent {
    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
    modal.componentInstance.delayConfirm(5)
    modal.componentInstance.title = $localize`Delete confirm`
-    modal.componentInstance.messageBold = $localize`This operation will permanently delete all ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete ${this.list.selected.size} selected document(s).`
    modal.componentInstance.message = $localize`This operation cannot be undone.`
    modal.componentInstance.btnClass = "btn-danger"
    modal.componentInstance.btnCaption = $localize`Delete document(s)`
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,7 +1,7 @@
-<div class="card mb-3 bg-light shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable">
+<div class="card mb-3 shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable">
  <div class="row no-gutters">
-    <div class="col-md-2 d-none d-lg-block doc-img-background" [class.doc-img-background-selected]="selected">
-      <img [src]="getThumbUrl()" class="card-img doc-img border-right" (click)="setSelected(selectable ? !selected : false)">
+    <div class="col-md-2 d-none d-lg-block doc-img-background rounded-left" [class.doc-img-background-selected]="selected">
+      <img [src]="getThumbUrl()" class="card-img doc-img border-right rounded-left" (click)="setSelected(selectable ? !selected : false)">

      <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected">
        <div class="custom-control custom-checkbox">
@@ -12,7 +12,7 @@

    </div>
    <div class="col">
-      <div class="card-body">
+      <div class="card-body bg-light">

        <div class="d-flex justify-content-between align-items-center">
          <h5 class="card-title">
@@ -55,16 +55,16 @@
                <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
              </svg>&nbsp;<ng-container i18n>Download</ng-container>
            </a>
-            
+
          </div>

          <small class="text-muted ml-auto" i18n>Score:</small>

          <ngb-progressbar *ngIf="searchScore" [type]="searchScoreClass" [value]="searchScore" class="search-score-bar mx-2" [max]="1"></ngb-progressbar>
-          
+
          <small class="text-muted" i18n>Created: {{document.created | date}}</small>
        </div>
-        
+
      </div>
    </div>
  </div>
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -30,10 +30,6 @@
  border-color: $primary;
 }

-.doc-img-background {
-  background-color: white;
-}
-
 .doc-img-background-selected {
  background-color: $primaryFaded;
-}
+}
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,7 +1,7 @@
 <div class="col p-2 h-100">
-  <div class="card h-100 shadow-sm" [class.card-selected]="selected">
-    <div class="border-bottom" [class.doc-img-background-selected]="selected">
-      <img class="card-img doc-img" [src]="getThumbUrl()" (click)="setSelected(!selected)">
+  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected">
+    <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected">
+      <img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="setSelected(!selected)">

      <div class="border-right border-bottom bg-light p-1 rounded document-card-check">
        <div class="custom-control custom-checkbox">
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -78,8 +78,8 @@
 </app-page-header>

 <div class="w-100 mb-2 mb-sm-4">
-  <app-filter-editor *ngIf="!isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
-  <app-bulk-editor *ngIf="isBulkEditing"></app-bulk-editor>
+  <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
+  <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
 </div>

 <div class="d-flex justify-content-between align-items-center">
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { FILTER_CORRESPONDENT } from 'src/app/data/filter-rule-type';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
@@ -16,7 +15,6 @@ import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog/co
 export class CorrespondentListComponent extends GenericListComponent<PaperlessCorrespondent> {

  constructor(correspondentsService: CorrespondentService, modalService: NgbModal,
-    private router: Router,
    private list: DocumentListViewService
  ) { 
    super(correspondentsService,modalService,CorrespondentEditDialogComponent)
@@ -27,9 +25,6 @@ export class CorrespondentListComponent extends GenericListComponent<PaperlessCo
  }

  filterDocuments(object: PaperlessCorrespondent) {
-    this.list.documentListView.filter_rules = [
-      {rule_type: FILTER_CORRESPONDENT, value: object.id.toString()}
-    ]
-    this.router.navigate(["documents"])
+    this.list.quickFilter([{rule_type: FILTER_CORRESPONDENT, value: object.id.toString()}])
  }
 }
--- a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
+++ b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { FILTER_DOCUMENT_TYPE } from 'src/app/data/filter-rule-type';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
@@ -16,7 +15,6 @@ import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog/doc
 export class DocumentTypeListComponent extends GenericListComponent<PaperlessDocumentType> {

  constructor(service: DocumentTypeService, modalService: NgbModal,
-    private router: Router,
    private list: DocumentListViewService
  ) {
    super(service, modalService, DocumentTypeEditDialogComponent)
@@ -28,9 +26,6 @@ export class DocumentTypeListComponent extends GenericListComponent<PaperlessDoc


  filterDocuments(object: PaperlessDocumentType) {
-    this.list.documentListView.filter_rules = [
-      {rule_type: FILTER_DOCUMENT_TYPE, value: object.id.toString()}
-    ]
-    this.router.navigate(["documents"])
+    this.list.quickFilter([{rule_type: FILTER_DOCUMENT_TYPE, value: object.id.toString()}])
  }
 }
--- a/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@ -10,30 +10,45 @@
      <a ngbNavLink i18n>General settings</a>
      <ng-template ngbNavContent>

-        <h4 i18n>Document list</h4>
-        
+        <h4 i18n>Appearance</h4>
+
        <div class="form-row form-group">
          <div class="col-md-3 col-form-label">
            <span i18n>Items per page</span>
          </div>
          <div class="col">
-        
+
            <select class="form-control" formControlName="documentListItemPerPage">
              <option [ngValue]="10">10</option>
              <option [ngValue]="25">25</option>
              <option [ngValue]="50">50</option>
              <option [ngValue]="100">100</option>
            </select>
-        
-          </div>

-  
+          </div>
        </div>

-        <h4 i18n>Bulk editing</h4>
+        <div class="form-row form-group">
+          <div class="col-md-3 col-form-label">
+            <span i18n>Dark mode</span>
+          </div>
+          <div class="col">
+            <app-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem" (change)="toggleDarkModeSetting()"></app-input-check>
+            <div class="custom-control custom-switch" *ngIf="!settingsForm.value.darkModeUseSystem">
+              <input type="checkbox" class="custom-control-input" id="darkModeEnabled" formControlName="darkModeEnabled" [checked]="settingsForm.value.darkModeEnabled">
+              <label class="custom-control-label" for="darkModeEnabled">Enabled</label>
+            </div>
+          </div>
+        </div>

-        <app-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></app-input-check>
-        <app-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></app-input-check>
+        <h4 class="mt-4" i18n>Bulk editing</h4>
+
+        <div class="form-row form-group">
+          <div class="offset-md-3 col">
+            <app-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></app-input-check>
+            <app-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></app-input-check>
+          </div>
+        </div>

      </ng-template>
    </li>
@@ -42,7 +57,7 @@
      <ng-template ngbNavContent>

        <div formGroupName="savedViews">
-          
+
            <div *ngFor="let view of savedViews" [formGroupName]="view.id" class="form-row">
              <div class="form-group col-4 mr-3">
                <label for="name_{{view.id}}" i18n>Name</label>
@@ -68,7 +83,7 @@
            </div>

            <div *ngIf="savedViews.length == 0" i18n>No saved views defined.</div>
-          
+
        </div>

      </ng-template>
@@ -78,4 +93,4 @@
  <div [ngbNavOutlet]="nav" class="border-left border-right border-bottom p-3 mb-3 shadow"></div>

  <button type="submit" class="btn btn-primary">Save</button>
-</form>
+</form>
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Renderer2  } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
 import { ToastService } from 'src/app/services/toast.service';
+import { AppViewService } from 'src/app/services/app-view.service';

@Component({
  selector: 'app-settings',
@@ -19,18 +20,21 @@ export class SettingsComponent implements OnInit {
    'bulkEditConfirmationDialogs': new FormControl(this.settings.get(SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS)),
    'bulkEditApplyOnClose': new FormControl(this.settings.get(SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE)),
    'documentListItemPerPage': new FormControl(this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)),
+    'darkModeUseSystem': new FormControl(this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)),
+    'darkModeEnabled': new FormControl(this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED)),
    'savedViews': this.savedViewGroup
  })

+  savedViews: PaperlessSavedView[]
+
  constructor(
    public savedViewService: SavedViewService,
    private documentListViewService: DocumentListViewService,
    private toastService: ToastService,
-    private settings: SettingsService
+    private settings: SettingsService,
+    private appViewService: AppViewService
  ) { }

-  savedViews: PaperlessSavedView[]
-
  ngOnInit() {
    this.savedViewService.listAll().subscribe(r => {
      this.savedViews = r.results
@@ -53,11 +57,22 @@ export class SettingsComponent implements OnInit {
    })
  }

+  toggleDarkModeSetting() {
+    if (this.settingsForm.value.darkModeUseSystem) {
+      (this.settingsForm.controls.darkModeEnabled as FormControl).disable()
+    } else {
+      (this.settingsForm.controls.darkModeEnabled as FormControl).enable()
+    }
+  }
+
  private saveLocalSettings() {
    this.settings.set(SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE, this.settingsForm.value.bulkEditApplyOnClose)
    this.settings.set(SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS, this.settingsForm.value.bulkEditConfirmationDialogs)
    this.settings.set(SETTINGS_KEYS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
+    this.settings.set(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, this.settingsForm.value.darkModeUseSystem)
+    this.settings.set(SETTINGS_KEYS.DARK_MODE_ENABLED, (this.settingsForm.value.darkModeEnabled == true).toString())
    this.documentListViewService.updatePageSize()
+    this.appViewService.updateDarkModeSettings()
    this.toastService.showInfo($localize`Settings saved successfully.`)
  }

--- a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
+++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { FILTER_HAS_TAG } from 'src/app/data/filter-rule-type';
 import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
@@ -16,7 +15,6 @@ import { TagEditDialogComponent } from './tag-edit-dialog/tag-edit-dialog.compon
 export class TagListComponent extends GenericListComponent<PaperlessTag> {

  constructor(tagService: TagService, modalService: NgbModal,
-    private router: Router,
    private list: DocumentListViewService
  ) {
    super(tagService, modalService, TagEditDialogComponent)
@@ -27,14 +25,11 @@ export class TagListComponent extends GenericListComponent<PaperlessTag> {
  }

  getDeleteMessage(object: PaperlessTag) {
-    
    return $localize`Do you really want to delete the tag "${object.name}"?`
  }

  filterDocuments(object: PaperlessTag) {
-    this.list.documentListView.filter_rules = [
-      {rule_type: FILTER_HAS_TAG, value: object.id.toString()}
-    ]
-    this.router.navigate(["documents"])
+    this.list.quickFilter([{rule_type: FILTER_HAS_TAG, value: object.id.toString()}])
+
  }
 }