feat(StatusBar, falukantService): enhance character information display and UI structure

- Updated falukantService to include predefined first and last names in character data retrieval.
- Refactored StatusBar component layout to improve organization and visual clarity, introducing sections for identity and stats.
- Enhanced character name handling to prioritize display names, ensuring a more dynamic user experience.

backend/services/falukantService.js

@@ -995,6 +995,10 @@ class FalukantService extends BaseService {
                     model: FalukantCharacter,
                     as: 'character',
                     attributes: ['id', 'birthdate', 'health', 'reputation', 'titleOfNobility'],
+                    include: [
+                        { model: FalukantPredefineFirstname, as: 'definedFirstName', attributes: ['name'] },
+                        { model: FalukantPredefineLastname, as: 'definedLastName', attributes: ['name'] },
+                    ],
                 },
             ],
             attributes: ['id', 'money']

frontend/src/components/falukant/StatusBar.vue

@@ -1,44 +1,54 @@
 <template>
     <div class="statusbar">
-        <div class="status-item messages" @click="openMessages" :title="$t('falukant.messages.tooltip')">
+        <div class="statusbar-main">
-            <span class="badge" v-if="unreadCount > 0">{{ unreadCount }}</span>
+            <div class="statusbar-section statusbar-section--identity">
-            <img src="/images/icons/falukant/messages24.png" class="menu-icon" />
+                <div class="status-item messages" @click="openMessages" :title="$t('falukant.messages.tooltip')">
-        </div>
+                    <span class="badge" v-if="unreadCount > 0">{{ unreadCount }}</span>
-        <div v-if="characterName" class="status-identity" :title="characterName">
+                    <img src="/images/icons/falukant/messages24.png" class="menu-icon" />
-            <span class="status-identity__label">{{ $t('falukant.overview.metadata.name') }}</span>
+                </div>
-            <strong class="status-identity__name">{{ characterName }}</strong>
+                <div v-if="characterName" class="status-identity" :title="characterName">
-        </div>
+                    <span class="status-identity__label">{{ $t('falukant.overview.metadata.name') }}</span>
-        <template v-for="item in statusItems" :key="item.key">
+                    <strong class="status-identity__name">{{ characterName }}</strong>
-            <div class="status-item" v-if="item.value !== null && item.image == null">
+                </div>
-                <span class="status-icon-wrapper">
-                    <template v-if="item.iconImage">
-                        <img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" :title="String(item.value)" />
-                    </template>
-                    <template v-else>
-                        <span class="status-icon-symbol" :title="String(item.value)">{{ item.icon }}</span>
-                    </template>
-                </span>
-                <span class="status-label" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.value }}</span>
             </div>
-            <div class="status-item" v-else-if="item.image !== null">
+
-                <span class="status-icon-wrapper">
+            <div class="statusbar-section statusbar-section--stats">
-                    <span class="status-icon-symbol" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.icon }}</span>
+                <template v-for="item in statusItems" :key="item.key">
-                </span>
+                    <div class="status-item" v-if="item.value !== null && item.image == null">
-                <img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" :title="$t(`falukant.statusbar.${item.key}`)" />
+                        <span class="status-icon-wrapper">
+                            <template v-if="item.iconImage">
+                                <img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" :title="String(item.value)" />
+                            </template>
+                            <template v-else>
+                                <span class="status-icon-symbol" :title="String(item.value)">{{ item.icon }}</span>
+                            </template>
+                        </span>
+                        <span class="status-label" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.value }}</span>
+                    </div>
+                    <div class="status-item" v-else-if="item.image !== null">
+                        <span class="status-icon-wrapper">
+                            <span class="status-icon-symbol" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.icon }}</span>
+                        </span>
+                        <img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" :title="$t(`falukant.statusbar.${item.key}`)" />
+                    </div>
+                </template>
+            </div>
+
+            <div
+                v-if="statusItems.length > 0 && menu.falukant && menu.falukant.children"
+                class="statusbar-section statusbar-section--nav"
+            >
+                <div class="quick-access">
+                    <template v-for="(menuItem, key) in menu.falukant.children" :key="menuItem.id" >
+                        <img
+                            :src="'/images/icons/falukant/shortmap/' + key + '.png'"
+                            class="menu-icon"
+                            @click="openPage(menuItem)"
+                            :title="$t(`navigation.m-falukant.${key}`)"
+                        />
+                    </template>
+                </div>
             </div>
