From 64fa8d2bf4f298d532fffd6c1f9f050be050cf85 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 3 Jan 2023 18:16:04 +0100
Subject: [PATCH] ui: move settings to nav side

---
 components/nav/NavBottomMoreMenu.vue | 11 -----------
 components/nav/NavFooter.vue         |  9 ---------
 components/nav/NavSide.vue           |  3 ++-
 components/user/UserSwitcher.vue     |  6 ------
 composables/command.ts               |  6 +++---
 pages/settings.vue                   |  4 ++--
 pages/settings/index.vue             |  2 +-
 7 files changed, 8 insertions(+), 33 deletions(-)

diff --git a/components/nav/NavBottomMoreMenu.vue b/components/nav/NavBottomMoreMenu.vue
index 05b64c5e..6dd117c9 100644
--- a/components/nav/NavBottomMoreMenu.vue
+++ b/components/nav/NavBottomMoreMenu.vue
@@ -86,17 +86,6 @@ onBeforeUnmount(() => {
               <span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl me-4 !align-middle" />
               {{ colorMode.value === 'light' ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
             </button>
-            <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 me-4 !align-middle" />
-              {{ $t('nav.settings') }}
-            </NuxtLink>
           </div>
         </div>
       </div>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index d5ea4e98..edbc9cf7 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -27,15 +27,6 @@ function toggleDark() {
           @click="toggleZenMode()"
         />
       </CommonTooltip>
-      <CommonTooltip :content="$t('nav.settings')">
-        <NuxtLink
-          flex
-          text-lg
-          to="/settings"
-          i-ri:settings-4-line
-          :aria-label="$t('nav.settings')"
-        />
-      </CommonTooltip>
     </div>
     <div>
       <button cursor-pointer hover:underline @click="openPreviewHelp">
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index af545f88..3e3322b4 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -27,6 +27,7 @@ const { notifications } = useNotifications()
     <NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" :command="command" />
     <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only :command="command" />
     <NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only :command="command" />
-    <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " user-only :command="command" />
+    <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line" user-only :command="command" />
+    <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
   </nav>
 </template>
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index 17a1e698..a4ece403 100644
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@@ -39,12 +39,6 @@ const switchUser = (user: UserLogin) => {
       </button>
     </template>
     <div border="t base" pt2>
-      <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"
diff --git a/composables/command.ts b/composables/command.ts
index 52e1ec97..086724ac 100644
--- a/composables/command.ts
+++ b/composables/command.ts
@@ -205,7 +205,7 @@ export const useCommandRegistry = defineStore('command', () => {
   }
 })
 
-export const useCommand = (cmd: CommandProvider) => {
+export function useCommand(cmd: CommandProvider) {
   const registry = useCommandRegistry()
 
   const register = () => registry.register(cmd)
@@ -217,7 +217,7 @@ export const useCommand = (cmd: CommandProvider) => {
   tryOnScopeDispose(cleanup)
 }
 
-export const useCommands = (cmds: () => CommandProvider[]) => {
+export function useCommands(cmds: () => CommandProvider[]) {
   const registry = useCommandRegistry()
 
   const commands = computed(cmds)
@@ -263,7 +263,7 @@ export const provideGlobalCommands = () => {
     scope: 'Navigation',
 
     name: () => t('nav.settings'),
-    icon: 'i-ri:settings-4-line',
+    icon: 'i-ri:settings-3-line',
 
     onActivate() {
       router.push('/settings')
diff --git a/pages/settings.vue b/pages/settings.vue
index 08a61dc4..e4aa13d7 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -15,7 +15,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
         <MainContent>
           <template #title>
             <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-              <div i-ri:settings-4-line />
+              <div i-ri:settings-3-line />
               <span>{{ $t('nav.settings') }}</span>
             </div>
           </template>
@@ -41,7 +41,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
             />
             <SettingsItem
               command
-              icon="i-ri:settings-2-line"
+              icon="i-ri-equalizer-line"
               :text="$t('settings.preferences.label')"
               to="/settings/preferences"
             />
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 44a1ae90..c0ee6207 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div min-h-screen flex justify-center items-center>
     <div text-center flex="~ col gap-2" items-center>
-      <div i-ri:settings-4-line text-5xl />
+      <div i-ri:settings-3-line text-5xl />
       <span text-xl>{{ $t('settings.select_a_settings') }}</span>
     </div>
   </div>