fix(deps): update dependency pinia to v4

Reviewed-on: #83

.github/workflows/build-test.yml

@@ -0,0 +1,58 @@
+name: Build Test
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Retrieve Server Install Action
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/action-server-install
+          ref: main
+          path: action-server-install
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install Server
+        uses: ./action-server-install
+        with:
+          install-php: 'false'
+          install-node: 'true'
+          php-version: '8.5'
+          node-version: '24'
+          server-path: './server'
+
+      - name: Install Mail Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/mail_manager
+          ref: main
+          path: server/modules/mail_manager
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install People Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/people_manager
+          ref: main
+          path: server/modules/people_manager
+          github-server-url: https://git.ktrix.dev
+
+      - name: Checkout Pull Request
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.repository }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          path: server/modules/mail
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: server/modules/mail
+
+      - name: Build
+        run: npm run build
+        working-directory: server/modules/mail

.github/workflows/js-unit-tests.yml

@@ -0,0 +1,58 @@
+name: JS Unit Tests
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Retrieve Server Install Action
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/action-server-install
+          ref: main
+          path: action-server-install
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install Server
+        uses: ./action-server-install
+        with:
+          install-php: 'false'
+          install-node: 'true'
+          php-version: '8.5'
+          node-version: '24'
+          server-path: './server'
+
+      - name: Install Mail Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/mail_manager
+          ref: main
+          path: server/modules/mail_manager
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install People Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/people_manager
+          ref: main
+          path: server/modules/people_manager
+          github-server-url: https://git.ktrix.dev
+
+      - name: Checkout Pull Request
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.repository }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          path: server/modules/mail
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: server/modules/mail
+
+      - name: Run tests
+        run: npm run test:unit
+        working-directory: server/modules/mail

.github/workflows/php-integration-tests.yml

@@ -0,0 +1,59 @@
+name: PHP Integration Tests
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  test:
+    name: Integration Tests
+    runs-on: ubuntu-latest
+    services:
+      mongo:
+        image: mongo:7
+        options: >-
+          --health-cmd "mongosh --quiet --eval \"db.adminCommand('ping')\""
+          --health-interval 5s
+          --health-timeout 5s
+          --health-retries 12
+
+    steps:
+      - name: Retrieve Server Install Action
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/action-server-install
+          ref: main
+          path: action-server-install
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install server
+        uses: ./action-server-install
+        with:
+          install-php: 'true'
+          php-version: '8.5'
+          server-path: './server'
+          database-uri: 'mongodb://mongo:27017/?tls=false'
+          database-name: 'ktrix_ci'
+          app-environment: 'test'
+
+      - name: Checkout module under test
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.repository }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          path: server/modules/mail
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install module dependencies
+        run: composer install --prefer-dist --no-progress
+        working-directory: server/modules/mail
+
+      - name: Install and enable module
+        working-directory: server
+        run: |
+          php bin/console module:install mail
+          php bin/console module:enable mail
+
+      - name: Run integration tests
+        working-directory: server/modules/mail
+        run: composer test:integration

.github/workflows/php-unit-tests.yml

@@ -0,0 +1,42 @@
+name: PHP Unit Tests
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Retrieve Server Install Action
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/action-server-install
+          ref: main
+          path: action-server-install
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install Server
+        uses: ./action-server-install
+        with:
+          install-php: 'true'
+          install-node: 'false'
+          php-version: '8.5'
+          node-version: '24'
+          server-path: './server'
+
+      - name: Checkout Pull Request
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.repository }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          path: server/modules/mail
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install dependencies
+        run: composer install --prefer-dist --no-progress
+        working-directory: server/modules/mail
+
+      - name: Run tests
+        run: composer test:unit
+        working-directory: server/modules/mail

.gitignore

@@ -15,10 +15,7 @@ node_modules/
 /vendor/
 /lib/vendor/
 coverage/
-phpunit.xml.cache
-.phpunit.result.cache
-.php-cs-fixer.cache
-.phpstan.cache
+*.cache
 .phpactor/
 
 # Editors

composer.json

