From 69424692598f600abedfcd660845e1ba1595dca9 Mon Sep 17 00:00:00 2001
From: Sebastian Krupinski <krupinski01@gmail.com>
Date: Sat, 5 Sep 2026 20:14:40 -0400
Subject: [PATCH] feat: pagination

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
---
 src/components/FilesLoadMoreSentinel.vue  |  79 ++++++++
 src/components/views/FilesDetailsView.vue |  32 +++-
 src/components/views/FilesGridView.vue    |  10 +
 src/components/views/FilesListView.vue    |  32 +++-
 src/composables/useFileUpload.ts          |  13 +-
 src/pages/Main.vue                        | 135 ++++++-------
 src/stores/documentsStore.ts              | 222 ----------------------
 src/stores/index.ts                       |   1 -
 src/types/index.ts                        |   2 +-
 9 files changed, 200 insertions(+), 326 deletions(-)
 create mode 100644 src/components/FilesLoadMoreSentinel.vue
 delete mode 100644 src/stores/documentsStore.ts
 delete mode 100644 src/stores/index.ts

diff --git a/src/components/FilesLoadMoreSentinel.vue b/src/components/FilesLoadMoreSentinel.vue
new file mode 100644
index 0000000..1bfc81f
--- /dev/null
+++ b/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>
diff --git a/src/components/views/FilesDetailsView.vue b/src/components/views/FilesDetailsView.vue
index ea14fa0..703f160 100644
--- a/src/components/views/FilesDetailsView.vue
+++ b/src/components/views/FilesDetailsView.vue
@@ -6,11 +6,11 @@ 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>
 
@@ -18,6 +18,8 @@ const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
+  hasMore?: boolean
+  isLoadingMore?: boolean
   previewSource?: PreviewSource
   thumbnailSource?: PreviewSource
 }>()
@@ -30,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>
@@ -60,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)"
diff --git a/src/components/views/FilesGridView.vue b/src/components/views/FilesGridView.vue
index a7fa067..ff5a0c3 100644
--- a/src/components/views/FilesGridView.vue
+++ b/src/components/views/FilesGridView.vue
@@ -5,6 +5,7 @@ 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>
 
@@ -12,6 +13,8 @@ const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
+  hasMore?: boolean
+  isLoadingMore?: boolean
   previewSource?: PreviewSource
   thumbnailSource?: PreviewSource
 }>()
@@ -24,6 +27,7 @@ const emit = defineEmits<{
   'delete': [item: CollectionObject | EntityObject]
   'download': [item: CollectionObject | EntityObject]
   'show-details': [item: CollectionObject | EntityObject]
+  'load-more': []
 }>()
 </script>
 
@@ -90,6 +94,12 @@ const emit = defineEmits<{
       />
     </div>
   </div>
+
+  <FilesLoadMoreSentinel
+    :has-more="!!hasMore"
+    :loading="!!isLoadingMore"
+    @intersect="emit('load-more')"
+  />
 </template>
 
 <style scoped>
diff --git a/src/components/views/FilesListView.vue b/src/components/views/FilesListView.vue
index 76b9dfd..7f0dab2 100644
--- a/src/components/views/FilesListView.vue
+++ b/src/components/views/FilesListView.vue
@@ -6,11 +6,11 @@ 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>
 
@@ -18,6 +18,8 @@ const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
+  hasMore?: boolean
+  isLoadingMore?: boolean
   previewSource?: PreviewSource
   thumbnailSource?: PreviewSource
 }>()
@@ -30,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>
@@ -50,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)"
       >
diff --git a/src/composables/useFileUpload.ts b/src/composables/useFileUpload.ts
index 572773c..01c7908 100644
--- a/src/composables/useFileUpload.ts
+++ b/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
       )
 
diff --git a/src/pages/Main.vue b/src/pages/Main.vue
index 8c5b049..8c12d0e 100644
--- a/src/pages/Main.vue
+++ b/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, 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'
@@ -118,7 +119,7 @@ const mediaViewerDialog = computed(() => {
 })
 
 const viewerItems = computed<ViewerItem[]>(() =>
-  sortedItems.value.entities.map(entityToViewerItem),
+  documentManager.currentEntities.value.map(entityToViewerItem),
 )
 
 function entityToViewerItem(entity: EntityObject): ViewerItem {
@@ -294,76 +295,45 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => {
   return items
 })
 
-const sortedItems = computed(() => {
-  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(() =>
+  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)
 
@@ -695,7 +665,7 @@ async function readEntriesRecursively(
 async function handleUploadAll() {
   try {
     await upload.uploadAll()
-    await documentManager.refresh()
+    await reload()
     notify('Uploads completed', 'success')
   } catch (error) {
     console.error('Failed to upload files:', error)
@@ -712,7 +682,7 @@ function handleUploadDialogClose() {
 // Refresh
 async function handleRefresh() {
   try {
-    await documentManager.refresh()
+    await reload()
   } catch (error) {
     console.error('Failed to refresh files:', error)
     notify(getErrorMessage(error, 'Failed to refresh files'), 'error')
@@ -725,7 +695,7 @@ onMounted(async () => {
     await documentManager.initialize()
     await servicesStore.list()
     syncActiveService(availableServices.value)
-    await documentManager.refresh()
+    await reload()
     console.log('[Files] - Initialized with:', {
       provider: activeProviderId.value,
       service: activeServiceId.value,
@@ -818,9 +788,11 @@ onMounted(async () => {
               <!-- 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"
+                :has-more="documentManager.hasMore.value"
+                :is-loading-more="documentManager.isLoadingMore.value"
                 :preview-source="previewsAvailable ? resolvePreviewSource : undefined"
                 :thumbnail-source="previewsAvailable ? resolveThumbnailSource : undefined"
                 @item-click="handleItemClick"
@@ -830,14 +802,17 @@ 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"
+                :has-more="documentManager.hasMore.value"
+                :is-loading-more="documentManager.isLoadingMore.value"
                 :preview-source="previewsAvailable ? resolvePreviewSource : undefined"
                 :thumbnail-source="previewsAvailable ? resolveThumbnailSource : undefined"
                 @item-click="handleItemClick"
@@ -847,14 +822,17 @@ 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"
+                :has-more="documentManager.hasMore.value"
+                :is-loading-more="documentManager.isLoadingMore.value"
                 :preview-source="previewsAvailable ? resolvePreviewSource : undefined"
                 :thumbnail-source="previewsAvailable ? resolveThumbnailSource : undefined"
                 @item-click="handleItemClick"
@@ -864,6 +842,7 @@ onMounted(async () => {
                 @delete="handleDeleteItem"
                 @download="handleDownloadItem"
                 @show-details="handleShowDetails"
+                @load-more="documentManager.loadMore"
               />
             </div>
           </div>
diff --git a/src/stores/documentsStore.ts b/src/stores/documentsStore.ts
deleted file mode 100644
index 8485cbe..0000000
--- a/src/stores/documentsStore.ts
+++ /dev/null
@@ -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,
-  }
-})
diff --git a/src/stores/index.ts b/src/stores/index.ts
deleted file mode 100644
index ba32d18..0000000
--- a/src/stores/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useDocumentsStore } from './documentsStore'
diff --git a/src/types/index.ts b/src/types/index.ts
index 627d1e0..4f235a1 100644
--- a/src/types/index.ts
+++ b/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'