fix: full screen preview

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

lib/Module.php

@@ -2,13 +2,14 @@
 
 namespace KTXM\Documents;
 
-use KTXF\Module\ModuleBrowserInterface;
+use KTXF\Module\Configuration\BrowserModuleContextInterface;
+use KTXF\Module\Configuration\ModuleContextInterface;
 use KTXF\Module\ModuleInstanceAbstract;
 
 /**
  * Documents Module - Document Browser UI
  */
-class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
+class Module extends ModuleInstanceAbstract
 {
 
     public function __construct()
@@ -50,16 +51,10 @@ class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
         ];
     }
     
-    public function registerBI(): array
+    public function configure(ModuleContextInterface $context): void
     {
-        return [
-            'handle' => $this->handle(),
-            'namespace' => 'Documents',
-            'version' => $this->version(),
-            'label' => $this->label(),
-            'author' => $this->author(),
-            'description' => $this->description(),
-            'boot' => 'static/module.mjs',
-        ];
+        if ($context instanceof BrowserModuleContextInterface) {
+            $context->registerModule($this, 'Documents', 'static/module.mjs');
+        }
     }
 }

package.json

@@ -28,9 +28,9 @@
     "typescript": "~6.0.0",
     "vite": "^8.0.0",
     "vue-tsc": "^3.0.5",
-    "@vitest/coverage-v8": "^4.1.6",
+    "@vitest/coverage-v8": "^5.0.0",
     "@vue/test-utils": "^2.4.10",
-    "jsdom": "^29.1.1",
-    "vitest": "^4.1.6"
+    "jsdom": "^30.0.0",
+    "vitest": "^5.0.0"
   }
 }

src/components/FilePreview.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { EntityObject } from '@DocumentsManager/models/entity'
+import { getFileIcon } from '@/utils/fileHelpers'
+
+type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
+
+const props = withDefaults(defineProps<{
+  entity: EntityObject
+  source?: PreviewSource
+  size?: number
+}>(), {
+  source: undefined,
+  size: 32,
+})
+
+const failed = ref(false)
+const url = computed(() => {
+  if (!props.source) return null
+  const result = props.source({
+    id: String(props.entity.identifier ?? ''),
+    meta: { collection: props.entity.collection ? String(props.entity.collection) : null },
+  })
+  return typeof result === 'string' ? result : null
+})
+
+watch(url, () => {
+  failed.value = false
+})
+</script>
+
+<template>
+  <div
+    class="file-preview"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  >
+    <v-img
+      v-if="url && !failed"
+      :src="url"
+      :alt="entity.properties.label || 'File preview'"
+      contain
+      width="100%"
+      height="100%"
+      @error="failed = true"
+    />
+    <v-icon v-else :size="size * 0.75" color="grey">{{ getFileIcon(entity) }}</v-icon>
+  </div>
+</template>
+
+<style scoped>
+.file-preview {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 6px;
+  background-color: rgb(var(--v-theme-surface-variant), 0.4);
+}
+</style>

src/components/FilesInfoPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { VNavigationDrawer } from 'vuetify/components'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
@@ -8,8 +8,10 @@ import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
 const props = withDefaults(defineProps<{
   selectedItems: (CollectionObject | EntityObject)[]
   embedded?: boolean
+  previewUrl?: string | null
 }>(), {
   embedded: false,
+  previewUrl: null,
 })
 
 const emit = defineEmits<{
@@ -69,6 +71,13 @@ const totalSize = computed(() => {
     return sum
   }, 0)
 })
+
+const previewFailed = ref(false)
+const showPreview = computed(() => isEntity.value && !!props.previewUrl && !previewFailed.value)
+
+watch(() => props.previewUrl, () => {
+  previewFailed.value = false
+})
 </script>
 
 <template>
@@ -94,9 +103,24 @@ const totalSize = computed(() => {
 
       <!-- Single item selected -->
       <template v-if="singleSelection && selectedItem">
-        <!-- Icon and name -->
+        <!-- Preview/icon and name -->
         <div class="text-center mb-4">
-          <v-icon :color="itemIconColor" size="64">{{ itemIcon }}</v-icon>
+          <div v-if="showPreview" class="files-info-preview mb-3">
+            <v-img
+              :src="previewUrl!"
+              :alt="selectedItem.properties.label || 'File preview'"
+              aspect-ratio="1.45"
+              contain
+              @error="previewFailed = true"
+            >
+              <template #placeholder>
+                <div class="d-flex fill-height align-center justify-center">
+                  <v-progress-circular indeterminate color="primary" size="28" width="2" />
+                </div>
+              </template>
+            </v-img>
+          </div>
+          <v-icon v-else :color="itemIconColor" size="64">{{ itemIcon }}</v-icon>
           <div class="text-h6 mt-2 text-truncate">{{ selectedItem.properties.label || String(selectedItem.identifier ?? '') }}</div>
           <div class="text-caption text-grey">
             {{ isCollection ? 'Folder' : entity?.properties.mime || 'File' }}
@@ -205,4 +229,11 @@ const totalSize = computed(() => {
   overflow-y: auto;
   background-color: rgb(var(--v-theme-surface));
 }
+
+.files-info-preview {
+  overflow: hidden;
+  border: 1px solid rgb(var(--v-border-color));
+  border-radius: 8px;
+  background-color: rgb(var(--v-theme-surface-variant));
+}
 </style>

src/components/FilesLoadMoreSentinel.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, nextTick, onMounted, onBeforeUnmount, watch } from 'vue'
+
+const props = defineProps<{
+  hasMore: boolean
+  loading: boolean
+}>()
+
+const emit = defineEmits<{
+  intersect: []
+}>()
+
+const sentinelEl = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
+let observerGeneration = 0
+
+function destroyObserver() {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+}
+
+async function createObserver() {
+  const generation = ++observerGeneration
+  destroyObserver()
+
+  // The sentinel is conditionally rendered from `hasMore`. Wait until Vue has
+  // committed that DOM update before reading the template ref.
+  await nextTick()
+
+  if (generation !== observerGeneration || !sentinelEl.value || !props.hasMore) {
+    return
+  }
+
+  // root: null (viewport) still resolves correctly through clipping/scrolling
+  // ancestors (including Vuetify's internal v-virtual-scroll container), per the
+  // IntersectionObserver spec — no need to locate that container explicitly.
+  observer = new IntersectionObserver((entries) => {
+    if (entries.some((entry) => entry.isIntersecting) && props.hasMore && !props.loading) {
+      emit('intersect')
+    }
+  }, { root: null, rootMargin: '200px' })
+
+  observer.observe(sentinelEl.value)
+}
+
+onMounted(() => {
+  void createObserver()
+})
+onBeforeUnmount(() => {
+  observerGeneration++
+  destroyObserver()
+})
+watch(
+  [() => props.hasMore, () => props.loading],
+  () => {
+    void createObserver()
+  },
+  { flush: 'post' },
+)
+</script>
+
+<template>
+  <div v-if="hasMore" ref="sentinelEl" class="files-load-more-sentinel">
+    <v-progress-circular v-if="loading" indeterminate size="20" width="2" color="primary" />
+  </div>
+</template>
+
+<style scoped>
+.files-load-more-sentinel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 12px;
+  width: 100%;
+}
+</style>

src/components/views/FilesDetailsView.vue

@@ -2,14 +2,15 @@
 import { computed } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
-import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
+import { formatSize, formatDate } from '@/utils/fileHelpers'
 import FileActionsMenu from '@/components/FileActionsMenu.vue'
+import FilePreview from '@/components/FilePreview.vue'
 import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
+import FilesLoadMoreSentinel from '@/components/FilesLoadMoreSentinel.vue'
 
-type ItemWithType = {
-  item: CollectionObject | EntityObject
-  type: 'collection' | 'entity'
-}
+type ItemWithType =
+  | { item: CollectionObject | EntityObject; type: 'collection' | 'entity' }
+  | { item: null; type: 'sentinel' }
 
 type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
 
@@ -17,7 +18,10 @@ const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
+  hasMore?: boolean
+  isLoadingMore?: boolean
   previewSource?: PreviewSource
+  thumbnailSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -28,17 +32,25 @@ const emit = defineEmits<{
   'delete': [item: CollectionObject | EntityObject]
   'download': [item: CollectionObject | EntityObject]
   'show-details': [item: CollectionObject | EntityObject]
+  'load-more': []
 }>()
 
-// Combine collections and entities into a single list for virtual scrolling
+// Combine collections and entities into a single list for virtual scrolling; a
+// trailing sentinel row (rendered only once virtual-scroll actually mounts it)
+// drives the infinite-scroll "load more" trigger.
 const allItems = computed<ItemWithType[]>(() => [
   ...props.collections.map(c => ({ item: c, type: 'collection' as const })),
-  ...props.entities.map(e => ({ item: e, type: 'entity' as const }))
+  ...props.entities.map(e => ({ item: e, type: 'entity' as const })),
+  ...(props.hasMore ? [{ item: null, type: 'sentinel' as const }] : []),
 ])
 
 function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObject; type: 'collection' } {
   return wrapped.type === 'collection'
 }