@@ -9,6 +9,18 @@
         }
     },
     "require": {
-        "php": ">=8.2"
+        "php": ">=8.3"
+    },
+    "require-dev": {
+        "phpunit/phpunit": "^12.0"
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "KTXT\\Mail\\Tests\\": "tests/php/"
+        }
+    },
+    "scripts": {
+        "test:unit": "phpunit --configuration tests/php/phpunit.xml --testsuite \"Unit Tests\" --colors=always --testdox",
+        "test:integration": "phpunit --configuration tests/php/phpunit.xml --testsuite \"Integration Tests\" --colors=always --testdox"
     }
 }

package.json

@@ -11,7 +11,11 @@
     "dev": "vite build --mode development --config vite.config.ts",
     "watch": "vite build --mode development --watch --config vite.config.ts",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "test": "vitest run --config tests/js/vitest.config.ts",
+    "test:unit": "vitest run --config tests/js/vitest.config.ts",
+    "test:watch": "vitest watch --config tests/js/vitest.config.ts",
+    "test:coverage": "vitest run --coverage --config tests/js/vitest.config.ts"
   },
   "dependencies": {
     "@tiptap/vue-3": "^3.0.0",
@@ -22,14 +26,18 @@
     "@tiptap/extension-underline": "^3.0.0",
     "vue": "^3.4.0",
     "vue-router": "^5.0.0",
-    "pinia": "^3.0.0",
+    "pinia": "^4.0.0",
     "vuetify": "^4.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/tsconfig": "^0.9.0",
-    "typescript": "^6.0.0",
+    "typescript": "~6.0.0",
     "vite": "^8.0.0",
-    "vue-tsc": "^3.0.0"
+    "vue-tsc": "^3.0.0",
+    "@vitest/coverage-v8": "^4.1.6",
+    "@vue/test-utils": "^2.4.10",
+    "jsdom": "^29.1.1",
+    "vitest": "^4.1.6"
   }
 }

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>

src/pages/Main.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'
@@ -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,
@@ -75,6 +74,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))
 
@@ -96,8 +110,6 @@ const {
 
 const sidebarToggle = () => mailUiStore.sidebarToggle()
 
-const handleSettingsOpen = () => mailUiStore.settingsOpen()
-
 const handleFolderSelect = (folder: CollectionObject) => mailUiStore.selectFolder(folder)
 
 const handleFolderCreateConfirm = async (folderName: string) => {
@@ -108,7 +120,7 @@ const handleFolderCreateConfirm = async (folderName: string) => {
       handleFolderSelect(mutatedFolder)
     }
   } catch (error: unknown) {
-    console.error('[MailPage] Failed to create folder:', error)
+    console.error('[Mail] Failed to create folder:', error)
   }
 }
 
@@ -120,7 +132,7 @@ const handleFolderEditConfirm = async (folderName: string) => {
       handleFolderSelect(mutatedFolder)
     }
   } catch (error: unknown) {
-    console.error('[MailPage] Failed to rename folder:', error)
+    console.error('[Mail] Failed to rename folder:', error)
   }
 }
 
@@ -128,7 +140,7 @@ const handleFolderDeleteConfirm = async () => {
   try {
     await mailUiStore.confirmDeleteFolder()
   } catch (error: unknown) {
-    console.error('[MailPage] Failed to delete folder:', error)
+    console.error('[Mail] Failed to delete folder:', error)
   }
 }
 
@@ -136,7 +148,7 @@ const handleFolderMoveConfirm = async (targetFolder: CollectionObject) => {
   try {
     await mailUiStore.confirmMoveFolder(targetFolder)
   } catch (error: unknown) {
-    console.error('[MailPage] Failed to move folder:', error)
+    console.error('[Mail] Failed to move folder:', error)
   }
 }
 
