chore(deps): update dependency vue to v3.5.41

Reviewed-on: #47

.github/workflows/build-test.yml

@@ -0,0 +1,50 @@
+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 Documents Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/documents_manager
+          ref: main
+          path: server/modules/documents_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/documents
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: server/modules/documents
+
+      - name: Build
+        run: npm run build
+        working-directory: server/modules/documents

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

@@ -0,0 +1,50 @@
+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 Documents Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/documents_manager
+          ref: main
+          path: server/modules/documents_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/documents
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: server/modules/documents
+
+      - name: Run tests
+        run: npm run test:unit
+        working-directory: server/modules/documents

.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

package.json

@@ -10,10 +10,14 @@
     "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": {
-    "pinia": "^3.0.0",
+    "pinia": "^4.0.0",
     "vue": "^3.5.18",
     "vue-router": "^5.0.0",
     "vuetify": "^4.0.0"
@@ -23,6 +27,10 @@
     "@vue/tsconfig": "^0.9.0",
     "typescript": "~6.0.0",
     "vite": "^8.0.0",
-    "vue-tsc": "^3.0.5"
+    "vue-tsc": "^3.0.5",
+    "@vitest/coverage-v8": "^4.1.6",
+    "@vue/test-utils": "^2.4.10",
+    "jsdom": "^29.1.1",
+    "vitest": "^4.1.6"
   }
 }

src/components/FilesSidebar.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useDisplay } from 'vuetify'
-import type { ServiceObject } from '@DocumentsManager/models/service'
-
-const display = useDisplay()
-const isMobile = computed(() => display.mdAndDown.value)
-
-defineProps<{
-  modelValue: boolean
-  activeProviderId: string
-  activeServiceId: string
-  services: ServiceObject[]
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'navigate-home': []
-  'select-service': [service: ServiceObject]
-}>()
-</script>
-
-<template>
-  <v-navigation-drawer
-    :model-value="modelValue"
-    contained
-    @update:model-value="emit('update:modelValue', $event)"
-    :permanent="!isMobile"
-    :temporary="isMobile"
-    width="280"
-    class="files-sidebar"
-  >
-    <div class="pa-4">
-      <v-list density="compact" nav>
-        <v-list-subheader>Quick Access</v-list-subheader>
-        <v-list-item
-          prepend-icon="mdi-home"
-          title="Home"
-          @click="emit('navigate-home')"
-        />
-        <v-list-item
-          prepend-icon="mdi-clock-outline"
-          title="Recent"
-          disabled
-        />
-        <v-list-item
-          prepend-icon="mdi-star-outline"
-          title="Starred"
-          disabled
-        />
-        <v-list-item
-          prepend-icon="mdi-trash-can-outline"
-          title="Trash"
-          disabled
-        />
-      </v-list>
-
-      <v-divider class="my-4" />
-
-      <v-list density="compact" nav>
-        <v-list-subheader>Storage</v-list-subheader>
-        <v-list-item
-          v-for="service in services"
-          :key="`${service.provider}:${String(service.identifier ?? '')}`"
-          prepend-icon="mdi-harddisk"
-          :title="service.label || String(service.identifier ?? 'Unnamed Service')"
-          :subtitle="service.provider"
-          :active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
-          @click="emit('select-service', service)"
-        />
-
-        <div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
-          No storage services available.
-        </div>
-      </v-list>
-    </div>
-  </v-navigation-drawer>
-</template>
-
-<style scoped>
-.files-sidebar {
-  border-right: 1px solid rgb(var(--v-border-color)) !important;
-  overflow-y: auto;
-}
-
-.files-sidebar-empty {
-  line-height: 1.4;
-}
-</style>

