feat: move nav footer items to settings

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>

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">

components/nav/SelectFontSize.vue

@@ -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>

components/nav/SelectLanguage.vue

@@ -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>

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>

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>

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>

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)])"

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": {

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>

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>

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>

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">

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',