Merge branch 'dev' into feature-ai

2025-10-02 01:42:50 -05:00 · 2025-09-30 11:09:24 -07:00
parent 6a29b8d0e8 f71b13b82a
commit 0cafb79bf3
95 changed files with 5000 additions and 2131 deletions
--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts
@@ -177,10 +177,16 @@ export class CustomFieldEditDialogComponent
  }

  public removeSelectOption(index: number) {
-    this.selectOptions.removeAt(index)
-    this._allSelectOptions.splice(
-      index + (this.selectOptionsPage - 1) * SELECT_OPTION_PAGE_SIZE,
-      1
+    const globalIndex =
+      index + (this.selectOptionsPage - 1) * SELECT_OPTION_PAGE_SIZE
+    this._allSelectOptions.splice(globalIndex, 1)
+
+    const totalPages = Math.max(
+      1,
+      Math.ceil(this._allSelectOptions.length / SELECT_OPTION_PAGE_SIZE)
    )
+    const targetPage = Math.min(this.selectOptionsPage, totalPages)
+
+    this.selectOptionsPage = targetPage
  }
 }
--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
@@ -12,6 +12,8 @@

    <pngx-input-color i18n-title title="Color" formControlName="color" [error]="error?.color"></pngx-input-color>

+    <pngx-input-select i18n-title title="Parent" formControlName="parent" [items]="tags" [allowNull]="true" [error]="error?.parent"></pngx-input-select>
+
    <pngx-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></pngx-input-check>
    <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
    @if (patternRequired) {
--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts
@@ -35,11 +35,16 @@ import { TextComponent } from '../../input/text/text.component'
  ],
 })
 export class TagEditDialogComponent extends EditDialogComponent<Tag> {
+  tags: Tag[]
+
  constructor() {
    super()
    this.service = inject(TagService)
    this.userService = inject(UserService)
    this.settingsService = inject(SettingsService)
+    this.service.listAll().subscribe((result) => {
+      this.tags = result.results
+    })
  }

  getCreateTitle() {
@@ -55,6 +60,7 @@ export class TagEditDialogComponent extends EditDialogComponent<Tag> {
      name: new FormControl(''),
      color: new FormControl(randomColor()),
      is_inbox_tag: new FormControl(false),
+      parent: new FormControl(null),
      matching_algorithm: new FormControl(DEFAULT_MATCHING_ALGORITHM),
      match: new FormControl(''),
      is_insensitive: new FormControl(true),
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -114,6 +114,13 @@ export class FilterableDropdownSelectionModel {
          b.id == NEGATIVE_NULL_FILTER_VALUE)
      ) {
        return 1
+      }
+
+      // Preserve hierarchical order when provided (e.g., Tags)
+      const ao = (a as any)['orderIndex']
+      const bo = (b as any)['orderIndex']
+      if (ao !== undefined && bo !== undefined) {
+        return ao - bo
      } else if (
        this.getNonTemporary(a.id) == ToggleableItemState.NotSelected &&
        this.getNonTemporary(b.id) != ToggleableItemState.NotSelected
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
@@ -15,12 +15,17 @@
      <i-bs width="1em" height="1em" name="x"></i-bs>
    }
  </div>
-  <div class="me-1">
-    @if (isTag) {
-      <pngx-tag [tag]="item" [clickable]="false"></pngx-tag>
-    } @else {
-      <small>{{item.name}}</small>
+  <div class="me-1 name-cell" [style.--depth]="isTag ? getDepth() + 1 : 1">
+    @if (isTag && getDepth() > 0) {
+      <div class="indicator"></div>
    }
+    <div>
+      @if (isTag) {
+        <pngx-tag [tag]="item" [clickable]="false"></pngx-tag>
+      } @else {
+        <small>{{item.name}}</small>
+      }
+    </div>
  </div>
  @if (!hideCount) {
    <div class="badge bg-light text-dark rounded-pill ms-auto me-1">{{currentCount}}</div>
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss
@@ -2,3 +2,19 @@
  min-width: 1em;
  min-height: 1em;
 }
+
+.name-cell {
+  padding-left: calc(calc(var(--depth) - 2) * 1rem);
+  display: flex;
+  align-items: center;
+
+  .indicator {
+    display: inline-block;
+    width: .8rem;
+    height: .8rem;
+    border-left: 1px solid var(--bs-secondary);
+    border-bottom: 1px solid var(--bs-secondary);
+    margin-right: .25rem;
+    margin-left: .5rem;
+  }
+}
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { MatchingModel } from 'src/app/data/matching-model'
+import { Tag } from 'src/app/data/tag'
 import { TagComponent } from '../../tag/tag.component'

 export enum ToggleableItemState {
@@ -45,6 +46,10 @@ export class ToggleableDropdownButtonComponent {
    return 'is_inbox_tag' in this.item
  }

+  getDepth(): number {
+    return (this.item as Tag).depth ?? 0
+  }
+
  get currentCount(): number {
    return this.count ?? this.item.document_count
  }
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -7,13 +7,14 @@
      <div class="input-group flex-nowrap">
        <ng-select #tagSelect name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
          [disabled]="disabled"
-          [multiple]="true"
+          [multiple]="multiple"
          [closeOnSelect]="false"
          [clearSearchOnAdd]="true"
          [hideSelected]="tags.length > 0"
          [addTag]="allowCreate ? createTagRef : false"
          addTagText="Add tag"
          i18n-addTagText
+          (add)="onAdd($event)"
          (change)="onChange(value)">

          <ng-template ng-label-tmp let-item="item">
@@ -25,9 +26,20 @@
            </button>
          </ng-template>
          <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
-            <div class="tag-wrap">
+            <div class="tag-option-row d-flex align-items-center">
              @if (item.id && tags) {
-                <pngx-tag class="me-2" [tag]="getTag(item.id)"></pngx-tag>
+                @if (getTag(item.id)?.parent) {
+                  <i-bs name="list-nested" class="me-1"></i-bs>
+                  <span class="hierarchy-reveal d-flex align-items-center">
+                    <span class="parents d-flex align-items-center">
+                      @for (p of getParentChain(item.id); track p.id) {
+                        <span class="badge me-1" [style.background]="p.color" [style.color]="p.text_color">{{p.name}}</span>
+                        <i-bs name="chevron-right" width=".8em" height=".8em" class="me-1"></i-bs>
+                      }
+                    </span>
+                  </span>
+                }
+                <pngx-tag class="current-tag d-flex" [tag]="getTag(item.id)"></pngx-tag>
              }
            </div>
          </ng-template>
--- a/src-ui/src/app/components/common/input/tags/tags.component.scss
+++ b/src-ui/src/app/components/common/input/tags/tags.component.scss
@@ -20,3 +20,33 @@
      }
  }
 }
+
+// Dropdown hierarchy reveal for ng-select options
+::ng-deep .ng-dropdown-panel .ng-option {
+  overflow-x: scroll;
+
+  .tag-option-row {
+    font-size: 1rem;
+    width: max-content;
+  }
+
+  .hierarchy-reveal {
+    overflow: hidden;
+    max-width: 0;
+    transition: max-width 200ms ease;
+  }
+
+  .parents .badge {
+    white-space: nowrap;
+  }
+}
+
+::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
+  max-width: 1000px;
+}
+
+::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-indicator,
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
+  background: transparent;
+}
--- a/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
@@ -177,4 +177,59 @@ describe('TagsComponent', () => {
    component.onFilterDocuments()
    expect(emitSpy).toHaveBeenCalledWith([tags[2]])
  })