+
+function isSentinel(wrapped: ItemWithType): wrapped is { item: null; type: 'sentinel' } {
+  return wrapped.type === 'sentinel'
+}
 </script>
 
 <template>
@@ -58,9 +70,17 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
       class="files-details-body"
     >
       <template #default="{ item: wrapped }">
+        <!-- Load-more sentinel -->
+        <FilesLoadMoreSentinel
+          v-if="isSentinel(wrapped)"
+          :has-more="!!hasMore"
+          :loading="!!isLoadingMore"
+          @intersect="emit('load-more')"
+        />
+
         <!-- Folder row -->
         <div
-          v-if="isCollection(wrapped)"
+          v-else-if="isCollection(wrapped)"
           class="files-details-row"
           :class="{ 'files-details-row--selected': selectedIds.has(String(wrapped.item.identifier)) }"
           @click="emit('item-click', wrapped.item, $event)"
@@ -93,7 +113,12 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
           @dblclick.stop="emit('open', wrapped.item)"
         >
           <div class="files-details-cell files-details-name">
-            <v-icon color="grey" size="small" class="mr-2">{{ getFileIcon(wrapped.item as EntityObject) }}</v-icon>
+            <FilePreview
+              :entity="(wrapped.item as EntityObject)"
+              :source="thumbnailSource"
+              :size="24"
+              class="mr-2"
+            />
             {{ wrapped.item.properties.label || String(wrapped.item.identifier ?? '') }}
           </div>
           <div class="files-details-cell files-details-size">{{ formatSize(wrapped.item.properties.size) }}</div>

src/components/views/FilesGridView.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
-import { getFileIcon, formatSize } from '@/utils/fileHelpers'
+import { formatSize } from '@/utils/fileHelpers'
 import FileActionsMenu from '@/components/FileActionsMenu.vue'
+import FilePreview from '@/components/FilePreview.vue'
 import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
+import FilesLoadMoreSentinel from '@/components/FilesLoadMoreSentinel.vue'
 
 type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
 
