Settings UI with live updating

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

@@ -89,6 +89,17 @@
           </div>
         </div>
 
+        <div class="row mb-3">
+          <div class="col-md-3 col-form-label">
+            <span i18n>Sidebar</span>
+          </div>
+          <div class="col">
+
+            <app-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></app-input-check>
+
+          </div>
+        </div>
+
         <div class="row mb-3">
           <div class="col-md-3 col-form-label">
             <span i18n>Dark mode</span>

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

@@ -1,11 +1,4 @@
-import {
-  Component,
-  Inject,
-  LOCALE_ID,
-  OnInit,
-  OnDestroy,
-  Renderer2,
-} from '@angular/core'
+import { Component, Inject, LOCALE_ID, OnInit, OnDestroy } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
@@ -18,6 +11,7 @@ import { Toast, ToastService } from 'src/app/services/toast.service'
 import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms'
 import { Observable, Subscription, BehaviorSubject, first } from 'rxjs'
 import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { ForwardRefHandling } from '@angular/compiler'
 
 @Component({
   selector: 'app-settings',
@@ -31,6 +25,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
     bulkEditConfirmationDialogs: new FormControl(null),
     bulkEditApplyOnClose: new FormControl(null),
     documentListItemPerPage: new FormControl(null),
+    slimSidebarEnabled: new FormControl(null),
     darkModeUseSystem: new FormControl(null),
     darkModeEnabled: new FormControl(null),
     darkModeInvertThumbs: new FormControl(null),
@@ -75,12 +70,18 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
     private toastService: ToastService,
     private settings: SettingsService,
     @Inject(LOCALE_ID) public currentLocale: string
-  ) {}
+  ) {
+    this.settings.changed.subscribe({
+      next: () => {
+        this.settingsForm.patchValue(this.getCurrentSettings(), {
+          emitEvent: false,
+        })
+      },
+    })
+  }
 
-  ngOnInit() {
-    this.savedViewService.listAll().subscribe((r) => {
-      this.savedViews = r.results
-      let storeData = {
+  private getCurrentSettings() {
+    return {
       bulkEditConfirmationDialogs: this.settings.get(
         SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
       ),
@@ -90,9 +91,8 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
       documentListItemPerPage: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_LIST_SIZE
       ),
-        darkModeUseSystem: this.settings.get(
-          SETTINGS_KEYS.DARK_MODE_USE_SYSTEM
-        ),
+      slimSidebarEnabled: this.settings.get(SETTINGS_KEYS.SLIM_SIDEBAR),
+      darkModeUseSystem: this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM),
       darkModeEnabled: this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED),
       darkModeInvertThumbs: this.settings.get(
         SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED
@@ -119,6 +119,12 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
       ),
       commentsEnabled: this.settings.get(SETTINGS_KEYS.COMMENTS_ENABLED),
     }
+  }
+
+  ngOnInit() {
+    this.savedViewService.listAll().subscribe((r) => {
+      this.savedViews = r.results
+      let storeData = this.getCurrentSettings()
 
       for (let view of this.savedViews) {
         storeData.savedViews[view.id.toString()] = {
@@ -192,6 +198,10 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
       SETTINGS_KEYS.DOCUMENT_LIST_SIZE,
       this.settingsForm.value.documentListItemPerPage
     )
+    this.settings.set(
+      SETTINGS_KEYS.SLIM_SIDEBAR,
+      this.settingsForm.value.slimSidebarEnabled
+    )
     this.settings.set(
       SETTINGS_KEYS.DARK_MODE_USE_SYSTEM,
       this.settingsForm.value.darkModeUseSystem

src-ui/src/app/services/settings.service.ts

@@ -1,6 +1,7 @@
 import { DOCUMENT } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import {
+  EventEmitter,
   Inject,
   Injectable,
   LOCALE_ID,
@@ -46,6 +47,8 @@ export class SettingsService {
 
   public displayName: string
 
+  public changed = new EventEmitter()
+
   constructor(
     rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) private document,
@@ -360,7 +363,9 @@ export class SettingsService {
   }
 
   storeSettings(): Observable<any> {
-    return this.http.post(this.baseUrl, { settings: this.settings })
+    return this.http
+      .post(this.baseUrl, { settings: this.settings })
+      .pipe(tap((result) => this.changed.emit(!!result.success)))
   }
 
   maybeMigrateSettings() {