+
+  it('should remove all descendants from selection', () => {
+    const c: Tag = { id: 4, name: 'c' }
+    const b: Tag = { id: 3, name: 'b', children: [c] }
+    const a: Tag = { id: 2, name: 'a' }
+    const root: Tag = { id: 1, name: 'root', children: [a, b] }
+
+    const inputIDs = [2, 3, 4, 99]
+    const result = (component as any).removeChildren(inputIDs, root)
+    expect(result).toEqual([99])
+  })
+
+  it('should append all parents recursively', () => {
+    const root: Tag = { id: 1, name: 'root' }
+    const mid: Tag = { id: 2, name: 'mid', parent: 1 }
+    const leaf: Tag = { id: 3, name: 'leaf', parent: 2 }
+    component.tags = [root, mid, leaf]
+
+    component.value = []
+    component.onAdd(leaf)
+    expect(component.value).toEqual([2, 1])
+
+    // Calling onAdd on a root should not change value
+    component.onAdd(root)
+    expect(component.value).toEqual([2, 1])
+  })
+
+  it('should return ancestors from root to parent using getParentChain', () => {
+    const root: Tag = { id: 1, name: 'root' }
+    const mid: Tag = { id: 2, name: 'mid', parent: 1 }
+    const leaf: Tag = { id: 3, name: 'leaf', parent: 2 }
+    component.tags = [root, mid, leaf]
+
+    expect(component.getParentChain(3).map((t) => t.id)).toEqual([1, 2])
+    expect(component.getParentChain(2).map((t) => t.id)).toEqual([1])
+    expect(component.getParentChain(1).map((t) => t.id)).toEqual([])
+    // Non-existent id
+    expect(component.getParentChain(999).map((t) => t.id)).toEqual([])
+  })
+
+  it('should handle cyclic parents via guard in getParentChain', () => {
+    const one: Tag = { id: 1, name: 'one', parent: 2 }
+    const two: Tag = { id: 2, name: 'two', parent: 1 }
+    component.tags = [one, two]
+
+    const chain = component.getParentChain(1)
+    // Guard avoids infinite loop; chain contains both nodes once
+    expect(chain.map((t) => t.id)).toEqual([1, 2])
+  })
+
+  it('should stop when parent does not exist in getParentChain', () => {
+    const lone: Tag = { id: 5, name: 'lone', parent: 999 }
+    component.tags = [lone]
+    expect(component.getParentChain(5)).toEqual([])
+  })
 })
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -100,6 +100,9 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
  @Input()
  horizontal: boolean = false

+  @Input()
+  multiple: boolean = true
+
  @Output()
  filterDocuments = new EventEmitter<Tag[]>()

@@ -124,13 +127,40 @@ export class TagsComponent implements OnInit, ControlValueAccessor {

    let index = this.value.indexOf(tagID)
    if (index > -1) {
+      const tag = this.getTag(tagID)
+
+      // remove tag
      let oldValue = this.value
      oldValue.splice(index, 1)
+
+      // remove children
+      oldValue = this.removeChildren(oldValue, tag)
+
      this.value = [...oldValue]
      this.onChange(this.value)
    }
  }

+  private removeChildren(tagIDs: number[], tag: Tag) {
+    if (tag.children?.length) {
+      const childIDs = tag.children.map((child) => child.id)
+      tagIDs = tagIDs.filter((id) => !childIDs.includes(id))
+      for (const child of tag.children) {
+        tagIDs = this.removeChildren(tagIDs, child)
+      }
+    }
+    return tagIDs
+  }
+
+  public onAdd(tag: Tag) {
+    if (tag.parent) {
+      // add all parents recursively
+      const parent = this.getTag(tag.parent)
+      this.value = [...this.value, parent.id]
+      this.onAdd(parent)
+    }
+  }
+
  createTag(name: string = null, add: boolean = false) {
    var modal = this.modalService.open(TagEditDialogComponent, {
      backdrop: 'static',
@@ -166,6 +196,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {

  addTag(id) {
    this.value = [...this.value, id]
+    this.onAdd(this.getTag(id))
    this.onChange(this.value)
  }

@@ -180,4 +211,20 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
      this.tags.filter((t) => this.value.includes(t.id))
    )
  }
+
+  getParentChain(id: number): Tag[] {
+    // Returns ancestors from root → immediate parent for a tag id
+    const chain: Tag[] = []
+    let current = this.getTag(id)
+    const guard = new Set<number>()
+    while (current?.parent) {
+      if (guard.has(current.parent)) break
+      guard.add(current.parent)
+      const parent = this.getTag(current.parent)
+      if (!parent) break
+      chain.unshift(parent)
+      current = parent
+    }
+    return chain
+  }
 }
--- a/src-ui/src/app/components/common/tag/tag.component.html
+++ b/src-ui/src/app/components/common/tag/tag.component.html
@@ -1,4 +1,8 @@
@if (tag) {
+  @if (showParents && tag.parent) {
+    <pngx-tag [tagID]="tag.parent" [clickable]="clickable" [linkTitle]="linkTitle"></pngx-tag>
+      &nbsp;&gt;&nbsp;
+  }
  @if (!clickable) {
    <span class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</span>
  }
--- a/src-ui/src/app/components/common/tag/tag.component.ts
+++ b/src-ui/src/app/components/common/tag/tag.component.ts
@@ -50,4 +50,7 @@ export class TagComponent {

  @Input()
  clickable: boolean = false
+
+  @Input()
+  showParents: boolean = false
 }
--- 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
@@ -1,161 +1,144 @@
 <div class="d-flex flex-wrap gap-4">
-  <div class="d-flex align-items-center" role="group" aria-label="Select">
-    <button class="btn btn-sm btn-outline-secondary" (click)="list.selectNone()">
-      <i-bs name="slash-circle"></i-bs>&nbsp;<ng-container i18n>Cancel</ng-container>
+  <div class="d-flex flex-wrap align-items-center gap-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
+    <label class="me-2" i18n>Edit:</label>
+    @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.Tag)) {
+      <pngx-filterable-dropdown title="Tags" icon="tag-fill" i18n-title
+        filterPlaceholder="Filter tags" i18n-filterPlaceholder
+        [disabled]="!userCanEditAll || disabled"
+        [editing]="true"
+        [applyOnClose]="applyOnClose"
+        [createRef]="createTag.bind(this)"
+        (opened)="openTagsDropdown()"
+        [(selectionModel)]="tagSelectionModel"
+        [documentCounts]="tagDocumentCounts"
+        (apply)="setTags($event)"
+        shortcutKey="t">
+      </pngx-filterable-dropdown>
+    }
+    @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
+      <pngx-filterable-dropdown title="Correspondent" icon="person-fill" i18n-title
+        filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
+        [disabled]="!userCanEditAll || disabled"
+        [editing]="true"
+        [applyOnClose]="applyOnClose"
+        [createRef]="createCorrespondent.bind(this)"
+        (opened)="openCorrespondentDropdown()"
+        [(selectionModel)]="correspondentSelectionModel"
+        [documentCounts]="correspondentDocumentCounts"
+        (apply)="setCorrespondents($event)"
+        shortcutKey="y">
+      </pngx-filterable-dropdown>
+    }
+    @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
+      <pngx-filterable-dropdown title="Document type" icon="file-earmark-fill" i18n-title
+        filterPlaceholder="Filter document types" i18n-filterPlaceholder
+        [disabled]="!userCanEditAll || disabled"
+        [editing]="true"
+        [applyOnClose]="applyOnClose"
+        [createRef]="createDocumentType.bind(this)"
+        (opened)="openDocumentTypeDropdown()"
+        [(selectionModel)]="documentTypeSelectionModel"
+        [documentCounts]="documentTypeDocumentCounts"
+        (apply)="setDocumentTypes($event)"
+        shortcutKey="u">
+      </pngx-filterable-dropdown>
+    }
+    @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
+      <pngx-filterable-dropdown title="Storage path" icon="folder-fill" i18n-title
+        filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
+        [disabled]="!userCanEditAll || disabled"
+        [editing]="true"
+        [applyOnClose]="applyOnClose"
+        [createRef]="createStoragePath.bind(this)"
+        (opened)="openStoragePathDropdown()"
+        [(selectionModel)]="storagePathsSelectionModel"
+        [documentCounts]="storagePathDocumentCounts"
+        (apply)="setStoragePaths($event)"
+        shortcutKey="i">
+      </pngx-filterable-dropdown>
+    }
+    @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.CustomField)) {
+      <pngx-filterable-dropdown title="Custom fields" icon="ui-radios" i18n-title
+        filterPlaceholder="Filter custom fields" i18n-filterPlaceholder
+        [disabled]="!userCanEditAll"
+        [editing]="true"
+        [applyOnClose]="applyOnClose"
+        [createRef]="createCustomField.bind(this)"
+        (opened)="openCustomFieldsDropdown()"
+        [(selectionModel)]="customFieldsSelectionModel"
+        [documentCounts]="customFieldDocumentCounts"
+        extraButtonTitle="Set values"
+        i18n-extraButtonTitle
+        (extraButton)="setCustomFieldValues($event)"
+        (apply)="setCustomFields($event)">
+      </pngx-filterable-dropdown>
+    }
+    <div class="btn-group">
+      <button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="setPermissions()" [disabled]="!userOwnsAll || !userCanEditAll">
+        <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Permissions</ng-container></div>
      </button>
    </div>
