refactor: improvemets

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
2026-03-24 19:10:52 -04:00
parent b6d6bed2ee
commit da6a407445
16 changed files with 1063 additions and 254 deletions
--- a/src/components/FileActionsMenu.vue
+++ b/src/components/FileActionsMenu.vue
@@ -12,6 +12,7 @@ defineProps<{

 const emit = defineEmits<{
  'open': [item: CollectionObject | EntityObject]
+  'edit': [item: CollectionObject | EntityObject]
  'rename': [item: CollectionObject | EntityObject]
  'delete': [item: CollectionObject | EntityObject]
  'download': [item: CollectionObject | EntityObject]
@@ -26,6 +27,8 @@ function handleAction(action: string, item: CollectionObject | EntityObject, eve
  
  if (action === 'open') {
    emit('open', item)
+  } else if (action === 'edit') {
+    emit('edit', item)
  } else if (action === 'rename') {
    emit('rename', item)
  } else if (action === 'delete') {
@@ -59,6 +62,10 @@ function isEntity(item: CollectionObject | EntityObject): item is EntityObject {
        <template #prepend><v-icon size="small">mdi-open-in-app</v-icon></template>
        <v-list-item-title>Open</v-list-item-title>
      </v-list-item>
+      <v-list-item v-if="isEntity(item)" @click="(e: Event) => handleAction('edit', item, e)">
+        <template #prepend><v-icon size="small">mdi-pencil</v-icon></template>
+        <v-list-item-title>Edit</v-list-item-title>
+      </v-list-item>
      <v-list-item @click="(e: Event) => handleAction('details', item, e)">
        <template #prepend><v-icon size="small">mdi-information-outline</v-icon></template>
        <v-list-item-title>Details</v-list-item-title>
--- a/src/components/FilesInfoPanel.vue
+++ b/src/components/FilesInfoPanel.vue
@@ -1,17 +1,37 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { VNavigationDrawer } from 'vuetify/components'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'

-const props = defineProps<{
+const props = withDefaults(defineProps<{
  selectedItems: (CollectionObject | EntityObject)[]
-}>()
+  embedded?: boolean
+}>(), {
+  embedded: false,
+})

 const emit = defineEmits<{
  'close': []
 }>()

+const panelComponent = computed(() => props.embedded ? 'div' : VNavigationDrawer)
+
+const panelProps = computed(() => {
+  if (props.embedded) {
+    return {}
+  }
+
+  return {
+    modelValue: hasSelection.value,
+    key: props.selectedItems.map(item => String(item.identifier)).join(','),
+    location: 'right',
+    width: 320,
+    temporary: true,
+  }
+})
+
 const hasSelection = computed(() => props.selectedItems.length > 0)
 const singleSelection = computed(() => props.selectedItems.length === 1)
 const selectedItem = computed(() => props.selectedItems[0] ?? null)
@@ -52,13 +72,12 @@ const totalSize = computed(() => {
 </script>

 <template>
-  <v-navigation-drawer
-    :model-value="hasSelection"
-    :key="selectedItems.map(i => String(i.identifier)).join(',')"
-    location="right"
-    width="320"
-    temporary
+  <component
+    :is="panelComponent"
+    v-if="!embedded || hasSelection"
+    v-bind="panelProps"
    class="files-info-panel"
+    :class="{ 'files-info-panel--embedded': embedded }"
  >
    <div class="pa-4">
      <!-- Header -->
@@ -172,11 +191,18 @@ const totalSize = computed(() => {
        </v-list>
      </template>
    </div>
-  </v-navigation-drawer>
+  </component>
 </template>

 <style scoped>
 .files-info-panel {
  border-left: 1px solid rgb(var(--v-border-color)) !important;
 }
+
+.files-info-panel--embedded {
+  width: 320px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  background-color: rgb(var(--v-theme-surface));
+}
 </style>
--- a/src/components/FilesSidebar.vue
+++ b/src/components/FilesSidebar.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useDisplay } from 'vuetify'
+import type { ServiceObject } from '@DocumentsManager/models/service'

 const display = useDisplay()
+const isMobile = computed(() => display.mdAndDown.value)

 defineProps<{
  modelValue: boolean
+  activeProviderId: string
  activeServiceId: string
+  services: ServiceObject[]
 }>()

 const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'navigate-home': []
+  'select-service': [service: ServiceObject]
 }>()
 </script>

@@ -18,9 +24,9 @@ const emit = defineEmits<{
  <v-navigation-drawer
    :model-value="modelValue"
    @update:model-value="emit('update:modelValue', $event)"
-    :permanent="display.mdAndUp.value"
-    :temporary="display.smAndDown.value"
-    width="240"
+    :permanent="!isMobile"
+    :temporary="isMobile"
+    width="280"
    class="files-sidebar"
  >
    <div class="pa-4">
@@ -53,11 +59,18 @@ const emit = defineEmits<{
      <v-list density="compact" nav>
        <v-list-subheader>Storage</v-list-subheader>
        <v-list-item
+          v-for="service in services"
+          :key="`${service.provider}:${String(service.identifier ?? '')}`"
          prepend-icon="mdi-harddisk"
-          title="Personal"
-          subtitle="Local storage"
-          :active="activeServiceId === 'personal'"
+          :title="service.label || String(service.identifier ?? 'Unnamed Service')"
+          :subtitle="service.provider"
+          :active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
+          @click="emit('select-service', service)"
        />
+
+        <div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
+          No storage services available.
+        </div>
      </v-list>
    </div>
  </v-navigation-drawer>
@@ -68,4 +81,8 @@ const emit = defineEmits<{
  border-right: 1px solid rgb(var(--v-border-color)) !important;
  overflow-y: auto;
 }
+
+.files-sidebar-empty {
+  line-height: 1.4;
+}
 </style>
--- a/src/components/FilesToolbar.vue
+++ b/src/components/FilesToolbar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useDisplay } from 'vuetify'
 import type { ViewMode } from '@/types'

 const props = defineProps<{
@@ -18,6 +19,9 @@ const emit = defineEmits<{
  'new-folder': []
 }>()

+const display = useDisplay()
+const isMobile = computed(() => display.mdAndDown.value)
+
 const searchModel = computed({
  get: () => props.searchQuery,
  set: (value: string) => emit('update:searchQuery', value)
@@ -30,19 +34,15 @@ const viewModeModel = computed({
 </script>

 <template>
-  <v-app-bar elevation="0" class="files-toolbar border-b">
+  <v-app-bar elevation="0" density="compact" class="files-toolbar">
    <template #prepend>
-      <v-btn
-        icon="mdi-menu"
-        variant="text"
+      <v-app-bar-nav-icon
+        v-if="isMobile"
        @click="emit('toggle-sidebar')"
      />
    </template>

-    <v-app-bar-title class="d-flex align-center">
-      <v-icon size="28" color="primary" class="mr-2">mdi-folder-outline</v-icon>
-      <span class="text-h6 font-weight-bold">Files</span>
-    </v-app-bar-title>
+    <v-app-bar-title>Files</v-app-bar-title>

    <v-spacer />

@@ -55,8 +55,7 @@ const viewModeModel = computed({
      prepend-inner-icon="mdi-magnify"
      hide-details
      single-line
-      class="mx-4"
-      style="max-width: 300px;"
+      class="files-toolbar-search mx-4"
    />

    <!-- View toggle -->
@@ -131,7 +130,14 @@ const viewModeModel = computed({
  border-bottom: 1px solid rgb(var(--v-border-color)) !important;
 }

-.border-b {
-  border-bottom: 1px solid rgb(var(--v-border-color));
+@media (max-width: 960px) {
+  .files-toolbar-search {
+    max-width: 180px;
+    margin-inline: 8px !important;
+  }
+}
+
+.files-toolbar-search {
+  max-width: 300px;
 }
 </style>
--- a/src/components/dialogs/UploadDialog.vue
+++ b/src/components/dialogs/UploadDialog.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { FileUploadProgress } from '@/composables/useFileUpload'
 import { formatSize, getUploadStatusIcon, getUploadStatusColor } from '@/utils/fileHelpers'

-defineProps<{
+const props = defineProps<{
  modelValue: boolean
  uploads: Map<string, FileUploadProgress>
  totalProgress: number
  isUploading: boolean
+  isPreparing: boolean
+  preparingMessage: string
+  preparingProcessedCount: number
+  preparingTotalCount: number
  pendingCount: number
  completedCount: number
 }>()
@@ -23,6 +28,23 @@ const emit = defineEmits<{
 function handleClose() {
  emit('close')
 }
+
+const uploadEntries = computed(() =>
+  Array.from(props.uploads.entries(), ([id, item]) => ({ id, item }))
+)
+
+const failedCount = computed(() =>
+  uploadEntries.value.filter(entry => entry.item.status === 'error').length
+)
+
+const queuedCount = computed(() => uploadEntries.value.length)
+
+const preparingProgress = computed(() => {
+  if (props.preparingTotalCount <= 0) return undefined
+  return Math.round((props.preparingProcessedCount / props.preparingTotalCount) * 100)
+})
+
+const listHeight = computed(() => Math.min(Math.max(uploadEntries.value.length, 1), 6) * 64)
 </script>

 <template>
@@ -33,6 +55,31 @@ function handleClose() {
        Upload Files
      </v-card-title>
      <v-card-text>
+        <div v-if="isPreparing" class="upload-preparing mb-4">
+          <div class="d-flex align-center ga-3 mb-2">
+            <v-progress-circular indeterminate size="18" width="2" color="primary" />
+            <div>
+              <div class="text-body-2 font-weight-medium">{{ preparingMessage }}</div>
+              <div class="text-caption text-medium-emphasis">
+                <template v-if="preparingTotalCount > 0">
+                  {{ preparingProcessedCount }} / {{ preparingTotalCount }} files queued
+                </template>
+                <template v-else>
+                  Preparing uploads...
+                </template>
+              </div>
+            </div>
+          </div>
+
+          <v-progress-linear
+            v-if="preparingProgress !== undefined"
+            :model-value="preparingProgress"
+            color="primary"
+            height="6"
+            rounded
+          />
+        </div>
+
        <!-- Upload progress -->
        <div v-if="totalProgress > 0 && isUploading" class="mb-4">
          <v-progress-linear
@@ -46,47 +93,66 @@ function handleClose() {
          </div>
        </div>

+        <div v-if="queuedCount > 0" class="upload-summary mb-4">
+          <v-chip size="small" variant="tonal" color="primary">
+            {{ queuedCount }} queued
+          </v-chip>
+          <v-chip v-if="pendingCount > 0" size="small" variant="tonal">
+            {{ pendingCount }} pending
+          </v-chip>
+          <v-chip v-if="completedCount > 0" size="small" variant="tonal" color="success">
+            {{ completedCount }} completed
+          </v-chip>
+          <v-chip v-if="failedCount > 0" size="small" variant="tonal" color="error">
+            {{ failedCount }} failed
+          </v-chip>
+        </div>
+
        <!-- File list -->
-        <v-list density="compact" class="upload-file-list">
-          <v-list-item
-            v-for="[id, item] in uploads"
-            :key="id"
-            class="px-0"
+        <v-virtual-scroll
+          v-if="queuedCount > 0"
+          :items="uploadEntries"
+          :height="listHeight"
+          :item-height="64"
+          class="upload-file-list"
        >
+          <template #default="{ item: entry }">
+            <v-list-item :key="entry.id" class="px-0 upload-file-row">
              <template #prepend>
-              <v-icon :color="getUploadStatusColor(item.status)" size="small">
-                {{ getUploadStatusIcon(item.status) }}
+                <v-icon :color="getUploadStatusColor(entry.item.status)" size="small">
+                  {{ getUploadStatusIcon(entry.item.status) }}
                </v-icon>
              </template>
              <v-list-item-title class="text-body-2">
-              {{ item.relativePath || item.file.name }}
+                {{ entry.item.relativePath || entry.item.file.name }}
              </v-list-item-title>
              <v-list-item-subtitle>
-              {{ formatSize(item.file.size) }}
-              <span v-if="item.error" class="text-error"> — {{ item.error }}</span>
+                {{ formatSize(entry.item.file.size) }}
+                <span v-if="entry.item.error" class="text-error"> — {{ entry.item.error }}</span>
              </v-list-item-subtitle>
              <template #append>
                <v-btn
-                v-if="item.status === 'pending' || item.status === 'error'"
+                  v-if="entry.item.status === 'pending' || entry.item.status === 'error'"
                  icon="mdi-close"
                  size="x-small"
                  variant="text"
-                @click="emit('remove-upload', id)"
+                  @click="emit('remove-upload', entry.id)"
                />
                <v-btn
-                v-if="item.status === 'error'"
+                  v-if="entry.item.status === 'error'"
                  icon="mdi-refresh"
                  size="x-small"
                  variant="text"
                  color="primary"
-                @click="emit('retry-upload', id)"
+                  @click="emit('retry-upload', entry.id)"
                />
              </template>
            </v-list-item>
-        </v-list>
+          </template>
+        </v-virtual-scroll>

        <!-- Empty state -->
-        <div v-if="uploads.size === 0" class="text-center py-8 text-grey">
+        <div v-if="queuedCount === 0 && !isPreparing" class="text-center py-8 text-grey">
          <v-icon size="48" color="grey-lighten-1">mdi-file-upload-outline</v-icon>
          <div class="mt-2">No files selected</div>
          <v-btn
@@ -101,7 +167,7 @@ function handleClose() {
        </div>

        <!-- Add more files button -->
-        <div v-else class="text-center mt-4">
+        <div v-else-if="queuedCount > 0" class="text-center mt-4">
          <v-btn
            variant="text"
            size="small"
@@ -117,7 +183,7 @@ function handleClose() {
        <v-btn 
          variant="text" 
          @click="handleClose"
-          :disabled="isUploading"
+          :disabled="isUploading || isPreparing"
        >
          {{ completedCount > 0 ? 'Done' : 'Cancel' }}
        </v-btn>
@@ -127,6 +193,7 @@ function handleClose() {
          variant="elevated"
          @click="emit('upload-all')"
          :loading="isUploading"
+          :disabled="isPreparing"
        >
          Upload {{ pendingCount }} File(s)
        </v-btn>
@@ -136,8 +203,25 @@ function handleClose() {
 </template>

 <style scoped>
+.upload-preparing {
+  padding: 12px;
+  border: 1px solid rgb(var(--v-border-color));
+  border-radius: 8px;
+  background: rgb(var(--v-theme-surface-variant), 0.3);
+}
+
+.upload-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 .upload-file-list {
  max-height: 300px;
  overflow-y: auto;
 }
+
+.upload-file-row {
+  border-bottom: 1px solid rgb(var(--v-border-color), 0.45);
+}
 </style>
--- a/src/components/editor/FileEditorDialog.vue
+++ b/src/components/editor/FileEditorDialog.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, ref, onMounted, onUnmounted } from 'vue'
+import { EntityObject } from '@DocumentsManager/models/entity'
+import { useFileEditor } from '@/composables'
+
+const props = defineProps<{
+  modelValue: boolean
+  entity: EntityObject | null
+  readFile: (entityId: string) => Promise<string | null>
+  writeFile: (entityId: string, content: string) => Promise<number>
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const fileEditor = useFileEditor()
+
+// Track whether the editor component reports unsaved changes
+const isDirty = ref(false)
+const showDiscardDialog = ref(false)
+
+const mime = computed(() => props.entity?.properties.mime ?? '')
+
+const editor = computed(() => {
+  if (!mime.value) return null
+  return fileEditor.findEditor(mime.value)
+})
+
+const editorComponent = computed(() => {
+  if (!editor.value?.component) return null
+  return defineAsyncComponent(editor.value.component as () => Promise<unknown>)
+})
+
+const filename = computed(
+  () => props.entity?.properties.label ?? String(props.entity?.identifier ?? ''),
+)
+
+function handleDirtyChange(dirty: boolean) {
+  isDirty.value = dirty
+}
+
+function requestClose() {
+  if (isDirty.value) {
+    showDiscardDialog.value = true
+  } else {
+    close()
+  }
+}
+
+function close() {
+  isDirty.value = false
+  emit('update:modelValue', false)
+}
+
+function handleDiscardConfirm() {
+  showDiscardDialog.value = false
+  close()
+}
+
+// Keyboard: let Escape trigger close with guard
+function handleKeydown(e: KeyboardEvent) {
+  if (!props.modelValue) return
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    requestClose()
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown))
+onUnmounted(() => window.removeEventListener('keydown', handleKeydown))
+</script>
+
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    fullscreen
+    transition="dialog-bottom-transition"
+    persistent
+    @update:model-value="requestClose"
+  >
+    <div class="editor-shell">
+
+      <!-- Toolbar -->
+      <div class="editor-toolbar">
+        <v-btn icon="mdi-close" variant="text" @click="requestClose" />
+        <v-icon class="ml-1 mr-2" size="small" color="medium-emphasis">mdi-pencil</v-icon>
+        <span class="editor-filename text-truncate">{{ filename }}</span>
+        <v-spacer />
+      </div>
+
+      <!-- Content area -->
+      <div class="editor-content">
+        <template v-if="entity">
+          <!-- Registered editor component -->
+          <Suspense v-if="editor">
+            <template #default>
+              <component
+                :is="editorComponent"
+                :entity="entity"
+                :mime="mime"
+                :read-file="readFile"
+                :write-file="writeFile"
+                class="editor-component"
+                @dirty="handleDirtyChange"
+              />
+            </template>
+            <template #fallback>
+              <div class="editor-loading">
+                <v-progress-circular indeterminate color="primary" />
+              </div>
+            </template>
+          </Suspense>
+
+          <!-- No editor registered for this type -->
+          <div v-else class="editor-no-support">
+            <v-icon size="64" color="grey-lighten-1">mdi-file-edit-outline</v-icon>
+            <p class="text-h6 mt-4">No editor available</p>
+            <p class="text-body-2 text-medium-emphasis mb-6">
+              {{ mime || 'Unknown file type' }}
+            </p>
+          </div>
+        </template>
+      </div>
+    </div>
+  </v-dialog>
+
+  <!-- Discard changes confirmation -->
+  <v-dialog v-model="showDiscardDialog" max-width="400" persistent>
+    <v-card>
+      <v-card-title>Unsaved Changes</v-card-title>
+      <v-card-text>
+        You have unsaved changes. Are you sure you want to close without saving?
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="showDiscardDialog = false">Cancel</v-btn>
+        <v-btn color="error" variant="tonal" @click="handleDiscardConfirm">Discard</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.editor-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgb(var(--v-theme-surface));
+}
+
+.editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  min-height: 56px;
+  flex-shrink: 0;
+}
+
+.editor-filename {
+  flex: 1;
+  font-size: 0.9375rem;
+  font-weight: 500;
+}
+
+.editor-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.editor-component {
+  width: 100%;
+  height: 100%;
+}
+
+.editor-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+
+.editor-no-support {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  padding: 32px;
+}
+</style>
--- a/src/components/editor/index.ts
+++ b/src/components/editor/index.ts
@@ -0,0 +1 @@
+export { default as FileEditorDialog } from './FileEditorDialog.vue'
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -15,3 +15,6 @@ export * from './dialogs'

 // Viewer
 export * from './viewer'
+
+// Editor
+export * from './editor'
--- a/src/components/views/FilesDetailsView.vue
+++ b/src/components/views/FilesDetailsView.vue
@@ -19,6 +19,7 @@ const props = defineProps<{
 const emit = defineEmits<{
  'item-click': [item: CollectionObject | EntityObject, event: MouseEvent | KeyboardEvent]
  'open': [item: CollectionObject | EntityObject]
+  'edit': [item: CollectionObject | EntityObject]
  'rename': [item: CollectionObject | EntityObject]
  'delete': [item: CollectionObject | EntityObject]
  'download': [item: CollectionObject | EntityObject]
@@ -70,6 +71,7 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
            <FileActionsMenu
              :item="wrapped.item"
              @open="emit('open', $event)"
+              @edit="emit('edit', $event)"
              @rename="emit('rename', $event)"
              @delete="emit('delete', $event)"
              @download="emit('download', $event)"
@@ -96,6 +98,7 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
            <FileActionsMenu
              :item="wrapped.item"
              @open="emit('open', $event)"
+              @edit="emit('edit', $event)"
              @rename="emit('rename', $event)"
              @delete="emit('delete', $event)"
              @download="emit('download', $event)"
--- a/src/components/views/FilesGridView.vue
+++ b/src/components/views/FilesGridView.vue
@@ -13,6 +13,7 @@ defineProps<{
 const emit = defineEmits<{
  'item-click': [item: CollectionObject | EntityObject, event: MouseEvent | KeyboardEvent]
  'open': [item: CollectionObject | EntityObject]
+  'edit': [item: CollectionObject | EntityObject]
  'rename': [item: CollectionObject | EntityObject]
  'delete': [item: CollectionObject | EntityObject]
  'download': [item: CollectionObject | EntityObject]
@@ -36,6 +37,7 @@ const emit = defineEmits<{
          size="x-small"
          button-class="action-btn"
          @open="emit('open', $event)"
+          @edit="emit('edit', $event)"
          @rename="emit('rename', $event)"
          @delete="emit('delete', $event)"
          @download="emit('download', $event)"
@@ -61,6 +63,7 @@ const emit = defineEmits<{
          size="x-small"
          button-class="action-btn"
          @open="emit('open', $event)"
+          @edit="emit('edit', $event)"
          @rename="emit('rename', $event)"
          @delete="emit('delete', $event)"
          @download="emit('download', $event)"
--- a/src/components/views/FilesListView.vue
+++ b/src/components/views/FilesListView.vue
@@ -19,6 +19,7 @@ const props = defineProps<{
 const emit = defineEmits<{
  'item-click': [item: CollectionObject | EntityObject, event: MouseEvent | KeyboardEvent]
  'open': [item: CollectionObject | EntityObject]
+  'edit': [item: CollectionObject | EntityObject]
  'rename': [item: CollectionObject | EntityObject]
  'delete': [item: CollectionObject | EntityObject]
  'download': [item: CollectionObject | EntityObject]
@@ -57,6 +58,7 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
          <FileActionsMenu
            :item="wrapped.item"
            @open="emit('open', $event)"
+            @edit="emit('edit', $event)"
            @rename="emit('rename', $event)"
            @delete="emit('delete', $event)"
            @download="emit('download', $event)"
@@ -81,6 +83,7 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
          <FileActionsMenu
            :item="wrapped.item"
            @open="emit('open', $event)"
+            @edit="emit('edit', $event)"
            @rename="emit('rename', $event)"
            @delete="emit('delete', $event)"
            @download="emit('download', $event)"
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -6,8 +6,10 @@ export { useFileManager } from './useFileManager'
 export { useFileSelection } from './useFileSelection'
 export { useFileUpload } from './useFileUpload'
 export { useFileViewer } from './useFileViewer'
+export { useFileEditor } from './useFileEditor'

 export type { UseFileManagerOptions } from './useFileManager'
 export type { UseFileSelectionOptions } from './useFileSelection'
 export type { UseFileUploadOptions, FileUploadProgress } from './useFileUpload'
 export type { UseFileViewerReturn } from './useFileViewer'
+export type { UseFileEditorReturn } from './useFileEditor'
--- a/src/composables/useFileEditor.ts
+++ b/src/composables/useFileEditor.ts
@@ -0,0 +1,82 @@
+/**
+ * useFileEditor — resolves which registered editor can handle a given MIME type.
+ *
+ * Other modules register editors at the `documents_file_editor` integration
+ * point by including an entry in their `integrations.ts`:
+ *
+ * ```ts
+ * documents_file_editor: [{
+ *   id: 'my_editor',
+ *   meta: { mimeTypes: ['text/plain'] },
+ *   component: () => import('./components/MyEditor.vue'),
+ * }]
+ * ```
+ *
+ * Editor components receive the props:
+ *   `entity: EntityObject`, `mime: string`,
+ *   `readFile: (entityId: string) => Promise<string | null>`,
+ *   `writeFile: (entityId: string, content: string) => Promise<number>`
+ */
+
+import { useIntegrationStore } from '@KTXC'
+import type { EntityObject } from '@DocumentsManager/models/entity'
+
+const INTEGRATION_POINT = 'documents_file_editor'
+
+function mimeMatchesPattern(mime: string, pattern: string): boolean {
+  if (pattern.endsWith('/*')) {
+    return mime.startsWith(pattern.slice(0, -1))
+  }
+  return mime === pattern
+}
+
+function editorMatchesMime(
+  mime: string,
+  mimeTypes?: string[],
+  mimePatterns?: string[],
+): boolean {
+  if (mimeTypes?.includes(mime)) return true
+  if (mimePatterns) {
+    for (const pattern of mimePatterns) {
+      if (mimeMatchesPattern(mime, pattern)) return true
+    }
+  }
+  return false
+}
+
+export function useFileEditor() {
+  const integrationStore = useIntegrationStore()
+
+  /**
+   * Returns the highest-priority registered editor that can handle `mime`,
+   * or `null` if none is found.
+   */
+  function findEditor(mime: string) {
+    const editors = integrationStore.getItems(INTEGRATION_POINT)
+    for (const editor of editors) {
+      if (
+        editorMatchesMime(
+          mime,
+          editor.meta?.mimeTypes as string[] | undefined,
+          editor.meta?.mimePatterns as string[] | undefined,
+        )
+      ) {
+        return editor
+      }
+    }
+    return null
+  }
+
+  /**
+   * Convenience: returns true if any registered editor can handle this entity.
+   */
+  function canEdit(entity: EntityObject): boolean {
+    const mime = entity.properties.mime
+    if (!mime) return false
+    return findEditor(mime) !== null
+  }
+
+  return { findEditor, canEdit }
+}
+
+export type UseFileEditorReturn = ReturnType<typeof useFileEditor>
--- a/src/composables/useFileManager.ts
+++ b/src/composables/useFileManager.ts
@@ -3,7 +3,7 @@
 * Provides reactive access to file manager state and actions
 */

-import { computed, ref } from 'vue'
+import { computed, ref, unref } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
 import { useProvidersStore } from '@DocumentsManager/stores/providersStore'
 import { useServicesStore } from '@DocumentsManager/stores/servicesStore'
@@ -17,8 +17,8 @@ import { EntityObject } from '@DocumentsManager/models/entity'
 const TRANSFER_BASE_URL = '/m/documents_manager'

 export interface UseFileManagerOptions {
-  providerId: string
-  serviceId: string
+  providerId: string | Ref<string> | ComputedRef<string>
+  serviceId: string | Ref<string> | ComputedRef<string>
  autoFetch?: boolean
 }

@@ -29,6 +29,9 @@ export function useFileManager(options: UseFileManagerOptions) {

  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)
  
@@ -37,21 +40,21 @@ export function useFileManager(options: UseFileManagerOptions) {
  const error = computed(() => nodesStore.error)

  // Provider and service
-  const provider = computed(() => providersStore.provider(providerId))
-  const service = computed(() => servicesStore.service(providerId, serviceId))
+  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(providerId, serviceId, currentLocation.value)
+    nodesStore.getChildren(currentProviderId(), currentServiceId(), currentLocation.value)
  )

  const currentCollections: ComputedRef<CollectionObject[]> = computed(() =>
-    nodesStore.getChildCollections(providerId, serviceId, currentLocation.value)
+    nodesStore.getChildCollections(currentProviderId(), currentServiceId(), currentLocation.value)
  )

  const currentEntities: ComputedRef<EntityObject[]> = computed(() =>
-    nodesStore.getChildEntities(providerId, serviceId, currentLocation.value)
+    nodesStore.getChildEntities(currentProviderId(), currentServiceId(), currentLocation.value)
  )

  // Breadcrumb path
@@ -59,7 +62,7 @@ export function useFileManager(options: UseFileManagerOptions) {
    if (currentLocation.value === ROOT_ID) {
      return []
    }
-    return nodesStore.getPath(providerId, serviceId, currentLocation.value)
+    return nodesStore.getPath(currentProviderId(), currentServiceId(), currentLocation.value)
  })

  // Is at root?
@@ -76,7 +79,7 @@ export function useFileManager(options: UseFileManagerOptions) {
    if (currentLocation.value === ROOT_ID) {
      return
    }
-    const currentNode = nodesStore.getNode(providerId, serviceId, currentLocation.value)
+    const currentNode = nodesStore.getNode(currentProviderId(), currentServiceId(), currentLocation.value)
    if (currentNode) {
      await navigateTo(currentNode.collection ? String(currentNode.collection) : ROOT_ID)
    }
@@ -94,8 +97,8 @@ export function useFileManager(options: UseFileManagerOptions) {
    range?: ListRange
  ) => {
    await nodesStore.fetchNodes(
-      providerId,
-      serviceId,
+      currentProviderId(),
+      currentServiceId(),
      currentLocation.value === ROOT_ID ? ROOT_ID : currentLocation.value,
      filter,
      sort,
@@ -106,8 +109,8 @@ export function useFileManager(options: UseFileManagerOptions) {
  // Create a new folder
  const createFolder = async (label: string): Promise<CollectionObject> => {
    return await nodesStore.createCollection(
-      providerId,
-      serviceId,
+      currentProviderId(),
+      currentServiceId(),
      currentLocation.value === ROOT_ID ? ROOT_ID : currentLocation.value,
      { label, owner: '' }
    )
@@ -129,8 +132,8 @@ export function useFileManager(options: UseFileManagerOptions) {
    }

    return await nodesStore.createEntity(
-      providerId,
-      serviceId,
+      currentProviderId(),
+      currentServiceId(),
      currentLocation.value === ROOT_ID ? ROOT_ID : currentLocation.value,
      properties
    )
@@ -138,13 +141,13 @@ export function useFileManager(options: UseFileManagerOptions) {

  // Rename a node
  const renameNode = async (nodeId: string, newLabel: string) => {
-    const node = nodesStore.getNode(providerId, serviceId, nodeId)
+    const node = nodesStore.getNode(currentProviderId(), currentServiceId(), nodeId)
    if (!node) {
      throw new Error('Node not found')
    }

    if (node instanceof CollectionObject) {
-      return await nodesStore.updateCollection(providerId, serviceId, nodeId, {
+      return await nodesStore.updateCollection(currentProviderId(), currentServiceId(), nodeId, {
        label: newLabel,
        owner: node.properties.owner,
      })
@@ -158,53 +161,53 @@ export function useFileManager(options: UseFileManagerOptions) {
        format: node.properties.format,
        encoding: node.properties.encoding,
      }
-      return await nodesStore.updateEntity(providerId, serviceId, node.collection, nodeId, properties)
+      return await nodesStore.updateEntity(currentProviderId(), currentServiceId(), node.collection, nodeId, properties)
    }
  }

  // Delete a node
  const deleteNode = async (nodeId: string): Promise<boolean> => {
-    const node = nodesStore.getNode(providerId, serviceId, nodeId)
+    const node = nodesStore.getNode(currentProviderId(), currentServiceId(), nodeId)
    if (!node) {
      throw new Error('Node not found')
    }

    if (node instanceof CollectionObject) {
-      return await nodesStore.deleteCollection(providerId, serviceId, nodeId)
+      return await nodesStore.deleteCollection(currentProviderId(), currentServiceId(), nodeId)
    } else {
-      return await nodesStore.deleteEntity(providerId, serviceId, node.collection, nodeId)
+      return await nodesStore.deleteEntity(currentProviderId(), currentServiceId(), node.collection, nodeId)
    }
  }

  // Read file content
  const readFile = async (entityId: string): Promise<string | null> => {
-    const node = nodesStore.getNode(providerId, serviceId, entityId)
+    const node = nodesStore.getNode(currentProviderId(), currentServiceId(), entityId)
    if (!node || !(node instanceof EntityObject)) {
      throw new Error('Entity not found')
    }
-    return await nodesStore.readEntity(providerId, serviceId, node.collection || ROOT_ID, entityId)
+    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(providerId, serviceId, entityId)
+    const node = nodesStore.getNode(currentProviderId(), currentServiceId(), entityId)
    if (!node || !(node instanceof EntityObject)) {
      throw new Error('Entity not found')
    }
-    return await nodesStore.writeEntity(providerId, serviceId, node.collection, entityId, content)
+    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(providerId)}/${encodeURIComponent(serviceId)}/${encodeURIComponent(collection)}/${encodeURIComponent(entityId)}`
+    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(providerId)}/${encodeURIComponent(serviceId)}/${encodeURIComponent(collection)}/${encodeURIComponent(entityId)}`
+    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')
@@ -212,7 +215,7 @@ export function useFileManager(options: UseFileManagerOptions) {

  const downloadCollection = (collectionId: string): void => {
    // Use path parameters: /download/collection/{provider}/{service}/{identifier}
-    const url = `${TRANSFER_BASE_URL}/download/collection/${encodeURIComponent(providerId)}/${encodeURIComponent(serviceId)}/${encodeURIComponent(collectionId)}`
+    const url = `${TRANSFER_BASE_URL}/download/collection/${encodeURIComponent(currentProviderId())}/${encodeURIComponent(currentServiceId())}/${encodeURIComponent(collectionId)}`
    
    window.open(url, '_blank')
  }
@@ -220,8 +223,8 @@ export function useFileManager(options: UseFileManagerOptions) {
  const downloadArchive = (ids: string[], name: string = 'download', collectionId?: string | null): void => {
    const collection = collectionId ?? currentLocation.value
    const params = new URLSearchParams({
-      provider: providerId,
-      service: serviceId,
+      provider: currentProviderId(),
+      service: currentServiceId(),
    })
    ids.forEach(id => params.append('ids[]', id))
    if (name) {
@@ -239,7 +242,7 @@ export function useFileManager(options: UseFileManagerOptions) {
  // Initialize - fetch providers, services, and initial nodes if autoFetch
  const initialize = async () => {
    await providersStore.list()
-    await servicesStore.list({ [providerId]: true })
+    await servicesStore.list({ [currentProviderId()]: true })
    if (autoFetch) {
      await refresh()
    }
--- a/src/composables/useFileUpload.ts
+++ b/src/composables/useFileUpload.ts
@@ -4,7 +4,7 @@
 * Supports individual files and entire folder uploads with path preservation
 */

-import { ref, computed } from 'vue'
+import { ref, computed, unref } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
 import { useNodesStore, ROOT_ID } from '@DocumentsManager/stores/nodesStore'
 import { EntityObject } from '@DocumentsManager/models/entity'
@@ -25,9 +25,19 @@ export interface FileWithPath {
  relativePath: string
 }

+interface NormalizedUploadItem {
+  file: File
+  relativePath?: string
+}
+
+export interface AddUploadsWithPathsOptions {
+  batchSize?: number
+  onProgress?: (processed: number, total: number) => void
+}
+
 export interface UseFileUploadOptions {
-  providerId: string
-  serviceId: string
+  providerId: string | Ref<string> | ComputedRef<string>
+  serviceId: string | Ref<string> | ComputedRef<string>
  collectionId?: string | null
  maxFileSize?: number
  allowedTypes?: string[]
@@ -44,6 +54,9 @@ export function useFileUpload(options: UseFileUploadOptions) {
    allowedTypes 
  } = options

+  const currentProviderId = () => unref(providerId)
+  const currentServiceId = () => unref(serviceId)
+
  const uploads: Ref<Map<string, FileUploadProgress>> = ref(new Map())
  const isUploading = ref(false)

@@ -113,25 +126,69 @@ export function useFileUpload(options: UseFileUploadOptions) {
    return `${pathPart}-${file.size}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
  }

+  const createUploadProgress = (file: File, relativePath?: string): FileUploadProgress => {
+    const error = validateFile(file)
+
+    return {
+      file,
+      progress: 0,
+      status: error ? 'error' : 'pending',
+      error: error || undefined,
+      relativePath,
+    }
+  }
+
+  const yieldToBrowser = async (): Promise<void> => {
+    await new Promise<void>(resolve => {
+      if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+        window.requestAnimationFrame(() => resolve())
+        return
+      }
+
+      setTimeout(resolve, 0)
+    })
+  }
+
+  const normalizeUploadsWithPaths = (
+    filesOrList: FileList | File[] | FileWithPath[]
+  ): NormalizedUploadItem[] => {
+    if (filesOrList instanceof FileList) {
+      return Array.from(filesOrList, file => ({
+        file,
+        relativePath: (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name,
+      }))
+    }
+
+    if (filesOrList.length === 0) {
+      return []
+    }
+
+    if (filesOrList[0] instanceof File) {
+      return (filesOrList as File[]).map(file => ({
+        file,
+        relativePath: (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name,
+      }))
+    }
+
+    return (filesOrList as FileWithPath[]).map(({ file, relativePath }) => ({ file, relativePath }))
+  }
+
  // Add files to upload queue
  const addFiles = (files: FileList | File[]): FileUploadProgress[] => {
    const added: FileUploadProgress[] = []

+    const nextUploads = new Map(uploads.value)
+
    for (const file of files) {
-      const error = validateFile(file)
+      const progress = createUploadProgress(file)
      const uploadId = generateUploadId(file)

-      const progress: FileUploadProgress = {
-        file,
-        progress: 0,
-        status: error ? 'error' : 'pending',
-        error: error || undefined
-      }
-      
-      uploads.value.set(uploadId, progress)
+      nextUploads.set(uploadId, progress)
      added.push(progress)
    }

+    uploads.value = nextUploads
+
    return added
  }

@@ -141,43 +198,51 @@ export function useFileUpload(options: UseFileUploadOptions) {
  ): FileUploadProgress[] => {
    const added: FileUploadProgress[] = []

-    // Handle FileList from webkitdirectory input
-    if (filesOrList instanceof FileList || (Array.isArray(filesOrList) && filesOrList[0] instanceof File && !('relativePath' in filesOrList[0]))) {
-      const fileList = filesOrList as FileList | File[]
-      for (const file of fileList) {
-        // webkitRelativePath is set on files from folder input
-        const relativePath = (file as any).webkitRelativePath || file.name
-        const error = validateFile(file)
+    const nextUploads = new Map(uploads.value)
+
+    for (const { file, relativePath } of normalizeUploadsWithPaths(filesOrList)) {
+      const progress = createUploadProgress(file, relativePath)
      const uploadId = generateUploadId(file, relativePath)

-        const progress: FileUploadProgress = {
-          file,
-          progress: 0,
-          status: error ? 'error' : 'pending',
-          error: error || undefined,
-          relativePath
-        }
-        
-        uploads.value.set(uploadId, progress)
+      nextUploads.set(uploadId, progress)
      added.push(progress)
    }
-    } else {
-      // Handle FileWithPath array (from drag & drop folder processing)
-      const filesWithPaths = filesOrList as FileWithPath[]
-      for (const { file, relativePath } of filesWithPaths) {
-        const error = validateFile(file)
+
+    uploads.value = nextUploads
+
+    return added
+  }
+
+  const addFilesWithPathsBatched = async (
+    filesOrList: FileList | File[] | FileWithPath[],
+    options: AddUploadsWithPathsOptions = {}
+  ): Promise<FileUploadProgress[]> => {
+    const items = normalizeUploadsWithPaths(filesOrList)
+    const total = items.length
+    const batchSize = Math.max(1, options.batchSize ?? 250)
+    const added: FileUploadProgress[] = []
+
+    options.onProgress?.(0, total)
+
+    for (let start = 0; start < total; start += batchSize) {
+      const batch = items.slice(start, start + batchSize)
+      const nextUploads = new Map(uploads.value)
+
+      for (const { file, relativePath } of batch) {
+        const progress = createUploadProgress(file, relativePath)
        const uploadId = generateUploadId(file, relativePath)

-        const progress: FileUploadProgress = {
-          file,
-          progress: 0,
-          status: error ? 'error' : 'pending',
-          error: error || undefined,
-          relativePath
+        nextUploads.set(uploadId, progress)
+        added.push(progress)
      }

-        uploads.value.set(uploadId, progress)
-        added.push(progress)
+      uploads.value = nextUploads
+
+      const processed = Math.min(start + batch.length, total)
+      options.onProgress?.(processed, total)
+
+      if (processed < total) {
+        await yieldToBrowser()
      }
    }

@@ -228,8 +293,8 @@ export function useFileUpload(options: UseFileUploadOptions) {
      try {
        // Create the folder
        const collection = await nodesStore.createCollection(
-          providerId,
-          serviceId,
+          currentProviderId(),
+          currentServiceId(),
          parentId,
          { label: folderName, owner: '' }
        )
@@ -277,8 +342,8 @@ export function useFileUpload(options: UseFileUploadOptions) {

      // Create the entity
      const entity = await nodesStore.createEntity(
-        providerId,
-        serviceId,
+        currentProviderId(),
+        currentServiceId(),
        targetCollection || ROOT_ID,
        {
          '@type': 'documents.properties',
@@ -295,8 +360,8 @@ export function useFileUpload(options: UseFileUploadOptions) {

      // Write the content
      await nodesStore.writeEntity(
-        providerId,
-        serviceId,
+        currentProviderId(),
+        currentServiceId(),
        targetCollection || ROOT_ID,
        String(entity.identifier),
        content
@@ -417,6 +482,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
    validateFile,
    addFiles,
    addFilesWithPaths,
+    addFilesWithPathsBatched,
    uploadFile,
    uploadAll,
    removeUpload,
--- a/src/pages/FilesPage.vue
+++ b/src/pages/FilesPage.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { useDisplay } from 'vuetify'
 import { useModuleStore } from '@KTXC'
-import { useFileManager, useFileSelection, useFileUpload } from '@/composables'
+import { useFileManager, useFileSelection, useFileUpload, useFileEditor } from '@/composables'
 import type { ViewMode, SortField, SortOrder, BreadcrumbItem } from '@/types'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
+import { ServiceObject } from '@DocumentsManager/models/service'
+import { useServicesStore } from '@DocumentsManager/stores/servicesStore'

 // Components
 import {
@@ -18,6 +21,7 @@ import {
  FilesListView,
  FilesDetailsView,
  FileViewerDialog,
+  FileEditorDialog,
  NewFolderDialog,
  RenameDialog,
  DeleteConfirmDialog,
@@ -25,19 +29,24 @@ import {
 } from '@/components'

 // Check if file manager is available
+const display = useDisplay()
+const isMobile = computed(() => display.mdAndDown.value)
+
 const moduleStore = useModuleStore()
 const isFileManagerAvailable = computed(() => {
  return moduleStore.has('documents_manager') || moduleStore.has('DocumentsManager')
 })

+const servicesStore = useServicesStore()
+
 // Active provider/service (will be selectable later)
 const activeProviderId = ref('default')
 const activeServiceId = ref('personal')

 // File manager composable
 const fileManager = useFileManager({
-  providerId: activeProviderId.value,
-  serviceId: activeServiceId.value,
+  providerId: activeProviderId,
+  serviceId: activeServiceId,
 })

 // Selection composable
@@ -45,8 +54,8 @@ const selection = useFileSelection({ multiple: true })

 // Upload composable
 const upload = useFileUpload({
-  providerId: activeProviderId.value,
-  serviceId: activeServiceId.value,
+  providerId: activeProviderId,
+  serviceId: activeServiceId,
 })

 // Keep upload collection in sync with current location
@@ -54,6 +63,12 @@ watch(() => fileManager.currentLocation.value, (newLocation) => {
  upload.setCollection(newLocation)
 })

+watch(() => fileManager.error.value, (message) => {
+  if (message) {
+    notify(message, 'error')
+  }
+})
+
 // View state
 const viewMode = ref<ViewMode>('grid')
 const sortField = ref<SortField>('label')
@@ -72,10 +87,80 @@ const nodesToDelete = ref<(CollectionObject | EntityObject)[]>([])
 // Drag and drop state
 const isDragOver = ref(false)

+// Notifications
+const snackbarVisible = ref(false)
+const snackbarMessage = ref('')
+const snackbarColor = ref<'success' | 'info' | 'warning' | 'error'>('success')
+
+// Upload preparation state
+const isPreparingUploads = ref(false)
+const uploadPreparationMessage = ref('Preparing uploads...')
+const uploadPreparationProcessedCount = ref(0)
+const uploadPreparationTotalCount = ref(0)
+
 // Viewer state
 const viewerEntity = ref<EntityObject | null>(null)
 const showViewer = ref(false)

+// Editor state
+const fileEditorComposable = useFileEditor()
+const editorEntity = ref<EntityObject | null>(null)
+const showEditor = ref(false)
+
+function notify(message: string, color: 'success' | 'info' | 'warning' | 'error' = 'success') {
+  snackbarMessage.value = message
+  snackbarColor.value = color
+  snackbarVisible.value = true
+}
+
+function getErrorMessage(error: unknown, fallback: string) {
+  return error instanceof Error ? error.message : fallback
+}
+
+function beginUploadPreparation(message: string, totalCount: number = 0) {
+  isPreparingUploads.value = true
+  uploadPreparationMessage.value = message
+  uploadPreparationProcessedCount.value = 0
+  uploadPreparationTotalCount.value = totalCount
+}
+
+function updateUploadPreparation(processedCount: number, totalCount: number) {
+  uploadPreparationProcessedCount.value = processedCount
+  uploadPreparationTotalCount.value = totalCount
+}
+
+function finishUploadPreparation() {
+  isPreparingUploads.value = false
+  uploadPreparationProcessedCount.value = 0
+  uploadPreparationTotalCount.value = 0
+}
+
+async function queueFolderUploads(
+  filesOrList: FileList | { file: File; relativePath: string }[],
+  message: string,
+  successMessage: string
+) {
+  const totalCount = filesOrList.length
+
+  showUploadDialog.value = true
+  beginUploadPreparation(message, totalCount)
+  await nextTick()
+
+  try {
+    await upload.addFilesWithPathsBatched(filesOrList, {
+      batchSize: 250,
+      onProgress: updateUploadPreparation,
+    })
+
+    notify(successMessage, 'info')
+  } catch (error) {
+    console.error('Failed to prepare uploads:', error)
+    notify(getErrorMessage(error, 'Failed to prepare uploads'), 'error')
+  } finally {
+    finishUploadPreparation()
+  }
+}
+
 function handleOpenItem(item: CollectionObject | EntityObject) {
  if (item instanceof EntityObject) {
    viewerEntity.value = item
@@ -91,6 +176,13 @@ function handleViewerNavigate(entity: EntityObject) {
  viewerEntity.value = entity
 }

+function handleEditItem(item: CollectionObject | EntityObject) {
+  if (item instanceof EntityObject && fileEditorComposable.canEdit(item)) {
+    editorEntity.value = item
+    showEditor.value = true
+  }
+}
+
 // Hidden file inputs
 const fileInputRef = ref<HTMLInputElement | null>(null)
 const folderInputRef = ref<HTMLInputElement | null>(null)
@@ -202,8 +294,75 @@ const hasItems = computed(() =>
  sortedItems.value.collections.length > 0 || sortedItems.value.entities.length > 0
 )

+const hasSelection = computed(() => selection.hasSelection.value)
+
 const selectedIds = computed(() => selection.selectedIds.value)

+const availableServices = computed<ServiceObject[]>(() => {
+  const services = servicesStore.services
+  const enabledServices = services.filter(service => service.enabled)
+  const source = enabledServices.length > 0 ? enabledServices : services
+
+  return [...source].sort((left, right) => {
+    const leftLabel = (left.label || String(left.identifier || '')).toLowerCase()
+    const rightLabel = (right.label || String(right.identifier || '')).toLowerCase()
+    return leftLabel.localeCompare(rightLabel)
+  })
+})
+
+function syncActiveService(services: ServiceObject[]) {
+  if (services.length === 0) {
+    return
+  }
+
+  const currentService = services.find(service =>
+    service.provider === activeProviderId.value &&
+    String(service.identifier ?? '') === activeServiceId.value
+  )
+
+  if (currentService) {
+    return
+  }
+
+  const [nextService] = services
+  activeProviderId.value = nextService.provider
+  activeServiceId.value = String(nextService.identifier ?? '')
+}
+
+watch(availableServices, (services) => {
+  syncActiveService(services)
+}, { immediate: true })
+
+watch([activeProviderId, activeServiceId], async ([providerId, serviceId], [previousProviderId, previousServiceId]) => {
+  if (!providerId || !serviceId) {
+    return
+  }
+
+  if (providerId === previousProviderId && serviceId === previousServiceId) {
+    return
+  }
+
+  selection.clear()
+  upload.setCollection(fileManager.rootId.value)
+  await fileManager.navigateToRoot()
+}, { flush: 'post' })
+
+async function handleServiceSelect(service: ServiceObject) {
+  const providerId = service.provider
+  const serviceId = String(service.identifier ?? '')
+
+  if (providerId === activeProviderId.value && serviceId === activeServiceId.value) {
+    return
+  }
+
+  activeProviderId.value = providerId
+  activeServiceId.value = serviceId
+  if (isMobile.value) {
+    sidebarVisible.value = false
+  }
+  notify(`Switched to ${service.label || serviceId}`, 'info')
+}
+
 // Navigation methods
 async function handleBreadcrumbNavigate(item: BreadcrumbItem) {
  selection.clear()
@@ -251,8 +410,10 @@ async function handleCreateFolder(name: string) {
  try {
    await fileManager.createFolder(name)
    showNewFolderDialog.value = false
+    notify(`Folder "${name}" created`, 'success')
  } catch (error) {
    console.error('Failed to create folder:', error)
+    notify(getErrorMessage(error, 'Failed to create folder'), 'error')
  }
 }

@@ -264,13 +425,16 @@ function handleRenameItem(item: CollectionObject | EntityObject) {

 async function handleRename(newName: string) {
  if (!nodeToRename.value) return
+  const currentName = renameCurrentName(nodeToRename.value)
  
  try {
    await fileManager.renameNode(nodeId(nodeToRename.value), newName)
    showRenameDialog.value = false
    nodeToRename.value = null
+    notify(`Renamed "${currentName}" to "${newName}"`, 'success')
  } catch (error) {
    console.error('Failed to rename:', error)
+    notify(getErrorMessage(error, 'Failed to rename item'), 'error')
  }
 }

@@ -281,6 +445,8 @@ function handleDeleteItem(item: CollectionObject | EntityObject) {
 }

 async function handleDelete() {
+  const deletedCount = nodesToDelete.value.length
+
  try {
    for (const node of nodesToDelete.value) {
      await fileManager.deleteNode(nodeId(node))
@@ -288,8 +454,13 @@ async function handleDelete() {
    selection.clear()
    showDeleteDialog.value = false
    nodesToDelete.value = []
+    notify(
+      deletedCount === 1 ? 'Item deleted' : `${deletedCount} items deleted`,
+      'success'
+    )
  } catch (error) {
    console.error('Failed to delete:', error)
+    notify(getErrorMessage(error, 'Failed to delete selected items'), 'error')
  }
 }

@@ -298,9 +469,11 @@ function handleDownloadItem(item: CollectionObject | EntityObject) {
  if (item instanceof EntityObject) {
    // Download single file
    fileManager.downloadEntity(nodeId(item), String(item.collection ?? fileManager.ROOT_ID))
+    notify(`Download started for "${nodeLabel(item)}"`, 'info')
  } else if (item instanceof CollectionObject) {
    // Download folder as ZIP
    fileManager.downloadCollection(nodeId(item))
+    notify(`Archive download started for "${nodeLabel(item)}"`, 'info')
  }
 }

@@ -318,15 +491,24 @@ function handleFileSelect(event: Event) {
  if (input.files && input.files.length > 0) {
    upload.addFiles(input.files)
    showUploadDialog.value = true
+    notify(
+      input.files.length === 1 ? '1 file added to uploads' : `${input.files.length} files added to uploads`,
+      'info'
+    )
    input.value = ''
  }
 }

-function handleFolderSelect(event: Event) {
+async function handleFolderSelect(event: Event) {
  const input = event.target as HTMLInputElement
  if (input.files && input.files.length > 0) {
-    upload.addFilesWithPaths(input.files)
-    showUploadDialog.value = true
+    await queueFolderUploads(
+      input.files,
+      'Preparing folder upload...',
+      input.files.length === 1
+        ? '1 file added from folder upload'
+        : `${input.files.length} files added from folder upload`
+    )
    input.value = ''
  }
 }
@@ -352,18 +534,38 @@ async function handleDrop(event: DragEvent) {
  if (items && items.length > 0) {
    const entries: FileSystemEntry[] = []
    for (let i = 0; i < items.length; i++) {
-      const entry = items[i].webkitGetAsEntry?.()
+      const item = items[i]
+      if (!item) continue
+
+      const entry = item.webkitGetAsEntry?.()
      if (entry) {
        entries.push(entry)
      }
    }
    
    if (entries.length > 0) {
+      showUploadDialog.value = true
+      beginUploadPreparation('Scanning dropped folder...')
+      await nextTick()
+
+      try {
        const filesWithPaths = await readEntriesRecursively(entries)
        if (filesWithPaths.length > 0) {
-        upload.addFilesWithPaths(filesWithPaths)
-        showUploadDialog.value = true
+          await queueFolderUploads(
+            filesWithPaths,
+            'Preparing dropped folder upload...',
+            filesWithPaths.length === 1 ? '1 file added to uploads' : `${filesWithPaths.length} files added to uploads`
+          )
+        } else {
+          notify('No files found in dropped folder', 'warning')
+          finishUploadPreparation()
        }
+      } catch (error) {
+        finishUploadPreparation()
+        console.error('Failed to read dropped folder:', error)
+        notify(getErrorMessage(error, 'Failed to read dropped folder'), 'error')
+      }
+
      return
    }
  }
@@ -371,6 +573,10 @@ async function handleDrop(event: DragEvent) {
  if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
    upload.addFiles(event.dataTransfer.files)
    showUploadDialog.value = true
+    notify(
+      event.dataTransfer.files.length === 1 ? '1 file added to uploads' : `${event.dataTransfer.files.length} files added to uploads`,
+      'info'
+    )
  }
 }

@@ -416,24 +622,38 @@ async function readEntriesRecursively(

 // Upload methods
 async function handleUploadAll() {
+  try {
    await upload.uploadAll()
    await fileManager.refresh()
+    notify('Uploads completed', 'success')
+  } catch (error) {
+    console.error('Failed to upload files:', error)
+    notify(getErrorMessage(error, 'Failed to upload files'), 'error')
+  }
 }

 function handleUploadDialogClose() {
  showUploadDialog.value = false
+  finishUploadPreparation()
  upload.clearAll()
 }

 // Refresh
 async function handleRefresh() {
+  try {
    await fileManager.refresh()
+  } catch (error) {
+    console.error('Failed to refresh files:', error)
+    notify(getErrorMessage(error, 'Failed to refresh files'), 'error')
+  }
 }

 // Initialize
 onMounted(async () => {
  try {
    await fileManager.initialize()
+    await servicesStore.list()
+    syncActiveService(availableServices.value)
    await fileManager.refresh()
    console.log('[Files] - Initialized with:', {
      provider: activeProviderId.value,
@@ -441,12 +661,32 @@ onMounted(async () => {
    })
  } catch (error) {
    console.error('[Files] - Failed to initialize:', error)
+    notify(getErrorMessage(error, 'Failed to initialize file manager'), 'error')
  }
 })
 </script>

 <template>
-  <div class="files-container">
+  <div v-if="!isFileManagerAvailable" class="files-unavailable">
+    <v-alert
+      type="warning"
+      variant="outlined"
+      class="files-unavailable-alert"
+    >
+      <v-icon size="64" color="warning" class="mb-6">mdi-folder-off-outline</v-icon>
+      <h2 class="text-h5 font-weight-bold mb-4">File Manager Not Available</h2>
+      <p>
+        The File Manager module is not installed or enabled.
+        This page requires the <strong>documents_manager</strong> module to function properly.
+      </p>
+      <p class="mb-0 mt-2">
+        Please contact your system administrator to install and enable the
+        <code>documents_manager</code> module.
+      </p>
+    </v-alert>
+  </div>
+
+  <div v-else class="files-container">
    <!-- Top Toolbar -->
    <FilesToolbar
      v-model:search-query="searchQuery"
@@ -472,12 +712,17 @@ onMounted(async () => {
      <!-- Sidebar -->
      <FilesSidebar
        v-model="sidebarVisible"
+        :active-provider-id="activeProviderId"
        :active-service-id="activeServiceId"
+        :services="availableServices"
        @navigate-home="fileManager.navigateToRoot()"
+        @select-service="handleServiceSelect"
      />

      <!-- Main Area -->
      <div class="files-main">
+        <div class="files-workspace">
+          <div class="files-browser-panel">
            <!-- Breadcrumbs -->
            <FilesBreadcrumbs
              :items="breadcrumbs"
@@ -492,28 +737,9 @@ onMounted(async () => {
              class="mx-4"
            />

-        <!-- Error -->
-        <v-alert
-          v-if="fileManager.error.value"
-          type="error"
-          variant="tonal"
-          class="mx-4 mb-4"
-        >
-          {{ fileManager.error.value }}
-        </v-alert>
-
-        <!-- File Manager not available -->
-        <v-alert
-          v-if="!isFileManagerAvailable"
-          type="warning"
-          variant="tonal"
-          class="mx-4 mb-4"
-        >
-          File Manager module is not available. Please ensure it is installed and enabled.
-        </v-alert>
-
+            <div class="files-view-panel">
              <!-- Empty state -->
-        <FilesEmptyState v-else-if="!hasItems && !fileManager.isLoading.value" />
+              <FilesEmptyState v-if="!hasItems && !fileManager.isLoading.value" />

              <!-- Grid View -->
              <FilesGridView
@@ -523,6 +749,7 @@ onMounted(async () => {
                :selected-ids="selectedIds"
                @item-click="handleItemClick"
                @open="handleOpenItem"
+                @edit="handleEditItem"
                @rename="handleRenameItem"
                @delete="handleDeleteItem"
                @download="handleDownloadItem"
@@ -537,6 +764,7 @@ onMounted(async () => {
                :selected-ids="selectedIds"
                @item-click="handleItemClick"
                @open="handleOpenItem"
+                @edit="handleEditItem"
                @rename="handleRenameItem"
                @delete="handleDeleteItem"
                @download="handleDownloadItem"
@@ -551,6 +779,7 @@ onMounted(async () => {
                :selected-ids="selectedIds"
                @item-click="handleItemClick"
                @open="handleOpenItem"
+                @edit="handleEditItem"
                @rename="handleRenameItem"
                @delete="handleDeleteItem"
                @download="handleDownloadItem"
@@ -559,6 +788,22 @@ onMounted(async () => {
            </div>
          </div>

+          <FilesInfoPanel
+            v-if="hasSelection && !isMobile"
+            embedded
+            :selected-items="selection.selectedNodeArray.value"
+            @close="selection.clear()"
+          />
+        </div>
+      </div>
+
+      <FilesInfoPanel
+        v-if="isMobile"
+        :selected-items="selection.selectedNodeArray.value"
+        @close="selection.clear()"
+      />
+    </div>
+
    <!-- Hidden file inputs -->
    <input
      ref="fileInputRef"
@@ -598,6 +843,10 @@ onMounted(async () => {
      :uploads="upload.uploads.value"
      :total-progress="upload.totalProgress.value"
      :is-uploading="upload.isUploading.value"
+      :is-preparing="isPreparingUploads"
+      :preparing-message="uploadPreparationMessage"
+      :preparing-processed-count="uploadPreparationProcessedCount"
+      :preparing-total-count="uploadPreparationTotalCount"
      :pending-count="upload.pendingUploads.value.length"
      :completed-count="upload.completedUploads.value.length"
      @upload-all="handleUploadAll"
@@ -607,12 +856,6 @@ onMounted(async () => {
      @close="handleUploadDialogClose"
    />

-    <!-- Info Panel (right side) -->
-    <FilesInfoPanel
-      :selected-items="selection.selectedNodeArray.value"
-      @close="selection.clear()"
-    />
-
    <!-- File Viewer -->
    <FileViewerDialog
      v-model="showViewer"
@@ -622,10 +865,46 @@ onMounted(async () => {
      :download-entity="fileManager.downloadEntity"
      @navigate="handleViewerNavigate"
    />
+
+    <!-- File Editor -->
+    <FileEditorDialog
+      v-model="showEditor"
+      :entity="editorEntity"
+      :read-file="fileManager.readFile"
+      :write-file="fileManager.writeFile"
+    />
+
+    <v-snackbar
+      v-model="snackbarVisible"
+      :color="snackbarColor"
+      :timeout="3000"
+      location="bottom right"
+    >
+      {{ snackbarMessage }}
+      <template #actions>
+        <v-btn variant="text" @click="snackbarVisible = false">Close</v-btn>
+      </template>
+    </v-snackbar>
  </div>
 </template>

 <style scoped>
+.files-unavailable {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  padding: 48px;
+  text-align: center;
+  width: 100%;
+}
+
+.files-unavailable-alert {
+  width: 100%;
+  text-align: left;
+}
+
 .files-container {
  display: flex;
  flex-direction: column;
@@ -642,8 +921,35 @@ onMounted(async () => {

 .files-main {
  flex: 1;
-  overflow-y: auto;
+  display: flex;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.files-workspace {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.files-browser-panel {
+  flex: 1;
  display: flex;
  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.files-view-panel {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+@media (max-width: 960px) {
+  .files-workspace {
+    flex-direction: column;
+  }
 }
 </style>
				`@@ -0,0 +1 @@`
				`export { default as FileEditorDialog } from './FileEditorDialog.vue'`