chore(deps): update dependency pinia to v4.0.3

lib/Module.php

@@ -2,14 +2,13 @@
 
 namespace KTXM\Documents;
 
-use KTXF\Module\Configuration\BrowserModuleContextInterface;
+use KTXF\Module\ModuleBrowserInterface;
-use KTXF\Module\Configuration\ModuleContextInterface;
 use KTXF\Module\ModuleInstanceAbstract;
 
 /**
  * Documents Module - Document Browser UI
  */
-class Module extends ModuleInstanceAbstract
+class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
 {
 
     public function __construct()
@@ -51,10 +50,16 @@ class Module extends ModuleInstanceAbstract
         ];
     }
     
-    public function configure(ModuleContextInterface $context): void
+    public function registerBI(): array
     {
-        if ($context instanceof BrowserModuleContextInterface) {
+        return [
-            $context->registerModule($this, 'Documents', 'static/module.mjs');
+            'handle' => $this->handle(),
-        }
+            'namespace' => 'Documents',
+            'version' => $this->version(),
+            'label' => $this->label(),
+            'author' => $this->author(),
+            'description' => $this->description(),
+            'boot' => '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": "^5.0.0",
+    "@vitest/coverage-v8": "^4.1.6",
     "@vue/test-utils": "^2.4.10",
-    "jsdom": "^30.0.0",
+    "jsdom": "^29.1.1",
-    "vitest": "^5.0.0"
+    "vitest": "^4.1.6"
   }
 }

src/components/FilePreview.vue

@@ -1,60 +0,0 @@
-<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, ref, watch } from 'vue'
+import { computed } from 'vue'
 import { VNavigationDrawer } from 'vuetify/components'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