-    <div class="d-flex align-items-center gap-2" role="group" aria-label="Select">
-      <label class="me-2" i18n>Select:</label>
-      <div class="btn-group">
-        <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
-          <i-bs name="file-earmark-check"></i-bs>&nbsp;<ng-container i18n>Page</ng-container>
+  </div>
+  <div class="d-flex align-items-center gap-2 ms-auto">
+    <div class="btn-toolbar">
+      <div ngbDropdown>
+        <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" [disabled]="!userCanEdit && !userCanAdd" ngbDropdownToggle>
+          <i-bs name="three-dots"></i-bs>
+          <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
+        </button>
+        <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
+          <button ngbDropdownItem (click)="reprocessSelected()" [disabled]="!userCanEditAll && !userCanEditAll">
+            <i-bs name="body-text"></i-bs>&nbsp;<ng-container i18n>Reprocess</ng-container>
+          </button>
+          <button ngbDropdownItem (click)="rotateSelected()" [disabled]="!userOwnsAll && !userCanEditAll">
+            <i-bs name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Rotate</ng-container>
+          </button>
+          <button ngbDropdownItem (click)="mergeSelected()" [disabled]="!userCanAdd || list.selected.size < 2">
+            <i-bs name="journals"></i-bs>&nbsp;<ng-container i18n>Merge</ng-container>
          </button>
-          <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
-            <i-bs name="check-all"></i-bs>&nbsp;<ng-container i18n>All</ng-container>
-            </button>
-          </div>
        </div>
-        <div class="d-flex align-items-center gap-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
-          <label class="me-2" i18n>Edit:</label>
-          @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.Tag)) {
-            <pngx-filterable-dropdown title="Tags" icon="tag-fill" i18n-title
-              filterPlaceholder="Filter tags" i18n-filterPlaceholder
-              [disabled]="!userCanEditAll || disabled"
-              [editing]="true"
-              [applyOnClose]="applyOnClose"
-              [createRef]="createTag.bind(this)"
-              (opened)="openTagsDropdown()"
-              [(selectionModel)]="tagSelectionModel"
-              [documentCounts]="tagDocumentCounts"
-              (apply)="setTags($event)"
-              shortcutKey="t">
-            </pngx-filterable-dropdown>
-          }
-          @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
-            <pngx-filterable-dropdown title="Correspondent" icon="person-fill" i18n-title
-              filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
-              [disabled]="!userCanEditAll || disabled"
-              [editing]="true"
-              [applyOnClose]="applyOnClose"
-              [createRef]="createCorrespondent.bind(this)"
-              (opened)="openCorrespondentDropdown()"
-              [(selectionModel)]="correspondentSelectionModel"
-              [documentCounts]="correspondentDocumentCounts"
-              (apply)="setCorrespondents($event)"
-              shortcutKey="y">
-            </pngx-filterable-dropdown>
-          }
-          @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
-            <pngx-filterable-dropdown title="Document type" icon="file-earmark-fill" i18n-title
-              filterPlaceholder="Filter document types" i18n-filterPlaceholder
-              [disabled]="!userCanEditAll || disabled"
-              [editing]="true"
-              [applyOnClose]="applyOnClose"
-              [createRef]="createDocumentType.bind(this)"
-              (opened)="openDocumentTypeDropdown()"
-              [(selectionModel)]="documentTypeSelectionModel"
-              [documentCounts]="documentTypeDocumentCounts"
-              (apply)="setDocumentTypes($event)"
-              shortcutKey="u">
-            </pngx-filterable-dropdown>
-          }
-          @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
-            <pngx-filterable-dropdown title="Storage path" icon="folder-fill" i18n-title
-              filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
-              [disabled]="!userCanEditAll || disabled"
-              [editing]="true"
-              [applyOnClose]="applyOnClose"
-              [createRef]="createStoragePath.bind(this)"
-              (opened)="openStoragePathDropdown()"
-              [(selectionModel)]="storagePathsSelectionModel"
-              [documentCounts]="storagePathDocumentCounts"
-              (apply)="setStoragePaths($event)"
-              shortcutKey="i">
-            </pngx-filterable-dropdown>
-          }
-          @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.CustomField)) {
-            <pngx-filterable-dropdown title="Custom fields" icon="ui-radios" i18n-title
-              filterPlaceholder="Filter custom fields" i18n-filterPlaceholder
-              [disabled]="!userCanEditAll"
-              [editing]="true"
-              [applyOnClose]="applyOnClose"
-              [createRef]="createCustomField.bind(this)"
-              (opened)="openCustomFieldsDropdown()"
-              [(selectionModel)]="customFieldsSelectionModel"
-              [documentCounts]="customFieldDocumentCounts"
-              extraButtonTitle="Set values"
-              i18n-extraButtonTitle
-              (extraButton)="setCustomFieldValues($event)"
-              (apply)="setCustomFields($event)">
-            </pngx-filterable-dropdown>
-          }
+      </div>
+    </div>
+    <div class="btn-group btn-group-sm">
+      <button class="btn btn-sm btn-outline-primary" [disabled]="awaitingDownload" (click)="downloadSelected()">
+        @if (!awaitingDownload) {
+          <i-bs name="arrow-down"></i-bs>
+        }
+        @if (awaitingDownload) {
+          <div class="spinner-border spinner-border-sm" role="status">
+            <span class="visually-hidden">Preparing download...</span>
+          </div>
+        }
+        <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Download</ng-container></div>
+      </button>
+      <div ngbDropdown class="me-2 d-flex btn-group" role="group">
+        <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle-split rounded-end" ngbDropdownToggle></button>
+        <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
+          <form [formGroup]="downloadForm" class="px-3 py-1">
+            <p class="mb-1" i18n>Include:</p>
+            <div class="form-group ps-3 mb-2">
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input" id="downloadFileType_archive" formControlName="downloadFileTypeArchive" />
+                <label class="form-check-label" for="downloadFileType_archive" i18n>Archived files</label>
+              </div>
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input" id="downloadFileType_originals" formControlName="downloadFileTypeOriginals" />
+                <label class="form-check-label" for="downloadFileType_originals" i18n>Original files</label>
+              </div>
+            </div>
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input" id="downloadUseFormatting" formControlName="downloadUseFormatting" />
+              <label class="form-check-label" for="downloadUseFormatting" i18n>Use formatted filename</label>
+            </div>
+          </form>
        </div>
-        <div class="d-flex align-items-center gap-2 ms-auto">
-          <div class="btn-toolbar">
+      </div>
+    </div>

-            <button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="setPermissions()" [disabled]="!userOwnsAll || !userCanEditAll">
-              <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Permissions</ng-container></div>
-            </button>
-
-            <div ngbDropdown>
-              <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" [disabled]="!userCanEdit && !userCanAdd" ngbDropdownToggle>
-                <i-bs name="three-dots"></i-bs>
-                <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
-              </button>
-              <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
-                <button ngbDropdownItem (click)="reprocessSelected()" [disabled]="!userCanEditAll && !userCanEditAll">
-                  <i-bs name="body-text"></i-bs>&nbsp;<ng-container i18n>Reprocess</ng-container>
-                </button>
-                <button ngbDropdownItem (click)="rotateSelected()" [disabled]="!userOwnsAll && !userCanEditAll">
-                  <i-bs name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Rotate</ng-container>
-                </button>
-                <button ngbDropdownItem (click)="mergeSelected()" [disabled]="!userCanAdd || list.selected.size < 2">
-                  <i-bs name="journals"></i-bs>&nbsp;<ng-container i18n>Merge</ng-container>
-                </button>
-              </div>
-            </div>
-          </div>
-
-            <div class="btn-group btn-group-sm">
-              <button class="btn btn-sm btn-outline-primary" [disabled]="awaitingDownload" (click)="downloadSelected()">
-                @if (!awaitingDownload) {
-                  <i-bs name="arrow-down"></i-bs>
-                }
-                @if (awaitingDownload) {
-                  <div class="spinner-border spinner-border-sm" role="status">
-                    <span class="visually-hidden">Preparing download...</span>
-                  </div>
-                }
-                <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Download</ng-container></div>
-              </button>
-              <div ngbDropdown class="me-2 d-flex btn-group" role="group">
-                <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle-split rounded-end" ngbDropdownToggle></button>
-                <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
-                  <form [formGroup]="downloadForm" class="px-3 py-1">
-                    <p class="mb-1" i18n>Include:</p>
-                    <div class="form-group ps-3 mb-2">
-                      <div class="form-check">
-                        <input type="checkbox" class="form-check-input" id="downloadFileType_archive" formControlName="downloadFileTypeArchive" />
-                        <label class="form-check-label" for="downloadFileType_archive" i18n>Archived files</label>
-                      </div>
-                      <div class="form-check">
-                        <input type="checkbox" class="form-check-input" id="downloadFileType_originals" formControlName="downloadFileTypeOriginals" />
-                        <label class="form-check-label" for="downloadFileType_originals" i18n>Original files</label>
-                      </div>
-                    </div>
-                    <div class="form-check">
-                      <input type="checkbox" class="form-check-input" id="downloadUseFormatting" formControlName="downloadUseFormatting" />
-                      <label class="form-check-label" for="downloadUseFormatting" i18n>Use formatted filename</label>
-                    </div>
-                  </form>
-                </div>
-              </div>
-            </div>
-
-            <div class="btn-group btn-group-sm">
-              <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" [disabled]="!userOwnsAll">
-                <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-                </button>
-              </div>
-            </div>
-          </div>
+    <div class="btn-group btn-group-sm">
+      <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" [disabled]="!userOwnsAll">
+        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+      </button>
+    </div>
+  </div>
+</div>
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
@@ -5,3 +5,7 @@
 .dropdown-menu{
    --bs-dropdown-min-width: 12rem;
 }
