Feature: app branding (#5357)

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

@@ -4,15 +4,25 @@
     (click)="isMenuCollapsed = !isMenuCollapsed">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <a class="navbar-brand col-auto col-md-3 col-lg-2 me-0 px-3 py-3 order-sm-0"
-    [ngClass]="slimSidebarEnabled ? 'slim' : 'col-auto col-md-3 col-lg-2'" routerLink="/dashboard"
+  <a class="navbar-brand d-flex col-auto col-md-3 col-lg-2 me-0 px-3 py-3 order-sm-0"
+    [ngClass]="{ 'slim': slimSidebarEnabled, 'd-flex col-auto col-md-3 col-lg-2' : !slimSidebarEnabled, 'py-3' : !customAppTitle?.length || slimSidebarEnabled, 'py-2': customAppTitle?.length }"
+    routerLink="/dashboard"
     tourAnchor="tour.intro">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 238.91" width="1em" class="me-2" fill="currentColor">
       <path
         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>
+    <div class="ms-2 d-inline-block" [class.visually-hidden]="slimSidebarEnabled">
+      @if (customAppTitle?.length) {
+        <div class="d-flex flex-column align-items-start">
+          <span class="title">{{customAppTitle}}</span>
+          <span class="byline text-uppercase font-monospace" i18n>by Paperless-ngx</span>
+        </div>
+      } @else {
+        Paperless-ngx
+      }
+    </div>
   </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.scss

@@ -217,9 +217,16 @@ main {
  */
 
 .navbar-brand {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
   font-size: 1rem;
+
+  .flex-column {
+    padding: 0.15rem 0;
+  }
+
+  .byline {
+    font-size: 0.5rem;
+    letter-spacing: 0.1rem;
+  }
 }
 
 @media screen and (min-width: 768px) {

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

@@ -102,6 +102,10 @@ export class AppFrameComponent
     }, 200) // slightly longer than css animation for slim sidebar
   }
 
+  get customAppTitle(): string {
+    return this.settingsService.get(SETTINGS_KEYS.APP_TITLE)
+  }
+
   get slimSidebarEnabled(): boolean {
     return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
   }