ui: move settings to nav side

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>

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

components/nav/NavSide.vue

@@ -28,5 +28,6 @@ const { notifications } = useNotifications()
     <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.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
   </nav>
 </template>

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"

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

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

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>