-defineProps<{
+const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
+  hasMore?: boolean
+  isLoadingMore?: boolean
   previewSource?: PreviewSource
+  thumbnailSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -22,6 +27,7 @@ const emit = defineEmits<{
   'delete': [item: CollectionObject | EntityObject]
   'download': [item: CollectionObject | EntityObject]
   'show-details': [item: CollectionObject | EntityObject]
+  'load-more': []
 }>()
 </script>
 
@@ -74,7 +80,9 @@ const emit = defineEmits<{
           @show-details="emit('show-details', $event)"
         />
       </div>
-      <v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
+      <div class="files-grid-thumbnail">
+        <FilePreview :entity="entity" :source="thumbnailSource" :size="64" />
+      </div>
       <div class="files-grid-label">{{ entity.properties.label || String(entity.identifier ?? '') }}</div>
       <div class="files-grid-size">{{ formatSize(entity.properties.size) }}</div>
 
@@ -86,6 +94,12 @@ const emit = defineEmits<{
       />
     </div>
   </div>
+
+  <FilesLoadMoreSentinel
+    :has-more="!!hasMore"
+    :loading="!!isLoadingMore"
+    @intersect="emit('load-more')"
+  />
 </template>
 
 <style scoped>
@@ -136,6 +150,17 @@ const emit = defineEmits<{
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
+.files-grid-thumbnail {
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: rgb(var(--v-theme-surface-variant), 0.4);
+}
+
 .files-grid-label {
   margin-top: 8px;
   font-size: 13px;

src/components/views/FilesListView.vue

@@ -2,14 +2,15 @@
 import { computed } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
-import { getFileIcon, formatSize } from '@/utils/fileHelpers'
+import { formatSize } from '@/utils/fileHelpers'
 import FileActionsMenu from '@/components/FileActionsMenu.vue'
+import FilePreview from '@/components/FilePreview.vue'
 import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
+import FilesLoadMoreSentinel from '@/components/FilesLoadMoreSentinel.vue'
 
-type ItemWithType = {
-  item: CollectionObject | EntityObject
-  type: 'collection' | 'entity'
-}
+type ItemWithType =
+  | { item: CollectionObject | EntityObject; type: 'collection' | 'entity' }
+  | { item: null; type: 'sentinel' }
 
 type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
 
@@ -17,7 +18,10 @@ const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
+  hasMore?: boolean
+  isLoadingMore?: boolean
   previewSource?: PreviewSource
+  thumbnailSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -28,17 +32,25 @@ const emit = defineEmits<{
   'delete': [item: CollectionObject | EntityObject]
   'download': [item: CollectionObject | EntityObject]
   'show-details': [item: CollectionObject | EntityObject]
+  'load-more': []
 }>()
 
-// Combine collections and entities into a single list for virtual scrolling
+// Combine collections and entities into a single list for virtual scrolling; a
+// trailing sentinel row (rendered only once virtual-scroll actually mounts it)
+// drives the infinite-scroll "load more" trigger.
 const allItems = computed<ItemWithType[]>(() => [
   ...props.collections.map(c => ({ item: c, type: 'collection' as const })),
-  ...props.entities.map(e => ({ item: e, type: 'entity' as const }))
+  ...props.entities.map(e => ({ item: e, type: 'entity' as const })),
+  ...(props.hasMore ? [{ item: null, type: 'sentinel' as const }] : []),
 ])
 
 function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObject; type: 'collection' } {
   return wrapped.type === 'collection'
 }
+
+function isSentinel(wrapped: ItemWithType): wrapped is { item: null; type: 'sentinel' } {
+  return wrapped.type === 'sentinel'
+}
 </script>
 
 <template>
@@ -48,9 +60,17 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
     class="files-list-virtual pa-2"
   >
     <template #default="{ item: wrapped }">
+      <!-- Load-more sentinel -->
+      <FilesLoadMoreSentinel
+        v-if="isSentinel(wrapped)"
+        :has-more="!!hasMore"
+        :loading="!!isLoadingMore"
+        @intersect="emit('load-more')"
+      />
+
       <!-- Folder -->
       <v-list-item
-        v-if="isCollection(wrapped)"
+        v-else-if="isCollection(wrapped)"
         :active="selectedIds.has(String(wrapped.item.identifier))"
         @click="($event: MouseEvent | KeyboardEvent) => emit('item-click', wrapped.item, $event)"
       >
@@ -79,7 +99,11 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
         @dblclick.stop="emit('open', wrapped.item)"
       >
         <template #prepend>
-          <v-icon color="grey">{{ getFileIcon(wrapped.item as EntityObject) }}</v-icon>
+          <FilePreview
+            :entity="(wrapped.item as EntityObject)"
+            :source="thumbnailSource"
+            :size="32"
+          />
         </template>
         <v-list-item-title>{{ wrapped.item.properties.label || String(wrapped.item.identifier ?? '') }}</v-list-item-title>
         <v-list-item-subtitle>{{ formatSize(wrapped.item.properties.size) }}</v-list-item-subtitle>

src/composables/index.ts

@@ -1,13 +1,18 @@
 /**
  * Central export point for all Files module composables
+ *
+ * useDocumentManager/useDocumentSelection live in documents_manager (they only
+ * ever depended on its SDK, never on this module's own code) so other modules
+ * can reuse them too; re-exported here so existing imports from
+ * '@/composables' keep working unchanged.
  */
 
-export { useFileManager } from './useFileManager'
-export { useFileSelection } from './useFileSelection'
+export { useDocumentManager } from '@DocumentsManager/composables/useDocumentManager'
+export { useDocumentSelection } from '@DocumentsManager/composables/useDocumentSelection'
 export { useFileUpload } from './useFileUpload'
 export { useFileEditor } from './useFileEditor'
 
-export type { UseFileManagerOptions } from './useFileManager'
-export type { UseFileSelectionOptions } from './useFileSelection'
+export type { UseDocumentManagerOptions } from '@DocumentsManager/composables/useDocumentManager'
+export type { UseDocumentSelectionOptions } from '@DocumentsManager/composables/useDocumentSelection'
 export type { UseFileUploadOptions, FileUploadProgress } from './useFileUpload'
 export type { UseFileEditorReturn } from './useFileEditor'

src/composables/useFileEditor.ts

@@ -1,11 +1,11 @@
 /**
  * useFileEditor — resolves which registered editor can handle a given MIME type.
  *
- * Other modules register editors at the `documents_file_editor` integration
+ * Other modules register editors at the `documents_editor` integration
  * point by including an entry in their `integrations.ts`:
  *
  * ```ts
- * documents_file_editor: [{
+ * documents_editor: [{
  *   id: 'my_editor',
  *   meta: { mimeTypes: ['text/plain'] },
  *   component: () => import('./components/MyEditor.vue'),
@@ -21,7 +21,7 @@
 import { useIntegrationStore } from '@KTXC'
 import type { EntityObject } from '@DocumentsManager/models/entity'
 
-const INTEGRATION_POINT = 'documents_file_editor'
+const INTEGRATION_POINT = 'documents_editor'
 
 function mimeMatchesPattern(mime: string, pattern: string): boolean {
   if (pattern.endsWith('/*')) {

src/composables/useFileManager.ts

@@ -1,295 +0,0 @@
-/**
- * File Manager composable for convenient file/folder operations
- * Provides reactive access to file manager state and actions
- */
-
-import { computed, ref, unref } from 'vue'
-import type { Ref, ComputedRef } from 'vue'
-import { useProvidersStore } from '@DocumentsManager/stores/providersStore'
-import { useServicesStore } from '@DocumentsManager/stores/servicesStore'
-import { useNodesStore, ROOT_ID } from '@DocumentsManager/stores/nodesStore'
-import type { ListFilter, ListSort, ListRange } from '@DocumentsManager/types/common'
-import type { DocumentInterface } from '@DocumentsManager/types/document'
-import { CollectionObject } from '@DocumentsManager/models/collection'
-import { EntityObject } from '@DocumentsManager/models/entity'
-
-// Base URL for file manager transfer endpoints
-const TRANSFER_BASE_URL = '/m/documents_manager'
-
-export interface UseFileManagerOptions {
-  providerId: string | Ref<string> | ComputedRef<string>
-  serviceId: string | Ref<string> | ComputedRef<string>
-  autoFetch?: boolean
-}
-
-export function useFileManager(options: UseFileManagerOptions) {
-  const providersStore = useProvidersStore()
-  const servicesStore = useServicesStore()
-  const nodesStore = useNodesStore()
-
-  const { providerId, serviceId, autoFetch = false } = options
-
-  const currentProviderId = () => unref(providerId)
-  const currentServiceId = () => unref(serviceId)
-
-  // Current location (folder being viewed)
-  const currentLocation: Ref<string> = ref(ROOT_ID)
-  
-  // Loading/error state
-  const isLoading = computed(() => nodesStore.transceiving)
-  const error = computed(() => nodesStore.error)
-
-  // Provider and service
-  const provider = computed(() => providersStore.provider(currentProviderId()))
-  const service = computed(() => servicesStore.service(currentProviderId(), currentServiceId()))
-  const rootId = computed(() => ROOT_ID)
-
-  // Current children
-  const currentChildren = computed(() => 
-    nodesStore.getChildren(currentProviderId(), currentServiceId(), currentLocation.value)
-  )
-
-  const currentCollections: ComputedRef<CollectionObject[]> = computed(() =>
-    nodesStore.getChildCollections(currentProviderId(), currentServiceId(), currentLocation.value)
-  )
-
-  const currentEntities: ComputedRef<EntityObject[]> = computed(() =>
-    nodesStore.getChildEntities(currentProviderId(), currentServiceId(), currentLocation.value)
-  )
-
-  // Breadcrumb path
-  const breadcrumbs = computed(() => {
-    if (currentLocation.value === ROOT_ID) {
-      return []
-    }
-    return nodesStore.getPath(currentProviderId(), currentServiceId(), currentLocation.value)
-  })
-
-  // Is at root?
-  const isAtRoot = computed(() => currentLocation.value === ROOT_ID)
-
-  // Navigate to a folder
-  const navigateTo = async (collectionId: string | null) => {
-    currentLocation.value = collectionId || ROOT_ID
-    await refresh()
-  }
-
-  // Navigate up one level
-  const navigateUp = async () => {
-    if (currentLocation.value === ROOT_ID) {
-      return
-    }
-    const currentNode = nodesStore.getNode(currentProviderId(), currentServiceId(), currentLocation.value)
-    if (currentNode) {
-      await navigateTo(currentNode.collection ? String(currentNode.collection) : ROOT_ID)
-    }
-  }
-
-  // Navigate to root
-  const navigateToRoot = async () => {
-    await navigateTo(ROOT_ID)
-  }
-
-  // Refresh current location
-  const refresh = async (
-    filter?: ListFilter,
-    sort?: ListSort,
-    range?: ListRange
-  ) => {
-    await nodesStore.fetchNodes(
-      currentProviderId(),
-      currentServiceId(),
-      currentLocation.value === ROOT_ID ? ROOT_ID : currentLocation.value,
-      filter,
-      sort,
-      range
-    )
-  }
-
-  // Create a new folder
-  const createFolder = async (label: string): Promise<CollectionObject> => {
-    return await nodesStore.createCollection(
-      currentProviderId(),
-      currentServiceId(),
-      currentLocation.value === ROOT_ID ? ROOT_ID : currentLocation.value,
-      { label, owner: '' }
-    )
-  }
-
-  // Create a new file
-  const createFile = async (
-    label: string,
-    mime: string = 'application/octet-stream'
-  ): Promise<EntityObject> => {
-    const properties: DocumentInterface = {
-      '@type': 'documents.properties',
-      urid: null,
-      size: 0,
-      label,
-      mime,
-      format: null,
-      encoding: null,
-    }
-
-    return await nodesStore.createEntity(
-      currentProviderId(),
-      currentServiceId(),
-      currentLocation.value === ROOT_ID ? ROOT_ID : currentLocation.value,
-      properties
-    )
-  }
-
-  // Rename a node
-  const renameNode = async (nodeId: string, newLabel: string) => {
-    const node = nodesStore.getNode(currentProviderId(), currentServiceId(), nodeId)
-    if (!node) {
-      throw new Error('Node not found')
-    }
-
-    if (node instanceof CollectionObject) {
-      return await nodesStore.updateCollection(currentProviderId(), currentServiceId(), nodeId, {
-        label: newLabel,
-        owner: node.properties.owner,
-      })
-    } else {
-      const properties: DocumentInterface = {
-        '@type': 'documents.properties',
-        urid: node.properties.urid,
-        size: node.properties.size,
-        label: newLabel,
-        mime: node.properties.mime,
-        format: node.properties.format,
-        encoding: node.properties.encoding,
-      }
-      return await nodesStore.updateEntity(currentProviderId(), currentServiceId(), node.collection, nodeId, properties)
-    }
-  }
-
-  // Delete a node
-  const deleteNode = async (nodeId: string): Promise<boolean> => {
-    const node = nodesStore.getNode(currentProviderId(), currentServiceId(), nodeId)
-    if (!node) {
-      throw new Error('Node not found')
-    }
-
-    if (node instanceof CollectionObject) {
-      return await nodesStore.deleteCollection(currentProviderId(), currentServiceId(), nodeId)
-    } else {
-      return await nodesStore.deleteEntity(currentProviderId(), currentServiceId(), node.collection, nodeId)
-    }
-  }
-
-  // Read file content
-  const readFile = async (entityId: string): Promise<string | null> => {
-    const node = nodesStore.getNode(currentProviderId(), currentServiceId(), entityId)
-    if (!node || !(node instanceof EntityObject)) {
-      throw new Error('Entity not found')
-    }
-    return await nodesStore.readEntity(currentProviderId(), currentServiceId(), node.collection || ROOT_ID, entityId)
-  }
-
-  // Write file content
-  const writeFile = async (entityId: string, content: string): Promise<number> => {
-    const node = nodesStore.getNode(currentProviderId(), currentServiceId(), entityId)
-    if (!node || !(node instanceof EntityObject)) {
-      throw new Error('Entity not found')
-    }
-    return await nodesStore.writeEntity(currentProviderId(), currentServiceId(), node.collection, entityId, content)
-  }
-
-  // Get a URL suitable for inline viewing (img src / video src)
-  const getEntityUrl = (entityId: string, collectionId?: string | null): string => {
-    const collection = collectionId ?? currentLocation.value
-    return `${TRANSFER_BASE_URL}/download/entity/${encodeURIComponent(currentProviderId())}/${encodeURIComponent(currentServiceId())}/${encodeURIComponent(collection)}/${encodeURIComponent(entityId)}`
-  }
-
-  // Download a single file
-  const downloadEntity = (entityId: string, collectionId?: string | null): void => {
-    const collection = collectionId ?? currentLocation.value
-    // Use path parameters: /download/entity/{provider}/{service}/{collection}/{identifier}
-    const url = `${TRANSFER_BASE_URL}/download/entity/${encodeURIComponent(currentProviderId())}/${encodeURIComponent(currentServiceId())}/${encodeURIComponent(collection)}/${encodeURIComponent(entityId)}`
-    
-    // Trigger download by opening URL (browser handles it)
-    window.open(url, '_blank')
-  }
-
-  const downloadCollection = (collectionId: string): void => {
-    // Use path parameters: /download/collection/{provider}/{service}/{identifier}
-    const url = `${TRANSFER_BASE_URL}/download/collection/${encodeURIComponent(currentProviderId())}/${encodeURIComponent(currentServiceId())}/${encodeURIComponent(collectionId)}`
-    
-    window.open(url, '_blank')
-  }
-
-  const downloadArchive = (ids: string[], name: string = 'download', collectionId?: string | null): void => {
-    const collection = collectionId ?? currentLocation.value
-    const params = new URLSearchParams({
-      provider: currentProviderId(),
-      service: currentServiceId(),
-    })
-    ids.forEach(id => params.append('ids[]', id))
-    if (name) {
-      params.append('name', name)
-    }
-    if (collection && collection !== ROOT_ID) {
-      params.append('collection', collection)
-    }
-    
-    const url = `${TRANSFER_BASE_URL}/download/archive?${params.toString()}`
-    
-    window.open(url, '_blank')
-  }
-
-  // Initialize - fetch providers, services, and initial nodes if autoFetch
-  const initialize = async () => {
-    await providersStore.list([currentProviderId()])
-    await servicesStore.list()
-    if (autoFetch) {
-      await refresh()
-    }
-  }
-
-  return {
-    // State
-    currentLocation,
-    isLoading,
-    error,
-    
-    // Provider/Service
-    provider,
-    service,
-    rootId,
-    
-    // Current view
-    currentChildren,
-    currentCollections,
-    currentEntities,
-    breadcrumbs,
-    isAtRoot,
-    
-    // Navigation
-    navigateTo,
-    navigateUp,
-    navigateToRoot,
-    refresh,
-    
-    // Operations
-    createFolder,
-    createFile,
-    renameNode,
-    deleteNode,
-    readFile,
-    writeFile,
-    getEntityUrl,
-    downloadEntity,
-    downloadCollection,
-    downloadArchive,
-    
-    // Initialize
-    initialize,
-
-    // Constants
-    ROOT_ID,
-  }
-}
-
-export default useFileManager

src/composables/useFileSelection.ts

@@ -1,135 +0,0 @@
-/**
- * File selection composable
- * Provides reactive selection management for file manager
- */
-
-import { ref, computed } from 'vue'
-import type { Ref, ComputedRef } from 'vue'
-import { CollectionObject } from '@DocumentsManager/models/collection'
-import { EntityObject } from '@DocumentsManager/models/entity'
-
-type NodeRecord = CollectionObject | EntityObject
-
-export interface UseFileSelectionOptions {
-  multiple?: boolean
-  allowFolders?: boolean
-  allowFiles?: boolean
-}
-
-export function useFileSelection(options: UseFileSelectionOptions = {}) {
-  const {
-    multiple = true,
-    allowFolders = true,
-    allowFiles = true,
-  } = options
-
-  const selectedIds: Ref<Set<string>> = ref(new Set())
-  const selectedNodes: Ref<Map<string, NodeRecord>> = ref(new Map())
-
-  const count: ComputedRef<number> = computed(() => selectedIds.value.size)
-  const hasSelection: ComputedRef<boolean> = computed(() => selectedIds.value.size > 0)
-
-  const selectedIdArray: ComputedRef<string[]> = computed(() => Array.from(selectedIds.value))
-  const selectedNodeArray: ComputedRef<NodeRecord[]> = computed(() => Array.from(selectedNodes.value.values()))
-
-  const selectedCollections: ComputedRef<CollectionObject[]> = computed(() =>
-    selectedNodeArray.value.filter((node): node is CollectionObject => node instanceof CollectionObject),
-  )
-
-  const selectedEntities: ComputedRef<EntityObject[]> = computed(() =>
-    selectedNodeArray.value.filter((node): node is EntityObject => node instanceof EntityObject),
-  )
-
-  const isSelected = (nodeId: string): boolean => selectedIds.value.has(nodeId)
-
-  const isTypeAllowed = (node: NodeRecord): boolean => {
-    if (node instanceof CollectionObject && !allowFolders) return false
-    if (node instanceof EntityObject && !allowFiles) return false
-    return true
-  }
-
-  const select = (node: NodeRecord) => {
-    if (!isTypeAllowed(node)) return
-
-    if (!multiple) {
-      selectedIds.value.clear()
-      selectedNodes.value.clear()
-    }
-
-    const nodeId = String(node.identifier)
-    selectedIds.value.add(nodeId)
-    selectedNodes.value.set(nodeId, node)
-  }
-
-  const deselect = (nodeId: string) => {
-    selectedIds.value.delete(nodeId)
-    selectedNodes.value.delete(nodeId)
-  }
-
-  const toggle = (node: NodeRecord) => {
-    const nodeId = String(node.identifier)
-    if (isSelected(nodeId)) {
-      deselect(nodeId)
-      return
-    }
-    select(node)
-  }
-
-  const selectMultiple = (nodes: NodeRecord[]) => {
-    if (!multiple) {
-      const lastNode = nodes[nodes.length - 1]
-      if (lastNode && isTypeAllowed(lastNode)) {
-        selectedIds.value.clear()
-        selectedNodes.value.clear()
-        const nodeId = String(lastNode.identifier)
-        selectedIds.value.add(nodeId)
-        selectedNodes.value.set(nodeId, lastNode)
-      }
-      return
-    }
-
-    for (const node of nodes) {
-      if (isTypeAllowed(node)) {
-        const nodeId = String(node.identifier)
-        selectedIds.value.add(nodeId)
-        selectedNodes.value.set(nodeId, node)
-      }
-    }
-  }
-
-  const selectAll = (nodes: NodeRecord[]) => {
-    if (!multiple) return
-    selectMultiple(nodes)
-  }
-
-  const clear = () => {
-    selectedIds.value.clear()
-    selectedNodes.value.clear()
-  }
-
-  const setSelection = (nodes: NodeRecord[]) => {
-    clear()
-    selectMultiple(nodes)
-  }
-
-  return {
-    selectedIds,
-    selectedNodes,
-    count,
-    hasSelection,
-    selectedIdArray,
-    selectedNodeArray,
-    selectedCollections,
-    selectedEntities,
-    isSelected,
-    select,
-    deselect,
-    toggle,
-    selectMultiple,
-    selectAll,
-    clear,
-    setSelection,
-  }
-}
-
-export default useFileSelection

src/composables/useFileUpload.ts

@@ -293,9 +293,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
       try {
         // Create the folder
         const collection = await nodesStore.createCollection(
-          currentProviderId(),
-          currentServiceId(),
-          parentId,
+          `${currentProviderId()}:${currentServiceId()}:${parentId || ROOT_ID}`,
           { label: folderName, owner: '' }
         )
         folderIdMap.set(folderPath, String(collection.identifier))
@@ -342,9 +340,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
 
       // Create the entity
       const entity = await nodesStore.createEntity(
-        currentProviderId(),
-        currentServiceId(),
-        targetCollection || ROOT_ID,
+        `${currentProviderId()}:${currentServiceId()}:${targetCollection || ROOT_ID}`,
         {
           '@type': 'documents.properties',
           urid: null,
@@ -360,10 +356,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
 
       // Write the content
       await nodesStore.writeEntity(
-        currentProviderId(),
-        currentServiceId(),
-        targetCollection || ROOT_ID,
-        String(entity.identifier),
+        `${entity.provider}:${entity.service}:${entity.collection || ROOT_ID}:${entity.identifier}`,
         content
       )
 

src/pages/Main.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick, defineAsyncComponent } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick, defineAsyncComponent } from 'vue'
 import { useDisplay } from 'vuetify'
-import { useModuleStore, useIntegrationStore } from '@KTXC'
-import { useFileManager, useFileSelection, useFileUpload, useFileEditor } from '@/composables'
+import { useModuleStore, useIntegrationStore, usePreviewStore } from '@KTXC'
+import { useDocumentManager, useDocumentSelection, useFileUpload, useFileEditor } from '@/composables'
 import type { ViewMode, SortField, SortOrder, BreadcrumbItem } from '@/types'
+import type { ListFilter, ListSort } from '@DocumentsManager/types'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { ServiceObject } from '@DocumentsManager/models/service'
@@ -31,6 +32,8 @@ const isMobile = computed(() => display.mdAndDown.value)
 
 const moduleStore = useModuleStore()
 const integrationStore = useIntegrationStore()
+const previewStore = usePreviewStore()
+const previewsAvailable = computed(() => previewStore.availability.storage)
 const isFileManagerAvailable = computed(() => {
   return moduleStore.has('documents_manager') || moduleStore.has('DocumentsManager')
 })
@@ -42,13 +45,13 @@ const activeProviderId = ref('default')
 const activeServiceId = ref('personal')
 
 // File manager composable
-const fileManager = useFileManager({
+const documentManager = useDocumentManager({
   providerId: activeProviderId,
   serviceId: activeServiceId,
 })
 
 // Selection composable
-const selection = useFileSelection({ multiple: true })
+const selection = useDocumentSelection({ multiple: true })
 
 // Upload composable
 const upload = useFileUpload({
@@ -57,11 +60,11 @@ const upload = useFileUpload({
 })
 
 // Keep upload collection in sync with current location
-watch(() => fileManager.currentLocation.value, (newLocation) => {
+watch(() => documentManager.currentLocation.value, (newLocation) => {
   upload.setCollection(newLocation)
 })
 
-watch(() => fileManager.error.value, (message) => {
+watch(() => documentManager.error.value, (message) => {
   if (message) {
     notify(message, 'error')
   }
@@ -116,24 +119,61 @@ const mediaViewerDialog = computed(() => {
 })
 
 const viewerItems = computed<ViewerItem[]>(() =>
-  sortedItems.value.entities.map(entityToViewerItem),
+  documentManager.currentEntities.value.map(entityToViewerItem),
 )
 
 function entityToViewerItem(entity: EntityObject): ViewerItem {
   return {
     id: String(entity.identifier ?? ''),
     title: entity.properties.label ?? String(entity.identifier ?? ''),
-    mime: entity.properties.mime ?? '',
+    mime: 'image/webp',
     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 resolveViewerSource(item: ViewerItem): string | Promise<string> {
+  if (!previewsAvailable.value) {
+    return Promise.reject(new Error('Preview storage is unavailable'))
+  }
+  return documentManager.getEntityPreviewUrl(
+    item.id,
+    (item.meta?.collection as string | null) ?? null,
+    'fullscreen',
+  )
 }
 
+function resolvePreviewSource(item: ViewerItem): string {
+  return documentManager.getEntityPreviewUrl(
+    item.id,
+    (item.meta?.collection as string | null) ?? null,
+    'inline',
+  )
+}
+
+function resolveThumbnailSource(item: ViewerItem): string {
+  return documentManager.getEntityPreviewUrl(
+    item.id,
+    (item.meta?.collection as string | null) ?? null,
+    'thumbnail',
+  )
+}
+
+// Preview shown in the info panel sidebar for the current single selection
+const infoPanelPreviewUrl = computed<string | null>(() => {
+  if (!previewsAvailable.value) return null
+  const items = selection.selectedNodeArray.value
+  if (items.length !== 1) return null
+  const item = items[0]
+  if (!(item instanceof EntityObject)) return null
+  return documentManager.getEntityPreviewUrl(
+    nodeId(item),
+    item.collection ? String(item.collection) : null,
+    'inline',
+  )
+})
+
 function downloadViewerItem(item: ViewerItem): void {
-  fileManager.downloadEntity(item.id, (item.meta?.collection as string | null) ?? null)
+  documentManager.downloadEntity(item.id, (item.meta?.collection as string | null) ?? null)
 }
 
 // Editor state
@@ -241,10 +281,10 @@ function renameCurrentName(node: CollectionObject | EntityObject | null): string
 // Computed
 const breadcrumbs = computed<BreadcrumbItem[]>(() => {
   const items: BreadcrumbItem[] = [
-    { id: fileManager.ROOT_ID, label: 'Home', isRoot: true }
+    { id: documentManager.ROOT_ID, label: 'Home', isRoot: true }
   ]
   
-  for (const node of fileManager.breadcrumbs.value) {
+  for (const node of documentManager.breadcrumbs.value) {
     items.push({
       id: nodeId(node),
       label: nodeLabel(node),
@@ -255,76 +295,45 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => {
   return items
 })
 
-const sortedItems = computed(() => {
-  const collections = [...fileManager.currentCollections.value]
-  const entities = [...fileManager.currentEntities.value]
-  
-  // Sort collections
-  collections.sort((a, b) => {
-    const aVal = sortField.value === 'label'
-      ? (a.properties.label || nodeId(a))
-      : sortField.value === 'modifiedOn'
-        ? (a.modified?.getTime() ?? 0)
-        : sortField.value === 'createdOn'
-          ? (a.created?.getTime() ?? 0)
-          : ''
-    const bVal = sortField.value === 'label'
-      ? (b.properties.label || nodeId(b))
-      : sortField.value === 'modifiedOn'
-        ? (b.modified?.getTime() ?? 0)
-        : sortField.value === 'createdOn'
-          ? (b.created?.getTime() ?? 0)
-          : ''
-    const cmp = String(aVal).localeCompare(String(bVal))
-    return sortOrder.value === 'asc' ? cmp : -cmp
-  })
-  
-  // Sort entities
-  entities.sort((a, b) => {
-    const aVal = sortField.value === 'label'
-      ? (a.properties.label || nodeId(a))
-      : sortField.value === 'mime'
-        ? (a.properties.mime || '')
-        : sortField.value === 'size'
-          ? a.properties.size
-          : sortField.value === 'modifiedOn'
-            ? (a.modified?.getTime() ?? 0)
-            : sortField.value === 'createdOn'
-              ? (a.created?.getTime() ?? 0)
-              : ''
-    const bVal = sortField.value === 'label'
-      ? (b.properties.label || nodeId(b))
-      : sortField.value === 'mime'
-        ? (b.properties.mime || '')
-        : sortField.value === 'size'
-          ? b.properties.size
-          : sortField.value === 'modifiedOn'
-            ? (b.modified?.getTime() ?? 0)
-            : sortField.value === 'createdOn'
-              ? (b.created?.getTime() ?? 0)
-              : ''
-    const cmp = String(aVal).localeCompare(String(bVal))
-    return sortOrder.value === 'asc' ? cmp : -cmp
-  })
-  
-  // Filter by search
-  const filterFn = (item: CollectionObject | EntityObject) => {
-    if (!searchQuery.value) return true
-    const label = item instanceof EntityObject
-      ? (item.properties.label || nodeId(item))
-      : (item.properties.label || nodeId(item))
-    return label.toLowerCase().includes(searchQuery.value.toLowerCase())
-  }
-  
-  return {
-    collections: collections.filter(filterFn),
-    entities: entities.filter(filterFn),
+const hasItems = computed(() =>
+  documentManager.currentCollections.value.length > 0 || documentManager.currentEntities.value.length > 0
+)
+
+// Search/sort are server-driven: build the current filter/sort and reset-load
+// the current location whenever either changes.
+function buildFilter(): ListFilter | undefined {
+  return searchQuery.value ? { label: searchQuery.value } : undefined
+}
+
+function buildSort(): ListSort {
+  return { [sortField.value]: sortOrder.value === 'asc' }
+}
+
+async function reload() {
+  await documentManager.resetAndLoad(buildFilter(), buildSort())
+}
+
+let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
+
+watch(searchQuery, () => {
+  if (searchDebounceTimer !== null) {
+    clearTimeout(searchDebounceTimer)
   }
+  searchDebounceTimer = setTimeout(() => {
+    searchDebounceTimer = null
+    reload()
+  }, 300)
 })
 
-const hasItems = computed(() => 
-  sortedItems.value.collections.length > 0 || sortedItems.value.entities.length > 0
-)
+watch([sortField, sortOrder], () => {
+  reload()
+})
+
+onUnmounted(() => {
+  if (searchDebounceTimer !== null) {
+    clearTimeout(searchDebounceTimer)
+  }
+})
 
 const hasSelection = computed(() => selection.hasSelection.value)
 
@@ -375,8 +384,8 @@ watch([activeProviderId, activeServiceId], async ([providerId, serviceId], [prev
   }
 
   selection.clear()
-  upload.setCollection(fileManager.rootId.value)
-  await fileManager.navigateToRoot()
+  upload.setCollection(documentManager.rootId.value)
+  await documentManager.navigateToRoot()
 }, { flush: 'post' })
 
 async function handleServiceSelect(service: ServiceObject) {
@@ -398,12 +407,12 @@ async function handleServiceSelect(service: ServiceObject) {
 // Navigation methods
 async function handleBreadcrumbNavigate(item: BreadcrumbItem) {
   selection.clear()
-  await fileManager.navigateTo(item.isRoot ? null : item.id)
+  await documentManager.navigateTo(item.isRoot ? null : item.id)
 }
 
 async function handleFolderOpen(folder: CollectionObject) {
   selection.clear()
-  await fileManager.navigateTo(nodeId(folder))
+  await documentManager.navigateTo(nodeId(folder))
 }
 
 // Item interaction methods
@@ -440,7 +449,7 @@ function handleShowDetails(item: CollectionObject | EntityObject) {
 // Folder operations
 async function handleCreateFolder(name: string) {
   try {
-    await fileManager.createFolder(name)
+    await documentManager.createFolder(name)
     showNewFolderDialog.value = false
     notify(`Folder "${name}" created`, 'success')
   } catch (error) {
@@ -460,7 +469,7 @@ async function handleRename(newName: string) {
   const currentName = renameCurrentName(nodeToRename.value)
   
   try {
-    await fileManager.renameNode(nodeId(nodeToRename.value), newName)
+    await documentManager.renameNode(nodeId(nodeToRename.value), newName)
     showRenameDialog.value = false
     nodeToRename.value = null
     notify(`Renamed "${currentName}" to "${newName}"`, 'success')
@@ -481,7 +490,7 @@ async function handleDelete() {
 
   try {
     for (const node of nodesToDelete.value) {
-      await fileManager.deleteNode(nodeId(node))
+      await documentManager.deleteNode(nodeId(node))
     }
     selection.clear()
     showDeleteDialog.value = false
@@ -500,11 +509,11 @@ async function handleDelete() {
 function handleDownloadItem(item: CollectionObject | EntityObject) {
   if (item instanceof EntityObject) {
     // Download single file
-    fileManager.downloadEntity(nodeId(item), String(item.collection ?? fileManager.ROOT_ID))
+    documentManager.downloadEntity(nodeId(item), String(item.collection ?? documentManager.ROOT_ID))
     notify(`Download started for "${nodeLabel(item)}"`, 'info')
   } else if (item instanceof CollectionObject) {
     // Download folder as ZIP
-    fileManager.downloadCollection(nodeId(item))
+    documentManager.downloadCollection(nodeId(item))
     notify(`Archive download started for "${nodeLabel(item)}"`, 'info')
   }
 }
@@ -656,7 +665,7 @@ async function readEntriesRecursively(
 async function handleUploadAll() {
   try {
     await upload.uploadAll()
-    await fileManager.refresh()
+    await reload()
     notify('Uploads completed', 'success')
   } catch (error) {
     console.error('Failed to upload files:', error)
@@ -673,7 +682,7 @@ function handleUploadDialogClose() {
 // Refresh
 async function handleRefresh() {
   try {
-    await fileManager.refresh()
+    await reload()
   } catch (error) {
     console.error('Failed to refresh files:', error)
     notify(getErrorMessage(error, 'Failed to refresh files'), 'error')
@@ -683,10 +692,10 @@ async function handleRefresh() {
 // Initialize
 onMounted(async () => {
   try {
-    await fileManager.initialize()
+    await documentManager.initialize()
     await servicesStore.list()
     syncActiveService(availableServices.value)
-    await fileManager.refresh()
+    await reload()
     console.log('[Files] - Initialized with:', {
       provider: activeProviderId.value,
       service: activeServiceId.value,
@@ -723,7 +732,7 @@ onMounted(async () => {
     <FilesToolbar
       v-model:search-query="searchQuery"
       v-model:view-mode="viewMode"
-      :is-loading="fileManager.isLoading.value"
+      :is-loading="documentManager.isLoading.value"
       @toggle-sidebar="sidebarVisible = !sidebarVisible"
       @refresh="handleRefresh"
       @open-file-picker="openFilePicker"
@@ -747,7 +756,7 @@ onMounted(async () => {
         :active-provider-id="activeProviderId"
         :active-service-id="activeServiceId"
         :services="availableServices"
-        @navigate-home="fileManager.navigateToRoot()"
+        @navigate-home="documentManager.navigateToRoot()"
         @select-service="handleServiceSelect"
         @new-folder="showNewFolderDialog = true"
         @open-file-picker="openFilePicker"
@@ -766,7 +775,7 @@ onMounted(async () => {
 
             <!-- Loading -->
             <v-progress-linear
-              v-if="fileManager.isLoading.value"
+              v-if="documentManager.isLoading.value"
               indeterminate
               color="primary"
               class="mx-4"
@@ -774,15 +783,18 @@ onMounted(async () => {
 
             <div class="files-view-panel">
               <!-- Empty state -->
-              <FilesEmptyState v-if="!hasItems && !fileManager.isLoading.value" />
+              <FilesEmptyState v-if="!hasItems && !documentManager.isLoading.value" />
 
               <!-- Grid View -->
               <FilesGridView
                 v-else-if="viewMode === 'grid'"
-                :collections="sortedItems.collections"
-                :entities="sortedItems.entities"
+                :collections="documentManager.currentCollections.value"
+                :entities="documentManager.currentEntities.value"
                 :selected-ids="selectedIds"
-                :preview-source="resolveViewerSource"
+                :has-more="documentManager.hasMore.value"
+                :is-loading-more="documentManager.isLoadingMore.value"
+                :preview-source="previewsAvailable ? resolvePreviewSource : undefined"
+                :thumbnail-source="previewsAvailable ? resolveThumbnailSource : undefined"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -790,15 +802,19 @@ onMounted(async () => {
                 @delete="handleDeleteItem"
                 @download="handleDownloadItem"
                 @show-details="handleShowDetails"
+                @load-more="documentManager.loadMore"
               />
 
               <!-- List View -->
               <FilesListView
                 v-else-if="viewMode === 'list'"
-                :collections="sortedItems.collections"
-                :entities="sortedItems.entities"
+                :collections="documentManager.currentCollections.value"
+                :entities="documentManager.currentEntities.value"
                 :selected-ids="selectedIds"
-                :preview-source="resolveViewerSource"
+                :has-more="documentManager.hasMore.value"
+                :is-loading-more="documentManager.isLoadingMore.value"
+                :preview-source="previewsAvailable ? resolvePreviewSource : undefined"
+                :thumbnail-source="previewsAvailable ? resolveThumbnailSource : undefined"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -806,15 +822,19 @@ onMounted(async () => {
                 @delete="handleDeleteItem"
                 @download="handleDownloadItem"
                 @show-details="handleShowDetails"
+                @load-more="documentManager.loadMore"
               />
 
               <!-- Details View -->
               <FilesDetailsView
                 v-else-if="viewMode === 'details'"
-                :collections="sortedItems.collections"
-                :entities="sortedItems.entities"
+                :collections="documentManager.currentCollections.value"
+                :entities="documentManager.currentEntities.value"
                 :selected-ids="selectedIds"
-                :preview-source="resolveViewerSource"
+                :has-more="documentManager.hasMore.value"
+                :is-loading-more="documentManager.isLoadingMore.value"
+                :preview-source="previewsAvailable ? resolvePreviewSource : undefined"
+                :thumbnail-source="previewsAvailable ? resolveThumbnailSource : undefined"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -822,6 +842,7 @@ onMounted(async () => {
                 @delete="handleDeleteItem"
                 @download="handleDownloadItem"
                 @show-details="handleShowDetails"
+                @load-more="documentManager.loadMore"
               />
             </div>
           </div>
@@ -830,6 +851,7 @@ onMounted(async () => {
             v-if="hasSelection && !isMobile"
             embedded
             :selected-items="selection.selectedNodeArray.value"
+            :preview-url="infoPanelPreviewUrl"
             @close="selection.clear()"
           />
         </div>
@@ -838,6 +860,7 @@ onMounted(async () => {
       <FilesInfoPanel
         v-if="isMobile"
         :selected-items="selection.selectedNodeArray.value"
+        :preview-url="infoPanelPreviewUrl"
         @close="selection.clear()"
       />
     </div>
@@ -911,8 +934,8 @@ onMounted(async () => {
     <FileEditorDialog
       v-model="showEditor"
       :entity="editorEntity"
-      :read-file="fileManager.readFile"
-      :write-file="fileManager.writeFile"
+      :read-file="documentManager.readFile"
+      :write-file="documentManager.writeFile"
     />
 
     <v-snackbar

src/stores/documentsStore.ts

@@ -1,222 +0,0 @@
-import { computed, ref } from 'vue'
-import { defineStore } from 'pinia'
-import { useProvidersStore, useServicesStore, useNodesStore, ROOT_ID } from '@DocumentsManager/stores'
-import { CollectionObject } from '@DocumentsManager/models/collection'
-import { EntityObject } from '@DocumentsManager/models/entity'
-import type { SortField, SortOrder, ViewMode, BreadcrumbItem } from '@/types'
-
-type NodeRecord = CollectionObject | EntityObject
-
-export const useDocumentsStore = defineStore('documentsStore', () => {
-  const providersStore = useProvidersStore()
-  const servicesStore = useServicesStore()
-  const nodesStore = useNodesStore()
-
-  const activeProviderId = ref('default')
-  const activeServiceId = ref<string | number>('personal')
-  const currentLocation = ref<string>(ROOT_ID)
-
-  const viewMode = ref<ViewMode>('grid')
-  const sortField = ref<SortField>('label')
-  const sortOrder = ref<SortOrder>('asc')
-  const searchQuery = ref('')
-  const sidebarVisible = ref(true)
-
-  const transceiving = computed(() =>
-    providersStore.transceiving || servicesStore.transceiving || nodesStore.transceiving,
-  )
-
-  const provider = computed(() => providersStore.provider(activeProviderId.value))
-  const service = computed(() => servicesStore.service(activeProviderId.value, activeServiceId.value))
-
-  const currentCollections = computed(() =>
-    nodesStore.getChildCollections(activeProviderId.value, activeServiceId.value, currentLocation.value),
-  )
-
-  const currentEntities = computed(() =>
-    nodesStore.getChildEntities(activeProviderId.value, activeServiceId.value, currentLocation.value),
-  )
-
-  const breadcrumbs = computed<BreadcrumbItem[]>(() => {
-    const nodes = nodesStore.getPath(activeProviderId.value, activeServiceId.value, currentLocation.value)
-    return [
-      { id: ROOT_ID, label: 'Home', isRoot: true },
-      ...nodes.map((node) => ({
-        id: String(node.identifier),
-        label: node.properties.label,
-        isRoot: false,
-      })),
-    ]
-  })
-
-  function sortCollections(items: CollectionObject[]): CollectionObject[] {
-    return [...items].sort((a, b) => {
-      const aVal = sortField.value === 'label'
-        ? a.properties.label
-        : sortField.value === 'modifiedOn'
-          ? (a.modified?.getTime() ?? 0)
-          : sortField.value === 'createdOn'
-            ? (a.created?.getTime() ?? 0)
-            : ''
-      const bVal = sortField.value === 'label'
-        ? b.properties.label
-        : sortField.value === 'modifiedOn'
-          ? (b.modified?.getTime() ?? 0)
-          : sortField.value === 'createdOn'
-            ? (b.created?.getTime() ?? 0)
-            : ''
-
-      const cmp = String(aVal).localeCompare(String(bVal))
-      return sortOrder.value === 'asc' ? cmp : -cmp
-    })
-  }
-
-  function sortEntities(items: EntityObject[]): EntityObject[] {
-    return [...items].sort((a, b) => {
-      const aVal = sortField.value === 'label'
-        ? a.properties.label
-        : sortField.value === 'mime'
-          ? (a.properties.mime ?? '')
-          : sortField.value === 'size'
-            ? a.properties.size
-            : sortField.value === 'modifiedOn'
-              ? (a.modified?.getTime() ?? 0)
-              : sortField.value === 'createdOn'
-                ? (a.created?.getTime() ?? 0)
-                : ''
-      const bVal = sortField.value === 'label'
-        ? b.properties.label
-        : sortField.value === 'mime'
-          ? (b.properties.mime ?? '')
-          : sortField.value === 'size'
-            ? b.properties.size
-            : sortField.value === 'modifiedOn'
-              ? (b.modified?.getTime() ?? 0)
-              : sortField.value === 'createdOn'
-                ? (b.created?.getTime() ?? 0)
-                : ''
-
-      const cmp = String(aVal).localeCompare(String(bVal))
-      return sortOrder.value === 'asc' ? cmp : -cmp
-    })
-  }
-
-  function filterNode(node: NodeRecord): boolean {
-    if (!searchQuery.value) return true
-    return node.properties.label.toLowerCase().includes(searchQuery.value.toLowerCase())
-  }
-
-  const sortedItems = computed(() => ({
-    collections: sortCollections(currentCollections.value).filter(filterNode),
-    entities: sortEntities(currentEntities.value).filter(filterNode),
-  }))
-
-  const hasItems = computed(() =>
-    sortedItems.value.collections.length > 0 || sortedItems.value.entities.length > 0,
-  )
-
-  const isAtRoot = computed(() => currentLocation.value === ROOT_ID)
-
-  async function initialize() {
-    await providersStore.list([activeProviderId.value])
-    await servicesStore.list()
-    await refresh()
-  }
-
-  async function refresh() {
-    await nodesStore.fetchNodes(activeProviderId.value, activeServiceId.value, currentLocation.value)
-  }
-
-  async function navigateTo(collectionId: string | null) {
-    currentLocation.value = collectionId || ROOT_ID
-    await refresh()
-  }
-
-  async function navigateToRoot() {
-    await navigateTo(ROOT_ID)
-  }
-
-  async function navigateUp() {
-    if (currentLocation.value === ROOT_ID) return
-    const currentNode = nodesStore.getNode(activeProviderId.value, activeServiceId.value, currentLocation.value)
-    if (!currentNode) return
-    const parentId = currentNode.collection ? String(currentNode.collection) : ROOT_ID
-    await navigateTo(parentId)
-  }
-
-  async function createFolder(label: string) {
-    await nodesStore.createCollection(
-      activeProviderId.value,
-      activeServiceId.value,
-      currentLocation.value,
-      { label, owner: '' },
-    )
-    await refresh()
-  }
-
-  async function renameNode(node: NodeRecord, label: string) {
-    if (node instanceof CollectionObject) {
-      await nodesStore.updateCollection(
-        activeProviderId.value,
-        activeServiceId.value,
-        node.identifier,
-        { label, owner: node.properties.owner },
-      )
-    } else {
-      await nodesStore.updateEntity(
-        activeProviderId.value,
-        activeServiceId.value,
-        node.collection,
-        node.identifier,
-        {
-          '@type': 'documents.properties',
-          urid: node.properties.urid,
-          size: node.properties.size,
-          label,
-          mime: node.properties.mime,
-          format: node.properties.format,
-          encoding: node.properties.encoding,
-        },
-      )
-    }
-    await refresh()
-  }
-
-  async function deleteNode(node: NodeRecord) {
-    if (node instanceof CollectionObject) {
-      await nodesStore.deleteCollection(activeProviderId.value, activeServiceId.value, node.identifier)
-    } else {
-      await nodesStore.deleteEntity(activeProviderId.value, activeServiceId.value, node.collection, node.identifier)
-    }
-    await refresh()
-  }
-
-  return {
-    activeProviderId,
-    activeServiceId,
-    currentLocation,
-    viewMode,
-    sortField,
-    sortOrder,
-    searchQuery,
-    sidebarVisible,
-    transceiving,
-    provider,
-    service,
-    currentCollections,
-    currentEntities,
-    sortedItems,
-    hasItems,
-    breadcrumbs,
-    isAtRoot,
-    initialize,
-    refresh,
-    navigateTo,
-    navigateToRoot,
-    navigateUp,
-    createFolder,
-    renameNode,
-    deleteNode,
-    ROOT_ID,
-  }
-})

src/stores/index.ts

@@ -1 +0,0 @@
-export { useDocumentsStore } from './documentsStore'

src/types/index.ts

@@ -4,7 +4,7 @@
 
 export type ViewMode = 'grid' | 'list' | 'details'
 
-export type SortField = 'label' | 'size' | 'modifiedOn' | 'createdOn' | 'mime'
+export type SortField = 'label' | 'size' | 'modifiedOn' | 'createdOn'
 
 export type SortOrder = 'asc' | 'desc'
 

src/utils/fileHelpers.ts

@@ -1,71 +1,7 @@
-import { EntityObject } from '@DocumentsManager/models/entity'
-
 /**
- * Get the appropriate icon for a file based on its MIME type
+ * These helpers only ever depended on documents_manager's EntityObject model,
+ * never on this module's own code, so they live in documents_manager (where
+ * other modules can reuse them too); re-exported here so existing imports
+ * from '@/utils/fileHelpers' keep working unchanged.
  */
-export function getFileIcon(entity: EntityObject): string {
-  const mime = entity.properties.mime || ''
-  if (!mime) return 'mdi-file'
-  if (mime.startsWith('image/')) return 'mdi-file-image'
-  if (mime.startsWith('video/')) return 'mdi-file-video'
-  if (mime.startsWith('audio/')) return 'mdi-file-music'
-  if (mime.startsWith('text/')) return 'mdi-file-document'
-  if (mime === 'application/pdf') return 'mdi-file-pdf-box'
-  if (mime.includes('zip') || mime.includes('tar') || mime.includes('compressed')) return 'mdi-folder-zip'
-  if (mime.includes('word') || mime.includes('document')) return 'mdi-file-word'
-  if (mime.includes('excel') || mime.includes('spreadsheet')) return 'mdi-file-excel'
-  if (mime.includes('powerpoint') || mime.includes('presentation')) return 'mdi-file-powerpoint'
-  return 'mdi-file'
-}
-
-/**
- * Format file size in human readable format
- */
-export function formatSize(bytes: number): string {
-  const safeBytes = Number.isFinite(bytes) ? bytes : 0
-  if (safeBytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
-  const i = Math.floor(Math.log(safeBytes) / Math.log(k))
-  return parseFloat((safeBytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-/**
- * Format date string to localized format
- */
-export function formatDate(value: Date | string | null | undefined): string {
-  if (!value) return '—'
-  const date = value instanceof Date ? value : new Date(value)
-  if (Number.isNaN(date.getTime())) return '—'
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
-}
-
-/**
- * Get upload status icon
- */
-export function getUploadStatusIcon(status: string): string {
-  switch (status) {
-    case 'pending': return 'mdi-clock-outline'
-    case 'uploading': return 'mdi-loading mdi-spin'
-    case 'completed': return 'mdi-check-circle'
-    case 'error': return 'mdi-alert-circle'
-    default: return 'mdi-file'
-  }
-}
-
-/**
- * Get upload status color
- */
-export function getUploadStatusColor(status: string): string {
-  switch (status) {
-    case 'pending': return 'grey'
-    case 'uploading': return 'primary'
-    case 'completed': return 'success'
-    case 'error': return 'error'
-    default: return 'grey'
-  }
-}
+export { getFileIcon, formatSize, formatDate, getUploadStatusIcon, getUploadStatusColor } from '@DocumentsManager/utils/fileHelpers'