@@ -8,10 +8,8 @@ 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<{
@@ -71,13 +69,6 @@ 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>
@@ -103,24 +94,9 @@ watch(() => props.previewUrl, () => {
 
       <!-- Single item selected -->
       <template v-if="singleSelection && selectedItem">
-        <!-- Preview/icon and name -->
+        <!-- Icon and name -->
         <div class="text-center mb-4">
-          <div v-if="showPreview" class="files-info-preview mb-3">
+          <v-icon :color="itemIconColor" size="64">{{ itemIcon }}</v-icon>
-            <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' }}
@@ -229,11 +205,4 @@ watch(() => props.previewUrl, () => {
   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

@@ -1,79 +0,0 @@
-<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,15 +2,14 @@
 import { computed } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
-import { formatSize, formatDate } from '@/utils/fileHelpers'
+import { getFileIcon, 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 =
+type ItemWithType = {
-  | { item: CollectionObject | EntityObject; type: 'collection' | 'entity' }
+  item: CollectionObject | EntityObject
-  | { item: null; type: 'sentinel' }
+  type: 'collection' | 'entity'
+}
 
 type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
 
@@ -18,10 +17,7 @@ const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
-  hasMore?: boolean
-  isLoadingMore?: boolean
   previewSource?: PreviewSource
-  thumbnailSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -32,25 +28,17 @@ 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; a
+// Combine collections and entities into a single list for virtual scrolling
-// 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>
@@ -70,17 +58,9 @@ function isSentinel(wrapped: ItemWithType): wrapped is { item: null; type: 'sent
       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-else-if="isCollection(wrapped)"
+          v-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)"
@@ -113,12 +93,7 @@ function isSentinel(wrapped: ItemWithType): wrapped is { item: null; type: 'sent
           @dblclick.stop="emit('open', wrapped.item)"
         >
           <div class="files-details-cell files-details-name">
-            <FilePreview
+            <v-icon color="grey" size="small" class="mr-2">{{ getFileIcon(wrapped.item as EntityObject) }}</v-icon>
-              :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,22 +1,17 @@
 <script setup lang="ts">
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
-import { formatSize } from '@/utils/fileHelpers'
+import { getFileIcon, 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>
 
-const props = defineProps<{
+defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
-  hasMore?: boolean
-  isLoadingMore?: boolean
   previewSource?: PreviewSource
-  thumbnailSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -27,7 +22,6 @@ const emit = defineEmits<{
   'delete': [item: CollectionObject | EntityObject]
   'download': [item: CollectionObject | EntityObject]
   'show-details': [item: CollectionObject | EntityObject]
-  'load-more': []
 }>()
 </script>
 
@@ -80,9 +74,7 @@ const emit = defineEmits<{
           @show-details="emit('show-details', $event)"
         />
       </div>
-      <div class="files-grid-thumbnail">
+      <v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
-        <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>
 
@@ -94,12 +86,6 @@ const emit = defineEmits<{
       />
     </div>
   </div>
-
-  <FilesLoadMoreSentinel
-    :has-more="!!hasMore"
-    :loading="!!isLoadingMore"
-    @intersect="emit('load-more')"
-  />
 </template>
 
 <style scoped>
@@ -150,17 +136,6 @@ 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,15 +2,14 @@
 import { computed } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
-import { formatSize } from '@/utils/fileHelpers'
+import { getFileIcon, 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 =
+type ItemWithType = {
-  | { item: CollectionObject | EntityObject; type: 'collection' | 'entity' }
+  item: CollectionObject | EntityObject
-  | { item: null; type: 'sentinel' }
+  type: 'collection' | 'entity'
+}
 
 type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
 
@@ -18,10 +17,7 @@ const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
-  hasMore?: boolean
-  isLoadingMore?: boolean
   previewSource?: PreviewSource
-  thumbnailSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -32,25 +28,17 @@ 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; a
+// Combine collections and entities into a single list for virtual scrolling
-// 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>
@@ -60,17 +48,9 @@ function isSentinel(wrapped: ItemWithType): wrapped is { item: null; type: 'sent
     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-else-if="isCollection(wrapped)"
+        v-if="isCollection(wrapped)"
         :active="selectedIds.has(String(wrapped.item.identifier))"
         @click="($event: MouseEvent | KeyboardEvent) => emit('item-click', wrapped.item, $event)"
       >
@@ -99,11 +79,7 @@ function isSentinel(wrapped: ItemWithType): wrapped is { item: null; type: 'sent
         @dblclick.stop="emit('open', wrapped.item)"
       >
         <template #prepend>
-          <FilePreview
+          <v-icon color="grey">{{ getFileIcon(wrapped.item as EntityObject) }}</v-icon>
-            :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/useFileEditor.ts

@@ -1,11 +1,11 @@
 /**
  * useFileEditor — resolves which registered editor can handle a given MIME type.
  *
- * Other modules register editors at the `documents_editor` integration
+ * Other modules register editors at the `documents_file_editor` integration
  * point by including an entry in their `integrations.ts`:
  *
  * ```ts
- * documents_editor: [{
+ * documents_file_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_editor'
+const INTEGRATION_POINT = 'documents_file_editor'
 
 function mimeMatchesPattern(mime: string, pattern: string): boolean {
   if (pattern.endsWith('/*')) {

src/composables/useFileUpload.ts

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

src/pages/Main.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, nextTick, defineAsyncComponent } from 'vue'
+import { ref, computed, onMounted, watch, nextTick, defineAsyncComponent } from 'vue'
 import { useDisplay } from 'vuetify'
-import { useModuleStore, useIntegrationStore, usePreviewStore } from '@KTXC'
+import { useModuleStore, useIntegrationStore } 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'
@@ -32,8 +31,6 @@ 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')
 })
@@ -119,59 +116,22 @@ const mediaViewerDialog = computed(() => {
 })
 
 const viewerItems = computed<ViewerItem[]>(() =>
-  documentManager.currentEntities.value.map(entityToViewerItem),
+  sortedItems.value.entities.map(entityToViewerItem),
 )
 
 function entityToViewerItem(entity: EntityObject): ViewerItem {
   return {
     id: String(entity.identifier ?? ''),
     title: entity.properties.label ?? String(entity.identifier ?? ''),
-    mime: 'image/webp',
+    mime: entity.properties.mime ?? '',
     meta: { collection: entity.collection ? String(entity.collection) : null },
   }
 }
 
-function resolveViewerSource(item: ViewerItem): string | Promise<string> {
+function resolveViewerSource(item: ViewerItem): string {
-  if (!previewsAvailable.value) {
+  return documentManager.getEntityUrl(item.id, (item.meta?.collection as string | null) ?? null)
-    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 {
   documentManager.downloadEntity(item.id, (item.meta?.collection as string | null) ?? null)
 }
@@ -295,46 +255,77 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => {
   return items
 })
 
-const hasItems = computed(() =>
+const sortedItems = computed(() => {
-  documentManager.currentCollections.value.length > 0 || documentManager.currentEntities.value.length > 0
+  const collections = [...documentManager.currentCollections.value]
+  const entities = [...documentManager.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(() => 
+  sortedItems.value.collections.length > 0 || sortedItems.value.entities.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)
-})
-
-watch([sortField, sortOrder], () => {
-  reload()
-})
-
-onUnmounted(() => {
-  if (searchDebounceTimer !== null) {
-    clearTimeout(searchDebounceTimer)
-  }
-})
-
 const hasSelection = computed(() => selection.hasSelection.value)
 
 const selectedIds = computed(() => selection.selectedIds.value)
@@ -665,7 +656,7 @@ async function readEntriesRecursively(
 async function handleUploadAll() {
   try {
     await upload.uploadAll()
-    await reload()
+    await documentManager.refresh()
     notify('Uploads completed', 'success')
   } catch (error) {
     console.error('Failed to upload files:', error)
@@ -682,7 +673,7 @@ function handleUploadDialogClose() {
 // Refresh
 async function handleRefresh() {
   try {
-    await reload()
+    await documentManager.refresh()
   } catch (error) {
     console.error('Failed to refresh files:', error)
     notify(getErrorMessage(error, 'Failed to refresh files'), 'error')
@@ -695,7 +686,7 @@ onMounted(async () => {
     await documentManager.initialize()
     await servicesStore.list()
     syncActiveService(availableServices.value)
-    await reload()
+    await documentManager.refresh()
     console.log('[Files] - Initialized with:', {
       provider: activeProviderId.value,
       service: activeServiceId.value,
@@ -788,13 +779,10 @@ onMounted(async () => {
               <!-- Grid View -->
               <FilesGridView
                 v-else-if="viewMode === 'grid'"
-                :collections="documentManager.currentCollections.value"
+                :collections="sortedItems.collections"
-                :entities="documentManager.currentEntities.value"
+                :entities="sortedItems.entities"
                 :selected-ids="selectedIds"
-                :has-more="documentManager.hasMore.value"
+                :preview-source="resolveViewerSource"
-                :is-loading-more="documentManager.isLoadingMore.value"
-                :preview-source="previewsAvailable ? resolvePreviewSource : undefined"
-                :thumbnail-source="previewsAvailable ? resolveThumbnailSource : undefined"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -802,19 +790,15 @@ onMounted(async () => {
                 @delete="handleDeleteItem"
                 @download="handleDownloadItem"
                 @show-details="handleShowDetails"
-                @load-more="documentManager.loadMore"
               />
 
               <!-- List View -->
               <FilesListView
                 v-else-if="viewMode === 'list'"
-                :collections="documentManager.currentCollections.value"
+                :collections="sortedItems.collections"
-                :entities="documentManager.currentEntities.value"
+                :entities="sortedItems.entities"
                 :selected-ids="selectedIds"
-                :has-more="documentManager.hasMore.value"
+                :preview-source="resolveViewerSource"
-                :is-loading-more="documentManager.isLoadingMore.value"
-                :preview-source="previewsAvailable ? resolvePreviewSource : undefined"
-                :thumbnail-source="previewsAvailable ? resolveThumbnailSource : undefined"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -822,19 +806,15 @@ onMounted(async () => {
                 @delete="handleDeleteItem"
                 @download="handleDownloadItem"
                 @show-details="handleShowDetails"
-                @load-more="documentManager.loadMore"
               />
 
               <!-- Details View -->
               <FilesDetailsView
                 v-else-if="viewMode === 'details'"
-                :collections="documentManager.currentCollections.value"
+                :collections="sortedItems.collections"
-                :entities="documentManager.currentEntities.value"
+                :entities="sortedItems.entities"
                 :selected-ids="selectedIds"
-                :has-more="documentManager.hasMore.value"
+                :preview-source="resolveViewerSource"
-                :is-loading-more="documentManager.isLoadingMore.value"
-                :preview-source="previewsAvailable ? resolvePreviewSource : undefined"
-                :thumbnail-source="previewsAvailable ? resolveThumbnailSource : undefined"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -842,7 +822,6 @@ onMounted(async () => {
                 @delete="handleDeleteItem"
                 @download="handleDownloadItem"
                 @show-details="handleShowDetails"
-                @load-more="documentManager.loadMore"
               />
             </div>
           </div>
@@ -851,7 +830,6 @@ onMounted(async () => {
             v-if="hasSelection && !isMobile"
             embedded
             :selected-items="selection.selectedNodeArray.value"
-            :preview-url="infoPanelPreviewUrl"
             @close="selection.clear()"
           />
         </div>
@@ -860,7 +838,6 @@ onMounted(async () => {
       <FilesInfoPanel
         v-if="isMobile"
         :selected-items="selection.selectedNodeArray.value"
-        :preview-url="infoPanelPreviewUrl"
         @close="selection.clear()"
       />
     </div>

src/stores/documentsStore.ts

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

@@ -0,0 +1 @@
+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'
+export type SortField = 'label' | 'size' | 'modifiedOn' | 'createdOn' | 'mime'
 
 export type SortOrder = 'asc' | 'desc'