+
+.btn-group .btn {
+  white-space: nowrap;
+}
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts
@@ -1204,7 +1204,7 @@ describe('BulkEditorComponent', () => {
    expect(tagListAllSpy).toHaveBeenCalled()

    expect(tagSelectionModelToggleSpy).toHaveBeenCalledWith(newTag.id)
-    expect(component.tagSelectionModel.items).toEqual(
+    expect(component.tagSelectionModel.items).toMatchObject(
      [{ id: null, name: 'Not assigned' }].concat(tags.results as any)
    )
  })
--- 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
@@ -37,6 +37,7 @@ import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { flattenTags } from 'src/app/utils/flatten-tags'
 import { MergeConfirmDialogComponent } from '../../common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
 import { RotateConfirmDialogComponent } from '../../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
@@ -164,7 +165,10 @@ export class BulkEditorComponent
      this.tagService
        .listAll()
        .pipe(first())
-        .subscribe((result) => (this.tagSelectionModel.items = result.results))
+        .subscribe(
+          (result) =>
+            (this.tagSelectionModel.items = flattenTags(result.results))
+        )
    }
    if (
      this.permissionService.currentUserCan(
@@ -648,7 +652,7 @@ export class BulkEditorComponent
      )
      .pipe(takeUntil(this.unsubscribeNotifier))
      .subscribe(({ newTag, tags }) => {
-        this.tagSelectionModel.items = tags.results
+        this.tagSelectionModel.items = flattenTags(tags.results)
        this.tagSelectionModel.toggle(newTag.id)
      })
  }
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -1,16 +1,36 @@
 <pngx-page-header [title]="getTitle()">
-
-  <div ngbDropdown class="btn-group flex-fill">
-    <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
+  <div ngbDropdown class="btn-group flex-fill d-sm-none">
+    <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle>
      <i-bs name="text-indent-left"></i-bs>
      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
+      @if (list.selected.size > 0) {
+        <pngx-clearable-badge [selected]="list.selected.size > 0" [number]="list.selected.size" (cleared)="list.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
+      }
    </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
+    <div ngbDropdownMenu aria-labelledby="dropdownSelectMobile" class="shadow">
      <button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
      <button ngbDropdownItem (click)="list.selectPage()" i18n>Select page</button>
      <button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</button>
    </div>
  </div>
+  <div class="d-none d-sm-flex flex-fill me-3">
+    <div class="input-group input-group-sm">
+      <span class="input-group-text border-0">Select:</span>
+    </div>
+    <div class="btn-group btn-group-sm flex-nowrap">
+      @if (list.selected.size > 0) {
+        <button class="btn btn-sm btn-outline-secondary" (click)="list.selectNone()">
+          <i-bs name="slash-circle"></i-bs>&nbsp;<ng-container i18n>None</ng-container>
+        </button>
+      }
+      <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
+        <i-bs name="file-earmark-check"></i-bs>&nbsp;<ng-container i18n>Page</ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
+        <i-bs name="check-all"></i-bs>&nbsp;<ng-container i18n>All</ng-container>
+      </button>
+    </div>
+  </div>
  <div ngbDropdown class="btn-group flex-fill">
    <button class="btn btn-sm btn-outline-primary" id="dropdownDisplayFields" ngbDropdownToggle>
      <i-bs name="card-heading"></i-bs>
@@ -126,8 +146,13 @@
      @if (!list.isReloading && isFiltered) {
        <button class="btn btn-link py-0" (click)="resetFilters()">
          <i-bs width="1em" height="1em" name="x"></i-bs><small i18n>Reset filters</small>
-          </button>
-        }
+        </button>
+      }
+      @if (!list.isReloading && list.selected.size > 0) {
+        <button class="btn btn-link py-0" (click)="list.selectNone()">
+          <i-bs width="1em" height="1em" name="slash-circle" class="me-1"></i-bs><small i18n>Clear selection</small>
+        </button>
+      }
      </div>
      @if (list.collectionSize) {
        <ngb-pagination [pageSize]="list.pageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -56,6 +56,7 @@ import {
  filterRulesDiffer,
  isFullTextFilterRule,
 } from 'src/app/utils/filter-rules'
+import { ClearableBadgeComponent } from '../common/clearable-badge/clearable-badge.component'
 import { CustomFieldDisplayComponent } from '../common/custom-field-display/custom-field-display.component'
 import { PageHeaderComponent } from '../common/page-header/page-header.component'
 import { PreviewPopupComponent } from '../common/preview-popup/preview-popup.component'
