ui: add more settings entry

locales/en-US.json

@@ -225,6 +225,15 @@
     "search_desc": "Search for people & hashtags"
   },
   "settings": {
+    "about": {
+      "label": "About"
+    },
+    "interface": {
+      "label": "Interface"
+    },
+    "language": {
+      "label": "Language"
+    },
     "preferences": {
       "label": "Preferences"
     },

pages/settings.vue

@@ -10,7 +10,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
 
 <template>
   <div min-h-screen flex>
-    <div border="x base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
+    <div border="r base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
       <MainContent>
         <template #title>
           <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
@@ -25,12 +25,30 @@ const isRootPath = computedEager(() => route.name === 'settings')
             :text="$t('settings.profile.label')"
             to="/settings/profile"
           />
+          <SettingsNavItem
+            command
+            icon="i-ri-compasses-2-line"
+            :text="$t('settings.interface.label')"
+            to="/settings/interface"
+          />
+          <SettingsNavItem
+            command
+            icon="i-ri-globe-line"
+            :text="$t('settings.language.label')"
+            to="/settings/language"
+          />
           <SettingsNavItem
             command
             icon="i-ri:settings-2-line"
             :text="$t('settings.preferences.label')"
             to="/settings/preferences"
           />
+          <SettingsNavItem
+            command
+            icon="i-ri:information-line"
+            :text="$t('settings.about.label')"
+            to="/settings/about"
+          />
         </div>
       </MainContent>
     </div>

pages/settings/about/index.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+const { lg } = breakpoints
+</script>
+
+<template>
+  <MainContent :back="!lg">
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.about.label') }}</span>
+      </div>
+    </template>
+    <div text-center mt-10>
+      <h1 text-4xl>
+        🚧
+      </h1>
+      <h3 text-xl>
+        {{ $t('settings.about.label') }}
+      </h3>
+    </div>
+  </MainContent>
+</template>

pages/settings/interface/index.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+const { lg } = breakpoints
+</script>
+
+<template>
+  <MainContent :back="!lg">
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.interface.label') }}</span>
+      </div>
+    </template>
+    <div text-center mt-10>
+      <h1 text-4xl>
+        🚧
+      </h1>
+      <h3 text-xl>
+        {{ $t('settings.interface.label') }}
+      </h3>
+    </div>
+  </MainContent>
+</template>

pages/settings/language/index.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+const { lg } = breakpoints
+</script>
+
+<template>
+  <MainContent :back="!lg">
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.language.label') }}</span>
+      </div>
+    </template>
+    <div text-center mt-10>
+      <h1 text-4xl>
+        🚧
+      </h1>
+      <h3 text-xl>
+        {{ $t('settings.language.label') }}
+      </h3>
+    </div>
+  </MainContent>
+</template>