From 12942095ded1577299cb0817eba2753a157db3a7 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 28 Dec 2022 00:03:50 +0100
Subject: [PATCH] feat: move nav footer items to settings

---
 components/nav/NavBottomMoreMenu.vue          | 39 ++++++-------------
 components/nav/NavFooter.vue                  | 14 -------
 components/nav/SelectFontSize.vue             | 23 -----------
 components/nav/SelectLanguage.vue             | 24 ------------
 .../settings/SettingsColorMode.client.vue     | 26 +++++++++++++
 components/settings/SettingsFontSize.vue      | 14 +++++++
 components/settings/SettingsLanguage.vue      | 15 +++++++
 ...tingsToggle.vue => SettingsToggleItem.vue} |  0
 components/user/UserSwitcher.vue              | 10 ++---
 locales/en-US.json                            |  7 +++-
 pages/settings/interface/index.vue            | 16 ++++----
 pages/settings/language/index.vue             | 12 +++---
 pages/settings/preferences/index.vue          | 16 ++++----
 pages/settings/users/index.vue                |  2 +-
 unocss.config.ts                              |  2 +
 15 files changed, 101 insertions(+), 119 deletions(-)
 delete mode 100644 components/nav/SelectFontSize.vue
 delete mode 100644 components/nav/SelectLanguage.vue
 create mode 100644 components/settings/SettingsColorMode.client.vue
 create mode 100644 components/settings/SettingsFontSize.vue
 create mode 100644 components/settings/SettingsLanguage.vue
 rename components/settings/{SettingsToggle.vue => SettingsToggleItem.vue} (100%)

