Chin 2

frontend/app/components/parts/site_options/LanguageSelector.vue

@@ -31,6 +31,16 @@ const changeLocale = (lang) => {
   setLocale(lang.code);
   dropdownVisible.value = false
 }
+
+const localeIcon = (code) => {
+  const icons = {
+    en: 'EN',
+    es: 'ES',
+    ca: 'CA',
+    zh: 'ZH'
+  }
+  return icons[code] || code.toUpperCase()
+}
 </script>
 
 <template>
@@ -39,10 +49,10 @@ const changeLocale = (lang) => {
 
   <Transition name="dropdown">
     <div class="dropdown" v-show="dropdownVisible">
-      <div class="section">
+     <div class="section">
         <div :class="{'menu-item': true, 'active': locale === loc.code}"
-         v-for="loc in locales" @click="changeLocale(loc)">
-          {{ $t('locales.' + loc.code) }}
+             v-for="loc in locales" @click="changeLocale(loc)">
+          <span class="locale-icon">{{ localeIcon(loc.code) }}</span>{{ $t('locales.' + loc.code) }}
         </div>
       </div>
     </div>
@@ -102,6 +112,17 @@ border: 1px solid var(--color-border-color);
 }
 
 /* Items */
+.locale-icon {
+  font-family: 'Hermit', 'Hurmit', monospace;
+  background: var(--color-border-color);
+  color: var(--color-text);
+  padding: 2px 6px;
+  font-size: 0.75em;
+  letter-spacing: 1px;
+  min-width: 32px;
+  text-align: center;
+}
+
 .menu-item {
   padding: 8px 16px;
   color: var(--color-text);