refactor: standardize module tool bar

Signed-off-by: Sebastian <krupinski01@gmail.com>

src/pages/MailPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, unref } from 'vue'
+import { computed, onMounted, ref, unref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useDisplay } from 'vuetify'
 import { useModuleStore } from '@KTXC'
@@ -75,6 +75,21 @@ const {
 // Complex store/composable objects accessed directly (not simple refs)
 const { mailSync, entitiesStore } = mailOperationsStore
 
+// Message search (filters the current message list by subject/sender)
+const searchQuery = ref('')
+
+const filteredMessages = computed(() => {
+  const query = (searchQuery.value ?? '').trim().toLowerCase()
+  if (!query) return currentMessages.value
+
+  return currentMessages.value.filter((message: EntityObject) => {
+    const subject = (message.properties.subject || '').toLowerCase()
+    const fromLabel = (message.properties.from?.label || '').toLowerCase()
+    const fromAddress = (message.properties.from?.address || '').toLowerCase()
+    return subject.includes(query) || fromLabel.includes(query) || fromAddress.includes(query)
+  })
+})
+
 const lastSyncLabel = computed(() => {
   const lastSync = unref(unref(mailSync.lastSync))
 
@@ -216,17 +231,34 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
   <div v-else class="mail-container">
     <!-- Top toolbar -->
     <v-toolbar class="mail-toolbar" elevation="0" density="compact">
-      <v-btn
-        v-if="isMobile" 
-        icon="mdi-menu"
-        variant="text"
-        @click="sidebarToggle"
-      />
-      
-      <v-toolbar-title>Mail</v-toolbar-title>
-      
+      <template #prepend>
+        <v-btn
+          icon="mdi-menu"
+          variant="text"
+          @click="sidebarToggle"
+        />
+      </template>
+
+      <v-toolbar-title class="d-flex align-center">
+        <v-icon size="24" color="primary" class="mr-2">mdi-email</v-icon>
+        <span class="text-subtitle-1 font-weight-bold">Mail</span>
+      </v-toolbar-title>
+
       <v-spacer />
-      
+
+      <!-- Search -->
+      <v-text-field
+        v-model="searchQuery"
+        density="compact"
+        variant="outlined"
+        placeholder="Search messages..."
+        prepend-inner-icon="mdi-magnify"
+        hide-details
+        single-line
+        clearable
+        class="mail-toolbar-search mx-4"
+      />
+
       <v-btn
         icon="mdi-pencil"
         @click="handleMessageComposeFresh()"
@@ -265,7 +297,7 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
       <v-navigation-drawer
         v-model="sidebarVisible"
         contained
-        :permanent="!isMobile"
+        :permanent="sidebarVisible && !isMobile"
         :temporary="isMobile"
         width="280"
         class="mail-sidebar"
@@ -299,7 +331,7 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
             :style="{ '--mail-list-width': messageListWidth + '%' }"
           >
             <MessageList
-              :messages="currentMessages"
+              :messages="filteredMessages"
               :selected-collection="selectedFolder"
               :selected-message="selectedMessage"
               :selection-list="selectionList"
@@ -436,6 +468,18 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
 
 .mail-toolbar {
   flex-shrink: 0;
+  border-bottom: 1px solid rgb(var(--v-border-color)) !important;
+}
+
+.mail-toolbar-search {
+  max-width: 300px;
+}
+
+@media (max-width: 960px) {
+  .mail-toolbar-search {
+    max-width: 180px;
+    margin-inline: 8px !important;
+  }
 }
 
 .mail-content {