Merge branch 'dev' into feature-created-date

2025-07-28 18:24:38 -05:00 · 2022-05-26 14:28:33 -07:00
parent 88b7f8ac1e a4927477fb
commit 9eee37bc68
118 changed files with 5276 additions and 3044 deletions
--- a/src-ui/src/app/app-routing.module.ts
+++ b/src-ui/src/app/app-routing.module.ts
@@ -12,6 +12,7 @@ import { TagListComponent } from './components/manage/tag-list/tag-list.componen
 import { NotFoundComponent } from './components/not-found/not-found.component'
 import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
 import { DirtyFormGuard } from './guards/dirty-form.guard'
+import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'

 const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
@@ -27,6 +28,7 @@ const routes: Routes = [
      { path: 'tags', component: TagListComponent },
      { path: 'documenttypes', component: DocumentTypeListComponent },
      { path: 'correspondents', component: CorrespondentListComponent },
+      { path: 'storagepaths', component: StoragePathListComponent },
      { path: 'logs', component: LogsComponent },
      {
        path: 'settings',
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -1,4 +1,5 @@
-import { SettingsService, SETTINGS_KEYS } from './services/settings.service'
+import { SettingsService } from './services/settings.service'
+import { SETTINGS_KEYS } from './data/paperless-uisettings'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { Subscription } from 'rxjs'
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser'
-import { NgModule } from '@angular/core'
+import { APP_INITIALIZER, NgModule } from '@angular/core'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import {
@@ -87,6 +87,9 @@ import localeSr from '@angular/common/locales/sr'
 import localeSv from '@angular/common/locales/sv'
 import localeTr from '@angular/common/locales/tr'
 import localeZh from '@angular/common/locales/zh'
+import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
+import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
+import { SettingsService } from './services/settings.service'

 registerLocaleData(localeBe)
 registerLocaleData(localeCs)
@@ -109,6 +112,12 @@ registerLocaleData(localeSv)
 registerLocaleData(localeTr)
 registerLocaleData(localeZh)

+function initializeApp(settings: SettingsService) {
+  return () => {
+    return settings.initializeSettings()
+  }
+}
+
@NgModule({
  declarations: [
    AppComponent,
@@ -118,6 +127,7 @@ registerLocaleData(localeZh)
    TagListComponent,
    DocumentTypeListComponent,
    CorrespondentListComponent,
+    StoragePathListComponent,
    LogsComponent,
    SettingsComponent,
    NotFoundComponent,
@@ -125,6 +135,7 @@ registerLocaleData(localeZh)
    ConfirmDialogComponent,
    TagEditDialogComponent,
    DocumentTypeEditDialogComponent,
+    StoragePathEditDialogComponent,
    TagComponent,
    PageHeaderComponent,
    AppFrameComponent,
@@ -174,6 +185,12 @@ registerLocaleData(localeZh)
    ColorSliderModule,
  ],
  providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeApp,
+      deps: [SettingsService],
+      multi: true,
+    },
    DatePipe,
    CookieService,
    {
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -21,17 +21,17 @@
  </div>
  <ul ngbNav class="order-sm-3">
    <li ngbDropdown class="nav-item dropdown">
-      <button class="btn text-light" id="userDropdown" ngbDropdownToggle>
-        <span *ngIf="displayName" class="navbar-text small me-2 text-light d-none d-sm-inline">
-          {{displayName}}
+      <button class="btn" id="userDropdown" ngbDropdownToggle>
+        <span class="small me-2 d-none d-sm-inline">
+          {{this.settingsService.displayName}}
        </span>
        <svg width="1.3em" height="1.3em" fill="currentColor">
          <use xlink:href="assets/bootstrap-icons.svg#person-circle"/>
        </svg>
      </button>
      <div ngbDropdownMenu class="dropdown-menu-end shadow me-2" aria-labelledby="userDropdown">
-        <div *ngIf="displayName" class="d-sm-none">
-          <p class="small mb-0 px-3 text-muted" i18n>Logged in as {{displayName}}</p>
+        <div class="d-sm-none">
+          <p class="small mb-0 px-3 text-muted" i18n>Logged in as {{this.settingsService.displayName}}</p>
          <div class="dropdown-divider"></div>
        </div>
        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()">
@@ -134,6 +134,13 @@
              </svg>&nbsp;<ng-container i18n>Document types</ng-container>
            </a>
          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#folder"/>
+              </svg>&nbsp;<ng-container i18n>Storage paths</ng-container>
+            </a>
+          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()">
              <svg class="sidebaricon" fill="currentColor">
--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -22,7 +22,7 @@ import {
  RemoteVersionService,
  AppRemoteVersion,
 } from 'src/app/services/rest/remote-version.service'
-import { QueryParamsService } from 'src/app/services/query-params.service'
+import { SettingsService } from 'src/app/services/settings.service'

@Component({
  selector: 'app-app-frame',
@@ -36,10 +36,9 @@ export class AppFrameComponent {
    private openDocumentsService: OpenDocumentsService,
    private searchService: SearchService,
    public savedViewService: SavedViewService,
-    private list: DocumentListViewService,
-    private meta: Meta,
    private remoteVersionService: RemoteVersionService,
-    private queryParamsService: QueryParamsService
+    private list: DocumentListViewService,
+    public settingsService: SettingsService
  ) {
    this.remoteVersionService
      .checkForUpdates()
@@ -94,7 +93,7 @@ export class AppFrameComponent {

  search() {
    this.closeMenu()
-    this.queryParamsService.navigateWithFilterRules([
+    this.list.quickFilter([
      {
        rule_type: FILTER_FULLTEXT_QUERY,
        value: (this.searchField.value as string).trim(),
@@ -143,17 +142,4 @@ export class AppFrameComponent {
        }
      })
  }
-
-  get displayName() {
-    // TODO: taken from dashboard component, is this the best way to pass around username?
-    let tagFullName = this.meta.getTag('name=full_name')
-    let tagUsername = this.meta.getTag('name=username')
-    if (tagFullName && tagFullName.content) {
-      return tagFullName.content
-    } else if (tagUsername && tagUsername.content) {
-      return tagUsername.content
-    } else {
-      return null
-    }
-  }
 }
--- a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
+++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
@@ -5,7 +5,7 @@
    </div>
    <div class="modal-body">
      <p *ngIf="messageBold"><b>{{messageBold}}</b></p>
-      <p *ngIf="message">{{message}}</p>
+      <p class="mb-0" *ngIf="message" [innerHTML]="message | safeHtml"></p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>
--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
@@ -0,0 +1,24 @@
+<form [formGroup]="objectForm" (ngSubmit)="save()">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+
+    <p *ngIf="this.dialogMode == 'edit'" i18n>
+      <em>Note that editing a path does not apply changes to stored files until you have run the 'document_renamer' utility. See the <a target="_blank" href="https://paperless-ngx.readthedocs.io/en/latest/administration.html#utilities-renamer">documentation</a>.</em>
+    </p>
+
+    <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
+    <app-input-text i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint"></app-input-text>
+    <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
+    <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
+    <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
+
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>
--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.scss
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.scss
--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core'
+import { FormControl, FormGroup } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
+import { StoragePathService } from 'src/app/services/rest/storage-path.service'
+import { ToastService } from 'src/app/services/toast.service'
+
+@Component({
+  selector: 'app-storage-path-edit-dialog',
+  templateUrl: './storage-path-edit-dialog.component.html',
+  styleUrls: ['./storage-path-edit-dialog.component.scss'],
+})
+export class StoragePathEditDialogComponent extends EditDialogComponent<PaperlessStoragePath> {
+  constructor(
+    service: StoragePathService,
+    activeModal: NgbActiveModal,
+    toastService: ToastService
+  ) {
+    super(service, activeModal, toastService)
+  }
+
+  get pathHint() {
+    return (
+      $localize`e.g.` +
+      ' <code>{created_year}-{title}</code> ' +
+      $localize`or use slashes to add directories e.g.` +
+      ' <code>{created_year}/{correspondent}/{title}</code>. ' +
+      $localize`See <a target="_blank" href="https://paperless-ngx.readthedocs.io/en/latest/advanced_usage.html#file-name-handling">documentation</a> for full list.`
+    )
+  }
+
+  getCreateTitle() {
+    return $localize`Create new storage path`
+  }
+
+  getEditTitle() {
+    return $localize`Edit storage path`
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(''),
+      path: new FormControl(''),
+      matching_algorithm: new FormControl(1),
+      match: new FormControl(''),
+      is_insensitive: new FormControl(true),
+    })
+  }
+}
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -2,7 +2,7 @@
  <label class="form-label" [for]="inputId">{{title}}</label>
  <div class="input-group" [class.is-invalid]="error">
    <input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
-          (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)"
+          (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
          name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
    <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@@ -1,6 +1,8 @@
 import { Component, forwardRef, OnInit } from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'
 import { SettingsService } from 'src/app/services/settings.service'
+import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter'
 import { AbstractInputComponent } from '../abstract-input'

@Component({
@@ -19,7 +21,10 @@ export class DateComponent
  extends AbstractInputComponent<string>
  implements OnInit
 {
-  constructor(private settings: SettingsService) {
+  constructor(
+    private settings: SettingsService,
+    private ngbDateParserFormatter: NgbDateParserFormatter
+  ) {
    super()
  }

@@ -30,7 +35,20 @@ export class DateComponent

  placeholder: string

-  // prevent chars other than numbers and separators
+  onPaste(event: ClipboardEvent) {
+    const clipboardData: DataTransfer =
+      event.clipboardData || window['clipboardData']
+    if (clipboardData) {
+      event.preventDefault()
+      let pastedText = clipboardData.getData('text')
+      pastedText = pastedText.replace(/[\sa-z#!$%\^&\*;:{}=\-_`~()]+/g, '')
+      const parsedDate = this.ngbDateParserFormatter.parse(pastedText)
+      const formattedDate = this.ngbDateParserFormatter.format(parsedDate)
+      this.writeValue(formattedDate)
+      this.onChange(formattedDate)
+    }
+  }
+
  onKeyPress(event: KeyboardEvent) {
    if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {
      event.preventDefault()
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -9,7 +9,8 @@
        [items]="items"
        [addTag]="allowCreateNew && addItemRef"
        addTagText="Add item"
-        i18n-addTagText="Used for both types and correspondents"
+        i18n-addTagText="Used for both types, correspondents, storage paths"
+        [placeholder]="placeholder"
        bindLabel="name"
        bindValue="id"
        (change)="onChange(value)"
--- a/src-ui/src/app/components/common/input/select/select.component.ts
+++ b/src-ui/src/app/components/common/input/select/select.component.ts
@@ -41,6 +41,9 @@ export class SelectComponent extends AbstractInputComponent<number> {
  @Input()
  suggestions: number[]

+  @Input()
+  placeholder: string
+
  @Output()
  createNew = new EventEmitter<string>()

--- a/src-ui/src/app/components/common/input/text/text.component.html
+++ b/src-ui/src/app/components/common/input/text/text.component.html
@@ -1,7 +1,7 @@
 <div class="mb-3">
  <label class="form-label" [for]="inputId">{{title}}</label>
  <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)">
-  <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
  <div class="invalid-feedback">
    {{error}}
  </div>
--- a/src-ui/src/app/components/common/tag/tag.component.scss
+++ b/src-ui/src/app/components/common/tag/tag.component.scss
@@ -1,3 +1,6 @@
 a {
    cursor: pointer;
+    white-space: normal;
+    word-break: break-word;
+    text-align: end;
 }
--- a/src-ui/src/app/components/common/toasts/toasts.component.html
+++ b/src-ui/src/app/components/common/toasts/toasts.component.html
@@ -4,5 +4,5 @@
  [class]="toast.classname"
  (hidden)="toastService.closeToast(toast)">
  <p>{{toast.content}}</p>
-  <p *ngIf="toast.action"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
+  <p class="mb-0" *ngIf="toast.action"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
 </ngb-toast>
--- a/src-ui/src/app/components/common/toasts/toasts.component.scss
+++ b/src-ui/src/app/components/common/toasts/toasts.component.scss
@@ -8,4 +8,4 @@

 .toast:not(.show) {
  display: block; // this corrects an ng-bootstrap bug that prevented animations
-}
+}
--- a/src-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/src-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { SettingsService } from 'src/app/services/settings.service'

@Component({
  selector: 'app-dashboard',
@@ -8,23 +9,14 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'
  styleUrls: ['./dashboard.component.scss'],
 })
 export class DashboardComponent {
-  constructor(public savedViewService: SavedViewService, private meta: Meta) {}
-
-  get displayName() {
-    let tagFullName = this.meta.getTag('name=full_name')
-    let tagUsername = this.meta.getTag('name=username')
-    if (tagFullName && tagFullName.content) {
-      return tagFullName.content
-    } else if (tagUsername && tagUsername.content) {
-      return tagUsername.content
-    } else {
-      return null
-    }
-  }
+  constructor(
+    public savedViewService: SavedViewService,
+    public settingsService: SettingsService
+  ) {}

  get subtitle() {
-    if (this.displayName) {
-      return $localize`Hello ${this.displayName}, welcome to Paperless-ngx!`
+    if (this.settingsService.displayName) {
+      return $localize`Hello ${this.settingsService.displayName}, welcome to Paperless-ngx!`
    } else {
      return $localize`Welcome to Paperless-ngx!`
    }
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
@@ -7,8 +7,8 @@ import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { PaperlessTag } from 'src/app/data/paperless-tag'
 import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
-import { QueryParamsService } from 'src/app/services/query-params.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'

@Component({
  selector: 'app-saved-view-widget',
@@ -21,7 +21,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
  constructor(
    private documentService: DocumentService,
    private router: Router,
-    private queryParamsService: QueryParamsService,
+    private list: DocumentListViewService,
    private consumerStatusService: ConsumerStatusService,
    public openDocumentsService: OpenDocumentsService
  ) {}
@@ -47,7 +47,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
  }

  reload() {
-    this.loading = true
+    this.loading = this.documents.length == 0
    this.documentService
      .listFiltered(
        1,
@@ -73,7 +73,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
  }

  clickTag(tag: PaperlessTag) {
-    this.queryParamsService.navigateWithFilterRules([
+    this.list.quickFilter([
      { rule_type: FILTER_HAS_TAGS_ALL, value: tag.id.toString() },
    ])
  }
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -73,6 +73,8 @@
                            (createNew)="createCorrespondent($event)" [suggestions]="suggestions?.correspondents"></app-input-select>
                        <app-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true"
                            (createNew)="createDocumentType($event)" [suggestions]="suggestions?.document_types"></app-input-select>
+                        <app-input-select [items]="storagePaths" i18n-title title="Storage path" formControlName="storage_path" [allowNull]="true"
+                            (createNew)="createStoragePath($event)" [suggestions]="suggestions?.storage_paths" i18n-placeholder placeholder="Default"></app-input-select>
                        <app-input-tags formControlName="tags" [suggestions]="suggestions?.tags"></app-input-tags>

                    </ng-template>
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -18,10 +18,7 @@ import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-
 import { PDFDocumentProxy } from 'ng2-pdf-viewer'
 import { ToastService } from 'src/app/services/toast.service'
 import { TextComponent } from '../common/input/text/text.component'
-import {
-  SettingsService,
-  SETTINGS_KEYS,
-} from 'src/app/services/settings.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms'
 import { Observable, Subject, BehaviorSubject } from 'rxjs'
 import {
@@ -34,7 +31,11 @@ import {
 } from 'rxjs/operators'
 import { PaperlessDocumentSuggestions } from 'src/app/data/paperless-document-suggestions'
 import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'
-import { QueryParamsService } from 'src/app/services/query-params.service'
+import { normalizeDateStr } from 'src/app/utils/date'
+import { StoragePathService } from 'src/app/services/rest/storage-path.service'
+import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
+import { StoragePathEditDialogComponent } from '../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'

@Component({
  selector: 'app-document-detail',
@@ -67,6 +68,7 @@ export class DocumentDetailComponent

  correspondents: PaperlessCorrespondent[]
  documentTypes: PaperlessDocumentType[]
+  storagePaths: PaperlessStoragePath[]

  documentForm: FormGroup = new FormGroup({
    title: new FormControl(''),
@@ -74,6 +76,7 @@ export class DocumentDetailComponent
    created_date: new FormControl(),
    correspondent: new FormControl(),
    document_type: new FormControl(),
+    storage_path: new FormControl(),
    archive_serial_number: new FormControl(),
    tags: new FormControl([]),
  })
@@ -116,7 +119,7 @@ export class DocumentDetailComponent
    private documentTitlePipe: DocumentTitlePipe,
    private toastService: ToastService,
    private settings: SettingsService,
-    private queryParamsService: QueryParamsService
+    private storagePathService: StoragePathService
  ) {}

  titleKeyUp(event) {
@@ -145,11 +148,17 @@ export class DocumentDetailComponent
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.correspondents = result.results))
+
    this.documentTypeService
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.documentTypes = result.results))

+    this.storagePathService
+      .listAll()
+      .pipe(first())
+      .subscribe((result) => (this.storagePaths = result.results))
+
    this.route.paramMap
      .pipe(
        takeUntil(this.unsubscribeNotifier),
@@ -210,6 +219,7 @@ export class DocumentDetailComponent
            created_date: doc.created_date,
            correspondent: doc.correspondent,
            document_type: doc.document_type,
+            storage_path: doc.storage_path,
            archive_serial_number: doc.archive_serial_number,
            tags: [...doc.tags],
          })
@@ -310,6 +320,27 @@ export class DocumentDetailComponent
      })
  }

+  createStoragePath(newName: string) {
+    var modal = this.modalService.open(StoragePathEditDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.dialogMode = 'create'
+    if (newName) modal.componentInstance.object = { name: newName }
+    modal.componentInstance.success
+      .pipe(
+        switchMap((newStoragePath) => {
+          return this.storagePathService
+            .listAll()
+            .pipe(map((storagePaths) => ({ newStoragePath, storagePaths })))
+        })
+      )
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(({ newStoragePath, documentTypes: storagePaths }) => {
+        this.storagePaths = storagePaths.results
+        this.documentForm.get('storage_path').setValue(newStoragePath.id)
+      })
+  }
+
  discard() {
    this.documentsService
      .get(this.documentId)
@@ -434,7 +465,7 @@ export class DocumentDetailComponent
  }

  moreLike() {
-    this.queryParamsService.navigateWithFilterRules([
+    this.documentListViewService.quickFilter([
      {
        rule_type: FILTER_FULLTEXT_MORELIKE,
        value: this.documentId.toString(),
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -53,6 +53,15 @@
        [(selectionModel)]="documentTypeSelectionModel"
        (apply)="setDocumentTypes($event)">
      </app-filterable-dropdown>
+      <app-filterable-dropdown class="me-2 me-md-3" title="Storage path" icon="folder-fill" i18n-title
+        filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
+        [items]="storagePaths"
+        [editing]="true"
+        [applyOnClose]="applyOnClose"
+        (open)="openStoragePathDropdown()"
+        [(selectionModel)]="storagePathsSelectionModel"
+        (apply)="setStoragePaths($event)">
+      </app-filterable-dropdown>
    </div>
  </div>
  <div class="col-auto ms-auto mb-2 mb-xl-0 d-flex">
--- 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
@@ -19,12 +19,12 @@ import {
 } from '../../common/filterable-dropdown/filterable-dropdown.component'
 import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'
 import { MatchingModel } from 'src/app/data/matching-model'
-import {
-  SettingsService,
-  SETTINGS_KEYS,
-} from 'src/app/services/settings.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { saveAs } from 'file-saver'
+import { StoragePathService } from 'src/app/services/rest/storage-path.service'
+import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'

@Component({
  selector: 'app-bulk-editor',
@@ -35,10 +35,12 @@ export class BulkEditorComponent {
  tags: PaperlessTag[]
  correspondents: PaperlessCorrespondent[]
  documentTypes: PaperlessDocumentType[]
+  storagePaths: PaperlessStoragePath[]

  tagSelectionModel = new FilterableDropdownSelectionModel()
  correspondentSelectionModel = new FilterableDropdownSelectionModel()
  documentTypeSelectionModel = new FilterableDropdownSelectionModel()
+  storagePathsSelectionModel = new FilterableDropdownSelectionModel()
  awaitingDownload: boolean

  constructor(
@@ -50,7 +52,8 @@ export class BulkEditorComponent {
    private modalService: NgbModal,
    private openDocumentService: OpenDocumentsService,
    private settings: SettingsService,
-    private toastService: ToastService
+    private toastService: ToastService,
+    private storagePathService: StoragePathService
  ) {}

  applyOnClose: boolean = this.settings.get(
@@ -70,6 +73,9 @@ export class BulkEditorComponent {
    this.documentTypeService
      .listAll()
      .subscribe((result) => (this.documentTypes = result.results))
+    this.storagePathService
+      .listAll()
+      .subscribe((result) => (this.storagePaths = result.results))
  }

  private executeBulkOperation(modal, method: string, args) {
@@ -147,6 +153,17 @@ export class BulkEditorComponent {
      })
  }

+  openStoragePathDropdown() {
+    this.documentService
+      .getSelectionData(Array.from(this.list.selected))
+      .subscribe((s) => {
+        this.applySelectionData(
+          s.selected_storage_paths,
+          this.storagePathsSelectionModel
+        )
+      })
+  }
+
  private _localizeList(items: MatchingModel[]) {
    if (items.length == 0) {
      return ''
@@ -301,6 +318,42 @@ export class BulkEditorComponent {
    }
  }

+  setStoragePaths(changedDocumentPaths: ChangedItems) {
+    if (
+      changedDocumentPaths.itemsToAdd.length == 0 &&
+      changedDocumentPaths.itemsToRemove.length == 0
+    )
+      return
+
+    let storagePath =
+      changedDocumentPaths.itemsToAdd.length > 0
+        ? changedDocumentPaths.itemsToAdd[0]
+        : null
+
+    if (this.showConfirmationDialogs) {
+      let modal = this.modalService.open(ConfirmDialogComponent, {
+        backdrop: 'static',
+      })
+      modal.componentInstance.title = $localize`Confirm storage path assignment`
+      if (storagePath) {
+        modal.componentInstance.message = $localize`This operation will assign the storage path "${storagePath.name}" to ${this.list.selected.size} selected document(s).`
+      } else {
+        modal.componentInstance.message = $localize`This operation will remove the storage path from ${this.list.selected.size} selected document(s).`
+      }
+      modal.componentInstance.btnClass = 'btn-warning'
+      modal.componentInstance.btnCaption = $localize`Confirm`
+      modal.componentInstance.confirmClicked.subscribe(() => {
+        this.executeBulkOperation(modal, 'set_storage_path', {
+          storage_path: storagePath ? storagePath.id : null,
+        })
+      })
+    } else {
+      this.executeBulkOperation(null, 'set_storage_path', {
+        storage_path: storagePath ? storagePath.id : null,
+      })
+    }
+  }
+
  applyDelete() {
    let modal = this.modalService.open(ConfirmDialogComponent, {
      backdrop: 'static',
--- 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
@@ -60,27 +60,40 @@
          </div>

          <div class="list-group list-group-horizontal border-0 card-info ms-md-auto mt-2 mt-md-0">
-            <button *ngIf="document.document_type" type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="Filter by document type"
+            <button *ngIf="document.document_type" type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="Filter by document type" i18n-title
             (click)="clickDocumentType.emit(document.document_type);$event.stopPropagation()">
              <svg class="metadata-icon me-2 text-muted bi bi-file-earmark" viewBox="0 0 16 16" fill="currentColor">
                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
              </svg>
              <small>{{(document.document_type$ | async)?.name}}</small>
            </button>
+            <button *ngIf="document.storage_path" type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2" title="Filter by storage path" i18n-title
+             (click)="clickStoragePath.emit(document.storage_path);$event.stopPropagation()">
+              <svg class="metadata-icon me-2 text-muted bi bi-folder" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
+              </svg>
+              <small>{{(document.storage_path$ | async)?.name}}</small>
+            </button>
            <div *ngIf="document.archive_serial_number" class="list-group-item me-2 bg-light text-dark p-1 border-0">
              <svg class="metadata-icon me-2 text-muted bi bi-upc-scan" viewBox="0 0 16 16" fill="currentColor">
                <path d="M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1h-3zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5zM.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5zM3 4.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-7zm3 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7z"/>
              </svg>
              <small>#{{document.archive_serial_number}}</small>
            </div>
-            <div class="list-group-item bg-light text-dark p-1 border-0" ngbTooltip="Added:&nbsp;{{document.added | customDate:'shortDate'}} Created:&nbsp;{{document.created | customDate:'shortDate'}}">
+            <ng-template #dateTooltip>
+              <div class="d-flex flex-column">
+                <span i18n>Created: {{ document.created | customDate }}</span>
+                <span i18n>Added: {{ document.added | customDate }}</span>
+                <span i18n>Modified: {{ document.modified | customDate }}</span>
+              </div>
+            </ng-template>
+            <div class="list-group-item bg-light text-dark p-1 border-0" [ngbTooltip]="dateTooltip">
              <svg class="metadata-icon me-2 text-muted bi bi-calendar-event" viewBox="0 0 16 16" fill="currentColor">
                <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
              </svg>
              <small>{{document.created_date | customDate:'mediumDate'}}</small>
            </div>
-
            <div *ngIf="document.__search_hit__?.score" class="list-group-item bg-light text-dark border-0 d-flex p-0 ps-4 search-score">
              <small class="text-muted" i18n>Score:</small>
              <ngb-progressbar [type]="searchScoreClass" [value]="document.__search_hit__.score" class="search-score-bar mx-2 mt-1" [max]="1"></ngb-progressbar>
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
@@ -8,12 +8,12 @@ import {
 } from '@angular/core'
 import { PaperlessDocument } from 'src/app/data/paperless-document'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import {
-  SettingsService,
-  SETTINGS_KEYS,
-} from 'src/app/services/settings.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'

@Component({
  selector: 'app-document-card-large',
@@ -52,6 +52,9 @@ export class DocumentCardLargeComponent implements OnInit {
  @Output()
  clickDocumentType = new EventEmitter<number>()

+  @Output()
+  clickStoragePath = new EventEmitter<number>()
+
  @Output()
  clickMoreLike = new EventEmitter()

--- 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
@@ -10,10 +10,8 @@
        </div>
      </div>

-      <div style="top: 0; right: 0; font-size: large" class="text-end position-absolute me-1">
-        <div *ngFor="let t of getTagsLimited$() | async">
-          <app-tag [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Filter by tag" i18n-linkTitle></app-tag>
-        </div>
+      <div class="tags d-flex flex-column text-end position-absolute me-1 fs-6">
+        <app-tag *ngFor="let t of getTagsLimited$() | async" [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Filter by tag" i18n-linkTitle></app-tag>
        <div *ngIf="moreTags">
          <span class="badge badge-secondary">+ {{moreTags}}</span>
        </div>
@@ -30,22 +28,28 @@
    </div>
    <div class="card-footer pt-0 pb-2 px-2">
      <div class="list-group list-group-flush border-0 pt-1 pb-2 card-info">
-        <button *ngIf="document.document_type" type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Filter by document type"
+        <button *ngIf="document.document_type" type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Filter by document type" i18n-title
         (click)="clickDocumentType.emit(document.document_type);$event.stopPropagation()">
          <svg class="metadata-icon me-2 text-muted bi bi-file-earmark" viewBox="0 0 16 16" fill="currentColor">
            <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
          </svg>
          <small>{{(document.document_type$ | async)?.name}}</small>
        </button>
+        <button *ngIf="document.storage_path" type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Filter by storage path" i18n-title
+         (click)="clickStoragePath.emit(document.storage_path);$event.stopPropagation()">
+          <svg class="metadata-icon me-2 text-muted bi bi-folder" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
+          </svg>
+          <small>{{(document.storage_path$ | async)?.name}}</small>
+        </button>
        <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
          <ng-template #dateTooltip>
            <div class="d-flex flex-column">
-              <span i18n>Created: {{ document.created | customDate}}</span>
-              <span i18n>Added: {{ document.added | customDate}}</span>
-              <span i18n>Modified: {{ document.modified | customDate}}</span>
+              <span i18n>Created: {{ document.created | customDate }}</span>
+              <span i18n>Added: {{ document.added | customDate }}</span>
+              <span i18n>Modified: {{ document.modified | customDate }}</span>
            </div>
          </ng-template>
-
          <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
            <svg class="metadata-icon me-2 text-muted bi bi-calendar-event" viewBox="0 0 16 16" fill="currentColor">
              <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
@@ -79,7 +83,7 @@
          <ng-template #previewContent>
            <object [data]="previewUrl | safeUrl" class="preview" width="100%"></object>
          </ng-template>
-          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" (click)="$event.stopPropagation()" i18n-title>
+          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title (click)="$event.stopPropagation()">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
              <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"/>
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -78,3 +78,11 @@
 a {
  cursor: pointer;
 }
+
+.tags {
+  top: 0;
+  right: 0;
+  max-width: 80%;
+  row-gap: .2rem;
+  line-height: 1;
+}
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
@@ -9,12 +9,10 @@ import {
 import { map } from 'rxjs/operators'
 import { PaperlessDocument } from 'src/app/data/paperless-document'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import {
-  SettingsService,
-  SETTINGS_KEYS,
-} from 'src/app/services/settings.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'

@Component({
  selector: 'app-document-card-small',
@@ -49,6 +47,9 @@ export class DocumentCardSmallComponent implements OnInit {
  @Output()
  clickDocumentType = new EventEmitter<number>()

+  @Output()
+  clickStoragePath = new EventEmitter<number>()
+
  moreTags: number = null

  @ViewChild('popover') popover: NgbPopover
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -93,7 +93,7 @@
        <span i18n *ngIf="list.selected.size == 0">{list.collectionSize, plural, =1 {One document} other {{{list.collectionSize || 0}} documents}}</span>&nbsp;<span i18n *ngIf="isFiltered">(filtered)</span>
      </ng-container>
    </p>
-    <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
+    <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" (pageChange)="setPage($event)" [page]="list.currentPage" [maxSize]="5"
    [rotate]="true" aria-label="Default pagination"></ngb-pagination>
  </div>
 </ng-template>
@@ -107,7 +107,7 @@
 <ng-template #documentListNoError>

  <div *ngIf="displayMode == 'largeCards'">
-    <app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)" (clickMoreLike)="clickMoreLike(d.id)">
+    <app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)" (clickStoragePath)="clickStoragePath($event)" (clickMoreLike)="clickMoreLike(d.id)">
    </app-document-card-large>
  </div>

@@ -138,6 +138,12 @@
        [currentSortReverse]="list.sortReverse"
        (sort)="onSort($event)"
        i18n>Document type</th>
+      <th class="d-none d-xl-table-cell"
+        sortable="storage_path__name"
+        [currentSortField]="list.sortField"
+        [currentSortReverse]="list.sortReverse"
+        (sort)="onSort($event)"
+        i18n>Storage path</th>
      <th
        sortable="created"
        [currentSortField]="list.sortField"
@@ -164,16 +170,21 @@
        </td>
        <td class="d-none d-md-table-cell">
          <ng-container *ngIf="d.correspondent">
-            <a (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent">{{(d.correspondent$ | async)?.name}}</a>
+            <a (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent" i18n-title>{{(d.correspondent$ | async)?.name}}</a>
          </ng-container>
        </td>
        <td>
-          <a (click)="openDocumentsService.openDocument(d)" title="Edit document" style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
-          <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ms-1" clickable="true" linkTitle="Filter by tag" (click)="clickTag(t.id);$event.stopPropagation()"></app-tag>
+          <a (click)="openDocumentsService.openDocument(d)" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
+          <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ms-1" clickable="true" linkTitle="Filter by tag" i18n-linkTitle (click)="clickTag(t.id);$event.stopPropagation()"></app-tag>
        </td>
        <td class="d-none d-xl-table-cell">
          <ng-container *ngIf="d.document_type">
-            <a (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type">{{(d.document_type$ | async)?.name}}</a>
+            <a (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type" i18n-title>{{(d.document_type$ | async)?.name}}</a>
+          </ng-container>
+        </td>
+        <td class="d-none d-xl-table-cell">
+          <ng-container *ngIf="d.storage_path">
+            <a (click)="clickStoragePath(d.storage_path);$event.stopPropagation()" title="Filter by storage path" i18n-title>{{(d.storage_path$ | async)?.name}}</a>
          </ng-container>
        </td>
        <td>
@@ -187,7 +198,7 @@
  </table>

  <div class="row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
-    <app-document-card-small class="p-0" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)"></app-document-card-small>
+    <app-document-card-small class="p-0" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickStoragePath)="clickStoragePath($event)" (clickDocumentType)="clickDocumentType($event)"></app-document-card-small>
  </div>
  <div *ngIf="list.documents?.length > 15" class="mt-3">
    <ng-container *ngTemplateOutlet="pagination"></ng-container>
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -1,5 +1,4 @@
 import {
-  AfterViewInit,
  Component,
  OnDestroy,
  OnInit,
@@ -21,7 +20,6 @@ import {
 import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
-import { QueryParamsService } from 'src/app/services/query-params.service'
 import {
  DOCUMENT_SORT_FIELDS,
  DOCUMENT_SORT_FIELDS_FULLTEXT,
@@ -36,7 +34,7 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi
  templateUrl: './document-list.component.html',
  styleUrls: ['./document-list.component.scss'],
 })
-export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
+export class DocumentListComponent implements OnInit, OnDestroy {
  constructor(
    public list: DocumentListViewService,
    public savedViewService: SavedViewService,
@@ -45,7 +43,6 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
    private toastService: ToastService,
    private modalService: NgbModal,
    private consumerStatusService: ConsumerStatusService,
-    private queryParamsService: QueryParamsService,
    public openDocumentsService: OpenDocumentsService
  ) {}

@@ -76,8 +73,6 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {

  set listSort(reverse: boolean) {
    this.list.sortReverse = reverse
-    this.queryParamsService.sortField = this.list.sortField
-    this.queryParamsService.sortReverse = reverse
  }

  get listSort(): boolean {
@@ -86,14 +81,14 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {

  setSortField(field: string) {
    this.list.sortField = field
-    this.queryParamsService.sortField = field
-    this.queryParamsService.sortReverse = this.listSort
  }

  onSort(event: SortEvent) {
    this.list.setSort(event.column, event.reverse)
-    this.queryParamsService.sortField = event.column
-    this.queryParamsService.sortReverse = event.reverse
+  }
+
+  setPage(page: number) {
+    this.list.currentPage = page
  }

  get isBulkEditing(): boolean {
@@ -133,7 +128,6 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
        }
        this.list.activateSavedView(view)
        this.list.reload()
-        this.queryParamsService.updateFromView(view)
        this.unmodifiedFilterRules = view.filter_rules
      })

@@ -148,22 +142,12 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
          this.loadViewConfig(parseInt(queryParams.get('view')))
        } else {
          this.list.activateSavedView(null)
-          this.queryParamsService.parseQueryParams(queryParams)
+          this.list.loadFromQueryParams(queryParams)
          this.unmodifiedFilterRules = []
        }
      })
  }

-  ngAfterViewInit(): void {
-    this.filterEditor.filterRulesChange
-      .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe({
-        next: (filterRules) => {
-          this.queryParamsService.updateFilterRules(filterRules)
-        },
-      })
-  }
-
  ngOnDestroy() {
    // unsubscribes all
    this.unsubscribeNotifier.next(this)
@@ -175,9 +159,8 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
      .getCached(viewId)
      .pipe(first())
      .subscribe((view) => {
-        this.list.loadSavedView(view)
+        this.list.activateSavedView(view)
        this.list.reload()
-        this.queryParamsService.updateFromView(view)
      })
  }

@@ -246,27 +229,26 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {

  clickTag(tagID: number) {
    this.list.selectNone()
-    setTimeout(() => {
-      this.filterEditor.addTag(tagID)
-    })
+    this.filterEditor.addTag(tagID)
  }

  clickCorrespondent(correspondentID: number) {
    this.list.selectNone()
-    setTimeout(() => {
-      this.filterEditor.addCorrespondent(correspondentID)
-    })
+    this.filterEditor.addCorrespondent(correspondentID)
  }

  clickDocumentType(documentTypeID: number) {
    this.list.selectNone()
-    setTimeout(() => {
-      this.filterEditor.addDocumentType(documentTypeID)
-    })
+    this.filterEditor.addDocumentType(documentTypeID)
+  }
+
+  clickStoragePath(storagePathID: number) {
+    this.list.selectNone()
+    this.filterEditor.addStoragePath(storagePathID)
  }

  clickMoreLike(documentID: number) {
-    this.queryParamsService.navigateWithFilterRules([
+    this.list.quickFilter([
      { rule_type: FILTER_FULLTEXT_MORELIKE, value: documentID.toString() },
    ])
  }
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -1,7 +1,7 @@
-<div class="row">
+<div class="row flex-wrap">
   <div class="col mb-2 mb-xl-0">
     <div class="form-inline d-flex align-items-center">
-         <div class="input-group input-group-sm flex-fill w-auto">
+         <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
           <div ngbDropdown>
            <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{textFilterTargetName}}</button>
            <div class="dropdown-menu shadow" ngbDropdownMenu>
@@ -18,43 +18,54 @@
  <div class="w-100 d-xl-none"></div>
    <div class="col col-xl-auto">
      <div class="d-flex flex-wrap">
-        <app-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
-          filterPlaceholder="Filter tags" i18n-filterPlaceholder
-          [items]="tags"
-          [(selectionModel)]="tagSelectionModel"
-          (selectionModelChange)="updateRules()"
-          [multiple]="true"
-          (open)="onTagsDropdownOpen()"
-          [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="flex-fill" title="Correspondent" icon="person-fill" i18n-title
-          filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
-          [items]="correspondents"
-          [(selectionModel)]="correspondentSelectionModel"
-          (selectionModelChange)="updateRules()"
-          (open)="onCorrespondentDropdownOpen()"
-          [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
-          filterPlaceholder="Filter document types" i18n-filterPlaceholder
-          [items]="documentTypes"
-          [(selectionModel)]="documentTypeSelectionModel"
-          (open)="onDocumentTypeDropdownOpen()"
-          (selectionModelChange)="updateRules()"
-          [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-date-dropdown class="mb-2 mb-xl-0"
-          title="Created" i18n-title
-          (datesSet)="updateRules()"
-          [(dateBefore)]="dateCreatedBefore"
-          [(dateAfter)]="dateCreatedAfter"></app-date-dropdown>
-        <app-date-dropdown class="mb-2 mb-xl-0"
-          [(dateBefore)]="dateAddedBefore"
-          [(dateAfter)]="dateAddedAfter"
-          title="Added" i18n-title
-          (datesSet)="updateRules()"></app-date-dropdown>
+        <div class="d-flex flex-wrap mb-2 mb-lg-0">
+          <app-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
+            filterPlaceholder="Filter tags" i18n-filterPlaceholder
+            [items]="tags"
+            [(selectionModel)]="tagSelectionModel"
+            (selectionModelChange)="updateRules()"
+            [multiple]="true"
+            (open)="onTagsDropdownOpen()"
+            [allowSelectNone]="true"></app-filterable-dropdown>
+          <app-filterable-dropdown class="flex-fill" title="Correspondent" icon="person-fill" i18n-title
+            filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
+            [items]="correspondents"
+            [(selectionModel)]="correspondentSelectionModel"
+            (selectionModelChange)="updateRules()"
+            (open)="onCorrespondentDropdownOpen()"
+            [allowSelectNone]="true"></app-filterable-dropdown>
+          <app-filterable-dropdown class="flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
+            filterPlaceholder="Filter document types" i18n-filterPlaceholder
+            [items]="documentTypes"
+            [(selectionModel)]="documentTypeSelectionModel"
+            (open)="onDocumentTypeDropdownOpen()"
+            (selectionModelChange)="updateRules()"
+            [allowSelectNone]="true"></app-filterable-dropdown>
+          <app-filterable-dropdown class="me-2 flex-fill" title="Storage path" icon="folder-fill" i18n-title
+            filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
+            [items]="storagePaths"
+            [(selectionModel)]="storagePathSelectionModel"
+            (open)="onStoragePathDropdownOpen()"
+            (selectionModelChange)="updateRules()"
+            [allowSelectNone]="true"></app-filterable-dropdown>
+        </div>
+        <div class="d-flex flex-wrap">
+          <app-date-dropdown class="mb-2 mb-xl-0"
+            title="Created" i18n-title
+            (datesSet)="updateRules()"
+            [(dateBefore)]="dateCreatedBefore"
+            [(dateAfter)]="dateCreatedAfter"></app-date-dropdown>
+          <app-date-dropdown class="mb-2 mb-xl-0"
+            [(dateBefore)]="dateAddedBefore"
+            [(dateAfter)]="dateAddedAfter"
+            title="Added" i18n-title
+            (datesSet)="updateRules()"></app-date-dropdown>
+        </div>
     </div>
   </div>
   <div class="w-100 d-xl-none"></div>
-   <div class="col col-xl-auto">
-     <button class="btn btn-link btn-sm px-0 mx-0 ms-xl-n3" [disabled]="!rulesModified" (click)="resetSelected()">
+   <div class="col col-xl-auto ps-0">
+     <button class="btn btn-link btn-sm px-0" [disabled]="!rulesModified" (click)="resetSelected()">
       <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
       </svg><ng-container i18n>Reset filters</ng-container>
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -33,6 +33,7 @@ import {
  FILTER_DOES_NOT_HAVE_TAG,
  FILTER_TITLE,
  FILTER_TITLE_CONTENT,
+  FILTER_STORAGE_PATH,
  FILTER_ASN_ISNULL,
  FILTER_ASN_GT,
  FILTER_ASN_LT,
@@ -41,6 +42,8 @@ import { FilterableDropdownSelectionModel } from '../../common/filterable-dropdo
 import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { PaperlessDocument } from 'src/app/data/paperless-document'
+import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
+import { StoragePathService } from 'src/app/services/rest/storage-path.service'

 const TEXT_FILTER_TARGET_TITLE = 'title'
 const TEXT_FILTER_TARGET_TITLE_CONTENT = 'title-content'
@@ -107,7 +110,8 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
    private documentTypeService: DocumentTypeService,
    private tagService: TagService,
    private correspondentService: CorrespondentService,
-    private documentService: DocumentService
+    private documentService: DocumentService,
+    private storagePathService: StoragePathService
  ) {}

  @ViewChild('textFilterInput')
@@ -116,6 +120,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
  tags: PaperlessTag[] = []
  correspondents: PaperlessCorrespondent[] = []
  documentTypes: PaperlessDocumentType[] = []
+  storagePaths: PaperlessStoragePath[] = []

  _textFilter = ''
  _moreLikeId: number
@@ -186,6 +191,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
  tagSelectionModel = new FilterableDropdownSelectionModel()
  correspondentSelectionModel = new FilterableDropdownSelectionModel()
  documentTypeSelectionModel = new FilterableDropdownSelectionModel()
+  storagePathSelectionModel = new FilterableDropdownSelectionModel()

  dateCreatedBefore: string
  dateCreatedAfter: string
@@ -210,6 +216,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
    this._filterRules = value

    this.documentTypeSelectionModel.clear(false)
+    this.storagePathSelectionModel.clear(false)
    this.tagSelectionModel.clear(false)
    this.correspondentSelectionModel.clear(false)
    this._textFilter = null
@@ -297,9 +304,19 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
            false
          )
          break
+        case FILTER_STORAGE_PATH:
+          this.storagePathSelectionModel.set(
+            rule.value ? +rule.value : null,
+            ToggleableItemState.Selected,
+            false
+          )
+          break
        case FILTER_ASN_ISNULL:
          this.textFilterTarget = TEXT_FILTER_TARGET_ASN
-          this.textFilterModifier = TEXT_FILTER_MODIFIER_NULL
+          this.textFilterModifier =
+            rule.value == 'true' || rule.value == '1'
+              ? TEXT_FILTER_MODIFIER_NULL
+              : TEXT_FILTER_MODIFIER_NOTNULL
          break
        case FILTER_ASN_GT:
          this.textFilterTarget = TEXT_FILTER_TARGET_ASN
@@ -418,6 +435,12 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
          value: documentType.id?.toString(),
        })
      })
+    this.storagePathSelectionModel.getSelectedItems().forEach((storagePath) => {
+      filterRules.push({
+        rule_type: FILTER_STORAGE_PATH,
+        value: storagePath.id?.toString(),
+      })
+    })
    if (this.dateCreatedBefore) {
      filterRules.push({
        rule_type: FILTER_CREATED_BEFORE,
@@ -500,6 +523,9 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
    this.documentTypeService
      .listAll()
      .subscribe((result) => (this.documentTypes = result.results))
+    this.storagePathService
+      .listAll()
+      .subscribe((result) => (this.storagePaths = result.results))

    this.textFilterDebounce = new Subject<string>()

@@ -542,6 +568,13 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
    )
  }

+  addStoragePath(storagePathID: number) {
+    this.storagePathSelectionModel.set(
+      storagePathID,
+      ToggleableItemState.Selected
+    )
+  }
+
  onTagsDropdownOpen() {
    this.tagSelectionModel.apply()
  }
@@ -554,6 +587,10 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
    this.documentTypeSelectionModel.apply()
  }

+  onStoragePathDropdownOpen() {
+    this.storagePathSelectionModel.apply()
+  }
+
  updateTextFilter(text) {
    this._textFilter = text
    this.documentService.searchQuery = text
--- 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
@@ -3,7 +3,7 @@ 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'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
-import { QueryParamsService } from 'src/app/services/query-params.service'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
@@ -20,7 +20,7 @@ export class CorrespondentListComponent extends ManagementListComponent<Paperles
    correspondentsService: CorrespondentService,
    modalService: NgbModal,
    toastService: ToastService,
-    queryParamsService: QueryParamsService,
+    documentListViewService: DocumentListViewService,
    private datePipe: CustomDatePipe
  ) {
    super(
@@ -28,7 +28,7 @@ export class CorrespondentListComponent extends ManagementListComponent<Paperles
      modalService,
      CorrespondentEditDialogComponent,
      toastService,
-      queryParamsService,
+      documentListViewService,
      FILTER_CORRESPONDENT,
      $localize`correspondent`,
      $localize`correspondents`,
--- 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
@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 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'
-import { QueryParamsService } from 'src/app/services/query-params.service'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -18,14 +18,14 @@ export class DocumentTypeListComponent extends ManagementListComponent<Paperless
    documentTypeService: DocumentTypeService,
    modalService: NgbModal,
    toastService: ToastService,
-    queryParamsService: QueryParamsService
+    documentListViewService: DocumentListViewService
  ) {
    super(
      documentTypeService,
      modalService,
      DocumentTypeEditDialogComponent,
      toastService,
-      queryParamsService,
+      documentListViewService,
      FILTER_DOCUMENT_TYPE,
      $localize`document type`,
      $localize`document types`,
--- a/src-ui/src/app/components/manage/management-list/management-list.component.ts
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.ts
@@ -18,7 +18,7 @@ import {
  SortableDirective,
  SortEvent,
 } from 'src/app/directives/sortable.directive'
-import { QueryParamsService } from 'src/app/services/query-params.service'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { AbstractNameFilterService } from 'src/app/services/rest/abstract-name-filter-service'
 import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
@@ -42,7 +42,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
    private modalService: NgbModal,
    private editDialogComponent: any,
    private toastService: ToastService,
-    private queryParamsService: QueryParamsService,
+    private documentListViewService: DocumentListViewService,
    protected filterRuleType: number,
    public typeName: string,
    public typeNamePlural: string,
@@ -141,7 +141,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
  }

  filterDocuments(object: ObjectWithId) {
-    this.queryParamsService.navigateWithFilterRules([
+    this.documentListViewService.quickFilter([
      { rule_type: this.filterRuleType, 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
@@ -22,7 +22,7 @@
              <option *ngFor="let lang of displayLanguageOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code && currentLocale != 'en-US'"> - {{lang.englishName}}</span></option>
            </select>

-            <small class="form-text text-muted" i18n>You need to reload the page after applying a new language.</small>
+            <small *ngIf="displayLanguageIsDirty" class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>

          </div>
        </div>
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@ -13,11 +13,11 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import {
  LanguageOption,
  SettingsService,
-  SETTINGS_KEYS,
 } from 'src/app/services/settings.service'
-import { ToastService } from 'src/app/services/toast.service'
+import { Toast, ToastService } from 'src/app/services/toast.service'
 import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms'
-import { Observable, Subscription, BehaviorSubject } from 'rxjs'
+import { Observable, Subscription, BehaviorSubject, first } from 'rxjs'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'

@Component({
  selector: 'app-settings',
@@ -61,6 +61,13 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
    )
  }

+  get displayLanguageIsDirty(): boolean {
+    return (
+      this.settingsForm.get('displayLanguage').value !=
+      this.store?.getValue()['displayLanguage']
+    )
+  }
+
  constructor(
    public savedViewService: SavedViewService,
    private documentListViewService: DocumentListViewService,
@@ -170,6 +177,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
  }

  private saveLocalSettings() {
+    const reloadRequired = this.displayLanguageIsDirty // just this one, for now
    this.settings.set(
      SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE,
      this.settingsForm.value.bulkEditApplyOnClose
@@ -227,10 +235,36 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
      this.settingsForm.value.notificationsConsumerSuppressOnDashboard
    )
    this.settings.setLanguage(this.settingsForm.value.displayLanguage)
-    this.store.next(this.settingsForm.value)
-    this.documentListViewService.updatePageSize()
-    this.settings.updateAppearanceSettings()
-    this.toastService.showInfo($localize`Settings saved successfully.`)
+    this.settings
+      .storeSettings()
+      .pipe(first())
+      .subscribe({
+        next: () => {
+          this.store.next(this.settingsForm.value)
+          this.documentListViewService.updatePageSize()
+          this.settings.updateAppearanceSettings()
+          let savedToast: Toast = {
+            title: $localize`Settings saved`,
+            content: $localize`Settings were saved successfully.`,
+            delay: 500000,
+          }
+          if (reloadRequired) {
+            ;(savedToast.content = $localize`Settings were saved successfully. Reload is required to apply some changes.`),
+              (savedToast.actionName = $localize`Reload now`)
+            savedToast.action = () => {
+              location.reload()
+            }
+          }
+
+          this.toastService.show(savedToast)
+        },
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving settings.`
+          )
+          console.log(error)
+        },
+      })
  }

  get displayLanguageOptions(): LanguageOption[] {
--- a/src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts
+++ b/src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts
@@ -0,0 +1,47 @@
+import { Component } from '@angular/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { FILTER_STORAGE_PATH } from 'src/app/data/filter-rule-type'
+import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { StoragePathService } from 'src/app/services/rest/storage-path.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
+import { ManagementListComponent } from '../management-list/management-list.component'
+
+@Component({
+  selector: 'app-storage-path-list',
+  templateUrl: './../management-list/management-list.component.html',
+  styleUrls: ['./../management-list/management-list.component.scss'],
+})
+export class StoragePathListComponent extends ManagementListComponent<PaperlessStoragePath> {
+  constructor(
+    directoryService: StoragePathService,
+    modalService: NgbModal,
+    toastService: ToastService,
+    documentListViewService: DocumentListViewService
+  ) {
+    super(
+      directoryService,
+      modalService,
+      StoragePathEditDialogComponent,
+      toastService,
+      documentListViewService,
+      FILTER_STORAGE_PATH,
+      $localize`storage path`,
+      $localize`storage paths`,
+      [
+        {
+          key: 'path',
+          name: $localize`Path`,
+          valueFn: (c: PaperlessStoragePath) => {
+            return c.path
+          },
+        },
+      ]
+    )
+  }
+
+  getDeleteMessage(object: PaperlessStoragePath) {
+    return $localize`Do you really want to delete the storage path "${object.name}"?`
+  }
+}
--- 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
@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
 import { PaperlessTag } from 'src/app/data/paperless-tag'
-import { QueryParamsService } from 'src/app/services/query-params.service'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
@@ -18,14 +18,14 @@ export class TagListComponent extends ManagementListComponent<PaperlessTag> {
    tagService: TagService,
    modalService: NgbModal,
    toastService: ToastService,
-    queryParamsService: QueryParamsService
+    documentListViewService: DocumentListViewService
  ) {
    super(
      tagService,
      modalService,
      TagEditDialogComponent,
      toastService,
-      queryParamsService,
+      documentListViewService,
      FILTER_HAS_TAGS_ALL,
      $localize`tag`,
      $localize`tags`,
--- a/src-ui/src/app/data/filter-rule-type.ts
+++ b/src-ui/src/app/data/filter-rule-type.ts
@@ -1,32 +1,38 @@
 export const FILTER_TITLE = 0
 export const FILTER_CONTENT = 1
+
 export const FILTER_ASN = 2
+export const FILTER_ASN_ISNULL = 18
+export const FILTER_ASN_GT = 23
+export const FILTER_ASN_LT = 24
+
 export const FILTER_CORRESPONDENT = 3
+
 export const FILTER_DOCUMENT_TYPE = 4
+
 export const FILTER_IS_IN_INBOX = 5
 export const FILTER_HAS_TAGS_ALL = 6
 export const FILTER_HAS_ANY_TAG = 7
+export const FILTER_DOES_NOT_HAVE_TAG = 17
 export const FILTER_HAS_TAGS_ANY = 22
+
+export const FILTER_STORAGE_PATH = 25
+
 export const FILTER_CREATED_BEFORE = 8
 export const FILTER_CREATED_AFTER = 9
 export const FILTER_CREATED_YEAR = 10
 export const FILTER_CREATED_MONTH = 11
 export const FILTER_CREATED_DAY = 12
+
 export const FILTER_ADDED_BEFORE = 13
 export const FILTER_ADDED_AFTER = 14
+
 export const FILTER_MODIFIED_BEFORE = 15
 export const FILTER_MODIFIED_AFTER = 16

-export const FILTER_DOES_NOT_HAVE_TAG = 17
-
-export const FILTER_ASN_ISNULL = 18
-export const FILTER_ASN_GT = 19
-export const FILTER_ASN_LT = 20
-
-export const FILTER_TITLE_CONTENT = 21
-
-export const FILTER_FULLTEXT_QUERY = 22
-export const FILTER_FULLTEXT_MORELIKE = 23
+export const FILTER_TITLE_CONTENT = 19
+export const FILTER_FULLTEXT_QUERY = 20
+export const FILTER_FULLTEXT_MORELIKE = 21

 export const FILTER_RULE_TYPES: FilterRuleType[] = [
  {
@@ -56,6 +62,13 @@ export const FILTER_RULE_TYPES: FilterRuleType[] = [
    datatype: 'correspondent',
    multi: false,
  },
+  {
+    id: FILTER_STORAGE_PATH,
+    filtervar: 'storage_path__id',
+    isnull_filtervar: 'storage_path__isnull',
+    datatype: 'storage_path',
+    multi: false,
+  },
  {
    id: FILTER_DOCUMENT_TYPE,
    filtervar: 'document_type__id',
@@ -180,7 +193,6 @@ export const FILTER_RULE_TYPES: FilterRuleType[] = [
    datatype: 'string',
    multi: false,
  },
-
  {
    id: FILTER_FULLTEXT_MORELIKE,
    filtervar: 'more_like_id',
--- a/src-ui/src/app/data/paperless-document-suggestions.ts
+++ b/src-ui/src/app/data/paperless-document-suggestions.ts
@@ -4,4 +4,6 @@ export interface PaperlessDocumentSuggestions {
  correspondents?: number[]

  document_types?: number[]
+
+  storage_paths?: number[]
 }
--- a/src-ui/src/app/data/paperless-document.ts
+++ b/src-ui/src/app/data/paperless-document.ts
@@ -3,6 +3,7 @@ import { ObjectWithId } from './object-with-id'
 import { PaperlessTag } from './paperless-tag'
 import { PaperlessDocumentType } from './paperless-document-type'
 import { Observable } from 'rxjs'
+import { PaperlessStoragePath } from './paperless-storage-path'

 export interface SearchHit {
  score?: number
@@ -20,6 +21,10 @@ export interface PaperlessDocument extends ObjectWithId {

  document_type?: number

+  storage_path$?: Observable<PaperlessStoragePath>
+
+  storage_path?: number
+
  title?: string

  content?: string
--- a/src-ui/src/app/data/paperless-storage-path.ts
+++ b/src-ui/src/app/data/paperless-storage-path.ts
@@ -0,0 +1,5 @@
+import { MatchingModel } from './matching-model'
+
+export interface PaperlessStoragePath extends MatchingModel {
+  path?: string
+}
--- a/src-ui/src/app/data/paperless-uisettings.ts
+++ b/src-ui/src/app/data/paperless-uisettings.ts
@@ -0,0 +1,117 @@
+export interface PaperlessUiSettings {
+  user_id: number
+
+  username: string
+
+  display_name: string
+
+  settings: Object
+}
+
+export interface PaperlessUiSetting {
+  key: string
+  type: string
+  default: any
+}
+
+export const SETTINGS_KEYS = {
+  LANGUAGE: 'language',
+  // maintain old general-settings: for backwards compatibility
+  BULK_EDIT_CONFIRMATION_DIALOGS:
+    'general-settings:bulk-edit:confirmation-dialogs',
+  BULK_EDIT_APPLY_ON_CLOSE: 'general-settings:bulk-edit:apply-on-close',
+  DOCUMENT_LIST_SIZE: 'general-settings:documentListSize',
+  DARK_MODE_USE_SYSTEM: 'general-settings:dark-mode:use-system',
+  DARK_MODE_ENABLED: 'general-settings:dark-mode:enabled',
+  DARK_MODE_THUMB_INVERTED: 'general-settings:dark-mode:thumb-inverted',
+  THEME_COLOR: 'general-settings:theme:color',
+  USE_NATIVE_PDF_VIEWER: 'general-settings:document-details:native-pdf-viewer',
+  DATE_LOCALE: 'general-settings:date-display:date-locale',
+  DATE_FORMAT: 'general-settings:date-display:date-format',
+  NOTIFICATIONS_CONSUMER_NEW_DOCUMENT:
+    'general-settings:notifications:consumer-new-documents',
+  NOTIFICATIONS_CONSUMER_SUCCESS:
+    'general-settings:notifications:consumer-success',
+  NOTIFICATIONS_CONSUMER_FAILED:
+    'general-settings:notifications:consumer-failed',
+  NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD:
+    'general-settings:notifications:consumer-suppress-on-dashboard',
+}
+
+export const SETTINGS: PaperlessUiSetting[] = [
+  {
+    key: SETTINGS_KEYS.LANGUAGE,
+    type: 'string',
+    default: '',
+  },
+  {
+    key: SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS,
+    type: 'boolean',
+    default: true,
+  },
+  {
+    key: SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE,
+    type: 'boolean',
+    default: false,
+  },
+  {
+    key: SETTINGS_KEYS.DOCUMENT_LIST_SIZE,
+    type: 'number',
+    default: 50,
+  },
+  {
+    key: SETTINGS_KEYS.DARK_MODE_USE_SYSTEM,
+    type: 'boolean',
+    default: true,
+  },
+  {
+    key: SETTINGS_KEYS.DARK_MODE_ENABLED,
+    type: 'boolean',
+    default: false,
+  },
+  {
+    key: SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED,
+    type: 'boolean',
+    default: true,
+  },
+  {
+    key: SETTINGS_KEYS.THEME_COLOR,
+    type: 'string',
+    default: '',
+  },
+  {
+    key: SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER,
+    type: 'boolean',
+    default: false,
+  },
+  {
+    key: SETTINGS_KEYS.DATE_LOCALE,
+    type: 'string',
+    default: '',
+  },
+  {
+    key: SETTINGS_KEYS.DATE_FORMAT,
+    type: 'string',
+    default: 'mediumDate',
+  },
+  {
+    key: SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT,
+    type: 'boolean',
+    default: true,
+  },
+  {
+    key: SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS,
+    type: 'boolean',
+    default: true,
+  },
+  {
+    key: SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED,
+    type: 'boolean',
+    default: true,
+  },
+  {
+    key: SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD,
+    type: 'boolean',
+    default: true,
+  },
+]
--- a/src-ui/src/app/pipes/custom-date.pipe.ts
+++ b/src-ui/src/app/pipes/custom-date.pipe.ts
@@ -1,6 +1,8 @@
 import { DatePipe } from '@angular/common'
 import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core'
-import { SettingsService, SETTINGS_KEYS } from '../services/settings.service'
+import { SETTINGS_KEYS } from '../data/paperless-uisettings'
+import { SettingsService } from '../services/settings.service'
+import { normalizeDateStr } from '../utils/date'

 const FORMAT_TO_ISO_FORMAT = {
  longDate: 'y-MM-dd',
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { ActivatedRoute, Params, Router } from '@angular/router'
+import { ParamMap, Router } from '@angular/router'
 import { Observable } from 'rxjs'
 import {
  cloneFilterRules,
@@ -8,14 +8,16 @@ import {
 } from '../data/filter-rule'
 import { PaperlessDocument } from '../data/paperless-document'
 import { PaperlessSavedView } from '../data/paperless-saved-view'
+import { SETTINGS_KEYS } from '../data/paperless-uisettings'
 import { DOCUMENT_LIST_SERVICE } from '../data/storage-keys'
+import { generateParams, parseParams } from '../utils/query-params'
 import { DocumentService, DOCUMENT_SORT_FIELDS } from './rest/document.service'
-import { SettingsService, SETTINGS_KEYS } from './settings.service'
+import { SettingsService } from './settings.service'

 /**
 * Captures the current state of the list view.
 */
-interface ListViewState {
+export interface ListViewState {
  /**
   * Title of the document list view. Either "Documents" (localized) or the name of a saved view.
   */
@@ -31,7 +33,7 @@ interface ListViewState {
  /**
   * Total amount of documents with the current filter rules. Used to calculate the number of pages.
   */
-  collectionSize: number
+  collectionSize?: number

  /**
   * Currently selected sort field.
@@ -84,6 +86,32 @@ export class DocumentListViewService {
    return this.activeListViewState.title
  }

+  constructor(
+    private documentService: DocumentService,
+    private settings: SettingsService,
+    private router: Router
+  ) {
+    let documentListViewConfigJson = localStorage.getItem(
+      DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG
+    )
+    if (documentListViewConfigJson) {
+      try {
+        let savedState: ListViewState = JSON.parse(documentListViewConfigJson)
+        // Remove null elements from the restored state
+        Object.keys(savedState).forEach((k) => {
+          if (savedState[k] == null) {
+            delete savedState[k]
+          }
+        })
+        //only use restored state attributes instead of defaults if they are not null
+        let newState = Object.assign(this.defaultListViewState(), savedState)
+        this.listViewStates.set(null, newState)
+      } catch (e) {
+        localStorage.removeItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
+      }
+    }
+  }
+
  private defaultListViewState(): ListViewState {
    return {
      title: null,
@@ -121,20 +149,40 @@ export class DocumentListViewService {
    if (closeCurrentView) {
      this._activeSavedViewId = null
    }
+
    this.activeListViewState.filterRules = cloneFilterRules(view.filter_rules)
    this.activeListViewState.sortField = view.sort_field
    this.activeListViewState.sortReverse = view.sort_reverse
    if (this._activeSavedViewId) {
      this.activeListViewState.title = view.name
    }
+
    this.reduceSelectionToFilter()
+
+    if (!this.router.routerState.snapshot.url.includes('/view/')) {
+      this.router.navigate([], {
+        queryParams: { view: view.id },
+      })
+    }
  }

-  reload(onFinish?) {
+  loadFromQueryParams(queryParams: ParamMap) {
+    const paramsEmpty: boolean = queryParams.keys.length == 0
+    let newState: ListViewState = this.listViewStates.get(null)
+    if (!paramsEmpty) newState = parseParams(queryParams)
+    if (newState == undefined) newState = this.defaultListViewState() // if nothing in local storage
+
+    this.activeListViewState.filterRules = newState.filterRules
+    this.activeListViewState.sortField = newState.sortField
+    this.activeListViewState.sortReverse = newState.sortReverse
+    this.activeListViewState.currentPage = newState.currentPage
+    this.reload(null, paramsEmpty) // update the params if there arent any
+  }
+
+  reload(onFinish?, updateQueryParams: boolean = true) {
    this.isReloading = true
    this.error = null
    let activeListViewState = this.activeListViewState
-
    this.documentService
      .listFiltered(
        activeListViewState.currentPage,
@@ -148,6 +196,14 @@ export class DocumentListViewService {
          this.isReloading = false
          activeListViewState.collectionSize = result.count
          activeListViewState.documents = result.results
+
+          if (updateQueryParams && !this._activeSavedViewId) {
+            let base = ['/documents']
+            this.router.navigate(base, {
+              queryParams: generateParams(activeListViewState),
+            })
+          }
+
          if (onFinish) {
            onFinish()
          }
@@ -190,6 +246,7 @@ export class DocumentListViewService {
    ) {
      this.activeListViewState.sortField = 'created'
    }
+    this._activeSavedViewId = null
    this.activeListViewState.filterRules = filterRules
    this.reload()
    this.reduceSelectionToFilter()
@@ -201,6 +258,7 @@ export class DocumentListViewService {
  }

  set sortField(field: string) {
+    this._activeSavedViewId = null
    this.activeListViewState.sortField = field
    this.reload()
    this.saveDocumentListView()
@@ -211,6 +269,7 @@ export class DocumentListViewService {
  }

  set sortReverse(reverse: boolean) {
+    this._activeSavedViewId = null
    this.activeListViewState.sortReverse = reverse
    this.reload()
    this.saveDocumentListView()
@@ -220,13 +279,6 @@ export class DocumentListViewService {
    return this.activeListViewState.sortReverse
  }

-  get sortParams(): Params {
-    return {
-      sortField: this.sortField,
-      sortReverse: this.sortReverse,
-    }
-  }
-
  get collectionSize(): number {
    return this.activeListViewState.collectionSize
  }
@@ -236,6 +288,8 @@ export class DocumentListViewService {
  }

  set currentPage(page: number) {
+    if (this.activeListViewState.currentPage == page) return
+    this._activeSavedViewId = null
    this.activeListViewState.currentPage = page
    this.reload()
    this.saveDocumentListView()
@@ -272,6 +326,10 @@ export class DocumentListViewService {
    }
  }

+  quickFilter(filterRules: FilterRule[]) {
+    this.filterRules = filterRules
+  }
+
  getLastPage(): number {
    return Math.ceil(this.collectionSize / this.currentPageSize)
  }
@@ -430,29 +488,4 @@ export class DocumentListViewService {
  documentIndexInCurrentView(documentID: number): number {
    return this.documents.map((d) => d.id).indexOf(documentID)
  }
-
-  constructor(
-    private documentService: DocumentService,
-    private settings: SettingsService
-  ) {
-    let documentListViewConfigJson = localStorage.getItem(
-      DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG
-    )
-    if (documentListViewConfigJson) {
-      try {
-        let savedState: ListViewState = JSON.parse(documentListViewConfigJson)
-        // Remove null elements from the restored state
-        Object.keys(savedState).forEach((k) => {
-          if (savedState[k] == null) {
-            delete savedState[k]
-          }
-        })
-        //only use restored state attributes instead of defaults if they are not null
-        let newState = Object.assign(this.defaultListViewState(), savedState)
-        this.listViewStates.set(null, newState)
-      } catch (e) {
-        localStorage.removeItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
-      }
-    }
-  }
 }
--- a/src-ui/src/app/services/query-params.service.ts
+++ b/src-ui/src/app/services/query-params.service.ts
@@ -1,163 +0,0 @@
-import { Injectable } from '@angular/core'
-import { ParamMap, Params, Router } from '@angular/router'
-import { FilterRule } from '../data/filter-rule'
-import { FilterRuleType, FILTER_RULE_TYPES } from '../data/filter-rule-type'
-import { PaperlessSavedView } from '../data/paperless-saved-view'
-import { DocumentListViewService } from './document-list-view.service'
-
-const SORT_FIELD_PARAMETER = 'sort'
-const SORT_REVERSE_PARAMETER = 'reverse'
-
-@Injectable({
-  providedIn: 'root',
-})
-export class QueryParamsService {
-  constructor(private router: Router, private list: DocumentListViewService) {}
-
-  private filterParams: Params = {}
-  private sortParams: Params = {}
-
-  updateFilterRules(
-    filterRules: FilterRule[],
-    updateQueryParams: boolean = true
-  ) {
-    this.filterParams = filterRulesToQueryParams(filterRules)
-    if (updateQueryParams) this.updateQueryParams()
-  }
-
-  set sortField(field: string) {
-    this.sortParams[SORT_FIELD_PARAMETER] = field
-    this.updateQueryParams()
-  }
-
-  set sortReverse(reverse: boolean) {
-    if (!reverse) this.sortParams[SORT_REVERSE_PARAMETER] = undefined
-    else this.sortParams[SORT_REVERSE_PARAMETER] = reverse
-    this.updateQueryParams()
-  }
-
-  get params(): Params {
-    return {
-      ...this.sortParams,
-      ...this.filterParams,
-    }
-  }
-
-  private updateQueryParams() {
-    // if we were on a saved view we navigate 'away' to /documents
-    let base = []
-    if (this.router.routerState.snapshot.url.includes('/view/'))
-      base = ['/documents']
-
-    this.router.navigate(base, {
-      queryParams: this.params,
-    })
-  }
-
-  public parseQueryParams(queryParams: ParamMap) {
-    let filterRules = filterRulesFromQueryParams(queryParams)
-    if (
-      filterRules.length ||
-      queryParams.has(SORT_FIELD_PARAMETER) ||
-      queryParams.has(SORT_REVERSE_PARAMETER)
-    ) {
-      this.list.filterRules = filterRules
-      this.list.sortField = queryParams.get(SORT_FIELD_PARAMETER)
-      this.list.sortReverse =
-        queryParams.has(SORT_REVERSE_PARAMETER) ||
-        (!queryParams.has(SORT_FIELD_PARAMETER) &&
-          !queryParams.has(SORT_REVERSE_PARAMETER))
-      this.list.reload()
-    } else if (
-      filterRules.length == 0 &&
-      !queryParams.has(SORT_FIELD_PARAMETER)
-    ) {
-      // this is navigating to /documents so we need to update the params from the list
-      this.updateFilterRules(this.list.filterRules, false)
-      this.sortParams[SORT_FIELD_PARAMETER] = this.list.sortField
-      this.sortParams[SORT_REVERSE_PARAMETER] = this.list.sortReverse
-      this.router.navigate([], {
-        queryParams: this.params,
-        replaceUrl: true,
-      })
-    }
-  }
-
-  updateFromView(view: PaperlessSavedView) {
-    if (!this.router.routerState.snapshot.url.includes('/view/')) {
-      // navigation for /documents?view=
-      this.router.navigate([], {
-        queryParams: { view: view.id },
-      })
-    }
-    // make sure params are up-to-date
-    this.updateFilterRules(view.filter_rules, false)
-    this.sortParams[SORT_FIELD_PARAMETER] = this.list.sortField
-    this.sortParams[SORT_REVERSE_PARAMETER] = this.list.sortReverse
-  }
-
-  navigateWithFilterRules(filterRules: FilterRule[]) {
-    this.updateFilterRules(filterRules)
-    this.router.navigate(['/documents'], {
-      queryParams: this.params,
-    })
-  }
-}
-
-export function filterRulesToQueryParams(filterRules: FilterRule[]): Object {
-  if (filterRules) {
-    let params = {}
-    for (let rule of filterRules) {
-      let ruleType = FILTER_RULE_TYPES.find((t) => t.id == rule.rule_type)
-      if (ruleType.multi) {
-        params[ruleType.filtervar] = params[ruleType.filtervar]
-          ? params[ruleType.filtervar] + ',' + rule.value
-          : rule.value
-      } else if (ruleType.isnull_filtervar && rule.value == null) {
-        params[ruleType.isnull_filtervar] = true
-      } else {
-        params[ruleType.filtervar] = rule.value
-      }
-    }
-    return params
-  } else {
-    return null
-  }
-}
-
-export function filterRulesFromQueryParams(queryParams: ParamMap) {
-  const allFilterRuleQueryParams: string[] = FILTER_RULE_TYPES.map(
-    (rt) => rt.filtervar
-  )
-    .concat(FILTER_RULE_TYPES.map((rt) => rt.isnull_filtervar))
-    .filter((rt) => rt !== undefined)
-
-  // transform query params to filter rules
-  let filterRulesFromQueryParams: FilterRule[] = []
-  allFilterRuleQueryParams
-    .filter((frqp) => queryParams.has(frqp))
-    .forEach((filterQueryParamName) => {
-      const rule_type: FilterRuleType = FILTER_RULE_TYPES.find(
-        (rt) =>
-          rt.filtervar == filterQueryParamName ||
-          rt.isnull_filtervar == filterQueryParamName
-      )
-      const isNullRuleType = rule_type.isnull_filtervar == filterQueryParamName
-      const valueURIComponent: string = queryParams.get(filterQueryParamName)
-      const filterQueryParamValues: string[] = rule_type.multi
-        ? valueURIComponent.split(',')
-        : [valueURIComponent]
-
-      filterRulesFromQueryParams = filterRulesFromQueryParams.concat(
-        // map all values to filter rules
-        filterQueryParamValues.map((val) => {
-          return {
-            rule_type: rule_type.id,
-            value: isNullRuleType ? null : val,
-          }
-        })
-      )
-    })
-
-  return filterRulesFromQueryParams
-}
--- a/src-ui/src/app/services/rest/document.service.ts
+++ b/src-ui/src/app/services/rest/document.service.ts
@@ -6,12 +6,13 @@ import { HttpClient, HttpParams } from '@angular/common/http'
 import { Observable } from 'rxjs'
 import { Results } from 'src/app/data/results'
 import { FilterRule } from 'src/app/data/filter-rule'
-import { map } from 'rxjs/operators'
+import { map, tap } from 'rxjs/operators'
 import { CorrespondentService } from './correspondent.service'
 import { DocumentTypeService } from './document-type.service'
 import { TagService } from './tag.service'
 import { PaperlessDocumentSuggestions } from 'src/app/data/paperless-document-suggestions'
-import { filterRulesToQueryParams } from '../query-params.service'
+import { queryParamsFromFilterRules } from '../../utils/query-params'
+import { StoragePathService } from './storage-path.service'

 export const DOCUMENT_SORT_FIELDS = [
  { field: 'archive_serial_number', name: $localize`ASN` },
@@ -37,6 +38,7 @@ export interface SelectionDataItem {
 }

 export interface SelectionData {
+  selected_storage_paths: SelectionDataItem[]
  selected_correspondents: SelectionDataItem[]
  selected_tags: SelectionDataItem[]
  selected_document_types: SelectionDataItem[]
@@ -52,7 +54,8 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
    http: HttpClient,
    private correspondentService: CorrespondentService,
    private documentTypeService: DocumentTypeService,
-    private tagService: TagService
+    private tagService: TagService,
+    private storagePathService: StoragePathService
  ) {
    super(http, 'documents')
  }
@@ -67,7 +70,16 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
      doc.document_type$ = this.documentTypeService.getCached(doc.document_type)
    }
    if (doc.tags) {
-      doc.tags$ = this.tagService.getCachedMany(doc.tags)
+      doc.tags$ = this.tagService
+        .getCachedMany(doc.tags)
+        .pipe(
+          tap((tags) =>
+            tags.sort((tagA, tagB) => tagA.name.localeCompare(tagB.name))
+          )
+        )
+    }
+    if (doc.storage_path) {
+      doc.storage_path$ = this.storagePathService.getCached(doc.storage_path)
    }
    return doc
  }
@@ -85,7 +97,7 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
      pageSize,
      sortField,
      sortReverse,
-      Object.assign(extraParams, filterRulesToQueryParams(filterRules))
+      Object.assign(extraParams, queryParamsFromFilterRules(filterRules))
    ).pipe(
      map((results) => {
        results.results.forEach((doc) => this.addObservablesToDocument(doc))
--- a/src-ui/src/app/services/rest/storage-path.service.ts
+++ b/src-ui/src/app/services/rest/storage-path.service.ts
@@ -0,0 +1,13 @@
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
+import { AbstractNameFilterService } from './abstract-name-filter-service'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StoragePathService extends AbstractNameFilterService<PaperlessStoragePath> {
+  constructor(http: HttpClient) {
+    super(http, 'storage_paths')
+  }
+}
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -1,4 +1,5 @@
 import { DOCUMENT } from '@angular/common'
+import { HttpClient } from '@angular/common/http'
 import {
  Inject,
  Injectable,
@@ -9,17 +10,19 @@ import {
 } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
 import { CookieService } from 'ngx-cookie-service'
+import { first, Observable, tap } from 'rxjs'
 import {
  BRIGHTNESS,
  estimateBrightnessForColor,
  hexToHsl,
 } from 'src/app/utils/color'
-
-export interface PaperlessSettings {
-  key: string
-  type: string
-  default: any
-}
+import { environment } from 'src/environments/environment'
+import {
+  PaperlessUiSettings,
+  SETTINGS,
+  SETTINGS_KEYS,
+} from '../data/paperless-uisettings'
+import { ToastService } from './toast.service'

 export interface LanguageOption {
  code: string
@@ -32,89 +35,42 @@ export interface LanguageOption {
  dateInputFormat?: string
 }

-export const SETTINGS_KEYS = {
-  BULK_EDIT_CONFIRMATION_DIALOGS:
-    'general-settings:bulk-edit:confirmation-dialogs',
-  BULK_EDIT_APPLY_ON_CLOSE: 'general-settings:bulk-edit:apply-on-close',
-  DOCUMENT_LIST_SIZE: 'general-settings:documentListSize',
-  DARK_MODE_USE_SYSTEM: 'general-settings:dark-mode:use-system',
-  DARK_MODE_ENABLED: 'general-settings:dark-mode:enabled',
-  DARK_MODE_THUMB_INVERTED: 'general-settings:dark-mode:thumb-inverted',
-  THEME_COLOR: 'general-settings:theme:color',
-  USE_NATIVE_PDF_VIEWER: 'general-settings:document-details:native-pdf-viewer',
-  DATE_LOCALE: 'general-settings:date-display:date-locale',
-  DATE_FORMAT: 'general-settings:date-display:date-format',
-  NOTIFICATIONS_CONSUMER_NEW_DOCUMENT:
-    'general-settings:notifications:consumer-new-documents',
-  NOTIFICATIONS_CONSUMER_SUCCESS:
-    'general-settings:notifications:consumer-success',
-  NOTIFICATIONS_CONSUMER_FAILED:
-    'general-settings:notifications:consumer-failed',
-  NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD:
-    'general-settings:notifications:consumer-suppress-on-dashboard',
-}
-
-const SETTINGS: PaperlessSettings[] = [
-  {
-    key: SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS,
-    type: 'boolean',
-    default: true,
-  },
-  {
-    key: SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE,
-    type: 'boolean',
-    default: false,
-  },
-  { key: SETTINGS_KEYS.DOCUMENT_LIST_SIZE, type: 'number', default: 50 },
-  { key: SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, type: 'boolean', default: true },
-  { key: SETTINGS_KEYS.DARK_MODE_ENABLED, type: 'boolean', default: false },
-  {
-    key: SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED,
-    type: 'boolean',
-    default: true,
-  },
-  { key: SETTINGS_KEYS.THEME_COLOR, type: 'string', default: '' },
-  { key: SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, type: 'boolean', default: false },
-  { key: SETTINGS_KEYS.DATE_LOCALE, type: 'string', default: '' },
-  { key: SETTINGS_KEYS.DATE_FORMAT, type: 'string', default: 'mediumDate' },
-  {
-    key: SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT,
-    type: 'boolean',
-    default: true,
-  },
-  {
-    key: SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS,
-    type: 'boolean',
-    default: true,
-  },
-  {
-    key: SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED,
-    type: 'boolean',
-    default: true,
-  },
-  {
-    key: SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD,
-    type: 'boolean',
-    default: true,
-  },
-]
-
@Injectable({
  providedIn: 'root',
 })
 export class SettingsService {
  private renderer: Renderer2
+  protected baseUrl: string = environment.apiBaseUrl + 'ui_settings/'
+
+  private settings: Object = {}
+
+  public displayName: string

  constructor(
-    private rendererFactory: RendererFactory2,
+    rendererFactory: RendererFactory2,
    @Inject(DOCUMENT) private document,
    private cookieService: CookieService,
    private meta: Meta,
-    @Inject(LOCALE_ID) private localeId: string
+    @Inject(LOCALE_ID) private localeId: string,
+    protected http: HttpClient,
+    private toastService: ToastService
  ) {
    this.renderer = rendererFactory.createRenderer(null, null)
+  }

-    this.updateAppearanceSettings()
+  // this is called by the app initializer in app.module
+  public initializeSettings(): Observable<PaperlessUiSettings> {
+    return this.http.get<PaperlessUiSettings>(this.baseUrl).pipe(
+      first(),
+      tap((uisettings) => {
+        Object.assign(this.settings, uisettings.settings)
+        this.maybeMigrateSettings()
+        // to update lang cookie
+        if (this.settings['language']?.length)
+          this.setLanguage(this.settings['language'])
+        this.displayName = uisettings.display_name.trim()
+      })
+    )
  }

  public updateAppearanceSettings(
@@ -333,11 +289,13 @@ export class SettingsService {
  }

  getLanguage(): string {
-    return this.cookieService.get(this.getLanguageCookieName())
+    return this.get(SETTINGS_KEYS.LANGUAGE)
  }

  setLanguage(language: string) {
-    if (language) {
+    this.set(SETTINGS_KEYS.LANGUAGE, language)
+    if (language?.length) {
+      // for Django
      this.cookieService.set(this.getLanguageCookieName(), language)
    } else {
      this.cookieService.delete(this.getLanguageCookieName())
@@ -362,7 +320,16 @@ export class SettingsService {
      return null
    }

-    let value = localStorage.getItem(key)
+    let value = null
+    // parse key:key:key into nested object
+    const keys = key.replace('general-settings:', '').split(':')
+    let settingObj = this.settings
+    keys.forEach((keyPart, index) => {
+      keyPart = keyPart.replace(/-/g, '_')
+      if (!settingObj.hasOwnProperty(keyPart)) return
+      if (index == keys.length - 1) value = settingObj[keyPart]
+      else settingObj = settingObj[keyPart]
+    })

    if (value != null) {
      switch (setting.type) {
@@ -381,10 +348,57 @@ export class SettingsService {
  }

  set(key: string, value: any) {
-    localStorage.setItem(key, value.toString())
+    // parse key:key:key into nested object
+    let settingObj = this.settings
+    const keys = key.replace('general-settings:', '').split(':')
+    keys.forEach((keyPart, index) => {
+      keyPart = keyPart.replace(/-/g, '_')
+      if (!settingObj.hasOwnProperty(keyPart)) settingObj[keyPart] = {}
+      if (index == keys.length - 1) settingObj[keyPart] = value
+      else settingObj = settingObj[keyPart]
+    })
  }

-  unset(key: string) {
-    localStorage.removeItem(key)
+  storeSettings(): Observable<any> {
+    return this.http.post(this.baseUrl, { settings: this.settings })
+  }
+
+  maybeMigrateSettings() {
+    if (
+      !this.settings.hasOwnProperty('documentListSize') &&
+      localStorage.getItem(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)
+    ) {
+      // lets migrate
+      const successMessage = $localize`Successfully completed one-time migratration of settings to the database!`
+      const errorMessage = $localize`Unable to migrate settings to the database, please try saving manually.`
+
+      try {
+        for (const setting in SETTINGS_KEYS) {
+          const key = SETTINGS_KEYS[setting]
+          const value = localStorage.getItem(key)
+          this.set(key, value)
+        }
+        this.set(
+          SETTINGS_KEYS.LANGUAGE,
+          this.cookieService.get(this.getLanguageCookieName())
+        )
+      } catch (error) {
+        this.toastService.showError(errorMessage)
+        console.log(error)
+      }
+
+      this.storeSettings()
+        .pipe(first())
+        .subscribe({
+          next: () => {
+            this.updateAppearanceSettings()
+            this.toastService.showInfo(successMessage)
+          },
+          error: (e) => {
+            this.toastService.showError(errorMessage)
+            console.log(e)
+          },
+        })
+    }
  }
 }
--- a/src-ui/src/app/utils/query-params.ts
+++ b/src-ui/src/app/utils/query-params.ts
@@ -0,0 +1,101 @@
+import { ParamMap, Params } from '@angular/router'
+import { FilterRule } from '../data/filter-rule'
+import { FilterRuleType, FILTER_RULE_TYPES } from '../data/filter-rule-type'
+import { ListViewState } from '../services/document-list-view.service'
+
+const SORT_FIELD_PARAMETER = 'sort'
+const SORT_REVERSE_PARAMETER = 'reverse'
+const PAGE_PARAMETER = 'page'
+
+export function generateParams(viewState: ListViewState): Params {
+  let params = queryParamsFromFilterRules(viewState.filterRules)
+  params[SORT_FIELD_PARAMETER] = viewState.sortField
+  params[SORT_REVERSE_PARAMETER] = viewState.sortReverse ? 1 : undefined
+  params[PAGE_PARAMETER] = isNaN(viewState.currentPage)
+    ? 1
+    : viewState.currentPage
+  return params
+}
+
+export function parseParams(queryParams: ParamMap): ListViewState {
+  let filterRules = filterRulesFromQueryParams(queryParams)
+  let sortField = queryParams.get(SORT_FIELD_PARAMETER)
+  let sortReverse =
+    queryParams.has(SORT_REVERSE_PARAMETER) ||
+    (!queryParams.has(SORT_FIELD_PARAMETER) &&
+      !queryParams.has(SORT_REVERSE_PARAMETER))
+  let currentPage = queryParams.has(PAGE_PARAMETER)
+    ? parseInt(queryParams.get(PAGE_PARAMETER))
+    : 1
+  return {
+    currentPage: currentPage,
+    filterRules: filterRules,
+    sortField: sortField,
+    sortReverse: sortReverse,
+  }
+}
+
+export function filterRulesFromQueryParams(
+  queryParams: ParamMap
+): FilterRule[] {
+  const allFilterRuleQueryParams: string[] = FILTER_RULE_TYPES.map(
+    (rt) => rt.filtervar
+  )
+    .concat(FILTER_RULE_TYPES.map((rt) => rt.isnull_filtervar))
+    .filter((rt) => rt !== undefined)
+
+  // transform query params to filter rules
+  let filterRulesFromQueryParams: FilterRule[] = []
+  allFilterRuleQueryParams
+    .filter((frqp) => queryParams.has(frqp))
+    .forEach((filterQueryParamName) => {
+      const rule_type: FilterRuleType = FILTER_RULE_TYPES.find(
+        (rt) =>
+          rt.filtervar == filterQueryParamName ||
+          rt.isnull_filtervar == filterQueryParamName
+      )
+      const isNullRuleType = rule_type.isnull_filtervar == filterQueryParamName
+      const valueURIComponent: string = queryParams.get(filterQueryParamName)
+      const filterQueryParamValues: string[] = rule_type.multi
+        ? valueURIComponent.split(',')
+        : [valueURIComponent]
+
+      filterRulesFromQueryParams = filterRulesFromQueryParams.concat(
+        // map all values to filter rules
+        filterQueryParamValues.map((val) => {
+          if (rule_type.datatype == 'boolean')
+            val = val.replace('1', 'true').replace('0', 'false')
+          return {
+            rule_type: rule_type.id,
+            value: isNullRuleType ? null : val,
+          }
+        })
+      )
+    })
+
+  return filterRulesFromQueryParams
+}
+
+export function queryParamsFromFilterRules(filterRules: FilterRule[]): Params {
+  if (filterRules) {
+    let params = {}
+    for (let rule of filterRules) {
+      let ruleType = FILTER_RULE_TYPES.find((t) => t.id == rule.rule_type)
+      if (ruleType.multi) {
+        params[ruleType.filtervar] = params[ruleType.filtervar]
+          ? params[ruleType.filtervar] + ',' + rule.value
+          : rule.value
+      } else if (ruleType.isnull_filtervar && rule.value == null) {
+        params[ruleType.isnull_filtervar] = 1
+      } else {
+        params[ruleType.filtervar] = rule.value
+        if (ruleType.datatype == 'boolean')
+          params[ruleType.filtervar] =
+            rule.value == 'true' || rule.value == '1' ? 1 : 0
+      }
+    }
+    return params
+  } else {
+    return null
+  }
+}
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -84,6 +84,10 @@ svg.logo {
  }
 }

+.text-primary {
+  color: var(--bs-primary) !important;
+}
+
 .btn-outline-primary {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
@@ -198,16 +202,12 @@ a, a:hover, .btn-link, .btn-link:hover {
    min-height: calc(1.5em + 0.75rem + 5px);
    line-height: 1.5;

-    .ng-select-container {
-      height: 100%;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-
-      .ng-value-container .ng-input {
-        top: 10px;
-      }
+    .ng-select-container .ng-value-container .ng-input {
+      top: 7px;
    }

+    .paperless-input-select .ng-select .ng-select-container
+
    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
      background-color: var(--pngx-bg-darker) !important;
      color: var(--pngx-body-color-accent) !important;
@@ -218,6 +218,14 @@ a, a:hover, .btn-link, .btn-link:hover {
      background: none;
    }
  }
+
+  .input-group {
+    .ng-select-container {
+      height: 100%;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
 }

 .paperless-input-tags {
@@ -421,13 +429,17 @@ table.table {
  right: 0;
  bottom: 0;
  left: 0;
-  background-color: rgba(23, 84, 31, .8);
+  background-color: hsla(var(--pngx-primary), var(--pngx-primary-lightness), .8);
  z-index: 1055; // $zindex-modal
  pointer-events: none !important;
  user-select: none !important;
  text-align: center;
  padding-top: 25%;

+  h2 {
+    color: var(--pngx-primary-text-contrast)
+  }
+
  &.show {
    opacity: 1 !important;
  }
@@ -506,3 +518,7 @@ a.badge {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
 }
+
+code {
+  color: var(--pngx-body-color-accent)
+}
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -186,7 +186,8 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt

  .toast,
  .toast .toast-header,
-  .toast .btn-close {
+  .toast .btn,
+  .toast .btn-close, {
    color: var(--pngx-primary-text-contrast);
  }
 }