Merge branch 'dev' into feature/ocr-templates

src-ui/src/app/app-routing.module.ts

@@ -16,6 +16,7 @@ import { MailComponent } from './components/manage/mail/mail.component'
 import { OcrTemplateEditorComponent } from './components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component'
 import { OcrTemplatesComponent } from './components/manage/ocr-templates/ocr-templates.component'
 import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
+import { ShareLinksComponent } from './components/manage/share-links/share-links.component'
 import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
 import { NotFoundComponent } from './components/not-found/not-found.component'
 import { DirtyDocGuard } from './guards/dirty-doc.guard'
@@ -348,6 +349,24 @@ export const routes: Routes = [
           componentName: 'SavedViewsComponent',
         },
       },
+      {
+        path: 'share-links',
+        component: ShareLinksComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermissionAny: [
+            {
+              action: PermissionAction.View,
+              type: PermissionType.ShareLink,
+            },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.ShareLinkBundle,
+            },
+          ],
+          componentName: 'ShareLinksComponent',
+        },
+      },
     ],
   },
 

src-ui/src/app/app.component.spec.ts

@@ -19,6 +19,7 @@ import { PermissionsGuard } from './guards/permissions.guard'
 import { HotKeyService } from './services/hot-key.service'
 import { PermissionsService } from './services/permissions.service'
 import { SettingsService } from './services/settings.service'