src/components/FilesToolbar.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useDisplay } from 'vuetify'
 import type { ViewMode } from '@/types'
 
 const props = defineProps<{
@@ -19,9 +18,6 @@ const emit = defineEmits<{
   'new-folder': []
 }>()
 
-const display = useDisplay()
-const isMobile = computed(() => display.mdAndDown.value)
-
 const searchModel = computed({
   get: () => props.searchQuery,
   set: (value: string) => emit('update:searchQuery', value)
@@ -37,14 +33,16 @@ const viewModeModel = computed({
   <v-toolbar elevation="0" density="compact" class="files-toolbar">
     <template #prepend>
       <v-btn
-        v-if="isMobile"
         icon="mdi-menu"
         variant="text"
         @click="emit('toggle-sidebar')"
       />
     </template>
 
-    <v-toolbar-title>Files</v-toolbar-title>
+    <v-toolbar-title class="d-flex align-center">
+      <v-icon size="24" color="primary" class="mr-2">mdi-folder-multiple</v-icon>
+      <span class="text-subtitle-1 font-weight-bold">Files</span>
+    </v-toolbar-title>
 
     <v-spacer />
 
@@ -57,6 +55,7 @@ const viewModeModel = computed({
       prepend-inner-icon="mdi-magnify"
       hide-details
       single-line
+      clearable
       class="files-toolbar-search mx-4"
     />
 

src/components/Sidebar.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useDisplay } from 'vuetify'
+import type { ServiceObject } from '@DocumentsManager/models/service'
+
+const display = useDisplay()
+const isMobile = computed(() => display.mdAndDown.value)
+
+defineProps<{
+  modelValue: boolean
+  activeProviderId: string
+  activeServiceId: string
+  services: ServiceObject[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'navigate-home': []
+  'select-service': [service: ServiceObject]
+  'new-folder': []
+  'open-file-picker': []
+  'open-folder-picker': []
+}>()
+
+// Settings placeholder (no settings dialog exists for this module yet)
+const showSettingsDialog = ref(false)
+</script>
+
+<template>
+  <v-navigation-drawer
+    :model-value="modelValue"
+    contained
+    @update:model-value="emit('update:modelValue', $event)"
+    :permanent="modelValue && !isMobile"
+    :temporary="isMobile"
+    width="280"
+    class="files-sidebar"
+  >
+    <div class="pa-3">
+      <!-- Primary action -->
+      <v-menu>
+        <template #activator="{ props: menuProps }">
+          <v-btn
+            block
+            color="primary"
+            variant="tonal"
+            prepend-icon="mdi-plus"
+            append-icon="mdi-chevron-down"
+            class="mb-4 justify-start"
+            v-bind="menuProps"
+          >
+            New
+          </v-btn>
+        </template>
+        <v-list density="compact">
+          <v-list-item @click="emit('new-folder')">
+            <template #prepend>
+              <v-icon>mdi-folder-plus</v-icon>
+            </template>
+            <v-list-item-title>New Folder</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="emit('open-file-picker')">
+            <template #prepend>
+              <v-icon>mdi-file-upload</v-icon>
+            </template>
+            <v-list-item-title>Upload Files</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="emit('open-folder-picker')">
+            <template #prepend>
+              <v-icon>mdi-folder-upload</v-icon>
+            </template>
+            <v-list-item-title>Upload Folder</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
+      <!-- Quick Access -->
+      <div class="d-flex align-center mb-1 px-1">
+        <v-icon icon="mdi-star" size="14" class="mr-2 text-medium-emphasis" />
+        <span class="sidebar-section-label">Quick Access</span>
+      </div>
+      <v-divider class="mb-2" />
+      <v-list density="compact" nav class="pa-0">
+        <v-list-item
+          prepend-icon="mdi-home"
+          title="Home"
+          rounded="lg"
+          @click="emit('navigate-home')"
+        />
+        <v-list-item
+          prepend-icon="mdi-clock-outline"
+          title="Recent"
+          rounded="lg"
+          disabled
+        />
+        <v-list-item
+          prepend-icon="mdi-star-outline"
+          title="Starred"
+          rounded="lg"
+          disabled
+        />
+        <v-list-item
+          prepend-icon="mdi-trash-can-outline"
+          title="Trash"
+          rounded="lg"
+          disabled
+        />
+      </v-list>
+
+      <div class="my-3"></div>
+
+      <!-- Storage -->
+      <div class="d-flex align-center mb-1 px-1">
+        <v-icon icon="mdi-harddisk" size="14" class="mr-2 text-medium-emphasis" />
+        <span class="sidebar-section-label">Storage</span>
+      </div>
+      <v-divider class="mb-2" />
+      <v-list density="compact" nav class="pa-0">
+        <v-list-item
+          v-for="service in services"
+          :key="`${service.provider}:${String(service.identifier ?? '')}`"
+          prepend-icon="mdi-harddisk"
+          :title="service.label || String(service.identifier ?? 'Unnamed Service')"
+          :subtitle="service.provider"
+          :active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
+          rounded="lg"
+          @click="emit('select-service', service)"
+        />
+
+        <div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
+          No storage services available.
+        </div>
+      </v-list>
+    </div>
+
+    <!-- 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="showSettingsDialog = true"
+        >
+          Settings
+        </v-btn>
+      </div>
+    </template>
+  </v-navigation-drawer>
+
+  <!-- Settings placeholder dialog -->
+  <v-dialog v-model="showSettingsDialog" max-width="480">
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        <v-icon icon="mdi-cog" size="small" class="mr-2" />
+        Files Settings
+      </v-card-title>
+      <v-card-text class="text-medium-emphasis">
+        No settings are available for this module yet.
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="showSettingsDialog = false">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.files-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color)) !important;
+  overflow-y: auto;
+}
+
+.sidebar-section-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
+.files-sidebar-empty {
+  line-height: 1.4;
+}
+</style>

src/components/dialogs/index.ts

@@ -1,4 +0,0 @@
-export { default as NewFolderDialog } from './NewFolderDialog.vue'
-export { default as RenameDialog } from './RenameDialog.vue'
-export { default as DeleteConfirmDialog } from './DeleteConfirmDialog.vue'
-export { default as UploadDialog } from './UploadDialog.vue'

src/components/editor/index.ts

@@ -1 +0,0 @@
-export { default as FileEditorDialog } from './FileEditorDialog.vue'

src/components/index.ts

@@ -1,20 +0,0 @@
-// Layout components
-export { default as FilesToolbar } from './FilesToolbar.vue'
-export { default as FilesSidebar } from './FilesSidebar.vue'
-export { default as FilesBreadcrumbs } from './FilesBreadcrumbs.vue'
-export { default as FilesEmptyState } from './FilesEmptyState.vue'
-export { default as FilesDragOverlay } from './FilesDragOverlay.vue'
-export { default as FilesInfoPanel } from './FilesInfoPanel.vue'
-export { default as FileActionsMenu } from './FileActionsMenu.vue'
-
-// View components
-export * from './views'
-
-// Viewer
-export * from './viewer'
-
-// Dialog components
-export * from './dialogs'
-
-// Editor
-export * from './editor'

src/components/viewer/index.ts

@@ -1 +0,0 @@
-export { default as FilePreviewPopover } from './FilePreviewPopover.vue'

src/components/views/FilesDetailsView.vue

@@ -3,7 +3,8 @@ import { computed } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
-import { FileActionsMenu, FilePreviewPopover } from '@/components'
+import FileActionsMenu from '@/components/FileActionsMenu.vue'
+import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
 
 type ItemWithType = {
   item: CollectionObject | EntityObject

src/components/views/FilesGridView.vue

@@ -2,7 +2,8 @@
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
-import { FileActionsMenu, FilePreviewPopover } from '@/components'
+import FileActionsMenu from '@/components/FileActionsMenu.vue'
+import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
 
 type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
 

src/components/views/FilesListView.vue

@@ -3,7 +3,8 @@ import { computed } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
-import { FileActionsMenu, FilePreviewPopover } from '@/components'
+import FileActionsMenu from '@/components/FileActionsMenu.vue'
+import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
 
 type ItemWithType = {
   item: CollectionObject | EntityObject

src/components/views/index.ts

@@ -1,3 +0,0 @@
-export { default as FilesGridView } from './FilesGridView.vue'
-export { default as FilesListView } from './FilesListView.vue'
-export { default as FilesDetailsView } from './FilesDetailsView.vue'

src/pages/Main.vue

@@ -10,22 +10,20 @@ import { ServiceObject } from '@DocumentsManager/models/service'
 import { useServicesStore } from '@DocumentsManager/stores/servicesStore'
 
 // Components
-import {
-  FilesToolbar,
-  FilesSidebar,
-  FilesBreadcrumbs,
-  FilesEmptyState,
-  FilesDragOverlay,
-  FilesInfoPanel,
-  FilesGridView,
-  FilesListView,
-  FilesDetailsView,
-  FileEditorDialog,
-  NewFolderDialog,
-  RenameDialog,
-  DeleteConfirmDialog,
-  UploadDialog,
-} from '@/components'
+import FilesToolbar from '@/components/FilesToolbar.vue'
+import Sidebar from '@/components/Sidebar.vue'
+import FilesBreadcrumbs from '@/components/FilesBreadcrumbs.vue'
+import FilesEmptyState from '@/components/FilesEmptyState.vue'
+import FilesDragOverlay from '@/components/FilesDragOverlay.vue'
+import FilesInfoPanel from '@/components/FilesInfoPanel.vue'
+import FilesGridView from '@/components/views/FilesGridView.vue'
+import FilesListView from '@/components/views/FilesListView.vue'
+import FilesDetailsView from '@/components/views/FilesDetailsView.vue'
+import FileEditorDialog from '@/components/editor/FileEditorDialog.vue'
+import NewFolderDialog from '@/components/dialogs/NewFolderDialog.vue'
+import RenameDialog from '@/components/dialogs/RenameDialog.vue'
+import DeleteConfirmDialog from '@/components/dialogs/DeleteConfirmDialog.vue'
+import UploadDialog from '@/components/dialogs/UploadDialog.vue'
 
 // Check if file manager is available
 const display = useDisplay()
@@ -744,13 +742,16 @@ onMounted(async () => {
       <FilesDragOverlay :visible="isDragOver" />
 
       <!-- Sidebar -->
-      <FilesSidebar
+      <Sidebar
         v-model="sidebarVisible"
         :active-provider-id="activeProviderId"
         :active-service-id="activeServiceId"
         :services="availableServices"
         @navigate-home="fileManager.navigateToRoot()"
         @select-service="handleServiceSelect"
+        @new-folder="showNewFolderDialog = true"
+        @open-file-picker="openFilePicker"
+        @open-folder-picker="openFolderPicker"
       />
 
       <!-- Main Area -->

src/routes.ts

@@ -4,7 +4,7 @@ const routes: RouteRecordRaw[] = [
   {
     name: 'documents',
     path: '/',
-    component: () => import('@/pages/FilesPage.vue'),
+    component: () => import('@/pages/Main.vue'),
     meta: { layout: 'fixed' },
   },
 ]

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/**',
+      ],
+    },
+  },
+})

tsconfig.app.json

@@ -1,19 +1,19 @@
 {
   "extends": "../../tsconfig.app.json",
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "paths": {
-      "@/*": ["./src/*"],
-      "@KTXC/*": ["../../core/src/*"],
-      "@DocumentsManager/*": ["../documents_manager/src/*"]
-    }
-  },
   "include": [
     "src/**/*.ts", 
     "src/**/*.tsx", 
     "src/**/*.vue",
     "../documents_manager/src/**/*.ts",
     "../../core/src/**/*.ts"
-  ]
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@KTXC": ["../../core/src/shared/index.ts"],
+      "@KTXC/*": ["../../core/src/*"],
+      "@DocumentsManager/*": ["../documents_manager/src/*"]
+    }
+  },
 }