From 39ac149430159f7a41bc2bcd9c8411ed857d5df9 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 29 Jan 2026 17:28:58 +0100
Subject: [PATCH] Enhance character name display in DashboardWidget: Refactor
 character name construction logic in FalukantService to include title
 handling and create a new computed property for display name in
 DashboardWidget. Update styles for gender display and ensure proper
 localization for age representation.

---
 backend/services/falukantService.js         |  7 +++++--
 frontend/src/components/DashboardWidget.vue | 20 +++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/backend/services/falukantService.js b/backend/services/falukantService.js
index c512545..a0a88f3 100644
--- a/backend/services/falukantService.js
+++ b/backend/services/falukantService.js
@@ -4776,8 +4776,9 @@ ORDER BY r.id`,
         const character = falukantUser.character;
         const firstName = character.definedFirstName?.name ?? '';
         const lastName = character.definedLastName?.name ?? '';
-        const title = character.nobleTitle?.labelTr ?? '';
-        const characterName = [title, firstName, lastName].filter(Boolean).join(' ') || '—';
+        const titleLabelTr = character.nobleTitle?.labelTr ?? '';
+        const nameWithoutTitle = [firstName, lastName].filter(Boolean).join(' ') || '—';
+        const characterName = titleLabelTr ? [titleLabelTr, firstName, lastName].filter(Boolean).join(' ') : nameWithoutTitle;
         const age = character.birthdate ? calcAge(character.birthdate) : null;
 
         const [unreadNotificationsCount, childrenCount] = await Promise.all([
@@ -4794,6 +4795,8 @@ ORDER BY r.id`,
 
         return {
             characterName,
+            titleLabelTr: titleLabelTr || null,
+            nameWithoutTitle,
             gender: character.gender ?? null,
             age,
             money: Number(falukantUser.money ?? 0),
diff --git a/frontend/src/components/DashboardWidget.vue b/frontend/src/components/DashboardWidget.vue
index d0d3a97..76754b4 100644
--- a/frontend/src/components/DashboardWidget.vue
+++ b/frontend/src/components/DashboardWidget.vue
@@ -25,7 +25,7 @@
           <template v-else-if="falukantData">
             <dl class="dashboard-widget__falukant">
               <dt>{{ $t('falukant.overview.metadata.name') }}</dt>
-              <dd>{{ falukantData.characterName }}</dd>
+              <dd>{{ falukantDisplayName }}</dd>
               <dt>{{ $t('falukant.create.gender') }}</dt>
               <dd class="falukant-gender">{{ falukantGenderLabel }}</dd>
               <dt>{{ $t('falukant.overview.metadata.age') }}</dt>
@@ -94,6 +94,20 @@ export default {
       if (d && typeof d === 'object' && 'characterName' in d && 'money' in d) return d;
       return null;
     },
+    /** Anzeigename: Adelstitel aus falukant.titles.{gender}.{titleLabelTr} + Name. */
+    falukantDisplayName() {
+      const d = this.falukantData;
+      if (!d) return '—';
+      const titleKey = d.titleLabelTr;
+      const gender = d.gender;
+      const nameWithoutTitle = d.nameWithoutTitle ?? d.characterName;
+      if (titleKey && gender) {
+        const key = `falukant.titles.${gender}.${titleKey}`;
+        const translatedTitle = this.$t(key);
+        if (translatedTitle !== key) return `${translatedTitle} ${nameWithoutTitle}`.trim();
+      }
+      return d.characterName || nameWithoutTitle || '—';
+    },
     falukantGenderLabel() {
       const g = this.falukantData?.gender;
       if (g == null || g === '') return '—';
@@ -105,7 +119,7 @@ export default {
       const days = this.falukantData?.age;
       if (days == null) return '—';
       const years = Math.floor(Number(days) / 365);
-      return `${years} ${this.$t('admin.createNPCs.years')}`;
+      return `${years} ${this.$t('admin.createNPC.years')}`;
     },
     dataList() {
       if (!Array.isArray(this.data) || this.data.length === 0) return [];
@@ -322,7 +336,7 @@ export default {
 }
 
 .dashboard-widget__falukant dd.falukant-gender {
-  color: #0d6efd;
+  color: var(--color-text-secondary);
   font-weight: 600;
 }