@@ -72,6 +73,7 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi
  templateUrl: './document-list.component.html',
  styleUrls: ['./document-list.component.scss'],
  imports: [
+    ClearableBadgeComponent,
    CustomFieldDisplayComponent,
    PageHeaderComponent,
    BulkEditorComponent,
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
@@ -589,7 +589,7 @@ describe('FilterEditorComponent', () => {
    expect(component.tagSelectionModel.logicalOperator).toEqual(
      LogicalOperator.And
    )
-    expect(component.tagSelectionModel.getSelectedItems()).toEqual(tags)
+    expect(component.tagSelectionModel.getSelectedItems()).toMatchObject(tags)
    // coverage
    component.filterRules = [
      {
@@ -615,7 +615,7 @@ describe('FilterEditorComponent', () => {
    expect(component.tagSelectionModel.logicalOperator).toEqual(
      LogicalOperator.Or
    )
-    expect(component.tagSelectionModel.getSelectedItems()).toEqual(tags)
+    expect(component.tagSelectionModel.getSelectedItems()).toMatchObject(tags)
    // coverage
    component.filterRules = [
      {
@@ -652,7 +652,7 @@ describe('FilterEditorComponent', () => {
    expect(component.tagSelectionModel.logicalOperator).toEqual(
      LogicalOperator.And
    )
-    expect(component.tagSelectionModel.getExcludedItems()).toEqual(tags)
+    expect(component.tagSelectionModel.getExcludedItems()).toMatchObject(tags)
    // coverage
    component.filterRules = [
      {
--- 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
@@ -97,6 +97,7 @@ import {
  CustomFieldQueryExpression,
 } from 'src/app/utils/custom-field-query-element'
 import { filterRulesDiffer } from 'src/app/utils/filter-rules'
+import { flattenTags } from 'src/app/utils/flatten-tags'
 import {
  CustomFieldQueriesModel,
  CustomFieldsQueryDropdownComponent,
@@ -1134,7 +1135,7 @@ export class FilterEditorComponent
    ) {
      this.loadingCountTotal++
      this.tagService.listAll().subscribe((result) => {
-        this.tagSelectionModel.items = result.results
+        this.tagSelectionModel.items = flattenTags(result.results)
        this.maybeCompleteLoading()
      })
    }
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -30,6 +30,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    FormsModule,
    ReactiveFormsModule,
    NgClass,
+    NgTemplateOutlet,
    NgbDropdownModule,
    NgbPaginationModule,
    NgxBootstrapIconsModule,
--- a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
+++ b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -28,6 +28,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    FormsModule,
    ReactiveFormsModule,
    NgClass,
+    NgTemplateOutlet,
    NgbDropdownModule,
    NgbPaginationModule,
    NgxBootstrapIconsModule,
--- a/src-ui/src/app/components/manage/mail/mail.component.html
+++ b/src-ui/src/app/components/manage/mail/mail.component.html
@@ -109,10 +109,11 @@
    <li class="list-group-item">
      <div class="row">
        <div class="col" i18n>Name</div>
-        <div class="col d-none d-sm-block" i18n>Sort Order</div>
-        <div class="col" i18n>Account</div>
-        <div class="col d-none d-sm-block" i18n>Status</div>
-        <div class="col" i18n>Actions</div>
+        <div class="col-1 d-none d-sm-block" i18n>Sort Order</div>
+        <div class="col-2" i18n>Account</div>
+        <div class="col-2 d-none d-sm-block" i18n>Status</div>
+        <div class="col d-none d-sm-block" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ProcessedMail }">Processed Mail</div>
+        <div class="col-3" i18n>Actions</div>
      </div>
    </li>

@@ -127,9 +128,9 @@
      <li class="list-group-item">
        <div class="row fade" [class.show]="showRules">
          <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editMailRule(rule)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailRule) || !userCanEdit(rule)">{{rule.name}}</button></div>
-          <div class="col d-flex align-items-center d-none d-sm-flex">{{rule.order}}</div>
-          <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
-          <div class="col d-flex align-items-center d-none d-sm-flex">
+          <div class="col-1 d-flex align-items-center d-none d-sm-flex">{{rule.order}}</div>
+          <div class="col-2 d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
+          <div class="col-2 d-flex align-items-center d-none d-sm-flex">
            <div class="form-check form-switch mb-0">
              <input #inputField type="checkbox" class="form-check-input cursor-pointer" [id]="rule.id+'_enable'" [(ngModel)]="rule.enabled" (change)="onMailRuleEnableToggled(rule)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }">
              <label class="form-check-label cursor-pointer" [for]="rule.id+'_enable'">
@@ -137,7 +138,12 @@
              </label>
            </div>
          </div>
-          <div class="col">
+          <div class="col d-flex align-items-center d-none d-sm-flex" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ProcessedMail }">
+            <button class="btn btn-sm btn-outline-secondary" type="button" (click)="viewProcessedMail(rule)">
+              <i-bs width="1em" height="1em" name="clock-history"></i-bs>&nbsp;<ng-container i18n>View Processed Mail</ng-container>
+            </button>
+          </div>
+          <div class="col-3">
            <div class="btn-group d-block d-sm-none">
              <div ngbDropdown container="body" class="d-inline-block">
                <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle>
--- a/src-ui/src/app/components/manage/mail/mail.component.spec.ts
+++ b/src-ui/src/app/components/manage/mail/mail.component.spec.ts
@@ -409,4 +409,13 @@ describe('MailComponent', () => {
    jest.advanceTimersByTime(200)
    expect(editSpy).toHaveBeenCalled()
  })
+
+  it('should open processed mails dialog', () => {
+    completeSetup()
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+    component.viewProcessedMail(mailRules[0] as MailRule)
+    const dialog = modal.componentInstance as any
+    expect(dialog.rule).toEqual(mailRules[0])
+  })
 })
--- a/src-ui/src/app/components/manage/mail/mail.component.ts
+++ b/src-ui/src/app/components/manage/mail/mail.component.ts
@@ -27,6 +27,7 @@ import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { ProcessedMailDialogComponent } from './processed-mail-dialog/processed-mail-dialog.component'

@Component({
  selector: 'pngx-mail',
@@ -347,6 +348,14 @@ export class MailComponent
    )
  }

+  viewProcessedMail(rule: MailRule) {
+    const modal = this.modalService.open(ProcessedMailDialogComponent, {
+      backdrop: 'static',
+      size: 'xl',
+    })
+    modal.componentInstance.rule = rule
+  }
+
  userCanEdit(obj: ObjectWithPermissions): boolean {
    return this.permissionsService.currentUserHasObjectPermissions(
      PermissionAction.Change,
--- a/src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.html
+++ b/src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.html
@@ -0,0 +1,107 @@
+<div class="modal-header">
+  <h6 class="modal-title" id="modal-basic-title" i18n>Processed Mail for <em>{{ rule.name }}</em></h6>
+  <button class="btn btn-sm btn-link text-muted me-auto p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
+    <i-bs name="question-circle"></i-bs>
+  </button>
+  <ng-template #infoPopover>
+    <a href="https://docs.paperless-ngx.com/usage#processed-mail" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
+    <i-bs class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></i-bs>
+  </ng-template>
+  <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+</div>
+<div class="modal-body">
+  @if (loading) {
+    <div class="text-center my-5">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden" i18n>Loading...</span>
+      </div>
+    </div>
+  } @else if (processedMails.length === 0) {
+    <span i18n>No processed email messages found.</span>
+  } @else {
+    <div class="table-responsive">
+      <table class="table table-hover table-sm align-middle">
+        <thead>
+          <tr>
+            <th scope="col" style="width: 40px;">
+              <div class="form-check m-0 ms-2 me-n2">
+                <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="toggleAllEnabled" [disabled]="processedMails.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
+                <label class="form-check-label" for="all-objects"></label>
+              </div>
+            </th>
+            <th scope="col" i18n>Subject</th>
+            <th scope="col" i18n>Received</th>
+            <th scope="col" i18n>Processed</th>
+            <th scope="col" i18n>Status</th>
+            <th scope="col" i18n>Error</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (mail of processedMails; track mail.id) {
+            <ng-template #statusTooltip>
+              <div class="small text-light font-monospace">
+                  {{mail.status}}
+              </div>
+            </ng-template>
+            <tr>
+              <td>
+                <div class="form-check m-0 ms-2 me-n2">
+                  <input type="checkbox" class="form-check-input" [id]="mail.id" [checked]="selectedMailIds.has(mail.id)" (click)="toggleSelected(mail); $event.stopPropagation();">
+                  <label class="form-check-label" [for]="mail.id"></label>
+                </div>
+              </td>
+              <td>{{ mail.subject }}</td>
+              <td>{{ mail.received | customDate:'longDate' }}</td>
+              <td>{{ mail.processed | customDate:'longDate' }}</td>
+              <td>
+                @switch (mail.status) {
+                  @case ('SUCCESS') {
+                    <i-bs name="check-circle" title="SUCCESS" class="text-success" [ngbTooltip]="statusTooltip"></i-bs>
+                  }
+                  @case ('FAILED') {
+                    <i-bs name="exclamation-triangle" title="FAILED" class="text-danger" [ngbTooltip]="statusTooltip"></i-bs>
+                  }
+                  @default {
+                    <i-bs name="slash-circle" title="{{ mail.status }}" class="text-muted" [ngbTooltip]="statusTooltip"></i-bs>
+                  }
+                }
+              </td>
+              <td>
+                <ng-template #errorPopover>
+                  <pre class="small text-light">
+                    {{ mail.error }}
+                  </pre>
+                </ng-template>
+                @if (mail.error) {
+                  <span class="text-danger" triggers="mouseenter:mouseleave" [ngbPopover]="errorPopover">{{ mail.error | slice:0:20 }}</span>
+                }
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <div class="btn-toolbar">
+      <button type="button" class="btn btn-outline-secondary me-2" (click)="clearSelection()" [disabled]="selectedMailIds.size === 0" i18n>Clear</button>
+      <pngx-confirm-button
+        label="Delete selected"
+        i18n-label
+        title="Delete selected"
+        i18n-title
+        buttonClasses="btn-outline-danger"
+        iconName="trash"
+        [disabled]="selectedMailIds.size === 0"
+        (confirm)="deleteSelected()">
+      </pngx-confirm-button>
+      <div class="ms-auto">
+        <ngb-pagination
+          [collectionSize]="processedMails.length"
+          [(page)]="page"
+          [pageSize]="50"
+          [maxSize]="5"
+          (pageChange)="loadProcessedMails()">
+        </ngb-pagination>
+      </div>
+    </div>
+  }
+</div>
--- a/src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.scss
+++ b/src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.scss
@@ -0,0 +1,8 @@
+::ng-deep .popover {
+    max-width: 350px;
+
+    pre {
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+}
--- a/src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.spec.ts
+++ b/src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.spec.ts
@@ -0,0 +1,150 @@
+import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+import { ProcessedMailDialogComponent } from './processed-mail-dialog.component'
+
+describe('ProcessedMailDialogComponent', () => {
+  let component: ProcessedMailDialogComponent
+  let fixture: ComponentFixture<ProcessedMailDialogComponent>
+  let httpTestingController: HttpTestingController
+  let toastService: ToastService
+
+  const rule: any = { id: 10, name: 'Mail Rule' } // minimal rule object for tests
+  const mails = [
+    {
+      id: 1,
+      rule: rule.id,
+      folder: 'INBOX',
+      uid: 111,
+      subject: 'A',
+      received: new Date().toISOString(),
+      processed: new Date().toISOString(),
+      status: 'SUCCESS',
+      error: null,
+    },
+    {
+      id: 2,
+      rule: rule.id,
+      folder: 'INBOX',
+      uid: 222,
+      subject: 'B',
+      received: new Date().toISOString(),
+      processed: new Date().toISOString(),
+      status: 'FAILED',
+      error: 'Oops',
+    },
+  ]
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ProcessedMailDialogComponent,
+        FormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        DatePipe,
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    httpTestingController = TestBed.inject(HttpTestingController)
+    toastService = TestBed.inject(ToastService)
+    fixture = TestBed.createComponent(ProcessedMailDialogComponent)
+    component = fixture.componentInstance
+    component.rule = rule
+  })
+
+  afterEach(() => {
+    httpTestingController.verify()
+  })
+
+  function expectListRequest(ruleId: number) {
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}processed_mail/?page=1&page_size=50&ordering=-processed_at&rule=${ruleId}`
+    )
+    expect(req.request.method).toEqual('GET')
+    return req
+  }
+
+  it('should load processed mails on init', () => {
+    fixture.detectChanges()
+    const req = expectListRequest(rule.id)
+    req.flush({ count: 2, results: mails })
+    expect(component.loading).toBeFalsy()
+    expect(component.processedMails).toEqual(mails)
+  })
+
+  it('should delete selected mails and reload', () => {
+    fixture.detectChanges()
+    // initial load
+    const initialReq = expectListRequest(rule.id)
+    initialReq.flush({ count: 0, results: [] })
+
+    // select a couple of mails and delete
+    component.selectedMailIds.add(5)
+    component.selectedMailIds.add(6)
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    component.deleteSelected()
+
+    const delReq = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}processed_mail/bulk_delete/`
+    )
+    expect(delReq.request.method).toEqual('POST')
+    expect(delReq.request.body).toEqual({ mail_ids: [5, 6] })
+    delReq.flush({})
+
+    // reload after delete
+    const reloadReq = expectListRequest(rule.id)
+    reloadReq.flush({ count: 0, results: [] })
+    expect(toastInfoSpy).toHaveBeenCalled()
+  })
+
+  it('should toggle all, toggle selected, and clear selection', () => {
+    fixture.detectChanges()
+    // initial load with two mails
+    const req = expectListRequest(rule.id)
+    req.flush({ count: 2, results: mails })
+    fixture.detectChanges()
+
+    // toggle all via header checkbox
+    const inputs = fixture.debugElement.queryAll(
+      By.css('input.form-check-input')
+    )
+    const header = inputs[0].nativeElement as HTMLInputElement
+    header.dispatchEvent(new Event('click'))
+    header.checked = true
+    header.dispatchEvent(new Event('click'))
+    expect(component.selectedMailIds.size).toEqual(mails.length)
+
+    // toggle a single mail
+    component.toggleSelected(mails[0] as any)
+    expect(component.selectedMailIds.has(mails[0].id)).toBeFalsy()
+    component.toggleSelected(mails[0] as any)
+    expect(component.selectedMailIds.has(mails[0].id)).toBeTruthy()
+
+    // clear selection
+    component.clearSelection()
+    expect(component.selectedMailIds.size).toEqual(0)
+    expect(component.toggleAllEnabled).toBeFalsy()
+  })
+
+  it('should close the dialog', () => {
+    const activeModal = TestBed.inject(NgbActiveModal)
+    const closeSpy = jest.spyOn(activeModal, 'close')
+    component.close()
+    expect(closeSpy).toHaveBeenCalled()
+  })
+})
--- a/src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.ts
+++ b/src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.ts
@@ -0,0 +1,96 @@
+import { SlicePipe } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import {
+  NgbActiveModal,
+  NgbPagination,
+  NgbPopoverModule,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { ConfirmButtonComponent } from 'src/app/components/common/confirm-button/confirm-button.component'
+import { MailRule } from 'src/app/data/mail-rule'
+import { ProcessedMail } from 'src/app/data/processed-mail'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { ProcessedMailService } from 'src/app/services/rest/processed-mail.service'
+import { ToastService } from 'src/app/services/toast.service'
+
+@Component({
+  selector: 'pngx-processed-mail-dialog',
+  imports: [
+    ConfirmButtonComponent,
+    CustomDatePipe,
+    NgbPagination,
+    NgbPopoverModule,
+    NgbTooltipModule,
+    NgxBootstrapIconsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SlicePipe,
+  ],
+  templateUrl: './processed-mail-dialog.component.html',
+  styleUrl: './processed-mail-dialog.component.scss',
+})
+export class ProcessedMailDialogComponent implements OnInit {
+  private readonly activeModal = inject(NgbActiveModal)
+  private readonly processedMailService = inject(ProcessedMailService)
+  private readonly toastService = inject(ToastService)
+
+  public processedMails: ProcessedMail[] = []
+
+  public loading: boolean = true
+  public toggleAllEnabled: boolean = false
+  public readonly selectedMailIds: Set<number> = new Set<number>()
+
+  public page: number = 1
+
+  @Input() rule: MailRule
+
+  ngOnInit(): void {
+    this.loadProcessedMails()
+  }
+
+  public close() {
+    this.activeModal.close()
+  }
+
+  private loadProcessedMails(): void {
+    this.loading = true
+    this.clearSelection()
+    this.processedMailService
+      .list(this.page, 50, 'processed_at', true, { rule: this.rule.id })
+      .subscribe((result) => {
+        this.processedMails = result.results
+        this.loading = false
+      })
+  }
+
+  public deleteSelected(): void {
+    this.processedMailService
+      .bulk_delete(Array.from(this.selectedMailIds))
+      .subscribe(() => {
+        this.toastService.showInfo($localize`Processed mail(s) deleted`)
+        this.loadProcessedMails()
+      })
+  }
+
+  public toggleAll(event: PointerEvent) {
+    if ((event.target as HTMLInputElement).checked) {
+      this.selectedMailIds.clear()
+      this.processedMails.forEach((mail) => this.selectedMailIds.add(mail.id))
+    } else {
+      this.clearSelection()
+    }
+  }
+
+  public clearSelection() {
+    this.toggleAllEnabled = false
+    this.selectedMailIds.clear()
+  }
+
+  public toggleSelected(mail: ProcessedMail) {
+    this.selectedMailIds.has(mail.id)
+      ? this.selectedMailIds.delete(mail.id)
+      : this.selectedMailIds.add(mail.id)
+  }
+}
--- a/src-ui/src/app/components/manage/management-list/management-list.component.html
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.html
@@ -54,61 +54,7 @@
        </tr>
      }
      @for (object of data; track object) {
-        <tr (click)="toggleSelected(object); $event.stopPropagation();" class="data-row fade" [class.show]="show">
-          <td>
-            <div class="form-check m-0 ms-2 me-n2">
-              <input type="checkbox" class="form-check-input" id="{{typeName}}{{object.id}}" [checked]="selectedObjects.has(object.id)" (click)="toggleSelected(object); $event.stopPropagation();">
-              <label class="form-check-label" for="{{typeName}}{{object.id}}"></label>
-            </div>
-          </td>
-          <td scope="row"><button class="btn btn-link ms-0 ps-0 text-start" (click)="userCanEdit(object) ? openEditDialog(object) : null; $event.stopPropagation()">{{ object.name }}</button> </td>
-          <td scope="row" class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>
-          <td scope="row">{{ object.document_count }}</td>
-          @for (column of extraColumns; track column) {
-            <td scope="row" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }">
-              @if (column.rendersHtml) {
-                <div [innerHtml]="column.valueFn.call(null, object) | safeHtml"></div>
-              } @else if (column.monospace) {
-                <span class="font-monospace">{{ column.valueFn.call(null, object) }}</span>
-              } @else {
-                {{ column.valueFn.call(null, object) }}
-              }
-            </td>
-          }
-          <td scope="row">
-            <div class="btn-toolbar gap-2">
-              <div class="btn-group d-block d-sm-none">
-                <div ngbDropdown container="body" class="d-inline-block">
-                  <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle>
-                    <i-bs name="three-dots-vertical"></i-bs>
-                  </button>
-                  <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
-                    <button (click)="openEditDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" ngbDropdownItem i18n>Edit</button>
-                    <button class="text-danger" (click)="openDeleteDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" ngbDropdownItem i18n>Delete</button>
-                    @if (object.document_count > 0) {
-                      <button (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents ({{ object.document_count }})</button>
-                    }
-                  </div>
-                </div>
-              </div>
-              <div class="btn-group d-none d-sm-inline-block">
-                <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
-                  <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
-                </button>
-                <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
-                  <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-                </button>
-              </div>
-              @if (object.document_count > 0) {
-                <div class="btn-group d-none d-sm-inline-block">
-                  <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-                    <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container><span class="badge bg-light text-secondary ms-2">{{ object.document_count }}</span>
-                  </button>
-                </div>
-              }
-            </div>
-          </td>
-        </tr>
+        <ng-container [ngTemplateOutlet]="objectRow" [ngTemplateOutletContext]="{ object: object, depth: 0 }"></ng-container>
      }
    </tbody>
  </table>
@@ -129,3 +75,72 @@
    }
  </div>
 }
+
+<ng-template #objectRow let-object="object" let-depth="depth">
+  <tr (click)="toggleSelected(object); $event.stopPropagation();" class="data-row fade" [class.show]="show">
+    <td>
+      <div class="form-check m-0 ms-2 me-n2">
+        <input type="checkbox" class="form-check-input" id="{{typeName}}{{object.id}}" [checked]="selectedObjects.has(object.id)" (click)="toggleSelected(object); $event.stopPropagation();">
+        <label class="form-check-label" for="{{typeName}}{{object.id}}"></label>
+      </div>
+    </td>
+    <td scope="row" class="name-cell" style="--depth: {{depth}}">
+      @if (depth > 0) {
+        <div class="indicator"></div>
+      }
+      <button class="btn btn-link ms-0 ps-0 text-start" (click)="userCanEdit(object) ? openEditDialog(object) : null; $event.stopPropagation()">{{ object.name }}</button>
+    </td>
+    <td scope="row" class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>
+    <td scope="row">{{ getDocumentCount(object) }}</td>
+    @for (column of extraColumns; track column) {
+      <td scope="row" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }">
+        @if (column.rendersHtml) {
+          <div [innerHtml]="column.valueFn.call(null, object) | safeHtml"></div>
+        } @else if (column.monospace) {
+          <span class="font-monospace">{{ column.valueFn.call(null, object) }}</span>
+        } @else {
+          {{ column.valueFn.call(null, object) }}
+        }
+      </td>
+    }
+    <td scope="row">
+      <div class="btn-toolbar gap-2">
+        <div class="btn-group d-block d-sm-none">
+          <div ngbDropdown container="body" class="d-inline-block">
+            <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle>
+              <i-bs name="three-dots-vertical"></i-bs>
+            </button>
+            <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
+              <button (click)="openEditDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" ngbDropdownItem i18n>Edit</button>
+              <button class="text-danger" (click)="openDeleteDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" ngbDropdownItem i18n>Delete</button>
+              @if (getDocumentCount(object) > 0) {
+                <button (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents ({{ getDocumentCount(object) }})</button>
+              }
+            </div>
+          </div>
+        </div>
+        <div class="btn-group d-none d-sm-inline-block">
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
+            <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+          </button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
+            <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+          </button>
+        </div>
+        @if (getDocumentCount(object) > 0) {
+          <div class="btn-group d-none d-sm-inline-block">
+            <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+              <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container><span class="badge bg-light text-secondary ms-2">{{ getDocumentCount(object) }}</span>
+            </button>
+          </div>
+        }
+      </div>
+    </td>
+  </tr>
+
+  @if (object.children && object.children.length > 0) {
+    @for (child of object.children; track child) {
+      <ng-container [ngTemplateOutlet]="objectRow" [ngTemplateOutletContext]="{ object: child, depth: depth + 1 }"></ng-container>
+    }
+  }
+</ng-template>
--- a/src-ui/src/app/components/manage/management-list/management-list.component.scss
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.scss
@@ -10,3 +10,17 @@ tbody tr:last-child td {
 .form-check {
    min-height: 0;
 }
+
+td.name-cell {
+    padding-left: calc(calc(var(--depth) - 1) * 1.1rem);
+
+    .indicator {
+        display: inline-block;
+        width: .8rem;
+        height: .8rem;
+        border-left: 1px solid var(--bs-secondary);
+        border-bottom: 1px solid var(--bs-secondary);
+        margin-right: .25rem;
+        margin-left: .5rem;
+    }
+}
--- 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
@@ -79,6 +79,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
  @ViewChildren(SortableDirective) headers: QueryList<SortableDirective>

  public data: T[] = []
+  private unfilteredData: T[] = []

  public page = 1

@@ -132,6 +133,18 @@ export abstract class ManagementListComponent<T extends MatchingModel>
    this.reloadData()
  }

+  protected filterData(data: T[]): T[] {
+    return data
+  }
+
+  getDocumentCount(object: MatchingModel): number {
+    return (
+      object.document_count ??
+      this.unfilteredData.find((d) => d.id == object.id)?.document_count ??
+      0
+    )
+  }
+
  reloadData(extraParams: { [key: string]: any } = null) {
    this.loading = true
    this.clearSelection()
@@ -148,7 +161,8 @@ export abstract class ManagementListComponent<T extends MatchingModel>
      .pipe(
        takeUntil(this.unsubscribeNotifier),
        tap((c) => {
-          this.data = c.results
+          this.unfilteredData = c.results
+          this.data = this.filterData(c.results)
          this.collectionSize = c.count
        }),
        delay(100)
--- 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
@@ -1,4 +1,4 @@
-import { NgClass, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -30,6 +30,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    FormsModule,
    ReactiveFormsModule,
    NgClass,
+    NgTemplateOutlet,
    NgbDropdownModule,
    NgbPaginationModule,
    NgxBootstrapIconsModule,
--- a/src-ui/src/app/components/manage/tag-list/tag-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.spec.ts
@@ -71,4 +71,20 @@ describe('TagListComponent', () => {
      'Do you really want to delete the tag "Tag1"?'
    )
  })
+
+  it('should filter out child tags if name filter is empty, otherwise show all', () => {
+    const tags = [
+      { id: 1, name: 'Tag1', parent: null },
+      { id: 2, name: 'Tag2', parent: 1 },
+      { id: 3, name: 'Tag3', parent: null },
+    ]
+    component['_nameFilter'] = null // Simulate empty name filter
+    const filtered = component.filterData(tags as any)
+    expect(filtered.length).toBe(2)
+    expect(filtered.find((t) => t.id === 2)).toBeUndefined()
+
+    component['_nameFilter'] = 'Tag2' // Simulate non-empty name filter
+    const filteredWithName = component.filterData(tags as any)
+    expect(filteredWithName.length).toBe(3)
+  })
 })
--- a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
+++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -30,6 +30,7 @@ import { ManagementListComponent } from '../management-list/management-list.comp
    FormsModule,
    ReactiveFormsModule,
    NgClass,
+    NgTemplateOutlet,
    NgbDropdownModule,
    NgbPaginationModule,
    NgxBootstrapIconsModule,
@@ -59,4 +60,10 @@ export class TagListComponent extends ManagementListComponent<Tag> {
  getDeleteMessage(object: Tag) {
    return $localize`Do you really want to delete the tag "${object.name}"?`
  }
+
+  filterData(data: Tag[]) {
+    return this.nameFilter?.length
+      ? [...data]
+      : data.filter((tag) => !tag.parent)
+  }
 }
--- a/src-ui/src/app/data/processed-mail.ts
+++ b/src-ui/src/app/data/processed-mail.ts
@@ -0,0 +1,12 @@
+import { ObjectWithId } from './object-with-id'
+
+export interface ProcessedMail extends ObjectWithId {
+  rule: number // MailRule.id
+  folder: string
+  uid: number
+  subject: string
+  received: Date
+  processed: Date
+  status: string
+  error: string
+}
--- a/src-ui/src/app/data/tag.ts
+++ b/src-ui/src/app/data/tag.ts
@@ -6,4 +6,12 @@ export interface Tag extends MatchingModel {
  text_color?: string

  is_inbox_tag?: boolean
+
+  parent?: number // Tag ID
+
+  children?: Tag[] // read-only
+
+  // UI-only: computed depth and order for hierarchical dropdowns
+  depth?: number
+  orderIndex?: number
 }
--- a/src-ui/src/app/services/permissions.service.ts
+++ b/src-ui/src/app/services/permissions.service.ts
@@ -28,6 +28,7 @@ export enum PermissionType {
  ShareLink = '%s_sharelink',
  CustomField = '%s_customfield',
  Workflow = '%s_workflow',
+  ProcessedMail = '%s_processedmail',
 }

@Injectable({
--- a/src-ui/src/app/services/rest/processed-mail.service.spec.ts
+++ b/src-ui/src/app/services/rest/processed-mail.service.spec.ts
@@ -0,0 +1,39 @@
+import { HttpTestingController } from '@angular/common/http/testing'
+import { TestBed } from '@angular/core/testing'
+import { Subscription } from 'rxjs'
+import { environment } from 'src/environments/environment'
+import { commonAbstractPaperlessServiceTests } from './abstract-paperless-service.spec'
+import { ProcessedMailService } from './processed-mail.service'
+
+let httpTestingController: HttpTestingController
+let service: ProcessedMailService
+let subscription: Subscription
+const endpoint = 'processed_mail'
+
+// run common tests
+commonAbstractPaperlessServiceTests(endpoint, ProcessedMailService)
+
+describe('Additional service tests for ProcessedMailService', () => {
+  beforeEach(() => {
+    // Dont need to setup again
+
+    httpTestingController = TestBed.inject(HttpTestingController)
+    service = TestBed.inject(ProcessedMailService)
+  })
+
+  afterEach(() => {
+    subscription?.unsubscribe()
+    httpTestingController.verify()
+  })
+
+  it('should call appropriate api endpoint for bulk delete', () => {
+    const ids = [1, 2, 3]
+    subscription = service.bulk_delete(ids).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/bulk_delete/`
+    )
+    expect(req.request.method).toEqual('POST')
+    expect(req.request.body).toEqual({ mail_ids: ids })
+    req.flush({})
+  })
+})
--- a/src-ui/src/app/services/rest/processed-mail.service.ts
+++ b/src-ui/src/app/services/rest/processed-mail.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core'
+import { ProcessedMail } from 'src/app/data/processed-mail'
+import { AbstractPaperlessService } from './abstract-paperless-service'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProcessedMailService extends AbstractPaperlessService<ProcessedMail> {
+  constructor() {
+    super()
+    this.resourceName = 'processed_mail'
+  }
+
+  public bulk_delete(mailIds: number[]) {
+    return this.http.post(`${this.getResourceUrl()}bulk_delete/`, {
+      mail_ids: mailIds,
+    })
+  }
+}
--- a/src-ui/src/app/utils/flatten-tags.spec.ts
+++ b/src-ui/src/app/utils/flatten-tags.spec.ts
@@ -0,0 +1,63 @@
+import type { Tag } from '../data/tag'
+import { flattenTags } from './flatten-tags'
+
+describe('flattenTags', () => {
+  it('returns empty array for empty input', () => {
+    expect(flattenTags([])).toEqual([])
+  })
+
+  it('orders roots and children by name (case-insensitive, numeric) and sets depth/orderIndex', () => {
+    const input: Tag[] = [
+      { id: 11, name: 'A-root' },
+      { id: 10, name: 'B-root' },
+      { id: 101, name: 'Child 10', parent: 11 },
+      { id: 102, name: 'child 2', parent: 11 },
+      { id: 201, name: 'beta', parent: 10 },
+      { id: 202, name: 'Alpha', parent: 10 },
+      { id: 103, name: 'Sub 1', parent: 102 },
+    ]
+
+    const flat = flattenTags(input)
+
+    const names = flat.map((t) => t.name)
+    expect(names).toEqual([
+      'A-root',
+      'child 2',
+      'Sub 1',
+      'Child 10',
+      'B-root',
+      'Alpha',
+      'beta',
+    ])
+
+    expect(flat.map((t) => t.depth)).toEqual([0, 1, 2, 1, 0, 1, 1])
+    expect(flat.map((t) => t.orderIndex)).toEqual([0, 1, 2, 3, 4, 5, 6])
+
+    // Children are rebuilt
+    const aRoot = flat.find((t) => t.name === 'A-root')
+    expect(new Set(aRoot.children?.map((c) => c.name))).toEqual(
+      new Set(['child 2', 'Child 10'])
+    )
+
+    const bRoot = flat.find((t) => t.name === 'B-root')
+    expect(new Set(bRoot.children?.map((c) => c.name))).toEqual(
+      new Set(['Alpha', 'beta'])
+    )
+
+    const child2 = flat.find((t) => t.name === 'child 2')
+    expect(new Set(child2.children?.map((c) => c.name))).toEqual(
+      new Set(['Sub 1'])
+    )
+  })
+
+  it('excludes orphaned nodes (with missing parent)', () => {
+    const input: Tag[] = [
+      { id: 1, name: 'Root' },
+      { id: 2, name: 'Child', parent: 1 },
+      { id: 3, name: 'Orphan', parent: 999 }, // missing parent
+    ]
+
+    const flat = flattenTags(input)
+    expect(flat.map((t) => t.name)).toEqual(['Root', 'Child'])
+  })
+})
--- a/src-ui/src/app/utils/flatten-tags.ts
+++ b/src-ui/src/app/utils/flatten-tags.ts
@@ -0,0 +1,35 @@
+import { Tag } from '../data/tag'
+
+export function flattenTags(all: Tag[]): Tag[] {
+  const map = new Map<number, Tag>(
+    all.map((t) => [t.id, { ...t, children: [] }])
+  )
+  // rebuild children
+  for (const t of map.values()) {
+    if (t.parent) {
+      const p = map.get(t.parent)
+      p?.children.push(t)
+    }
+  }
+  const roots = Array.from(map.values()).filter((t) => !t.parent)
+  const sortByName = (a: Tag, b: Tag) =>
+    a.name.localeCompare(b.name, undefined, {
+      sensitivity: 'base',
+      numeric: true,
+    })
+  const ordered: Tag[] = []
+  let idx = 0
+  const walk = (node: Tag, depth: number) => {
+    node.depth = depth
+    node.orderIndex = idx++
+    ordered.push(node)
+    if (node.children?.length) {
+      for (const child of [...node.children].sort(sortByName)) {
+        walk(child, depth + 1)
+      }
+    }
+  }
+  roots.sort(sortByName)
+  roots.forEach((r) => walk(r, 0))
+  return ordered
+}
--- a/src-ui/src/main.ts
+++ b/src-ui/src/main.ts
@@ -53,14 +53,17 @@ import {
  check,
  check2All,
  checkAll,
+  checkCircle,
  checkCircleFill,
  checkLg,
  chevronDoubleLeft,
  chevronDoubleRight,
+  chevronRight,
  clipboard,
  clipboardCheck,
  clipboardCheckFill,
  clipboardFill,
+  clockHistory,
  dash,
  dashCircle,
  diagram3,
@@ -96,6 +99,7 @@ import {
  infoCircle,
  journals,
  link,
+  listNested,
  listTask,
  listUl,
  microsoft,
@@ -265,14 +269,17 @@ const icons = {
  check,
  check2All,
  checkAll,
+  checkCircle,
  checkCircleFill,
  checkLg,
  chevronDoubleLeft,
  chevronDoubleRight,
+  chevronRight,
  clipboard,
  clipboardCheck,
  clipboardCheckFill,
  clipboardFill,
+  clockHistory,
  dash,
  dashCircle,
  diagram3,
@@ -308,6 +315,7 @@ const icons = {
  infoCircle,
  journals,
  link,
+  listNested,
  listTask,
  listUl,
  microsoft,