From f7210ff8b092d22a9a4eb758826662a8c255a783 Mon Sep 17 00:00:00 2001
From: Sebastian <krupinski01@gmail.com>
Date: Tue, 14 Jul 2026 17:19:43 -0400
Subject: [PATCH] refactor: add navigaton panel component

Signed-off-by: Sebastian <krupinski01@gmail.com>
---
 src/components/Sidebar.vue | 75 ++++++++++++++++++++++++++++++++++++++
 src/pages/MailPage.vue     | 38 +------------------
 2 files changed, 77 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Sidebar.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..68df911
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useDisplay } from 'vuetify'
+import { useMailUiStore } from '@/stores/mailUiStore'
+import FolderView from '@/components/FolderView.vue'
+import type { CollectionObject } from '@MailManager/models/collection'
+
+const display = useDisplay()
+const isMobile = computed(() => display.mdAndDown.value)
+
+const mailUiStore = useMailUiStore()
+const { sidebarVisible, selectedFolder } = storeToRefs(mailUiStore)
+
+const handleCompose = () => mailUiStore.openComposer()
+
+const handleFolderSelect = (folder: CollectionObject) => mailUiStore.selectFolder(folder)
+
+const handleSettingsOpen = () => mailUiStore.settingsOpen()
+</script>
+
+<template>
+  <v-navigation-drawer
+    v-model="sidebarVisible"
+    contained
+    :permanent="sidebarVisible && !isMobile"
+    :temporary="isMobile"
+    width="280"
+    class="mail-sidebar"
+  >
+    <div class="pa-3 pb-0">
+      <!-- Primary action -->
+      <v-btn
+        block
+        color="primary"
+        variant="tonal"
+        prepend-icon="mdi-pencil"
+        class="justify-start"
+        @click="handleCompose"
+      >
+        Compose
+      </v-btn>
+    </div>
+
+    <!-- Folders -->
+    <FolderView
+      :selected-folder="selectedFolder"
+      @select="handleFolderSelect"
+    />
+
+    <!-- Pinned utility footer -->
+    <template #append>
+      <v-divider />
+      <div class="pa-2">
+        <v-btn
+          block
+          variant="text"
+          size="small"
+          prepend-icon="mdi-cog"
+          class="justify-start text-medium-emphasis"
+          @click="handleSettingsOpen"
+        >
+          Settings
+        </v-btn>
+      </div>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+.mail-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+}
+</style>
diff --git a/src/pages/MailPage.vue b/src/pages/MailPage.vue
index 2e05a28..416b58a 100644
--- a/src/pages/MailPage.vue
+++ b/src/pages/MailPage.vue
@@ -17,7 +17,7 @@ import DeleteFolderDialog from '@/components/DeleteFolderDialog.vue'
 import FolderSelectionDialog from '@/components/FolderSelectionDialog.vue'
 import RenameFolderDialog from '@/components/RenameFolderDialog.vue'
 import SettingsDialog from '@/components/settings/SettingsDialog.vue'
-import FolderView from '@/components/FolderView.vue'
+import Sidebar from '@/components/Sidebar.vue'
 
 // Vuetify display for responsive behavior
 const display = useDisplay()
@@ -44,7 +44,6 @@ const {
 } = storeToRefs(mailOperationsStore)
 
 const {
-  sidebarVisible,
   settingsDialogVisible,
   selectedFolder,
   composerMode,
@@ -111,8 +110,6 @@ const {
 
 const sidebarToggle = () => mailUiStore.sidebarToggle()
 
-const handleSettingsOpen = () => mailUiStore.settingsOpen()
-
 const handleFolderSelect = (folder: CollectionObject) => mailUiStore.selectFolder(folder)
 
 const handleFolderCreateConfirm = async (folderName: string) => {
@@ -294,33 +291,7 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
     <!-- Main content area -->
     <div class="mail-content">
       <!-- Folder tree sidebar -->
-      <v-navigation-drawer
-        v-model="sidebarVisible"
-        contained
-        :permanent="sidebarVisible && !isMobile"
-        :temporary="isMobile"
-        width="280"
-        class="mail-sidebar"
-      >
-
-        <FolderView
-          :selected-folder="selectedFolder"
-          @select="handleFolderSelect"
-        />
-
-        <template #append>
-          <div class="pa-2">
-            <v-btn
-              block
-              variant="text"
-              prepend-icon="mdi-cog"
-              @click="handleSettingsOpen"
-            >
-              Settings
-            </v-btn>
-          </div>
-        </template>
-      </v-navigation-drawer>
+      <Sidebar />
 
       <!-- Main area with message list and reader -->
       <div class="mail-main">
@@ -490,11 +461,6 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
   position: relative;
 }
 
-.mail-sidebar {
-  border-right: 1px solid rgb(var(--v-border-color));
-  overflow-y: auto;
-}
-
 .mail-main {
   flex: 1;
   min-height: 0;