diff --git a/components/nav/NavBottomMoreMenu.vue b/components/nav/NavBottomMoreMenu.vue
index a75d6bf0..82983be2 100644
--- a/components/nav/NavBottomMoreMenu.vue
+++ b/components/nav/NavBottomMoreMenu.vue
@@ -81,34 +81,17 @@ onBeforeUnmount(() => {
               <span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl mr-4 !align-middle" />
               {{ !isDark ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
             </button>
-            <!-- Switch languages -->
-            <NavSelectLanguage>
-              <button
-                flex flex-row items-center
-                block px-5 py-2 focus-blue w-full
-                text-sm text-base capitalize text-left whitespace-nowrap
-                transition-colors duration-200 transform
-                hover="bg-gray-100 dark:(bg-gray-700 text-white)"
-                @click.stop
-              >
-                <span class="i-ri:earth-line flex-shrink-0 text-xl mr-4 !align-middle" />
-                {{ $t('nav.select_language') }}
-              </button>
-            </NavSelectLanguage>
-            <!-- Switch font size -->
-            <NavSelectFontSize>
-              <button
-                flex flex-row items-center
-                block px-5 py-2 focus-blue w-full
-                text-sm text-base capitalize text-left whitespace-nowrap
-                transition-colors duration-200 transform
-                hover="bg-gray-100 dark:(bg-gray-700 text-white)"
-                @click.stop
-              >
-                <span class="i-ri:font-size flex-shrink-0 text-xl mr-4 !align-middle" />
-                {{ $t('nav.select_font_size') }}
-              </button>
-            </NavSelectFontSize>
+            <NuxtLink
+              flex flex-row items-center
+              block px-5 py-2 focus-blue w-full
+              text-sm text-base capitalize text-left whitespace-nowrap
+              transition-colors duration-200 transform
+              hover="bg-gray-100 dark:(bg-gray-700 text-white)"
+              to="/settings"
+            >
+              <span class="i-ri:settings-2-line flex-shrink-0 text-xl mr-4 !align-middle" />
+              {{ $t('nav.settings') }}
+            </NuxtLink>
           </div>
         </div>
       </div>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index b31d786f..414e3490 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -31,20 +31,6 @@ const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
           :aria-label="$t('nav.settings')"
         />
       </CommonTooltip>
-      <NavSelectLanguage>
-        <CommonTooltip :content="$t('nav.select_language')">
-          <button flex :aria-label="$t('nav.select_language')">
-            <div i-ri:earth-line text-lg />
-          </button>
-        </CommonTooltip>
-      </NavSelectLanguage>
-      <NavSelectFontSize>
-        <CommonTooltip :content="$t('nav.select_font_size')">
-          <button flex :aria-label="$t('nav.select_font_size')">
-            <div i-ri:font-size text-lg />
-          </button>
-        </CommonTooltip>
-      </NavSelectFontSize>
     </div>
     <div>
       <button cursor-pointer hover:underline @click="openPreviewHelp">
diff --git a/components/nav/SelectFontSize.vue b/components/nav/SelectFontSize.vue
deleted file mode 100644
index 5518b918..00000000
--- a/components/nav/SelectFontSize.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-import type { FontSize } from '~/composables/fontSize'
-
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
-const fontSize = getFontSize()
-</script>
-
-<template>
-  <CommonDropdown>
-    <slot />
-
-    <template #popper>
-      <CommonDropdownItem
-        v-for="size in sizes"
-        :key="size"
-        :checked="size === fontSize"
-        @click="fontSize = size"
-      >
-        {{ size }}
-      </CommonDropdownItem>
-    </template>
-  </CommonDropdown>
-</template>
diff --git a/components/nav/SelectLanguage.vue b/components/nav/SelectLanguage.vue
deleted file mode 100644
index b0ffa836..00000000
--- a/components/nav/SelectLanguage.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import type { ComputedRef } from 'vue'
-import type { LocaleObject } from '#i18n'
-
-const { locale, t, setLocale } = useI18n()
-const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
-</script>
-
-<template>
-  <CommonDropdown>
-    <slot />
-
-    <template #popper>
-      <CommonDropdownItem
-        v-for="item in locales"
-        :key="item.code"
-        :checked="item.code === locale"
-        @click="setLocale(item.code)"
-      >
-        {{ item.name }}
-      </CommonDropdownItem>
-    </template>
-  </CommonDropdown>
-</template>
diff --git a/components/settings/SettingsColorMode.client.vue b/components/settings/SettingsColorMode.client.vue
new file mode 100644
index 00000000..59d947e5
--- /dev/null
+++ b/components/settings/SettingsColorMode.client.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+function setDark(v: boolean) {
+  isDark.value = v
+}
+</script>
+
+<template>
+  <div flex="~ gap4" w-full>
+    <button
+      btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
+      :class="isDark ? 'pointer-events-none' : 'filter-saturate-0'"
+      @click="setDark(true)"
+    >
+      <div i-ri:moon-line />
+      Dark Mode
+    </button>
+    <button
+      btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
+      :class="!isDark ? 'pointer-events-none' : 'filter-saturate-0'"
+      @click="setDark(false)"
+    >
+      <div i-ri:sun-line />
+      Light Mode
+    </button>
+  </div>
+</template>
diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
new file mode 100644
index 00000000..86676810
--- /dev/null
+++ b/components/settings/SettingsFontSize.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { FontSize } from '~/composables/fontSize'
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
+const fontSize = getFontSize()
+</script>
+
+<template>
+  <select v-model="fontSize">
+    <option v-for="size in sizes" :key="size" :value="size">
+      {{ size }}
+    </option>
+  </select>
+</template>
diff --git a/components/settings/SettingsLanguage.vue b/components/settings/SettingsLanguage.vue
new file mode 100644
index 00000000..4ea180f2
--- /dev/null
+++ b/components/settings/SettingsLanguage.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { ComputedRef } from 'vue'
+import type { LocaleObject } from '#i18n'
+
+const { locale, setLocale } = useI18n()
+const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
+</script>
+
+<template>
+  <select :value="locale" @input="e => setLocale((e.target as any).value)">
+    <option v-for="item in locales" :key="item.code" :value="item.code">
+      {{ item.name }}
+    </option>
+  </select>
+</template>
diff --git a/components/settings/SettingsToggle.vue b/components/settings/SettingsToggleItem.vue
similarity index 100%
rename from components/settings/SettingsToggle.vue
rename to components/settings/SettingsToggleItem.vue
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index 68fa36c4..2cfa4af1 100644
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@@ -39,17 +39,17 @@ const switchUser = (user: UserLogin) => {
       </button>
     </template>
     <div border="t base" pt2>
-      <CommonDropdownItem
-        :text="$t('user.add_existing')"
-        icon="i-ri:user-add-line"
-        @click="openSigninDialog"
-      />
       <NuxtLink to="/settings">
         <CommonDropdownItem
           :text="$t('nav.settings')"
           icon="i-ri:settings-4-line"
         />
       </NuxtLink>
+      <CommonDropdownItem
+        :text="$t('user.add_existing')"
+        icon="i-ri:user-add-line"
+        @click="openSigninDialog"
+      />
       <CommonDropdownItem
         v-if="isMastoInitialised && currentUser"
         :text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"
diff --git a/locales/en-US.json b/locales/en-US.json
index 6cff0541..4612eea3 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -144,8 +144,8 @@
     "profile": "Profile",
     "search": "Search",
     "select_feature_flags": "Toggle Feature Flags",
-    "select_font_size": "Select Font Size",
-    "select_language": "Select Language",
+    "select_font_size": "Font Size",
+    "select_language": "Display Language",
     "settings": "Settings",
     "show_intro": "Show intro",
     "toggle_theme": "Toggle Theme",
@@ -222,9 +222,12 @@
       "virtual_scroll": "Virtual Scrolling"
     },
     "interface": {
+      "color_mode": "Color Mode",
+      "font_size": "Font Size",
       "label": "Interface"
     },
     "language": {
+      "display_language": "Display Language",
       "label": "Language"
     },
     "preferences": {
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
index f68caa1e..74549236 100644
--- a/pages/settings/interface/index.vue
+++ b/pages/settings/interface/index.vue
@@ -9,13 +9,15 @@ const { lg } = breakpoints
         <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 p6 flex="~ col gap6">
+      <label space-y-2>
+        <p font-medium>{{ $t('settings.interface.font_size') }}</p>
+        <SettingsFontSize select-settings />
+      </label>
+      <label space-y-2>
+        <p font-medium>{{ $t('settings.interface.color_mode') }}</p>
+        <SettingsColorMode />
+      </label>
     </div>
   </MainContent>
 </template>
diff --git a/pages/settings/language/index.vue b/pages/settings/language/index.vue
index 4fb2ede5..34cdc50e 100644
--- a/pages/settings/language/index.vue
+++ b/pages/settings/language/index.vue
@@ -9,13 +9,11 @@ const { lg } = breakpoints
         <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 p6>
+      <label space-y-2>
+        <p font-medium>{{ $t('settings.language.display_language') }}</p>
+        <SettingsLanguage select-settings />
+      </label>
     </div>
   </MainContent>
 </template>
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 18c62eb9..77200c36 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -13,29 +13,29 @@ const { lg } = breakpoints
       <div i-ri-flask-line />
       {{ $t('settings.feature_flags.title') }}
     </h3>
-    <SettingsToggle
+    <SettingsToggleItem
       :checked="currentUserFeatureFlags.experimentalVirtualScroll"
       @click="toggleFeatureFlag('experimentalVirtualScroll')"
     >
       {{ $t('settings.feature_flags.virtual_scroll') }}
-    </SettingsToggle>
-    <SettingsToggle
+    </SettingsToggleItem>
+    <SettingsToggleItem
       :checked="currentUserFeatureFlags.experimentalAvatarOnAvatar"
       @click="toggleFeatureFlag('experimentalAvatarOnAvatar')"
     >
       {{ $t('settings.feature_flags.avatar_on_avatar') }}
-    </SettingsToggle>
-    <SettingsToggle
+    </SettingsToggleItem>
+    <SettingsToggleItem
       :checked="currentUserFeatureFlags.experimentalGitHubCards"
       @click="toggleFeatureFlag('experimentalGitHubCards')"
     >
       {{ $t('settings.feature_flags.github_cards') }}
-    </SettingsToggle>
-    <SettingsToggle
+    </SettingsToggleItem>
+    <SettingsToggleItem
       :checked="currentUserFeatureFlags.experimentalUserPicker"
       @click="toggleFeatureFlag('experimentalUserPicker')"
     >
       {{ $t('settings.feature_flags.user_picker') }}
-    </SettingsToggle>
+    </SettingsToggleItem>
   </MainContent>
 </template>
diff --git a/pages/settings/users/index.vue b/pages/settings/users/index.vue
index 72a09ab5..46370be4 100644
--- a/pages/settings/users/index.vue
+++ b/pages/settings/users/index.vue
@@ -69,7 +69,7 @@ async function importTokens() {
         <span>{{ $t('settings.users.label') }}</span>
       </div>
     </template>
-    <div p4>
+    <div p6>
       <template v-if="loggedInUsers.length">
         <div flex="~ col gap2">
           <div v-for="user of loggedInUsers" :key="user.account.id">
diff --git a/unocss.config.ts b/unocss.config.ts
index e3f22363..4e7e6a6c 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -45,6 +45,8 @@ export default defineConfig({
       'input-base': 'p2 rounded w-full bg-transparent border border-dark input-base-focus input-base-disabled',
       'input-error': 'border-$c-error focus:(outline-offset-0 outline-$c-error outline-1px)',
 
+      'select-settings': 'p3 border border-base rounded w-full block bg-base',
+
       // link
       'text-link-rounded': 'focus:outline-none focus:ring-(2 primary inset) hover:bg-active rounded md:rounded-full px2 mx--2',