chore(deps): update dependency vue-tsc to v3.3.0

.github/workflows/build-test.yml

@@ -1,50 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

.github/workflows/renovate.yml

@@ -25,17 +25,11 @@ jobs:
           tools: composer:v2
 
       - name: Install Renovate
-        run: |
+        run: npm install -g renovate
-          npm install --global --no-audit --fund=false \
-            --prefix "${{ runner.temp }}/renovate-npm" \
-            --cache "${{ runner.temp }}/renovate-npm-cache" \
-            renovate
-          "${{ runner.temp }}/renovate-npm/bin/renovate" --version
 
       - name: Run Renovate
         env:
           RENOVATE_TOKEN: ${{ secrets.RENOVATE_TOKEN }}
           RENOVATE_PLATFORM: gitea
           RENOVATE_ENDPOINT: https://git.ktrix.dev/api/v1
-        run: |
+        run: renovate ${{ gitea.repository }}
-          "${{ runner.temp }}/renovate-npm/bin/renovate" ${{ gitea.repository }}

.gitignore

@@ -12,10 +12,12 @@ node_modules/
 /static/
 
 # Backend development
-/vendor/
 /lib/vendor/
 coverage/
-*.cache
+phpunit.xml.cache
+.phpunit.result.cache
+.php-cs-fixer.cache
+.phpstan.cache
 .phpactor/
 
 # Editors

composer.lock

@@ -1,18 +0,0 @@
-{
-    "_readme": [
-        "This file locks the dependencies of your project to a known state",
-        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
-        "This file is @generated automatically"
-    ],
-    "content-hash": "af70f170d61e4218f6e8d296b529b109",
-    "packages": [],
-    "packages-dev": [],
-    "aliases": [],
-    "minimum-stability": "stable",
-    "stability-flags": {},
-    "prefer-stable": false,
-    "prefer-lowest": false,
-    "platform": {},
-    "platform-dev": {},
-    "plugin-api-version": "2.6.0"
-}

package.json

@@ -10,14 +10,10 @@
     "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": "^4.0.0",
+    "pinia": "^3.0.0",
     "vue": "^3.5.18",
     "vue-router": "^5.0.0",
     "vuetify": "^4.0.0"
@@ -27,10 +23,6 @@
     "@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