-        </template>
-        <div
-            v-if="statusItems.length > 0 && menu.falukant && menu.falukant.children"
-            class="quick-access"
-        >
-            <template v-for="(menuItem, key) in menu.falukant.children" :key="menuItem.id" >
-                <img
-                    :src="'/images/icons/falukant/shortmap/' + key + '.png'"
-                    class="menu-icon"
-                    @click="openPage(menuItem)"
-                    :title="$t(`navigation.m-falukant.${key}`)"
-                />
-            </template>
         </div>
         <div v-if="debtorsPrison.active" class="statusbar-warning" :class="{ 'is-prison': debtorsPrison.inDebtorsPrison }">
             <strong>
@@ -160,9 +170,10 @@ export default {
                 const response = await apiClient.get("/api/falukant/info");
                 const { money, character, events } = response.data;
                 const { age, health } = character;
-                const firstName = character?.definedFirstName?.name || '';
+                const firstName = character?.definedFirstName?.name || character?.firstName || '';
-                const lastName = character?.definedLastName?.name || '';
+                const lastName = character?.definedLastName?.name || character?.lastName || '';
-                this.characterName = [firstName, lastName].filter(Boolean).join(' ');
+                const explicitName = character?.displayName || character?.name || '';
+                this.characterName = explicitName || [firstName, lastName].filter(Boolean).join(' ');
                 const relationship = response.data.character.relationshipsAsCharacter1[0]?.relationshipType?.tr
                     || response.data.character.relationshipsAsCharacter2[0]?.relationshipType?.tr
                     || null;
@@ -306,10 +317,6 @@ export default {
 
 <style scoped>
 .statusbar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
     background:
         linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(247, 238, 224, 0.98) 100%);
     border: 1px solid var(--color-border);
@@ -317,7 +324,6 @@ export default {
     box-sizing: border-box;
     width: 100%;
     max-width: 100%;
-    gap: 1.2em;
     padding: 0.55rem 0.9rem;
     margin: 0 0 1.5em 0;
     position: sticky;
@@ -326,8 +332,41 @@ export default {
     box-shadow: var(--shadow-soft);
 }
 
+.statusbar-main {
+    display: grid;
+    grid-template-columns: minmax(15rem, 1.1fr) minmax(0, 1.5fr) minmax(14rem, 1fr);
+    align-items: center;
+    gap: 0.85rem 1rem;
+    width: 100%;
+}
+
+.statusbar-section {
+    min-width: 0;
+}
+
+.statusbar-section--identity {
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+    min-width: 0;
+}
+
+.statusbar-section--stats {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.55rem;
+    min-width: 0;
+}
+
+.statusbar-section--nav {
+    display: flex;
+    justify-content: flex-end;
+    min-width: 0;
+}
+
 .statusbar-warning {
-    flex: 1 1 100%;
     display: flex;
     align-items: center;
     gap: 10px;
@@ -347,7 +386,6 @@ export default {
 
 .status-item {
     text-align: center;
-    cursor: pointer;
     display: inline-flex;
     align-items: center;
     min-height: 34px;
@@ -357,17 +395,24 @@ export default {
     border: 1px solid rgba(93, 64, 55, 0.08);
 }
 
+.status-item.messages {
+    cursor: pointer;
+    flex: 0 0 auto;
+}
+
 .status-identity {
-    display: inline-flex;
+    display: flex;
-    align-items: baseline;
+    flex-direction: column;
-    gap: 0.5rem;
+    justify-content: center;
-    min-height: 34px;
+    gap: 0.15rem;
-    padding: 0.2rem 0.95rem;
+    min-height: 50px;
-    border-radius: 999px;
+    padding: 0.45rem 1rem;
+    border-radius: var(--radius-md);
     background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(248, 241, 231, 0.98) 100%);
     border: 1px solid rgba(126, 71, 27, 0.16);
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
-    max-width: min(100%, 26rem);
+    min-width: 0;
+    flex: 1 1 auto;
 }
 
 .status-identity__label {
@@ -379,7 +424,8 @@ export default {
 }
 
 .status-identity__name {
-    font-size: 0.98rem;
+    font-size: 1rem;
+    line-height: 1.2;
     color: #5f3617;
     white-space: nowrap;
     overflow: hidden;
@@ -387,11 +433,12 @@ export default {
 }
 
 .quick-access {
-    display: inline-flex;
+    display: flex;
     flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-end;
-    gap: 0.2rem;
+    gap: 0.15rem;
+    min-width: 0;
 }
 
 .status-icon-wrapper {
@@ -443,4 +490,22 @@ export default {
     vertical-align: middle;
     margin-right: 4px;
 }
+
+@media (max-width: 1180px) {
+    .statusbar-main {
+        grid-template-columns: 1fr;
+    }
+
+    .statusbar-section--stats {
+        justify-content: flex-start;
+    }
+
+    .statusbar-section--nav {
+        justify-content: flex-start;
+    }
+
+    .quick-access {
+        justify-content: flex-start;
+    }
+}
 </style>