Make the application name changeable

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

@@ -17,6 +17,17 @@
 
         <h4 i18n>Appearance</h4>
 
+        <div class="row mb-3">
+          <div class="col-md-3 col-form-label pt-0">
+            <span i18n>Application Name</span>
+          </div>
+          <div class="col">
+
+            <input type="text" id="applicationName" name="applicationName" class="form-control" formControlName="applicationName" value="applicationName">
+
+          </div>
+        </div>
+
         <div class="row mb-3">
           <div class="col-md-3 col-form-label pt-0">
             <span i18n>Display language</span>

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

@@ -69,6 +69,7 @@ export class SettingsComponent
   savedViewGroup = new FormGroup({})
 
   settingsForm = new FormGroup({
+    applicationName: new FormControl(null),
     bulkEditConfirmationDialogs: new FormControl(null),
     bulkEditApplyOnClose: new FormControl(null),
     documentListItemPerPage: new FormControl(null),
@@ -217,6 +218,9 @@ export class SettingsComponent
 
   private getCurrentSettings() {
     return {
+      applicationName: this.settings.get(
+        SETTINGS_KEYS.APPLICATION_NAME
+      ),
       bulkEditConfirmationDialogs: this.settings.get(
         SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
       ),
@@ -392,6 +396,10 @@ export class SettingsComponent
         this.store?.getValue()['updateCheckingEnabled'] &&
         this.settingsForm.value.updateCheckingEnabled) // update checking was turned on
 
+    this.settings.set(
+      SETTINGS_KEYS.APPLICATION_NAME,
+      this.settingsForm.value.applicationName
+    )
     this.settings.set(
       SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE,
       this.settingsForm.value.bulkEditApplyOnClose

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

@@ -12,7 +12,7 @@
         d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z"
         transform="translate(0 0)" />
     </svg>
-    <span class="ms-2" [class.visually-hidden]="slimSidebarEnabled" i18n="app title">Paperless-ngx</span>
+    <span class="ms-2" [class.visually-hidden]="slimSidebarEnabled" i18n="app title">{{applicationName}}</span>
   </a>
   <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1"
     *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">

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

@@ -136,6 +136,10 @@ export class AppFrameComponent
     return this.openDocumentsService.getOpenDocuments()
   }
 
+  get applicationName(): string {
+    return this.settingsService.get(SETTINGS_KEYS.APPLICATION_NAME)
+  }
+
   @HostListener('window:beforeunload')
   canDeactivate(): Observable<boolean> | boolean {
     return !this.openDocumentsService.hasDirty()

src-ui/src/app/data/ui-settings.ts

@@ -14,6 +14,7 @@ export interface UiSetting {
 
 export const SETTINGS_KEYS = {
   LANGUAGE: 'language',
+  APPLICATION_NAME: 'general-settings:application-name',
   // maintain old general-settings: for backwards compatibility
   BULK_EDIT_CONFIRMATION_DIALOGS:
     'general-settings:bulk-edit:confirmation-dialogs',
@@ -59,6 +60,11 @@ export const SETTINGS: UiSetting[] = [
     type: 'string',
     default: '',
   },
+  {
+    key: SETTINGS_KEYS.APPLICATION_NAME,
+    type: 'string',
+    default: 'Paperless-ngx',
+  },
   {
     key: SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS,
     type: 'boolean',

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

@@ -237,6 +237,7 @@ export class SettingsService {
 
   private settings: Object = {}
   currentUser: User
+  applicationName: string
 
   public settingsSaved: EventEmitter<any> = new EventEmitter()
 
@@ -274,6 +275,7 @@ export class SettingsService {
         // to update lang cookie
         if (this.settings['language']?.length)
           this.setLanguage(this.settings['language'])
+        this.applicationName = this.settings['general-settings:application-name']
         this.currentUser = uisettings.user
         this.permissionsService.initialize(
           uisettings.permissions,