From ac414e90c9d009d83bebed2aada242b121933e26 Mon Sep 17 00:00:00 2001
From: margueellohenriquez <maarguello@arsys.es>
Date: Wed, 12 Aug 2026 15:55:21 +0200
Subject: [PATCH] feat(header): allow the product name to be configured
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The product name in the global header is currently a hardcoded SVG with the
letters as vector paths, so a Nextcloud instance cannot name itself without
forking this app or reaching into its DOM from outside.

This adds an optional `productName` prop to HeaderLogo, provided through the
existing `IInitialState` pipeline from a new `ionos_product_name` system config
key — the same pattern already used for `ionos_homepage`,
`ionos_help_target_link` and `ionos_peer_products`.

Fully backwards compatible: when the key is unset or empty the wordmark SVG
renders exactly as before, so existing deployments see no change.

Verified: `npm run build` succeeds, `npm run lint` is clean, and
`npm run stylelint` reports the same 3 pre-existing warnings as on the base
branch (UserMenu.vue:190, styles.scss:30/32) with none added.

Co-authored-by: printminion-co <145785698+printminion-co@users.noreply.github.com>
---
 lib/Listener/BeforeTemplateRenderedListener.php |  2 ++
 src/components/HeaderLogo.vue                   | 17 ++++++++++++++++-
 src/main.ts                                     |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/lib/Listener/BeforeTemplateRenderedListener.php b/lib/Listener/BeforeTemplateRenderedListener.php
index 8d0722f..853f132 100644
--- a/lib/Listener/BeforeTemplateRenderedListener.php
+++ b/lib/Listener/BeforeTemplateRenderedListener.php
@@ -34,6 +34,8 @@ public function handle(Event $event): void {
 		$this->initialState->provideInitialState('isLoggedIn', $isLoggedIn);
 		$this->initialState->provideInitialState('homeUrl',
 			$this->urlGenerator->linkTo('', 'index.php'));
+		$this->initialState->provideInitialState('productName',
+			$this->config->getSystemValue('ionos_product_name', ''));
 
 		if ($isLoggedIn) {
 			$this->initialState->provideInitialState('displayName',
diff --git a/src/components/HeaderLogo.vue b/src/components/HeaderLogo.vue
index a4663c7..b0f5783 100644
--- a/src/components/HeaderLogo.vue
+++ b/src/components/HeaderLogo.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 defineProps<{
 	homeUrl: string
+	/**
+	 * Product name to render instead of the baked-in wordmark. When empty or
+	 * absent, the wordmark SVG is used, so existing deployments are unaffected.
+	 */
+	productName?: string
 }>()
 </script>
 
@@ -21,8 +26,10 @@ defineProps<{
 			<path d="M19.0796 25.993C17.3469 25.9921 15.6855 25.3033 14.4603 24.0781C13.2351 22.8529 12.5463 21.1915 12.5454 19.4588V6.5342C12.5454 4.80122 13.2338 3.13922 14.4592 1.91382C15.6846 0.688422 17.3466 0 19.0796 0C20.8126 0 22.4746 0.688422 23.7 1.91382C24.9254 3.13922 25.6138 4.80122 25.6138 6.5342V19.4588C25.6129 21.1915 24.9242 22.8529 23.699 24.0781C22.4738 25.3033 20.8123 25.9921 19.0796 25.993ZM19.0796 3.94577C18.7396 3.94531 18.4028 4.01195 18.0885 4.14186C17.7743 4.27178 17.4887 4.46242 17.2483 4.70287C17.0078 4.94332 16.8172 5.22885 16.6873 5.5431C16.5574 5.85735 16.4907 6.19415 16.4912 6.5342V19.4588C16.4912 20.1453 16.7639 20.8037 17.2493 21.2891C17.7347 21.7745 18.3931 22.0472 19.0796 22.0472C19.7661 22.0472 20.4245 21.7745 20.9099 21.2891C21.3953 20.8037 21.668 20.1453 21.668 19.4588V6.5342C21.659 5.85053 21.3833 5.19741 20.8999 4.71394C20.4164 4.23047 19.7633 3.95485 19.0796 3.94577Z" />
 			<path d="M2.14279 25.9827C1.85889 25.9841 1.57756 25.9288 1.3153 25.8201C1.05305 25.7114 0.815137 25.5514 0.615534 25.3495C0.41593 25.1476 0.25865 24.9079 0.152917 24.6444C0.0471839 24.3809 -0.00487247 24.099 -0.000199355 23.8151V2.11513C0.0099449 1.55105 0.242119 1.01373 0.645944 0.619752C1.04977 0.225777 1.59266 0.00693882 2.15682 0.0107235C2.62925 0.00381055 3.09025 0.156078 3.46562 0.443013C3.84099 0.729947 4.10888 1.13485 4.22616 1.59254C4.24062 1.64213 4.25233 1.69248 4.26123 1.74336V1.83805C4.28131 1.95386 4.2907 2.07126 4.28929 2.18879C4.28929 2.18879 4.28929 23.5836 4.28929 23.8292C4.29115 24.1119 4.23694 24.3922 4.12982 24.6538C4.02269 24.9155 3.86476 25.1533 3.66516 25.3536C3.46556 25.5538 3.22825 25.7125 2.96695 25.8205C2.70564 25.9285 2.42553 25.9836 2.14279 25.9827Z" />
 		</svg>
-		<!-- Product wordmark -->
+		<!-- Product wordmark: the SVG is the default; an explicit product name wins -->
+		<span v-if="productName" class="header-logo__product-name">{{ productName }}</span>
 		<svg
+			v-else
 			class="header-logo__product"
 			width="127"
 			height="17"
@@ -54,6 +61,14 @@ defineProps<{
 	flex-shrink: 0;
 	padding: 0 24px;
 
+	&__product-name {
+		display: block;
+		font-size: 1.25rem;
+		font-weight: 600;
+		white-space: nowrap;
+		color: light-dark(var(--ion-color-primary), var(--ion-color-cool-grey-c1));
+	}
+
 	&__ionos,
 	&__product {
 		display: block;
diff --git a/src/main.ts b/src/main.ts
index 328bf34..f913686 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -50,6 +50,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 	makeApp(HeaderLogo, {
 		homeUrl: loadState('simplenavigation', 'homeUrl', '/'),
+		productName: loadState('simplenavigation', 'productName', ''),
 	}).mount('#simplenavigation-logo')
 
 	// Mount webmail link + our UserMenu only for authenticated users