fix(TitleBar): prevent icon ligature text overflow (#278)

src/components/TitleBar.vue

@@ -1,8 +1,22 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, type Component } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { getCurrentWindow } from '@tauri-apps/api/window'
+import { ElIcon } from 'element-plus'
+import {
+  Close,
+  Grid,
+  InfoFilled,
+  Key,
+  Lock,
+  Minus,
+  Monitor,
+  Promotion,
+  Setting,
+  SwitchButton,
+  VideoPlay,
+} from '@element-plus/icons-vue'
 import { commands } from '../types/bindings'
 
 const route = useRoute()
@@ -18,6 +32,24 @@ const titleIcon = computed(() => {
   return (route.meta.titleIcon as string | undefined) ?? 'coffee'
 })
 
+const TITLE_ICON_MAP: Record<string, Component> = {
+  coffee: Monitor,
+  encrypted: Lock,
+  info: InfoFilled,
+  login: SwitchButton,
+  manage_accounts: Key,
+  public: Promotion,
+  qr_code_2: Grid,
+  settings: Setting,
+  shield_lock: Lock,
+  sports_esports: VideoPlay,
+  verified_user: Lock,
+}
+
+const titleIconComponent = computed(() => {
+  return TITLE_ICON_MAP[titleIcon.value] ?? Monitor
+})
+
 function handleDrag(e: MouseEvent): void {
   if (e.buttons === 1) {
     e.preventDefault()
@@ -47,7 +79,9 @@ function handleClose(): void {
 <template>
   <div class="bf-titlebar" @mousedown="handleDrag">
     <div class="bf-titlebar__left">
-      <span class="material-symbols-outlined bf-titlebar__icon">{{ titleIcon }}</span>
+      <el-icon class="bf-titlebar__icon" aria-hidden="true">
+        <component :is="titleIconComponent" />
+      </el-icon>
       <span class="bf-titlebar__title">{{ titleText }}</span>
     </div>
     <div class="bf-titlebar__right">
@@ -61,7 +95,7 @@ function handleClose(): void {
         @mousedown.stop
         @click="handleMinimize"
       >
-        <span class="material-symbols-outlined">minimize</span>
+        <el-icon aria-hidden="true"><Minus /></el-icon>
       </button>
       <button
         type="button"
@@ -70,7 +104,7 @@ function handleClose(): void {
         @mousedown.stop
         @click="handleClose"
       >
-        <span class="material-symbols-outlined">close</span>
+        <el-icon aria-hidden="true"><Close /></el-icon>
       </button>
     </div>
   </div>
@@ -92,27 +126,35 @@ function handleClose(): void {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  min-width: 0;
   pointer-events: none;
 }
 .bf-titlebar__icon {
   font-size: 20px;
   color: var(--bf-primary-container, #ff8201);
+  flex: 0 0 20px;
 }
 .bf-titlebar__title {
+  min-width: 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--bf-on-surface, #221a11);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .bf-titlebar__right {
   display: flex;
   align-items: center;
   gap: 2px;
+  flex: 0 0 auto;
 }
 .bf-titlebar__actions {
   display: flex;
   align-items: center;
   gap: 2px;
   margin-right: 4px;
+  flex: 0 0 auto;
 }
 .bf-titlebar__btn {
   appearance: none;
@@ -129,7 +171,7 @@ function handleClose(): void {
   font: inherit;
   padding: 0;
 }
-.bf-titlebar__btn .material-symbols-outlined {
+.bf-titlebar__btn .el-icon {
   font-size: 18px;
 }
 .bf-titlebar__btn:hover {

src/pages/AccountList.vue

@@ -111,6 +111,7 @@ import {
   Plus,
   Refresh,
   Service,
+  Setting,
   SwitchButton,
   User,
   VideoPlay,
@@ -2114,7 +2115,7 @@ onBeforeUnmount(() => {
         data-test="account-list-settings"
         @click="handleOpenSettings"
       >
-        <span class="material-symbols-outlined">settings</span>
+        <el-icon aria-hidden="true"><Setting /></el-icon>
       </button>
       <button
         type="button"
@@ -2123,7 +2124,7 @@ onBeforeUnmount(() => {
         data-test="account-list-about"
         @click="handleOpenAbout"
       >
-        <span class="material-symbols-outlined">info</span>
+        <el-icon aria-hidden="true"><InfoFilled /></el-icon>
       </button>
     </TitleBar>
     <div class="account-list__scroll">
@@ -2603,7 +2604,7 @@ onBeforeUnmount(() => {
   transition: background 150ms ease;
   padding: 0;
 }
-.account-list__titlebar-btn .material-symbols-outlined {
+.account-list__titlebar-btn .el-icon {
   font-size: 18px;
 }
 .account-list__titlebar-btn:hover {
@@ -2722,6 +2723,7 @@ onBeforeUnmount(() => {
   cursor: pointer;
   min-width: 0;
   flex: 1;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 0.0625rem;
@@ -2734,9 +2736,13 @@ onBeforeUnmount(() => {
 }
 
 .account-list__game-name {
+  max-width: 100%;
   font-size: 1.0625rem;
   font-weight: 700;
   line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .account-list__game-status {
@@ -2774,6 +2780,7 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   gap: 0.25rem;
+  min-width: 0;
   white-space: nowrap;
 }
 
@@ -2792,12 +2799,15 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
 .account-list__balance {
   display: flex;
   align-items: center;
   gap: 0.375rem;
+  flex: 1 1 15rem;
+  min-width: 0;
 }
 
 .account-list__balance-label {
@@ -2850,9 +2860,10 @@ onBeforeUnmount(() => {
 
 .account-list__quick-actions {
   display: grid;
-  grid-template-columns: repeat(2, auto);
+  grid-template-columns: repeat(2, minmax(0, auto));
   gap: 0.25rem;
   flex-shrink: 0;
+  margin-left: auto;
 }
 
 .account-list__quick-btn {
@@ -2871,6 +2882,7 @@ onBeforeUnmount(() => {
     color var(--bf-motion-fast),
     background var(--bf-motion-fast);
   white-space: nowrap;
+  min-width: 0;
 }
 
 .account-list__quick-btn:hover {

src/pages/LoginPage.vue

@@ -10,6 +10,8 @@
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
+import { ElIcon } from 'element-plus'
+import { InfoFilled, Promotion, Setting } from '@element-plus/icons-vue'
 import TitleBar from '../components/TitleBar.vue'
 import { useConfigStore } from '../stores/config'
 import type { LoginRegion } from '../types/bindings'
@@ -62,14 +64,14 @@ function handleOpenAbout(): void {
         :title="`Region: ${currentRegion}`"
         @click="toggleRegion"
       >
-        <span class="material-symbols-outlined login-shell__region-icon">public</span>
+        <el-icon class="login-shell__region-icon" aria-hidden="true"><Promotion /></el-icon>
         <span class="login-shell__region-label">{{ currentRegion }}</span>
       </button>
       <button type="button" class="login-shell__action-btn" @click="handleOpenSettings">
-        <span class="material-symbols-outlined">settings</span>
+        <el-icon aria-hidden="true"><Setting /></el-icon>
       </button>
       <button type="button" class="login-shell__action-btn" @click="handleOpenAbout">
-        <span class="material-symbols-outlined">info</span>
+        <el-icon aria-hidden="true"><InfoFilled /></el-icon>
       </button>
     </TitleBar>
     <div class="login-shell__body">
@@ -119,7 +121,7 @@ function handleOpenAbout(): void {
   transition: background 150ms ease;
   padding: 0;
 }
-.login-shell__action-btn .material-symbols-outlined {
+.login-shell__action-btn .el-icon {
   font-size: 18px;
 }
 .login-shell__action-btn:hover {

tests/unit/pages/AccountList.EnterHotkey.spec.ts

@@ -137,12 +137,19 @@ vi.mock('@element-plus/icons-vue', () => {
     EditPen: stub('EditPenStub'),
     InfoFilled: stub('InfoFilledStub'),
     Key: stub('KeyStub'),
+    Close: stub('CloseStub'),
+    Grid: stub('GridStub'),
+    Lock: stub('LockStub'),
     Message: stub('MessageStub'),
+    Minus: stub('MinusStub'),
+    Monitor: stub('MonitorStub'),
     MoreFilled: stub('MoreFilledStub'),
     Operation: stub('OperationStub'),
     Plus: stub('PlusStub'),
+    Promotion: stub('PromotionStub'),
     Refresh: stub('RefreshStub'),
     Service: stub('ServiceStub'),
+    Setting: stub('SettingStub'),
     Iphone: stub('IphoneStub'),
     SwitchButton: stub('SwitchButtonStub'),
     Wallet: stub('WalletStub'),

tests/unit/pages/AccountList.spec.ts

@@ -188,12 +188,19 @@ vi.mock('@element-plus/icons-vue', () => {
     EditPen: stub('EditPenStub'),
     InfoFilled: stub('InfoFilledStub'),
     Key: stub('KeyStub'),
+    Close: stub('CloseStub'),
+    Grid: stub('GridStub'),
+    Lock: stub('LockStub'),
     Message: stub('MessageStub'),
+    Minus: stub('MinusStub'),
+    Monitor: stub('MonitorStub'),
     MoreFilled: stub('MoreFilledStub'),
     Operation: stub('OperationStub'),
     Plus: stub('PlusStub'),
+    Promotion: stub('PromotionStub'),
     Refresh: stub('RefreshStub'),
     Service: stub('ServiceStub'),
+    Setting: stub('SettingStub'),
     Iphone: stub('IphoneStub'),
     SwitchButton: stub('SwitchButtonStub'),
     Wallet: stub('WalletStub'),

tests/unit/pages/LoginPage.spec.ts

@@ -59,6 +59,17 @@ describe('LoginPage shell', () => {
     expect(wrapper.find('.bf-titlebar').exists()).toBe(true)
   })
 
+  it('does not expose raw Material Symbols ligature names in the title bar', async () => {
+    const ctx = mountLoginPage()
+    const wrapper = await ctx.mount()
+
+    const titleBarText = wrapper.get('.bf-titlebar').text()
+    expect(titleBarText).not.toContain('settings')
+    expect(titleBarText).not.toContain('info')
+    expect(titleBarText).not.toContain('minimize')
+    expect(titleBarText).not.toContain('close')
+  })
+
   it('exposes a <RouterView /> slot for child routes', async () => {
     const ctx = mountLoginPage('/login/_test')
     const wrapper = await ctx.mount()