refactor(AppHeader): moving header items to PageNavigation, removing logout and settings icons

Author: lancewilhelm

app/components/AppHeader.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const uiStore = useUiStore();
-const { signOut } = useAuth();
 const route = useRoute();
 </script>
 
@@ -40,16 +39,6 @@ const route = useRoute();
           uiStore.setCommandPaletteVisible(!uiStore.commandPaletteVisible)
         "
       />
-      <Icon
-        name="lucide:settings"
-        class="text-(--main-color) cursor-pointer scale-125 header-icon"
-        @mousedown="navigateTo('/settings')"
-      />
-      <Icon
-        name="lucide:log-out"
-        class="text-(--main-color) cursor-pointer scale-125 header-icon"
-        @click="signOut"
-      />
     </div>
   </div>
 </template>

app/components/CommandPalette/CommandPalette.vue

@@ -67,9 +67,10 @@ watch(
     <div
       class="flex flex-col backdrop-blur-lg bg-(--bg-color)/80 w-[600px] h-[600px] m-4 rounded-lg shadow-lg font-mono command-palette border border-(--sub-color)"
       :style="{
-        translate: uiStore.chatListVisible
-          ? uiStore.chatListWidth / 2 + 'px'
-          : '0px',
+        translate:
+          uiStore.chatListVisible && route.path.startsWith('/chat')
+            ? uiStore.chatListWidth / 2 + 'px'
+            : '0px',
       }"
       @click.stop
     >

app/components/PageNavigation.vue

@@ -1,15 +1,34 @@
 <script setup lang="ts">
+const chatStore = useChatStore();
 const pages = {
   chat: {
     name: "chat",
+    action: () => {
+      if (chatStore.currentChatId) {
+        navigateTo(`/chat/${chatStore.currentChatId}`);
+      } else {
+        navigateTo("/chat");
+      }
+    },
     url: "/chat",
     icon: "lucide:message-square",
   },
   knowledge: {
     name: "knowledge",
+    action: () => {
+      navigateTo("/knowledge");
+    },
     url: "/knowledge",
     icon: "lucide:library",
   },
+  settings: {
+    name: "settings",
+    action: () => {
+      navigateTo("/settings");
+    },
+    url: "/settings",
+    icon: "lucide:settings",
+  },
 };
 
 const popupVisible = ref(false);
@@ -106,12 +125,7 @@ onBeforeUnmount(() => {
             ? 'bg-(--sub-color)/20'
             : 'hover:bg-(--sub-color)/10',
         ]"
-        @click="
-          () => {
-            navigateTo(page.url);
-            popupVisible = false;
-          }
-        "
+        @click="page.action()"
       >
         <Icon :name="page.icon" class="text-(--main-color) scale-125" />
         <div class="flex flex-col overflow-hidden">

app/components/Settings/SettingsHeader.vue

@@ -1,25 +1,11 @@
 <script setup lang="ts">
 const uiStore = useUiStore();
-const { signOut } = useAuth();
-const chatStore = useChatStore();
 </script>
 
 <template>
   <div class="flex justify-between py-2 px-4 items-center gap-4 app-header">
     <div class="flex gap-4 items-center app-header-left">
-      <Icon
-        name="lucide:bot-message-square"
-        class="text-(--main-color) cursor-pointer scale-125 header-icon"
-        @click="
-          () => {
-            if (chatStore.currentChatId) {
-              navigateTo(`/chat/${chatStore.currentChatId}`);
-            } else {
-              navigateTo('/chat');
-            }
-          }
-        "
-      />
+      <PageNavigation />
     </div>
     <div class="flex gap-4 items-center app-header-right">
       <Icon
@@ -29,11 +15,6 @@ const chatStore = useChatStore();
           uiStore.setCommandPaletteVisible(!uiStore.commandPaletteVisible)
         "
       />
-      <Icon
-        name="lucide:log-out"
-        class="text-(--main-color) cursor-pointer scale-125 header-icon"
-        @click="signOut"
-      />
     </div>
   </div>
 </template>

app/composables/useCommandPalette.ts

@@ -32,6 +32,42 @@ export function useCommandPalette() {
   const allThemes = computed<Theme[]>(() => sortedThemesList);
 
   const options = ref<Option[]>([
+    {
+      label: "new chat",
+      icon: "lucide:message-square-plus",
+      action: goToNewChat,
+    },
+    {
+      label: "search chats",
+      icon: "lucide:search",
+      action: () => {
+        useUiStore().setChatSearchVisible(true);
+        useUiStore().setCommandPaletteVisible(false);
+      },
+    },
+    {
+      label: "knowledge",
+      icon: "lucide:library",
+      action: () => {
+        useUiStore().setCommandPaletteVisible(false);
+        navigateTo("/knowledge");
+      },
+    },
+    {
+      label: "model",
+      icon: "lucide:cpu",
+      options: getModelOptions(),
+    },
+    {
+      label: "system prompt",
+      icon: "lucide:message-square",
+      options: getPromptOptions(),
+    },
+    {
+      label: "title generator model",
+      icon: "lucide:book-a",
+      options: getTitleModelOptions(),
+    },
     { label: "theme", icon: "lucide:palette" },
     { label: "favorite themes", icon: "lucide:star" },
     {
@@ -60,34 +96,6 @@ export function useCommandPalette() {
       icon: "lucide:message-square-text",
       options: getMessageDisplayModeOptions(),
     },
-    {
-      label: "model",
-      icon: "lucide:cpu",
-      options: getModelOptions(),
-    },
-    {
-      label: "title generator model",
-      icon: "lucide:book-a",
-      options: getTitleModelOptions(),
-    },
-    {
-      label: "system prompt",
-      icon: "lucide:message-square",
-      options: getPromptOptions(),
-    },
-    {
-      label: "new chat",
-      icon: "lucide:message-square-plus",
-      action: goToNewChat,
-    },
-    {
-      label: "search chats",
-      icon: "lucide:search",
-      action: () => {
-        useUiStore().setChatSearchVisible(true);
-        useUiStore().setCommandPaletteVisible(false);
-      },
-    },
     {
       label: "funbox",
       icon: "lucide:party-popper",