From 28eb27a718b97e50ea2fbca35a0d5cb7504a8a26 Mon Sep 17 00:00:00 2001
From: shake <shake.chen@gmail.com>
Date: Mon, 22 Jun 2026 16:49:57 +0800
Subject: [PATCH] style: tighten header and locale selector

---
 src/App.vue                                   |  7 ++++-
 src/components/NavbarButtons.vue              | 23 ++++-----------
 src/layouts/base.layout.vue                   |  8 ++---
 .../i18n/components/locale-selector.vue       | 29 +++++--------------
 src/plugins/i18n.plugin.ts                    |  2 +-
 5 files changed, 23 insertions(+), 46 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8e65335d..03cb4fc1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,10 +13,15 @@ const theme = computed(() => (styleStore.isDarkTheme ? darkTheme : null));
 const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrides : lightThemeOverrides));
 
 const { locale } = useI18n();
+const localeStorage = useStorage('locale', 'zh');
+
+if (!['zh', 'en'].includes(localeStorage.value)) {
+  localeStorage.value = 'zh';
+}
 
 syncRef(
   locale,
-  useStorage('locale', locale),
+  localeStorage,
 );
 </script>
 
diff --git a/src/components/NavbarButtons.vue b/src/components/NavbarButtons.vue
index 0a2af0f0..a825cdd0 100644
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { IconBrandGithub, IconBrandX, IconInfoCircle } from '@tabler/icons-vue';
+import { IconBrandGithub, IconInfoCircle } from '@tabler/icons-vue';
 </script>
 
 <template>
@@ -9,32 +9,18 @@ import { IconBrandGithub, IconBrandX, IconInfoCircle } from '@tabler/icons-vue';
         circle
         size="small"
         variant="text"
-        href="https://github.com/CorentinTh/it-tools"
+        href="https://github.com/shake/it-tools"
         target="_blank"
         rel="noopener noreferrer"
         :aria-label="$t('home.nav.githubRepository')"
       >
-        <n-icon size="22" :component="IconBrandGithub" />
-      </c-button>
-    </c-tooltip>
-
-    <c-tooltip :tooltip="$t('home.nav.twitterX')" position="bottom">
-      <c-button
-        circle
-        size="small"
-        variant="text"
-        href="https://x.com/ittoolsdottech"
-        rel="noopener"
-        target="_blank"
-        :aria-label="$t('home.nav.twitterXAccount')"
-      >
-        <n-icon size="22" :component="IconBrandX" />
+        <n-icon size="20" :component="IconBrandGithub" />
       </c-button>
     </c-tooltip>
 
     <c-tooltip :tooltip="$t('home.nav.about')" position="bottom">
       <c-button circle size="small" variant="text" to="/about" :aria-label="$t('home.nav.aboutLabel')">
-        <n-icon size="22" :component="IconInfoCircle" />
+        <n-icon size="20" :component="IconInfoCircle" />
       </c-button>
     </c-tooltip>
   </div>
@@ -44,5 +30,6 @@ import { IconBrandGithub, IconBrandX, IconInfoCircle } from '@tabler/icons-vue';
 .navbar-buttons {
   display: flex;
   align-items: center;
+  gap: 4px;
 }
 </style>
diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index fb5c3177..b34bfe2b 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -96,18 +96,18 @@ const tools = computed<ToolCategory[]>(() => [
           :aria-label="$t('home.toggleMenu')"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
-          <NIcon size="25" :component="Menu2" />
+          <NIcon size="22" :component="Menu2" />
         </c-button>
 
         <c-tooltip :tooltip="$t('home.home')" position="bottom">
           <c-button to="/" circle variant="text" :aria-label="$t('home.home')">
-            <NIcon size="25" :component="Home2" />
+            <NIcon size="22" :component="Home2" />
           </c-button>
         </c-tooltip>
 
         <c-tooltip :tooltip="$t('home.uiLib')" position="bottom">
           <c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
-            <icon-mdi:brush-variant text-20px />
+            <icon-mdi:brush-variant text-18px />
           </c-button>
         </c-tooltip>
 
@@ -189,6 +189,6 @@ const tools = computed<ToolCategory[]>(() => [
 }
 
 .top-right-actions {
-  gap: 6px;
+  gap: 4px;
 }
 </style>
diff --git a/src/modules/i18n/components/locale-selector.vue b/src/modules/i18n/components/locale-selector.vue
index 3fef72ab..a664aa3b 100644
--- a/src/modules/i18n/components/locale-selector.vue
+++ b/src/modules/i18n/components/locale-selector.vue
@@ -1,32 +1,17 @@
 <script setup lang="ts">
-const { availableLocales, locale } = useI18n();
+const { locale } = useI18n();
 
-const localesLong: Record<string, string> = {
-  en: 'English',
-  de: 'Deutsch',
-  es: 'Español',
-  fr: 'Français',
-  no: 'Norwegian',
-  pt: 'Português',
-  ru: 'Русский',
-  uk: 'Українська',
-  zh: '中文',
-  vi: 'Tiếng Việt',
-};
-
-const localeOptions = computed(() =>
-  availableLocales.map(locale => ({
-    label: localesLong[locale] ?? locale,
-    value: locale,
-  })),
-);
+const localeOptions = [
+  { label: '中文', value: 'zh' },
+  { label: 'English', value: 'en' },
+];
 </script>
 
 <template>
   <c-select
     v-model:value="locale"
     :options="localeOptions"
-    placeholder="Select a language"
-    w-100px
+    size="small"
+    w-88px
   />
 </template>
diff --git a/src/plugins/i18n.plugin.ts b/src/plugins/i18n.plugin.ts
index f3e8f0e5..106f7d82 100644
--- a/src/plugins/i18n.plugin.ts
+++ b/src/plugins/i18n.plugin.ts
@@ -5,7 +5,7 @@ import { createI18n } from 'vue-i18n';
 
 const i18n = createI18n({
   legacy: false,
-  locale: 'en',
+  locale: 'zh',
   messages,
 });