feat: install and configure i18n features (#177)

Co-authored-by: Shinigami <chrissi92@hotmail.de>
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Co-authored-by: Daniel Roe <daniel@roe.dev>

components/nav/NavFooter.vue

@@ -5,17 +5,20 @@ const buildTimeAgo = useTimeAgo(buildTime)
 
 <template>
   <footer p4 text-sm text-secondary-light flex="~ col">
-    <div flex="~ gap2">
-      <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
+    <div flex="~ gap2" items-center mb4>
+      <button i-ri-sun-line dark:i-ri-moon-line text-lg @click="toggleDark()" />
       <button
-        text-lg mb4
+        text-lg
         :class="isZenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
         @click="toggleZenMode()"
       />
+      <NavSelectLanguage />
+    </div>
+    <div>
+      <button cursor-pointer hover:underline @click="openPreviewHelp">
+        Show intro
+      </button>
     </div>
-    <button cursor-pointer hover:underline @click="openPreviewHelp">
-      Show intro
-    </button>
     <div>A Mastodon client made with 🧡</div>
     <div>Built <time :datetime="buildTime" :title="buildTime">{{ buildTimeAgo }}</time> · <a href="https://github.com/elk-zone/elk" target="_blank">GitHub</a></div>
   </footer>

components/nav/NavSide.vue

@@ -1,21 +1,27 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <nav px3 py4 flex="~ col gap2" text-lg>
     <template v-if="currentUser">
-      <NavSideItem text="Home" to="/home" icon="i-ri:home-5-line" />
-      <NavSideItem text="Notifications" to="/notifications" icon="i-ri:notification-4-line" />
+      <NavSideItem :text="t('nav_side.home')" to="/home" icon="i-ri:home-5-line" />
+      <NavSideItem :text="t('nav_side.notifications')" to="/notifications" icon="i-ri:notification-4-line" />
     </template>
-    <NavSideItem text="Explore" to="/explore" icon="i-ri:hashtag" />
-    <NavSideItem text="Local" to="/public/local" icon="i-ri:group-2-line " />
-    <NavSideItem text="Federated" to="/public" icon="i-ri:earth-line" />
+    <NavSideItem :text="t('nav_side.explore')" to="/explore" icon="i-ri:hashtag" />
+    <NavSideItem :text="t('nav_side.local')" to="/public/local" icon="i-ri:group-2-line " />
+    <NavSideItem :text="t('nav_side.federated')" to="/public" icon="i-ri:earth-line" />
     <template v-if="currentUser">
-      <NavSideItem text="Conversations" to="/conversations" icon="i-ri:at-line" />
-      <NavSideItem text="Favourites" to="/favourites" icon="i-ri:heart-3-line" />
-      <NavSideItem text="Bookmarks" to="/bookmarks" icon="i-ri:bookmark-line " />
+      <NavSideItem :text="t('nav_side.conversations')" to="/conversations" icon="i-ri:at-line" />
+      <NavSideItem :text="t('nav_side.favourites')" to="/favourites" icon="i-ri:heart-3-line" />
+      <NavSideItem :text="t('nav_side.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " />
       <NavSideItem :to="getAccountPath(currentUser.account)" icon="i-ri:list-check-2-line">
         <template #icon>
           <AccountAvatar :account="currentUser.account" h="1.2em" />
         </template>
-        <ContentRich :content="getDisplayName(currentUser.account, { rich: true })" :emojis="currentUser.account.emojis" />
+        <ContentRich :content="getDisplayName(currentUser.account, { rich: true }) || t('nav_side.profile')" :emojis="currentUser.account.emojis" />
       </NavSideItem>
     </template>
   </nav>

components/nav/SelectLanguage.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const { locale } = useI18n()
+const languageList = [
+  {
+    value: 'en-US',
+    label: 'English',
+  },
+  {
+    value: 'zh-CN',
+    label: '简体中文',
+  },
+]
+</script>
+
+<template>
+  <CommonTooltip placement="bottom" content="Select Language">
+    <CommonDropdown>
+      <button align-top>
+        <div i-ri:earth-line text-lg />
+      </button>
+
+      <template #popper>
+        <CommonDropdownItem
+          v-for="item in languageList"
+          :key="item.value"
+          :checked="item.value === locale"
+          @click="locale = item.value"
+        >
+          {{ item.label }}
+        </CommonDropdownItem>
+      </template>
+    </CommonDropdown>
+  </CommonTooltip>
+</template>