@@ -0,0 +1,88 @@
+<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"
+    @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,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useDisplay } from 'vuetify'
 import type { ViewMode } from '@/types'
 
 const props = defineProps<{
@@ -18,6 +19,9 @@ 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)
@@ -30,19 +34,15 @@ const viewModeModel = computed({
 </script>
 
 <template>
-  <v-toolbar elevation="0" density="compact" class="files-toolbar">
+  <v-app-bar elevation="0" density="compact" class="files-toolbar">
     <template #prepend>
-      <v-btn
+      <v-app-bar-nav-icon
-        icon="mdi-menu"
+        v-if="isMobile"
-        variant="text"
         @click="emit('toggle-sidebar')"
       />
     </template>
 
-    <v-toolbar-title class="d-flex align-center">
+    <v-app-bar-title>Files</v-app-bar-title>
-      <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 />
 
@@ -55,7 +55,6 @@ const viewModeModel = computed({
       prepend-inner-icon="mdi-magnify"
       hide-details
       single-line
-      clearable
       class="files-toolbar-search mx-4"
     />
 
@@ -123,7 +122,7 @@ const viewModeModel = computed({
         <span class="d-none d-sm-inline">New Folder</span>
       </v-btn>
     </template>
-  </v-toolbar>
+  </v-app-bar>
 </template>
 
 <style scoped>

src/components/Sidebar.vue

@@ -1,189 +0,0 @@
-<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

@@ -0,0 +1,4 @@
+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

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

src/components/index.ts

@@ -0,0 +1,20 @@
+// 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'
+
+// Dialog components
+export * from './dialogs'
+
+// Viewer
+export * from './viewer'
+
+// Editor
+export * from './editor'

src/components/viewer/FilePreviewPopover.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-/**
- * Thin Documents-side adapter that drops the media_viewer module's hover
- * popover onto a file item. Resolves the popover from the integration store
- * and builds a generic MediaItem from the entity; the popover anchors to its
- * parent element via `activator="parent"`.
- */
-import { computed, defineAsyncComponent } from 'vue'
-import { useIntegrationStore } from '@KTXC'
-import { EntityObject } from '@DocumentsManager/models/entity'
-
-const props = defineProps<{
-  entity: EntityObject
-  /** Same resolver the fullscreen dialog uses (returns a GET URL string). */
-  source: (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
-}>()
-
-const emit = defineEmits<{
-  expand: [entity: EntityObject]
-}>()
-
-const integrationStore = useIntegrationStore()
-
-const popoverComponent = computed(() => {
-  // Integration ids are prefixed with the module handle (e.g. 'media_viewer.popover').
-  const entry = integrationStore.getItems('media_viewer').find(i => i.id.endsWith('.popover'))
-  return entry?.component
-    ? defineAsyncComponent(entry.component as () => Promise<unknown>)
-    : null
-})
-
-const item = computed(() => ({
-  id: String(props.entity.identifier ?? ''),
-  title: props.entity.properties.label ?? String(props.entity.identifier ?? ''),
-  mime: props.entity.properties.mime ?? '',
-  meta: { collection: props.entity.collection ? String(props.entity.collection) : null },
-}))
-</script>
-
-<template>
-  <component
-    :is="popoverComponent"
-    v-if="popoverComponent"
-    :item="item"
-    :source="source"
-    @expand="emit('expand', entity)"
-  />
-</template>

src/components/viewer/FileViewerDialog.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
+import { EntityObject } from '@DocumentsManager/models/entity'
+import { useFileViewer } from '@/composables'
+
+const props = defineProps<{
+  modelValue: boolean
+  entity: EntityObject | null
+  /** All files in the current folder, used for prev/next navigation */
+  allEntities: EntityObject[]
+  /** Converts an entity into a URL usable as an img/video src */
+  getUrl: (entityId: string, collectionId: string | null) => string
+  /** Called to trigger a browser download of an entity */
+  downloadEntity: (entityId: string, collectionId: string | null) => void
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  /** Request the parent to switch to a different entity */
+  'navigate': [entity: EntityObject]
+}>()
+
+const fileViewer = useFileViewer()
+
+// ── Derived state ──────────────────────────────────────────────────────────
+
+const url = computed(() => {
+  if (!props.entity) return ''
+  return props.getUrl(
+    String(props.entity.identifier ?? ''),
+    props.entity.collection ? String(props.entity.collection) : null,
+  )
+})
+
+const mime = computed(() => props.entity?.properties.mime ?? '')
+
+const viewer = computed(() => {
+  if (!mime.value) return null
+  return fileViewer.findViewer(mime.value)
+})
+
+// Wrap the raw () => import() factory in defineAsyncComponent so Vue
+// actually resolves it instead of rendering the Promise as text.
+const viewerComponent = computed(() => {
+  if (!viewer.value?.component) return null
+  return defineAsyncComponent(viewer.value.component as () => Promise<unknown>)
+})
+
+const filename = computed(
+  () => props.entity?.properties.label ?? String(props.entity?.identifier ?? ''),
+)
+
+const currentIndex = computed(() => {
+  if (!props.entity) return -1
+  return props.allEntities.findIndex(e => e.identifier === props.entity!.identifier)
+})
+
+const hasPrev = computed(() => currentIndex.value > 0)
+const hasNext = computed(() => currentIndex.value < props.allEntities.length - 1)
+
+// Viewer component may take a moment to load; track async state
+const viewerLoading = ref(false)
+
+watch(() => props.entity, () => {
+  viewerLoading.value = false
+})
+
+// ── Navigation ──────────────────────────────────────────────────────────────
+
+function navigatePrev() {
+  if (!hasPrev.value) return
+  emit('navigate', props.allEntities[currentIndex.value - 1])
+}
+
+function navigateNext() {
+  if (!hasNext.value) return
+  emit('navigate', props.allEntities[currentIndex.value + 1])
+}
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+function handleDownload() {
+  if (!props.entity) return
+  props.downloadEntity(
+    String(props.entity.identifier ?? ''),
+    props.entity.collection ? String(props.entity.collection) : null,
+  )
+}
+
+// ── Keyboard shortcuts ──────────────────────────────────────────────────────
+
+function handleKeydown(e: KeyboardEvent) {
+  if (!props.modelValue) return
+  if (e.key === 'ArrowLeft') { e.preventDefault(); navigatePrev() }
+  else if (e.key === 'ArrowRight') { e.preventDefault(); navigateNext() }
+  else if (e.key === 'Escape') { e.preventDefault(); close() }
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown))
+onUnmounted(() => window.removeEventListener('keydown', handleKeydown))
+</script>
+
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    fullscreen
+    transition="dialog-bottom-transition"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="viewer-shell">
+
+      <!-- ── Toolbar ─────────────────────────────────────────────────── -->
+      <div class="viewer-toolbar">
+        <v-btn icon="mdi-close" variant="text" @click="close" />
+
+        <span class="viewer-filename text-truncate">{{ filename }}</span>
+
+        <div class="viewer-toolbar-actions">
+          <span v-if="allEntities.length > 1" class="viewer-counter text-caption text-medium-emphasis mr-2">
+            {{ currentIndex + 1 }} / {{ allEntities.length }}
+          </span>
+          <v-btn
+            icon="mdi-download"
+            variant="text"
+            size="small"
+            title="Download"
+            @click="handleDownload"
+          />
+        </div>
+      </div>
+
+      <!-- ── Content area ───────────────────────────────────────────── -->
+      <div class="viewer-content">
+
+        <!-- Prev arrow -->
+        <div class="viewer-nav viewer-nav--prev">
+          <v-btn
+            v-if="hasPrev"
+            icon="mdi-chevron-left"
+            variant="elevated"
+            size="large"
+            @click="navigatePrev"
+          />
+        </div>
+
+        <!-- Viewer / fallback -->
+        <div class="viewer-stage">
+          <template v-if="entity">
+            <!-- Registered viewer component -->
+            <Suspense v-if="viewer">
+              <template #default>
+                <component
+                  :is="viewerComponent"
+                  :url="url"
+                  :entity="entity"
+                  :mime="mime"
+                  class="viewer-component"
+                />
+              </template>
+              <template #fallback>
+                <div class="viewer-loading">
+                  <v-progress-circular indeterminate color="primary" />
+                </div>
+              </template>
+            </Suspense>
+
+            <!-- No viewer registered for this type -->
+            <div v-else class="viewer-no-preview">
+              <v-icon size="64" color="grey-lighten-1">mdi-file-question-outline</v-icon>
+              <p class="text-h6 mt-4">No preview available</p>
+              <p class="text-body-2 text-medium-emphasis mb-6">
+                {{ mime || 'Unknown file type' }}
+              </p>
+              <v-btn
+                prepend-icon="mdi-download"
+                variant="tonal"
+                @click="handleDownload"
+              >
+                Download file
+              </v-btn>
+            </div>
+          </template>
+        </div>
+
+        <!-- Next arrow -->
+        <div class="viewer-nav viewer-nav--next">
+          <v-btn
+            v-if="hasNext"
+            icon="mdi-chevron-right"
+            variant="elevated"
+            size="large"
+            @click="navigateNext"
+          />
+        </div>
+
+      </div>
+    </div>
+  </v-dialog>
+</template>
+
+<style scoped>
+.viewer-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgb(var(--v-theme-surface));
+}
+
+/* Toolbar */
+.viewer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  min-height: 56px;
+  flex-shrink: 0;
+}
+
+.viewer-filename {
+  flex: 1;
+  font-size: 0.9375rem;
+  font-weight: 500;
+}
+
+.viewer-toolbar-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Content */
+.viewer-content {
+  flex: 1;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+}
+
+/* Prev/Next nav columns */
+.viewer-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  flex-shrink: 0;
+  padding: 8px;
+}
+
+/* Main stage */
+.viewer-stage {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  position: relative;
+}
+
+.viewer-component {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* Loading */
+.viewer-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+
+/* No-preview fallback */
+.viewer-no-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 32px;
+}
+
+@media (max-width: 600px) {
+  .viewer-nav {
+    width: 40px;
+    padding: 4px;
+  }
+}
+</style>

src/components/viewer/index.ts

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

src/components/views/FilesDetailsView.vue

@@ -3,21 +3,17 @@ 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 from '@/components/FileActionsMenu.vue'
+import { FileActionsMenu } from '@/components'
-import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
 
 type ItemWithType = {
   item: CollectionObject | EntityObject
   type: 'collection' | 'entity'
 }
 
-type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
-
 const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
-  previewSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -109,13 +105,6 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
               @show-details="emit('show-details', $event)"
             />
           </div>
-
-          <FilePreviewPopover
-            v-if="previewSource"
-            :entity="(wrapped.item as EntityObject)"
-            :source="previewSource"
-            @expand="emit('open', $event)"
-          />
         </div>
       </template>
     </v-virtual-scroll>

src/components/views/FilesGridView.vue

@@ -2,16 +2,12 @@
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
-import FileActionsMenu from '@/components/FileActionsMenu.vue'
+import { FileActionsMenu } from '@/components'
-import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
-
-type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
 
 defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
-  previewSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -77,13 +73,6 @@ const emit = defineEmits<{
       <v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
       <div class="files-grid-label">{{ entity.properties.label || String(entity.identifier ?? '') }}</div>
       <div class="files-grid-size">{{ formatSize(entity.properties.size) }}</div>
-
-      <FilePreviewPopover
-        v-if="previewSource"
-        :entity="entity"
-        :source="previewSource"
-        @expand="emit('open', $event)"
-      />
     </div>
   </div>
 </template>

src/components/views/FilesListView.vue

@@ -3,21 +3,17 @@ import { computed } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
-import FileActionsMenu from '@/components/FileActionsMenu.vue'
+import { FileActionsMenu } from '@/components'
-import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
 
 type ItemWithType = {
   item: CollectionObject | EntityObject
   type: 'collection' | 'entity'
 }
 
-type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
-
 const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
-  previewSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -94,13 +90,6 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
             @show-details="emit('show-details', $event)"
           />
         </template>
-
-        <FilePreviewPopover
-          v-if="previewSource"
-          :entity="(wrapped.item as EntityObject)"
-          :source="previewSource"
-          @expand="emit('open', $event)"
-        />
       </v-list-item>
     </template>
   </v-virtual-scroll>

src/components/views/index.ts

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

src/composables/index.ts

@@ -5,9 +5,11 @@
 export { useFileManager } from './useFileManager'
 export { useFileSelection } from './useFileSelection'
 export { useFileUpload } from './useFileUpload'
+export { useFileViewer } from './useFileViewer'
 export { useFileEditor } from './useFileEditor'
 
 export type { UseFileManagerOptions } from './useFileManager'
 export type { UseFileSelectionOptions } from './useFileSelection'
 export type { UseFileUploadOptions, FileUploadProgress } from './useFileUpload'
+export type { UseFileViewerReturn } from './useFileViewer'
 export type { UseFileEditorReturn } from './useFileEditor'

src/composables/useFileManager.ts

@@ -241,8 +241,8 @@ export function useFileManager(options: UseFileManagerOptions) {
 
   // Initialize - fetch providers, services, and initial nodes if autoFetch
   const initialize = async () => {
-    await providersStore.list([currentProviderId()])
+    await providersStore.list()
-    await servicesStore.list()
+    await servicesStore.list({ [currentProviderId()]: true })
     if (autoFetch) {
       await refresh()
     }

src/composables/useFileViewer.ts

@@ -0,0 +1,81 @@
+/**
+ * useFileViewer — resolves which registered viewer can handle a given MIME type.
+ *
+ * Other modules register viewers at the `documents_file_viewer` integration
+ * point by including an entry in their `integrations.ts`:
+ *
+ * ```ts
+ * documents_file_viewer: [{
+ *   id: 'my_viewer',
+ *   meta: { mimeTypes: ['application/pdf'] },
+ *   component: () => import('./components/MyViewer.vue'),
+ * }]
+ * ```
+ *
+ * Viewer components receive the props:  `url: string`, `entity: EntityObject`, `mime: string`.
+ */
+
+import { useIntegrationStore } from '@KTXC'
+import type { EntityObject } from '@DocumentsManager/models/entity'
+
+const INTEGRATION_POINT = 'documents_file_viewer'
+
+function mimeMatchesPattern(mime: string, pattern: string): boolean {
+  if (pattern.endsWith('/*')) {
+    // e.g. 'image/*' matches 'image/png', 'image/jpeg', …
+    return mime.startsWith(pattern.slice(0, -1))
+  }
+  return mime === pattern
+}
+
+function viewerMatchesMime(
+  mime: string,
+  mimeTypes?: string[],
+  mimePatterns?: string[],
+): boolean {
+  if (mimeTypes?.includes(mime)) return true
+  if (mimePatterns) {
+    for (const pattern of mimePatterns) {
+      if (mimeMatchesPattern(mime, pattern)) return true
+    }
+  }
+  return false
+}
+
+export function useFileViewer() {
+  const integrationStore = useIntegrationStore()
+
+  /**
+   * Returns the highest-priority registered viewer that can handle `mime`,
+   * or `null` if none is found.
+   */
+  function findViewer(mime: string) {
+    // getItems() already returns items sorted by priority (ascending)
+    const viewers = integrationStore.getItems(INTEGRATION_POINT)
+    for (const viewer of viewers) {
+      if (
+        viewerMatchesMime(
+          mime,
+          viewer.meta?.mimeTypes as string[] | undefined,
+          viewer.meta?.mimePatterns as string[] | undefined,
+        )
+      ) {
+        return viewer
+      }
+    }
+    return null
+  }
+
+  /**
+   * Convenience: returns true if any registered viewer can open this entity.
+   */
+  function canOpen(entity: EntityObject): boolean {
+    const mime = entity.properties.mime
+    if (!mime) return false
+    return findViewer(mime) !== null
+  }
+
+  return { findViewer, canOpen }
+}
+
+export type UseFileViewerReturn = ReturnType<typeof useFileViewer>

src/pages/FilesPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick, defineAsyncComponent } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import { useDisplay } from 'vuetify'
-import { useModuleStore, useIntegrationStore } from '@KTXC'
+import { useModuleStore } from '@KTXC'
 import { useFileManager, useFileSelection, useFileUpload, useFileEditor } from '@/composables'
 import type { ViewMode, SortField, SortOrder, BreadcrumbItem } from '@/types'
 import { CollectionObject } from '@DocumentsManager/models/collection'
@@ -10,27 +10,29 @@ import { ServiceObject } from '@DocumentsManager/models/service'
 import { useServicesStore } from '@DocumentsManager/stores/servicesStore'
 
 // Components
-import FilesToolbar from '@/components/FilesToolbar.vue'
+import {
-import Sidebar from '@/components/Sidebar.vue'
+  FilesToolbar,
-import FilesBreadcrumbs from '@/components/FilesBreadcrumbs.vue'
+  FilesSidebar,
-import FilesEmptyState from '@/components/FilesEmptyState.vue'
+  FilesBreadcrumbs,
-import FilesDragOverlay from '@/components/FilesDragOverlay.vue'
+  FilesEmptyState,
-import FilesInfoPanel from '@/components/FilesInfoPanel.vue'
+  FilesDragOverlay,
-import FilesGridView from '@/components/views/FilesGridView.vue'
+  FilesInfoPanel,
-import FilesListView from '@/components/views/FilesListView.vue'
+  FilesGridView,
-import FilesDetailsView from '@/components/views/FilesDetailsView.vue'
+  FilesListView,
-import FileEditorDialog from '@/components/editor/FileEditorDialog.vue'
+  FilesDetailsView,
-import NewFolderDialog from '@/components/dialogs/NewFolderDialog.vue'
+  FileViewerDialog,
-import RenameDialog from '@/components/dialogs/RenameDialog.vue'
+  FileEditorDialog,
-import DeleteConfirmDialog from '@/components/dialogs/DeleteConfirmDialog.vue'
+  NewFolderDialog,
-import UploadDialog from '@/components/dialogs/UploadDialog.vue'
+  RenameDialog,
+  DeleteConfirmDialog,
+  UploadDialog,
+} from '@/components'
 
 // Check if file manager is available
 const display = useDisplay()
 const isMobile = computed(() => display.mdAndDown.value)
 
 const moduleStore = useModuleStore()
-const integrationStore = useIntegrationStore()
 const isFileManagerAvailable = computed(() => {
   return moduleStore.has('documents_manager') || moduleStore.has('DocumentsManager')
 })
@@ -96,45 +98,9 @@ const uploadPreparationMessage = ref('Preparing uploads...')
 const uploadPreparationProcessedCount = ref(0)
 const uploadPreparationTotalCount = ref(0)
 
-// Viewer state — the media viewer dialog is provided by the media_viewer module
+// Viewer state
-// and resolved from the integration store so Documents does not import it.
+const viewerEntity = ref<EntityObject | null>(null)
-interface ViewerItem {
-  id: string
-  title: string
-  mime: string
-  size?: number | null
-  meta?: Record<string, unknown>
-}
-
 const showViewer = ref(false)
-const viewerIndex = ref(0)
-
-const mediaViewerDialog = computed(() => {
-  // Integration ids are prefixed with the module handle (e.g. 'media_viewer.dialog').
-  const entry = integrationStore.getItems('media_viewer').find(i => i.id.endsWith('.dialog'))
-  return entry?.component ? defineAsyncComponent(entry.component as () => Promise<unknown>) : null
-})
-
-const viewerItems = computed<ViewerItem[]>(() =>
-  sortedItems.value.entities.map(entityToViewerItem),
-)
-
-function entityToViewerItem(entity: EntityObject): ViewerItem {
-  return {
-    id: String(entity.identifier ?? ''),
-    title: entity.properties.label ?? String(entity.identifier ?? ''),
-    mime: entity.properties.mime ?? '',
-    meta: { collection: entity.collection ? String(entity.collection) : null },
-  }
-}
-
-function resolveViewerSource(item: ViewerItem): string {
-  return fileManager.getEntityUrl(item.id, (item.meta?.collection as string | null) ?? null)
-}
-
-function downloadViewerItem(item: ViewerItem): void {
-  fileManager.downloadEntity(item.id, (item.meta?.collection as string | null) ?? null)
-}
 
 // Editor state
 const fileEditorComposable = useFileEditor()
@@ -197,9 +163,7 @@ async function queueFolderUploads(
 
 function handleOpenItem(item: CollectionObject | EntityObject) {
   if (item instanceof EntityObject) {
-    const id = String(item.identifier ?? '')
+    viewerEntity.value = item
-    const idx = viewerItems.value.findIndex(m => m.id === id)
-    viewerIndex.value = idx >= 0 ? idx : 0
     showViewer.value = true
   } else {
     // Folders: navigate into them when opened via double-click / action
@@ -208,6 +172,10 @@ function handleOpenItem(item: CollectionObject | EntityObject) {
   }
 }
 
+function handleViewerNavigate(entity: EntityObject) {
+  viewerEntity.value = entity
+}
+
 function handleEditItem(item: CollectionObject | EntityObject) {
   if (item instanceof EntityObject && fileEditorComposable.canEdit(item)) {
     editorEntity.value = item
@@ -742,16 +710,13 @@ onMounted(async () => {
       <FilesDragOverlay :visible="isDragOver" />
 
       <!-- Sidebar -->
-      <Sidebar
+      <FilesSidebar
         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 -->
@@ -782,7 +747,6 @@ onMounted(async () => {
                 :collections="sortedItems.collections"
                 :entities="sortedItems.entities"
                 :selected-ids="selectedIds"
-                :preview-source="resolveViewerSource"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -798,7 +762,6 @@ onMounted(async () => {
                 :collections="sortedItems.collections"
                 :entities="sortedItems.entities"
                 :selected-ids="selectedIds"
-                :preview-source="resolveViewerSource"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -814,7 +777,6 @@ onMounted(async () => {
                 :collections="sortedItems.collections"
                 :entities="sortedItems.entities"
                 :selected-ids="selectedIds"
-                :preview-source="resolveViewerSource"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -894,17 +856,14 @@ onMounted(async () => {
       @close="handleUploadDialogClose"
     />
 
-    <!-- File Viewer (provided by the media_viewer module) -->
+    <!-- File Viewer -->
-    <component
+    <FileViewerDialog
-      :is="mediaViewerDialog"
-      v-if="mediaViewerDialog"
       v-model="showViewer"
-      :items="viewerItems"
+      :entity="viewerEntity"
-      :index="viewerIndex"
+      :all-entities="sortedItems.entities"
-      :source="resolveViewerSource"
+      :get-url="fileManager.getEntityUrl"
-      :download="downloadViewerItem"
+      :download-entity="fileManager.downloadEntity"
-      :navigation="true"
+      @navigate="handleViewerNavigate"
-      @update:index="viewerIndex = $event"
     />
 
     <!-- File Editor -->
@@ -935,8 +894,7 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100%;
+  height: 100vh;
-  min-height: 0;
   padding: 48px;
   text-align: center;
   width: 100%;
@@ -950,22 +908,19 @@ onMounted(async () => {
 .files-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 100vh;
-  min-height: 0;
   isolation: isolate;
 }
 
 .files-content {
   display: flex;
   flex: 1;
-  min-height: 0;
   overflow: hidden;
   position: relative;
 }
 
 .files-main {
   flex: 1;
-  min-height: 0;
   display: flex;
   overflow: hidden;
   min-width: 0;
@@ -973,7 +928,6 @@ onMounted(async () => {
 
 .files-workspace {
   flex: 1;
-  min-height: 0;
   display: flex;
   overflow: hidden;
   min-width: 0;
@@ -981,7 +935,6 @@ onMounted(async () => {
 
 .files-browser-panel {
   flex: 1;
-  min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;

src/routes.ts

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

src/stores/documentsStore.ts

@@ -118,8 +118,8 @@ export const useDocumentsStore = defineStore('documentsStore', () => {
   const isAtRoot = computed(() => currentLocation.value === ROOT_ID)
 
   async function initialize() {
-    await providersStore.list([activeProviderId.value])
+    await providersStore.list()
-    await servicesStore.list()
+    await servicesStore.list({ [activeProviderId.value]: true })
     await refresh()
   }
 

src/types/index.ts

@@ -28,3 +28,23 @@ export interface ContextMenuAction {
   disabled?: boolean
   divider?: boolean
 }
+
+/**
+ * Shape of an item registered at the `documents_file_viewer` integration point.
+ * Stored under `meta` so it fits inside a standard `ModuleIntegrationItem`.
+ */
+export interface DocumentViewerMeta {
+  /** Exact MIME type matches, e.g. ['application/pdf'] */
+  mimeTypes?: string[]
+  /** Glob-style patterns, e.g. ['image/*', 'video/*'] */
+  mimePatterns?: string[]
+}
+
+export interface DocumentViewerItem {
+  id: string
+  label?: string
+  priority?: number
+  meta: DocumentViewerMeta
+  /** Async factory returning the Vue viewer component */
+  component: () => Promise<unknown>
+}

tests/js/unit/base.test.ts

@@ -1,30 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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,20 @@
 {
   "extends": "../../tsconfig.app.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "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/*"]
-    }
-  },
 }