feat(ui): use column layout for language modal

front/src/ui/components/UserMenu.vue

@@ -17,6 +17,7 @@ import PopoverRadioItem from '~/components/ui/popover/PopoverRadioItem.vue'
 import PopoverSubmenu from '~/components/ui/popover/PopoverSubmenu.vue'
 import Link from '~/components/ui/Link.vue'
 import Modal from '~/components/ui/Modal.vue'
+import Layout from '~/components/ui/Layout.vue'
 
 const { showShortcutsModal } = defineProps<{
   showShortcutsModal : () => void
@@ -103,36 +104,35 @@ watchEffect(()=> {
           {{ labels.settings }}
         </Link>
       </PopoverItem>
-      <hr v-if="store.state.auth.authenticated"/>
-      <PopoverItem @click="isLanguageModelOpen = true">
+      <hr v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"/>
+      <PopoverItem @click="isLanguageModelOpen = true"
+        :aria-pressed="isLanguageModelOpen"
+        class="solid interactive"
+      >
         <i class="bi bi-translate" />
         {{ labels.language }}...
         <Modal v-model="isLanguageModelOpen" :title="labels.language" overPopover>
-          <Button ghost v-for="(language, key) in SUPPORTED_LOCALES"
-          :key="key"
-          @click="setI18nLanguage(key)" >
-            {{ language }}
-          </Button>
+          <Layout columns :column-width="140">
+            <Button ghost v-for="(language, key) in SUPPORTED_LOCALES"
+              thin
+              width="full"
+              align-text="left"
+              :aria-pressed="key===locale"
+              :key="key"
+              @click="setI18nLanguage(key)"
+            >
+              {{ language }}
+            </Button>
+          </Layout>
         </Modal>
       </PopoverItem>
-      <PopoverSubmenu>
-        <i class="bi bi-translate" />
-        {{ labels.language }}
-        <template #items>
-          <PopoverItem v-for="(language, key) in SUPPORTED_LOCALES"
-          :key="key"
-          @click="setI18nLanguage(key)" >
-            {{ language }}
-          </PopoverItem>
-        </template>
-      </PopoverSubmenu>
       <PopoverSubmenu>
         <i class="bi bi-palette-fill" />
         {{ labels.theme }}
         <template #items>
           <PopoverItem v-for="th in themes"
           :key="th.key"
-          @click="theme= th.key" >
+          @click="theme=th.key" >
             <i :class="th.icon" />
             {{ th.name }}
           </PopoverItem>