@@ -216,17 +228,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()"
@@ -262,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="!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">
@@ -299,7 +302,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 +439,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 {
@@ -446,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;

src/routes.ts

@@ -2,7 +2,7 @@ const routes = [
   {
     name: 'mail',
     path: '/',
-    component: () => import('@/pages/MailPage.vue'),
+    component: () => import('@/pages/Main.vue'),
     meta: {
       title: 'Mail',
       requiresAuth: true,

tests/js/unit/base.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Basic Tests', () => {
+  it('should perform basic assertion', () => {
+    expect(true).toBe(true)
+  })
+
+  it('should test array operations', () => {
+    const array = ['foo', 'bar', 'baz']
+
+    expect(array).toHaveLength(3)
+    expect(array).toContain('bar')
+    expect(array[0]).toBe('foo')
+  })
+
+  it('should test string operations', () => {
+    const string = 'Hello, World!'
+
+    expect(string).toContain('World')
+    expect(string.length).toBe(13)
+  })
+
+  it('should test object operations', () => {
+    const obj = { foo: 'bar', count: 42 }
+
+    expect(obj).toHaveProperty('foo')
+    expect(obj.foo).toBe('bar')
+    expect(obj.count).toBeGreaterThan(40)
+  })
+})

tests/js/vitest.config.ts

@@ -0,0 +1,33 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig, configDefaults } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '../../src'),
+      '@KTXC': path.resolve(__dirname, '../../../../core/src'),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    exclude: [...configDefaults.exclude, 'e2e/**'],
+    root: fileURLToPath(new URL('../../', import.meta.url)),
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'tests/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/dist/**',
+      ],
+    },
+  },
+})

tests/php/Integration/BaseTest.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace KTXT\Mail\Tests\Integration;
+
+use PHPUnit\Framework\TestCase;
+
+class BaseTest extends TestCase
+{
+    public function testBasicAssertion(): void
+    {
+        $this->assertTrue(true);
+    }
+
+    public function testArrayOperations(): void
+    {
+        $array = ['foo' => 'bar'];
+
+        $this->assertArrayHasKey('foo', $array);
+        $this->assertEquals('bar', $array['foo']);
+    }
+
+    public function testStringOperations(): void
+    {
+        $string = 'Hello, World!';
+
+        $this->assertStringContainsString('World', $string);
+        $this->assertEquals(13, strlen($string));
+    }
+}

tests/php/Unit/BaseTest.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace KTXT\Mail\Tests\Unit;
+
+use PHPUnit\Framework\TestCase;
+
+class BaseTest extends TestCase
+{
+    public function testBasicAssertion(): void
+    {
+        $this->assertTrue(true);
+    }
+
+    public function testArrayOperations(): void
+    {
+        $array = ['foo' => 'bar'];
+
+        $this->assertArrayHasKey('foo', $array);
+        $this->assertEquals('bar', $array['foo']);
+    }
+
+    public function testStringOperations(): void
+    {
+        $string = 'Hello, World!';
+
+        $this->assertStringContainsString('World', $string);
+        $this->assertEquals(13, strlen($string));
+    }
+}

tests/php/bootstrap.php

@@ -0,0 +1,17 @@
+<?php
+
+require dirname(__DIR__, 2).'/vendor/autoload.php';
+
+// When this module is checked out inside a full server (server/modules/<handle>,
+// as it is in CI and in this monorepo checkout), also load the server's own
+// core/shared autoloader so tests can reference framework (KTXC/KTXF) types.
+// Standalone module checkouts without a server alongside them skip this.
+define('SERVER_ROOT', dirname(__DIR__, 4));
+$serverAutoload = SERVER_ROOT . '/vendor/autoload.php';
+if (is_file($serverAutoload)) {
+    require $serverAutoload;
+}
+
+if (isset($_SERVER['APP_DEBUG']) && $_SERVER['APP_DEBUG']) {
+    umask(0000);
+}

tests/php/phpunit.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!-- https://phpunit.readthedocs.io/en/latest/configuration.html -->
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="../../vendor/phpunit/phpunit/phpunit.xsd"
+         colors="true"
+         failOnDeprecation="true"
+         failOnNotice="true"
+         failOnWarning="true"
+         bootstrap="bootstrap.php"
+         cacheDirectory="../../.phpunit.cache"
+>
+    <php>
+        <ini name="display_errors" value="1" />
+        <ini name="error_reporting" value="-1" />
+        <server name="APP_ENV" value="test" force="true" />
+        <server name="SHELL_VERBOSITY" value="-1" />
+    </php>
+
+    <testsuites>
+        <testsuite name="Unit Tests">
+            <directory>Unit</directory>
+        </testsuite>
+        <testsuite name="Integration Tests">
+            <directory>Integration</directory>
+        </testsuite>
+    </testsuites>
+
+    <source ignoreSuppressionOfDeprecations="true"
+            ignoreIndirectDeprecations="true"
+            restrictNotices="true"
+            restrictWarnings="true"
+    >
+        <include>
+            <directory>../../lib</directory>
+        </include>
+    </source>
+
+    <extensions>
+    </extensions>
+</phpunit>