+import { TasksService } from './services/tasks.service'
 import { Toast, ToastService } from './services/toast.service'
 import {
   FileStatus,
@@ -34,6 +35,7 @@ describe('AppComponent', () => {
   let toastService: ToastService
   let router: Router
   let settingsService: SettingsService
+  let tasksService: TasksService
   let hotKeyService: HotKeyService
 
   beforeEach(async () => {
@@ -60,6 +62,7 @@ describe('AppComponent', () => {
     websocketStatusService = TestBed.inject(WebsocketStatusService)
     permissionsService = TestBed.inject(PermissionsService)
     settingsService = TestBed.inject(SettingsService)
+    tasksService = TestBed.inject(TasksService)
     toastService = TestBed.inject(ToastService)
     router = TestBed.inject(Router)
     hotKeyService = TestBed.inject(HotKeyService)
@@ -117,30 +120,33 @@ describe('AppComponent', () => {
     expect(toast.action).toBeUndefined()
   })
 
-  it('should display toast on document added', () => {
-    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+  it('should only reload tasks when a document is detected', () => {
     const toastSpy = jest.spyOn(toastService, 'show')
+    const reloadSpy = jest.spyOn(tasksService, 'reload')
     const fileStatusSubject = new Subject<FileStatus>()
     jest
       .spyOn(websocketStatusService, 'onDocumentDetected')
       .mockReturnValue(fileStatusSubject)
     component.ngOnInit()
     fileStatusSubject.next(new FileStatus())
-    expect(toastSpy).toHaveBeenCalled()
+    expect(reloadSpy).toHaveBeenCalled()
+    expect(toastSpy).not.toHaveBeenCalled()
   })
 
-  it('should suppress dashboard notifications if set', () => {
+  it('should add consumed documents to the bell without a popup', () => {
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
-    jest.spyOn(router, 'url', 'get').mockReturnValue('/dashboard')
-    const toastSpy = jest.spyOn(toastService, 'show')
+    const popupSpy = jest.fn()
+    toastService.showToast.subscribe(popupSpy)
+    let toasts: Toast[] = []
+    toastService.getToasts().subscribe((t) => (toasts = [...t]))
     const fileStatusSubject = new Subject<FileStatus>()
     jest
-      .spyOn(websocketStatusService, 'onDocumentDetected')
+      .spyOn(websocketStatusService, 'onDocumentConsumptionFinished')
       .mockReturnValue(fileStatusSubject)
     component.ngOnInit()
     fileStatusSubject.next(new FileStatus())
-    expect(toastSpy).not.toHaveBeenCalled()
+    expect(toasts).toHaveLength(1)
+    expect(popupSpy).not.toHaveBeenCalled()
   })
 
   it('should display toast on document failed', () => {

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

@@ -14,7 +14,7 @@ import {
 } from './services/permissions.service'
 import { SettingsService } from './services/settings.service'
 import { TasksService } from './services/tasks.service'
-import { ToastService } from './services/toast.service'
+import { ToastLevel, ToastService } from './services/toast.service'
 import { WebsocketStatusService } from './services/websocket-status.service'
 
 @Component({
@@ -61,18 +61,6 @@ export class AppComponent implements OnInit, OnDestroy {
     }
   }
 
-  private showNotification(key) {
-    if (
-      this.router.url == '/dashboard' &&
-      this.settings.get(
-        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD
-      )
-    ) {
-      return false
-    }
-    return this.settings.get(key)
-  }
-
   ngOnInit(): void {
     this.websocketStatusService.connect()
 
@@ -80,29 +68,22 @@ export class AppComponent implements OnInit, OnDestroy {
       .onDocumentConsumptionFinished()
       .subscribe((status) => {
         this.tasksService.reload()
-        if (
-          this.showNotification(SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS)
-        ) {
-          if (
-            this.permissionsService.currentUserCan(
-              PermissionAction.View,
-              PermissionType.Document
-            )
-          ) {
-            this.toastService.show({
-              content: $localize`Document ${status.filename} was added to Paperless-ngx.`,
-              delay: 10000,
-              actionName: $localize`Open document`,
-              action: () => {
-                this.router.navigate(['documents', status.documentId])
-              },
-            })
-          } else {
-            this.toastService.show({
-              content: $localize`Document ${status.filename} was added to Paperless-ngx.`,
-              delay: 10000,
-            })
-          }
+        if (this.settings.get(SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS)) {
+          const canView = this.permissionsService.currentUserCan(
+            PermissionAction.View,
+            PermissionType.Document
+          )
+          // the upload status tray already shows this, so only keep a record
+          this.toastService.show({
+            content: $localize`Document ${status.filename} was added to Paperless-ngx.`,
+            delay: 10000,
+            level: ToastLevel.Success,
+            silent: true,
+            actionName: canView ? $localize`Open document` : undefined,
+            action: canView
+              ? () => this.router.navigate(['documents', status.documentId])
+              : undefined,
+          })
         }
       })
 
@@ -110,9 +91,7 @@ export class AppComponent implements OnInit, OnDestroy {
       .onDocumentConsumptionFailed()
       .subscribe((status) => {
         this.tasksService.reload()
-        if (
-          this.showNotification(SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED)
-        ) {
+        if (this.settings.get(SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED)) {
           this.toastService.showError(
             $localize`Could not add ${status.filename}\: ${status.message}`
           )
@@ -121,18 +100,8 @@ export class AppComponent implements OnInit, OnDestroy {
 
     this.newDocumentSubscription = this.websocketStatusService
       .onDocumentDetected()
-      .subscribe((status) => {
+      .subscribe(() => {
         this.tasksService.reload()
-        if (
-          this.showNotification(
-            SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT
-          )
-        ) {
-          this.toastService.show({
-            content: $localize`Document ${status.filename} is being processed by Paperless-ngx.`,
-            delay: 5000,
-          })
-        }
       })
 
     this.hotKeyService

src-ui/src/app/components/admin/config/config.component.ts

@@ -190,7 +190,7 @@ export class ConfigComponent
           this.initialize(config)
           this.store.next(config)
           this.settingsService.initializeSettings().subscribe()
-          this.toastService.showInfo($localize`Configuration updated`)
+          this.toastService.showSuccess($localize`Configuration updated`)
         },
         error: (e) => {
           this.loading.set(false)
@@ -217,7 +217,7 @@ export class ConfigComponent
           this.initialize(config)
           this.store.next(config)
           this.settingsService.initializeSettings().subscribe()
-          this.toastService.showInfo($localize`File successfully updated`)
+          this.toastService.showSuccess($localize`File successfully updated`)
         },
         error: (e) => {
           this.loading.set(false)

src-ui/src/app/components/admin/settings/settings.component.html

@@ -112,6 +112,22 @@
 
                 <pngx-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></pngx-input-check>
 
+                <p class="mb-2 mt-3" i18n>Sidebar items to show:</p>
+                @for (option of sidebarItemOptions; track option.id) {
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      [id]="'sidebar-item-setting-' + option.id"
+                      [checked]="isSidebarItemShown(option.id)"
+                      (change)="toggleSidebarItem(option.id, $event.target.checked)"
+                    />
+                    <label class="form-check-label" [for]="'sidebar-item-setting-' + option.id">
+                      {{ option.label }}
+                    </label>
+                  </div>
+                }
+
               </div>
             </div>
 
@@ -237,6 +253,24 @@
               </div>
             </div>
 
+            @if (aiEnabled) {
+              <div class="row mb-3">
+                <div class="col-md-3 col-form-label pt-0">
+                  <span i18n>Suggestions default to</span>
+                </div>
+                <div class="col">
+                  <fieldset class="btn-group btn-group-sm">
+                    <input type="radio" class="btn-check" id="suggestionSourceBoth" [value]="SuggestionSource.Both" formControlName="documentEditingSuggestionSource">
+                    <label class="btn btn-outline-primary" for="suggestionSourceBoth"><ng-container i18n>Both</ng-container></label>
+                    <input type="radio" class="btn-check" id="suggestionSourceML" [value]="SuggestionSource.ML" formControlName="documentEditingSuggestionSource">
+                    <label class="btn btn-outline-primary" for="suggestionSourceML"><i-bs class="me-1" name="cpu"></i-bs><ng-container i18n>ML only</ng-container></label>
+                    <input type="radio" class="btn-check" id="suggestionSourceAI" [value]="SuggestionSource.AI" formControlName="documentEditingSuggestionSource">
+                    <label class="btn btn-outline-primary" for="suggestionSourceAI"><i-bs class="me-1" name="stars"></i-bs><ng-container i18n>AI only</ng-container></label>
+                  </fieldset>
+                </div>
+              </div>
+            }
+
             <div class="row">
               <div class="col">
                 <pngx-input-check i18n-title title="Automatically request suggestions for inbox documents" i18n-hint hint="If un-checked, suggestions must be requested via the Suggest button." formControlName="documentEditingAutoSuggest"></pngx-input-check>
@@ -391,10 +425,8 @@
 
         <div class="row">
           <div class="col">
-            <pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
-            <pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
+            <pngx-input-check i18n-title title="Add notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess" i18n-hint hint="These are added to the notifications menu without a popup, processing progress is shown at the bottom of the screen."></pngx-input-check>
             <pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
-            <pngx-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></pngx-input-check>
           </div>
         </div>
 

src-ui/src/app/components/admin/settings/settings.component.spec.ts

@@ -24,7 +24,7 @@ import {
   SystemStatus,
   SystemStatusItemStatus,
 } from 'src/app/data/system-status'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { HideableSidebarItemID, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
@@ -209,6 +209,45 @@ describe('SettingsComponent', () => {
     fixture.detectChanges()
   }
 
+  it('supports configuring sidebar items and canceling changes', () => {
+    completeSetup()
+
+    component.toggleSidebarItem(HideableSidebarItemID.Workflows, false)
+    fixture.detectChanges()
+
+    expect(component.settingsForm.value.sidebarHiddenItems).toContain(
+      HideableSidebarItemID.Workflows
+    )
+
+    settingsService.updateSidebarItemVisibility(
+      HideableSidebarItemID.Mail,
+      false
+    )
+
+    expect(component.settingsForm.value.sidebarHiddenItems).toContain(
+      HideableSidebarItemID.Mail
+    )
+
+    component.reset()
+
+    expect(component.settingsForm.value.sidebarHiddenItems).not.toContain(
+      HideableSidebarItemID.Workflows
+    )
+    expect(component.settingsForm.value.sidebarHiddenItems).not.toContain(
+      HideableSidebarItemID.Mail
+    )
+  })
+
+  it('enables sidebar item controls on general settings until destroyed', () => {
+    completeSetup()
+
+    expect(settingsService.organizingSidebarItems()).toBe(true)
+
+    component.ngOnDestroy()
+
+    expect(settingsService.organizingSidebarItems()).toBe(false)
+  })
+
   it('should support tabbed settings & change URL, prevent navigation if dirty confirmation rejected', async () => {
     completeSetup()
     const navigateSpy = jest.spyOn(router, 'navigate')
@@ -249,6 +288,7 @@ describe('SettingsComponent', () => {
 
   it('should support save local settings updating appearance settings and calling API, show error', () => {
     completeSetup()
+    component.toggleSidebarItem(HideableSidebarItemID.Workflows, false)
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastSpy = jest.spyOn(toastService, 'show')
     const storeSpy = jest.spyOn(settingsService, 'storeSettings')
@@ -268,6 +308,9 @@ describe('SettingsComponent', () => {
     expect(storeSpy).toHaveBeenCalled()
     expect(appearanceSettingsSpy).not.toHaveBeenCalled()
     expect(setSpy).toHaveBeenCalledTimes(33)
+    expect(setSpy).toHaveBeenCalledWith(SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS, [
+      HideableSidebarItemID.Workflows,
+    ])
 
     // succeed
     storeSpy.mockReturnValueOnce(of(true))

src-ui/src/app/components/admin/settings/settings.component.ts

@@ -39,7 +39,13 @@ import {
   SystemStatus,
   SystemStatusItemStatus,
 } from 'src/app/data/system-status'
-import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import {
+  GlobalSearchType,
+  HIDEABLE_SIDEBAR_ITEM_IDS,
+  HideableSidebarItemID,
+  SETTINGS_KEYS,
+  SuggestionSource,
+} from 'src/app/data/ui-settings'
 import { User } from 'src/app/data/user'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
@@ -57,7 +63,7 @@ import {
   SettingsService,
 } from 'src/app/services/settings.service'
 import { SystemStatusService } from 'src/app/services/system-status.service'
-import { Toast, ToastService } from 'src/app/services/toast.service'
+import { Toast, ToastLevel, ToastService } from 'src/app/services/toast.service'
 import { locationReload } from 'src/app/utils/navigation'
 import { CheckComponent } from '../../common/input/check/check.component'
 import { ColorComponent } from '../../common/input/color/color.component'
@@ -102,6 +108,15 @@ const documentDetailFieldOptions = [
   { id: DocumentDetailFieldID.Tags, label: $localize`Tags` },
 ]
 
+const sidebarItemLabels: Record<HideableSidebarItemID, string> = {
+  [HideableSidebarItemID.Dashboard]: $localize`Dashboard`,
+  [HideableSidebarItemID.SavedViews]: $localize`Saved Views`,
+  [HideableSidebarItemID.ShareLinks]: $localize`Share Links`,
+  [HideableSidebarItemID.Workflows]: $localize`Workflows`,
+  [HideableSidebarItemID.Mail]: $localize`Mail`,
+  [HideableSidebarItemID.Documentation]: $localize`Documentation`,
+}
+
 @Component({
   selector: 'pngx-settings',
   templateUrl: './settings.component.html',
@@ -149,6 +164,7 @@ export class SettingsComponent
     bulkEditApplyOnClose: new FormControl(null),
     documentListItemPerPage: new FormControl(null),
     slimSidebarEnabled: new FormControl(null),
+    sidebarHiddenItems: new FormControl<HideableSidebarItemID[]>([]),
     darkModeUseSystem: new FormControl(null),
     darkModeEnabled: new FormControl(null),
     darkModeInvertThumbs: new FormControl(null),
@@ -169,14 +185,13 @@ export class SettingsComponent
     documentEditingRemoveInboxTags: new FormControl(null),
     documentEditingOverlayThumbnail: new FormControl(null),
     documentEditingAutoSuggest: new FormControl(null),
+    documentEditingSuggestionSource: new FormControl(null),
     documentDetailsHiddenFields: new FormControl([]),
     searchDbOnly: new FormControl(null),
     searchLink: new FormControl(null),
 
-    notificationsConsumerNewDocument: new FormControl(null),
     notificationsConsumerSuccess: new FormControl(null),
     notificationsConsumerFailed: new FormControl(null),
-    notificationsConsumerSuppressOnDashboard: new FormControl(null),
 
     savedViewsWarnOnUnsavedChange: new FormControl(null),
     sidebarViewsShowCount: new FormControl(null),
@@ -186,6 +201,7 @@ export class SettingsComponent
 
   store: BehaviorSubject<any>
   storeSub: Subscription
+  sidebarItemsSub: Subscription
   isDirty$: Observable<boolean>
   isDirty: boolean = false
   unsubscribeNotifier: Subject<any> = new Subject()
@@ -201,8 +217,17 @@ export class SettingsComponent
   public readonly PdfZoomScale = PdfZoomScale
 
   public readonly PdfEditorEditMode = PdfEditorEditMode
+  public readonly SuggestionSource = SuggestionSource
+
+  get aiEnabled(): boolean {
+    return this.settings.get(SETTINGS_KEYS.AI_ENABLED)
+  }
 
   public readonly documentDetailFieldOptions = documentDetailFieldOptions
+  public readonly sidebarItemOptions = HIDEABLE_SIDEBAR_ITEM_IDS.map((id) => ({
+    id,
+    label: sidebarItemLabels[id],
+  }))
 
   get systemStatusHasErrors(): boolean {
     const status = this.systemStatus()
@@ -230,6 +255,10 @@ export class SettingsComponent
 
   constructor() {
     super()
+    this.sidebarItemsSub =
+      this.settings.sidebarHiddenItemsEditingChanged.subscribe((hiddenItems) =>
+        this.settingsForm.controls.sidebarHiddenItems.setValue(hiddenItems)
+      )
     this.settings.settingsSaved.subscribe(() => {
       if (!this.savePending) this.initialize()
       this.savedViewsService.maybeRefreshDocumentCounts()
@@ -279,14 +308,21 @@ export class SettingsComponent
 
     this.activatedRoute.paramMap.subscribe((paramMap) => {
       const section = paramMap.get('section')
+      let navID = SettingsNavIDs.General
       if (section) {
         const navIDKey: string = Object.keys(SettingsNavIDs).find(
           (navID) => navID.toLowerCase() == section
         )
         if (navIDKey) {
-          this.activeNavID.set(SettingsNavIDs[navIDKey])
+          navID = SettingsNavIDs[navIDKey]
         }
       }
+      this.activeNavID.set(navID)
+      this.settings.sidebarHiddenItemsEditing.set(
+        navID === SettingsNavIDs.General
+          ? [...this.settingsForm.controls.sidebarHiddenItems.value]
+          : null
+      )
     })
   }
 
@@ -310,6 +346,7 @@ export class SettingsComponent
         SETTINGS_KEYS.DOCUMENT_LIST_SIZE
       ),
       slimSidebarEnabled: this.settings.get(SETTINGS_KEYS.SLIM_SIDEBAR),
+      sidebarHiddenItems: this.settings.get(SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS),
       darkModeUseSystem: this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM),
       darkModeEnabled: this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED),
       darkModeInvertThumbs: this.settings.get(
@@ -332,18 +369,12 @@ export class SettingsComponent
       updateCheckingEnabled: this.settings.get(
         SETTINGS_KEYS.UPDATE_CHECKING_ENABLED
       ),
-      notificationsConsumerNewDocument: this.settings.get(
-        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT
-      ),
       notificationsConsumerSuccess: this.settings.get(
         SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS
       ),
       notificationsConsumerFailed: this.settings.get(
         SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED
       ),
-      notificationsConsumerSuppressOnDashboard: this.settings.get(
-        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD
-      ),
       savedViewsWarnOnUnsavedChange: this.settings.get(
         SETTINGS_KEYS.SAVED_VIEWS_WARN_ON_UNSAVED_CHANGE
       ),
@@ -372,6 +403,9 @@ export class SettingsComponent
       documentEditingAutoSuggest: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST
       ),
+      documentEditingSuggestionSource: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_EDITING_SUGGESTION_SOURCE
+      ),
       documentDetailsHiddenFields: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS
       ),
@@ -436,6 +470,12 @@ export class SettingsComponent
       this.settingsForm.patchValue(currentFormValue)
     }
 
+    if (this.settings.organizingSidebarItems()) {
+      this.settings.sidebarHiddenItemsEditing.set([
+        ...this.settingsForm.controls.sidebarHiddenItems.value,
+      ])
+    }
+
     if (this.canViewSystemStatus) {
       this.systemStatusService.get().subscribe((status) => {
         this.systemStatus.set(status)
@@ -444,8 +484,18 @@ export class SettingsComponent
   }
 
   ngOnDestroy() {
+    this.settings.sidebarHiddenItemsEditing.set(null)
     if (this.isDirty) this.settings.updateAppearanceSettings() // in case user changed appearance but didn't save
     this.storeSub && this.storeSub.unsubscribe()
+    this.sidebarItemsSub.unsubscribe()
+  }
+
+  isSidebarItemShown(item: HideableSidebarItemID): boolean {
+    return !(this.settingsForm.value.sidebarHiddenItems || []).includes(item)
+  }
+
+  toggleSidebarItem(item: HideableSidebarItemID, checked: boolean): void {
+    this.settings.updateSidebarItemVisibility(item, checked)
   }
 
   public saveSettings() {
@@ -473,6 +523,10 @@ export class SettingsComponent
       SETTINGS_KEYS.SLIM_SIDEBAR,
       this.settingsForm.value.slimSidebarEnabled
     )
+    this.settings.set(
+      SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS,
+      this.settingsForm.value.sidebarHiddenItems
+    )
     this.settings.set(
       SETTINGS_KEYS.DARK_MODE_USE_SYSTEM,
       this.settingsForm.value.darkModeUseSystem
@@ -509,10 +563,6 @@ export class SettingsComponent
       SETTINGS_KEYS.DATE_FORMAT,
       this.settingsForm.value.dateFormat
     )
-    this.settings.set(
-      SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT,
-      this.settingsForm.value.notificationsConsumerNewDocument
-    )
     this.settings.set(
       SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS,
       this.settingsForm.value.notificationsConsumerSuccess
@@ -521,10 +571,6 @@ export class SettingsComponent
       SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED,
       this.settingsForm.value.notificationsConsumerFailed
     )
-    this.settings.set(
-      SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD,
-      this.settingsForm.value.notificationsConsumerSuppressOnDashboard
-    )
     this.settings.set(
       SETTINGS_KEYS.NOTES_ENABLED,
       this.settingsForm.value.notesEnabled
@@ -573,6 +619,10 @@ export class SettingsComponent
       SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST,
       this.settingsForm.value.documentEditingAutoSuggest
     )
+    this.settings.set(
+      SETTINGS_KEYS.DOCUMENT_EDITING_SUGGESTION_SOURCE,
+      this.settingsForm.value.documentEditingSuggestionSource
+    )
     this.settings.set(
       SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS,
       this.settingsForm.value.documentDetailsHiddenFields
@@ -598,8 +648,11 @@ export class SettingsComponent
           let savedToast: Toast = {
             content: $localize`Settings were saved successfully.`,
             delay: 5000,
+            level: ToastLevel.Success,
+            persistent: false,
           }
           if (reloadRequired) {
+            savedToast.persistent = true
             savedToast.content = $localize`Settings were saved successfully. Reload is required to apply some changes.`
             savedToast.actionName = $localize`Reload now`
             savedToast.action = () => {
@@ -632,6 +685,11 @@ export class SettingsComponent
 
   reset() {
     this.settingsForm.patchValue(this.store.getValue())
+    if (this.settings.organizingSidebarItems()) {
+      this.settings.sidebarHiddenItemsEditing.set([
+        ...this.settingsForm.controls.sidebarHiddenItems.value,
+      ])
+    }
   }
 
   clearThemeColor() {

src-ui/src/app/components/admin/tasks/tasks.component.html

@@ -102,25 +102,34 @@
     </button>
   }
 
-  <ngb-pagination
-    [pageSize]="pageSize"
-    [collectionSize]="totalTasks()"
-    [page]="page"
-    [maxSize]="5"
-    [rotate]="true"
-    size="sm"
-    aria-label="Tasks pagination"
-    (pageChange)="setPage($event)">
-  </ngb-pagination>
+  @if (selectedSection !== TaskSection.All && totalTasks() > pageSize) {
+    <ngb-pagination
+      [pageSize]="pageSize"
+      [collectionSize]="totalTasks()"
+      [page]="page"
+      [maxSize]="5"
+      [rotate]="true"
+      size="sm"
+      aria-label="Tasks pagination"
+      (pageChange)="setPage($event)">
+    </ngb-pagination>
+  }
 </div>
 
 <ng-template let-tasks="tasks" let-section="section" #tasksTemplate>
-  <div class="section-header d-flex align-items-center justify-content-between mb-2">
-    <div>
-      <h5 class="mb-0">{{ sectionLabel(section) }}</h5>
-      <div class="small text-muted">
-        <ng-container i18n>{tasks.length, plural, =1 {1 task} other {{{tasks.length}} tasks}}</ng-container>
-      </div>
+  <div class="section-header mb-2">
+    <h5 class="mb-0">{{ sectionLabel(section) }}</h5>
+    @let count = sectionCount(section);
+    @let hasMore = selectedSection === TaskSection.All && count > tasks.length;
+    <div class="small text-muted">
+      @if (hasMore) {
+        <ng-container i18n>{{tasks.length}} of {{count}} tasks</ng-container>
+        <button class="btn btn-link show-all p-0 ms-2 align-baseline" type="button" (click)="setSection(section)">
+          <ng-container i18n>Show all</ng-container><i-bs class="ms-1" width="1em" height="1em" name="arrow-right"></i-bs>
+        </button>
+      } @else {
+        <ng-container i18n>{count, plural, =1 {1 task} other {{{count}} tasks}}</ng-container>
+      }
     </div>
   </div>
 
@@ -169,10 +178,9 @@
               <div>{{ taskDisplayName(task) }}</div>
               <div class="small text-muted">
                 @if (taskShowsSeparateTypeLabel(task)) {
-                  <span>{{ task.task_type_display }}</span>
-                  <span class="mx-1">&bull;</span>
+                  <span class="me-2">{{ task.task_type_display }}</span>
                 }
-                <span>{{ task.trigger_source_display }}</span>
+                <span class="text-nowrap"><i-bs class="me-1" width="1em" height="1em" name="box-arrow-in-right"></i-bs>{{ task.trigger_source_display }}</span>
               </div>
             </td>
             <td class="d-none d-lg-table-cell created-col">{{ task.date_created | customDate:'short' }}</td>

src-ui/src/app/components/admin/tasks/tasks.component.scss

@@ -72,3 +72,7 @@ pre {
 tbody tr:nth-last-child(2) td {
     border-bottom: none !important;
 }
+
+.section-header .show-all {
+    font-size: inherit;
+}

src-ui/src/app/components/admin/tasks/tasks.component.spec.ts

@@ -223,16 +223,6 @@ describe('TasksComponent', () => {
       )
       .flush(paginatedTasks)
 
-    httpTestingController
-      .expectOne(
-        (req) =>
-          req.url === `${environment.apiBaseUrl}tasks/` &&
-          req.params.get('acknowledged') === 'false' &&
-          req.params.get('page_size') === '25' &&
-          req.params.get('page') === '1'
-      )
-      .flush(paginatedTasks)
-
     httpTestingController
       .expectOne(
         (req) =>
@@ -241,8 +231,30 @@ describe('TasksComponent', () => {
           !req.params.has('status')
       )
       .flush(sectionCountResponse)
+
+    flushTaskLists(10)
   })
 
+  // answers task list requests with the fixture tasks matching their status filter
+  function flushTaskLists(pageSize: number, count?: number) {
+    httpTestingController
+      .match(
+        (req) =>
+          req.url === `${environment.apiBaseUrl}tasks/` &&
+          req.params.get('page_size') === `${pageSize}`
+      )
+      .forEach((req) => {
+        const statuses = req.request.params.getAll('status')
+        const results = tasks.filter((task) => statuses.includes(task.status))
+        req.flush({ count: count ?? results.length, results })
+      })
+  }
+
+  function selectSection(section: TaskSection, count: number) {
+    component.setSection(section)
+    flushTaskLists(25, count)
+  }
+
   it('should display task sections with counts', () => {
     expect(component.selectedSection).toBe(TaskSection.All)
     expect(component.selectedTaskType).toBeNull()
@@ -338,6 +350,7 @@ describe('TasksComponent', () => {
   })
 
   it('should render pagination controls next to the task filter', () => {
+    selectSection(TaskSection.Completed, 30)
     fixture.detectChanges()
 
     const controls = fixture.debugElement.query(By.css('.task-controls'))
@@ -348,6 +361,51 @@ describe('TasksComponent', () => {
     expect(pagination).not.toBeNull()
   })
 
+  it('should only paginate a section with more than one page of tasks', () => {
+    const pagination = () =>
+      fixture.debugElement.query(By.css('ngb-pagination'))
+
+    fixture.detectChanges()
+    expect(pagination()).toBeNull()
+
+    selectSection(TaskSection.Completed, 2)
+    fixture.detectChanges()
+    expect(pagination()).toBeNull()
+  })
+
+  it('should load the all tasks overview one section at a time', () => {
+    expect(component.tasksForSection(TaskSection.NeedsAttention)).toHaveLength(
+      2
+    )
+    expect(component.tasksForSection(TaskSection.InProgress)).toHaveLength(3)
+    expect(component.tasksForSection(TaskSection.Completed)).toHaveLength(2)
+    expect(component.totalTasks()).toBe(7)
+  })
+
+  it('should show section totals and link truncated sections to their full list', () => {
+    component.sectionCounts.update((counts) => ({
+      ...counts,
+      [TaskSection.Completed]: 27,
+    }))
+    fixture.detectChanges()
+
+    const header = (label: string) =>
+      fixture.debugElement
+        .queryAll(By.css('.section-header'))
+        .find((h) => h.nativeElement.textContent.includes(label))
+
+    expect(header('Needs attention').nativeElement.textContent).toContain(
+      '2 tasks'
+    )
+    expect(header('Needs attention').query(By.css('button'))).toBeNull()
+
+    expect(header('Recently completed').nativeElement.textContent).toContain(
+      '2 of 27 tasks'
+    )
+    header('Recently completed').query(By.css('button')).nativeElement.click()
+    expect(component.selectedSection).toBe(TaskSection.Completed)
+  })
+
   it('should apply the selected section to the server-side task query', () => {
     component.setSection(TaskSection.NeedsAttention)
 
@@ -368,55 +426,56 @@ describe('TasksComponent', () => {
   it('should apply task type and trigger source filters to the server-side task query', () => {
     component.setTaskType(PaperlessTaskType.SanityCheck)
 
-    httpTestingController
-      .expectOne(
+    expect(
+      httpTestingController.match(
         (request) =>
           request.url === `${environment.apiBaseUrl}tasks/` &&
-          request.params.get('page_size') === '25' &&
+          request.params.get('page_size') === '10' &&
           request.params.get('task_type') === PaperlessTaskType.SanityCheck
       )
-      .flush({ count: 1, results: [tasks[6]] })
+    ).toHaveLength(3)
 
     component.setTriggerSource(PaperlessTaskTriggerSource.System)
 
-    httpTestingController
-      .expectOne(
+    expect(
+      httpTestingController.match(
         (request) =>
           request.url === `${environment.apiBaseUrl}tasks/` &&
-          request.params.get('page_size') === '25' &&
+          request.params.get('page_size') === '10' &&
           request.params.get('task_type') === PaperlessTaskType.SanityCheck &&
           request.params.get('trigger_source') ===
             PaperlessTaskTriggerSource.System
       )
-      .flush({ count: 1, results: [tasks[6]] })
+    ).toHaveLength(3)
   })
 
   it('should apply text filters to the server-side task query', () => {
     component.filterText = 'invoice'
     jest.advanceTimersByTime(150)
 
-    httpTestingController
-      .expectOne(
+    expect(
+      httpTestingController.match(
         (request) =>
           request.url === `${environment.apiBaseUrl}tasks/` &&
-          request.params.get('page_size') === '25' &&
+          request.params.get('page_size') === '10' &&
           request.params.get('name') === 'invoice'
       )
-      .flush({ count: 1, results: [tasks[0]] })
+    ).toHaveLength(3)
 
     component.setFilterTarget(TaskFilterTargetID.Result)
 
-    httpTestingController
-      .expectOne(
+    expect(
+      httpTestingController.match(
         (request) =>
           request.url === `${environment.apiBaseUrl}tasks/` &&
-          request.params.get('page_size') === '25' &&
+          request.params.get('page_size') === '10' &&
           request.params.get('result') === 'invoice'
       )
-      .flush({ count: 0, results: [] })
+    ).toHaveLength(3)
   })
 
   it('should load a different task page when pagination changes', () => {
+    selectSection(TaskSection.Completed, 30)
     component.setPage(2)
 
     const pageTwoTasks = {
@@ -440,6 +499,7 @@ describe('TasksComponent', () => {
   })
 
   it('should not replace section counts with current-page counts', () => {
+    selectSection(TaskSection.Completed, 30)
     component.setPage(2)
 
     httpTestingController
@@ -455,11 +515,21 @@ describe('TasksComponent', () => {
         results: [tasks[0]],
       })
 
+    expect(component.sectionCount(TaskSection.All)).toBe(7)
     expect(component.sectionCount(TaskSection.NeedsAttention)).toBe(2)
     expect(component.sectionCount(TaskSection.InProgress)).toBe(3)
     expect(component.sectionCount(TaskSection.Completed)).toBe(2)
   })
 
+  it('should stop loading when the overview fails to load', () => {
+    component.setSection(TaskSection.All)
+    httpTestingController
+      .match((req) => req.params.get('page_size') === '10')[0]
+      .flush('', { status: 500, statusText: 'Error' })
+
+    expect(component.loading()).toBe(false)
+  })
+
   it('should expose stable task type options and disable empty ones', () => {
     expect(component.taskTypeOptions.map((option) => option.value)).toContain(
       PaperlessTaskType.TrainClassifier

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -15,6 +15,9 @@ import {
   distinctUntilChanged,
   filter,
   first,
+  forkJoin,
+  map,
+  Observable,
   Subject,
   takeUntil,
   timer,
@@ -25,6 +28,7 @@ import {
   PaperlessTaskTriggerSource,
   PaperlessTaskType,
 } from 'src/app/data/paperless-task'
+import { Results } from 'src/app/data/results'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { TasksService } from 'src/app/services/tasks.service'
@@ -99,6 +103,10 @@ const TASK_TYPE_OPTIONS: Array<{
     value: PaperlessTaskType.BulkDelete,
     label: $localize`Bulk Delete`,
   },
+  {
+    value: PaperlessTaskType.ApplyAiSuggestions,
+    label: $localize`Apply AI Suggestions`,
+  },
 ]
 
 const TRIGGER_SOURCE_OPTIONS: Array<{
@@ -165,6 +173,7 @@ export class TasksComponent
   public expandedTask: number
   public autoRefreshEnabled: boolean = true
   public readonly pageSize = 25
+  public readonly overviewSize = 10
   public page: number = 1
   readonly totalTasks = signal(0)
   readonly sectionCounts = signal<Record<TaskSection, number>>({
@@ -480,13 +489,6 @@ export class TasksComponent
     return this.sectionCounts()[section]
   }
 
-  private setSectionCount(section: TaskSection, count: number) {
-    this.sectionCounts.update((counts) => ({
-      ...counts,
-      [section]: count,
-    }))
-  }
-
   sectionShowsResults(section: TaskSection): boolean {
     return section !== TaskSection.InProgress
   }
@@ -733,21 +735,12 @@ export class TasksComponent
     this.reloadSectionCounts()
 
     this.loading.set(true)
-    this.tasksService
-      .list(
-        this.page,
-        this.pageSize,
-        this.getParamsForSection(this.selectedSection)
-      )
+    this.listTasks()
       .pipe(first(), takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (result) => {
           this.pagedTasks.set(result.results)
           this.totalTasks.set(result.count)
-          this.setSectionCount(TaskSection.All, result.count)
-          if (this.selectedSection !== TaskSection.All) {
-            this.setSectionCount(this.selectedSection, result.count)
-          }
           this.loading.set(false)
           if (
             this.page > 1 &&
@@ -763,4 +756,30 @@ export class TasksComponent
         },
       })
   }
+
+  private listTasks(): Observable<Results<PaperlessTask>> {
+    if (this.selectedSection !== TaskSection.All) {
+      return this.tasksService.list(
+        this.page,
+        this.pageSize,
+        this.getParamsForSection(this.selectedSection)
+      )
+    }
+
+    // All is an overview of each section to avoid splitting sections across pages
+    return forkJoin(
+      this.sections.map((section) =>
+        this.tasksService.list(
+          1,
+          this.overviewSize,
+          this.getParamsForSection(section)
+        )
+      )
+    ).pipe(
+      map((results) => ({
+        count: results.reduce((sum, result) => sum + result.count, 0),
+        results: results.flatMap((result) => result.results),
+      }))
+    )
+  }
 }

src-ui/src/app/components/admin/trash/trash.component.spec.ts

@@ -99,11 +99,16 @@ describe('TrashComponent', () => {
     modal.componentInstance.confirmClicked.next()
     expect(toastErrorSpy).toHaveBeenCalled()
 
+    let toasts
+    toastService.getToasts().subscribe((allToasts) => {
+      toasts = [...allToasts]
+    })
     trashSpy.mockReturnValue(of('OK'))
     component.delete(documentsInTrash[0])
     expect(modal).toBeDefined()
     modal.componentInstance.confirmClicked.next()
     expect(trashSpy).toHaveBeenCalled()
+    expect(toasts[0].content).toContain('deleted')
   })
 
   it('should support empty trash, show error if needed', () => {

src-ui/src/app/components/admin/trash/trash.component.ts

@@ -11,7 +11,7 @@ import { takeUntil, tap } from 'rxjs'
 import { Document } from 'src/app/data/document'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { SettingsService } from 'src/app/services/settings.service'
-import { ToastService } from 'src/app/services/toast.service'
+import { ToastLevel, ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
@@ -87,9 +87,11 @@ export class TrashComponent
         modal.componentInstance.buttonsEnabled.set(false)
         this.trashService.emptyTrash([document.id]).subscribe({
           next: () => {
-            this.toastService.showInfo(
-              $localize`Document "${document.title}" deleted`
-            )
+            this.toastService.show({
+              content: $localize`Document "${document.title}" deleted`,
+              delay: 5000,
+              level: ToastLevel.Success,
+            })
             modal.close()
             this.reload()
           },
@@ -122,7 +124,11 @@ export class TrashComponent
           .emptyTrash(documents ? Array.from(documents) : null)
           .subscribe({
             next: () => {
-              this.toastService.showInfo($localize`Document(s) deleted`)
+              this.toastService.show({
+                content: $localize`Document(s) deleted`,
+                delay: 5000,
+                level: ToastLevel.Success,
+              })
               this.allToggled.set(false)
               modal.close()
               this.reload()
@@ -144,6 +150,7 @@ export class TrashComponent
         this.toastService.show({
           content: $localize`Document "${document.title}" restored`,
           delay: 5000,
+          level: ToastLevel.Success,
           actionName: $localize`Open document`,
           action: () => {
             this.router.navigate(['documents', document.id])
@@ -165,7 +172,11 @@ export class TrashComponent
       .restoreDocuments(documents ? Array.from(documents) : null)
       .subscribe({
         next: () => {
-          this.toastService.showInfo($localize`Document(s) restored`)
+          this.toastService.show({
+            content: $localize`Document(s) restored`,
+            delay: 5000,
+            level: ToastLevel.Success,
+          })
           this.allToggled.set(false)
           this.reload()
         },

src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts

@@ -101,7 +101,7 @@ describe('UsersAndGroupsComponent', () => {
     component.editUser(users[0])
     const editDialog = modal.componentInstance as UserEditDialogComponent
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     editDialog.failed.emit()
     expect(toastErrorSpy).toHaveBeenCalled()
     settingsService.currentUser.set(users[1]) // simulate logged in as different user
@@ -120,7 +120,7 @@ describe('UsersAndGroupsComponent', () => {
     const deleteDialog = modal.componentInstance as ConfirmDialogComponent
     const deleteSpy = jest.spyOn(userService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const listAllSpy = jest.spyOn(userService, 'listAll')
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting user'))
@@ -154,6 +154,31 @@ describe('UsersAndGroupsComponent', () => {
     jest.useRealTimers()
   })
 
+  it('should logout current user under base href if password changed', () => {
+    jest.useFakeTimers()
+    const base = document.createElement('base')
+    base.href = '/paperless/'
+    document.head.appendChild(base)
+    completeSetup()
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+    component.editUser(users[0])
+    const navSpy = jest
+      .spyOn(navUtils, 'setLocationHref')
+      .mockImplementation(() => {})
+    const editDialog = modal.componentInstance as UserEditDialogComponent
+    editDialog.passwordIsSet = true
+    settingsService.currentUser.set(users[0]) // simulate logged in as same user
+    editDialog.succeeded.emit(users[0])
+    fixture.detectChanges()
+    jest.advanceTimersByTime(2600)
+    expect(navSpy).toHaveBeenCalledWith(
+      `${window.location.origin}/paperless/accounts/logout/?next=/paperless/accounts/login/?next=/paperless/`
+    )
+    base.remove()
+    jest.useRealTimers()
+  })
+
   it('should support edit / create group, show error if needed', () => {
     completeSetup()
     let modal: NgbModalRef
@@ -161,7 +186,7 @@ describe('UsersAndGroupsComponent', () => {
     component.editGroup(groups[0])
     const editDialog = modal.componentInstance as GroupEditDialogComponent
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     editDialog.failed.emit()
     expect(toastErrorSpy).toHaveBeenCalled()
     editDialog.succeeded.emit(groups[0])
@@ -179,7 +204,7 @@ describe('UsersAndGroupsComponent', () => {
     const deleteDialog = modal.componentInstance as ConfirmDialogComponent
     const deleteSpy = jest.spyOn(groupService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const listAllSpy = jest.spyOn(groupService, 'listAll')
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting group'))

src-ui/src/app/components/admin/users-groups/users-groups.component.ts

@@ -116,12 +116,13 @@ export class UsersAndGroupsComponent
             $localize`Password has been changed, you will be logged out momentarily.`
           )
           setTimeout(() => {
+            const basePath = new URL(document.baseURI).pathname
             setLocationHref(
-              `${window.location.origin}/accounts/logout/?next=/accounts/login/?next=/`
+              `${window.location.origin}${basePath}accounts/logout/?next=${basePath}accounts/login/?next=${basePath}`
             )
           }, 2500)
         } else {
-          this.toastService.showInfo(
+          this.toastService.showSuccess(
             $localize`Saved user "${newUser.username}".`
           )
           this.usersService.listAll().subscribe((r) => {
@@ -150,7 +151,9 @@ export class UsersAndGroupsComponent
       this.usersService.delete(user).subscribe({
         next: () => {
           modal.close()
-          this.toastService.showInfo($localize`Deleted user "${user.username}"`)
+          this.toastService.showSuccess(
+            $localize`Deleted user "${user.username}"`
+          )
           this.usersService.listAll().subscribe((r) => {
             this.users.set(r.results)
           })
@@ -177,7 +180,9 @@ export class UsersAndGroupsComponent
     modal.componentInstance.succeeded
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((newGroup) => {
-        this.toastService.showInfo($localize`Saved group "${newGroup.name}".`)
+        this.toastService.showSuccess(
+          $localize`Saved group "${newGroup.name}".`
+        )
         this.groupsService.listAll().subscribe((r) => {
           this.groups.set(r.results)
         })
@@ -203,7 +208,9 @@ export class UsersAndGroupsComponent
       this.groupsService.delete(group).subscribe({
         next: () => {
           modal.close()
-          this.toastService.showInfo($localize`Deleted group "${group.name}"`)
+          this.toastService.showSuccess(
+            $localize`Deleted group "${group.name}"`
+          )
           this.groupsService.listAll().subscribe((r) => {
             this.groups.set(r.results)
           })

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

@@ -29,8 +29,20 @@
   </div>
   <div class="search-container flex-grow-1 py-2 pb-3 pb-sm-2 me-sm-auto order-3 order-sm-1"
     [class.mobile-hidden]="mobileSearchHidden()">
-    <div class="col-12 header-search mx-auto">
-      <pngx-global-search></pngx-global-search>
+    <div class="col-12 header-search mx-auto d-flex align-items-stretch gap-3">
+      <pngx-global-search class="flex-grow-1"></pngx-global-search>
+      <div *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Document }" class="btn-group header-upload-group flex-shrink-0">
+        <button class="btn btn-sm header-upload border-0 d-flex align-items-center justify-content-center py-0 px-2" type="button"
+          (click)="fileUpload.click()" aria-label="Upload documents" i18n-aria-label>
+          <i-bs class="d-flex" width="1.1em" height="1.1em" name="file-earmark-arrow-up"></i-bs><span class="ms-2 d-sm-none d-md-inline" i18n>Upload</span>
+        </button>
+        @if (uploadsInProgress > 0) {
+          <button class="btn btn-sm header-upload border-0 d-flex align-items-center py-0 px-2" type="button"
+            (click)="showUploadStatus()" aria-label="Show document processing status" i18n-aria-label>
+            <span class="spinner-border spinner-border-sm" aria-hidden="true"></span><span class="ms-2 small">{{ uploadsInProgress }}</span>
+          </button>
+        }
+      </div>
     </div>
   </div>
   <ul ngbNav class="order-sm-3">
@@ -70,6 +82,9 @@
   </ul>
 </nav>
 
+<input type="file" class="visually-hidden" id="navbar-file-upload" (change)="onFileSelected($event)" multiple #fileUpload tabindex="-1" aria-hidden="true">
+<label for="navbar-file-upload" class="visually-hidden" i18n>Upload Files</label>
+
 <div class="container-fluid">
   <div class="row">
     <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse"
@@ -86,12 +101,15 @@
       }
       <div class="sidebar-sticky pt-3 pb-1 d-flex flex-column justify-space-around">
         <ul class="nav flex-column">
-          <li class="nav-item app-link">
-            <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
+          <li class="nav-item app-link position-relative" [class.d-none]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Dashboard) && !settingsService.organizingSidebarItems()">
+            <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Dashboard)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <i-bs class="me-2" name="house"></i-bs><span class="nav-link-label"><ng-container i18n>Dashboard</ng-container></span>
             </a>
+            @if (settingsService.organizingSidebarItems()) {
+              <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Dashboard" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Dashboard)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Dashboard, $event)"></pngx-input-switch>
+            }
           </li>
           <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
             <a class="nav-link" routerLink="documents" routerLinkActive="active"
@@ -237,37 +255,58 @@
                 </div>
               </li>
             }
-            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
-              <a class="nav-link" routerLink="savedviews" routerLinkActive="active" (click)="closeMenu()"
+            <li class="nav-item app-link position-relative" [class.d-none]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.SavedViews) && !settingsService.organizingSidebarItems()" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+              <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.SavedViews)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="savedviews" routerLinkActive="active" (click)="closeMenu()"
                 ngbPopover="Saved Views" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
                 <i-bs class="me-2" name="window-stack"></i-bs><span class="nav-link-label"><ng-container i18n>Saved Views</ng-container></span>
               </a>
+              @if (settingsService.organizingSidebarItems()) {
+                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Saved Views" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.SavedViews)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.SavedViews, $event)"></pngx-input-switch>
+              }
             </li>
-            <li class="nav-item app-link"
+            @if (canManageShareLinks) {
+              <li class="nav-item app-link position-relative" [class.d-none]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.ShareLinks) && !settingsService.organizingSidebarItems()">
+                <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.ShareLinks)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="share-links" routerLinkActive="active" (click)="closeMenu()"
+                  ngbPopover="Share links" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
+                  container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                  <i-bs class="me-2" name="link"></i-bs><span class="nav-link-label"><ng-container i18n>Share links</ng-container></span>
+                </a>
+                @if (settingsService.organizingSidebarItems()) {
+                  <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Share Links" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.ShareLinks)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.ShareLinks, $event)"></pngx-input-switch>
+                }
+              </li>
+            }
+            <li class="nav-item app-link position-relative" [class.d-none]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Workflows) && !settingsService.organizingSidebarItems()"
               *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Workflow }"
               tourAnchor="tour.workflows">
-              <a class="nav-link" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
+              <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Workflows)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
                 ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
                 <i-bs class="me-2" name="boxes"></i-bs><span class="nav-link-label"><ng-container i18n>Workflows</ng-container></span>
               </a>
+              @if (settingsService.organizingSidebarItems()) {
+                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Workflows" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Workflows)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Workflows, $event)"></pngx-input-switch>
+              }
             </li>
             <li class="nav-item app-link"
               *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.OcrTemplate }">
               <a class="nav-link" routerLink="ocr-templates" routerLinkActive="active" (click)="closeMenu()"
-                ngbPopover="OCR Templates" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                ngbPopover="OCR Templates" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="file-earmark-break"></i-bs><span><ng-container i18n>OCR Templates</ng-container></span>
+                <i-bs class="me-2" name="file-earmark-break"></i-bs><span class="nav-link-label"><ng-container i18n>OCR Templates</ng-container></span>
               </a>
             </li>
-            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
+            <li class="nav-item app-link position-relative" [class.d-none]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Mail) && !settingsService.organizingSidebarItems()" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
               tourAnchor="tour.mail">
-              <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
+              <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Mail)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
                 i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
                 triggers="mouseenter:mouseleave" popoverClass="popover-slim">
                 <i-bs class="me-2" name="envelope"></i-bs><span class="nav-link-label"><ng-container i18n>Mail</ng-container></span>
               </a>
+              @if (settingsService.organizingSidebarItems()) {
+                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Mail" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Mail)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Mail, $event)"></pngx-input-switch>
+              }
             </li>
             <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
               <a class="nav-link" routerLink="trash" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Trash"
@@ -330,13 +369,16 @@
                 </a>
               </li>
             }
-            <li class="nav-item mt-2" tourAnchor="tour.outro">
-              <a class="text-muted small d-flex align-items-center flex-wrap text-decoration-none nav-anchor"
+            <li class="nav-item mt-2 position-relative" [class.d-none]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Documentation) && !settingsService.organizingSidebarItems()" tourAnchor="tour.outro">
+              <a class="text-muted small d-flex align-items-center flex-wrap text-decoration-none nav-anchor" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Documentation)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()"
                 target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
                 i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
                 triggers="mouseenter:mouseleave" popoverClass="popover-slim">
                 <i-bs class="d-flex me-2" name="question-circle"></i-bs><span><ng-container i18n>Documentation</ng-container></span>
               </a>
+              @if (settingsService.organizingSidebarItems()) {
+                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Documentation" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Documentation)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Documentation, $event)"></pngx-input-switch>
+              }
             </li>
             <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
               <div class="text-muted small d-flex align-items-center flex-wrap nav-label">
@@ -400,5 +442,6 @@
       [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-sidebar-expanded'">
       <router-outlet></router-outlet>
     </main>
+    <pngx-upload-status-tray></pngx-upload-status-tray>
   </div>
 </div>

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

@@ -66,6 +66,7 @@
 }
 
 .search-container {
+  min-width: 0;
   padding-left: 1rem;
   padding-right: 1rem;
 }
@@ -499,6 +500,11 @@ main {
 
 // true center the search with equal flex widths
 @media (min-width: 768px) {
+  .search-container {
+    // Prevent input padding and the conditional search button from resizing
+    flex-basis: 55rem;
+  }
+
   .navbar-brand-container,
   .navbar > ul {
     display: flex; // so the brand link stays as wide as its contents
@@ -532,7 +538,36 @@ main {
 
 .header-search {
   width: 100%;
-  max-width: 55rem;
+  max-width: 50rem;
+}
+
+.header-search pngx-global-search {
+  min-width: 0;
+}
+
+// light w shadow to stand out against search
+.header-upload {
+  --bs-btn-bg: rgba(255, 255, 255, .15);
+  --bs-btn-hover-bg: rgba(255, 255, 255, .22);
+  --bs-btn-active-bg: rgba(255, 255, 255, .3);
+  color: var(--pngx-primary-text-contrast) !important; // .navbar .dropdown > .btn in styles.scss
+
+  & + & {
+    border-left: 1px solid rgba(255, 255, 255, .2) !important;
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
+  }
+}
+
+.header-upload-group {
+  border-radius: var(--bs-border-radius-sm);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .2);
 }
 
 @media screen and (max-width: 575.98px) {
@@ -624,8 +659,7 @@ main {
 }
 
 .dropdown-toggle::after {
-  margin-left: 0.4em;
-  vertical-align: 0.155em;
+  display: none;
 }
 
 .navbar .dropdown-menu {
@@ -662,3 +696,7 @@ main {
 ::ng-deep .navItemDrag .position-absolute i-bs {
   display: none;
 }
+
+.smaller {
+  font-size: 0.75rem;
+}

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

@@ -6,7 +6,7 @@ import {
 } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { BrowserModule } from '@angular/platform-browser'
+import { BrowserModule, By } from '@angular/platform-browser'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -15,7 +15,7 @@ import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import { SavedView } from 'src/app/data/saved-view'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { HideableSidebarItemID, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import {
@@ -33,8 +33,11 @@ import { SearchService } from 'src/app/services/rest/search.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
+import { WebsocketStatusService } from 'src/app/services/websocket-status.service'
 import { environment } from 'src/environments/environment'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
+import { UploadStatusTrayComponent } from '../common/upload-status-tray/upload-status-tray.component'
 import { DocumentDetailComponent } from '../document-detail/document-detail.component'
 import { AppFrameComponent } from './app-frame.component'
 import { GlobalSearchComponent } from './global-search/global-search.component'
@@ -287,6 +290,87 @@ describe('AppFrameComponent', () => {
     jest.useRealTimers()
   })
 
+  it('should hide configured sidebar items', () => {
+    settingsService.set(SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS, [
+      HideableSidebarItemID.Dashboard,
+      HideableSidebarItemID.Workflows,
+      HideableSidebarItemID.ShareLinks,
+    ])
+    fixture.detectChanges()
+
+    expect(
+      fixture.nativeElement.querySelector('[routerLink="dashboard"]')
+        .parentElement.classList
+    ).toContain('d-none')
+    expect(
+      fixture.nativeElement.querySelector('[routerLink="workflows"]')
+        .parentElement.classList
+    ).toContain('d-none')
+    expect(
+      fixture.nativeElement.querySelector('[routerLink="share-links"]')
+        .parentElement.classList
+    ).toContain('d-none')
+    expect(
+      fixture.nativeElement.querySelector('[routerLink="mail"]').parentElement
+        .classList
+    ).not.toContain('d-none')
+  })
+
+  it('should show hidden items and visibility switches while customizing', () => {
+    settingsService.set(SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS, [
+      HideableSidebarItemID.Dashboard,
+    ])
+    settingsService.sidebarHiddenItemsEditing.set([
+      HideableSidebarItemID.Dashboard,
+    ])
+    fixture.detectChanges()
+
+    expect(
+      fixture.nativeElement.querySelectorAll('pngx-input-switch').length
+    ).toBe(6)
+    expect(
+      fixture.nativeElement.querySelector('[routerLink="dashboard"]')
+        .parentElement.classList
+    ).not.toContain('d-none')
+    expect(
+      fixture.nativeElement.querySelector('[routerLink="dashboard"]').classList
+    ).toContain('opacity-50')
+
+    settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, true)
+    fixture.detectChanges()
+
+    expect(
+      Array.from(
+        fixture.nativeElement.querySelectorAll('pngx-input-switch')
+      ).every((toggle: HTMLElement) => toggle.classList.contains('d-none'))
+    ).toBe(true)
+    expect(
+      fixture.nativeElement.querySelector('[routerLink="dashboard"]').classList
+    ).not.toContain('pe-5')
+
+    settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, false)
+    component.slimSidebarAnimating.set(true)
+    fixture.detectChanges()
+
+    expect(
+      Array.from(
+        fixture.nativeElement.querySelectorAll('pngx-input-switch')
+      ).every((toggle: HTMLElement) => toggle.classList.contains('d-none'))
+    ).toBe(true)
+
+    component.slimSidebarAnimating.set(false)
+    fixture.detectChanges()
+
+    expect(
+      Array.from(
+        fixture.nativeElement.querySelectorAll('pngx-input-switch')
+      ).every((toggle: HTMLElement) => !toggle.classList.contains('d-none'))
+    ).toBe(true)
+    expect(
+      fixture.nativeElement.querySelector('[routerLink="dashboard"]').classList
+    ).toContain('pe-5')
+  })
+
   it('should show error on toggle slim sidebar if store settings fails', () => {
     jest.spyOn(console, 'warn').mockImplementation(() => {})
     const toastSpy = jest.spyOn(toastService, 'showError')
@@ -381,6 +465,45 @@ describe('AppFrameComponent', () => {
     expect(routerSpy).toHaveBeenCalled()
   })
 
+  it('should upload files selected from the navbar upload button', () => {
+    const uploadDocumentsService = TestBed.inject(UploadDocumentsService)
+    const uploadSpy = jest
+      .spyOn(uploadDocumentsService, 'uploadFiles')
+      .mockImplementation(() => {})
+    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const file = new File(['testing'], 'file.pdf')
+    const input = window.document.createElement('input')
+    jest.spyOn(input, 'files', 'get').mockReturnValue([file] as any)
+
+    component.onFileSelected({ target: input } as unknown as Event)
+    expect(toastSpy).not.toHaveBeenCalled()
+    expect(uploadSpy).toHaveBeenCalledWith([file])
+  })
+
+  it('should show in-progress uploads and expand the status tray', () => {
+    const websocketStatusService = TestBed.inject(WebsocketStatusService)
+    expect(component.uploadsInProgress).toEqual(0)
+    websocketStatusService.newFileUpload('file.pdf')
+    expect(component.uploadsInProgress).toEqual(1)
+
+    fixture.detectChanges()
+    const tray = fixture.debugElement.query(
+      By.directive(UploadStatusTrayComponent)
+    ).componentInstance as UploadStatusTrayComponent
+    tray.toggleCollapsed()
+    expect(tray.collapsed()).toBe(true)
+    component.showUploadStatus()
+    expect(tray.collapsed()).toBe(false)
+  })
+
+  it('should not upload when no files are selected from the navbar', () => {
+    const uploadDocumentsService = TestBed.inject(UploadDocumentsService)
+    const uploadSpy = jest.spyOn(uploadDocumentsService, 'uploadFiles')
+    const input = window.document.createElement('input')
+    component.onFileSelected({ target: input } as unknown as Event)
+    expect(uploadSpy).not.toHaveBeenCalled()
+  })
+
   it('should close all documents on logout', () => {
     const closeAllSpy = jest.spyOn(openDocumentsService, 'closeAll')
     component.onLogout()
@@ -402,7 +525,7 @@ describe('AppFrameComponent', () => {
 
   it('should update saved view sorting on drag + drop, show info', () => {
     const settingsSpy = jest.spyOn(settingsService, 'updateSidebarViewsSort')
-    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSpy = jest.spyOn(toastService, 'showSuccess')
     jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
     component.onDrop({ previousIndex: 0, currentIndex: 1 } as CdkDragDrop<
       SavedView[]
@@ -444,6 +567,7 @@ describe('AppFrameComponent', () => {
 
   it('should show toasts for django messages', () => {
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showSuccess')
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     jest.spyOn(messagesService, 'get').mockReturnValue([
       { level: DjangoMessageLevel.WARNING, message: 'Test warning' },
@@ -454,7 +578,8 @@ describe('AppFrameComponent', () => {
     ])
     component.ngOnInit()
     expect(toastErrorSpy).toHaveBeenCalledTimes(2)
-    expect(toastInfoSpy).toHaveBeenCalledTimes(3)
+    expect(toastSuccessSpy).toHaveBeenCalledTimes(1)
+    expect(toastInfoSpy).toHaveBeenCalledTimes(2)
   })
 
   it('should call maybeRefreshDocumentCounts after saved views reload', () => {

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

@@ -6,7 +6,15 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgClass } from '@angular/common'
-import { Component, HostListener, inject, OnInit, signal } from '@angular/core'
+import {
+  Component,
+  HostListener,
+  inject,
+  OnInit,
+  signal,
+  viewChild,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { ActivatedRoute, Router, RouterModule } from '@angular/router'
 import {
   NgbCollapseModule,
@@ -21,7 +29,11 @@ import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Document } from 'src/app/data/document'
 import { SavedView } from 'src/app/data/saved-view'
-import { CollapsibleSection, SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import {
+  CollapsibleSection,
+  HideableSidebarItemID,
+  SETTINGS_KEYS,
+} from 'src/app/data/ui-settings'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
 import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
@@ -43,11 +55,15 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
+import { WebsocketStatusService } from 'src/app/services/websocket-status.service'
 import { environment } from 'src/environments/environment'
 import { ChatComponent } from '../chat/chat/chat.component'
+import { SwitchComponent } from '../common/input/switch/switch.component'
 import { BrandMarkComponent } from '../common/logo/brand-mark/brand-mark.component'
 import { LogoComponent } from '../common/logo/logo.component'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
+import { UploadStatusTrayComponent } from '../common/upload-status-tray/upload-status-tray.component'
 import { DocumentDetailComponent } from '../document-detail/document-detail.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
 import { GlobalSearchComponent } from './global-search/global-search.component'
@@ -76,6 +92,9 @@ const SCROLL_THRESHOLD = 16
     NgxBootstrapIconsModule,
     DragDropModule,
     TourNgBootstrap,
+    FormsModule,
+    SwitchComponent,
+    UploadStatusTrayComponent,
   ],
 })
 export class AppFrameComponent
@@ -93,11 +112,16 @@ export class AppFrameComponent
   private modalService = inject(NgbModal)
   permissionsService = inject(PermissionsService)
   private djangoMessagesService = inject(DjangoMessagesService)
+  private uploadDocumentsService = inject(UploadDocumentsService)
+  private websocketStatusService = inject(WebsocketStatusService)
+
+  private readonly uploadStatusTray = viewChild(UploadStatusTrayComponent)
 
   readonly appRemoteVersion = signal<AppRemoteVersion>(null)
   readonly isMenuCollapsed = signal(true)
   readonly slimSidebarAnimating = signal(false)
   readonly mobileSearchHidden = signal(false)
+  readonly HideableSidebarItemID = HideableSidebarItemID
   private readonly versionSetting = this.settingsService.getSignal<string>(
     SETTINGS_KEYS.VERSION
   )
@@ -162,6 +186,8 @@ export class AppFrameComponent
           this.toastService.showError(message.message)
           break
         case DjangoMessageLevel.SUCCESS:
+          this.toastService.showSuccess(message.message)
+          break
         case DjangoMessageLevel.INFO:
         case DjangoMessageLevel.DEBUG:
           this.toastService.showInfo(message.message)
@@ -195,6 +221,10 @@ export class AppFrameComponent
     }, 200) // slightly longer than css animation for slim sidebar
   }
 
+  toggleSidebarItem(item: HideableSidebarItemID, visible: boolean): void {
+    this.settingsService.updateSidebarItemVisibility(item, visible)
+  }
+
   toggleAttributesSections(event?: Event): void {
     event?.preventDefault()
     event?.stopPropagation()
@@ -221,6 +251,19 @@ export class AppFrameComponent
     return this.appTitleSetting() || environment.appTitle
   }
 
+  get canManageShareLinks(): boolean {
+    return (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.ShareLink
+      ) ||
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.ShareLinkBundle
+      )
+    )
+  }
+
   get customAppTitle(): string {
     return this.appTitleSetting()
   }
@@ -451,7 +494,7 @@ export class AppFrameComponent
 
     this.settingsService.updateSidebarViewsSort(sidebarViews).subscribe({
       next: () => {
-        this.toastService.showInfo($localize`Sidebar views updated`)
+        this.toastService.showSuccess($localize`Sidebar views updated`)
       },
       error: (e) => {
         this.toastService.showError($localize`Error updating sidebar views`, e)
@@ -485,6 +528,22 @@ export class AppFrameComponent
     }
   }
 
+  onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement
+    const files = Array.from(input.files ?? [])
+    input.value = ''
+    if (!files.length) return
+    this.uploadDocumentsService.uploadFiles(files)
+  }
+
+  get uploadsInProgress(): number {
+    return this.websocketStatusService.getConsumerStatusNotCompleted().length
+  }
+
+  showUploadStatus() {
+    this.uploadStatusTray()?.expand()
+  }
+
   onLogout() {
     this.openDocumentsService.closeAll()
   }

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

@@ -70,6 +70,17 @@ form {
   max-height: 75vh;
 }
 
+.dropdown.show {
+  // Hide the search icon when the dropdown is shown
+  i-bs[name="search"] {
+    display: none !important;
+  }
+
+  .form-control {
+    padding-left: 0.5rem;
+  }
+}
+
 .dropdown-item {
   &:has(button:focus) {
     background-color: var(--pngx-bg-darker);

src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts

@@ -409,7 +409,7 @@ describe('GlobalSearchComponent', () => {
 
     const editDialog = modal.componentInstance as CustomFieldEditDialogComponent
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
 
     // fail first
     editDialog.failed.emit({ error: 'error creating item' })
@@ -460,7 +460,7 @@ describe('GlobalSearchComponent', () => {
 
     const editDialog = modal.componentInstance as CustomFieldEditDialogComponent
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
 
     // fail first
     editDialog.failed.emit({ error: 'error creating item' })

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

@@ -216,7 +216,7 @@ export class GlobalSearchComponent implements OnInit {
       modalRef.componentInstance.dialogMode.set(EditDialogMode.EDIT)
       modalRef.componentInstance.object = object
       modalRef.componentInstance.succeeded.subscribe(() => {
-        this.toastService.showInfo($localize`Successfully updated object.`)
+        this.toastService.showSuccess($localize`Successfully updated object.`)
       })
       modalRef.componentInstance.failed.subscribe((e) => {
         this.toastService.showError($localize`Error occurred saving object.`, e)
@@ -254,7 +254,7 @@ export class GlobalSearchComponent implements OnInit {
       modalRef.componentInstance.dialogMode.set(EditDialogMode.EDIT)
       modalRef.componentInstance.object = object
       modalRef.componentInstance.succeeded.subscribe(() => {
-        this.toastService.showInfo($localize`Successfully updated object.`)
+        this.toastService.showSuccess($localize`Successfully updated object.`)
       })
       modalRef.componentInstance.failed.subscribe((e) => {
         this.toastService.showError($localize`Error occurred saving object.`, e)

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

@@ -1,28 +1,31 @@
 
 <li ngbDropdown class="nav-item position-relative" (openChange)="onOpenChange($event)">
-  @if (toasts().length) {
-    <span class="notification-count badge rounded-pill z-3 pe-none bg-secondary position-absolute">{{ toasts().length }}</span>
+  @if (unread().length) {
+    <span class="notification-count badge rounded-pill z-3 pe-none position-absolute" [class.bg-danger]="hasUnreadError()" [class.bg-secondary]="!hasUnreadError()">{{ unread().length }}</span>
   }
   <button class="btn navbar-action border-0" id="notificationsDropdown" ngbDropdownToggle aria-label="Notifications" i18n-aria-label>
     <i-bs width="1.3em" height="1.3em" name="bell"></i-bs>
   </button>
-  <div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="notificationsDropdown">
-    <div class="btn-toolbar align-items-center" role="toolbar">
-      <h6 i18n>Notifications</h6>
-      <div class="btn-group ms-auto">
-        <button class="btn btn-sm btn-outline-secondary mb-2 ms-auto"
-          (click)="toastService.clearToasts()"
-          [disabled]="toasts().length === 0"
-          i18n>Clear All</button>
-      </div>
+  <div ngbDropdownMenu class="dropdown-menu-end shadow p-2" aria-labelledby="notificationsDropdown">
+    <div class="d-flex align-items-center px-1 mb-2">
+      <h6 class="mb-0" i18n>Notifications</h6>
+      @if (toasts().length) {
+        <button class="btn btn-link btn-sm p-0 ms-auto text-body-secondary text-decoration-none clear-all"
+          (click)="toastService.clearToasts()">
+          <i-bs width="1em" height="1em" name="check2-all" class="me-1"></i-bs><ng-container i18n>Clear All</ng-container>
+        </button>
+      }
     </div>
     @if (toasts().length === 0) {
-      <p class="text-center mb-0 small text-muted"><em i18n>No notifications</em></p>
-    }
-    <div class="scroll-list">
-      @for (toast of toasts(); track toast.id) {
-        <pngx-toast [autohide]="false" [toast]="toast" (hidden)="onHidden(toast)" (closed)="toastService.closeToast(toast)"></pngx-toast>
-      }
+      <div class="text-center text-body-secondary small py-4">
+        <i-bs width="1.5em" height="1.5em" name="bell" class="d-block mx-auto mb-2 opacity-50"></i-bs>
+        <ng-container i18n>No notifications</ng-container>
       </div>
+    }
+    <div class="scroll-list d-flex flex-column gap-2">
+      @for (toast of toasts(); track toast.id) {
+        <pngx-toast [autohide]="false" [toast]="toast" [now]="now()" [isNew]="newIds().has(toast.id)" (closed)="toastService.closeToast(toast)" (actioned)="onActioned(toast)"></pngx-toast>
+      }
+    </div>
   </div>
 </li>

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

@@ -30,3 +30,7 @@
     right: -3rem;
   }
 }
+
+.clear-all:hover {
+  color: var(--bs-body-color) !important;
+}

src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.spec.ts

@@ -3,7 +3,7 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { Subject } from 'rxjs'
-import { Toast, ToastService } from 'src/app/services/toast.service'
+import { Toast, ToastLevel, ToastService } from 'src/app/services/toast.service'
 import { ToastsDropdownComponent } from './toasts-dropdown.component'
 
 const toasts = [
@@ -90,4 +90,73 @@ describe('ToastsDropdownComponent', () => {
     component.onOpenChange(true)
     expect(spy).toHaveBeenCalledWith(true)
   })
+
+  it('should badge unread toasts, red when one is an error', () => {
+    toastsSubject.next([
+      { id: 'a', content: 'Read', delay: 5000, read: true },
+      { id: 'b', content: 'Unread', delay: 5000, read: false },
+    ])
+    fixture.detectChanges()
+    let badge: HTMLElement = fixture.nativeElement.querySelector(
+      '.notification-count'
+    )
+    expect(badge.textContent.trim()).toEqual('1')
+    expect(badge.classList).toContain('bg-secondary')
+
+    toastsSubject.next([
+      { id: 'c', content: 'Failed', delay: 5000, level: ToastLevel.Error },
+    ])
+    fixture.detectChanges()
+    badge = fixture.nativeElement.querySelector('.notification-count')
+    expect(badge.classList).toContain('bg-danger')
+
+    toastsSubject.next([{ id: 'd', content: 'Seen', delay: 5000, read: true }])
+    fixture.detectChanges()
+    expect(
+      fixture.nativeElement.querySelector('.notification-count')
+    ).toBeNull()
+  })
+
+  it('should mark all toasts read when opened', () => {
+    const markSpy = jest.spyOn(toastService, 'markAllRead')
+    component.onOpenChange(false)
+    expect(markSpy).not.toHaveBeenCalled()
+    component.onOpenChange(true)
+    expect(markSpy).toHaveBeenCalled()
+  })
+
+  it('should tick the clock only while open', () => {
+    jest.useFakeTimers()
+    component.onOpenChange(true)
+    const opened = component.now()
+    jest.advanceTimersByTime(30000)
+    const ticked = component.now()
+    expect(ticked).not.toBe(opened)
+
+    component.onOpenChange(false)
+    jest.advanceTimersByTime(60000)
+    expect(component.now()).toBe(ticked)
+    jest.useRealTimers()
+  })
+
+  it('should mark toasts that were unread when opened as new', () => {
+    toastsSubject.next([
+      { id: 'a', content: 'Seen', delay: 5000, read: true },
+      { id: 'b', content: 'Unseen', delay: 5000, read: false },
+    ])
+    fixture.detectChanges()
+    component.onOpenChange(true)
+    expect([...component.newIds()]).toEqual(['b'])
+    component.onOpenChange(false)
+    expect(component.newIds().size).toEqual(0)
+  })
+
+  it('should clear the toast and close the menu when an action is used', () => {
+    const toast = { id: 'a', content: 'Moved', delay: 5000 }
+    const closeToastSpy = jest.spyOn(toastService, 'closeToast')
+    const closeSpy = jest.spyOn(component.dropdown, 'close')
+    component.onActioned(toast)
+    expect(closeToastSpy).toHaveBeenCalledWith(toast)
+    expect(closeSpy).toHaveBeenCalled()
+  })
 })

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

@@ -1,12 +1,20 @@
-import { Component, inject } from '@angular/core'
-import { toSignal } from '@angular/core/rxjs-interop'
 import {
+  Component,
+  DestroyRef,
+  ViewChild,
+  computed,
+  inject,
+  signal,
+} from '@angular/core'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
+import {
+  NgbDropdown,
   NgbDropdownModule,
   NgbProgressbarModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { map } from 'rxjs'
-import { Toast, ToastService } from 'src/app/services/toast.service'
+import { Subscription, interval, map } from 'rxjs'
+import { Toast, ToastLevel, ToastService } from 'src/app/services/toast.service'
 import { ToastComponent } from '../../common/toast/toast.component'
 
 @Component({
@@ -22,13 +30,44 @@ import { ToastComponent } from '../../common/toast/toast.component'
 })
 export class ToastsDropdownComponent {
   toastService = inject(ToastService)
+  private destroyRef = inject(DestroyRef)
+  private clock: Subscription
+
+  @ViewChild(NgbDropdown) dropdown: NgbDropdown
+
+  /** Drives the relative timestamps, ticks only while the dropdown is open */
+  readonly now = signal(new Date())
+
+  /** Notifications that were unread when the dropdown was opened */
+  readonly newIds = signal(new Set<string>())
 
   readonly toasts = toSignal(
     this.toastService.getToasts().pipe(map((toasts) => [...toasts])),
     { initialValue: [] as Toast[] }
   )
 
+  readonly unread = computed(() => this.toasts().filter((t) => !t.read))
+
+  readonly hasUnreadError = computed(() =>
+    this.unread().some((t) => t.level === ToastLevel.Error)
+  )
+
   onOpenChange(open: boolean): void {
     this.toastService.suppressPopupToasts = open
+    this.clock?.unsubscribe()
+    this.newIds.set(new Set(open ? this.unread().map((t) => t.id) : []))
+    if (open) {
+      this.toastService.markAllRead()
+      this.now.set(new Date())
+      this.clock = interval(30000)
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe(() => this.now.set(new Date()))
+    }
+  }
+
+  /** Using an action (Undo, Open document...) clears it and closes the menu */
+  onActioned(toast: Toast): void {
+    this.toastService.closeToast(toast)
+    this.dropdown?.close()
   }
 }

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

@@ -1,49 +1,85 @@
 
-<li ngbDropdown class="nav-item" (openChange)="onOpenChange($event)">
+<li ngbDropdown class="nav-item" display="dynamic" placement="bottom-end" [popperOptions]="popperOptions" (openChange)="onOpenChange($event)">
   <button class="btn navbar-action border-0" id="chatDropdown" ngbDropdownToggle aria-label="Chat" i18n-aria-label>
     <i-bs width="1.3em" height="1.3em" name="chatSquareDots"></i-bs>
   </button>
-  <div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="chatDropdown">
-    <div class="chat-container bg-light p-2">
-      <div class="chat-messages font-monospace small">
-        @for (message of messages(); track message) {
-          <div class="message d-flex flex-row small" [class.justify-content-end]="message.role === 'user'">
-            <div class="p-2 m-2" [class.bg-body]="message.role === 'user'">
-              <span class="text-break">
-                {{ message.content }}
-                @if (message.isStreaming) { <span class="blinking-cursor">|</span> }
-              </span>
-              @if (message.role === 'assistant' && message.references?.length) {
-                <div class="chat-references list-group mt-3">
-                  @for (reference of message.references; track reference.id) {
-                    <a class="list-group-item list-group-item-action d-flex text-primary text-break" [routerLink]="['/documents', reference.id]">
-                      <i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{ reference.title }}</span>
-                    </a>
-                  }
-                </div>
-              }
-            </div>
-          </div>
+  <div ngbDropdownMenu class="dropdown-menu-end shadow p-0 overflow-hidden" aria-labelledby="chatDropdown">
+    <div class="d-flex align-items-center border-bottom px-3 py-2">
+      <i-bs width="1em" height="1em" name="stars" class="text-primary me-2"></i-bs>
+      <span class="fw-semibold small">
+        @if (documentId()) {
+          <ng-container i18n>Ask about this document</ng-container>
+        } @else {
+          <ng-container i18n>Ask about your documents</ng-container>
         }
-        <div #scrollAnchor></div>
-      </div>
+      </span>
+      @if (messages().length) {
+        <button class="btn btn-sm btn-link text-muted ms-auto p-0" type="button" (click)="clearChat()" title="Clear chat" i18n-title>
+          <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>
+        </button>
+      }
+    </div>
 
-      <form class="chat-input">
-        <label class="visually-hidden" for="chatInput" i18n>Message</label>
-        <div class="input-group">
-          <input
-            #chatInput
-            id="chatInput"
-            class="form-control form-control-sm" name="chatInput" type="text"
+    <div class="chat-messages small px-2">
+      @if (!messages().length) {
+        <p class="text-muted text-center py-4 px-3 mb-0" i18n>Answers come from your documents, with links to their sources.</p>
+      }
+      @for (message of messages(); track message) {
+        <div class="message d-flex flex-row" [class.justify-content-end]="message.role === 'user'" [class.mt-3]="message.role === 'user' && !$first">
+          <div class="p-2 m-2" [class.bg-body-secondary]="message.role === 'user'" [class.rounded-3]="message.role === 'user'" [class.flex-grow-1]="message.role === 'assistant'">
+            @if (message.isStreaming && !message.content) {
+              <div class="d-flex align-items-center text-muted">
+                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                @if (slowResponse()) {
+                  <ng-container i18n>Still thinking...</ng-container>
+                } @else {
+                  <ng-container i18n>Thinking...</ng-container>
+                }
+              </div>
+            } @else if (message.role === 'assistant') {
+              <div class="chat-markdown text-break text-wrap" [class.streaming]="message.isStreaming" [innerHTML]="message.content | markdown"></div>
+            } @else {
+              <span class="text-break">{{ message.content }}</span>
+            }
+            @if (message.role === 'assistant' && !message.isStreaming && message.references?.length) {
+              <div class="chat-references list-group mt-3">
+                <div class="list-group-item text-muted small py-1" i18n>Sources</div>
+                @for (reference of message.references; track reference.id) {
+                  <a class="list-group-item list-group-item-action d-flex align-items-center text-primary" [routerLink]="['/documents', reference.id]" [title]="reference.title">
+                    <i-bs width="0.9em" height="0.9em" name="file-text" class="me-2 flex-shrink-0"></i-bs><span class="text-truncate">{{ reference.title }}</span>
+                  </a>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      }
+      <div #scrollAnchor></div>
+    </div>
+
+    <form class="chat-input border-top p-2">
+      <label class="visually-hidden" for="chatInput" i18n>Message</label>
+      <div class="input-group">
+        <input
+          #chatInput
+          id="chatInput"
+          class="form-control" name="chatInput" type="text"
             [placeholder]="placeholder"
             [disabled]="loading()"
             [ngModel]="input()"
             (ngModelChange)="input.set($event)"
             (keydown)="searchInputKeyDown($event)"
-            />
-          <button class="btn btn-sm btn-secondary" type="button" (click)="sendMessage()" [disabled]="loading()">Send</button>
-        </div>
-      </form>
-    </div>
+          />
+        @if (loading()) {
+          <button class="btn btn-outline-secondary" type="button" (click)="stopStreaming()" title="Stop" i18n-title aria-label="Stop" i18n-aria-label>
+            <i-bs width="1em" height="1em" name="x-lg"></i-bs>
+          </button>
+        } @else {
+          <button class="btn btn-primary" type="button" (click)="sendMessage()" title="Send" i18n-title aria-label="Send" i18n-aria-label>
+            <i-bs width="1em" height="1em" name="arrow-return-left"></i-bs>
+          </button>
+        }
+      </div>
+    </form>
   </div>
 </li>

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

@@ -1,17 +1,13 @@
 .dropdown-menu {
-  width: var(--pngx-toast-max-width);
+  width: min(36rem, calc(100vw - 20px));
 }
 
 .chat-messages {
-  max-height: 350px;
+  max-height: min(60dvh, 36rem);
   overflow-y: auto;
   white-space: pre-wrap;
 }
 
-.chat-references {
-  font-family: var(--bs-font-sans-serif);
-}
-
 .dropdown-toggle::after {
   display: none;
 }
@@ -20,23 +16,44 @@
   white-space: initial;
 }
 
-@media screen and (max-width: 400px) {
-  :host ::ng-deep .dropdown-menu-end {
-    right: -3rem;
+@media screen and (max-width: 575.98px) {
+  .chat-messages {
+    max-height: calc(100dvh - 12rem);
   }
 }
 
-.blinking-cursor {
-  font-weight: bold;
-  font-size: 1.2em;
-  animation: blink 1s step-end infinite;
+.chat-markdown.streaming ::ng-deep {
+  > :last-child:not(ul, ol, table)::after,
+  > :is(ul, ol):last-child > li:last-child::after {
+    content: '';
+    display: inline-block;
+    width: 2px;
+    height: 1.05em;
+    margin-left: 2px;
+    background-color: currentColor;
+    vertical-align: -0.15em;
+    animation: blink 1s step-end infinite;
+  }
 }
 
 @keyframes blink {
-  from, to {
+  50% {
     opacity: 0;
   }
-  50% {
-    opacity: 1;
+}
+
+.chat-markdown ::ng-deep {
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 1em;
+    font-weight: bold;
+  }
+
+  th, td {
+    padding: 0.15rem 0.4rem;
+    border: 1px solid var(--bs-border-color);
+  }
+
+  > :last-child {
+    margin-bottom: 0;
   }
 }

src-ui/src/app/components/chat/chat/chat.component.spec.ts

@@ -80,8 +80,16 @@ describe('ChatComponent', () => {
     expect(component.messages()[0].content).toBe('Hello')
     expect(component.loading()).toBe(true)
 
+    fixture.detectChanges()
+    const messagesEl = fixture.nativeElement.querySelector('.chat-messages')
+    expect(messagesEl.querySelector('.spinner-border')).not.toBeNull()
+    expect(messagesEl.textContent).toContain('Thinking...')
+
     mockStream$.next('Hi')
     expect(component.messages()[1].content).toBe('H')
+    fixture.detectChanges()
+    expect(messagesEl.querySelector('.spinner-border')).toBeNull()
+    expect(messagesEl.querySelector('.chat-markdown.streaming')).not.toBeNull()
     mockStream$.next('Hi there')
     // advance time to process the typewriter effect
     await jest.runAllTimersAsync()
@@ -96,6 +104,8 @@ describe('ChatComponent', () => {
     await fixture.whenStable()
     expect(component.loading()).toBe(false)
     expect(component.messages()[1].isStreaming).toBe(false)
+    fixture.detectChanges()
+    expect(messagesEl.querySelector('.chat-markdown.streaming')).toBeNull()
     expect(fixture.nativeElement.querySelector('#chatInput').disabled).toBe(
       false
     )
@@ -123,6 +133,10 @@ describe('ChatComponent', () => {
     mockStream$.next(
       `Hi there${CHAT_METADATA_DELIMITER}{"references":[{"id":42,"title":"Bread Recipe"}]}`
     )
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('.chat-references')).toBeNull()
+
+    mockStream$.complete()
     jest.advanceTimersByTime(1000)
     fixture.detectChanges()
 
@@ -156,13 +170,96 @@ describe('ChatComponent', () => {
     component.input.set('Hello')
     component.sendMessage()
 
+    mockStream$.next('Partial')
     mockStream$.error('Error')
-    expect(component.messages()[1].content).toContain(
-      '⚠️ Error receiving response.'
+    expect(component.messages()[1].content).toBe(
+      'Partial\n\n⚠️ Error receiving response.'
     )
     expect(component.loading()).toBe(false)
   })
 
+  it('should keep streaming until the typewriter catches up', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+
+    mockStream$.next('Hi there')
+    mockStream$.complete()
+    expect(component.messages()[1].isStreaming).toBe(true)
+    expect(component.loading()).toBe(true)
+
+    jest.advanceTimersByTime(1000)
+    expect(component.messages()[1].content).toBe('Hi there')
+    expect(component.messages()[1].isStreaming).toBe(false)
+    expect(component.loading()).toBe(false)
+  })
+
+  it('should show a slow response message while waiting', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+    fixture.detectChanges()
+    const messagesEl = fixture.nativeElement.querySelector('.chat-messages')
+    expect(messagesEl.textContent).not.toContain('Still thinking...')
+
+    jest.advanceTimersByTime(8000)
+    fixture.detectChanges()
+    expect(messagesEl.textContent).toContain('Still thinking...')
+
+    mockStream$.next('Hi')
+    expect(component.slowResponse()).toBe(false)
+  })
+
+  it('should stop streaming and keep the partial response', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+    fixture.detectChanges()
+    const stopButton = fixture.nativeElement.querySelector('.chat-input button')
+    expect(stopButton.getAttribute('aria-label')).toBe('Stop')
+
+    mockStream$.next('Hi there')
+    jest.advanceTimersByTime(20)
+    stopButton.click()
+
+    expect(mockStream$.observed).toBe(false)
+    expect(component.messages()[1].content).toBe('Hi there')
+    expect(component.messages()[1].isStreaming).toBe(false)
+    expect(component.loading()).toBe(false)
+
+    jest.advanceTimersByTime(1000)
+    expect(component.messages()[1].content).toBe('Hi there')
+  })
+
+  it('should drop the empty response when stopped before any content', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+    component.stopStreaming()
+
+    expect(component.messages()).toHaveLength(1)
+    expect(component.loading()).toBe(false)
+    component.stopStreaming() // no-op once stopped
+    expect(component.messages()).toHaveLength(1)
+  })
+
+  it('should clear the conversation', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+    mockStream$.next('Hi there')
+    fixture.detectChanges()
+
+    fixture.nativeElement.querySelector('button[title="Clear chat"]').click()
+    expect(component.messages()).toHaveLength(0)
+    expect(component.loading()).toBe(false)
+    expect(mockStream$.observed).toBe(false)
+
+    fixture.detectChanges()
+    jest.advanceTimersByTime(10)
+    expect(document.activeElement).toBe(
+      fixture.nativeElement.querySelector('#chatInput')
+    )
+    expect(fixture.nativeElement.textContent).toContain(
+      'Answers come from your documents'
+    )
+  })
+
   it('should enqueue typewriter chunks correctly', () => {
     const message = { content: '', role: 'assistant', isStreaming: true }
     component.enqueueTypewriter(null, message as any) // coverage for null
@@ -207,4 +304,33 @@ describe('ChatComponent', () => {
     component.searchInputKeyDown(event)
     expect(component.sendMessage).not.toHaveBeenCalled()
   })
+
+  it('should render markdown for assistant messages only', () => {
+    component.messages.set([
+      { role: 'user', content: '**user**' },
+      { role: 'assistant', content: '**assistant** <script>x</script>' },
+    ])
+    fixture.detectChanges()
+    const el: HTMLElement = fixture.nativeElement
+    expect(el.querySelector('.chat-markdown strong')?.textContent).toBe(
+      'assistant'
+    )
+    expect(el.querySelector('.chat-markdown script')).toBeNull()
+    expect(el.textContent).toContain('**user**')
+  })
+
+  it('should keep the destination hostname visible after sanitizing chat links', () => {
+    component.messages.set([
+      {
+        role: 'assistant',
+        content:
+          '[View original document](https://otherdomain.example/?data=secret)',
+      },
+    ])
+    fixture.detectChanges()
+    const el: HTMLElement = fixture.nativeElement
+    const link = el.querySelector('.chat-markdown a')
+    expect(link?.textContent).toBe('View original document')
+    expect(link?.nextElementSibling?.textContent).toBe('(otherdomain.example)')
+  })
 })

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

@@ -10,12 +10,16 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NavigationEnd, Router, RouterModule } from '@angular/router'
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { filter, map } from 'rxjs'
+import { filter, map, Subscription } from 'rxjs'
+import { MarkdownPipe } from 'src/app/pipes/markdown.pipe'
 import {
   ChatMessage,
   ChatService,
   parseChatResponse,
 } from 'src/app/services/chat.service'
+import { pngxPopperOptions } from 'src/app/utils/popper-options'
+
+const SLOW_RESPONSE_DELAY_MS = 8000
 
 @Component({
   selector: 'pngx-chat',
@@ -25,6 +29,7 @@ import {
     RouterModule,
     NgxBootstrapIconsModule,
     NgbDropdownModule,
+    MarkdownPipe,
   ],
   templateUrl: './chat.component.html',
   styleUrl: './chat.component.scss',
@@ -34,6 +39,8 @@ export class ChatComponent implements OnInit {
   readonly loading = signal(false)
   readonly input = signal('')
   readonly documentId = signal<number>(undefined)
+  readonly slowResponse = signal(false)
+  public popperOptions = pngxPopperOptions
 
   private chatService: ChatService = inject(ChatService)
   private router: Router = inject(Router)
@@ -43,6 +50,11 @@ export class ChatComponent implements OnInit {
 
   private typewriterBuffer: string[] = []
   private typewriterActive = false
+  private typewriterTimeout: ReturnType<typeof setTimeout>
+  private streamSubscription: Subscription
+  private streamingMessage: ChatMessage
+  private streamFinished = false
+  private slowResponseTimeout: ReturnType<typeof setTimeout>
 
   public get placeholder(): string {
     return this.documentId()
@@ -81,47 +93,96 @@ export class ChatComponent implements OnInit {
     }
     this.messages.update((messages) => [...messages, assistantMessage])
     this.loading.set(true)
+    this.streamingMessage = assistantMessage
+    this.streamFinished = false
+    this.slowResponseTimeout = setTimeout(
+      () => this.slowResponse.set(true),
+      SLOW_RESPONSE_DELAY_MS
+    )
 
     let lastVisibleContent = ''
 
-    this.chatService.streamChat(this.documentId(), this.input()).subscribe({
-      next: (chunk) => {
-        const nextResponse = parseChatResponse(chunk)
+    this.streamSubscription = this.chatService
+      .streamChat(this.documentId(), this.input())
+      .subscribe({
+        next: (chunk) => {
+          this.clearSlowResponse()
+          const nextResponse = parseChatResponse(chunk)
 
-        if (nextResponse.content.length < lastVisibleContent.length) {
-          this.resetTypewriter(assistantMessage, nextResponse.content)
-          lastVisibleContent = nextResponse.content
-        } else {
-          const visibleDelta = nextResponse.content.substring(
-            lastVisibleContent.length
-          )
-          lastVisibleContent = nextResponse.content
-          this.enqueueTypewriter(visibleDelta, assistantMessage)
-        }
+          if (nextResponse.content.length < lastVisibleContent.length) {
+            this.resetTypewriter(assistantMessage, nextResponse.content)
+            lastVisibleContent = nextResponse.content
+          } else {
+            const visibleDelta = nextResponse.content.substring(
+              lastVisibleContent.length
+            )
+            lastVisibleContent = nextResponse.content
+            this.enqueueTypewriter(visibleDelta, assistantMessage)
+          }
 
-        assistantMessage.references = nextResponse.references
-        this.notifyMessagesChanged()
-      },
-      error: () => {
-        assistantMessage.content += '\n\n⚠️ Error receiving response.'
-        assistantMessage.isStreaming = false
-        this.notifyMessagesChanged()
-        this.loading.set(false)
-      },
-      complete: () => {
-        assistantMessage.isStreaming = false
-        this.notifyMessagesChanged()
-        this.loading.set(false)
-        this.scrollToBottom()
-      },
-    })
+          assistantMessage.references = nextResponse.references
+          this.notifyMessagesChanged()
+        },
+        error: () => {
+          this.flushTypewriter(assistantMessage)
+          assistantMessage.content += '\n\n⚠️ Error receiving response.'
+          this.finishStreaming(assistantMessage)
+        },
+        complete: () => {
+          // let the typewriter catch up before hiding the cursor
+          this.streamFinished = true
+          if (!this.typewriterActive) this.finishStreaming(assistantMessage)
+        },
+      })
 
     this.input.set('')
   }
 
-  private resetTypewriter(message: ChatMessage, content: string): void {
+  stopStreaming(): void {
+    const message = this.streamingMessage
+    if (!message?.isStreaming) return
+
+    this.streamSubscription?.unsubscribe()
+    this.flushTypewriter(message)
+    if (!message.content) {
+      this.messages.update((messages) => messages.filter((m) => m !== message))
+    }
+    this.finishStreaming(message)
+  }
+
+  clearChat(): void {
+    this.stopStreaming()
+    this.messages.set([])
+    setTimeout(() => this.chatInput?.nativeElement.focus())
+  }
+
+  private finishStreaming(message: ChatMessage): void {
+    this.clearSlowResponse()
+    this.streamFinished = false
+    message.isStreaming = false
+    this.notifyMessagesChanged()
+    this.loading.set(false)
+    this.scrollToBottom()
+  }
+
+  private clearSlowResponse(): void {
+    clearTimeout(this.slowResponseTimeout)
+    this.slowResponse.set(false)
+  }
+
+  private flushTypewriter(message: ChatMessage): void {
+    message.content += this.typewriterBuffer.join('')
+    this.cancelTypewriter()
+  }
+
+  private cancelTypewriter(): void {
+    clearTimeout(this.typewriterTimeout)
     this.typewriterBuffer = []
     this.typewriterActive = false
+  }
+
+  private resetTypewriter(message: ChatMessage, content: string): void {
+    this.cancelTypewriter()
     message.content = content
     this.notifyMessagesChanged()
     this.scrollToBottom()
@@ -141,6 +202,7 @@ export class ChatComponent implements OnInit {
   playTypewriter(message: ChatMessage): void {
     if (this.typewriterBuffer.length === 0) {
       this.typewriterActive = false
+      if (this.streamFinished) this.finishStreaming(message)
       return
     }
 
@@ -149,7 +211,8 @@ export class ChatComponent implements OnInit {
     this.notifyMessagesChanged()
     this.scrollToBottom()
 
-    setTimeout(() => this.playTypewriter(message), 10) // 10ms per character
+    // 10ms per character
+    this.typewriterTimeout = setTimeout(() => this.playTypewriter(message), 10)
   }
 
   private notifyMessagesChanged(): void {

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts

@@ -110,7 +110,7 @@ describe('CustomFieldsDropdownComponent', () => {
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const getFieldsSpy = jest.spyOn(
       CustomFieldsDropdownComponent.prototype as any,
       'getFields'

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts

@@ -129,7 +129,9 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio
     modal.componentInstance.succeeded
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((newField) => {
-        this.toastService.showInfo($localize`Saved field "${newField.name}".`)
+        this.toastService.showSuccess(
+          $localize`Saved field "${newField.name}".`
+        )
         this.customFieldsService.clearCache()
         this.getFields()
         this.created.emit(newField)

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts

@@ -151,7 +151,7 @@ describe('UserEditDialogComponent', () => {
       'deactivateTotp'
     )
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     deactivateSpy.mockReturnValueOnce(throwError(() => new Error('error')))
     component.deactivateTotp()
     expect(deactivateSpy).toHaveBeenCalled()

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts

@@ -132,7 +132,7 @@ export class UserEditDialogComponent
         next: (result) => {
           this.totpLoading.set(false)
           if (result) {
-            this.toastService.showInfo($localize`Totp deactivated`)
+            this.toastService.showSuccess($localize`Totp deactivated`)
             this.object.is_mfa_enabled = false
           } else {
             this.toastService.showError($localize`Totp deactivation failed`)

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html

@@ -209,6 +209,7 @@
                       @if (isTagsFilter(filter.get('type').value)) {
                         <pngx-input-tags
                           [allowCreate]="false"
+                          [preserveHierarchy]="false"
                           [title]="null"
                           formControlName="values"
                         ></pngx-input-tags>
@@ -320,7 +321,7 @@
             <h6 class="form-label" i18n>Remove tags</h6>
             <pngx-input-switch i18n-title title="Remove all" [horizontal]="true" formControlName="remove_all_tags"></pngx-input-switch>
             <div class="mt-n3">
-              <pngx-input-tags [allowCreate]="false" title="" formControlName="remove_tags"></pngx-input-tags>
+              <pngx-input-tags [allowCreate]="false" [preserveHierarchy]="false" title="" formControlName="remove_tags"></pngx-input-tags>
             </div>
 
             <h6 class="form-label" i18n>Remove correspondents</h6>

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.spec.ts

@@ -52,7 +52,7 @@ describe('EmailDocumentDialogComponent', () => {
 
   it('should support sending single document via email, showing error if needed', () => {
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastSuccessSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showSuccess')
     component.documentIds.set([1])
     component.emailAddress = 'hello@paperless-ngx.com'
     component.emailSubject = 'Hello'
@@ -73,7 +73,7 @@ describe('EmailDocumentDialogComponent', () => {
 
   it('should support sending multiple documents via email, showing appropriate messages', () => {
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastSuccessSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showSuccess')
     component.documentIds.set([1, 2, 3])
     component.emailAddress = 'hello@paperless-ngx.com'
     component.emailSubject = 'Hello'

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts

@@ -50,7 +50,7 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
           this.emailSubject = ''
           this.emailMessage = ''
           this.close()
-          this.toastService.showInfo($localize`Email sent`)
+          this.toastService.showSuccess($localize`Email sent`)
         },
         error: (e) => {
           this.loading.set(false)

src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.html

@@ -1,5 +1,7 @@
 @if (!accordion) {
-  <h5 i18n>Permissions</h5>
+  @if (title?.length > 0) {
+    <h5>{{title}}</h5>
+  }
   <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
 }
 @if (accordion) {

src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.ts

@@ -59,6 +59,9 @@ export class PermissionsFormComponent
   @Input()
   accordion: boolean = false
 
+  @Input()
+  title: string = $localize`Permissions`
+
   form = new FormGroup({
     owner: new FormControl(null),
     set_permissions: new FormGroup({

src-ui/src/app/components/common/input/switch/switch.component.html

@@ -1,6 +1,6 @@
-<div class="mb-3">
-  <div class="row">
-    @if (!horizontal) {
+<div [class.mb-3]="!compact">
+  <div [class.row]="!compact">
+    @if (!horizontal && !compact) {
       <div class="d-flex align-items-center position-relative hidden-button-container col-md-3">
         <label class="form-label" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
           {{title}}
@@ -17,8 +17,8 @@
     }
     <div [ngClass]="{'align-items-center': horizontal, 'd-flex': horizontal}">
       <div class="form-check form-switch">
-        <input #inputField type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
-        @if (horizontal) {
+        <input #inputField type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled" [attr.aria-label]="compact ? title : null">
+        @if (horizontal && !compact) {
           <label class="form-check-label" [class.text-muted]="showUnsetNote && isUnset" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
             {{title}}
             @if (showUnsetNote && isUnset) {

src-ui/src/app/components/common/input/switch/switch.component.spec.ts

@@ -48,4 +48,14 @@ describe('SwitchComponent', () => {
     component.value = undefined
     expect(component.isUnset).toBeTruthy()
   })
+
+  it('should support a compact layout', () => {
+    component.compact = true
+    component.title = 'Test switch'
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.querySelector('.mb-3')).toBeNull()
+    expect(fixture.nativeElement.querySelector('.row')).toBeNull()
+    expect(input.getAttribute('aria-label')).toEqual('Test switch')
+  })
 })

src-ui/src/app/components/common/input/switch/switch.component.ts

@@ -25,6 +25,9 @@ export class SwitchComponent extends AbstractInputComponent<boolean> {
   @Input()
   showUnsetNote: boolean = false
 
+  @Input()
+  compact: boolean = false
+
   constructor() {
     super()
   }

src-ui/src/app/components/common/input/tags/tags.component.spec.ts

@@ -222,6 +222,22 @@ describe('TagsComponent', () => {
     expect(propagated).toEqual([2, 1])
   })
 
+  it('should not add parents or remove children when not preserving hierarchy', () => {
+    const parent: Tag = { id: 1, name: 'parent' }
+    const child: Tag = { id: 2, name: 'child', parent: 1 }
+    parent.children = [child]
+    component.tags = [parent, child]
+    component.preserveHierarchy = false
+
+    component.value = []
+    component.addTag(2)
+    expect(component.value).toEqual([2])
+
+    component.value = [1, 2]
+    component.removeTag(1)
+    expect(component.value).toEqual([2])
+  })
+
   it('should not duplicate parents when adding sibling nested tags', () => {
     const root: Tag = { id: 1, name: 'root' }
     const parent: Tag = { id: 2, name: 'parent', parent: 1 }

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -109,6 +109,9 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   @Input()
   multiple: boolean = true
 
+  @Input()
+  preserveHierarchy: boolean = true
+
   @Output()
   filterDocuments = new EventEmitter<Tag[]>()
 
@@ -148,7 +151,9 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
       oldValue.splice(index, 1)
 
       // remove children
-      oldValue = this.removeChildren(oldValue, tag)
+      if (this.preserveHierarchy) {
+        oldValue = this.removeChildren(oldValue, tag)
+      }
 
       this.value = [...oldValue]
       this.onChange(this.value)
@@ -167,7 +172,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   }
 
   public onAdd(tag: Tag) {
-    if (tag?.parent) {
+    if (this.preserveHierarchy && tag?.parent) {
       // add all parents recursively
       const parent = this.getTag(tag.parent)
       if (parent && !this.value.includes(parent.id)) {

src-ui/src/app/components/common/page-header/page-header.component.html

@@ -3,13 +3,13 @@
     <h3 class="d-flex align-items-center mb-2 mb-md-1" style="line-height: 1.4">
       <span class="text-truncate">{{title()}}</span>
       @if (id()) {
-        <span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyID()">
+        <button type="button" class="badge border-0 bg-primary text-primary-text-contrast ms-3 small fs-normal" (click)="copyID()" title="Copy ID" i18n-title>
           @if (copied()) {
             <i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
           } @else {
             ID: {{id()}}
           }
-        </span>
+        </button>
       }
       @if (subTitle()) {
         <span class="page-subtitle h6 mb-0 mt-1 fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle()}}</span>

src-ui/src/app/components/common/page-header/page-header.component.spec.ts

@@ -43,6 +43,13 @@ describe('PageHeaderComponent', () => {
     expect(titleSpy).toHaveBeenCalledWith(`Foo Bar - ${environment.appTitle}`)
   })
 
+  it('should set html title to just the app title until a title is available', () => {
+    const titleSpy = jest.spyOn(titleService, 'setTitle')
+    fixture.componentRef.setInput('title', undefined)
+    fixture.detectChanges()
+    expect(titleSpy).toHaveBeenCalledWith(environment.appTitle)
+  })
+
   it('should copy id to clipboard, reset after 3 seconds', () => {
     jest.useFakeTimers()
     fixture.componentRef.setInput('id', 42)

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -27,7 +27,10 @@ export class PageHeaderComponent {
 
   constructor() {
     effect(() => {
-      this.titleService.setTitle(`${this.title()} - ${environment.appTitle}`)
+      const title = this.title()
+      this.titleService.setTitle(
+        title ? `${title} - ${environment.appTitle}` : environment.appTitle
+      )
     })
   }
 

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.scss

@@ -154,11 +154,29 @@
   & section {
     position: absolute;
     text-align: initial;
+    pointer-events: auto;
     box-sizing: border-box;
     transform-origin: 0 0;
   }
 
+  & :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
+    position: absolute;
+    inset: 0;
+    font-size: 1em;
+    transition: none;
+  }
+
+  & :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
+    > a:hover {
+    opacity: 0.2;
+    background-color: rgb(255 255 0);
+  }
+
   & .annotationTextContent {
     opacity: 0;
   }
 }
+
+:host ::ng-deep .textLayer.selecting ~ .annotationLayer section {
+  pointer-events: none;
+}

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.spec.ts

@@ -1,7 +1,11 @@
 import { SimpleChange } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import * as pdfjs from 'pdfjs-dist/legacy/build/pdf.mjs'
-import { PDFSinglePageViewer, PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs'
+import {
+  LinkTarget,
+  PDFSinglePageViewer,
+  PDFViewer,
+} from 'pdfjs-dist/web/pdf_viewer.mjs'
 import { PngxPdfViewerComponent } from './pdf-viewer.component'
 import { PdfRenderMode, PdfZoomLevel, PdfZoomScale } from './pdf-viewer.types'
 
@@ -58,6 +62,16 @@ describe('PngxPdfViewerComponent', () => {
     expect((component as any).pdfViewer).toBeInstanceOf(PDFViewer)
   })
 
+  it('opens external links in a new tab', () => {
+    const linkService = (component as any).linkService
+    expect(linkService.options).toEqual(
+      expect.objectContaining({
+        externalLinkTarget: LinkTarget.BLANK,
+        externalLinkRel: 'noopener noreferrer nofollow',
+      })
+    )
+  })
+
   it('resolves the worker source relative to the document base URI', async () => {
     setBaseHref('/paperless/')
     const getDocumentSpy = jest.spyOn(pdfjs, 'getDocument')
@@ -76,6 +90,7 @@ describe('PngxPdfViewerComponent', () => {
       withCredentials: true,
       wasmUrl: expect.stringContaining('/paperless/assets/wasm/'),
       iccUrl: expect.stringContaining('/paperless/assets/iccs/'),
+      cMapUrl: expect.stringContaining('/paperless/assets/cmaps/'),
     })
   })
 

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts

@@ -21,6 +21,7 @@ import {
 } from 'pdfjs-dist/legacy/build/pdf.mjs'
 import {
   EventBus,
+  LinkTarget,
   PDFFindController,
   PDFLinkService,
   PDFSinglePageViewer,
@@ -75,7 +76,11 @@ export class PngxPdfViewerComponent
   private lastViewerPage?: number
 
   private readonly eventBus = new EventBus()
-  private readonly linkService = new PDFLinkService({ eventBus: this.eventBus })
+  private readonly linkService = new PDFLinkService({
+    eventBus: this.eventBus,
+    externalLinkTarget: LinkTarget.BLANK,
+    externalLinkRel: 'noopener noreferrer nofollow',
+  })
   private readonly findController = new PDFFindController({
     eventBus: this.eventBus,
     linkService: this.linkService,
@@ -185,6 +190,7 @@ export class PngxPdfViewerComponent
       withCredentials: true,
       wasmUrl: new URL('assets/wasm/', this.document.baseURI).toString(),
       iccUrl: new URL('assets/iccs/', this.document.baseURI).toString(),
+      cMapUrl: new URL('assets/cmaps/', this.document.baseURI).toString(),
     }
     this.loadingTask = getDocument(initOptions)
     try {

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts

@@ -100,7 +100,7 @@ describe('ProfileEditDialogComponent', () => {
     expect(errorSpy).toHaveBeenCalled()
 
     updateSpy.mockClear()
-    const infoSpy = jest.spyOn(toastService, 'showInfo')
+    const infoSpy = jest.spyOn(toastService, 'showSuccess')
     component.form.patchValue(newProfile)
     updateSpy.mockReturnValueOnce(of(newProfile))
     component.save()
@@ -218,6 +218,38 @@ describe('ProfileEditDialogComponent', () => {
     jest.useRealTimers()
   })
 
+  it('should logout under base href on save if password changed', () => {
+    jest.useFakeTimers()
+    const base = document.createElement('base')
+    base.href = '/paperless/'
+    document.head.appendChild(base)
+    const getSpy = jest.spyOn(profileService, 'get')
+    getSpy.mockReturnValue(of(profile))
+    const getProvidersSpy = jest.spyOn(
+      profileService,
+      'getSocialAccountProviders'
+    )
+    getProvidersSpy.mockReturnValue(of(socialAccountProviders))
+    component.ngOnInit()
+    component['newPassword'] = 'new*pass'
+    component.form.get('password').patchValue('new*pass')
+    component.form.get('password_confirm').patchValue('new*pass')
+
+    const updateSpy = jest.spyOn(profileService, 'update')
+    updateSpy.mockReturnValue(of(null))
+    const navSpy = jest
+      .spyOn(navUtils, 'setLocationHref')
+      .mockImplementation(() => {})
+    component.save()
+    expect(updateSpy).toHaveBeenCalled()
+    jest.advanceTimersByTime(2600)
+    expect(navSpy).toHaveBeenCalledWith(
+      `${window.location.origin}/paperless/accounts/logout/?next=/paperless/accounts/login/?next=/paperless/`
+    )
+    base.remove()
+    jest.useRealTimers()
+  })
+
   it('should support auth token copy', () => {
     jest.useFakeTimers()
     const getSpy = jest.spyOn(profileService, 'get')
@@ -341,7 +373,7 @@ describe('ProfileEditDialogComponent', () => {
   it('should activate totp', () => {
     const activateSpy = jest.spyOn(profileService, 'activateTotp')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const error = new Error('failed to activate totp')
     activateSpy.mockReturnValueOnce(throwError(() => error))
     component.totpSettings.set({
@@ -373,7 +405,7 @@ describe('ProfileEditDialogComponent', () => {
   it('should deactivate totp', () => {
     const deactivateSpy = jest.spyOn(profileService, 'deactivateTotp')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const error = new Error('failed to deactivate totp')
     deactivateSpy.mockReturnValueOnce(throwError(() => error))
     component.deactivateTotp()

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts

@@ -204,14 +204,15 @@ export class ProfileEditDialogComponent
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: () => {
-          this.toastService.showInfo($localize`Profile updated successfully`)
+          this.toastService.showSuccess($localize`Profile updated successfully`)
           if (passwordChanged) {
             this.toastService.showInfo(
               $localize`Password has been changed, you will be logged out momentarily.`
             )
             setTimeout(() => {
+              const basePath = new URL(document.baseURI).pathname
               setLocationHref(
-                `${window.location.origin}/accounts/logout/?next=/accounts/login/?next=/`
+                `${window.location.origin}${basePath}accounts/logout/?next=${basePath}accounts/login/?next=${basePath}`
               )
             }, 2500)
           }
@@ -306,7 +307,9 @@ export class ProfileEditDialogComponent
           this.recoveryCodes.set(activationResponse.recovery_codes)
           this.form.get('totp_code').enable()
           if (activationResponse.success) {
-            this.toastService.showInfo($localize`TOTP activated successfully`)
+            this.toastService.showSuccess(
+              $localize`TOTP activated successfully`
+            )
           } else {
             this.toastService.showError($localize`Error activating TOTP`)
           }
@@ -330,7 +333,9 @@ export class ProfileEditDialogComponent
           this.isTotpEnabled.set(!success)
           this.recoveryCodes.set(null)
           if (success) {
-            this.toastService.showInfo($localize`TOTP deactivated successfully`)
+            this.toastService.showSuccess(
+              $localize`TOTP deactivated successfully`
+            )
           } else {
             this.toastService.showError($localize`Error deactivating TOTP`)
           }

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.html

@@ -1,23 +1,23 @@
-<div class="btn-group">
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="clickSuggest()" [disabled]="disabled() || loading() || (suggestions() && !aiEnabled())" [aria-label]="noSuggestions ? 'No suggestions' : 'Suggest'" i18n-aria-label>
-    @if (loading()) {
-      <div class="spinner-border spinner-border-sm" role="status"></div>
-    } @else if (noSuggestions) {
-      <i-bs width="1.2em" height="1.2em" name="check-circle"></i-bs>
-    } @else {
-      <i-bs width="1.2em" height="1.2em" name="stars"></i-bs>
-    }
-    @if (noSuggestions) {
-      <span class="d-none d-lg-inline ps-1" i18n>No suggestions</span>
-    } @else {
-      <span class="d-none d-lg-inline ps-1" i18n>Suggest</span>
-    }
-    @if (totalSuggestions > 0) {
-      <span class="badge bg-primary ms-2">{{ totalSuggestions }}</span>
-    }
-  </button>
+<div class="d-flex align-items-center">
+  <div class="btn-group">
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="clickSuggest()" [disabled]="disabled() || loading()" [aria-label]="noSuggestions ? 'No suggestions' : 'Suggest'" i18n-aria-label>
+      @if (loading()) {
+        <div class="spinner-border spinner-border-sm" role="status"></div>
+      } @else if (noSuggestions) {
+        <i-bs width="1.2em" height="1.2em" name="check-circle"></i-bs>
+      } @else {
+        <i-bs width="1.2em" height="1.2em" name="lightbulb"></i-bs>
+      }
+      @if (noSuggestions) {
+        <span class="d-none d-lg-inline ps-1" i18n>No suggestions</span>
+      } @else {
+        <span class="d-none d-lg-inline ps-1" i18n>Suggest</span>
+      }
+      @if (totalSuggestions > 0) {
+        <span class="badge bg-primary ms-2">{{ totalSuggestions }}</span>
+      }
+    </button>
 
-  @if (aiEnabled()) {
     <div class="btn-group" ngbDropdown #dropdown="ngbDropdown" [popperOptions]="popperOptions">
       <button type="button" class="btn btn-sm btn-outline-primary" ngbDropdownToggle [disabled]="disabled() || loading() || !suggestions()" aria-expanded="false" aria-controls="suggestionsDropdown" aria-label="Suggestions dropdown">
         <span class="visually-hidden" i18n>Show suggestions</span>
@@ -25,7 +25,7 @@
 
       <div ngbDropdownMenu aria-labelledby="suggestionsDropdown" class="shadow suggestions-dropdown">
         <div class="list-group list-group-flush small pb-0">
-          @if (novelSuggestions === 0 && reusableSuggestions === 0) {
+          @if (novelSuggestions === 0 && fieldSuggestions === 0) {
             <div class="list-group-item text-muted fst-italic">
               <small class="text-muted small fst-italic" i18n>No novel suggestions</small>
             </div>
@@ -48,13 +48,37 @@
               <button type="button" class="list-group-item list-group-item-action bg-light" (click)="addCorrespondent.emit(correspondent)">{{ correspondent }}</button>
             }
           }
-          @if (reusableSuggestions > 0) {
+          @if (fieldSuggestions > 0) {
             <div class="list-group-item text-muted fst-italic">
-              <small class="text-muted small fst-italic" i18n>{reusableSuggestions, plural, =1 {1 existing value suggested below} other {{{reusableSuggestions}} existing values suggested below}}</small>
+              <small class="text-muted small fst-italic" i18n>{fieldSuggestions, plural, =1 {1 suggestion available below} other {{{fieldSuggestions}} suggestions available below}}</small>
             </div>
           }
         </div>
       </div>
     </div>
+  </div>
+
+  @if (aiEnabled()) {
+    <div ngbDropdown autoClose="outside" placement="bottom-end" [popperOptions]="popperOptions">
+      <button type="button" class="btn btn-sm btn-link position-relative" ngbDropdownToggle [disabled]="disabled() || loading()" i18n-title title="Suggestion options">
+        <i-bs name="three-dots"></i-bs>
+        @if (source() !== defaultSource()) {
+          <span class="position-absolute top-0 start-100 translate-middle p-1 bg-primary border border-light rounded-circle">
+            <span class="visually-hidden" i18n>Not using default</span>
+          </span>
+        }
+      </button>
+      <div ngbDropdownMenu class="shadow p-3">
+        <div class="small text-muted mb-2" i18n>Suggest using:</div>
+        <div class="form-check small">
+          <input class="form-check-input" type="checkbox" id="suggestionSourceML" [checked]="useML" [disabled]="useML && !useAI" (change)="setSources($event.target.checked, useAI)">
+          <label class="form-check-label d-inline-flex align-items-center gap-1" for="suggestionSourceML"><i-bs name="cpu"></i-bs><ng-container i18n>ML</ng-container></label>
+        </div>
+        <div class="form-check small">
+          <input class="form-check-input" type="checkbox" id="suggestionSourceAI" [checked]="useAI" [disabled]="useAI && !useML" (change)="setSources(useML, $event.target.checked)">
+          <label class="form-check-label d-inline-flex align-items-center gap-1" for="suggestionSourceAI"><i-bs name="stars"></i-bs><ng-container i18n>AI</ng-container></label>
+        </div>
+      </div>
+    </div>
   }
 </div>

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.scss

@@ -1,3 +1,7 @@
 .suggestions-dropdown {
   min-width: 250px;
 }
+
+.btn-link.dropdown-toggle::after {
+  display: none;
+}

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { SuggestionSource } from 'src/app/data/ui-settings'
 import { SuggestionsDropdownComponent } from './suggestions-dropdown.component'
 
 describe('SuggestionsDropdownComponent', () => {
@@ -83,7 +84,7 @@ describe('SuggestionsDropdownComponent', () => {
     fixture.detectChanges()
 
     expect(fixture.nativeElement.textContent).toContain(
-      '2 existing values suggested below'
+      '2 suggestions available below'
     )
     expect(fixture.nativeElement.textContent).not.toContain(
       'No novel suggestions'
@@ -107,7 +108,7 @@ describe('SuggestionsDropdownComponent', () => {
     expect(component.totalSuggestions).toBe(4)
     expect(fixture.nativeElement.textContent).toContain('Arbitration')
     expect(fixture.nativeElement.textContent).toContain(
-      '2 existing values suggested below'
+      '2 suggestions available below'
     )
   })
 
@@ -124,10 +125,46 @@ describe('SuggestionsDropdownComponent', () => {
     })
 
     expect(component.novelSuggestions).toBe(0)
-    expect(component.totalSuggestions).toBe(5)
+    expect(component.totalSuggestions).toBe(6)
 
     fixture.componentRef.setInput('appliedStoragePath', 7)
-    expect(component.totalSuggestions).toBe(4)
+    expect(component.totalSuggestions).toBe(5)
+  })
+
+  it('should count title and dates as field suggestions without calling them existing values', () => {
+    fixture.componentRef.setInput('aiEnabled', true)
+    fixture.componentRef.setInput('fetchedSources', [SuggestionSource.ML])
+    fixture.componentRef.setInput('suggestions', {
+      title: 'Suggested title',
+      dates: ['2026-01-04', '2026-02-01', '2026-03-01'],
+      correspondents: [1, 2, 3, 4],
+      document_types: [1, 2, 3, 4],
+      tags: [1, 2, 3, 4, 5, 6, 7, 8],
+    })
+    fixture.detectChanges()
+    component.clickSuggest()
+    fixture.detectChanges()
+
+    expect(component.reusableSuggestions).toBe(16)
+    expect(component.fieldSuggestions).toBe(20)
+    expect(component.totalSuggestions).toBe(20)
+    expect(fixture.nativeElement.textContent).toContain(
+      '20 suggestions available below'
+    )
+    expect(fixture.nativeElement.textContent).not.toContain('existing value')
+  })
+
+  it('should not count title or date suggestions matching the current values', () => {
+    fixture.componentRef.setInput('suggestions', {
+      title: 'Current title',
+      dates: ['2026-01-04', '2026-02-01'],
+    })
+    expect(component.fieldSuggestions).toBe(3)
+
+    fixture.componentRef.setInput('appliedTitle', 'Current title')
+    fixture.componentRef.setInput('appliedCreated', '2026-01-04')
+    expect(component.fieldSuggestions).toBe(1)
+    expect(component.totalSuggestions).toBe(1)
   })
 
   it('should show when a completed request returned no suggestions', () => {
@@ -144,6 +181,28 @@ describe('SuggestionsDropdownComponent', () => {
     expect(fixture.nativeElement.textContent).toContain('No suggestions')
   })
 
+  it('should wait for all pending responses before showing the empty state', () => {
+    fixture.componentRef.setInput('aiEnabled', true)
+    fixture.componentRef.setInput('source', SuggestionSource.Both)
+    fixture.componentRef.setInput('fetchedSources', [SuggestionSource.ML])
+    fixture.componentRef.setInput('suggestions', { tags: [] })
+    fixture.componentRef.setInput('loading', true)
+    fixture.detectChanges()
+
+    expect(component.noSuggestions).toBeFalsy()
+    expect(fixture.nativeElement.textContent).not.toContain('No suggestions')
+    expect(
+      fixture.nativeElement.querySelector('[role="status"]')
+    ).not.toBeNull()
+
+    fixture.componentRef.setInput('loading', false)
+    fixture.detectChanges()
+
+    expect(component.noSuggestions).toBeTruthy()
+    expect(fixture.nativeElement.textContent).toContain('No suggestions')
+    expect(fixture.nativeElement.querySelector('[role="status"]')).toBeNull()
+  })
+
   it('should not show the empty state before a request or with suggestions', () => {
     expect(component.noSuggestions).toBeFalsy()
 
@@ -179,14 +238,102 @@ describe('SuggestionsDropdownComponent', () => {
 
   it('should toggle dropdown when clickSuggest is called and suggestions are not null', () => {
     fixture.componentRef.setInput('aiEnabled', true)
+    fixture.componentRef.setInput('fetchedSources', [SuggestionSource.ML])
     fixture.detectChanges()
     fixture.componentRef.setInput('suggestions', {
       suggested_correspondents: [],
       suggested_tags: [],
       suggested_document_types: [],
     })
+    fixture.detectChanges()
     component.clickSuggest()
-    expect(component.dropdown.open).toBeTruthy()
+    expect(component.dropdown.isOpen()).toBeTruthy()
     expect(fixture.nativeElement.textContent).toContain('No novel suggestions')
   })
+
+  it('should open ML date suggestions with AI disabled', () => {
+    const getSuggestions = jest.spyOn(component.getSuggestions, 'emit')
+    fixture.componentRef.setInput('aiEnabled', false)
+    fixture.componentRef.setInput('fetchedSources', [SuggestionSource.ML])
+    fixture.componentRef.setInput('suggestions', {
+      dates: ['2026-01-04', '2026-02-01'],
+    })
+    fixture.componentRef.setInput('appliedCreated', '2026-01-04')
+    fixture.detectChanges()
+
+    const button = fixture.nativeElement.querySelector('button')
+    expect(button.disabled).toBeFalsy()
+    expect(button.querySelector('.badge').textContent.trim()).toBe('1')
+
+    button.click()
+    fixture.detectChanges()
+
+    expect(component.dropdown.isOpen()).toBeTruthy()
+    expect(fixture.nativeElement.textContent).toContain(
+      '1 suggestion available below'
+    )
+    expect(getSuggestions).not.toHaveBeenCalled()
+    expect(
+      fixture.nativeElement.querySelector('button[title="Suggestion options"]')
+    ).toBeNull()
+
+    button.click()
+    fixture.detectChanges()
+    expect(component.dropdown.isOpen()).toBeFalsy()
+  })
+
+  it('should fetch unfetched sources and show existing suggestions', () => {
+    jest.spyOn(component.getSuggestions, 'emit')
+    fixture.componentRef.setInput('aiEnabled', true)
+    fixture.componentRef.setInput('source', SuggestionSource.Both)
+    fixture.componentRef.setInput('fetchedSources', [SuggestionSource.ML])
+    fixture.componentRef.setInput('suggestions', { tags: [1] })
+    fixture.detectChanges()
+    component.clickSuggest()
+    expect(component.getSuggestions.emit).toHaveBeenCalledWith(
+      SuggestionSource.Both
+    )
+    expect(component.dropdown.isOpen()).toBeTruthy()
+  })
+
+  it('should only show source options when AI is enabled', () => {
+    expect(
+      fixture.nativeElement.querySelector('#suggestionSourceML')
+    ).toBeNull()
+    fixture.componentRef.setInput('aiEnabled', true)
+    fixture.detectChanges()
+    fixture.nativeElement
+      .querySelector('button[title="Suggestion options"]')
+      .click()
+    fixture.detectChanges()
+    expect(
+      fixture.nativeElement.querySelector('#suggestionSourceML')
+    ).not.toBeNull()
+  })
+
+  it('should emit source changes and never allow no source', () => {
+    const emitSpy = jest.spyOn(component.sourceChange, 'emit')
+    component.setSources(true, true)
+    expect(emitSpy).toHaveBeenCalledWith(SuggestionSource.Both)
+    component.setSources(true, false)
+    expect(emitSpy).toHaveBeenCalledWith(SuggestionSource.ML)
+    component.setSources(false, true)
+    expect(emitSpy).toHaveBeenCalledWith(SuggestionSource.AI)
+
+    emitSpy.mockClear()
+    component.setSources(false, false)
+    expect(emitSpy).not.toHaveBeenCalled()
+  })
+
+  it('should indicate a non-default source', () => {
+    fixture.componentRef.setInput('aiEnabled', true)
+    fixture.componentRef.setInput('source', SuggestionSource.AI)
+    fixture.componentRef.setInput('defaultSource', SuggestionSource.AI)
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).not.toContain('Not using default')
+
+    fixture.componentRef.setInput('source', SuggestionSource.Both)
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).toContain('Not using default')
+  })
 })

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.ts

@@ -8,6 +8,7 @@ import {
 import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { DocumentSuggestions } from 'src/app/data/document-suggestions'
+import { SuggestionSource } from 'src/app/data/ui-settings'
 import { pngxPopperOptions } from 'src/app/utils/popper-options'
 
 @Component({
@@ -18,21 +19,29 @@ import { pngxPopperOptions } from 'src/app/utils/popper-options'
 })
 export class SuggestionsDropdownComponent {
   public popperOptions = pngxPopperOptions
+  public readonly SuggestionSource = SuggestionSource
 
   @ViewChild('dropdown') dropdown: NgbDropdown
   readonly suggestions = input<DocumentSuggestions>(null)
   readonly aiEnabled = input(false)
   readonly loading = input(false)
   readonly disabled = input(false)
+  readonly source = input<SuggestionSource>(SuggestionSource.ML)
+  readonly defaultSource = input<SuggestionSource>(SuggestionSource.ML)
+  readonly fetchedSources = input<SuggestionSource[]>([])
 
   readonly appliedTags = input<number[]>([])
   readonly appliedCorrespondent = input<number>(null)
   readonly appliedDocumentType = input<number>(null)
   readonly appliedStoragePath = input<number>(null)
+  readonly appliedTitle = input<string>(null)
+  readonly appliedCreated = input<string>(null)
 
   @Output()
-  getSuggestions: EventEmitter<SuggestionsDropdownComponent> =
-    new EventEmitter()
+  getSuggestions: EventEmitter<SuggestionSource> = new EventEmitter()
+
+  @Output()
+  sourceChange: EventEmitter<SuggestionSource> = new EventEmitter()
 
   @Output()
   addTag: EventEmitter<string> = new EventEmitter()
@@ -44,21 +53,47 @@ export class SuggestionsDropdownComponent {
   addCorrespondent: EventEmitter<string> = new EventEmitter()
 
   public clickSuggest(): void {
-    if (
-      this.disabled() ||
-      this.loading() ||
-      (this.suggestions() && !this.aiEnabled())
-    ) {
+    if (this.disabled() || this.loading()) {
       return
     }
 
     if (!this.suggestions()) {
-      this.getSuggestions.emit(this)
+      this.getSuggestions.emit(this.source())
+    } else if (this.hasUnfetchedSources) {
+      // sources changed, fetch the rest and show what we have meanwhile
+      this.getSuggestions.emit(this.source())
+      this.dropdown?.open()
     } else {
       this.dropdown?.toggle()
     }
   }
 
+  get useML(): boolean {
+    return this.source() !== SuggestionSource.AI
+  }
+
+  get useAI(): boolean {
+    return this.source() !== SuggestionSource.ML
+  }
+
+  get hasUnfetchedSources(): boolean {
+    const fetched = this.fetchedSources()
+    return (
+      (this.useML && !fetched.includes(SuggestionSource.ML)) ||
+      (this.useAI && !fetched.includes(SuggestionSource.AI))
+    )
+  }
+
+  public setSources(ml: boolean, ai: boolean) {
+    if (ml && ai) {
+      this.sourceChange.emit(SuggestionSource.Both)
+    } else if (ml) {
+      this.sourceChange.emit(SuggestionSource.ML)
+    } else if (ai) {
+      this.sourceChange.emit(SuggestionSource.AI)
+    }
+  }
+
   get novelSuggestions(): number {
     return (
       (this.suggestions()?.suggested_correspondents?.length ?? 0) +
@@ -91,7 +126,28 @@ export class SuggestionsDropdownComponent {
   }
 
   get totalSuggestions(): number {
-    return this.novelSuggestions + this.reusableSuggestions
+    return this.novelSuggestions + this.fieldSuggestions
+  }
+
+  get fieldSuggestions(): number {
+    return (
+      this.reusableSuggestions +
+      this.unappliedTitleSuggestions +
+      this.unappliedDateSuggestions
+    )
+  }
+
+  // hide a title or date suggestion equal to the current value
+  private get unappliedTitleSuggestions(): number {
+    const title = this.suggestions()?.title
+    return title && title !== this.appliedTitle() ? 1 : 0
+  }
+
+  private get unappliedDateSuggestions(): number {
+    const created = this.appliedCreated()
+    return (this.suggestions()?.dates ?? []).filter(
+      (date) => !created || date !== created
+    ).length
   }
 
   private countUnapplied(suggested: number[], applied: number[]): number {
@@ -102,6 +158,7 @@ export class SuggestionsDropdownComponent {
   get noSuggestions(): boolean {
     const suggestions = this.suggestions()
     return (
+      !this.loading() &&
       suggestions != null &&
       !suggestions.title &&
       !suggestions.tags?.length &&

src-ui/src/app/components/common/toast/toast.component.html

@@ -1,22 +1,33 @@
 <ngb-toast
-    [autohide]="autohide"
-    [delay]="toast.delay"
-    [class]="toast.classname"
-    [class.mb-2]="true"
+    [autohide]="false"
+    [class.mb-2]="autohide"
+    [class.toast-list-item]="!autohide"
+    [class.toast-new]="isNew"
+    [class.toast-success]="toast.level === ToastLevel.Success"
+    [class.toast-error]="toast.level === ToastLevel.Error"
+    (mouseenter)="setHovered(true)"
+    (mouseleave)="setHovered(false)"
+    (focusin)="setFocused(true)"
+    (focusout)="setFocused(false)"
     (shown)="onShown(toast)"
     (hidden)="hidden.emit(toast)">
         @if (autohide) {
-            <ngb-progressbar class="position-absolute h-100 w-100 top-90 start-0 bottom-0 end-0 pe-none" type="dark" [max]="toast.delay" [value]="toast.delayRemaining"></ngb-progressbar>
-            <span class="visually-hidden">{{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds</span>
+            <ngb-progressbar class="position-absolute w-100 start-0 bottom-0 pe-none" [max]="toast.delay" [value]="delayRemaining()"></ngb-progressbar>
+            <span class="visually-hidden">{{ delayRemaining() / 1000 | number: '1.0-0' }} seconds</span>
         }
         <div class="d-flex align-items-top">
-        @if (!toast.error) {
-            <i-bs width="0.9em" height="0.9em" name="info-circle"></i-bs>
+        @switch (toast.level) {
+            @case (ToastLevel.Success) {
+                <i-bs width="0.9em" height="0.9em" name="check-circle" class="toast-icon"></i-bs>
+            }
+            @case (ToastLevel.Error) {
+                <i-bs width="0.9em" height="0.9em" name="exclamation-triangle" class="toast-icon"></i-bs>
+            }
+            @default {
+                <i-bs width="0.9em" height="0.9em" name="info-circle" class="toast-icon"></i-bs>
+            }
         }
-        @if (toast.error) {
-            <i-bs width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
-        }
-        <div>
+        <div class="toast-content">
             <p class="ms-2 mb-0 text-break">{{toast.content}}</p>
             @if (toast.error) {
             <details class="ms-2">
@@ -48,9 +59,12 @@
             </details>
             }
             @if (toast.action) {
-            <p class="mb-0 mt-2"><button class="btn btn-sm btn-outline-secondary" (click)="closed.emit(toast); toast.action()">{{toast.actionName}}</button></p>
+            <button class="btn btn-sm toast-action ms-2 mt-2" (click)="actioned.emit(toast); toast.action()">{{toast.actionName}}</button>
             }
         </div>
+        @if (!autohide && toast.timestamp) {
+            <span class="toast-time small text-body-secondary text-nowrap ms-auto ps-2">{{relativeTimestamp}}</span>
+        }
         <button type="button" class="btn-close ms-auto flex-shrink-0" data-bs-dismiss="toast" aria-label="Close" (click)="closed.emit(toast);"></button>
     </div>
 </ngb-toast>

src-ui/src/app/components/common/toast/toast.component.scss

@@ -2,19 +2,105 @@
     position: relative;
 }
 
-::ng-deep .toast.error {
-    border-color: hsla(350, 79%, 40%, 0.4); // bg-danger
+.toast {
+    --pngx-toast-accent: var(--pngx-toast-info);
+    background-color: var(--pngx-toast-bg);
+    color: var(--bs-body-color);
+    overflow: hidden;
+
+    &.toast-success {
+        --pngx-toast-accent: var(--pngx-toast-success);
+        background-color: var(--pngx-toast-success-bg);
+        border-color: color-mix(in srgb, var(--pngx-toast-success) 30%, transparent);
+    }
+
+    &.toast-error {
+        --pngx-toast-accent: var(--pngx-toast-error);
+        background-color: var(--pngx-toast-error-bg);
+        border-color: color-mix(in srgb, var(--pngx-toast-error) 35%, transparent);
+    }
 }
 
-::ng-deep .toast.error .toast-body {
-    background-color: hsla(350, 79%, 40%, 0.8); // bg-danger
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
+.toast-icon {
+    color: var(--pngx-toast-accent);
 }
 
+.toast-content {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.toast .btn-close {
+    font-size: .6rem;
+    margin-top: .3rem;
+    margin-left: .75rem !important;
+    opacity: .45;
+}
+
+.toast:hover .btn-close {
+    opacity: .85;
+}
+
+// compact rows in the notifications dropdown
+.toast.toast-list-item {
+    width: 100%;
+    max-width: none;
+    background-color: var(--pngx-toast-row-bg);
+    border: 0;
+    box-shadow: none;
+
+    &:hover {
+        background-color: var(--pngx-toast-row-hover-bg);
+    }
+
+    &.toast-error {
+        background-color: var(--pngx-toast-error-bg);
+    }
+
+    ::ng-deep .toast-body {
+        padding: .625rem .75rem;
+    }
+
+    .toast-time {
+        margin-top: .1rem;
+    }
+
+    // marks notifications that arrived since the dropdown was last opened
+    &.toast-new .toast-time::before {
+        content: '';
+        display: inline-block;
+        width: .45rem;
+        height: .45rem;
+        margin-right: .4rem;
+        vertical-align: .05rem;
+        border-radius: 50%;
+        background-color: var(--pngx-toast-info);
+    }
+}
+
+.toast-action {
+    --bs-btn-padding-y: .1rem;
+    --bs-btn-padding-x: .6rem;
+    --bs-btn-font-size: .8rem;
+    --bs-btn-font-weight: 600;
+    --bs-btn-color: var(--pngx-toast-accent);
+    --bs-btn-bg: color-mix(in srgb, var(--pngx-toast-accent) 14%, transparent);
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--pngx-toast-accent);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--pngx-toast-accent) 24%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--pngx-toast-accent);
+    --bs-btn-active-bg: color-mix(in srgb, var(--pngx-toast-accent) 30%, transparent);
+    --bs-btn-active-border-color: transparent;
+}
+
+// countdown thin line
 .progress {
-    background-color: var(--pngx-primary);
-    opacity: .07;
+    height: 2px;
+    background-color: transparent;
+
+    ::ng-deep .progress-bar {
+        background-color: var(--bs-secondary-color);
+        opacity: .5;
+    }
 }

src-ui/src/app/components/common/toast/toast.component.spec.ts

@@ -1,7 +1,11 @@
+import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { Clipboard } from '@angular/cdk/clipboard'
 import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { ToastLevel } from 'src/app/services/toast.service'
 import { ToastComponent } from './toast.component'
 
 const toast1 = {
@@ -30,6 +34,11 @@ describe('ToastComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ToastComponent, NgxBootstrapIconsModule.pick(allIcons)],
+      providers: [
+        DatePipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(ToastComponent)
@@ -46,11 +55,117 @@ describe('ToastComponent', () => {
     component.toast = toast2
     fixture.detectChanges()
     component.onShown(toast2)
-    jest.advanceTimersByTime(5000)
-    expect(component.toast.delayRemaining).toEqual(0)
+    jest.advanceTimersByTime(5000 + 150) // ticks every 150ms
+    expect(component.delayRemaining()).toEqual(0)
     jest.useRealTimers()
   })
 
+  it('should start the progress bar full before the countdown begins', () => {
+    component.toast = { content: 'Info', delay: 3000 }
+    fixture.detectChanges()
+    expect(component.delayRemaining()).toEqual(3000)
+  })
+
+  it('should hide the toast when the countdown ends', () => {
+    jest.useFakeTimers()
+    const toast = { content: 'Info', delay: 3000 }
+    component.toast = toast
+    fixture.detectChanges()
+    const hideSpy = jest.spyOn(component.ngbToast, 'hide')
+    component.onShown(toast)
+    jest.advanceTimersByTime(2850)
+    expect(hideSpy).not.toHaveBeenCalled()
+    jest.advanceTimersByTime(300)
+    expect(hideSpy).toHaveBeenCalled()
+    jest.useRealTimers()
+  })
+
+  it('should pause the countdown while hovered', () => {
+    jest.useFakeTimers()
+    const toast = { content: 'Info', delay: 3000 }
+    component.toast = toast
+    fixture.detectChanges()
+    const hideSpy = jest.spyOn(component.ngbToast, 'hide')
+    const el: HTMLElement = fixture.nativeElement.querySelector('ngb-toast')
+    component.onShown(toast)
+    jest.advanceTimersByTime(1500)
+    el.dispatchEvent(new MouseEvent('mouseenter'))
+    const remaining = component.delayRemaining()
+    jest.advanceTimersByTime(10000)
+    expect(component.delayRemaining()).toEqual(remaining)
+    expect(hideSpy).not.toHaveBeenCalled()
+
+    el.dispatchEvent(new MouseEvent('mouseleave'))
+    jest.advanceTimersByTime(remaining + 150)
+    expect(hideSpy).toHaveBeenCalled()
+    jest.useRealTimers()
+  })
+
+  it('should pause the countdown while focus is inside', () => {
+    jest.useFakeTimers()
+    const toast = { content: 'Info', delay: 3000 }
+    component.toast = toast
+    fixture.detectChanges()
+    const el: HTMLElement = fixture.nativeElement.querySelector('ngb-toast')
+    component.onShown(toast)
+    el.dispatchEvent(new FocusEvent('focusin'))
+    // mouse leaving doesn't resume while focus is still inside
+    el.dispatchEvent(new MouseEvent('mouseenter'))
+    el.dispatchEvent(new MouseEvent('mouseleave'))
+    jest.advanceTimersByTime(5000)
+    expect(component.delayRemaining()).toEqual(3000)
+    el.dispatchEvent(new FocusEvent('focusout'))
+    jest.advanceTimersByTime(3000)
+    expect(component.delayRemaining()).toEqual(0)
+    jest.useRealTimers()
+  })
+
+  it('should not count down without autohide', () => {
+    jest.useFakeTimers()
+    const toast = { content: 'Info', delay: 3000 }
+    component.toast = toast
+    component.autohide = false
+    fixture.detectChanges()
+    component.onShown(toast)
+    jest.advanceTimersByTime(5000)
+    expect(component.delayRemaining()).toBeNull()
+    jest.useRealTimers()
+  })
+
+  it('should show an icon and colors for each level', () => {
+    component.toast = {
+      content: 'Saved',
+      delay: 5000,
+      level: ToastLevel.Success,
+    }
+    fixture.detectChanges()
+    const el: HTMLElement = fixture.nativeElement
+    expect(el.querySelector('i-bs[name="check-circle"]')).not.toBeNull()
+    expect(el.querySelector('ngb-toast').classList).not.toContain('toast-error')
+
+    fixture = TestBed.createComponent(ToastComponent)
+    fixture.componentInstance.toast = {
+      content: 'Failed',
+      delay: 5000,
+      level: ToastLevel.Error,
+    }
+    fixture.detectChanges()
+    const errorEl: HTMLElement = fixture.nativeElement
+    expect(
+      errorEl.querySelector('i-bs[name="exclamation-triangle"]')
+    ).not.toBeNull()
+    expect(errorEl.querySelector('ngb-toast').classList).toContain(
+      'toast-error'
+    )
+
+    fixture = TestBed.createComponent(ToastComponent)
+    fixture.componentInstance.toast = { content: 'Started', delay: 5000 }
+    fixture.detectChanges()
+    expect(
+      fixture.nativeElement.querySelector('i-bs[name="info-circle"]')
+    ).not.toBeNull()
+  })
+
   it('should show an error if given with toast', () => {
     component.toast = toast1
     fixture.detectChanges()
@@ -88,4 +203,70 @@ describe('ToastComponent', () => {
       component.getErrorText({ error: new Array(205).join('a') })
     ).toContain('...')
   })
+
+  it('should emit actioned, not closed, when the action is clicked', () => {
+    const action = jest.fn()
+    component.toast = {
+      content: 'Moved',
+      delay: 5000,
+      action,
+      actionName: 'Undo',
+    }
+    fixture.detectChanges()
+    const closedSpy = jest.spyOn(component.closed, 'emit')
+    const actionedSpy = jest.spyOn(component.actioned, 'emit')
+    const button: HTMLButtonElement = [
+      ...fixture.nativeElement.querySelectorAll('button'),
+    ].find((b) => b.textContent.includes('Undo'))
+    button.click()
+    expect(actionedSpy).toHaveBeenCalled()
+    expect(closedSpy).not.toHaveBeenCalled()
+    expect(action).toHaveBeenCalled()
+  })
+
+  it('should show a relative timestamp in the notifications list', () => {
+    component.toast = { content: 'Saved', delay: 5000, timestamp: new Date() }
+    component.autohide = false
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).toContain('Just now')
+  })
+
+  it('should update the relative timestamp as time passes', () => {
+    jest.useFakeTimers()
+    jest.setSystemTime(new Date('2026-10-19T12:00:00Z'))
+    component.toast = { content: 'Saved', delay: 5000, timestamp: new Date() }
+    component.autohide = false
+    fixture.componentRef.setInput('now', new Date())
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).toContain('Just now')
+
+    jest.setSystemTime(new Date('2026-10-19T12:03:00Z'))
+    fixture.componentRef.setInput('now', new Date())
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).toContain('3 minutes ago')
+    jest.useRealTimers()
+  })
+
+  it('should show a compact action link in the notifications list', () => {
+    const action = jest.fn()
+    component.toast = {
+      content: 'Moved',
+      delay: 5000,
+      action,
+      actionName: 'Undo',
+      timestamp: new Date(),
+    }
+    component.autohide = false
+    fixture.detectChanges()
+    const link: HTMLButtonElement =
+      fixture.nativeElement.querySelector('.toast-action')
+    expect(link.textContent).toContain('Undo')
+    expect(
+      fixture.nativeElement.querySelector('.btn-outline-secondary')
+    ).toBeNull()
+    const actionedSpy = jest.spyOn(component.actioned, 'emit')
+    link.click()
+    expect(actionedSpy).toHaveBeenCalled()
+    expect(action).toHaveBeenCalled()
+  })
 })

src-ui/src/app/components/common/toast/toast.component.ts

@@ -1,20 +1,26 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { DecimalPipe } from '@angular/common'
+import { DatePipe, DecimalPipe } from '@angular/common'
 import {
   Component,
+  DestroyRef,
   EventEmitter,
   Input,
+  OnInit,
   Output,
+  ViewChild,
   inject,
   signal,
 } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import {
   NgbProgressbarModule,
+  NgbToast,
   NgbToastModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { interval, take } from 'rxjs'
-import { Toast } from 'src/app/services/toast.service'
+import { Subscription, interval, takeWhile } from 'rxjs'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { Toast, ToastLevel } from 'src/app/services/toast.service'
 
 @Component({
   selector: 'pngx-toast',
@@ -26,32 +32,79 @@ import { Toast } from 'src/app/services/toast.service'
   ],
   templateUrl: './toast.component.html',
   styleUrl: './toast.component.scss',
+  providers: [DatePipe, CustomDatePipe],
 })
-export class ToastComponent {
+export class ToastComponent implements OnInit {
   private clipboard = inject(Clipboard)
+  private customDatePipe = inject(CustomDatePipe)
+  private destroyRef = inject(DestroyRef)
   readonly copied = signal(false)
+  readonly ToastLevel = ToastLevel
+  readonly delayRemaining = signal<number>(null)
+
+  @ViewChild(NgbToast) ngbToast: NgbToast
+
+  private hovered = false
+  private focused = false
+  private countdown: Subscription
 
   @Input() toast: Toast
 
   @Input() autohide: boolean = true
 
+  /** Each new value re-renders the relative timestamp */
+  @Input() now: Date
+
+  /** Marks a notification that arrived since the dropdown was last opened */
+  @Input() isNew: boolean = false
+
   @Output() hidden: EventEmitter<Toast> = new EventEmitter<Toast>()
 
   @Output() closed: EventEmitter<Toast> = new EventEmitter<Toast>()
 
+  /** The toast's action button was clicked */
+  @Output() actioned: EventEmitter<Toast> = new EventEmitter<Toast>()
+
+  ngOnInit(): void {
+    if (this.autohide) this.delayRemaining.set(this.toast.delay)
+  }
+
+  get relativeTimestamp(): string {
+    return this.customDatePipe.transform(this.toast.timestamp, 'relative')
+  }
+
+  get paused(): boolean {
+    return this.hovered || this.focused
+  }
+
+  setHovered(hovered: boolean) {
+    this.hovered = hovered
+  }
+
+  setFocused(focused: boolean) {
+    this.focused = focused
+  }
+
   onShown(toast: Toast) {
     if (!this.autohide) return
 
     const refreshInterval = 150
-    const delay = toast.delay - 500 // for fade animation
+    this.delayRemaining.set(toast.delay)
 
-    interval(refreshInterval)
-      .pipe(take(Math.round(delay / refreshInterval)))
-      .subscribe((count) => {
-        toast.delayRemaining = Math.max(
-          0,
-          delay - refreshInterval * (count + 1)
+    this.countdown?.unsubscribe()
+    this.countdown = interval(refreshInterval)
+      .pipe(
+        takeWhile(() => this.delayRemaining() > 0),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe(() => {
+        if (this.paused) return
+        this.delayRemaining.update((remaining) =>
+          Math.max(0, remaining - refreshInterval)
         )
+        if (this.delayRemaining() === 0) {
+          this.ngbToast?.hide()
+        }
       })
   }
 

src-ui/src/app/components/common/toasts/toasts.component.html

@@ -1,3 +1,3 @@
 @for (toast of toasts(); track toast.id) {
-  <pngx-toast [toast]="toast" [autohide]="true" (closed)="closeToast()"></pngx-toast>
+  <pngx-toast [toast]="toast" [autohide]="true" (closed)="removePopup(toast)" (actioned)="closeToast(toast)" (hidden)="removePopup(toast)"></pngx-toast>
 }

src-ui/src/app/components/common/toasts/toasts.component.spec.ts

@@ -1,10 +1,11 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { Subject } from 'rxjs'
 import { Toast, ToastService } from 'src/app/services/toast.service'
-import { ToastsComponent } from './toasts.component'
+import { MAX_VISIBLE_TOASTS, ToastsComponent } from './toasts.component'
 
 const toast = {
   content: 'Error 2 content',
@@ -50,7 +51,7 @@ describe('ToastsComponent', () => {
   it('should close toast', () => {
     toastSubject.next(toast)
     const closeToastSpy = jest.spyOn(toastService, 'closeToast')
-    component.closeToast()
+    component.closeToast(toast)
     expect(component.toasts()).toEqual([])
     expect(closeToastSpy).toHaveBeenCalledWith(toast)
   })
@@ -59,4 +60,59 @@ describe('ToastsComponent', () => {
     toastSubject.next(toast)
     expect(component.toasts()).toEqual([toast])
   })
+
+  it('should stack popups newest first, up to the maximum', () => {
+    const toasts: Toast[] = Array.from(
+      { length: MAX_VISIBLE_TOASTS + 1 },
+      (_, i) => ({ id: `${i}`, content: `Toast ${i}`, delay: 5000 })
+    )
+    toasts.forEach((t) => toastSubject.next(t))
+    expect(component.toasts().map((t) => t.id)).toEqual(['3', '2', '1'])
+
+    // showing a visible toast again moves it to the top without duplicating
+    toastSubject.next(toasts[1])
+    expect(component.toasts().map((t) => t.id)).toEqual(['1', '3', '2'])
+  })
+
+  it('should remove a popup when it hides without closing it', () => {
+    const closeToastSpy = jest.spyOn(toastService, 'closeToast')
+    const first = { id: 'a', content: 'A', delay: 5000 }
+    const second = { id: 'b', content: 'B', delay: 5000 }
+    toastSubject.next(first)
+    toastSubject.next(second)
+    component.removePopup(first)
+    expect(component.toasts()).toEqual([second])
+    expect(closeToastSpy).not.toHaveBeenCalled()
+  })
+
+  it('should clear popups when toastService emits null', () => {
+    toastSubject.next(toast)
+    toastSubject.next(null)
+    expect(component.toasts()).toEqual([])
+  })
+
+  it('should render one toast component per popup', () => {
+    toastSubject.next({ id: 'a', content: 'A', delay: 5000 })
+    toastSubject.next({ id: 'b', content: 'B', delay: 5000 })
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelectorAll('pngx-toast')).toHaveLength(2)
+  })
+
+  it('should only hide the popup on close, but clear it on action', () => {
+    const closeToastSpy = jest.spyOn(toastService, 'closeToast')
+    const first = { id: 'a', content: 'A', delay: 5000 }
+    const second = { id: 'b', content: 'B', delay: 5000 }
+    toastSubject.next(first)
+    toastSubject.next(second)
+    fixture.detectChanges()
+    const popups = fixture.debugElement.queryAll(By.css('pngx-toast'))
+
+    popups[1].triggerEventHandler('closed', first)
+    expect(closeToastSpy).not.toHaveBeenCalled()
+    expect(component.toasts()).toEqual([second])
+
+    popups[0].triggerEventHandler('actioned', second)
+    expect(closeToastSpy).toHaveBeenCalledWith(second)
+    expect(component.toasts()).toEqual([])
+  })
 })

src-ui/src/app/components/common/toasts/toasts.component.ts

@@ -1,14 +1,18 @@
-import { Component, inject } from '@angular/core'
-import { toSignal } from '@angular/core/rxjs-interop'
+import { Component, inject, signal } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import {
   NgbAccordionModule,
   NgbProgressbarModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { map, merge, Subject } from 'rxjs'
 import { Toast, ToastService } from 'src/app/services/toast.service'
 import { ToastComponent } from '../toast/toast.component'
 
+/**
+ * Maximum number of popup toasts shown at once
+ */
+export const MAX_VISIBLE_TOASTS = 3
+
 @Component({
   selector: 'pngx-toasts',
   templateUrl: './toasts.component.html',
@@ -23,18 +27,31 @@ import { ToastComponent } from '../toast/toast.component'
 export class ToastsComponent {
   toastService = inject(ToastService)
 
-  private readonly closedToast = new Subject<void>()
+  readonly toasts = signal<Toast[]>([])
 
-  readonly toasts = toSignal(
-    merge(
-      this.toastService.showToast.pipe(map((toast) => (toast ? [toast] : []))),
-      this.closedToast.pipe(map(() => [] as Toast[]))
-    ),
-    { initialValue: [] as Toast[] }
-  )
+  constructor() {
+    this.toastService.showToast
+      .pipe(takeUntilDestroyed())
+      .subscribe((toast) => {
+        if (!toast) {
+          this.toasts.set([])
+          return
+        }
+        this.toasts.update((toasts) =>
+          [toast, ...toasts.filter((t) => t.id !== toast.id)].slice(
+            0,
+            MAX_VISIBLE_TOASTS
+          )
+        )
+      })
+  }
 
-  closeToast() {
-    this.toastService.closeToast(this.toasts()[0])
-    this.closedToast.next()
+  closeToast(toast: Toast) {
+    this.toastService.closeToast(toast)
+    this.removePopup(toast)
+  }
+
+  removePopup(toast: Toast) {
+    this.toasts.update((toasts) => toasts.filter((t) => t.id !== toast.id))
   }
 }

src-ui/src/app/components/common/upload-status-tray/upload-status-tray.component.html

@@ -0,0 +1,52 @@
+@if (canAddDocuments && getStatus().length > 0) {
+  <div class="fixed-bottom p-2 p-md-4 d-flex justify-content-end pe-none consumer-status-list" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'offset-sidebar-expanded'">
+    <div class="col col-lg-4 col-xl-3 ps-0 pe-0 ps-lg-3 pe-lg-0 pe-auto overflow-y-auto">
+      <div class="card shadow-sm consumer-status-card">
+        <div class="card-body">
+          <div class="d-flex flex-wrap align-items-center column-gap-2">
+            <p class="m-0 small text-muted">{{getStatusSummary()}}</p>
+            <div class="d-flex align-items-center gap-2 ms-auto">
+              @if (getStatusCompleted().length > 0) {
+                <a class="btn-link small text-nowrap" (click)="dismissCompleted()" [routerLink]="[]">
+                  <span class="me-1" i18n="This button dismisses all status messages about processed documents in the tray (failed and successful)">Dismiss completed</span>
+                  <i-bs name="check2-all"></i-bs>
+                </a>
+              }
+              <button type="button" class="btn btn-sm btn-link p-0 text-muted" (click)="toggleCollapsed()"
+                [attr.aria-expanded]="!collapsed()" aria-label="Toggle document processing status" i18n-aria-label>
+                <i-bs [name]="collapsed() ? 'chevron-up' : 'chevron-down'"></i-bs>
+              </button>
+            </div>
+          </div>
+          @if (!collapsed()) {
+            @for (status of getStatus(); track status) {
+              <ng-container [ngTemplateOutlet]="consumerAlert" [ngTemplateOutletContext]="{ $implicit: status }"></ng-container>
+            }
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+}
+
+<ng-template #consumerAlert let-status>
+  <ngb-alert type="secondary" class="mt-2 mb-0" [dismissible]="isFinished(status)" (closed)="dismiss(status)">
+    <h6 class="alert-heading">{{status.filename}}</h6>
+    @if (!isFinished(status) || (isFinished(status) && !status.documentId)) {
+      <p class="mb-0 pb-1">{{status.message}}</p>
+    }
+    <ngb-progressbar [value]="status.getProgress()" [max]="1" [type]="getStatusColor(status)"></ngb-progressbar>
+    <div *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+      @if (isFinished(status)) {
+        <div>
+          @if (status.documentId) {
+            <a class="btn btn-sm btn-outline-primary btn-open" [routerLink]="['/documents', status.documentId]" (click)="dismiss(status)">
+              <small i18n>Open document</small>
+              <i-bs name="arrow-right-short"></i-bs>
+            </a>
+          }
+        </div>
+      }
+    </div>
+  </ngb-alert>
+</ng-template>

src-ui/src/app/components/common/upload-status-tray/upload-status-tray.component.scss

@@ -0,0 +1,36 @@
+:host ::ng-deep i-bs svg {
+  margin-top: -3px;
+}
+
+.alert-heading {
+  font-size: 80%;
+  font-weight: bold;
+}
+
+.btn-open {
+  line-height: 1;
+
+  i-bs {
+    margin-top: -1px;
+  }
+}
+
+.consumer-status-card {
+  background-color: rgba(var(--bs-body-bg-rgb), .95) !important;
+}
+
+.consumer-status-list {
+  max-height: 60vh;
+  z-index: 1030;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: auto;
+  mix-blend-mode: soft-light;
+  pointer-events: none;
+}

src-ui/src/app/components/common/upload-status-tray/upload-status-tray.component.spec.ts

@@ -0,0 +1,206 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { routes } from 'src/app/app-routing.module'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
+import {
+  FileStatus,
+  FileStatusPhase,
+  WebsocketStatusService,
+} from 'src/app/services/websocket-status.service'
+import { UploadStatusTrayComponent } from './upload-status-tray.component'
+
+const FAILED_STATUSES = [new FileStatus()]
+const WORKING_STATUSES = [new FileStatus(), new FileStatus()]
+const STARTED_STATUSES = [new FileStatus(), new FileStatus(), new FileStatus()]
+const SUCCESS_STATUSES = [
+  new FileStatus(),
+  new FileStatus(),
+  new FileStatus(),
+  new FileStatus(),
+]
+const DEFAULT_STATUSES = [
+  new FileStatus(),
+  new FileStatus(),
+  new FileStatus(),
+  new FileStatus(),
+  new FileStatus(),
+  new FileStatus(),
+]
+
+describe('UploadStatusTrayComponent', () => {
+  let component: UploadStatusTrayComponent
+  let fixture: ComponentFixture<UploadStatusTrayComponent>
+  let websocketStatusService: WebsocketStatusService
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule.withRoutes(routes),
+        NgxBootstrapIconsModule.pick(allIcons),
+        UploadStatusTrayComponent,
+      ],
+      providers: [
+        PermissionsGuard,
+        {
+          provide: PermissionsService,
+          useValue: {
+            currentUserCan: () => true,
+          },
+        },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    websocketStatusService = TestBed.inject(WebsocketStatusService)
+    fixture = TestBed.createComponent(UploadStatusTrayComponent)
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should not render without statuses', () => {
+    expect(
+      fixture.nativeElement.querySelector('.consumer-status-card')
+    ).toBeNull()
+  })
+
+  it('should render statuses and support collapsing', () => {
+    const status = new FileStatus()
+    status.filename = 'invoice.pdf'
+    status.phase = FileStatusPhase.WORKING
+    jest
+      .spyOn(websocketStatusService, 'getConsumerStatus')
+      .mockReturnValue([status])
+    // a mocked return value doesn't mark the zoneless view dirty, so re-create it
+    fixture = TestBed.createComponent(UploadStatusTrayComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+    const el: HTMLElement = fixture.nativeElement
+    expect(el.querySelector('.consumer-status-card')).not.toBeNull()
+    expect(el.textContent).toContain('invoice.pdf')
+
+    component.toggleCollapsed()
+    fixture.detectChanges()
+    expect(el.querySelector('.consumer-status-card')).not.toBeNull()
+    expect(el.textContent).not.toContain('invoice.pdf')
+
+    component.toggleCollapsed()
+    fixture.detectChanges()
+    expect(el.textContent).toContain('invoice.pdf')
+  })
+
+  it('should expand again once all statuses are dismissed', () => {
+    const status = websocketStatusService.newFileUpload('invoice.pdf')
+    fixture.detectChanges()
+    component.toggleCollapsed()
+    expect(component.collapsed()).toBe(true)
+    websocketStatusService.dismiss(status)
+    fixture.detectChanges()
+    expect(component.collapsed()).toBe(false)
+  })
+
+  it('should expand on request', () => {
+    component.toggleCollapsed()
+    expect(component.collapsed()).toBe(true)
+    component.expand()
+    expect(component.collapsed()).toBe(false)
+  })
+
+  it('should expand when new uploads start', () => {
+    const uploadDocumentsService = TestBed.inject(UploadDocumentsService)
+    jest
+      .spyOn(uploadDocumentsService, 'uploadFile')
+      .mockImplementation(() => {})
+    websocketStatusService.newFileUpload('invoice.pdf')
+    fixture.detectChanges()
+    component.toggleCollapsed()
+    expect(component.collapsed()).toBe(true)
+    uploadDocumentsService.uploadFiles([new File(['one'], 'one.pdf')])
+    expect(component.collapsed()).toBe(false)
+  })
+
+  it('should generate stats summary', () => {
+    mockConsumerStatuses(websocketStatusService)
+    expect(component.getStatusSummary()).toEqual(
+      'Processing: 6, Failed: 1, Added: 4'
+    )
+  })
+
+  it('should report an upload progress summary', () => {
+    mockConsumerStatuses(websocketStatusService)
+    expect(component.getTotalUploadProgress()).toEqual(0.75)
+  })
+
+  it('should change color by status phase', () => {
+    const processingStatus = new FileStatus()
+    processingStatus.phase = FileStatusPhase.WORKING
+    expect(component.getStatusColor(processingStatus)).toEqual('primary')
+    processingStatus.phase = FileStatusPhase.UPLOADING
+    expect(component.getStatusColor(processingStatus)).toEqual('primary')
+    const failedStatus = new FileStatus()
+    failedStatus.phase = FileStatusPhase.FAILED
+    expect(component.getStatusColor(failedStatus)).toEqual('danger')
+    const successStatus = new FileStatus()
+    successStatus.phase = FileStatusPhase.SUCCESS
+    expect(component.getStatusColor(successStatus)).toEqual('success')
+  })
+
+  it('should allow dismissing an alert', () => {
+    const dismissSpy = jest.spyOn(websocketStatusService, 'dismiss')
+    component.dismiss(new FileStatus())
+    expect(dismissSpy).toHaveBeenCalled()
+  })
+
+  it('should allow dismissing completed alerts', () => {
+    jest.useFakeTimers()
+    mockConsumerStatuses(websocketStatusService)
+    fixture.detectChanges()
+    jest
+      .spyOn(component, 'getStatusCompleted')
+      .mockImplementation(() => SUCCESS_STATUSES)
+    const dismissSpy = jest.spyOn(websocketStatusService, 'dismiss')
+    component.dismissCompleted()
+    jest.advanceTimersByTime(1000)
+    fixture.detectChanges()
+    expect(dismissSpy).toHaveBeenCalledTimes(4)
+    jest.useRealTimers()
+  })
+})
+
+function mockConsumerStatuses(consumerStatusService) {
+  const partialUpload1 = new FileStatus()
+  partialUpload1.currentPhaseProgress = 50
+  partialUpload1.currentPhaseMaxProgress = 50
+  const partialUpload2 = new FileStatus()
+  partialUpload2.currentPhaseProgress = 25
+  partialUpload2.currentPhaseMaxProgress = 50
+  jest
+    .spyOn(consumerStatusService, 'getConsumerStatus')
+    .mockImplementation((phase) => {
+      switch (phase) {
+        case FileStatusPhase.FAILED:
+          return FAILED_STATUSES
+        case FileStatusPhase.WORKING:
+          return WORKING_STATUSES
+        case FileStatusPhase.STARTED:
+          return STARTED_STATUSES
+        case FileStatusPhase.SUCCESS:
+          return SUCCESS_STATUSES
+        case FileStatusPhase.UPLOADING:
+          return [partialUpload1, partialUpload2]
+        default:
+          return DEFAULT_STATUSES
+      }
+    })
+  jest
+    .spyOn(consumerStatusService, 'getConsumerStatusNotCompleted')
+    .mockImplementation(() => {
+      return DEFAULT_STATUSES
+    })
+}

src-ui/src/app/components/common/upload-status-tray/upload-status-tray.component.ts

@@ -0,0 +1,165 @@
+import { NgClass, NgTemplateOutlet } from '@angular/common'
+import { Component, effect, inject, signal } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { RouterModule } from '@angular/router'
+import {
+  NgbAlertModule,
+  NgbProgressbarModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import {
+  PermissionAction,
+  PermissionsService,
+  PermissionType,
+} from 'src/app/services/permissions.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
+import {
+  FileStatus,
+  FileStatusPhase,
+  WebsocketStatusService,
+} from 'src/app/services/websocket-status.service'
+
+/** Floating list of document consumption statuses, shown on every page */
+@Component({
+  selector: 'pngx-upload-status-tray',
+  templateUrl: './upload-status-tray.component.html',
+  styleUrls: ['./upload-status-tray.component.scss'],
+  imports: [
+    IfPermissionsDirective,
+    NgClass,
+    NgTemplateOutlet,
+    RouterModule,
+    NgbAlertModule,
+    NgbProgressbarModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class UploadStatusTrayComponent extends ComponentWithPermissions {
+  private websocketStatusService = inject(WebsocketStatusService)
+  private settingsService = inject(SettingsService)
+  private permissionsService = inject(PermissionsService)
+  private uploadDocumentsService = inject(UploadDocumentsService)
+
+  readonly collapsed = signal(false)
+
+  constructor() {
+    super()
+    // start expanded again for the next uploads once everything is dismissed
+    effect(() => {
+      if (this.getStatus().length === 0) this.collapsed.set(false)
+    })
+    this.uploadDocumentsService
+      .onUploadsStarted()
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.expand())
+  }
+
+  get canAddDocuments(): boolean {
+    return this.permissionsService.currentUserCan(
+      PermissionAction.Add,
+      PermissionType.Document
+    )
+  }
+
+  getStatus() {
+    return this.websocketStatusService.getConsumerStatus()
+  }
+
+  getStatusSummary() {
+    let strings = []
+    let countUploadingAndProcessing =
+      this.websocketStatusService.getConsumerStatusNotCompleted().length
+    let countFailed = this.getStatusFailed().length
+    let countSuccess = this.getStatusSuccess().length
+    if (countUploadingAndProcessing > 0) {
+      strings.push($localize`Processing: ${countUploadingAndProcessing}`)
+    }
+    if (countFailed > 0) {
+      strings.push($localize`Failed: ${countFailed}`)
+    }
+    if (countSuccess > 0) {
+      strings.push($localize`Added: ${countSuccess}`)
+    }
+    return strings.join(
+      $localize`:this string is used to separate processing, failed and added on the file upload widget:, `
+    )
+  }
+
+  getStatusUploading() {
+    return this.websocketStatusService.getConsumerStatus(
+      FileStatusPhase.UPLOADING
+    )
+  }
+
+  getStatusFailed() {
+    return this.websocketStatusService.getConsumerStatus(FileStatusPhase.FAILED)
+  }
+
+  getStatusSuccess() {
+    return this.websocketStatusService.getConsumerStatus(
+      FileStatusPhase.SUCCESS
+    )
+  }
+
+  getStatusCompleted() {
+    return this.websocketStatusService.getConsumerStatusCompleted()
+  }
+
+  getTotalUploadProgress() {
+    let current = 0
+    let max = 0
+
+    this.getStatusUploading().forEach((status) => {
+      current += status.currentPhaseProgress
+      max += status.currentPhaseMaxProgress
+    })
+
+    return current / Math.max(max, 1)
+  }
+
+  isFinished(status: FileStatus) {
+    return (
+      status.phase == FileStatusPhase.FAILED ||
+      status.phase == FileStatusPhase.SUCCESS
+    )
+  }
+
+  getStatusColor(status: FileStatus) {
+    switch (status.phase) {
+      case FileStatusPhase.UPLOADING:
+      case FileStatusPhase.STARTED:
+      case FileStatusPhase.WORKING:
+        return 'primary'
+      case FileStatusPhase.FAILED:
+        return 'danger'
+      case FileStatusPhase.SUCCESS:
+        return 'success'
+    }
+  }
+
+  toggleCollapsed() {
+    this.collapsed.update((collapsed) => !collapsed)
+  }
+
+  expand() {
+    this.collapsed.set(false)
+  }
+
+  dismiss(status: FileStatus) {
+    this.websocketStatusService.dismiss(status)
+  }
+
+  dismissCompleted() {
+    this.getStatusCompleted().forEach((status) =>
+      this.websocketStatusService.dismiss(status)
+    )
+  }
+
+  get slimSidebarEnabled(): boolean {
+    return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
+  }
+}

src-ui/src/app/components/dashboard/dashboard.component.spec.ts

@@ -173,7 +173,7 @@ describe('DashboardComponent', () => {
 
   it('should update saved view sorting on drag + drop, show info', () => {
     const settingsSpy = jest.spyOn(settingsService, 'updateDashboardViewsSort')
-    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSpy = jest.spyOn(toastService, 'showSuccess')
     jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
     component.onDrop({ previousIndex: 0, currentIndex: 1 } as CdkDragDrop<
       SavedView[]

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

@@ -87,7 +87,7 @@ export class DashboardComponent extends ComponentWithPermissions {
       .updateDashboardViewsSort(this.dashboardViews())
       .subscribe({
         next: () => {
-          this.toastService.showInfo($localize`Dashboard updated`)
+          this.toastService.showSuccess($localize`Dashboard updated`)
         },
         error: (e) => {
           this.toastService.showError($localize`Error updating dashboard`, e)

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -25,6 +25,8 @@
             @if (displayFields().includes(field)) {
               <th
                 scope="col"
+                class="text-truncate"
+                [title]="getColumnTitle(field)"
                 [ngClass]="{
                   'd-none d-md-table-cell': i > 1,
                   'w-25': field === DisplayField.CREATED || field === DisplayField.ADDED

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -8,59 +8,5 @@
       </button>
       <input type="file" class="visually-hidden" (change)="onFileSelected($event)" multiple #fileUpload>
     </form>
-    @if (getStatus().length > 0) {
-    <div class="fixed-bottom p-2 p-md-4 d-flex justify-content-end pe-none consumer-status-list" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'offset-sidebar-expanded'">
-      <div class="col col-lg-4 col-xl-3 ps-0 pe-0 ps-lg-3 pe-lg-0 pe-auto overflow-y-scroll">
-        <div class="card shadow-sm consumer-status-card">
-          <div class="card-body">
-            <div class="row">
-              <div class="col d-flex justify-content-between align-items-center">
-                @if (getStatus().length > 0) {
-                  <p class="m-0 small text-muted">{{getStatusSummary()}}</p>
-                }
-                @if (getStatusCompleted().length > 0) {
-                  <a class="btn-link" (click)="dismissCompleted()" [routerLink]="[]" >
-                    <span class="me-1" i18n="This button dismisses all status messages about processed documents on the dashboard (failed and successful)">Dismiss completed</span>
-                    <i-bs name="check2-all"></i-bs>
-                  </a>
-                }
-              </div>
-            </div>
-            <div class="row">
-              <div class="col">
-                @for (status of getStatus(); track status) {
-                  <div>
-                    <ng-container [ngTemplateOutlet]="consumerAlert" [ngTemplateOutletContext]="{ $implicit: status }"></ng-container>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  }
   </div>
 </pngx-widget-frame>
-
-<ng-template #consumerAlert let-status>
-  <ngb-alert type="secondary" class="mt-2 mb-0" [dismissible]="isFinished(status)" (closed)="dismiss(status)">
-    <h6 class="alert-heading">{{status.filename}}</h6>
-    @if (!isFinished(status) || (isFinished(status) && !status.documentId)) {
-      <p class="mb-0 pb-1">{{status.message}}</p>
-    }
-    <ngb-progressbar [value]="status.getProgress()" [max]="1" [type]="getStatusColor(status)"></ngb-progressbar>
-    <div *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-      @if (isFinished(status)) {
-        <div>
-          @if (status.documentId) {
-            <a class="btn btn-sm btn-outline-primary btn-open" [routerLink]="['/documents', status.documentId]" (click)="dismiss(status)">
-              <small i18n>Open document</small>
-              <i-bs name="arrow-right-short"></i-bs>
-            </a>
-          }
-        </div>
-      }
-    </div>
-  </ngb-alert>
-</ng-template>

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss

@@ -20,48 +20,6 @@
   font-size: 0.75rem;
 }
 
-.alert-heading {
-  font-size: 80%;
-  font-weight: bold;
-}
-
-.alerts-hidden {
-  .btn {
-    line-height: 1;
-  }
-}
-
-.btn-open {
-  line-height: 1;
-
-  i-bs {
-    margin-top: -1px;
-  }
-}
-
-.progress {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: auto;
-  mix-blend-mode: soft-light;
-  pointer-events: none;
-}
-
 ::ng-deep .ngx-file-drop__drop-zone--over {
   background-color: var(--pngx-primary-faded) !important;
 }
-
-.consumer-status-card {
-  background-color: rgba(var(--bs-body-bg-rgb), .95) !important;
-}
-
-.consumer-status-list {
-  max-height: calc(100vh - 312px); // e.g. below the upload button, mobile
-
-  @media screen and (min-width: 768px) {
-    max-height: calc(100vh - 208px); // e.g. below the upload button
-  }
-}

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts

@@ -9,35 +9,11 @@ import { routes } from 'src/app/app-routing.module'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
-import {
-  FileStatus,
-  FileStatusPhase,
-  WebsocketStatusService,
-} from 'src/app/services/websocket-status.service'
 import { UploadFileWidgetComponent } from './upload-file-widget.component'
 
-const FAILED_STATUSES = [new FileStatus()]
-const WORKING_STATUSES = [new FileStatus(), new FileStatus()]
-const STARTED_STATUSES = [new FileStatus(), new FileStatus(), new FileStatus()]
-const SUCCESS_STATUSES = [
-  new FileStatus(),
-  new FileStatus(),
-  new FileStatus(),
-  new FileStatus(),
-]
-const DEFAULT_STATUSES = [
-  new FileStatus(),
-  new FileStatus(),
-  new FileStatus(),
-  new FileStatus(),
-  new FileStatus(),
-  new FileStatus(),
-]
-
 describe('UploadFileWidgetComponent', () => {
   let component: UploadFileWidgetComponent
   let fixture: ComponentFixture<UploadFileWidgetComponent>
-  let websocketStatusService: WebsocketStatusService
   let uploadDocumentsService: UploadDocumentsService
 
   beforeEach(async () => {
@@ -61,7 +37,6 @@ describe('UploadFileWidgetComponent', () => {
       ],
     }).compileComponents()
 
-    websocketStatusService = TestBed.inject(WebsocketStatusService)
     uploadDocumentsService = TestBed.inject(UploadDocumentsService)
     fixture = TestBed.createComponent(UploadFileWidgetComponent)
     component = fixture.componentInstance
@@ -85,93 +60,10 @@ describe('UploadFileWidgetComponent', () => {
       'file.pdf'
     )
     const fileInput = fixture.debugElement.query(By.css('input'))
-    jest.spyOn(fileInput.nativeElement, 'files', 'get').mockReturnValue({
-      item: () => file,
-      length: 1,
-      [Symbol.iterator]: () => ({
-        next: () => ({ done: false, value: file }),
-      }),
-    } as any)
-    fileInput.nativeElement.dispatchEvent(new Event('change'))
-    expect(uploadSpy).toHaveBeenCalled()
-  })
-
-  it('should generate stats summary', () => {
-    mockConsumerStatuses(websocketStatusService)
-    expect(component.getStatusSummary()).toEqual(
-      'Processing: 6, Failed: 1, Added: 4'
-    )
-  })
-
-  it('should report an upload progress summary', () => {
-    mockConsumerStatuses(websocketStatusService)
-    expect(component.getTotalUploadProgress()).toEqual(0.75)
-  })
-
-  it('should change color by status phase', () => {
-    const processingStatus = new FileStatus()
-    processingStatus.phase = FileStatusPhase.WORKING
-    expect(component.getStatusColor(processingStatus)).toEqual('primary')
-    processingStatus.phase = FileStatusPhase.UPLOADING
-    expect(component.getStatusColor(processingStatus)).toEqual('primary')
-    const failedStatus = new FileStatus()
-    failedStatus.phase = FileStatusPhase.FAILED
-    expect(component.getStatusColor(failedStatus)).toEqual('danger')
-    const successStatus = new FileStatus()
-    successStatus.phase = FileStatusPhase.SUCCESS
-    expect(component.getStatusColor(successStatus)).toEqual('success')
-  })
-
-  it('should allow dismissing an alert', () => {
-    const dismissSpy = jest.spyOn(websocketStatusService, 'dismiss')
-    component.dismiss(new FileStatus())
-    expect(dismissSpy).toHaveBeenCalled()
-  })
-
-  it('should allow dismissing completed alerts', () => {
-    jest.useFakeTimers()
-    mockConsumerStatuses(websocketStatusService)
-    fixture.detectChanges()
     jest
-      .spyOn(component, 'getStatusCompleted')
-      .mockImplementation(() => SUCCESS_STATUSES)
-    const dismissSpy = jest.spyOn(websocketStatusService, 'dismiss')
-    component.dismissCompleted()
-    jest.advanceTimersByTime(1000)
-    fixture.detectChanges()
-    expect(dismissSpy).toHaveBeenCalledTimes(4)
-    jest.useRealTimers()
+      .spyOn(fileInput.nativeElement, 'files', 'get')
+      .mockReturnValue([file] as any)
+    fileInput.nativeElement.dispatchEvent(new Event('change'))
+    expect(uploadSpy).toHaveBeenCalledWith(file)
   })
 })
-
-function mockConsumerStatuses(consumerStatusService) {
-  const partialUpload1 = new FileStatus()
-  partialUpload1.currentPhaseProgress = 50
-  partialUpload1.currentPhaseMaxProgress = 50
-  const partialUpload2 = new FileStatus()
-  partialUpload2.currentPhaseProgress = 25
-  partialUpload2.currentPhaseMaxProgress = 50
-  jest
-    .spyOn(consumerStatusService, 'getConsumerStatus')
-    .mockImplementation((phase) => {
-      switch (phase) {
-        case FileStatusPhase.FAILED:
-          return FAILED_STATUSES
-        case FileStatusPhase.WORKING:
-          return WORKING_STATUSES
-        case FileStatusPhase.STARTED:
-          return STARTED_STATUSES
-        case FileStatusPhase.SUCCESS:
-          return SUCCESS_STATUSES
-        case FileStatusPhase.UPLOADING:
-          return [partialUpload1, partialUpload2]
-        default:
-          return DEFAULT_STATUSES
-      }
-    })
-  jest
-    .spyOn(consumerStatusService, 'getConsumerStatusNotCompleted')
-    .mockImplementation(() => {
-      return DEFAULT_STATUSES
-    })
-}

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -1,23 +1,9 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common'
-import { Component, QueryList, ViewChildren, inject } from '@angular/core'
-import { RouterModule } from '@angular/router'
-import {
-  NgbAlert,
-  NgbAlertModule,
-  NgbProgressbarModule,
-} from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
-import { SettingsService } from 'src/app/services/settings.service'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
-import {
-  FileStatus,
-  FileStatusPhase,
-  WebsocketStatusService,
-} from 'src/app/services/websocket-status.service'
 import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 
 @Component({
@@ -27,117 +13,16 @@ import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
   imports: [
     WidgetFrameComponent,
     IfPermissionsDirective,
-    NgClass,
-    NgTemplateOutlet,
-    RouterModule,
-    NgbAlertModule,
-    NgbProgressbarModule,
     NgxBootstrapIconsModule,
     TourNgBootstrap,
   ],
 })
 export class UploadFileWidgetComponent extends ComponentWithPermissions {
-  private websocketStatusService = inject(WebsocketStatusService)
   private uploadDocumentsService = inject(UploadDocumentsService)
-  settingsService = inject(SettingsService)
-
-  @ViewChildren(NgbAlert) alerts: QueryList<NgbAlert>
-
-  getStatus() {
-    return this.websocketStatusService.getConsumerStatus()
-  }
-
-  getStatusSummary() {
-    let strings = []
-    let countUploadingAndProcessing =
-      this.websocketStatusService.getConsumerStatusNotCompleted().length
-    let countFailed = this.getStatusFailed().length
-    let countSuccess = this.getStatusSuccess().length
-    if (countUploadingAndProcessing > 0) {
-      strings.push($localize`Processing: ${countUploadingAndProcessing}`)
-    }
-    if (countFailed > 0) {
-      strings.push($localize`Failed: ${countFailed}`)
-    }
-    if (countSuccess > 0) {
-      strings.push($localize`Added: ${countSuccess}`)
-    }
-    return strings.join(
-      $localize`:this string is used to separate processing, failed and added on the file upload widget:, `
-    )
-  }
-
-  getStatusUploading() {
-    return this.websocketStatusService.getConsumerStatus(
-      FileStatusPhase.UPLOADING
-    )
-  }
-
-  getStatusFailed() {
-    return this.websocketStatusService.getConsumerStatus(FileStatusPhase.FAILED)
-  }
-
-  getStatusSuccess() {
-    return this.websocketStatusService.getConsumerStatus(
-      FileStatusPhase.SUCCESS
-    )
-  }
-
-  getStatusCompleted() {
-    return this.websocketStatusService.getConsumerStatusCompleted()
-  }
-
-  getTotalUploadProgress() {
-    let current = 0
-    let max = 0
-
-    this.getStatusUploading().forEach((status) => {
-      current += status.currentPhaseProgress
-      max += status.currentPhaseMaxProgress
-    })
-
-    return current / Math.max(max, 1)
-  }
-
-  isFinished(status: FileStatus) {
-    return (
-      status.phase == FileStatusPhase.FAILED ||
-      status.phase == FileStatusPhase.SUCCESS
-    )
-  }
-
-  getStatusColor(status: FileStatus) {
-    switch (status.phase) {
-      case FileStatusPhase.UPLOADING:
-      case FileStatusPhase.STARTED:
-      case FileStatusPhase.WORKING:
-        return 'primary'
-      case FileStatusPhase.FAILED:
-        return 'danger'
-      case FileStatusPhase.SUCCESS:
-        return 'success'
-    }
-  }
-
-  dismiss(status: FileStatus) {
-    this.websocketStatusService.dismiss(status)
-  }
-
-  dismissCompleted() {
-    this.getStatusCompleted().forEach((status) =>
-      this.websocketStatusService.dismiss(status)
-    )
-  }
 
   public onFileSelected(event: Event) {
-    const files = (event.target as HTMLInputElement).files
-    for (let i = 0; i < files?.length; i++) {
-      const file = files.item(i)
-      file && this.uploadDocumentsService.uploadFile(file)
-    }
-  }
-
-  get slimSidebarEnabled(): boolean {
-    return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
+    const input = event.target as HTMLInputElement
+    this.uploadDocumentsService.uploadFiles(Array.from(input.files ?? []))
+    input.value = ''
   }
 }

src-ui/src/app/components/document-detail/document-barcodes/document-barcodes.component.html

@@ -0,0 +1,46 @@
+<table class="table table-borderless align-baseline">
+  <thead>
+    <tr>
+      <th i18n>Page</th>
+      <th i18n>Type</th>
+      <th i18n>Content</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    @for (barcode of barcodes(); track $index) {
+      <tr>
+        <td>{{ barcode.page }}</td>
+        <td class="text-nowrap">{{ barcode.format }}</td>
+        <td class="text-break">
+          @if (isLink(barcode.value)) {
+            <a
+              [href]="barcode.value"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              >{{ barcode.value }}</a
+            >
+          } @else {
+            {{ barcode.value }}
+          }
+        </td>
+        <td class="text-end">
+          <button
+            type="button"
+            class="btn btn-sm btn-outline-primary"
+            (click)="copy($index)"
+            title="Copy content"
+            i18n-title
+          >
+            @if (copiedIndex() === $index) {
+              <i-bs name="clipboard-check"></i-bs>
+            } @else {
+              <i-bs name="clipboard"></i-bs>
+            }
+            <span class="visually-hidden" i18n>Copy content</span>
+          </button>
+        </td>
+      </tr>
+    }
+  </tbody>
+</table>

src-ui/src/app/components/document-detail/document-barcodes/document-barcodes.component.spec.ts

@@ -0,0 +1,73 @@
+import { Clipboard } from '@angular/cdk/clipboard'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { DocumentBarcodesComponent } from './document-barcodes.component'
+
+const barcodes = [
+  { page: 1, value: 'ASN00123', format: 'Code128' },
+  { page: 2, value: 'https://example.com/invoice/4711', format: 'QRCode' },
+  { page: 2, value: 'javascript:alert(1)', format: 'QRCode' },
+]
+
+describe('DocumentBarcodesComponent', () => {
+  let component: DocumentBarcodesComponent
+  let fixture: ComponentFixture<DocumentBarcodesComponent>
+  let clipboard: Clipboard
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        DocumentBarcodesComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DocumentBarcodesComponent)
+    component = fixture.componentInstance
+    clipboard = TestBed.inject(Clipboard)
+    fixture.componentRef.setInput('barcodes', barcodes)
+    fixture.detectChanges()
+  })
+
+  it('should display all barcodes', () => {
+    const rows = fixture.nativeElement.querySelectorAll('tbody tr')
+    expect(rows).toHaveLength(3)
+    expect(rows[0].textContent).toContain('ASN00123')
+    expect(rows[0].textContent).toContain('Code128')
+  })
+
+  it('should only link http(s) values', () => {
+    const links = fixture.nativeElement.querySelectorAll('tbody a')
+    expect(links).toHaveLength(1)
+    expect(links[0].getAttribute('href')).toEqual(
+      'https://example.com/invoice/4711'
+    )
+    expect(links[0].getAttribute('target')).toEqual('_blank')
+  })
+
+  it('should copy a value and show feedback', () => {
+    jest.useFakeTimers()
+    const copySpy = jest.spyOn(clipboard, 'copy').mockReturnValue(true)
+    const buttons = fixture.nativeElement.querySelectorAll('tbody button')
+    buttons[0].click()
+    fixture.detectChanges()
+    expect(copySpy).toHaveBeenCalledWith('ASN00123')
+    expect(component.copiedIndex()).toEqual(0)
+    expect(buttons[0].querySelector('i-bs').getAttribute('name')).toEqual(
+      'clipboard-check'
+    )
+    jest.advanceTimersByTime(3000)
+    fixture.detectChanges()
+    expect(component.copiedIndex()).toBeNull()
+    expect(buttons[0].querySelector('i-bs').getAttribute('name')).toEqual(
+      'clipboard'
+    )
+    jest.useRealTimers()
+  })
+
+  it('should not show feedback if copying failed', () => {
+    jest.spyOn(clipboard, 'copy').mockReturnValue(false)
+    component.copy(1)
+    expect(component.copiedIndex()).toBeNull()
+  })
+})

src-ui/src/app/components/document-detail/document-barcodes/document-barcodes.component.ts

@@ -0,0 +1,38 @@
+import { Clipboard } from '@angular/cdk/clipboard'
+import { Component, inject, input, OnDestroy, signal } from '@angular/core'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { DocumentBarcode } from 'src/app/data/document-barcode'
+
+@Component({
+  selector: 'pngx-document-barcodes',
+  templateUrl: './document-barcodes.component.html',
+  imports: [NgxBootstrapIconsModule],
+})
+export class DocumentBarcodesComponent implements OnDestroy {
+  private readonly clipboard = inject(Clipboard)
+
+  readonly barcodes = input<DocumentBarcode[]>([])
+
+  readonly copiedIndex = signal<number>(null)
+  private copyTimeout: ReturnType<typeof setTimeout>
+
+  public isLink(value: string): boolean {
+    try {
+      const url = new URL(value.trim())
+      return ['http:', 'https:'].includes(url.protocol) && !!url.host
+    } catch {
+      return false
+    }
+  }
+
+  public copy(index: number) {
+    if (!this.clipboard.copy(this.barcodes()[index].value)) return
+    this.copiedIndex.set(index)
+    clearTimeout(this.copyTimeout)
+    this.copyTimeout = setTimeout(() => this.copiedIndex.set(null), 3000)
+  }
+
+  ngOnDestroy(): void {
+    clearTimeout(this.copyTimeout)
+  }
+}

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -1,25 +1,4 @@
 <pngx-page-header [title]="title()" [id]="documentId()">
-  @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
-    @if (previewNumPages()) {
-      <div class="input-group input-group-sm ms-2 d-none d-md-flex">
-        <div class="input-group-text" i18n>Page</div>
-          <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages()" [ngModel]="previewCurrentPage()" (ngModelChange)="previewCurrentPage.set($event)" />
-        <div class="input-group-text" i18n>of {{previewNumPages()}}</div>
-      </div>
-    }
-    <div class="input-group input-group-sm me-md-5 d-none d-md-flex">
-      <button class="btn btn-outline-secondary" (click)="decreaseZoom()" i18n>-</button>
-      <select class="form-select" (change)="setZoom($event.target.value)" [ngModel]="currentZoom">
-        @for (setting of zoomSettings; track setting) {
-          <option [value]="setting">
-            {{ getZoomSettingTitle(setting) }}
-          </option>
-        }
-      </select>
-      <button class="btn btn-outline-secondary" (click)="increaseZoom()" i18n>+</button>
-    </div>
-  }
-
   <button type="button" class="btn btn-sm btn-outline-danger me-md-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" aria-label="Delete" i18n-aria-label>
     <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
   </button>
@@ -34,7 +13,7 @@
     (versionsUpdated)="onVersionsUpdated($event)"
   />
 
-  <div class="btn-group">
+  <div class="btn-group ms-4">
     <button (click)="download()" class="btn btn-sm btn-outline-primary" [disabled]="downloading()" aria-label="Download" i18n-aria-label>
       @if (downloading()) {
         <div class="spinner-border spinner-border-sm" role="status"></div>
@@ -85,7 +64,7 @@
       <button
         ngbDropdownItem
         (click)="runZoneOcr()"
-        [disabled]="!userCanEdit || !document?.document_type"
+        [disabled]="!userCanEdit || !document()?.document_type"
         *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }"
       >
         <i-bs width="1em" height="1em" name="file-earmark-ruled" class="me-1"></i-bs><span i18n>Run Zone OCR</span>
@@ -111,7 +90,7 @@
     <button class="btn btn-sm btn-outline-primary" id="sendDropdown" ngbDropdownToggle aria-label="Send" i18n-aria-label>
       <i-bs name="send"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container></div>
     </button>
-    <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
+    <div ngbDropdownMenu aria-labelledby="sendDropdown" class="shadow">
       <button ngbDropdownItem (click)="openShareLinks()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }">
         <i-bs name="link" class="me-1"></i-bs><span i18n>Share Links</span>
       </button>
@@ -130,8 +109,8 @@
 
     <form [formGroup]='documentForm' (ngSubmit)="save()">
 
-      <div class="btn-toolbar justify-content-end mb-1 pb-3 gap-2 row-gap-2 border-bottom">
-        <div class="btn-group me-auto">
+      <div class="btn-toolbar mb-1 pb-3 gap-2 row-gap-2 border-bottom">
+        <div class="btn-group">
           <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Close" (click)="close()">
             <i-bs width="1.2em" height="1.2em" name="x"></i-bs>
           </button>
@@ -144,37 +123,30 @@
         </div>
 
         <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
-          <div class="d-flex gap-2">
-            <div class="btn-group">
-              <pngx-suggestions-dropdown *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }"
-                [disabled]="!userCanEdit || suggestionsLoading()"
-                [loading]="suggestionsLoading()"
-                [suggestions]="suggestions()"
-                [aiEnabled]="aiEnabled"
-                [appliedTags]="documentForm.value.tags"
-                [appliedCorrespondent]="documentForm.value.correspondent"
-                [appliedDocumentType]="documentForm.value.document_type"
-                [appliedStoragePath]="documentForm.value.storage_path"
-                (getSuggestions)="getSuggestions()"
-                (addTag)="createTag($event)"
-                (addDocumentType)="createDocumentType($event)"
-                (addCorrespondent)="createCorrespondent($event)">
-              </pngx-suggestions-dropdown>
-            </div>
-
-            <div class="btn-group">
-              <pngx-custom-fields-dropdown
-                *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }"
-                [documentId]="documentId()"
-                [disabled]="!userCanEdit"
-                [existingFields]="document()?.custom_fields"
-                (created)="refreshCustomFields()"
-                (added)="addField($event)">
-              </pngx-custom-fields-dropdown>
-            </div>
+          <div class="btn-group ms-3">
+            <pngx-suggestions-dropdown *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }"
+              [disabled]="!userCanEdit || suggestionsLoading()"
+              [loading]="suggestionsLoading()"
+              [suggestions]="suggestions()"
+              [aiEnabled]="aiEnabled"
+              [source]="suggestionSource"
+              [defaultSource]="defaultSuggestionSource"
+              [fetchedSources]="fetchedSuggestionSources()"
+              [appliedTags]="documentForm.value.tags"
+              [appliedCorrespondent]="documentForm.value.correspondent"
+              [appliedDocumentType]="documentForm.value.document_type"
+              [appliedStoragePath]="documentForm.value.storage_path"
+              [appliedTitle]="documentForm.value.title"
+              [appliedCreated]="documentForm.value.created"
+              (getSuggestions)="getSuggestions($event)"
+              (sourceChange)="suggestionSourceOverride.set($event)"
+              (addTag)="createTag($event)"
+              (addDocumentType)="createDocumentType($event)"
+              (addCorrespondent)="createCorrespondent($event)">
+            </pngx-suggestions-dropdown>
           </div>
 
-          <div class="ps-3">
+          <div class="ms-auto">
             <ng-container *ngTemplateOutlet="saveButtons"></ng-container>
           </div>
         </ng-container>
@@ -301,8 +273,20 @@
               }
             </div>
 
-            <div class="d-flex justify-content-end border-top pt-3">
-              <ng-container *ngTemplateOutlet="saveButtons"></ng-container>
+            <div class="d-flex border-top pt-3">
+              <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
+                <pngx-custom-fields-dropdown
+                  *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }"
+                  [documentId]="documentId()"
+                  [disabled]="!userCanEdit"
+                  [existingFields]="document()?.custom_fields"
+                  (created)="refreshCustomFields()"
+                  (added)="addField($event)">
+                </pngx-custom-fields-dropdown>
+              </ng-container>
+              <div class="ms-auto">
+                <ng-container *ngTemplateOutlet="saveButtons"></ng-container>
+              </div>
             </div>
           </ng-template>
         </li>
@@ -339,9 +323,9 @@
                     <td i18n>Original filename</td>
                     <td>{{metadata()?.original_filename}}</td>
                   </tr>
-                  <tr>
+                  <tr class="align-middle">
                     <td i18n>Original SHA256 checksum</td>
-                    <td>{{metadata()?.original_checksum}}</td>
+                    <td><span class="badge bg-light font-monospace text-wrap text-break text-start">{{metadata()?.original_checksum}}</span></td>
                   </tr>
                   <tr>
                     <td i18n>Original file size</td>
@@ -352,9 +336,9 @@
                     <td>{{metadata()?.original_mime_type}}</td>
                   </tr>
                   @if (metadata()?.has_archive_version) {
-                    <tr>
+                    <tr class="align-middle">
                       <td i18n>Archive SHA256 checksum</td>
-                      <td>{{metadata()?.archive_checksum}}</td>
+                      <td><span class="badge bg-light font-monospace text-wrap text-break text-start">{{metadata()?.archive_checksum}}</span></td>
                     </tr>
                   }
                   @if (metadata()?.has_archive_version) {
@@ -367,6 +351,10 @@
               </table>
             }
 
+            @if (metadata()?.barcodes?.length > 0) {
+              <h6 i18n>Barcodes</h6>
+              <pngx-document-barcodes [barcodes]="metadata().barcodes"></pngx-document-barcodes>
+            }
             @if (metadata()?.original_metadata?.length > 0) {
               <pngx-metadata-collapse i18n-title title="Original document metadata" [metadata]="metadata()?.original_metadata"></pngx-metadata-collapse>
             }
@@ -415,7 +403,7 @@
             <a ngbNavLink i18n>Permissions</a>
             <ng-template ngbNavContent>
               <div class="mb-3">
-                <pngx-permissions-form [users]="users()" formControlName="permissions_form"></pngx-permissions-form>
+                <pngx-permissions-form title="" [users]="users()" formControlName="permissions_form"></pngx-permissions-form>
               </div>
             </ng-template>
           </li>
@@ -506,6 +494,29 @@
               (loadError)="onError($event)"
               (afterLoadComplete)="pdfPreviewLoaded($event)">
             </pngx-pdf-viewer>
+            <div class="position-absolute bottom-0 start-50 translate-middle-x z-1 mb-3 d-flex gap-2 p-1 bg-body border rounded shadow">
+              @if (previewNumPages()) {
+                <div class="input-group input-group-sm w-auto flex-nowrap">
+                  <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages()" [ngModelOptions]="{standalone: true}" [ngModel]="previewCurrentPage()" (ngModelChange)="previewCurrentPage.set($event)" aria-label="Page" i18n-aria-label />
+                  <div class="input-group-text" i18n>of {{previewNumPages()}}</div>
+                </div>
+              }
+              <div class="input-group input-group-sm w-auto flex-nowrap">
+                <button class="btn btn-outline-secondary" (click)="decreaseZoom()" aria-label="Zoom out" i18n-aria-label>
+                  <i-bs width="1em" height="1em" name="dash"></i-bs>
+                </button>
+                <select class="form-select" (change)="setZoom($event.target.value)" [ngModelOptions]="{standalone: true}" [ngModel]="currentZoom" aria-label="Zoom" i18n-aria-label>
+                  @for (setting of zoomSettings; track setting) {
+                    <option [value]="setting">
+                      {{ getZoomSettingTitle(setting) }}
+                    </option>
+                  }
+                </select>
+                <button class="btn btn-outline-secondary" (click)="increaseZoom()" aria-label="Zoom in" i18n-aria-label>
+                  <i-bs width="1em" height="1em" name="plus"></i-bs>
+                </button>
+              </div>
+            </div>
           </div>
         } @else {
           <object [data]="previewUrl() | safeUrl" class="preview-sticky" width="100%"></object>

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -28,8 +28,9 @@ import { Subject, of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import { Correspondent } from 'src/app/data/correspondent'
 import { CustomFieldDataType } from 'src/app/data/custom-field'
+import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
 import { DataType } from 'src/app/data/datatype'
-import { Document } from 'src/app/data/document'
+import { Document, DocumentVersionInfo } from 'src/app/data/document'
 import { DocumentType } from 'src/app/data/document-type'
 import {
   FILTER_CORRESPONDENT,
@@ -42,7 +43,7 @@ import {
 } from 'src/app/data/filter-rule-type'
 import { StoragePath } from 'src/app/data/storage-path'
 import { Tag } from 'src/app/data/tag'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { SETTINGS_KEYS, SuggestionSource } from 'src/app/data/ui-settings'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
@@ -59,6 +60,7 @@ import { TagService } from 'src/app/services/rest/tag.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { TrashService } from 'src/app/services/trash.service'
 import { WebsocketStatusService } from 'src/app/services/websocket-status.service'
 import { environment } from 'src/environments/environment'
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
@@ -100,13 +102,18 @@ const doc: Document = {
   custom_fields: [
     {
       field: 0,
-      document: 3,
-      created: new Date(),
       value: 'custom foo bar',
     },
-  ],
+  ] as CustomFieldInstance[],
 }
 
+// Newest first, as the API returns them: 12 is the latest, 3 is the root
+const docVersions: DocumentVersionInfo[] = [
+  { id: 12, is_root: false },
+  { id: 10, is_root: false },
+  { id: doc.id, is_root: true },
+]
+
 const customFields = [
   {
     id: 0,
@@ -131,6 +138,7 @@ describe('DocumentDetailComponent', () => {
   let openDocumentsService: OpenDocumentsService
   let modalService: NgbModal
   let toastService: ToastService
+  let trashService: TrashService
   let documentListViewService: DocumentListViewService
   let settingsService: SettingsService
   let customFieldsService: CustomFieldsService
@@ -279,6 +287,7 @@ describe('DocumentDetailComponent', () => {
     documentService = TestBed.inject(DocumentService)
     modalService = TestBed.inject(NgbModal)
     toastService = TestBed.inject(ToastService)
+    trashService = TestBed.inject(TrashService)
     documentListViewService = TestBed.inject(DocumentListViewService)
     settingsService = TestBed.inject(SettingsService)
     settingsService.currentUser.set({ id: 1 })
@@ -656,6 +665,45 @@ describe('DocumentDetailComponent', () => {
     )
   })
 
+  it.each([
+    ['tag', 'createTag', 'tags', 'suggested_tags'],
+    [
+      'document type',
+      'createDocumentType',
+      'document_type',
+      'suggested_document_types',
+    ],
+    [
+      'correspondent',
+      'createCorrespondent',
+      'correspondent',
+      'suggested_correspondents',
+    ],
+  ])(
+    'should create a %s after ML-only suggestions',
+    (_, method, field, suggestedField) => {
+      initNormally()
+      component.suggestions.set({ tags: [1] })
+      let openModal: NgbModalRef
+      modalService.activeInstances.subscribe((modal) => (openModal = modal[0]))
+      component[method]('New value')
+      openModal.componentInstance.succeeded.next({
+        id: 12,
+        name: 'New value',
+        is_inbox_tag: false,
+        color: '#ff0000',
+        text_color: '#000000',
+      })
+
+      if (field === 'tags') {
+        expect(component.tagsInput.value).toContain(12)
+      } else {
+        expect(component.documentForm.get(field).value).toBe(12)
+      }
+      expect(component.suggestions()[suggestedField]).toEqual([])
+    }
+  )
+
   it('should support creating storage path', () => {
     initNormally()
     let openModal: NgbModalRef
@@ -730,7 +778,7 @@ describe('DocumentDetailComponent', () => {
     component.title.set('Foo Bar')
     const closeSpy = jest.spyOn(component, 'close')
     const patchSpy = jest.spyOn(documentService, 'patch')
-    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSpy = jest.spyOn(toastService, 'showSuccess')
     patchSpy.mockImplementation((o) => of(doc))
     component.save(true)
     expect(patchSpy).toHaveBeenCalled()
@@ -745,7 +793,7 @@ describe('DocumentDetailComponent', () => {
     component.title.set('Foo Bar')
     const closeSpy = jest.spyOn(component, 'close')
     const patchSpy = jest.spyOn(documentService, 'patch')
-    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSpy = jest.spyOn(toastService, 'showSuccess')
     patchSpy.mockImplementation((o) => of(doc))
     component.save()
     expect(patchSpy).toHaveBeenCalled()
@@ -791,7 +839,7 @@ describe('DocumentDetailComponent', () => {
     component.title.set('Foo Bar')
     const closeSpy = jest.spyOn(component, 'close')
     const patchSpy = jest.spyOn(documentService, 'patch')
-    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSpy = jest.spyOn(toastService, 'showSuccess')
     patchSpy.mockImplementation(() =>
       throwError(() => new Error('failed to save'))
     )
@@ -912,12 +960,16 @@ describe('DocumentDetailComponent', () => {
     const modalSpy = jest.spyOn(modalService, 'open')
     const deleteSpy = jest.spyOn(documentService, 'delete')
     deleteSpy.mockReturnValue(of(true))
+    const notifySpy = jest
+      .spyOn(trashService, 'notifyMovedToTrash')
+      .mockImplementation(() => {})
     component.delete()
     expect(modalSpy).toHaveBeenCalled()
     const modalCloseSpy = jest.spyOn(openModal, 'close')
     openModal.componentInstance.confirmClicked.next()
     expect(deleteSpy).toHaveBeenCalled()
     expect(modalCloseSpy).toHaveBeenCalled()
+    expect(notifySpy).toHaveBeenCalledWith(expect.any(String), [doc.id])
   })
 
   it('should allow retry delete if error', () => {
@@ -1522,6 +1574,113 @@ describe('DocumentDetailComponent', () => {
     expect(component.suggestionsLoading()).toBeFalsy()
   })
 
+  it('should get and merge ML and AI suggestions when source is both', () => {
+    settingsService.set(
+      SETTINGS_KEYS.DOCUMENT_EDITING_SUGGESTION_SOURCE,
+      SuggestionSource.Both
+    )
+    const getSetting = settingsService.get.bind(settingsService)
+    jest
+      .spyOn(settingsService, 'get')
+      .mockImplementation((key) =>
+        key === SETTINGS_KEYS.AI_ENABLED ? true : getSetting(key)
+      )
+    const suggestionsSpy = jest
+      .spyOn(documentService, 'getSuggestions')
+      .mockReturnValue(of({ tags: [42], dates: ['2024-01-01'] }))
+    const aiSuggestionsSpy = jest
+      .spyOn(documentService, 'getAiSuggestions')
+      .mockReturnValue(
+        of({ title: 'AI title', tags: [42, 43], suggested_tags: ['New'] })
+      )
+    initNormally()
+    expect(suggestionsSpy).toHaveBeenCalled()
+    expect(aiSuggestionsSpy).toHaveBeenCalled()
+    expect(component.suggestions().title).toEqual('AI title')
+    expect(component.suggestions().tags).toEqual([42, 43])
+    expect(component.suggestions().suggested_tags).toEqual(['New'])
+    expect(component.suggestions().dates).toEqual(['2024-01-01'])
+  })
+
+  it('should only fetch sources not yet fetched for the document', () => {
+    settingsService.set(SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST, false)
+    settingsService.set(
+      SETTINGS_KEYS.DOCUMENT_EDITING_SUGGESTION_SOURCE,
+      SuggestionSource.ML
+    )
+    const getSetting = settingsService.get.bind(settingsService)
+    jest
+      .spyOn(settingsService, 'get')
+      .mockImplementation((key) =>
+        key === SETTINGS_KEYS.AI_ENABLED ? true : getSetting(key)
+      )
+    const suggestionsSpy = jest
+      .spyOn(documentService, 'getSuggestions')
+      .mockReturnValue(of({ tags: [42] }))
+    const aiSuggestionsSpy = jest
+      .spyOn(documentService, 'getAiSuggestions')
+      .mockReturnValue(of({ tags: [43] }))
+    initNormally()
+
+    component.getSuggestions()
+    expect(suggestionsSpy).toHaveBeenCalledTimes(1)
+    expect(aiSuggestionsSpy).not.toHaveBeenCalled()
+
+    component.getSuggestions(SuggestionSource.Both)
+    expect(suggestionsSpy).toHaveBeenCalledTimes(1)
+    expect(aiSuggestionsSpy).toHaveBeenCalledTimes(1)
+    expect(component.suggestions().tags).toEqual([42, 43])
+
+    component.getSuggestions(SuggestionSource.Both)
+    expect(suggestionsSpy).toHaveBeenCalledTimes(1)
+    expect(aiSuggestionsSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should use the per-document source override and reset it on document change', () => {
+    settingsService.set(SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST, false)
+    const getSetting = settingsService.get.bind(settingsService)
+    jest
+      .spyOn(settingsService, 'get')
+      .mockImplementation((key) =>
+        key === SETTINGS_KEYS.AI_ENABLED ? true : getSetting(key)
+      )
+    initNormally()
+    expect(component.suggestionSource).toEqual(SuggestionSource.AI)
+    component.suggestionSourceOverride.set(SuggestionSource.ML)
+    expect(component.suggestionSource).toEqual(SuggestionSource.ML)
+
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(of(Object.assign({}, doc)))
+    ;(component as any).loadDocument(doc.id, true)
+    expect(component.suggestionSourceOverride()).toBeNull()
+    expect(component.fetchedSuggestionSources()).toEqual([])
+  })
+
+  it('should keep suggestions from one source if the other fails', () => {
+    settingsService.set(
+      SETTINGS_KEYS.DOCUMENT_EDITING_SUGGESTION_SOURCE,
+      SuggestionSource.Both
+    )
+    const getSetting = settingsService.get.bind(settingsService)
+    jest
+      .spyOn(settingsService, 'get')
+      .mockImplementation((key) =>
+        key === SETTINGS_KEYS.AI_ENABLED ? true : getSetting(key)
+      )
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(documentService, 'getSuggestions')
+      .mockReturnValue(of({ tags: [42] }))
+    jest
+      .spyOn(documentService, 'getAiSuggestions')
+      .mockReturnValue(throwError(() => new Error('failed')))
+    initNormally()
+    expect(errorSpy).toHaveBeenCalled()
+    expect(component.suggestions().tags).toEqual([42])
+    expect(component.fetchedSuggestionSources()).toEqual([SuggestionSource.ML])
+  })
+
   it('should show error if needed for get suggestions', () => {
     const suggestionsSpy = jest.spyOn(documentService, 'getSuggestions')
     const errorSpy = jest.spyOn(toastService, 'showError')
@@ -2045,6 +2204,208 @@ describe('DocumentDetailComponent', () => {
     expect(saveSpy).toHaveBeenCalled()
   })
 
+  it('selectVersion should use the version content as the baseline and ignore stale responses', () => {
+    initNormally()
+    const version10Content = new Subject<Document>()
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(version10Content)
+      .mockReturnValueOnce(of({ content: 'version 12 content' } as Document))
+    const version10Metadata = new Subject<any>()
+    jest
+      .spyOn(documentService, 'getMetadata')
+      .mockReturnValueOnce(version10Metadata)
+      .mockReturnValueOnce(of({ lang: 'de' }))
+
+    component.selectVersion(10)
+    component.selectVersion(12)
+    version10Content.next({ content: 'version 10 content' } as Document)
+    version10Metadata.next({ lang: 'en' })
+
+    expect(component.documentForm.get('content').value).toEqual(
+      'version 12 content'
+    )
+    expect(component.store.value.content).toEqual('version 12 content')
+    expect(component.metadata().lang).toEqual('de')
+    expect(
+      httpTestingController.expectOne(component.previewUrl()).cancelled
+    ).toBeFalsy()
+    expect(
+      httpTestingController.match((req) => req.url.includes('version=10'))[0]
+        ?.cancelled
+    ).toBeTruthy()
+  })
+
+  it('should confirm before discarding unsaved content edits when switching versions', () => {
+    initNormally()
+    component.document().versions = docVersions
+    jest
+      .spyOn(documentService, 'get')
+      .mockImplementation((id, versionID) =>
+        of({ content: `version ${versionID} content` } as Document)
+      )
+    let openModal: NgbModalRef
+    modalService.activeInstances.subscribe((modals) => (openModal = modals[0]))
+    const modalSpy = jest.spyOn(modalService, 'open')
+
+    // shared fields carry over between versions, so no confirmation
+    component.documentForm.get('title').setValue('Edited title')
+    component.documentForm.get('title').markAsDirty()
+    component.documentForm.get('content').markAsDirty()
+    component.onVersionSelected(12)
+    expect(modalSpy).not.toHaveBeenCalled()
+    expect(component.selectedVersionId()).toEqual(12)
+
+    component.documentForm.get('content').setValue('edited content')
+    component.documentForm.get('content').markAsDirty()
+    component.onVersionSelected(12) // already selected, nothing to do
+    expect(modalSpy).not.toHaveBeenCalled()
+    component.onVersionSelected(10)
+    expect(modalSpy).toHaveBeenCalledWith(
+      ConfirmDialogComponent,
+      expect.anything()
+    )
+    openModal.componentInstance.cancel()
+    expect(component.selectedVersionId()).toEqual(12)
+    expect(component.documentForm.get('content').value).toEqual(
+      'edited content'
+    )
+
+    component.onVersionSelected(10)
+    openModal.componentInstance.confirmClicked.emit()
+    expect(component.selectedVersionId()).toEqual(10)
+    expect(component.documentForm.get('content').value).toEqual(
+      'version 10 content'
+    )
+    expect(component.documentForm.get('content').dirty).toBeFalsy()
+    expect(component.documentForm.get('title').value).toEqual('Edited title')
+  })
+
+  it('should save unsaved content edits to the current version before switching, and stay if that fails', () => {
+    initNormally()
+    component.document().versions = docVersions
+    component.selectedVersionId.set(12)
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValue(of({ content: 'version 10 content' } as Document))
+    const savedDoc = new Subject<Document>()
+    const patchSpy = jest
+      .spyOn(documentService, 'patch')
+      .mockReturnValueOnce(throwError(() => new Error('failed to save')))
+      .mockReturnValueOnce(savedDoc)
+    const modalSpy = jest.spyOn(modalService, 'open')
+    component.documentForm.get('content').setValue('edited content')
+    component.documentForm.get('content').markAsDirty()
+
+    component.onVersionSelected(10)
+    let modal: NgbModalRef = modalSpy.mock.results[0].value
+    const closeSpy = jest.spyOn(modal, 'close')
+    modal.componentInstance.alternativeClicked.emit()
+    expect(closeSpy).toHaveBeenCalled()
+    expect(component.selectedVersionId()).toEqual(12)
+    expect(component.documentForm.get('content').value).toEqual(
+      'edited content'
+    )
+
+    component.onVersionSelected(10)
+    modal = modalSpy.mock.results[1].value
+    modal.componentInstance.alternativeClicked.emit()
+    expect(patchSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({ content: 'edited content' }),
+      12
+    )
+    component.onVersionSelected(doc.id) // ignored while saving
+    expect(modalSpy).toHaveBeenCalledTimes(2)
+    savedDoc.next(doc)
+    expect(component.selectedVersionId()).toEqual(10)
+    expect(component.documentForm.get('content').value).toEqual(
+      'version 10 content'
+    )
+  })
+
+  it('should switch without confirmation when the selected version was deleted, even while saving', () => {
+    initNormally()
+    component.document().versions = docVersions
+    component.selectedVersionId.set(10)
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValue(of({ content: 'version 12 content' } as Document))
+    const modalSpy = jest.spyOn(modalService, 'open')
+    component.documentForm.get('content').setValue('edited content')
+    component.documentForm.get('content').markAsDirty()
+    component.networkActive.set(true)
+
+    // the version dropdown emits this after deleting the selected version
+    component.onVersionsUpdated(docVersions.filter((v) => v.id !== 10))
+    component.onVersionSelected(12)
+
+    expect(modalSpy).not.toHaveBeenCalled()
+    expect(component.selectedVersionId()).toEqual(12)
+    expect(component.documentForm.get('content').value).toEqual(
+      'version 12 content'
+    )
+  })
+
+  it('should restore the selected version and its unsaved content when returning to a document', () => {
+    initNormally()
+    const openDoc = component.document()
+    openDoc.versions = docVersions
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(openDoc)
+    jest
+      .spyOn(documentService, 'get')
+      .mockImplementation((id, versionID) =>
+        of(
+          (versionID
+            ? { content: `version ${versionID} content` }
+            : { ...doc, versions: docVersions }) as Document
+        )
+      )
+    component.selectVersion(10)
+    // an edit that happens to match the latest version's content
+    component.documentForm.get('content').setValue(doc.content)
+    openDoc.__changedFields = ['content']
+
+    component['loadDocument'](doc.id)
+
+    expect(component.selectedVersionId()).toEqual(10)
+    expect(component.documentForm.get('content').value).toEqual(doc.content)
+    expect(openDocumentsService.isDirty(openDoc)).toBeTruthy()
+    const patchSpy = jest
+      .spyOn(documentService, 'patch')
+      .mockReturnValue(of(doc))
+    component.save()
+    expect(patchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ content: doc.content }),
+      10
+    )
+  })
+
+  it('should fall back to the latest version when the remembered version no longer exists', () => {
+    initNormally()
+    const openDoc = component.document()
+    openDoc.versions = docVersions
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(openDoc)
+    jest.spyOn(documentService, 'get').mockImplementation((id, versionID) =>
+      of(
+        (versionID
+          ? { content: `version ${versionID} content` }
+          : {
+              ...doc,
+              content: 'version 12 content',
+              versions: docVersions.filter((v) => v.id !== 10),
+            }) as Document
+      )
+    )
+    component.selectVersion(10)
+
+    component['loadDocument'](doc.id)
+
+    expect(component.selectedVersionId()).toEqual(12)
+    expect(component.documentForm.get('content').value).toEqual(
+      'version 12 content'
+    )
+  })
+
   it('createDisabled should return true if the user does not have permission to add the specified data type', () => {
     currentUserCan = false
     expect(component.createDisabled(DataType.Correspondent)).toBeTruthy()

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -28,7 +28,7 @@ import {
 import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { DeviceDetectorService } from 'ngx-device-detector'
-import { BehaviorSubject, Observable, of, Subject, timer } from 'rxjs'
+import { BehaviorSubject, merge, Observable, of, Subject, timer } from 'rxjs'
 import {
   catchError,
   debounceTime,
@@ -48,7 +48,10 @@ import { DataType } from 'src/app/data/datatype'
 import { Document, DocumentVersionInfo } from 'src/app/data/document'
 import { DocumentMetadata } from 'src/app/data/document-metadata'
 import { DocumentNote } from 'src/app/data/document-note'
-import { DocumentSuggestions } from 'src/app/data/document-suggestions'
+import {
+  DocumentSuggestions,
+  mergeSuggestions,
+} from 'src/app/data/document-suggestions'
 import { DocumentType } from 'src/app/data/document-type'
 import { FilterRule } from 'src/app/data/filter-rule'
 import {
@@ -63,7 +66,7 @@ import {
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import { StoragePath } from 'src/app/data/storage-path'
 import { Tag } from 'src/app/data/tag'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { SETTINGS_KEYS, SuggestionSource } from 'src/app/data/ui-settings'
 import { User } from 'src/app/data/user'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
@@ -92,14 +95,15 @@ import { TagService } from 'src/app/services/rest/tag.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { TrashService } from 'src/app/services/trash.service'
 import { WebsocketStatusService } from 'src/app/services/websocket-status.service'
 import { getFilenameFromContentDisposition } from 'src/app/utils/http'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 import * as UTIF from 'utif'
 import { DocumentDetailFieldID } from '../admin/settings/settings.component'
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
-import { ReprocessConfirmDialogComponent } from '../common/confirm-dialog/reprocess-confirm-dialog/reprocess-confirm-dialog.component'
 import { PasswordRemovalConfirmDialogComponent } from '../common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component'
+import { ReprocessConfirmDialogComponent } from '../common/confirm-dialog/reprocess-confirm-dialog/reprocess-confirm-dialog.component'
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
 import { CorrespondentEditDialogComponent } from '../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -132,6 +136,7 @@ import { ShareLinksDialogComponent } from '../common/share-links-dialog/share-li
 import { SuggestionsDropdownComponent } from '../common/suggestions-dropdown/suggestions-dropdown.component'
 import { DocumentNotesComponent } from '../document-notes/document-notes.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { DocumentBarcodesComponent } from './document-barcodes/document-barcodes.component'
 import { DocumentHistoryComponent } from './document-history/document-history.component'
 import { DocumentVersionDropdownComponent } from './document-version-dropdown/document-version-dropdown.component'
 import { MetadataCollapseComponent } from './metadata-collapse/metadata-collapse.component'
@@ -174,6 +179,7 @@ interface IncomingDocumentUpdate {
     DateComponent,
     DocumentLinkComponent,
     MetadataCollapseComponent,
+    DocumentBarcodesComponent,
     PermissionsFormComponent,
     SelectComponent,
     TagsComponent,
@@ -216,6 +222,7 @@ export class DocumentDetailComponent
   private documentListViewService = inject(DocumentListViewService)
   private documentTitlePipe = inject(DocumentTitlePipe)
   private toastService = inject(ToastService)
+  private trashService = inject(TrashService)
   private settings = inject(SettingsService)
   private storagePathService = inject(StoragePathService)
   private permissionsService = inject(PermissionsService)
@@ -240,6 +247,10 @@ export class DocumentDetailComponent
   private readonly autoSuggestSetting = this.settings.getSignal<boolean>(
     SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST
   )
+  private readonly suggestionSourceSetting =
+    this.settings.getSignal<SuggestionSource>(
+      SETTINGS_KEYS.DOCUMENT_EDITING_SUGGESTION_SOURCE
+    )
   private readonly hiddenFieldsSetting = this.settings.getSignal<
     DocumentDetailFieldID[]
   >(SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS)
@@ -261,6 +272,9 @@ export class DocumentDetailComponent
   readonly metadata = signal<DocumentMetadata>(undefined)
   readonly suggestions = signal<DocumentSuggestions>(undefined)
   readonly suggestionsLoading = signal(false)
+  // per-document, resets on navigation
+  readonly suggestionSourceOverride = signal<SuggestionSource>(null)
+  readonly fetchedSuggestionSources = signal<SuggestionSource[]>([])
   readonly users = signal<User[]>(undefined)
 
   readonly title = signal<string>(undefined)
@@ -304,6 +318,7 @@ export class DocumentDetailComponent
   isDirty$: Observable<boolean>
   unsubscribeNotifier: Subject<any> = new Subject()
   docChangeNotifier: Subject<any> = new Subject()
+  versionChangeNotifier: Subject<void> = new Subject()
   private incomingUpdateModal: NgbModalRef
   private pendingIncomingUpdate: IncomingDocumentUpdate
   private lastLocalSaveModified: string | null = null
@@ -364,6 +379,15 @@ export class DocumentDetailComponent
     return this.autoSuggestSetting()
   }
 
+  get defaultSuggestionSource(): SuggestionSource {
+    return this.aiEnabled ? this.suggestionSourceSetting() : SuggestionSource.ML
+  }
+
+  get suggestionSource(): SuggestionSource {
+    if (!this.aiEnabled) return SuggestionSource.ML
+    return this.suggestionSourceOverride() ?? this.defaultSuggestionSource
+  }
+
   get archiveContentRenderType(): ContentRenderType {
     const hasArchiveVersion =
       this.metadata()?.has_archive_version ??
@@ -417,7 +441,8 @@ export class DocumentDetailComponent
       .pipe(
         first(),
         takeUntil(this.unsubscribeNotifier),
-        takeUntil(this.docChangeNotifier)
+        takeUntil(this.docChangeNotifier),
+        takeUntil(this.versionChangeNotifier)
       )
       .subscribe({
         next: (result) => {
@@ -533,7 +558,8 @@ export class DocumentDetailComponent
       .pipe(
         first(),
         takeUntil(this.unsubscribeNotifier),
-        takeUntil(this.docChangeNotifier)
+        takeUntil(this.docChangeNotifier),
+        takeUntil(this.versionChangeNotifier)
       )
       .subscribe({
         next: (res) => this.previewText.set(res.toString()),
@@ -587,6 +613,8 @@ export class DocumentDetailComponent
           }
           this.documentId.set(doc.id)
           this.suggestions.set(null)
+          this.suggestionSourceOverride.set(null)
+          this.fetchedSuggestionSources.set([])
           const openDocument = this.openDocumentService.getOpenDocument(
             this.documentId()
           )
@@ -595,6 +623,13 @@ export class DocumentDetailComponent
             openDocument.duplicate_documents = doc.duplicate_documents
             this.openDocumentService.save()
           }
+          // use server versions
+          if (openDocument) {
+            openDocument.versions = doc.versions
+            if (!openDocument.__changedFields?.includes('content')) {
+              openDocument.content = doc.content
+            }
+          }
           let useDoc = openDocument || doc
           if (openDocument && forceRemote) {
             Object.assign(openDocument, doc)
@@ -642,7 +677,14 @@ export class DocumentDetailComponent
               this.documentForm.patchValue({ title: titleValue })
               this.documentForm.get('title').markAsDirty()
             })
+          const keepContentEdits =
+            useDoc.__selectedVersionId === this.selectedVersionId() &&
+            !!useDoc.__changedFields?.includes('content')
           this.setupDirtyTracking(useDoc, doc)
+          // Maybe load the stored version
+          if (useDoc.__selectedVersionId) {
+            this.selectVersion(this.selectedVersionId(), keepContentEdits)
+          }
         },
       })
   }
@@ -903,9 +945,11 @@ export class DocumentDetailComponent
 
   updateComponent(doc: Document) {
     this.document.set(doc)
-    // Default selected version is the newest version, which the API returns first
+    // Load the selected version, or default to API first (newest)
     const versions = doc.versions ?? []
-    this.selectedVersionId.set(versions.length ? versions[0].id : doc.id)
+    const selectedVersion =
+      versions.find((v) => v.id === doc.__selectedVersionId) ?? versions[0]
+    this.selectedVersionId.set(selectedVersion?.id ?? doc.id)
     this.previewLoaded.set(false)
     this.requiresPassword = false
     this.updateFormForCustomFields()
@@ -940,8 +984,12 @@ export class DocumentDetailComponent
   }
 
   // Update file preview and download target to a specific version (by document id)
-  selectVersion(versionId: number) {
+  selectVersion(versionId: number, keepContentEdits: boolean = false) {
+    this.versionChangeNotifier.next()
     this.selectedVersionId.set(versionId)
+    // remember so the version can be restored when returning to the document
+    this.document().__selectedVersionId = versionId
+    this.openDocumentService.save()
     this.previewLoaded.set(false)
     this.previewUrl.set(
       this.documentsService.getPreviewUrl(
@@ -963,20 +1011,20 @@ export class DocumentDetailComponent
       .pipe(
         first(),
         takeUntil(this.unsubscribeNotifier),
-        takeUntil(this.docChangeNotifier)
+        takeUntil(this.docChangeNotifier),
+        takeUntil(this.versionChangeNotifier)
       )
       .subscribe({
         next: (doc) => {
           const content = doc?.content ?? ''
-          this.document().content = content
-          this.documentForm.patchValue(
-            {
-              content,
-            },
-            {
-              emitEvent: false,
-            }
-          )
+          if (keepContentEdits) {
+            this.store.next({ ...this.store.value, content })
+          } else {
+            // Update in-place and avoid the debounce wait
+            this.store.value.content = content
+            this.documentForm.patchValue({ content })
+            this.documentForm.get('content').markAsPristine()
+          }
         },
         error: (error) => {
           this.toastService.showError(
@@ -991,7 +1039,8 @@ export class DocumentDetailComponent
       .pipe(
         first(),
         takeUntil(this.unsubscribeNotifier),
-        takeUntil(this.docChangeNotifier)
+        takeUntil(this.docChangeNotifier),
+        takeUntil(this.versionChangeNotifier)
       )
       .subscribe({
         next: (res) => this.previewText.set(res.toString()),
@@ -1005,7 +1054,39 @@ export class DocumentDetailComponent
   }
 
   onVersionSelected(versionId: number) {
-    this.selectVersion(versionId)
+    if (versionId === this.selectedVersionId()) return
+    // Bail if the selected version was just deleted.
+    const selectedVersionExists = this.document()?.versions?.some(
+      (v) => v.id === this.selectedVersionId()
+    )
+    if (this.networkActive() && selectedVersionExists) return
+    if (
+      !selectedVersionExists ||
+      this.documentForm.get('content').value === this.store.value.content
+    ) {
+      this.selectVersion(versionId)
+      return
+    }
+
+    // Confirm any unsaved content changes
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Unsaved Changes`
+    modal.componentInstance.messageBold = $localize`You have unsaved changes to the content of this version.`
+    modal.componentInstance.message = $localize`Switching versions will discard them.`
+    modal.componentInstance.btnClass = 'btn-secondary'
+    modal.componentInstance.btnCaption = $localize`Discard and switch`
+    modal.componentInstance.alternativeBtnClass = 'btn-primary'
+    modal.componentInstance.alternativeBtnCaption = $localize`Save and switch`
+    modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
+      modal.close()
+      this.selectVersion(versionId)
+    })
+    modal.componentInstance.alternativeClicked.pipe(first()).subscribe(() => {
+      modal.close()
+      this.save(false, () => this.selectVersion(versionId))
+    })
   }
 
   onVersionsUpdated(versions: DocumentVersionInfo[]) {
@@ -1021,29 +1102,44 @@ export class DocumentDetailComponent
     return this.documentForm.get('custom_fields') as FormArray
   }
 
-  getSuggestions() {
+  getSuggestions(source: SuggestionSource = this.suggestionSource) {
+    const sources = (
+      source === SuggestionSource.Both
+        ? [SuggestionSource.ML, SuggestionSource.AI]
+        : [source]
+    ).filter((s) => !this.fetchedSuggestionSources().includes(s))
+    if (!sources.length) return
+
     this.suggestionsLoading.set(true)
-    const suggestionsObservable = this.aiEnabled
-      ? this.documentsService.getAiSuggestions(this.documentId())
-      : this.documentsService.getSuggestions(this.documentId())
-    suggestionsObservable
+    merge(
+      ...sources.map((s) =>
+        (s === SuggestionSource.AI
+          ? this.documentsService.getAiSuggestions(this.documentId())
+          : this.documentsService.getSuggestions(this.documentId())
+        ).pipe(
+          first(),
+          map((result) => ({ source: s, result })),
+          catchError((error) => {
+            this.toastService.showError(
+              $localize`Error retrieving suggestions.`,
+              error
+            )
+            return of(null)
+          })
+        )
+      )
+    )
       .pipe(
-        first(),
         takeUntil(this.unsubscribeNotifier),
         takeUntil(this.docChangeNotifier),
         finalize(() => this.suggestionsLoading.set(false))
       )
-      .subscribe({
-        next: (result) => {
-          this.suggestions.set(result)
-        },
-        error: (error) => {
-          this.suggestions.set(null)
-          this.toastService.showError(
-            $localize`Error retrieving suggestions.`,
-            error
-          )
-        },
+      .subscribe((response) => {
+        if (!response) return
+        this.fetchedSuggestionSources.update((f) => [...f, response.source])
+        this.suggestions.set(
+          mergeSuggestions(this.suggestions(), response.result)
+        )
       })
   }
 
@@ -1060,7 +1156,7 @@ export class DocumentDetailComponent
           if (this.suggestions()) {
             this.suggestions.set({
               ...this.suggestions(),
-              suggested_tags: this.suggestions().suggested_tags.filter(
+              suggested_tags: (this.suggestions().suggested_tags ?? []).filter(
                 (tag) => tag !== newTag.name
               ),
             })
@@ -1099,10 +1195,12 @@ export class DocumentDetailComponent
         this.documentForm.get('document_type').setValue(newDocumentType.id)
         this.documentForm.get('document_type').markAsDirty()
         if (this.suggestions()) {
-          this.suggestions().suggested_document_types =
-            this.suggestions().suggested_document_types.filter(
-              (dt) => dt !== newName
-            )
+          this.suggestions.set({
+            ...this.suggestions(),
+            suggested_document_types: (
+              this.suggestions().suggested_document_types ?? []
+            ).filter((dt) => dt !== newName),
+          })
         }
       })
   }
@@ -1129,10 +1227,12 @@ export class DocumentDetailComponent
         this.documentForm.get('correspondent').setValue(newCorrespondent.id)
         this.documentForm.get('correspondent').markAsDirty()
         if (this.suggestions()) {
-          this.suggestions().suggested_correspondents =
-            this.suggestions().suggested_correspondents.filter(
-              (c) => c !== newName
-            )
+          this.suggestions.set({
+            ...this.suggestions(),
+            suggested_correspondents: (
+              this.suggestions().suggested_correspondents ?? []
+            ).filter((c) => c !== newName),
+          })
         }
       })
   }
@@ -1233,7 +1333,7 @@ export class DocumentDetailComponent
     return changes
   }
 
-  save(close: boolean = false) {
+  save(close: boolean = false, savedCallback: () => void = null) {
     this.networkActive.set(true)
     ;(document.activeElement as HTMLElement)?.dispatchEvent(new Event('change'))
     this.documentsService
@@ -1251,7 +1351,7 @@ export class DocumentDetailComponent
           this.store.next(newValues)
           this.openDocumentService.setDirty(this.document(), false)
           this.openDocumentService.save()
-          this.toastService.showInfo(
+          this.toastService.showSuccess(
             $localize`Document "${newValues.title}" saved successfully.`
           )
           this.networkActive.set(false)
@@ -1266,6 +1366,7 @@ export class DocumentDetailComponent
             this.flushPendingIncomingUpdate()
           }
           this.savedViewService.maybeRefreshDocumentCounts()
+          savedCallback?.()
         },
         error: (error) => {
           this.networkActive.set(false)
@@ -1278,7 +1379,7 @@ export class DocumentDetailComponent
           if (!canEdit) {
             // document was 'given away'
             this.openDocumentService.setDirty(this.document(), false)
-            this.toastService.showInfo(
+            this.toastService.showSuccess(
               $localize`Document "${this.document().title}" saved successfully.`
             )
             this.close()
@@ -1391,6 +1492,10 @@ export class DocumentDetailComponent
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: () => {
+          this.trashService.notifyMovedToTrash(
+            $localize`Moved "${this.document().title}" to the trash`,
+            [this.document().id]
+          )
           modal.close()
           this.close()
         },
@@ -1450,7 +1555,7 @@ export class DocumentDetailComponent
   }
 
   runZoneOcr() {
-    this.documentsService.runZoneOcr(this.document.id).subscribe({
+    this.documentsService.runZoneOcr(this.document().id).subscribe({
       next: (res) => {
         const results = res.results ?? []
         if (results.length) {
@@ -1473,7 +1578,7 @@ export class DocumentDetailComponent
           )
         }
         this.documentsService
-          .get(this.documentId)
+          .get(this.documentId())
           .subscribe((doc) => this.updateComponent(doc))
       },
       error: (error) => {
@@ -1485,8 +1590,8 @@ export class DocumentDetailComponent
   createOcrTemplate() {
     this.router.navigate(['/ocr-templates', 'new'], {
       queryParams: {
-        document_type: this.document.document_type,
-        sample_document: this.document.id,
+        document_type: this.document().document_type,
+        sample_document: this.document().id,
       },
     })
   }

src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.spec.ts

@@ -33,7 +33,9 @@ describe('DocumentVersionDropdownComponent', () => {
       | 'updateVersionLabel'
     >
   >
-  let toastService: jest.Mocked<Pick<ToastService, 'showError' | 'showInfo'>>
+  let toastService: jest.Mocked<
+    Pick<ToastService, 'showError' | 'showInfo' | 'showSuccess'>
+  >
   let finished$: Subject<{ taskId: string }>
   let failed$: Subject<{ taskId: string; message?: string }>
   let modalService: jest.Mocked<Pick<NgbModal, 'open'>>
@@ -55,6 +57,7 @@ describe('DocumentVersionDropdownComponent', () => {
     toastService = {
       showError: jest.fn(),
       showInfo: jest.fn(),
+      showSuccess: jest.fn(),
     }
     permissionsService = {
       currentUserCan: jest.fn().mockReturnValue(true),
@@ -416,6 +419,6 @@ describe('DocumentVersionDropdownComponent', () => {
     expect(selectedEmitSpy).toHaveBeenCalledWith(2)
     expect(component.newVersionLabel).toEqual('')
     expect(modal.close).toHaveBeenCalled()
-    expect(toastService.showInfo).toHaveBeenCalled()
+    expect(toastService.showSuccess).toHaveBeenCalled()
   })
 })

src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.ts

@@ -320,7 +320,7 @@ export class DocumentVersionDropdownComponent
               }
               this.newVersionLabel = ''
               modal.close()
-              this.toastService.showInfo(
+              this.toastService.showSuccess(
                 $localize`Existing document added as a version.`
               )
             },

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts

@@ -7,8 +7,9 @@ import {
 import { EventEmitter, signal } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
+import { Router } from '@angular/router'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
@@ -38,6 +39,7 @@ import { TagService } from 'src/app/services/rest/tag.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { TrashService } from 'src/app/services/trash.service'
 import { environment } from 'src/environments/environment'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
@@ -46,7 +48,6 @@ import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage
 import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { FilterableDropdownComponent } from '../../common/filterable-dropdown/filterable-dropdown.component'
 import { ShareLinkBundleDialogComponent } from '../../common/share-link-bundle-dialog/share-link-bundle-dialog.component'
-import { ShareLinkBundleManageDialogComponent } from '../../common/share-link-bundle-manage-dialog/share-link-bundle-manage-dialog.component'
 import { BulkEditorComponent } from './bulk-editor.component'
 
 const selectionData: SelectionData = {
@@ -74,6 +75,7 @@ describe('BulkEditorComponent', () => {
   let documentListViewService: DocumentListViewService
   let documentService: DocumentService
   let toastService: ToastService
+  let trashService: TrashService
   let modalService: NgbModal
   let tagService: TagService
   let correspondentsService: CorrespondentService
@@ -82,6 +84,7 @@ describe('BulkEditorComponent', () => {
   let customFieldsService: CustomFieldsService
   let httpTestingController: HttpTestingController
   let shareLinkBundleService: ShareLinkBundleService
+  let router: Router
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -167,11 +170,14 @@ describe('BulkEditorComponent', () => {
           provide: ShareLinkBundleService,
           useValue: {
             createBundle: jest.fn(),
-            listAllBundles: jest.fn(),
             rebuildBundle: jest.fn(),
             delete: jest.fn(),
           },
         },
+        {
+          provide: Router,
+          useValue: { navigate: jest.fn().mockResolvedValue(true) },
+        },
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
       ],
@@ -181,6 +187,7 @@ describe('BulkEditorComponent', () => {
     documentListViewService = TestBed.inject(DocumentListViewService)
     documentService = TestBed.inject(DocumentService)
     toastService = TestBed.inject(ToastService)
+    trashService = TestBed.inject(TrashService)
     modalService = TestBed.inject(NgbModal)
     tagService = TestBed.inject(TagService)
     correspondentsService = TestBed.inject(CorrespondentService)
@@ -189,6 +196,7 @@ describe('BulkEditorComponent', () => {
     customFieldsService = TestBed.inject(CustomFieldsService)
     httpTestingController = TestBed.inject(HttpTestingController)
     shareLinkBundleService = TestBed.inject(ShareLinkBundleService)
+    router = TestBed.inject(Router)
 
     fixture = TestBed.createComponent(BulkEditorComponent)
     component = fixture.componentInstance
@@ -387,6 +395,42 @@ describe('BulkEditorComponent', () => {
     expect(component.tagSelectionModel.selectionSize()).toEqual(1)
   })
 
+  it('should request selection data for tags when documents are excluded from an all-filtered selection', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    fixture.detectChanges()
+    jest
+      .spyOn(documentListViewService, 'allSelected', 'get')
+      .mockReturnValue(true)
+    jest
+      .spyOn(documentListViewService, 'excluded', 'get')
+      .mockReturnValue(new Set([4]))
+    jest
+      .spyOn(documentListViewService, 'filterRules', 'get')
+      .mockReturnValue([{ rule_type: FILTER_TITLE, value: 'apple' }])
+    jest
+      .spyOn(documentListViewService, 'selectedCount', 'get')
+      .mockReturnValue(2)
+    const adjustedSelectionData: SelectionData = {
+      ...selectionData,
+      selected_tags: [{ id: 12, document_count: 2 }],
+    }
+    const getSelectionDataSpy = jest
+      .spyOn(documentService, 'getSelectionData')
+      .mockReturnValue(of(adjustedSelectionData))
+
+    component.openTagsDropdown()
+
+    expect(getSelectionDataSpy).toHaveBeenCalledWith({
+      all: true,
+      filters: { title_search: 'apple' },
+      excluded_documents: [4],
+    })
+    expect(component.tagDocumentCounts()).toEqual(
+      adjustedSelectionData.selected_tags
+    )
+    expect(component.tagSelectionModel.selectionSize()).toEqual(1)
+  })
+
   it('should apply list selection data to document types menu when all filtered documents are selected', () => {
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
     fixture.detectChanges()
@@ -455,6 +499,47 @@ describe('BulkEditorComponent', () => {
     )
   })
 
+  it('should request selection data for the other metadata menus when documents are excluded', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    fixture.detectChanges()
+    jest
+      .spyOn(documentListViewService, 'allSelected', 'get')
+      .mockReturnValue(true)
+    jest
+      .spyOn(documentListViewService, 'excluded', 'get')
+      .mockReturnValue(new Set([4]))
+    jest
+      .spyOn(documentListViewService, 'filterRules', 'get')
+      .mockReturnValue([{ rule_type: FILTER_TITLE, value: 'apple' }])
+    const getSelectionDataSpy = jest
+      .spyOn(documentService, 'getSelectionData')
+      .mockReturnValue(of(selectionData))
+
+    component.openDocumentTypeDropdown()
+    component.openCorrespondentDropdown()
+    component.openStoragePathDropdown()
+    component.openCustomFieldsDropdown()
+
+    expect(getSelectionDataSpy).toHaveBeenCalledTimes(4)
+    expect(getSelectionDataSpy).toHaveBeenCalledWith({
+      all: true,
+      filters: { title_search: 'apple' },
+      excluded_documents: [4],
+    })
+    expect(component.documentTypeDocumentCounts()).toEqual(
+      selectionData.selected_document_types
+    )
+    expect(component.correspondentDocumentCounts()).toEqual(
+      selectionData.selected_correspondents
+    )
+    expect(component.storagePathDocumentCounts()).toEqual(
+      selectionData.selected_storage_paths
+    )
+    expect(component.customFieldDocumentCounts()).toEqual(
+      selectionData.selected_custom_fields
+    )
+  })
+
   it('should execute modify tags bulk operation', () => {
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
     jest
@@ -496,16 +581,19 @@ describe('BulkEditorComponent', () => {
       .mockReturnValue([{ id: 3 }, { id: 4 }])
     jest
       .spyOn(documentListViewService, 'selected', 'get')
-      .mockReturnValue(new Set([3, 4]))
+      .mockReturnValue(new Set([3]))
     jest
       .spyOn(documentListViewService, 'allSelected', 'get')
       .mockReturnValue(true)
+    jest
+      .spyOn(documentListViewService, 'excluded', 'get')
+      .mockReturnValue(new Set([4]))
     jest
       .spyOn(documentListViewService, 'filterRules', 'get')
       .mockReturnValue([{ rule_type: FILTER_TITLE, value: 'apple' }])
     jest
       .spyOn(documentListViewService, 'selectedCount', 'get')
-      .mockReturnValue(25)
+      .mockReturnValue(24)
     jest
       .spyOn(permissionsService, 'currentUserHasObjectPermissions')
       .mockReturnValue(true)
@@ -524,6 +612,7 @@ describe('BulkEditorComponent', () => {
     expect(req.request.body).toEqual({
       all: true,
       filters: { title_search: 'apple' },
+      excluded_documents: [4],
       method: 'modify_tags',
       parameters: { add_tags: [101], remove_tags: [] },
     })
@@ -1078,10 +1167,14 @@ describe('BulkEditorComponent', () => {
     let req = httpTestingController.expectOne(
       `${environment.apiBaseUrl}documents/delete/`
     )
+    const notifySpy = jest
+      .spyOn(trashService, 'notifyMovedToTrash')
+      .mockImplementation(() => {})
     req.flush(true)
     expect(req.request.body).toEqual({
       documents: [3, 4],
     })
+    expect(notifySpy).toHaveBeenCalledWith(expect.any(String), [3, 4])
     httpTestingController.match(
       `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
     ) // list reload
@@ -1091,10 +1184,19 @@ describe('BulkEditorComponent', () => {
 
     component.showConfirmationDialogs = false
     fixture.detectChanges()
+    jest
+      .spyOn(documentListViewService, 'allSelected', 'get')
+      .mockReturnValue(true)
     component.applyDelete()
     req = httpTestingController.expectOne(
       `${environment.apiBaseUrl}documents/delete/`
     )
+    req.flush(true)
+    // ids aren't known when all matching documents are selected, so no undo
+    expect(notifySpy).toHaveBeenLastCalledWith(expect.any(String), null)
+    httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
+    ) // list reload
   })
 
   it('should not be accessible with insufficient global permissions', () => {
@@ -1330,7 +1432,7 @@ describe('BulkEditorComponent', () => {
     const mergeAsVersionsSpy = jest
       .spyOn(documentService, 'mergeDocumentsAsVersions')
       .mockReturnValue(of(true))
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showSuccess')
     fixture.detectChanges()
 
     component.mergeSelectedAsVersions()
@@ -1346,7 +1448,9 @@ describe('BulkEditorComponent', () => {
       `${environment.apiBaseUrl}documents/?page=1&page_size=100000&fields=id`
     )
     expect(documentListViewService.selected.size).toEqual(0)
-    expect(toastInfoSpy).toHaveBeenCalledWith('Documents merged as versions.')
+    expect(toastSuccessSpy).toHaveBeenCalledWith(
+      'Documents merged as versions.'
+    )
   })
 
   it('should not report success when merging documents as versions fails', () => {
@@ -1372,7 +1476,7 @@ describe('BulkEditorComponent', () => {
     jest
       .spyOn(documentService, 'mergeDocumentsAsVersions')
       .mockReturnValue(throwError(() => new Error('failed')))
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showSuccess')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     fixture.detectChanges()
 
@@ -1381,7 +1485,7 @@ describe('BulkEditorComponent', () => {
     modal.componentInstance.confirm()
 
     expect(toastErrorSpy).toHaveBeenCalled()
-    expect(toastInfoSpy).not.toHaveBeenCalled()
+    expect(toastSuccessSpy).not.toHaveBeenCalled()
   })
 
   it('should support bulk download with archive, originals or both and file formatting', () => {
@@ -1760,7 +1864,7 @@ describe('BulkEditorComponent', () => {
       .spyOn(documentListViewService, 'selected', 'get')
       .mockReturnValue(new Set([3, 4]))
     fixture.detectChanges()
-    const toastServiceShowInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastServiceShowInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const toastServiceShowErrorSpy = jest.spyOn(toastService, 'showError')
     const listReloadSpy = jest.spyOn(documentListViewService, 'reload')
 
@@ -1824,9 +1928,9 @@ describe('BulkEditorComponent', () => {
       },
     }
 
-    const openSpy = jest.spyOn(modalService, 'open')
-    openSpy.mockReturnValueOnce(modalRef as NgbModalRef)
-    openSpy.mockReturnValueOnce({} as NgbModalRef)
+    const openSpy = jest
+      .spyOn(modalService, 'open')
+      .mockReturnValueOnce(modalRef as NgbModalRef)
     ;(shareLinkBundleService.createBundle as jest.Mock).mockReturnValueOnce(
       of({ id: 42 })
     )
@@ -1860,11 +1964,9 @@ describe('BulkEditorComponent', () => {
 
     dialogInstance.onOpenManage()
     expect(modalRef.close).toHaveBeenCalled()
-    expect(openSpy).toHaveBeenNthCalledWith(
-      2,
-      ShareLinkBundleManageDialogComponent,
-      expect.objectContaining({ backdrop: 'static', size: 'lg' })
-    )
+    expect(router.navigate).toHaveBeenCalledWith(['/share-links'], {
+      queryParams: { type: 'bundles' },
+    })
     openSpy.mockRestore()
   })
 
@@ -1917,13 +2019,10 @@ describe('BulkEditorComponent', () => {
     openSpy.mockRestore()
   })
 
-  it('should open share link bundle management dialog', () => {
-    const openSpy = jest.spyOn(modalService, 'open')
+  it('should navigate to share link bundle management', () => {
     component.manageShareLinkBundles()
-    expect(openSpy).toHaveBeenCalledWith(
-      ShareLinkBundleManageDialogComponent,
-      expect.objectContaining({ backdrop: 'static', size: 'lg' })
-    )
-    openSpy.mockRestore()
+    expect(router.navigate).toHaveBeenCalledWith(['/share-links'], {
+      queryParams: { type: 'bundles' },
+    })
   })
 })

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -12,6 +12,7 @@ import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { Router } from '@angular/router'
 import {
   NgbDropdownModule,
   NgbModal,
@@ -27,6 +28,7 @@ import {
   Subject,
   switchMap,
   takeUntil,
+  tap,
 } from 'rxjs'
 import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
 import { CustomField } from 'src/app/data/custom-field'
@@ -56,6 +58,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 { TrashService } from 'src/app/services/trash.service'
 import { flattenTags } from 'src/app/utils/flatten-tags'
 import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
 import { MergeAsVersionsConfirmDialogComponent } from '../../common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component'
@@ -77,7 +80,6 @@ import {
 import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'
 import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
 import { ShareLinkBundleDialogComponent } from '../../common/share-link-bundle-dialog/share-link-bundle-dialog.component'
-import { ShareLinkBundleManageDialogComponent } from '../../common/share-link-bundle-manage-dialog/share-link-bundle-manage-dialog.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 import { CustomFieldsBulkEditDialogComponent } from './custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component'
 
@@ -107,11 +109,13 @@ export class BulkEditorComponent
   private openDocumentService = inject(OpenDocumentsService)
   private settings = inject(SettingsService)
   private toastService = inject(ToastService)
+  private trashService = inject(TrashService)
   private storagePathService = inject(StoragePathService)
   private customFieldService = inject(CustomFieldsService)
   public readonly permissionService = inject(PermissionsService)
   private savedViewService = inject(SavedViewService)
   private readonly shareLinkBundleService = inject(ShareLinkBundleService)
+  private readonly router = inject(Router)
 
   tagSelectionModel = new FilterableDropdownSelectionModel(true)
   correspondentSelectionModel = new FilterableDropdownSelectionModel()
@@ -313,7 +317,7 @@ export class BulkEditorComponent
       next: () => {
         this.handleOperationSuccess(modal, options.clearSelection ?? false)
         if (options.successMessage) {
-          this.toastService.showInfo(options.successMessage)
+          this.toastService.showSuccess(options.successMessage)
         }
       },
       error: (error) => this.handleOperationError(modal, error),
@@ -368,6 +372,7 @@ export class BulkEditorComponent
       return {
         all: true,
         filters: queryParamsFromFilterRules(this.list.filterRules),
+        excluded_documents: Array.from(this.list.excluded),
       }
     }
 
@@ -381,7 +386,8 @@ export class BulkEditorComponent
   }
 
   openTagsDropdown() {
-    if (this.list.allSelected) {
+    // If none excluded, use the selection data already available in the list view, otherwise fetch
+    if (this.list.allSelected && this.list.excluded.size === 0) {
       const selectionData = this.list.selectionData
       this.tagDocumentCounts.set(selectionData?.selected_tags ?? [])
       this.applySelectionData(this.tagDocumentCounts(), this.tagSelectionModel)
@@ -389,7 +395,7 @@ export class BulkEditorComponent
     }
 
     this.documentService
-      .getSelectionData(Array.from(this.list.selected))
+      .getSelectionData(this.getSelectionQuery())
       .pipe(first())
       .subscribe((s) => {
         this.tagDocumentCounts.set(s.selected_tags)
@@ -398,7 +404,7 @@ export class BulkEditorComponent
   }
 
   openDocumentTypeDropdown() {
-    if (this.list.allSelected) {
+    if (this.list.allSelected && this.list.excluded.size === 0) {
       const selectionData = this.list.selectionData
       this.documentTypeDocumentCounts.set(
         selectionData?.selected_document_types ?? []
@@ -411,7 +417,7 @@ export class BulkEditorComponent
     }
 
     this.documentService
-      .getSelectionData(Array.from(this.list.selected))
+      .getSelectionData(this.getSelectionQuery())
       .pipe(first())
       .subscribe((s) => {
         this.documentTypeDocumentCounts.set(s.selected_document_types)
@@ -423,7 +429,7 @@ export class BulkEditorComponent
   }
 
   openCorrespondentDropdown() {
-    if (this.list.allSelected) {
+    if (this.list.allSelected && this.list.excluded.size === 0) {
       const selectionData = this.list.selectionData
       this.correspondentDocumentCounts.set(
         selectionData?.selected_correspondents ?? []
@@ -436,7 +442,7 @@ export class BulkEditorComponent
     }
 
     this.documentService
-      .getSelectionData(Array.from(this.list.selected))
+      .getSelectionData(this.getSelectionQuery())
       .pipe(first())
       .subscribe((s) => {
         this.correspondentDocumentCounts.set(s.selected_correspondents)
@@ -448,7 +454,7 @@ export class BulkEditorComponent
   }
 
   openStoragePathDropdown() {
-    if (this.list.allSelected) {
+    if (this.list.allSelected && this.list.excluded.size === 0) {
       const selectionData = this.list.selectionData
       this.storagePathDocumentCounts.set(
         selectionData?.selected_storage_paths ?? []
@@ -461,7 +467,7 @@ export class BulkEditorComponent
     }
 
     this.documentService
-      .getSelectionData(Array.from(this.list.selected))
+      .getSelectionData(this.getSelectionQuery())
       .pipe(first())
       .subscribe((s) => {
         this.storagePathDocumentCounts.set(s.selected_storage_paths)
@@ -473,7 +479,7 @@ export class BulkEditorComponent
   }
 
   openCustomFieldsDropdown() {
-    if (this.list.allSelected) {
+    if (this.list.allSelected && this.list.excluded.size === 0) {
       const selectionData = this.list.selectionData
       this.customFieldDocumentCounts.set(
         selectionData?.selected_custom_fields ?? []
@@ -486,7 +492,7 @@ export class BulkEditorComponent
     }
 
     this.documentService
-      .getSelectionData(Array.from(this.list.selected))
+      .getSelectionData(this.getSelectionQuery())
       .pipe(first())
       .subscribe((s) => {
         this.customFieldDocumentCounts.set(s.selected_custom_fields)
@@ -889,19 +895,33 @@ export class BulkEditorComponent
         .pipe(takeUntil(this.unsubscribeNotifier))
         .subscribe(() => {
           modal.componentInstance.buttonsEnabled.set(false)
-          this.executeDocumentAction(
-            modal,
-            this.documentService.deleteDocuments(this.getSelectionQuery())
-          )
+          this.deleteSelected(modal)
         })
     } else {
-      this.executeDocumentAction(
-        null,
-        this.documentService.deleteDocuments(this.getSelectionQuery())
-      )
+      this.deleteSelected(null)
     }
   }
 
+  private deleteSelected(modal: NgbModalRef) {
+    const documents = this.list.allSelected
+      ? null
+      : Array.from(this.list.selected)
+    const count = this.getSelectionSize()
+    this.executeDocumentAction(
+      modal,
+      this.documentService
+        .deleteDocuments(this.getSelectionQuery())
+        .pipe(
+          tap(() =>
+            this.trashService.notifyMovedToTrash(
+              $localize`Moved ${count} document(s) to the trash`,
+              documents
+            )
+          )
+        )
+    )
+  }
+
   downloadSelected() {
     this.awaitingDownload.set(true)
     let downloadFileType: string =
@@ -1091,7 +1111,7 @@ export class BulkEditorComponent
     dialog.selection = this.getSelectionQuery()
     dialog.selectionCount = this.getSelectionSize()
     dialog.succeeded.subscribe((result) => {
-      this.toastService.showInfo($localize`Custom fields updated.`)
+      this.toastService.showSuccess($localize`Custom fields updated.`)
       this.list.reload()
       this.list.reduceSelectionToFilter()
       this.list.selected.forEach((id) => {
@@ -1164,9 +1184,8 @@ export class BulkEditorComponent
   }
 
   manageShareLinkBundles() {
-    this.modalService.open(ShareLinkBundleManageDialogComponent, {
-      backdrop: 'static',
-      size: 'lg',
+    void this.router.navigate(['/share-links'], {
+      queryParams: { type: 'bundles' },
     })
   }
 

src-ui/src/app/components/document-list/document-list.component.spec.ts

@@ -146,6 +146,19 @@ describe('DocumentListComponent', () => {
     expect(reloadSpy).toHaveBeenCalled()
   })
 
+  it('should stop reloading on document deleted after destroy', () => {
+    const reloadSpy = jest.spyOn(documentListService, 'reload')
+    const documentDeletedSubject = new Subject<boolean>()
+    jest
+      .spyOn(websocketStatusService, 'onDocumentDeleted')
+      .mockReturnValue(documentDeletedSubject)
+    fixture.detectChanges()
+    fixture.destroy()
+    reloadSpy.mockClear()
+    documentDeletedSubject.next(true)
+    expect(reloadSpy).not.toHaveBeenCalled()
+  })
+
   it('should show score sort fields on fulltext queries', () => {
     documentListService.setFilterRules([
       {
@@ -474,7 +487,7 @@ describe('DocumentListComponent', () => {
     delete modifiedView.name
     const savedViewServicePatch = jest.spyOn(savedViewService, 'patch')
     savedViewServicePatch.mockReturnValue(of(modifiedView))
-    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSpy = jest.spyOn(toastService, 'showSuccess')
 
     component.saveViewConfig()
     expect(savedViewServicePatch).toHaveBeenCalledWith(modifiedView)
@@ -579,7 +592,7 @@ describe('DocumentListComponent', () => {
     let openModal: NgbModalRef
     modalService.activeInstances.subscribe((modal) => (openModal = modal[0]))
     const modalSpy = jest.spyOn(modalService, 'open')
-    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const toastSpy = jest.spyOn(toastService, 'showSuccess')
     const savedViewServiceCreate = jest.spyOn(savedViewService, 'create')
     jest
       .spyOn(savedViewService, 'dashboardViews', 'get')

src-ui/src/app/components/document-list/document-list.component.ts

@@ -270,9 +270,12 @@ export class DocumentListComponent
         this.list.reload()
       })
 
-    this.websocketStatusService.onDocumentDeleted().subscribe(() => {
-      this.list.reload()
-    })
+    this.websocketStatusService
+      .onDocumentDeleted()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        this.list.reload()
+      })
 
     this.route.paramMap
       .pipe(
@@ -415,7 +418,7 @@ export class DocumentListComponent
           next: (view) => {
             this.activeSavedView = view
             this.unmodifiedSavedView = view
-            this.toastService.showInfo(
+            this.toastService.showSuccess(
               $localize`View "${this.list.activeSavedViewTitle}" saved successfully.`
             )
             this.unmodifiedFilterRules.set(this.list.filterRules)
@@ -490,7 +493,7 @@ export class DocumentListComponent
               .subscribe({
                 next: () => {
                   modal.close()
-                  this.toastService.showInfo(
+                  this.toastService.showSuccess(
                     $localize`View "${savedView.name}" created successfully.`
                   )
                 },

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts

@@ -484,6 +484,22 @@ describe('FilterEditorComponent', () => {
     expect(component.textFilter).toBeNull()
   })
 
+  it('should ingest title filter rules alongside a fulltext query with date created', () => {
+    component.filterRules = [
+      {
+        rule_type: FILTER_SIMPLE_TITLE,
+        value: 'foo',
+      },
+      {
+        rule_type: FILTER_FULLTEXT_QUERY,
+        value: 'created:[-1 week to now]',
+      },
+    ]
+    expect(component.dateCreatedRelativeDate).toEqual(1) // RELATIVE_DATE_QUERYSTRINGS['-1 week to now']
+    expect(component.textFilter).toEqual('foo')
+    expect(component.textFilterTarget).toEqual('title') // TEXT_FILTER_TARGET_TITLE
+  })
+
   it('should ingest text filter rules for fulltext query that include date added', () => {
     expect(component.dateAddedRelativeDate).toBeNull()
     component.filterRules = [
@@ -1423,11 +1439,16 @@ describe('FilterEditorComponent', () => {
     ])
   })
 
+  const clickTextFilterTarget = (name: string) => {
+    const item = fixture.debugElement
+      .queryAll(By.directive(NgbDropdownItem))
+      .find((el) => el.nativeElement.textContent.trim() === name)
+    expect(item).not.toBeUndefined()
+    item.triggerEventHandler('click')
+  }
+
   it('should convert duplicate target input to the correct filter rule', () => {
-    const textFieldTargetDropdown = fixture.debugElement.queryAll(
-      By.directive(NgbDropdownItem)
-    )[5]
-    textFieldTargetDropdown.triggerEventHandler('click')
+    clickTextFilterTarget('Duplicates')
     fixture.detectChanges()
 
     expect(component.textFilterTarget).toEqual('duplicates')
@@ -1453,10 +1474,7 @@ describe('FilterEditorComponent', () => {
   it('should convert user input to correct filter rules on full text query', () => {
     component.textFilterInput.nativeElement.value = 'foo'
     component.textFilterInput.nativeElement.dispatchEvent(new Event('input'))
-    const textFieldTargetDropdown = fixture.debugElement.queryAll(
-      By.directive(NgbDropdownItem)
-    )[4]
-    textFieldTargetDropdown.triggerEventHandler('click') // TEXT_FILTER_TARGET_FULLTEXT_QUERY
+    clickTextFilterTarget('Advanced search')
     fixture.detectChanges()
     tick(400)
     expect(component.textFilterTarget).toEqual('fulltext-query')
@@ -1843,7 +1861,7 @@ describe('FilterEditorComponent', () => {
     ])
   })
 
-  it('should carry over text filtering on date created with relative date', () => {
+  it('should keep text filtering separate from date created relative date', () => {
     component.textFilter = 'foo'
     const dateCreatedDropdown = fixture.debugElement.queryAll(
       By.directive(DatesDropdownComponent)
@@ -1853,14 +1871,18 @@ describe('FilterEditorComponent', () => {
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
+      {
+        rule_type: FILTER_SIMPLE_TEXT,
+        value: 'foo',
+      },
       {
         rule_type: FILTER_FULLTEXT_QUERY,
-        value: 'foo,created:[-1 week to now]',
+        value: 'created:[-1 week to now]',
       },
     ])
   })
 
-  it('should carry over text filtering once with created and added relative dates', () => {
+  it('should keep text filtering separate from created and added relative dates', () => {
     component.textFilter = 'foo'
     const datesDropdown = fixture.debugElement.query(
       By.directive(DatesDropdownComponent)
@@ -1871,14 +1893,18 @@ describe('FilterEditorComponent', () => {
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
+      {
+        rule_type: FILTER_SIMPLE_TEXT,
+        value: 'foo',
+      },
       {
         rule_type: FILTER_FULLTEXT_QUERY,
-        value: 'foo,created:[-1 week to now],added:[-1 month to now]',
+        value: 'created:[-1 week to now],added:[-1 month to now]',
       },
     ])
   })
 
-  it('should convert legacy title filters into full text query when adding a created relative date', () => {
+  it('should keep legacy title filters as a title search when adding a created relative date', () => {
     component.filterRules = [
       {
         rule_type: FILTER_TITLE,
@@ -1893,14 +1919,18 @@ describe('FilterEditorComponent', () => {
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
+      {
+        rule_type: FILTER_SIMPLE_TITLE,
+        value: 'foo',
+      },
       {
         rule_type: FILTER_FULLTEXT_QUERY,
-        value: 'foo,created:[-1 week to now]',
+        value: 'created:[-1 week to now]',
       },
     ])
   })
 
-  it('should convert simple title filters into full text query when adding a created relative date', () => {
+  it('should keep simple title filters as a title search when adding a created relative date', () => {
     component.filterRules = [
       {
         rule_type: FILTER_SIMPLE_TITLE,
@@ -1915,9 +1945,13 @@ describe('FilterEditorComponent', () => {
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
+      {
+        rule_type: FILTER_SIMPLE_TITLE,
+        value: 'foo',
+      },
       {
         rule_type: FILTER_FULLTEXT_QUERY,
-        value: 'foo,created:[-1 week to now]',
+        value: 'created:[-1 week to now]',
       },
     ])
   })
@@ -1925,10 +1959,7 @@ describe('FilterEditorComponent', () => {
   it('should leave relative dates not in quick list intact', () => {
     component.textFilterInput.nativeElement.value = 'created:[-2 week to now]'
     component.textFilterInput.nativeElement.dispatchEvent(new Event('input'))
-    const textFieldTargetDropdown = fixture.debugElement.queryAll(
-      By.directive(NgbDropdownItem)
-    )[4]
-    textFieldTargetDropdown.triggerEventHandler('click')
+    clickTextFilterTarget('Advanced search')
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
@@ -2006,7 +2037,7 @@ describe('FilterEditorComponent', () => {
     ])
   })
 
-  it('should carry over text filtering on date added with relative date', () => {
+  it('should keep text filtering separate from date added relative date', () => {
     component.textFilter = 'foo'
     const datesDropdown = fixture.debugElement.query(
       By.directive(DatesDropdownComponent)
@@ -2016,9 +2047,13 @@ describe('FilterEditorComponent', () => {
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
+      {
+        rule_type: FILTER_SIMPLE_TEXT,
+        value: 'foo',
+      },
       {
         rule_type: FILTER_FULLTEXT_QUERY,
-        value: 'foo,added:[-1 week to now]',
+        value: 'added:[-1 week to now]',
       },
     ])
   })

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts

@@ -205,11 +205,11 @@ const DEFAULT_TEXT_FILTER_TARGET_OPTIONS = [
   },
   { id: TEXT_FILTER_TARGET_ASN, name: $localize`ASN` },
   { id: TEXT_FILTER_TARGET_MIME_TYPE, name: $localize`File type` },
+  { id: TEXT_FILTER_TARGET_DUPLICATES, name: $localize`Duplicates` },
   {
     id: TEXT_FILTER_TARGET_FULLTEXT_QUERY,
     name: $localize`Advanced search`,
   },
-  { id: TEXT_FILTER_TARGET_DUPLICATES, name: $localize`Duplicates` },
 ]
 
 const DEPRECATED_CUSTOM_FIELDS_TEXT_FILTER_TARGET_OPTION = {
@@ -1083,23 +1083,6 @@ export class FilterEditorComponent
         (fr) => fr.rule_type == FILTER_FULLTEXT_QUERY
       )
 
-      // if had a title / content search and added a relative date we need to carry it over...
-      if (
-        !existingRule &&
-        this._textFilter?.length > 0 &&
-        (this.textFilterTarget == TEXT_FILTER_TARGET_TITLE_CONTENT ||
-          this.textFilterTarget == TEXT_FILTER_TARGET_TITLE)
-      ) {
-        existingRule = filterRules.find(
-          (fr) =>
-            fr.rule_type == FILTER_TITLE_CONTENT ||
-            fr.rule_type == FILTER_SIMPLE_TEXT ||
-            fr.rule_type == FILTER_TITLE ||
-            fr.rule_type == FILTER_SIMPLE_TITLE
-        )
-        existingRule.rule_type = FILTER_FULLTEXT_QUERY
-      }
-
       let queryArgs = existingRule?.value.split(',') ?? []
       if (this.dateCreatedRelativeDate !== null) {
         const rd = RELATIVE_DATE_QUERYSTRINGS.find(

src-ui/src/app/components/file-drop/file-drop.component.spec.ts

@@ -119,7 +119,7 @@ describe('FileDropComponent', () => {
     }
     component.onDrop(dragEvent as DragEvent)
     advanceTimers(3000)
-    expect(toastSpy).toHaveBeenCalled()
+    expect(toastSpy).not.toHaveBeenCalled()
     expect(uploadSpy).toHaveBeenCalled()
   })
 
@@ -159,7 +159,7 @@ describe('FileDropComponent', () => {
     component.onDrop(dragEvent as DragEvent)
     await flushPromises()
     advanceTimers(3000)
-    expect(toastSpy).toHaveBeenCalled()
+    expect(toastSpy).not.toHaveBeenCalled()
     expect(uploadSpy).toHaveBeenCalled()
   })
 
@@ -227,7 +227,7 @@ describe('FileDropComponent', () => {
     }
     component.onDrop(dragEvent as DragEvent)
     advanceTimers(3000)
-    expect(toastSpy).toHaveBeenCalled()
+    expect(toastSpy).not.toHaveBeenCalled()
     expect(uploadSpy).toHaveBeenCalled()
   })
 

src-ui/src/app/components/file-drop/file-drop.component.ts

@@ -134,8 +134,7 @@ export class FileDropComponent {
       Promise.all(promises)
         .then((results) => {
           files.push(...[].concat(...results))
-          this.toastService.showInfo($localize`Initiating upload...`, 3000)
-          files.forEach((file) => this.uploadDocumentsService.uploadFile(file))
+          this.uploadDocumentsService.uploadFiles(files)
         })
         .catch((e) => {
           this.toastService.showError(
@@ -143,8 +142,7 @@ export class FileDropComponent {
           )
         })
     } else if (files.length) {
-      this.toastService.showInfo($localize`Initiating upload...`, 3000)
-      files.forEach((file) => this.uploadDocumentsService.uploadFile(file))
+      this.uploadDocumentsService.uploadFiles(files)
     }
 
     this.onDragLeave(event, true)

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.spec.ts

@@ -107,7 +107,7 @@ describe('CustomFieldsComponent', () => {
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const reloadSpy = jest.spyOn(component, 'reload')
 
     component.editField()
@@ -131,7 +131,7 @@ describe('CustomFieldsComponent', () => {
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const reloadSpy = jest.spyOn(component, 'reload')
 
     const editButton = fixture.debugElement

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.ts

@@ -82,7 +82,9 @@ export class CustomFieldsComponent
     modal.componentInstance.succeeded
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((newField) => {
-        this.toastService.showInfo($localize`Saved field "${newField.name}".`)
+        this.toastService.showSuccess(
+          $localize`Saved field "${newField.name}".`
+        )
         this.customFieldsService.clearCache()
         this.settingsService.initializeDisplayFields()
         this.documentService.reload()
@@ -109,7 +111,9 @@ export class CustomFieldsComponent
       this.customFieldsService.delete(field).subscribe({
         next: () => {
           modal.close()
-          this.toastService.showInfo($localize`Deleted field "${field.name}"`)
+          this.toastService.showSuccess(
+            $localize`Deleted field "${field.name}"`
+          )
           this.customFieldsService.clearCache()
           this.settingsService.initializeDisplayFields()
           this.documentService.reload()

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.html

@@ -11,7 +11,7 @@
       <div class="input-group input-group-sm w-auto d-none d-md-flex">
         <label class="input-group-text bg-transparent border-0" for="managementPageSize" i18n>Show:</label>
       </div>
-      <div class="input-group input-group-sm w-auto me-3">
+      <div class="input-group input-group-sm w-auto">
         <select id="managementPageSize" class="form-select form-select-sm small" [(ngModel)]="pageSize">
           <option [ngValue]="25">25</option>
           <option [ngValue]="50">50</option>
@@ -19,7 +19,9 @@
         </select>
         <span class="input-group-text text-muted d-none d-md-flex" i18n>per page</span>
       </div>
-      <ngb-pagination [pageSize]="pageSize" [collectionSize]="collectionSize()" [page]="page()" [maxSize]="5" (pageChange)="page.set($event); reloadData()" size="sm" aria-label="Pagination"></ngb-pagination>
+      @if (collectionSize() > pageSize) {
+        <ngb-pagination [pageSize]="pageSize" [collectionSize]="collectionSize()" [page]="page()" [maxSize]="5" (pageChange)="page.set($event); reloadData()" class="ms-3" size="sm" aria-label="Pagination"></ngb-pagination>
+      }
     </div>
   </div>
 
@@ -70,7 +72,7 @@
         }
       </div>
     }
-    @if (collectionSize() > 20) {
+    @if (collectionSize() > pageSize) {
       <ngb-pagination class="ms-auto" [pageSize]="pageSize" [collectionSize]="collectionSize()" [page]="page()" [maxSize]="5" (pageChange)="page.set($event); reloadData()" size="sm" aria-label="Pagination"></ngb-pagination>
     }
   </div>

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.spec.ts

@@ -160,7 +160,7 @@ describe('ManagementListComponent', () => {
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const reloadSpy = jest.spyOn(component, 'reloadData')
 
     component.openCreateDialog()
@@ -183,7 +183,7 @@ describe('ManagementListComponent', () => {
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const reloadSpy = jest.spyOn(component, 'reloadData')
 
     component.openEditDialog(tags[0])
@@ -387,7 +387,7 @@ describe('ManagementListComponent', () => {
     expect(bulkEditPermsSpy).toHaveBeenCalled()
     expect(errorToastSpy).toHaveBeenCalled()
 
-    const successToastSpy = jest.spyOn(toastService, 'showInfo')
+    const successToastSpy = jest.spyOn(toastService, 'showSuccess')
     bulkEditPermsSpy.mockReturnValueOnce(of('OK'))
     modal.componentInstance.confirmClicked.emit({
       permissions: {},
@@ -452,7 +452,7 @@ describe('ManagementListComponent', () => {
     )
     expect(errorToastSpy).toHaveBeenCalled()
 
-    const successToastSpy = jest.spyOn(toastService, 'showInfo')
+    const successToastSpy = jest.spyOn(toastService, 'showSuccess')
     bulkEditSpy.mockReturnValueOnce(of('OK'))
     modal.componentInstance.confirmClicked.emit(null)
     expect(bulkEditSpy).toHaveBeenCalled()

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.ts

@@ -224,7 +224,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
     activeModal.componentInstance.dialogMode.set(EditDialogMode.CREATE)
     activeModal.componentInstance.succeeded.subscribe(() => {
       this.reloadData()
-      this.toastService.showInfo(
+      this.toastService.showSuccess(
         $localize`Successfully created ${this.typeName}.`
       )
     })
@@ -244,7 +244,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
     activeModal.componentInstance.dialogMode.set(EditDialogMode.EDIT)
     activeModal.componentInstance.succeeded.subscribe(() => {
       this.reloadData()
-      this.toastService.showInfo(
+      this.toastService.showSuccess(
         $localize`Successfully updated ${this.typeName} "${object.name}".`
       )
     })
@@ -428,7 +428,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
           .subscribe({
             next: () => {
               modal.close()
-              this.toastService.showInfo(
+              this.toastService.showSuccess(
                 $localize`Permissions updated successfully`
               )
               this.reloadData()
@@ -468,7 +468,9 @@ export abstract class ManagementListComponent<T extends MatchingModel>
         .subscribe({
           next: () => {
             modal.close()
-            this.toastService.showInfo($localize`Objects deleted successfully`)
+            this.toastService.showSuccess(
+              $localize`Objects deleted successfully`
+            )
             this.reloadData()
           },
           error: (error) => {

src-ui/src/app/components/manage/mail/mail.component.spec.ts

@@ -184,7 +184,7 @@ describe('MailComponent', () => {
     component.editMailAccount(mailAccounts[0] as MailAccount)
     let editDialog = modal.componentInstance as MailAccountEditDialogComponent
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     editDialog.failed.emit()
     expect(toastErrorSpy).toHaveBeenCalled()
     editDialog.succeeded.emit(mailAccounts[0] as any)
@@ -203,7 +203,7 @@ describe('MailComponent', () => {
     const deleteDialog = modal.componentInstance as ConfirmDialogComponent
     const deleteSpy = jest.spyOn(mailAccountService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const listAllSpy = jest.spyOn(mailAccountService, 'listAll')
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting mail account'))
@@ -242,7 +242,7 @@ describe('MailComponent', () => {
     component.editMailRule(mailRules[0] as MailRule)
     const editDialog = modal.componentInstance as MailRuleEditDialogComponent
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     editDialog.failed.emit()
     expect(toastErrorSpy).toHaveBeenCalled()
     editDialog.succeeded.emit(mailRules[0] as any)
@@ -272,7 +272,7 @@ describe('MailComponent', () => {
     const deleteDialog = modal.componentInstance as ConfirmDialogComponent
     const deleteSpy = jest.spyOn(mailRuleService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const listAllSpy = jest.spyOn(mailRuleService, 'listAll')
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting mail rule "rule1"'))
@@ -303,7 +303,7 @@ describe('MailComponent', () => {
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     const rulePatchSpy = jest.spyOn(mailRuleService, 'patch')
     component.editPermissions(mailRules[0] as MailRule)
     expect(modal).not.toBeUndefined()
@@ -356,7 +356,7 @@ describe('MailComponent', () => {
       By.css('input[type="checkbox"]')
     )
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     // fail first
     patchSpy.mockReturnValueOnce(
       throwError(() => new Error('Error getting config'))
@@ -380,7 +380,7 @@ describe('MailComponent', () => {
     jest
       .spyOn(activatedRoute, 'queryParamMap', 'get')
       .mockReturnValue(of(convertToParamMap(queryParams)))
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     completeSetup()
     expect(toastInfoSpy).toHaveBeenCalled()
   })

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -135,7 +135,9 @@ export class MailComponent
       if (params.get('oauth_success')) {
         const success = params.get('oauth_success') === '1'
         if (success) {
-          this.toastService.showInfo($localize`OAuth2 authentication success`)
+          this.toastService.showSuccess(
+            $localize`OAuth2 authentication success`
+          )
           this.oAuthAccountId = parseInt(params.get('account_id'))
           if (this.mailAccounts().length > 0) {
             this.editMailAccount(
@@ -169,7 +171,7 @@ export class MailComponent
     modal.componentInstance.succeeded
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((newMailAccount) => {
-        this.toastService.showInfo(
+        this.toastService.showSuccess(
           $localize`Saved account "${newMailAccount.name}".`
         )
         this.mailAccountService.clearCache()
@@ -200,7 +202,7 @@ export class MailComponent
       this.mailAccountService.delete(account).subscribe({
         next: () => {
           modal.close()
-          this.toastService.showInfo(
+          this.toastService.showSuccess(
             $localize`Deleted mail account "${account.name}"`
           )
           this.mailAccountService.clearCache()
@@ -248,7 +250,9 @@ export class MailComponent
     modal.componentInstance.succeeded
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((newMailRule) => {
-        this.toastService.showInfo($localize`Saved rule "${newMailRule.name}".`)
+        this.toastService.showSuccess(
+          $localize`Saved rule "${newMailRule.name}".`
+        )
         this.mailRuleService.clearCache()
         this.mailRuleService
           .listAll(null, null, { full_perms: true })
@@ -273,7 +277,7 @@ export class MailComponent
   onMailRuleEnableToggled(rule: MailRule) {
     this.mailRuleService.patch(rule).subscribe({
       next: () => {
-        this.toastService.showInfo(
+        this.toastService.showSuccess(
           rule.enabled
             ? $localize`Rule "${rule.name}" enabled.`
             : $localize`Rule "${rule.name}" disabled.`
@@ -302,7 +306,7 @@ export class MailComponent
       this.mailRuleService.delete(rule).subscribe({
         next: () => {
           modal.close()
-          this.toastService.showInfo(
+          this.toastService.showSuccess(
             $localize`Deleted mail rule "${rule.name}"`
           )
           this.mailRuleService.clearCache()
@@ -338,7 +342,7 @@ export class MailComponent
         object['set_permissions'] = permissions['set_permissions']
         service.patch(object).subscribe({
           next: () => {
-            this.toastService.showInfo($localize`Permissions updated`)
+            this.toastService.showSuccess($localize`Permissions updated`)
             modal.close()
           },
           error: (e) => {

src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.html

@@ -93,15 +93,17 @@
         [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>
+      @if (processedMails().length > 50) {
+        <div class="ms-auto">
+          <ngb-pagination
+            [collectionSize]="processedMails().length"
+            [(page)]="page"
+            [pageSize]="50"
+            [maxSize]="5"
+            (pageChange)="loadProcessedMails()">
+          </ngb-pagination>
+        </div>
+      }
     </div>
   }
 </div>

src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.spec.ts

@@ -96,7 +96,7 @@ describe('ProcessedMailDialogComponent', () => {
     // select a couple of mails and delete
     component.selectedMailIds().add(5)
     component.selectedMailIds().add(6)
-    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastInfoSpy = jest.spyOn(toastService, 'showSuccess')
     component.deleteSelected()
 
     const delReq = httpTestingController.expectOne(

src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.ts

@@ -67,7 +67,7 @@ export class ProcessedMailDialogComponent implements OnInit {
     this.processedMailService
       .bulk_delete(Array.from(this.selectedMailIds()))
       .subscribe(() => {
-        this.toastService.showInfo($localize`Processed mail(s) deleted`)
+        this.toastService.showSuccess($localize`Processed mail(s) deleted`)
         this.loadProcessedMails()
       })
   }