From 8a062f5573932484b98f9e8e35cdceb44d24a27a Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 27 Dec 2022 00:04:24 +0100
Subject: [PATCH] ui: add more settings entry

---
 locales/en-US.json                 |  9 +++++++++
 pages/settings.vue                 | 20 +++++++++++++++++++-
 pages/settings/about/index.vue     | 21 +++++++++++++++++++++
 pages/settings/interface/index.vue | 21 +++++++++++++++++++++
 pages/settings/language/index.vue  | 21 +++++++++++++++++++++
 5 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 pages/settings/about/index.vue
 create mode 100644 pages/settings/interface/index.vue
 create mode 100644 pages/settings/language/index.vue

diff --git a/locales/en-US.json b/locales/en-US.json
index 91530411..d2e3b327 100644
--- a/locales/en-US.json
+++ b/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"
     },
diff --git a/pages/settings.vue b/pages/settings.vue
index 0e827273..71ced0c8 100644
--- a/pages/settings.vue
+++ b/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>
diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
new file mode 100644
index 00000000..0ea85068
--- /dev/null
+++ b/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>
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
new file mode 100644
index 00000000..f68caa1e
--- /dev/null
+++ b/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>
diff --git a/pages/settings/language/index.vue b/pages/settings/language/index.vue
new file mode 100644
index 00000000..4fb2ede5
--- /dev/null
+++ b/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>