From ca7c31878ec7ca5fa551eee0b546c20ea7a81256 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 25 Aug 2026 21:24:54 -0700
Subject: [PATCH] DRY

---
 .../app-frame/app-frame.component.html           |  8 ++------
 .../components/app-frame/app-frame.component.ts  |  2 ++
 .../logo/brand-mark/brand-mark.component.html    |  1 +
 .../logo/brand-mark/brand-mark.component.ts      | 16 ++++++++++++++++
 .../welcome-widget/welcome-widget.component.html |  8 ++------
 .../welcome-widget/welcome-widget.component.ts   |  3 ++-
 6 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 src-ui/src/app/components/common/logo/brand-mark/brand-mark.component.html
 create mode 100644 src-ui/src/app/components/common/logo/brand-mark/brand-mark.component.ts

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index ffc3381ad..8cda454e8 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -10,16 +10,12 @@
     tourAnchor="tour.intro">
     @if (!hasCustomBranding) {
       <pngx-logo extra_classes="navbar-official-logo px-1" height="2.4rem"></pngx-logo>
-      <svg class="brand-mark brand-mark-slim d-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1.5em" height="1.5em" fill="currentColor">
-        <path d="M341,949.1c-6.9-20.3-20.7-61.2-21.9-61-199.6-88.9-182.5-229.8-134.3-347.5,30,137.2,268.8,148.9,146.2,336-.9,2.2,10,27.8,19.5,51.3,22.7-51.9,58.6-115.5,55.8-120.8C178,398.7,724.9,299,807.1,18.5c83,251.5,53.1,659.8-377.4,814.9-2,1.4-63.5,148.6-66.9,150.2-.2-2.1-33.2,2.9-30.1-8.7,1.6-7,4.8-16.2,8.2-25.6h0v-.2h.1ZM323.1,846.2c48.3-71.9-12.7-120.8-56.9-152.2,81.2,107.4,66.4,120.8,56.9,152.2h0Z"/>
-      </svg>
+      <svg pngx-brand-mark class="brand-mark brand-mark-slim d-none" width="1.5em" height="1.5em"></svg>
     } @else {
       @if (customAppLogo) {
         <img class="brand-logo" [src]="customAppLogo" alt="" />
       } @else {
-        <svg class="brand-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1.5em" height="1.5em" fill="currentColor">
-          <path d="M341,949.1c-6.9-20.3-20.7-61.2-21.9-61-199.6-88.9-182.5-229.8-134.3-347.5,30,137.2,268.8,148.9,146.2,336-.9,2.2,10,27.8,19.5,51.3,22.7-51.9,58.6-115.5,55.8-120.8C178,398.7,724.9,299,807.1,18.5c83,251.5,53.1,659.8-377.4,814.9-2,1.4-63.5,148.6-66.9,150.2-.2-2.1-33.2,2.9-30.1-8.7,1.6-7,4.8-16.2,8.2-25.6h0v-.2h.1ZM323.1,846.2c48.3-71.9-12.7-120.8-56.9-152.2,81.2,107.4,66.4,120.8,56.9,152.2h0Z"/>
-        </svg>
+        <svg pngx-brand-mark class="brand-mark" width="1.5em" height="1.5em"></svg>
       }
       <div class="brand-copy ms-2 text-truncate" [class.d-md-none]="slimSidebarEnabled">
         <span class="brand-title text-truncate">{{ appTitle }}</span>
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts
index c5fc93e61..2548c217b 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -45,6 +45,7 @@ import { TasksService } from 'src/app/services/tasks.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
 import { ChatComponent } from '../chat/chat/chat.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 { DocumentDetailComponent } from '../document-detail/document-detail.component'
@@ -61,6 +62,7 @@ const SCROLL_THRESHOLD = 16
   imports: [
     GlobalSearchComponent,
     LogoComponent,
+    BrandMarkComponent,
     DocumentTitlePipe,
     IfPermissionsDirective,
     ToastsDropdownComponent,
diff --git a/src-ui/src/app/components/common/logo/brand-mark/brand-mark.component.html b/src-ui/src/app/components/common/logo/brand-mark/brand-mark.component.html
new file mode 100644
index 000000000..35540bef2
--- /dev/null
+++ b/src-ui/src/app/components/common/logo/brand-mark/brand-mark.component.html
@@ -0,0 +1 @@
+<svg:path d="M341,949.1c-6.9-20.3-20.7-61.2-21.9-61-199.6-88.9-182.5-229.8-134.3-347.5,30,137.2,268.8,148.9,146.2,336-.9,2.2,10,27.8,19.5,51.3,22.7-51.9,58.6-115.5,55.8-120.8C178,398.7,724.9,299,807.1,18.5c83,251.5,53.1,659.8-377.4,814.9-2,1.4-63.5,148.6-66.9,150.2-.2-2.1-33.2,2.9-30.1-8.7,1.6-7,4.8-16.2,8.2-25.6h0v-.2h.1ZM323.1,846.2c48.3-71.9-12.7-120.8-56.9-152.2,81.2,107.4,66.4,120.8,56.9,152.2h0Z"/>
diff --git a/src-ui/src/app/components/common/logo/brand-mark/brand-mark.component.ts b/src-ui/src/app/components/common/logo/brand-mark/brand-mark.component.ts
new file mode 100644
index 000000000..347582b61
--- /dev/null
+++ b/src-ui/src/app/components/common/logo/brand-mark/brand-mark.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core'
+
+/**
+ * The paperless-ngx leaf mark, applied as an attribute on an <svg>
+ */
+@Component({
+  selector: 'svg[pngx-brand-mark]',
+  templateUrl: './brand-mark.component.html',
+  host: {
+    '[attr.xmlns]': "'http://www.w3.org/2000/svg'",
+    '[attr.viewBox]': "'0 0 1000 1000'",
+    '[attr.fill]': "'currentColor'",
+    '[attr.aria-hidden]': "'true'",
+  },
+})
+export class BrandMarkComponent {}
diff --git a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html
index 56a2beff8..b8eabc4d9 100644
--- a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html
@@ -1,11 +1,7 @@
 <ngb-alert class="welcome-widget bg-light shadow-sm pe-3 position-relative overflow-hidden" type="primary" [dismissible]="true" (closed)="dismiss.emit(true)">
-  <svg class="welcome-watermark d-none d-md-block position-absolute top-50 translate-middle-y text-primary pe-none" width="26rem" height="26rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="currentColor" aria-hidden="true">
-    <path d="M341,949.1c-6.9-20.3-20.7-61.2-21.9-61-199.6-88.9-182.5-229.8-134.3-347.5,30,137.2,268.8,148.9,146.2,336-.9,2.2,10,27.8,19.5,51.3,22.7-51.9,58.6-115.5,55.8-120.8C178,398.7,724.9,299,807.1,18.5c83,251.5,53.1,659.8-377.4,814.9-2,1.4-63.5,148.6-66.9,150.2-.2-2.1-33.2,2.9-30.1-8.7,1.6-7,4.8-16.2,8.2-25.6h0v-.2h.1ZM323.1,846.2c48.3-71.9-12.7-120.8-56.9-152.2,81.2,107.4,66.4,120.8,56.9,152.2h0Z"/>
-  </svg>
+  <svg pngx-brand-mark class="welcome-watermark d-none d-md-block position-absolute top-50 translate-middle-y text-primary pe-none" width="26rem" height="26rem"></svg>
   <div class="d-flex align-items-start gap-3 gap-md-4 position-relative">
-    <svg class="d-none d-sm-block flex-shrink-0 text-primary" width="3rem" height="3rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="currentColor" aria-hidden="true">
-      <path d="M341,949.1c-6.9-20.3-20.7-61.2-21.9-61-199.6-88.9-182.5-229.8-134.3-347.5,30,137.2,268.8,148.9,146.2,336-.9,2.2,10,27.8,19.5,51.3,22.7-51.9,58.6-115.5,55.8-120.8C178,398.7,724.9,299,807.1,18.5c83,251.5,53.1,659.8-377.4,814.9-2,1.4-63.5,148.6-66.9,150.2-.2-2.1-33.2,2.9-30.1-8.7,1.6-7,4.8-16.2,8.2-25.6h0v-.2h.1ZM323.1,846.2c48.3-71.9-12.7-120.8-56.9-152.2,81.2,107.4,66.4,120.8,56.9,152.2h0Z"/>
-    </svg>
+    <svg pngx-brand-mark class="d-none d-sm-block flex-shrink-0 text-primary" width="3rem" height="3rem"></svg>
     <div class="flex-grow-1">
       <h4 class="alert-heading text-primary fw-semibold"><ng-container i18n>Paperless-ngx is running!</ng-container> 🎉</h4>
       <div class="welcome-copy text-dark">
diff --git a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts
index 7bcc160f3..834e729c7 100644
--- a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts
@@ -1,12 +1,13 @@
 import { Component, EventEmitter, Output, inject } from '@angular/core'
 import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { BrandMarkComponent } from '../../../common/logo/brand-mark/brand-mark.component'
 
 @Component({
   selector: 'pngx-welcome-widget',
   templateUrl: './welcome-widget.component.html',
   styleUrls: ['./welcome-widget.component.scss'],
-  imports: [NgbAlertModule],
+  imports: [NgbAlertModule, BrandMarkComponent],
 })
 export class WelcomeWidgetComponent {
   readonly tourService = inject(TourService)