Initial commit

.gitignore

@@ -0,0 +1,29 @@
+# Frontend development
+node_modules/
+*.local
+.env.local
+.env.*.local
+.cache/
+.vite/
+.temp/
+.tmp/
+
+# Frontend build
+/static/
+
+# Backend development
+/lib/vendor/
+coverage/
+phpunit.xml.cache
+.phpunit.result.cache
+.php-cs-fixer.cache
+.phpstan.cache
+.phpactor/
+
+# Editors
+.DS_Store
+.vscode/
+.idea/
+
+# Logs
+*.log

composer.json

@@ -0,0 +1,12 @@
+{
+    "name": "ktrix/files",
+    "description": "File browser interface module",
+    "type": "ktrix-module",
+    "license": "AGPL-3.0-or-later",
+    "autoload": {
+        "psr-4": {
+            "KTXM\\Files\\": "lib/"
+        }
+    },
+    "require": {}
+}

lib/Module.php

@@ -0,0 +1,65 @@
+<?php
+
+namespace KTXM\Files;
+
+use KTXF\Module\ModuleBrowserInterface;
+use KTXF\Module\ModuleInstanceAbstract;
+
+/**
+ * Files Module - File Browser UI
+ */
+class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
+{
+
+    public function __construct()
+    { }
+
+    public function handle(): string
+    {
+        return 'files';
+    }
+
+    public function label(): string
+    {
+        return 'Files';
+    }
+
+    public function author(): string
+    {
+        return 'Ktrix';
+    }
+
+    public function description(): string
+    {
+        return 'File browser interface - provides file and folder management, navigation, uploads, and organization capabilities';
+    }
+
+    public function version(): string
+    {
+        return '0.0.1';
+    }
+
+    public function permissions(): array
+    {
+        return [
+            'files' => [
+                'label' => 'Access Files',
+                'description' => 'View and access the file browser module',
+                'group' => 'File Management'
+            ],
+        ];
+    }
+    
+    public function registerBI(): array
+    {
+        return [
+            'handle' => $this->handle(),
+            'namespace' => 'Files',
+            'version' => $this->version(),
+            'label' => $this->label(),
+            'author' => $this->author(),
+            'description' => $this->description(),
+            'boot' => 'static/module.mjs',
+        ];
+    }
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "files",
+  "version": "0.0.1",
+  "private": true,
+  "license": "AGPL-3.0-or-later",
+  "author": "Ktrix",
+  "type": "module",
+  "scripts": {
+    "build": "vite build --mode production --config vite.config.ts",
+    "dev": "vite build --mode development --config vite.config.ts",
+    "watch": "vite build --mode development --watch --config vite.config.ts",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "pinia": "^2.3.1",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.10.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.2",
+    "vue-tsc": "^3.0.5"
+  }
+}

src/components/FileActionsMenu.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+
+defineProps<{
+  item: FileCollectionObject | FileEntityObject
+  size?: 'x-small' | 'small' | 'default'
+  variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
+  buttonClass?: string
+}>()
+
+const emit = defineEmits<{
+  'rename': [item: FileCollectionObject | FileEntityObject]
+  'delete': [item: FileCollectionObject | FileEntityObject]
+  'download': [item: FileCollectionObject | FileEntityObject]
+  'show-details': [item: FileCollectionObject | FileEntityObject]
+}>()
+
+const menuOpen = ref(false)
+
+function handleAction(action: string, item: FileCollectionObject | FileEntityObject, event: Event) {
+  event.stopPropagation()
+  menuOpen.value = false
+  
+  if (action === 'rename') {
+    emit('rename', item)
+  } else if (action === 'delete') {
+    emit('delete', item)
+  } else if (action === 'download') {
+    emit('download', item)
+  } else if (action === 'details') {
+    emit('show-details', item)
+  }
+}
+
+function isEntity(item: FileCollectionObject | FileEntityObject): item is FileEntityObject {
+  return item['@type'] === 'files.entity'
+}
+</script>
+
+<template>
+  <v-menu v-model="menuOpen" location="bottom end">
+    <template #activator="{ props: menuProps }">
+      <v-btn
+        v-bind="menuProps"
+        icon="mdi-dots-vertical"
+        :size="size ?? 'small'"
+        :variant="variant ?? 'text'"
+        :class="buttonClass"
+        @click.stop
+      />
+    </template>
+    <v-list density="compact">
+      <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>
+      </v-list-item>
+      <v-list-item v-if="isEntity(item)" @click="(e: Event) => handleAction('download', item, e)">
+        <template #prepend><v-icon size="small">mdi-download</v-icon></template>
+        <v-list-item-title>Download</v-list-item-title>
+      </v-list-item>
+      <v-list-item v-else @click="(e: Event) => handleAction('download', item, e)">
+        <template #prepend><v-icon size="small">mdi-folder-download</v-icon></template>
+        <v-list-item-title>Download as ZIP</v-list-item-title>
+      </v-list-item>
+      <v-list-item @click="(e: Event) => handleAction('rename', item, e)">
+        <template #prepend><v-icon size="small">mdi-pencil</v-icon></template>
+        <v-list-item-title>Rename</v-list-item-title>
+      </v-list-item>
+      <v-divider />
+      <v-list-item @click="(e: Event) => handleAction('delete', item, e)" class="text-error">
+        <template #prepend><v-icon size="small" color="error">mdi-delete</v-icon></template>
+        <v-list-item-title>Delete</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>

src/components/FilesBreadcrumbs.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { BreadcrumbItem } from '@/types'
+
+defineProps<{
+  items: BreadcrumbItem[]
+}>()
+
+const emit = defineEmits<{
+  'navigate': [item: BreadcrumbItem]
+}>()
+</script>
+
+<template>
+  <v-breadcrumbs :items="items as any" class="px-4 py-2">
+    <template #item="{ item }">
+      <v-breadcrumbs-item
+        :disabled="false"
+        class="breadcrumb-clickable"
+        @click="emit('navigate', (item as unknown) as BreadcrumbItem)"
+      >
+        <v-icon v-if="((item as unknown) as BreadcrumbItem).isRoot" size="small" class="mr-1">mdi-home</v-icon>
+        {{ ((item as unknown) as BreadcrumbItem).label }}
+      </v-breadcrumbs-item>
+    </template>
+  </v-breadcrumbs>
+</template>
+
+<style scoped>
+.breadcrumb-clickable {
+  cursor: pointer;
+}
+</style>

src/components/FilesDragOverlay.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  visible: boolean
+}>()
+</script>
+
+<template>
+  <div v-if="visible" class="files-drag-overlay">
+    <v-icon size="64" color="primary">mdi-cloud-upload</v-icon>
+    <div class="text-h6 mt-4">Drop files here to upload</div>
+  </div>
+</template>
+
+<style scoped>
+.files-drag-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(var(--v-theme-primary), 0.1);
+  border: 3px dashed rgb(var(--v-theme-primary));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>

src/components/FilesEmptyState.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  message?: string
+  submessage?: string
+}>()
+</script>
+
+<template>
+  <div class="files-empty">
+    <v-icon size="64" color="grey-lighten-1">mdi-folder-open-outline</v-icon>
+    <div class="text-h6 mt-4 text-grey">{{ message || 'This folder is empty' }}</div>
+    <div class="text-body-2 text-grey-darken-1">
+      {{ submessage || 'Drop files here or click "New Folder" to create one' }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.files-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+}
+</style>

src/components/FilesInfoPanel.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
+
+const props = defineProps<{
+  selectedItems: (FileCollectionObject | FileEntityObject)[]
+}>()
+
+const emit = defineEmits<{
+  'close': []
+}>()
+
+const hasSelection = computed(() => props.selectedItems.length > 0)
+const singleSelection = computed(() => props.selectedItems.length === 1)
+const selectedItem = computed(() => props.selectedItems[0] ?? null)
+
+const isCollection = computed(() => 
+  selectedItem.value?.['@type'] === 'files.collection'
+)
+
+const isEntity = computed(() => 
+  selectedItem.value?.['@type'] === 'files.entity'
+)
+
+const entity = computed(() => 
+  isEntity.value ? selectedItem.value as FileEntityObject : null
+)
+
+// Computed display values
+const itemIcon = computed(() => {
+  if (!selectedItem.value) return 'mdi-file'
+  if (isCollection.value) return 'mdi-folder'
+  return getFileIcon(entity.value!)
+})
+
+const itemIconColor = computed(() => {
+  if (isCollection.value) return 'amber-darken-2'
+  return 'grey'
+})
+
+const totalSize = computed(() => {
+  if (props.selectedItems.length === 0) return 0
+  return props.selectedItems.reduce((sum, item) => {
+    if (item['@type'] === 'files.entity') {
+      return sum + ((item as FileEntityObject).size || 0)
+    }
+    return sum
+  }, 0)
+})
+</script>
+
+<template>
+  <v-navigation-drawer
+    :model-value="hasSelection"
+    :key="selectedItems.map(i => i.id).join(',')"
+    location="right"
+    width="320"
+    temporary
+    class="files-info-panel"
+  >
+    <div class="pa-4">
+      <!-- Header -->
+      <div class="d-flex align-center mb-4">
+        <span class="text-h6">Info</span>
+        <v-spacer />
+        <v-btn
+          icon="mdi-close"
+          size="small"
+          variant="text"
+          @click="emit('close')"
+        />
+      </div>
+
+      <!-- Single item selected -->
+      <template v-if="singleSelection && selectedItem">
+        <!-- Icon and name -->
+        <div class="text-center mb-4">
+          <v-icon :color="itemIconColor" size="64">{{ itemIcon }}</v-icon>
+          <div class="text-h6 mt-2 text-truncate">{{ selectedItem.label }}</div>
+          <div class="text-caption text-grey">
+            {{ isCollection ? 'Folder' : entity?.mime || 'File' }}
+          </div>
+        </div>
+
+        <v-divider class="mb-4" />
+
+        <!-- Details list -->
+        <v-list density="compact" class="bg-transparent">
+          <!-- Type -->
+          <v-list-item>
+            <template #prepend>
+              <v-icon size="small" class="mr-3">mdi-tag-outline</v-icon>
+            </template>
+            <v-list-item-title class="text-caption text-grey">Type</v-list-item-title>
+            <v-list-item-subtitle>
+              {{ isCollection ? 'Folder' : (entity?.mime || 'Unknown') }}
+            </v-list-item-subtitle>
+          </v-list-item>
+
+          <!-- Size (only for files) -->
+          <v-list-item v-if="isEntity && entity">
+            <template #prepend>
+              <v-icon size="small" class="mr-3">mdi-harddisk</v-icon>
+            </template>
+            <v-list-item-title class="text-caption text-grey">Size</v-list-item-title>
+            <v-list-item-subtitle>{{ formatSize(entity.size) }}</v-list-item-subtitle>
+          </v-list-item>
+
+          <!-- Created -->
+          <v-list-item v-if="selectedItem.createdOn">
+            <template #prepend>
+              <v-icon size="small" class="mr-3">mdi-calendar-plus</v-icon>
+            </template>
+            <v-list-item-title class="text-caption text-grey">Created</v-list-item-title>
+            <v-list-item-subtitle>{{ formatDate(selectedItem.createdOn) }}</v-list-item-subtitle>
+          </v-list-item>
+
+          <!-- Modified -->
+          <v-list-item v-if="selectedItem.modifiedOn">
+            <template #prepend>
+              <v-icon size="small" class="mr-3">mdi-calendar-edit</v-icon>
+            </template>
+            <v-list-item-title class="text-caption text-grey">Modified</v-list-item-title>
+            <v-list-item-subtitle>{{ formatDate(selectedItem.modifiedOn) }}</v-list-item-subtitle>
+          </v-list-item>
+
+          <!-- ID -->
+          <v-list-item>
+            <template #prepend>
+              <v-icon size="small" class="mr-3">mdi-identifier</v-icon>
+            </template>
+            <v-list-item-title class="text-caption text-grey">ID</v-list-item-title>
+            <v-list-item-subtitle class="text-truncate" style="font-family: monospace; font-size: 11px;">
+              {{ selectedItem.id }}
+            </v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+      </template>
+
+      <!-- Multiple items selected -->
+      <template v-else-if="selectedItems.length > 1">
+        <div class="text-center mb-4">
+          <v-icon color="primary" size="64">mdi-checkbox-multiple-marked</v-icon>
+          <div class="text-h6 mt-2">{{ selectedItems.length }} items selected</div>
+        </div>
+
+        <v-divider class="mb-4" />
+
+        <v-list density="compact" class="bg-transparent">
+          <!-- Total size -->
+          <v-list-item>
+            <template #prepend>
+              <v-icon size="small" class="mr-3">mdi-harddisk</v-icon>
+            </template>
+            <v-list-item-title class="text-caption text-grey">Total Size</v-list-item-title>
+            <v-list-item-subtitle>{{ formatSize(totalSize) }}</v-list-item-subtitle>
+          </v-list-item>
+
+          <!-- Item breakdown -->
+          <v-list-item>
+            <template #prepend>
+              <v-icon size="small" class="mr-3">mdi-file-multiple</v-icon>
+            </template>
+            <v-list-item-title class="text-caption text-grey">Contents</v-list-item-title>
+            <v-list-item-subtitle>
+              {{ selectedItems.filter(i => i['@type'] === 'files.collection').length }} folders,
+              {{ selectedItems.filter(i => i['@type'] === 'files.entity').length }} files
+            </v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+      </template>
+    </div>
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+.files-info-panel {
+  border-left: 1px solid rgb(var(--v-border-color)) !important;
+}
+</style>

src/components/FilesSelectionToolbar.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  selectedCount: number
+}>()
+
+const emit = defineEmits<{
+  'rename': []
+  'copy': []
+  'cut': []
+  'delete': []
+  'clear': []
+}>()
+</script>
+
+<template>
+  <v-toolbar
+    density="compact"
+    color="primary"
+    class="mx-4 mb-2 rounded"
+  >
+    <v-toolbar-title class="text-body-2">
+      {{ selectedCount }} selected
+    </v-toolbar-title>
+    <v-spacer />
+    <v-btn icon="mdi-pencil" size="small" variant="text" @click="emit('rename')" />
+    <v-btn icon="mdi-content-copy" size="small" variant="text" disabled @click="emit('copy')" />
+    <v-btn icon="mdi-content-cut" size="small" variant="text" disabled @click="emit('cut')" />
+    <v-btn icon="mdi-delete" size="small" variant="text" @click="emit('delete')" />
+    <v-btn icon="mdi-close" size="small" variant="text" @click="emit('clear')" />
+  </v-toolbar>
+</template>

src/components/FilesSidebar.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()
+
+defineProps<{
+  modelValue: boolean
+  activeServiceId: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'navigate-home': []
+}>()
+</script>
+
+<template>
+  <v-navigation-drawer
+    :model-value="modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
+    :permanent="display.mdAndUp.value"
+    :temporary="display.smAndDown.value"
+    width="240"
+    class="files-sidebar"
+  >
+    <div class="pa-4">
+      <v-list density="compact" nav>
+        <v-list-subheader>Quick Access</v-list-subheader>
+        <v-list-item
+          prepend-icon="mdi-home"
+          title="Home"
+          @click="emit('navigate-home')"
+        />
+        <v-list-item
+          prepend-icon="mdi-clock-outline"
+          title="Recent"
+          disabled
+        />
+        <v-list-item
+          prepend-icon="mdi-star-outline"
+          title="Starred"
+          disabled
+        />
+        <v-list-item
+          prepend-icon="mdi-trash-can-outline"
+          title="Trash"
+          disabled
+        />
+      </v-list>
+
+      <v-divider class="my-4" />
+
+      <v-list density="compact" nav>
+        <v-list-subheader>Storage</v-list-subheader>
+        <v-list-item
+          prepend-icon="mdi-harddisk"
+          title="Personal"
+          subtitle="Local storage"
+          :active="activeServiceId === 'personal'"
+        />
+      </v-list>
+    </div>
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+.files-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color)) !important;
+  overflow-y: auto;
+}
+</style>

src/components/FilesToolbar.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ViewMode } from '@/types'
+
+const props = defineProps<{
+  searchQuery: string
+  viewMode: ViewMode
+  isLoading: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:searchQuery': [value: string]
+  'update:viewMode': [value: ViewMode]
+  'toggle-sidebar': []
+  'refresh': []
+  'open-file-picker': []
+  'open-folder-picker': []
+  'new-folder': []
+}>()
+
+const searchModel = computed({
+  get: () => props.searchQuery,
+  set: (value: string) => emit('update:searchQuery', value)
+})
+
+const viewModeModel = computed({
+  get: () => props.viewMode,
+  set: (value: ViewMode) => emit('update:viewMode', value)
+})
+</script>
+
+<template>
+  <v-app-bar elevation="0" class="files-toolbar border-b">
+    <template #prepend>
+      <v-btn
+        icon="mdi-menu"
+        variant="text"
+        @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-spacer />
+
+    <!-- Search -->
+    <v-text-field
+      v-model="searchModel"
+      density="compact"
+      variant="outlined"
+      placeholder="Search files..."
+      prepend-inner-icon="mdi-magnify"
+      hide-details
+      single-line
+      class="mx-4"
+      style="max-width: 300px;"
+    />
+
+    <!-- View toggle -->
+    <v-btn-toggle
+      v-model="viewModeModel"
+      color="primary"
+      variant="outlined"
+      density="compact"
+      mandatory
+      class="mr-2"
+    >
+      <v-btn value="grid" size="small">
+        <v-icon>mdi-view-grid</v-icon>
+      </v-btn>
+      <v-btn value="list" size="small">
+        <v-icon>mdi-view-list</v-icon>
+      </v-btn>
+      <v-btn value="details" size="small">
+        <v-icon>mdi-view-headline</v-icon>
+      </v-btn>
+    </v-btn-toggle>
+
+    <template #append>
+      <v-btn
+        icon="mdi-refresh"
+        variant="text"
+        @click="emit('refresh')"
+        :loading="isLoading"
+      />
+      <v-menu>
+        <template #activator="{ props: menuProps }">
+          <v-btn
+            color="secondary"
+            variant="tonal"
+            class="mr-2"
+            v-bind="menuProps"
+          >
+            <v-icon start>mdi-upload</v-icon>
+            <span class="d-none d-sm-inline">Upload</span>
+            <v-icon end size="small">mdi-chevron-down</v-icon>
+          </v-btn>
+        </template>
+        <v-list density="compact">
+          <v-list-item @click="emit('open-file-picker')">
+            <template #prepend>
+              <v-icon>mdi-file-upload</v-icon>
+            </template>
+            <v-list-item-title>Upload Files</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="emit('open-folder-picker')">
+            <template #prepend>
+              <v-icon>mdi-folder-upload</v-icon>
+            </template>
+            <v-list-item-title>Upload Folder</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-btn
+        color="primary"
+        variant="elevated"
+        @click="emit('new-folder')"
+      >
+        <v-icon start>mdi-folder-plus</v-icon>
+        <span class="d-none d-sm-inline">New Folder</span>
+      </v-btn>
+    </template>
+  </v-app-bar>
+</template>
+
+<style scoped>
+.files-toolbar {
+  border-bottom: 1px solid rgb(var(--v-border-color)) !important;
+}
+
+.border-b {
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+</style>

src/components/dialogs/DeleteConfirmDialog.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+  itemCount: number
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'confirm': []
+}>()
+
+function handleClose() {
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <v-dialog :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" max-width="400">
+    <v-card>
+      <v-card-title>Delete</v-card-title>
+      <v-card-text>
+        Are you sure you want to delete {{ itemCount }} item(s)?
+        This action cannot be undone.
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="handleClose">Cancel</v-btn>
+        <v-btn color="error" variant="elevated" @click="emit('confirm')">Delete</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

src/components/dialogs/NewFolderDialog.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'create': [name: string]
+}>()
+
+const folderName = ref('')
+
+watch(() => props.modelValue, (isOpen) => {
+  if (isOpen) {
+    folderName.value = ''
+  }
+})
+
+function handleCreate() {
+  if (!folderName.value.trim()) return
+  emit('create', folderName.value.trim())
+}
+
+function handleClose() {
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <v-dialog :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" max-width="400">
+    <v-card>
+      <v-card-title>New Folder</v-card-title>
+      <v-card-text>
+        <v-text-field
+          v-model="folderName"
+          label="Folder name"
+          autofocus
+          @keyup.enter="handleCreate"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="handleClose">Cancel</v-btn>
+        <v-btn color="primary" variant="elevated" @click="handleCreate">Create</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

src/components/dialogs/RenameDialog.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+  currentName: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'rename': [newName: string]
+}>()
+
+const newName = ref('')
+
+watch(() => props.modelValue, (isOpen) => {
+  if (isOpen) {
+    newName.value = props.currentName
+  }
+})
+
+function handleRename() {
+  if (!newName.value.trim()) return
+  emit('rename', newName.value.trim())
+}
+
+function handleClose() {
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <v-dialog :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" max-width="400">
+    <v-card>
+      <v-card-title>Rename</v-card-title>
+      <v-card-text>
+        <v-text-field
+          v-model="newName"
+          label="New name"
+          autofocus
+          @keyup.enter="handleRename"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="handleClose">Cancel</v-btn>
+        <v-btn color="primary" variant="elevated" @click="handleRename">Rename</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

src/components/dialogs/UploadDialog.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { FileUploadProgress } from '@/composables/useFileUpload'
+import { formatSize, getUploadStatusIcon, getUploadStatusColor } from '@/utils/fileHelpers'
+
+defineProps<{
+  modelValue: boolean
+  uploads: Map<string, FileUploadProgress>
+  totalProgress: number
+  isUploading: boolean
+  pendingCount: number
+  completedCount: number
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'upload-all': []
+  'remove-upload': [id: string]
+  'retry-upload': [id: string]
+  'add-files': []
+  'close': []
+}>()
+
+function handleClose() {
+  emit('close')
+}
+</script>
+
+<template>
+  <v-dialog :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" max-width="500" persistent>
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2">mdi-upload</v-icon>
+        Upload Files
+      </v-card-title>
+      <v-card-text>
+        <!-- Upload progress -->
+        <div v-if="totalProgress > 0 && isUploading" class="mb-4">
+          <v-progress-linear
+            :model-value="totalProgress"
+            color="primary"
+            height="8"
+            rounded
+          />
+          <div class="text-caption text-center mt-1">
+            {{ totalProgress }}% complete
+          </div>
+        </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"
+          >
+            <template #prepend>
+              <v-icon :color="getUploadStatusColor(item.status)" size="small">
+                {{ getUploadStatusIcon(item.status) }}
+              </v-icon>
+            </template>
+            <v-list-item-title class="text-body-2">
+              {{ item.relativePath || 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>
+            </v-list-item-subtitle>
+            <template #append>
+              <v-btn
+                v-if="item.status === 'pending' || item.status === 'error'"
+                icon="mdi-close"
+                size="x-small"
+                variant="text"
+                @click="emit('remove-upload', id)"
+              />
+              <v-btn
+                v-if="item.status === 'error'"
+                icon="mdi-refresh"
+                size="x-small"
+                variant="text"
+                color="primary"
+                @click="emit('retry-upload', id)"
+              />
+            </template>
+          </v-list-item>
+        </v-list>
+
+        <!-- Empty state -->
+        <div v-if="uploads.size === 0" 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
+            variant="tonal"
+            color="primary"
+            class="mt-4"
+            @click="emit('add-files')"
+          >
+            <v-icon start>mdi-plus</v-icon>
+            Add Files
+          </v-btn>
+        </div>
+
+        <!-- Add more files button -->
+        <div v-else class="text-center mt-4">
+          <v-btn
+            variant="text"
+            size="small"
+            @click="emit('add-files')"
+          >
+            <v-icon start>mdi-plus</v-icon>
+            Add More Files
+          </v-btn>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn 
+          variant="text" 
+          @click="handleClose"
+          :disabled="isUploading"
+        >
+          {{ completedCount > 0 ? 'Done' : 'Cancel' }}
+        </v-btn>
+        <v-btn
+          v-if="pendingCount > 0"
+          color="primary"
+          variant="elevated"
+          @click="emit('upload-all')"
+          :loading="isUploading"
+        >
+          Upload {{ pendingCount }} File(s)
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.upload-file-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+</style>

src/components/dialogs/index.ts

@@ -0,0 +1,4 @@
+export { default as NewFolderDialog } from './NewFolderDialog.vue'
+export { default as RenameDialog } from './RenameDialog.vue'
+export { default as DeleteConfirmDialog } from './DeleteConfirmDialog.vue'
+export { default as UploadDialog } from './UploadDialog.vue'

src/components/index.ts

@@ -0,0 +1,14 @@
+// Layout components
+export { default as FilesToolbar } from './FilesToolbar.vue'
+export { default as FilesSidebar } from './FilesSidebar.vue'
+export { default as FilesBreadcrumbs } from './FilesBreadcrumbs.vue'
+export { default as FilesEmptyState } from './FilesEmptyState.vue'
+export { default as FilesDragOverlay } from './FilesDragOverlay.vue'
+export { default as FilesInfoPanel } from './FilesInfoPanel.vue'
+export { default as FileActionsMenu } from './FileActionsMenu.vue'
+
+// View components
+export * from './views'
+
+// Dialog components
+export * from './dialogs'

src/components/views/FilesDetailsView.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
+import { FileActionsMenu } from '@/components'
+
+type ItemWithType = {
+  item: FileCollectionObject | FileEntityObject
+  type: 'collection' | 'entity'
+}
+
+const props = defineProps<{
+  collections: FileCollectionObject[]
+  entities: FileEntityObject[]
+  selectedIds: Set<string>
+}>()
+
+const emit = defineEmits<{
+  'item-click': [item: FileCollectionObject | FileEntityObject, event: MouseEvent | KeyboardEvent]
+  'rename': [item: FileCollectionObject | FileEntityObject]
+  'delete': [item: FileCollectionObject | FileEntityObject]
+  'download': [item: FileCollectionObject | FileEntityObject]
+  'show-details': [item: FileCollectionObject | FileEntityObject]
+}>()
+
+// Combine collections and entities into a single list for virtual scrolling
+const allItems = computed<ItemWithType[]>(() => [
+  ...props.collections.map(c => ({ item: c, type: 'collection' as const })),
+  ...props.entities.map(e => ({ item: e, type: 'entity' as const }))
+])
+
+function isCollection(wrapped: ItemWithType): wrapped is { item: FileCollectionObject; type: 'collection' } {
+  return wrapped.type === 'collection'
+}
+</script>
+
+<template>
+  <div class="files-details-view mx-4">
+    <!-- Header -->
+    <div class="files-details-header">
+      <div class="files-details-cell files-details-name">Name</div>
+      <div class="files-details-cell files-details-size">Size</div>
+      <div class="files-details-cell files-details-modified">Modified</div>
+      <div class="files-details-cell files-details-actions"></div>
+    </div>
+    
+    <!-- Virtual scrolling rows -->
+    <v-virtual-scroll
+      :items="allItems"
+      :item-height="48"
+      class="files-details-body"
+    >
+      <template #default="{ item: wrapped }">
+        <!-- Folder row -->
+        <div
+          v-if="isCollection(wrapped)"
+          class="files-details-row"
+          :class="{ 'files-details-row--selected': selectedIds.has(wrapped.item.id) }"
+          @click="emit('item-click', wrapped.item, $event)"
+        >
+          <div class="files-details-cell files-details-name">
+            <v-icon color="amber-darken-2" size="small" class="mr-2">mdi-folder</v-icon>
+            {{ wrapped.item.label }}
+          </div>
+          <div class="files-details-cell files-details-size">—</div>
+          <div class="files-details-cell files-details-modified">{{ formatDate(wrapped.item.modifiedOn) }}</div>
+          <div class="files-details-cell files-details-actions">
+            <FileActionsMenu
+              :item="wrapped.item"
+              @rename="emit('rename', $event)"
+              @delete="emit('delete', $event)"
+              @download="emit('download', $event)"
+              @show-details="emit('show-details', $event)"
+            />
+          </div>
+        </div>
+        
+        <!-- File row -->
+        <div
+          v-else
+          class="files-details-row"
+          :class="{ 'files-details-row--selected': selectedIds.has(wrapped.item.id) }"
+          @click="emit('item-click', wrapped.item, $event)"
+        >
+          <div class="files-details-cell files-details-name">
+            <v-icon color="grey" size="small" class="mr-2">{{ getFileIcon(wrapped.item as FileEntityObject) }}</v-icon>
+            {{ wrapped.item.label }}
+          </div>
+          <div class="files-details-cell files-details-size">{{ formatSize((wrapped.item as FileEntityObject).size) }}</div>
+          <div class="files-details-cell files-details-modified">{{ formatDate(wrapped.item.modifiedOn) }}</div>
+          <div class="files-details-cell files-details-actions">
+            <FileActionsMenu
+              :item="wrapped.item"
+              @rename="emit('rename', $event)"
+              @delete="emit('delete', $event)"
+              @download="emit('download', $event)"
+              @show-details="emit('show-details', $event)"
+            />
+          </div>
+        </div>
+      </template>
+    </v-virtual-scroll>
+  </div>
+</template>
+
+<style scoped>
+.files-details-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.files-details-header {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  font-weight: 500;
+  font-size: 13px;
+  color: rgb(var(--v-theme-on-surface-variant));
+  flex-shrink: 0;
+}
+
+.files-details-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.files-details-row {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  cursor: pointer;
+  border-bottom: 1px solid rgb(var(--v-border-color), 0.5);
+}
+
+.files-details-row:hover {
+  background-color: rgb(var(--v-theme-surface-variant), 0.3);
+}
+
+.files-details-row--selected {
+  background-color: rgb(var(--v-theme-primary), 0.08);
+}
+
+.files-details-row--selected:hover {
+  background-color: rgb(var(--v-theme-primary), 0.12);
+}
+
+.files-details-cell {
+  padding: 0 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.files-details-name {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.files-details-size {
+  width: 100px;
+  text-align: right;
+}
+
+.files-details-modified {
+  width: 160px;
+}
+
+.files-details-actions {
+  width: 48px;
+  text-align: center;
+}
+</style>

src/components/views/FilesGridView.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+import { getFileIcon, formatSize } from '@/utils/fileHelpers'
+import { FileActionsMenu } from '@/components'
+
+defineProps<{
+  collections: FileCollectionObject[]
+  entities: FileEntityObject[]
+  selectedIds: Set<string>
+}>()
+
+const emit = defineEmits<{
+  'item-click': [item: FileCollectionObject | FileEntityObject, event: MouseEvent | KeyboardEvent]
+  'rename': [item: FileCollectionObject | FileEntityObject]
+  'delete': [item: FileCollectionObject | FileEntityObject]
+  'download': [item: FileCollectionObject | FileEntityObject]
+  'show-details': [item: FileCollectionObject | FileEntityObject]
+}>()
+</script>
+
+<template>
+  <div class="files-grid pa-4">
+    <!-- Folders -->
+    <div
+      v-for="folder in collections"
+      :key="folder.id"
+      class="files-grid-item"
+      :class="{ selected: selectedIds.has(folder.id) }"
+      @click="emit('item-click', folder, $event)"
+    >
+      <div class="files-grid-item-actions">
+        <FileActionsMenu
+          :item="folder"
+          size="x-small"
+          button-class="action-btn"
+          @rename="emit('rename', $event)"
+          @delete="emit('delete', $event)"
+          @download="emit('download', $event)"
+          @show-details="emit('show-details', $event)"
+        />
+      </div>
+      <v-icon size="48" color="amber-darken-2">mdi-folder</v-icon>
+      <div class="files-grid-label">{{ folder.label }}</div>
+    </div>
+    
+    <!-- Files -->
+    <div
+      v-for="entity in entities"
+      :key="entity.id"
+      class="files-grid-item"
+      :class="{ selected: selectedIds.has(entity.id) }"
+      @click="emit('item-click', entity, $event)"
+    >
+      <div class="files-grid-item-actions">
+        <FileActionsMenu
+          :item="entity"
+          size="x-small"
+          button-class="action-btn"
+          @rename="emit('rename', $event)"
+          @delete="emit('delete', $event)"
+          @download="emit('download', $event)"
+          @show-details="emit('show-details', $event)"
+        />
+      </div>
+      <v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
+      <div class="files-grid-label">{{ entity.label }}</div>
+      <div class="files-grid-size">{{ formatSize(entity.size) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.files-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 16px;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 500px;
+}
+
+.files-grid-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  content-visibility: auto;
+  contain-intrinsic-size: 120px 120px;
+}
+
+.files-grid-item:hover {
+  background-color: rgb(var(--v-theme-surface-variant), 0.5);
+}
+
+.files-grid-item.selected {
+  background-color: rgb(var(--v-theme-primary), 0.12);
+}
+
+.files-grid-item-actions {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.files-grid-item:hover .files-grid-item-actions,
+.files-grid-item.selected .files-grid-item-actions {
+  opacity: 1;
+}
+
+.action-btn {
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.files-grid-label {
+  margin-top: 8px;
+  font-size: 13px;
+  text-align: center;
+  word-break: break-word;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.files-grid-size {
+  font-size: 11px;
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin-top: 2px;
+}
+
+@media (max-width: 600px) {
+  .files-grid {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 8px;
+  }
+}
+</style>

src/components/views/FilesListView.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+import { getFileIcon, formatSize } from '@/utils/fileHelpers'
+import { FileActionsMenu } from '@/components'
+
+type ItemWithType = {
+  item: FileCollectionObject | FileEntityObject
+  type: 'collection' | 'entity'
+}
+
+const props = defineProps<{
+  collections: FileCollectionObject[]
+  entities: FileEntityObject[]
+  selectedIds: Set<string>
+}>()
+
+const emit = defineEmits<{
+  'item-click': [item: FileCollectionObject | FileEntityObject, event: MouseEvent | KeyboardEvent]
+  'rename': [item: FileCollectionObject | FileEntityObject]
+  'delete': [item: FileCollectionObject | FileEntityObject]
+  'download': [item: FileCollectionObject | FileEntityObject]
+  'show-details': [item: FileCollectionObject | FileEntityObject]
+}>()
+
+// Combine collections and entities into a single list for virtual scrolling
+const allItems = computed<ItemWithType[]>(() => [
+  ...props.collections.map(c => ({ item: c, type: 'collection' as const })),
+  ...props.entities.map(e => ({ item: e, type: 'entity' as const }))
+])
+
+function isCollection(wrapped: ItemWithType): wrapped is { item: FileCollectionObject; type: 'collection' } {
+  return wrapped.type === 'collection'
+}
+</script>
+
+<template>
+  <v-virtual-scroll
+    :items="allItems"
+    :item-height="56"
+    class="files-list-virtual pa-2"
+  >
+    <template #default="{ item: wrapped }">
+      <!-- Folder -->
+      <v-list-item
+        v-if="isCollection(wrapped)"
+        :active="selectedIds.has(wrapped.item.id)"
+        @click="($event: MouseEvent | KeyboardEvent) => emit('item-click', wrapped.item, $event)"
+      >
+        <template #prepend>
+          <v-icon color="amber-darken-2">mdi-folder</v-icon>
+        </template>
+        <v-list-item-title>{{ wrapped.item.label }}</v-list-item-title>
+        <template #append>
+          <FileActionsMenu
+            :item="wrapped.item"
+            @rename="emit('rename', $event)"
+            @delete="emit('delete', $event)"
+            @download="emit('download', $event)"
+            @show-details="emit('show-details', $event)"
+          />
+        </template>
+      </v-list-item>
+      
+      <!-- File -->
+      <v-list-item
+        v-else
+        :active="selectedIds.has(wrapped.item.id)"
+        @click="($event: MouseEvent | KeyboardEvent) => emit('item-click', wrapped.item, $event)"
+      >
+        <template #prepend>
+          <v-icon color="grey">{{ getFileIcon(wrapped.item as FileEntityObject) }}</v-icon>
+        </template>
+        <v-list-item-title>{{ wrapped.item.label }}</v-list-item-title>
+        <v-list-item-subtitle>{{ formatSize((wrapped.item as FileEntityObject).size) }}</v-list-item-subtitle>
+        <template #append>
+          <FileActionsMenu
+            :item="wrapped.item"
+            @rename="emit('rename', $event)"
+            @delete="emit('delete', $event)"
+            @download="emit('download', $event)"
+            @show-details="emit('show-details', $event)"
+          />
+        </template>
+      </v-list-item>
+    </template>
+  </v-virtual-scroll>
+</template>
+
+<style scoped>
+.files-list-virtual {
+  height: 100%;
+}
+</style>

src/components/views/index.ts

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

src/composables/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Central export point for all Files module composables
+ */
+
+export { useFileManager } from './useFileManager'
+export { useFileSelection } from './useFileSelection'
+export { useFileUpload } from './useFileUpload'
+
+export type { UseFileManagerOptions } from './useFileManager'
+export type { UseFileSelectionOptions } from './useFileSelection'
+export type { UseFileUploadOptions, FileUploadProgress } from './useFileUpload'

src/composables/useFileManager.ts

@@ -0,0 +1,303 @@
+/**
+ * File Manager composable for convenient file/folder operations
+ * Provides reactive access to file manager state and actions
+ */
+
+import { computed, ref } from 'vue'
+import type { Ref, ComputedRef } from 'vue'
+import { useProvidersStore } from '@FileManager/stores/providersStore'
+import { useServicesStore } from '@FileManager/stores/servicesStore'
+import { useNodesStore, ROOT_ID } from '@FileManager/stores/nodesStore'
+import type { FilterCondition, SortCondition, RangeCondition } from '@FileManager/types/common'
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+
+// Base URL for file manager transfer endpoints
+const TRANSFER_BASE_URL = '/m/file_manager'
+
+export interface UseFileManagerOptions {
+  providerId: string
+  serviceId: string
+  autoFetch?: boolean
+}
+
+export function useFileManager(options: UseFileManagerOptions) {
+  const providersStore = useProvidersStore()
+  const servicesStore = useServicesStore()
+  const nodesStore = useNodesStore()
+
+  const { providerId, serviceId, autoFetch = false } = options
+
+  // Current location (folder being viewed)
+  const currentLocation: Ref<string> = ref(ROOT_ID)
+  
+  // Loading/error state
+  const isLoading = computed(() => nodesStore.loading)
+  const error = computed(() => nodesStore.error)
+
+  // Provider and service
+  const provider = computed(() => providersStore.getProvider(providerId))
+  const service = computed(() => servicesStore.getService(providerId, serviceId))
+  const rootId = computed(() => servicesStore.getRootId(providerId, serviceId) || ROOT_ID)
+
+  // Current children
+  const currentChildren = computed(() => 
+    nodesStore.getChildren(providerId, serviceId, currentLocation.value)
+  )
+
+  const currentCollections: ComputedRef<FileCollectionObject[]> = computed(() =>
+    nodesStore.getChildCollections(providerId, serviceId, currentLocation.value)
+  )
+
+  const currentEntities: ComputedRef<FileEntityObject[]> = computed(() =>
+    nodesStore.getChildEntities(providerId, serviceId, currentLocation.value)
+  )
+
+  // Breadcrumb path
+  const breadcrumbs = computed(() => {
+    if (currentLocation.value === ROOT_ID) {
+      return []
+    }
+    return nodesStore.getPath(providerId, serviceId, currentLocation.value)
+  })
+
+  // Is at root?
+  const isAtRoot = computed(() => currentLocation.value === ROOT_ID)
+
+  // Navigate to a folder
+  const navigateTo = async (collectionId: string | null) => {
+    currentLocation.value = collectionId || ROOT_ID
+    await refresh()
+  }
+
+  // Navigate up one level
+  const navigateUp = async () => {
+    if (currentLocation.value === ROOT_ID) {
+      return
+    }
+    const currentNode = nodesStore.getNode(providerId, serviceId, currentLocation.value)
+    if (currentNode) {
+      await navigateTo(currentNode.in || ROOT_ID)
+    }
+  }
+
+  // Navigate to root
+  const navigateToRoot = async () => {
+    await navigateTo(ROOT_ID)
+  }
+
+  // Refresh current location
+  const refresh = async (
+    filter?: FilterCondition[] | null,
+    sort?: SortCondition[] | null,
+    range?: RangeCondition | null
+  ) => {
+    await nodesStore.fetchNodes(
+      providerId,
+      serviceId,
+      currentLocation.value === ROOT_ID ? null : currentLocation.value,
+      false,
+      filter,
+      sort,
+      range
+    )
+  }
+
+  // Create a new folder
+  const createFolder = async (label: string): Promise<FileCollectionObject> => {
+    return await nodesStore.createCollection(
+      providerId,
+      serviceId,
+      currentLocation.value === ROOT_ID ? ROOT_ID : currentLocation.value,
+      { label }
+    )
+  }
+
+  // Create a new file
+  const createFile = async (
+    label: string,
+    mime: string = 'application/octet-stream'
+  ): Promise<FileEntityObject> => {
+    return await nodesStore.createEntity(
+      providerId,
+      serviceId,
+      currentLocation.value === ROOT_ID ? ROOT_ID : currentLocation.value,
+      { label, mime }
+    )
+  }
+
+  // Rename a node
+  const renameNode = async (nodeId: string, newLabel: string) => {
+    const node = nodesStore.getNode(providerId, serviceId, nodeId)
+    if (!node) {
+      throw new Error('Node not found')
+    }
+
+    if (node['@type'] === 'files.collection') {
+      return await nodesStore.modifyCollection(providerId, serviceId, nodeId, { label: newLabel })
+    } else {
+      return await nodesStore.modifyEntity(providerId, serviceId, node.in, nodeId, { label: newLabel })
+    }
+  }
+
+  // Delete a node
+  const deleteNode = async (nodeId: string): Promise<boolean> => {
+    const node = nodesStore.getNode(providerId, serviceId, nodeId)
+    if (!node) {
+      throw new Error('Node not found')
+    }
+
+    if (node['@type'] === 'files.collection') {
+      return await nodesStore.destroyCollection(providerId, serviceId, nodeId)
+    } else {
+      return await nodesStore.destroyEntity(providerId, serviceId, node.in, nodeId)
+    }
+  }
+
+  // Copy a node
+  const copyNode = async (nodeId: string, destinationId?: string | null) => {
+    const node = nodesStore.getNode(providerId, serviceId, nodeId)
+    if (!node) {
+      throw new Error('Node not found')
+    }
+
+    const destination = destinationId ?? currentLocation.value
+
+    if (node['@type'] === 'files.collection') {
+      return await nodesStore.copyCollection(providerId, serviceId, nodeId, destination)
+    } else {
+      return await nodesStore.copyEntity(providerId, serviceId, node.in, nodeId, destination)
+    }
+  }
+
+  // Move a node
+  const moveNode = async (nodeId: string, destinationId?: string | null) => {
+    const node = nodesStore.getNode(providerId, serviceId, nodeId)
+    if (!node) {
+      throw new Error('Node not found')
+    }
+
+    const destination = destinationId ?? currentLocation.value
+
+    if (node['@type'] === 'files.collection') {
+      return await nodesStore.moveCollection(providerId, serviceId, nodeId, destination)
+    } else {
+      return await nodesStore.moveEntity(providerId, serviceId, node.in, nodeId, destination)
+    }
+  }
+
+  // Read file content
+  const readFile = async (entityId: string): Promise<string | null> => {
+    const node = nodesStore.getNode(providerId, serviceId, entityId)
+    if (!node || node['@type'] !== 'files.entity') {
+      throw new Error('Entity not found')
+    }
+    return await nodesStore.readEntity(providerId, serviceId, node.in || ROOT_ID, entityId)
+  }
+
+  // Write file content
+  const writeFile = async (entityId: string, content: string): Promise<number> => {
+    const node = nodesStore.getNode(providerId, serviceId, entityId)
+    if (!node || node['@type'] !== 'files.entity') {
+      throw new Error('Entity not found')
+    }
+    return await nodesStore.writeEntity(providerId, serviceId, node.in, entityId, content)
+  }
+
+  // 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)}`
+    
+    // Trigger download by opening URL (browser handles it)
+    window.open(url, '_blank')
+  }
+
+  // Download a collection (folder) as ZIP
+  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)}`
+    
+    window.open(url, '_blank')
+  }
+
+  // Download multiple items as ZIP archive
+  const downloadArchive = (ids: string[], name: string = 'download', collectionId?: string | null): void => {
+    const collection = collectionId ?? currentLocation.value
+    const params = new URLSearchParams({
+      provider: providerId,
+      service: serviceId,
+    })
+    ids.forEach(id => params.append('ids[]', id))
+    if (name) {
+      params.append('name', name)
+    }
+    if (collection && collection !== ROOT_ID) {
+      params.append('collection', collection)
+    }
+    
+    const url = `${TRANSFER_BASE_URL}/download/archive?${params.toString()}`
+    
+    window.open(url, '_blank')
+  }
+
+  // Initialize - fetch providers, services, and initial nodes if autoFetch
+  const initialize = async () => {
+    if (!providersStore.initialized) {
+      await providersStore.fetchProviders()
+    }
+    if (!servicesStore.initialized) {
+      await servicesStore.fetchServices()
+    }
+    if (autoFetch) {
+      await refresh()
+    }
+  }
+
+  return {
+    // State
+    currentLocation,
+    isLoading,
+    error,
+    
+    // Provider/Service
+    provider,
+    service,
+    rootId,
+    
+    // Current view
+    currentChildren,
+    currentCollections,
+    currentEntities,
+    breadcrumbs,
+    isAtRoot,
+    
+    // Navigation
+    navigateTo,
+    navigateUp,
+    navigateToRoot,
+    refresh,
+    
+    // Operations
+    createFolder,
+    createFile,
+    renameNode,
+    deleteNode,
+    copyNode,
+    moveNode,
+    readFile,
+    writeFile,
+    downloadEntity,
+    downloadCollection,
+    downloadArchive,
+    
+    // Initialize
+    initialize,
+
+    // Constants
+    ROOT_ID,
+  }
+}
+
+export default useFileManager

src/composables/useFileSelection.ts

@@ -0,0 +1,173 @@
+/**
+ * File selection composable
+ * Provides reactive selection management for file manager
+ */
+
+import { ref, computed } from 'vue'
+import type { Ref, ComputedRef } from 'vue'
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+
+type NodeRecord = FileCollectionObject | FileEntityObject
+
+export interface UseFileSelectionOptions {
+  multiple?: boolean
+  allowFolders?: boolean
+  allowFiles?: boolean
+}
+
+export function useFileSelection(options: UseFileSelectionOptions = {}) {
+  const { 
+    multiple = true, 
+    allowFolders = true, 
+    allowFiles = true 
+  } = options
+
+  const selectedIds: Ref<Set<string>> = ref(new Set())
+  const selectedNodes: Ref<Map<string, NodeRecord>> = ref(new Map())
+
+  // Get selected count
+  const count: ComputedRef<number> = computed(() => selectedIds.value.size)
+
+  // Check if any selected
+  const hasSelection: ComputedRef<boolean> = computed(() => selectedIds.value.size > 0)
+
+  // Get selected IDs as array
+  const selectedIdArray: ComputedRef<string[]> = computed(() => 
+    Array.from(selectedIds.value)
+  )
+
+  // Get selected nodes as array
+  const selectedNodeArray: ComputedRef<NodeRecord[]> = computed(() => 
+    Array.from(selectedNodes.value.values())
+  )
+
+  // Get selected collections only
+  const selectedCollections: ComputedRef<FileCollectionObject[]> = computed(() =>
+    selectedNodeArray.value.filter(
+      (node): node is FileCollectionObject => node['@type'] === 'files.collection'
+    )
+  )
+
+  // Get selected entities only
+  const selectedEntities: ComputedRef<FileEntityObject[]> = computed(() =>
+    selectedNodeArray.value.filter(
+      (node): node is FileEntityObject => node['@type'] === 'files.entity'
+    )
+  )
+
+  // Check if a node is selected
+  const isSelected = (nodeId: string): boolean => {
+    return selectedIds.value.has(nodeId)
+  }
+
+  // Check if node type is allowed
+  const isTypeAllowed = (node: NodeRecord): boolean => {
+    if (node['@type'] === 'files.collection' && !allowFolders) {
+      return false
+    }
+    if (node['@type'] === 'files.entity' && !allowFiles) {
+      return false
+    }
+    return true
+  }
+
+  // Select a node
+  const select = (node: NodeRecord) => {
+    if (!isTypeAllowed(node)) {
+      return
+    }
+
+    if (!multiple) {
+      // Clear previous selection for single select
+      selectedIds.value.clear()
+      selectedNodes.value.clear()
+    }
+
+    selectedIds.value.add(node.id)
+    selectedNodes.value.set(node.id, node)
+  }
+
+  // Deselect a node
+  const deselect = (nodeId: string) => {
+    selectedIds.value.delete(nodeId)
+    selectedNodes.value.delete(nodeId)
+  }
+
+  // Toggle selection
+  const toggle = (node: NodeRecord) => {
+    if (isSelected(node.id)) {
+      deselect(node.id)
+    } else {
+      select(node)
+    }
+  }
+
+  // Select multiple nodes
+  const selectMultiple = (nodes: NodeRecord[]) => {
+    if (!multiple) {
+      // For single select, only select the last one
+      const lastNode = nodes[nodes.length - 1]
+      if (lastNode && isTypeAllowed(lastNode)) {
+        selectedIds.value.clear()
+        selectedNodes.value.clear()
+        selectedIds.value.add(lastNode.id)
+        selectedNodes.value.set(lastNode.id, lastNode)
+      }
+      return
+    }
+
+    for (const node of nodes) {
+      if (isTypeAllowed(node)) {
+        selectedIds.value.add(node.id)
+        selectedNodes.value.set(node.id, node)
+      }
+    }
+  }
+
+  // Select all from a list
+  const selectAll = (nodes: NodeRecord[]) => {
+    if (!multiple) {
+      return
+    }
+    selectMultiple(nodes)
+  }
+
+  // Clear selection
+  const clear = () => {
+    selectedIds.value.clear()
+    selectedNodes.value.clear()
+  }
+
+  // Set selection (replace current)
+  const setSelection = (nodes: NodeRecord[]) => {
+    clear()
+    selectMultiple(nodes)
+  }
+
+  return {
+    // State
+    selectedIds,
+    selectedNodes,
+    
+    // Computed
+    count,
+    hasSelection,
+    selectedIdArray,
+    selectedNodeArray,
+    selectedCollections,
+    selectedEntities,
+    
+    // Methods
+    isSelected,
+    select,
+    deselect,
+    toggle,
+    selectMultiple,
+    selectAll,
+    clear,
+    setSelection,
+  }
+}
+
+export default useFileSelection

src/composables/useFileUpload.ts

@@ -0,0 +1,425 @@
+/**
+ * File upload composable
+ * Handles file upload operations for file manager
+ * Supports individual files and entire folder uploads with path preservation
+ */
+
+import { ref, computed } from 'vue'
+import type { Ref, ComputedRef } from 'vue'
+import { useNodesStore, ROOT_ID } from '@FileManager/stores/nodesStore'
+import { FileEntityObject } from '@FileManager/models/entity'
+
+export interface FileUploadProgress {
+  file: File
+  progress: number
+  status: 'pending' | 'uploading' | 'completed' | 'error'
+  error?: string
+  entity?: FileEntityObject
+  /** Relative path within folder upload (e.g., "folder/subfolder/file.txt") */
+  relativePath?: string
+}
+
+export interface FileWithPath {
+  file: File
+  relativePath: string
+}
+
+export interface UseFileUploadOptions {
+  providerId: string
+  serviceId: string
+  collectionId?: string | null
+  maxFileSize?: number
+  allowedTypes?: string[]
+}
+
+export function useFileUpload(options: UseFileUploadOptions) {
+  const nodesStore = useNodesStore()
+  
+  const { 
+    providerId, 
+    serviceId, 
+    collectionId = ROOT_ID,
+    maxFileSize,
+    allowedTypes 
+  } = options
+
+  const uploads: Ref<Map<string, FileUploadProgress>> = ref(new Map())
+  const isUploading = ref(false)
+
+  // Get current collection ID (reactive)
+  const currentCollection: Ref<string | null> = ref(collectionId)
+
+  // Total upload progress
+  const totalProgress: ComputedRef<number> = computed(() => {
+    const items = Array.from(uploads.value.values())
+    if (items.length === 0) return 0
+    const total = items.reduce((sum, item) => sum + item.progress, 0)
+    return Math.round(total / items.length)
+  })
+
+  // Pending uploads
+  const pendingUploads: ComputedRef<FileUploadProgress[]> = computed(() =>
+    Array.from(uploads.value.values()).filter(u => u.status === 'pending')
+  )
+
+  // Active uploads
+  const activeUploads: ComputedRef<FileUploadProgress[]> = computed(() =>
+    Array.from(uploads.value.values()).filter(u => u.status === 'uploading')
+  )
+
+  // Completed uploads
+  const completedUploads: ComputedRef<FileUploadProgress[]> = computed(() =>
+    Array.from(uploads.value.values()).filter(u => u.status === 'completed')
+  )
+
+  // Failed uploads
+  const failedUploads: ComputedRef<FileUploadProgress[]> = computed(() =>
+    Array.from(uploads.value.values()).filter(u => u.status === 'error')
+  )
+
+  // Validate a file
+  const validateFile = (file: File): string | null => {
+    if (maxFileSize && file.size > maxFileSize) {
+      return `File size exceeds maximum allowed (${formatSize(maxFileSize)})`
+    }
+    if (allowedTypes && allowedTypes.length > 0) {
+      const isAllowed = allowedTypes.some(type => {
+        if (type.endsWith('/*')) {
+          // Wildcard match (e.g., "image/*")
+          return file.type.startsWith(type.slice(0, -1))
+        }
+        return file.type === type
+      })
+      if (!isAllowed) {
+        return `File type ${file.type} is not allowed`
+      }
+    }
+    return null
+  }
+
+  // Format file size
+  const formatSize = (bytes: number): string => {
+    if (bytes === 0) return '0 B'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  }
+
+  // Generate unique upload ID
+  const generateUploadId = (file: File, relativePath?: string): string => {
+    const pathPart = relativePath || file.name
+    return `${pathPart}-${file.size}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+  }
+
+  // Add files to upload queue
+  const addFiles = (files: FileList | File[]): FileUploadProgress[] => {
+    const added: FileUploadProgress[] = []
+    
+    for (const file of files) {
+      const error = validateFile(file)
+      const uploadId = generateUploadId(file)
+      
+      const progress: FileUploadProgress = {
+        file,
+        progress: 0,
+        status: error ? 'error' : 'pending',
+        error: error || undefined
+      }
+      
+      uploads.value.set(uploadId, progress)
+      added.push(progress)
+    }
+    
+    return added
+  }
+
+  // Add files with relative paths (for folder uploads)
+  const addFilesWithPaths = (
+    filesOrList: FileList | File[] | FileWithPath[]
+  ): 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 uploadId = generateUploadId(file, relativePath)
+        
+        const progress: FileUploadProgress = {
+          file,
+          progress: 0,
+          status: error ? 'error' : 'pending',
+          error: error || undefined,
+          relativePath
+        }
+        
+        uploads.value.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)
+        const uploadId = generateUploadId(file, relativePath)
+        
+        const progress: FileUploadProgress = {
+          file,
+          progress: 0,
+          status: error ? 'error' : 'pending',
+          error: error || undefined,
+          relativePath
+        }
+        
+        uploads.value.set(uploadId, progress)
+        added.push(progress)
+      }
+    }
+    
+    return added
+  }
+
+  // Extract unique folder paths from pending uploads
+  const extractFolderPaths = (): string[] => {
+    const folders = new Set<string>()
+    
+    for (const upload of uploads.value.values()) {
+      if (upload.relativePath && upload.status === 'pending') {
+        // Get all parent directories
+        const parts = upload.relativePath.split('/')
+        parts.pop() // Remove filename
+        
+        let currentPath = ''
+        for (const part of parts) {
+          currentPath = currentPath ? `${currentPath}/${part}` : part
+          folders.add(currentPath)
+        }
+      }
+    }
+    
+    // Sort by depth (shortest paths first) to ensure parent folders are created first
+    return Array.from(folders).sort((a, b) => {
+      const depthA = a.split('/').length
+      const depthB = b.split('/').length
+      return depthA - depthB
+    })
+  }
+
+  // Create folder structure for uploads
+  const createFolderStructure = async (): Promise<Map<string, string>> => {
+    const folderPaths = extractFolderPaths()
+    const folderIdMap = new Map<string, string>() // path -> collection ID
+    
+    for (const folderPath of folderPaths) {
+      const parts = folderPath.split('/')
+      const folderName = parts[parts.length - 1]
+      const parentPath = parts.slice(0, -1).join('/')
+      
+      // Determine parent collection ID
+      const parentId = parentPath 
+        ? (folderIdMap.get(parentPath) ?? currentCollection.value) 
+        : currentCollection.value
+      
+      try {
+        // Create the folder
+        const collection = await nodesStore.createCollection(
+          providerId,
+          serviceId,
+          parentId,
+          { label: folderName }
+        )
+        folderIdMap.set(folderPath, collection.id)
+      } catch (e) {
+        console.error(`Failed to create folder: ${folderPath}`, e)
+        // Try to continue with other folders
+      }
+    }
+    
+    return folderIdMap
+  }
+
+  // Upload a single file
+  const uploadFile = async (
+    uploadId: string,
+    folderIdMap?: Map<string, string>
+  ): Promise<FileEntityObject | null> => {
+    const upload = uploads.value.get(uploadId)
+    if (!upload || upload.status !== 'pending') {
+      return null
+    }
+
+    upload.status = 'uploading'
+    upload.progress = 0
+
+    try {
+      // Determine target collection based on relative path
+      let targetCollection = currentCollection.value
+      
+      if (upload.relativePath && folderIdMap) {
+        const parts = upload.relativePath.split('/')
+        parts.pop() // Remove filename
+        const parentPath = parts.join('/')
+        
+        if (parentPath && folderIdMap.has(parentPath)) {
+          targetCollection = folderIdMap.get(parentPath)!
+        }
+      }
+      
+      // Convert file to base64
+      const content = await fileToBase64(upload.file)
+      
+      upload.progress = 50
+
+      // Create the entity
+      const entity = await nodesStore.createEntity(
+        providerId,
+        serviceId,
+        targetCollection,
+        {
+          label: upload.file.name,
+          mime: upload.file.type || 'application/octet-stream',
+          size: upload.file.size,
+        }
+      )
+
+      upload.progress = 75
+
+      // Write the content
+      await nodesStore.writeEntity(
+        providerId,
+        serviceId,
+        targetCollection,
+        entity.id,
+        content
+      )
+
+      upload.progress = 100
+      upload.status = 'completed'
+      upload.entity = entity
+
+      return entity
+    } catch (e) {
+      upload.status = 'error'
+      upload.error = e instanceof Error ? e.message : 'Upload failed'
+      return null
+    }
+  }
+
+  // Convert file to base64
+  const fileToBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => {
+        const result = reader.result as string
+        // Remove data URL prefix (e.g., "data:image/png;base64,")
+        const base64 = result.split(',')[1] || result
+        resolve(base64)
+      }
+      reader.onerror = reject
+      reader.readAsDataURL(file)
+    })
+  }
+
+  // Upload all pending files
+  const uploadAll = async (): Promise<FileEntityObject[]> => {
+    isUploading.value = true
+    const entities: FileEntityObject[] = []
+
+    try {
+      // Check if any uploads have relative paths (folder upload)
+      const hasFolderUploads = Array.from(uploads.value.values()).some(
+        u => u.relativePath && u.relativePath.includes('/') && u.status === 'pending'
+      )
+      
+      // Create folder structure first if needed
+      let folderIdMap: Map<string, string> | undefined
+      if (hasFolderUploads) {
+        folderIdMap = await createFolderStructure()
+      }
+      
+      // Upload all files
+      for (const [uploadId, upload] of uploads.value) {
+        if (upload.status === 'pending') {
+          const entity = await uploadFile(uploadId, folderIdMap)
+          if (entity) {
+            entities.push(entity)
+          }
+        }
+      }
+    } finally {
+      isUploading.value = false
+    }
+
+    return entities
+  }
+
+  // Remove an upload from the queue
+  const removeUpload = (uploadId: string) => {
+    uploads.value.delete(uploadId)
+  }
+
+  // Clear completed uploads
+  const clearCompleted = () => {
+    for (const [id, upload] of uploads.value) {
+      if (upload.status === 'completed') {
+        uploads.value.delete(id)
+      }
+    }
+  }
+
+  // Clear all uploads
+  const clearAll = () => {
+    uploads.value.clear()
+  }
+
+  // Retry a failed upload
+  const retryUpload = async (uploadId: string): Promise<FileEntityObject | null> => {
+    const upload = uploads.value.get(uploadId)
+    if (!upload || upload.status !== 'error') {
+      return null
+    }
+    
+    upload.status = 'pending'
+    upload.error = undefined
+    upload.progress = 0
+    
+    return await uploadFile(uploadId)
+  }
+
+  // Set current collection
+  const setCollection = (collectionId: string | null) => {
+    currentCollection.value = collectionId
+  }
+
+  return {
+    // State
+    uploads,
+    isUploading,
+    currentCollection,
+    
+    // Computed
+    totalProgress,
+    pendingUploads,
+    activeUploads,
+    completedUploads,
+    failedUploads,
+    
+    // Methods
+    validateFile,
+    addFiles,
+    addFilesWithPaths,
+    uploadFile,
+    uploadAll,
+    removeUpload,
+    clearCompleted,
+    clearAll,
+    retryUpload,
+    setCollection,
+  }
+}
+
+export default useFileUpload

src/integrations.ts

@@ -0,0 +1,15 @@
+import type { ModuleIntegrations } from "@KTXC/types/moduleTypes";
+
+const integrations: ModuleIntegrations = {
+  app_menu: [
+    {
+      id: 'files',
+      label: 'Files',
+      path: '/files',
+      icon: 'mdi-folder-outline',
+      priority: 30,
+    },
+  ],
+};
+
+export default integrations;

src/main.ts

@@ -0,0 +1,8 @@
+import routes from '@/routes'
+import integrations from '@/integrations'
+
+// CSS filename is injected by the vite plugin at build time
+// The placeholder gets replaced with the actual hashed filename
+export const css = ['__CSS_FILENAME_PLACEHOLDER__']
+
+export { routes, integrations }

src/pages/FilesPage.vue

@@ -0,0 +1,562 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useModuleStore } from '@KTXC/stores/moduleStore'
+import { useFileManager, useFileSelection, useFileUpload } from '@/composables'
+import type { ViewMode, SortField, SortOrder, BreadcrumbItem } from '@/types'
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+
+// Components
+import {
+  FilesToolbar,
+  FilesSidebar,
+  FilesBreadcrumbs,
+  FilesEmptyState,
+  FilesDragOverlay,
+  FilesInfoPanel,
+  FilesGridView,
+  FilesListView,
+  FilesDetailsView,
+  NewFolderDialog,
+  RenameDialog,
+  DeleteConfirmDialog,
+  UploadDialog,
+} from '@/components'
+
+// Check if file manager is available
+const moduleStore = useModuleStore()
+const isFileManagerAvailable = computed(() => {
+  return moduleStore.has('file_manager') || moduleStore.has('FileManager')
+})
+
+// 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,
+})
+
+// Selection composable
+const selection = useFileSelection({ multiple: true })
+
+// Upload composable
+const upload = useFileUpload({
+  providerId: activeProviderId.value,
+  serviceId: activeServiceId.value,
+})
+
+// Keep upload collection in sync with current location
+watch(() => fileManager.currentLocation.value, (newLocation) => {
+  upload.setCollection(newLocation)
+})
+
+// View state
+const viewMode = ref<ViewMode>('grid')
+const sortField = ref<SortField>('label')
+const sortOrder = ref<SortOrder>('asc')
+const sidebarVisible = ref(true)
+const searchQuery = ref('')
+
+// Dialogs
+const showNewFolderDialog = ref(false)
+const showRenameDialog = ref(false)
+const showDeleteDialog = ref(false)
+const showUploadDialog = ref(false)
+const nodeToRename = ref<FileCollectionObject | FileEntityObject | null>(null)
+const nodesToDelete = ref<(FileCollectionObject | FileEntityObject)[]>([])
+
+// Drag and drop state
+const isDragOver = ref(false)
+
+// Hidden file inputs
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const folderInputRef = ref<HTMLInputElement | null>(null)
+
+// Computed
+const breadcrumbs = computed<BreadcrumbItem[]>(() => {
+  const items: BreadcrumbItem[] = [
+    { id: fileManager.ROOT_ID, label: 'Home', isRoot: true }
+  ]
+  
+  for (const node of fileManager.breadcrumbs.value) {
+    items.push({
+      id: node.id,
+      label: node.label,
+      isRoot: false,
+    })
+  }
+  
+  return items
+})
+
+const sortedItems = computed(() => {
+  const collections = [...fileManager.currentCollections.value]
+  const entities = [...fileManager.currentEntities.value]
+  
+  // Sort collections
+  collections.sort((a, b) => {
+    const aVal = a[sortField.value as keyof FileCollectionObject] ?? ''
+    const bVal = b[sortField.value as keyof FileCollectionObject] ?? ''
+    const cmp = String(aVal).localeCompare(String(bVal))
+    return sortOrder.value === 'asc' ? cmp : -cmp
+  })
+  
+  // Sort entities
+  entities.sort((a, b) => {
+    const aVal = a[sortField.value as keyof FileEntityObject] ?? ''
+    const bVal = b[sortField.value as keyof FileEntityObject] ?? ''
+    const cmp = String(aVal).localeCompare(String(bVal))
+    return sortOrder.value === 'asc' ? cmp : -cmp
+  })
+  
+  // Filter by search
+  const filterFn = (item: FileCollectionObject | FileEntityObject) => {
+    if (!searchQuery.value) return true
+    return item.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+  }
+  
+  return {
+    collections: collections.filter(filterFn),
+    entities: entities.filter(filterFn),
+  }
+})
+
+const hasItems = computed(() => 
+  sortedItems.value.collections.length > 0 || sortedItems.value.entities.length > 0
+)
+
+const selectedIds = computed(() => selection.selectedIds.value)
+
+// Navigation methods
+async function handleBreadcrumbNavigate(item: BreadcrumbItem) {
+  selection.clear()
+  await fileManager.navigateTo(item.isRoot ? null : item.id)
+}
+
+async function handleFolderOpen(folder: FileCollectionObject) {
+  selection.clear()
+  await fileManager.navigateTo(folder.id)
+}
+
+// Item interaction methods
+function handleItemClick(item: FileCollectionObject | FileEntityObject, event: MouseEvent | KeyboardEvent) {
+  const hasCtrl = event.ctrlKey || event.metaKey
+  const hasShift = event.shiftKey
+  
+  if (hasCtrl) {
+    // Ctrl+click: toggle selection
+    selection.toggle(item)
+  } else if (hasShift && selection.hasSelection.value) {
+    // Shift+click: extend selection
+    selection.select(item)
+  } else {
+    // Single click behavior depends on item type
+    if (item['@type'] === 'files.collection') {
+      // Folders: navigate into them
+      selection.clear()
+      handleFolderOpen(item as FileCollectionObject)
+    } else {
+      // Files: show info panel
+      selection.clear()
+      selection.select(item)
+    }
+  }
+}
+
+// Show details panel for an item
+function handleShowDetails(item: FileCollectionObject | FileEntityObject) {
+  selection.clear()
+  selection.select(item)
+}
+
+// Folder operations
+async function handleCreateFolder(name: string) {
+  try {
+    await fileManager.createFolder(name)
+    showNewFolderDialog.value = false
+  } catch (error) {
+    console.error('Failed to create folder:', error)
+  }
+}
+
+// Rename operations - for specific item
+function handleRenameItem(item: FileCollectionObject | FileEntityObject) {
+  nodeToRename.value = item
+  showRenameDialog.value = true
+}
+
+async function handleRename(newName: string) {
+  if (!nodeToRename.value) return
+  
+  try {
+    await fileManager.renameNode(nodeToRename.value.id, newName)
+    showRenameDialog.value = false
+    nodeToRename.value = null
+  } catch (error) {
+    console.error('Failed to rename:', error)
+  }
+}
+
+// Delete operations - for specific item
+function handleDeleteItem(item: FileCollectionObject | FileEntityObject) {
+  nodesToDelete.value = [item]
+  showDeleteDialog.value = true
+}
+
+async function handleDelete() {
+  try {
+    for (const node of nodesToDelete.value) {
+      await fileManager.deleteNode(node.id)
+    }
+    selection.clear()
+    showDeleteDialog.value = false
+    nodesToDelete.value = []
+  } catch (error) {
+    console.error('Failed to delete:', error)
+  }
+}
+
+// Download operation
+function handleDownloadItem(item: FileCollectionObject | FileEntityObject) {
+  if (item['@type'] === 'files.entity') {
+    // Download single file
+    fileManager.downloadEntity(item.id, item.in)
+  } else if (item['@type'] === 'files.collection') {
+    // Download folder as ZIP
+    fileManager.downloadCollection(item.id)
+  }
+}
+
+// File picker methods
+function openFilePicker() {
+  fileInputRef.value?.click()
+}
+
+function openFolderPicker() {
+  folderInputRef.value?.click()
+}
+
+function handleFileSelect(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (input.files && input.files.length > 0) {
+    upload.addFiles(input.files)
+    showUploadDialog.value = true
+    input.value = ''
+  }
+}
+
+function handleFolderSelect(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (input.files && input.files.length > 0) {
+    upload.addFilesWithPaths(input.files)
+    showUploadDialog.value = true
+    input.value = ''
+  }
+}
+
+// Drag and drop methods
+function handleDragOver(event: DragEvent) {
+  event.preventDefault()
+  isDragOver.value = true
+}
+
+function handleDragLeave(event: DragEvent) {
+  event.preventDefault()
+  isDragOver.value = false
+}
+
+async function handleDrop(event: DragEvent) {
+  event.preventDefault()
+  isDragOver.value = false
+  
+  if (!event.dataTransfer) return
+  
+  const items = event.dataTransfer.items
+  if (items && items.length > 0) {
+    const entries: FileSystemEntry[] = []
+    for (let i = 0; i < items.length; i++) {
+      const entry = items[i].webkitGetAsEntry?.()
+      if (entry) {
+        entries.push(entry)
+      }
+    }
+    
+    if (entries.length > 0) {
+      const filesWithPaths = await readEntriesRecursively(entries)
+      if (filesWithPaths.length > 0) {
+        upload.addFilesWithPaths(filesWithPaths)
+        showUploadDialog.value = true
+      }
+      return
+    }
+  }
+  
+  if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+    upload.addFiles(event.dataTransfer.files)
+    showUploadDialog.value = true
+  }
+}
+
+async function readEntriesRecursively(
+  entries: FileSystemEntry[],
+  basePath: string = ''
+): Promise<{ file: File; relativePath: string }[]> {
+  const results: { file: File; relativePath: string }[] = []
+  
+  for (const entry of entries) {
+    if (entry.isFile) {
+      const fileEntry = entry as FileSystemFileEntry
+      const file = await new Promise<File>((resolve, reject) => {
+        fileEntry.file(resolve, reject)
+      })
+      const relativePath = basePath ? `${basePath}/${entry.name}` : entry.name
+      results.push({ file, relativePath })
+    } else if (entry.isDirectory) {
+      const dirEntry = entry as FileSystemDirectoryEntry
+      const dirReader = dirEntry.createReader()
+      const subEntries = await new Promise<FileSystemEntry[]>((resolve, reject) => {
+        const allEntries: FileSystemEntry[] = []
+        const readBatch = () => {
+          dirReader.readEntries((batch) => {
+            if (batch.length === 0) {
+              resolve(allEntries)
+            } else {
+              allEntries.push(...batch)
+              readBatch()
+            }
+          }, reject)
+        }
+        readBatch()
+      })
+      const subPath = basePath ? `${basePath}/${entry.name}` : entry.name
+      const subResults = await readEntriesRecursively(subEntries, subPath)
+      results.push(...subResults)
+    }
+  }
+  
+  return results
+}
+
+// Upload methods
+async function handleUploadAll() {
+  await upload.uploadAll()
+  await fileManager.refresh()
+}
+
+function handleUploadDialogClose() {
+  showUploadDialog.value = false
+  upload.clearAll()
+}
+
+// Refresh
+async function handleRefresh() {
+  await fileManager.refresh()
+}
+
+// Initialize
+onMounted(async () => {
+  try {
+    await fileManager.initialize()
+    await fileManager.refresh()
+    console.log('[Files] - Initialized with:', {
+      provider: activeProviderId.value,
+      service: activeServiceId.value,
+    })
+  } catch (error) {
+    console.error('[Files] - Failed to initialize:', error)
+  }
+})
+</script>
+
+<template>
+  <div class="files-container">
+    <!-- Top Toolbar -->
+    <FilesToolbar
+      v-model:search-query="searchQuery"
+      v-model:view-mode="viewMode"
+      :is-loading="fileManager.isLoading.value"
+      @toggle-sidebar="sidebarVisible = !sidebarVisible"
+      @refresh="handleRefresh"
+      @open-file-picker="openFilePicker"
+      @open-folder-picker="openFolderPicker"
+      @new-folder="showNewFolderDialog = true"
+    />
+
+    <!-- Main Content -->
+    <div 
+      class="files-content"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+    >
+      <!-- Drag overlay -->
+      <FilesDragOverlay :visible="isDragOver" />
+
+      <!-- Sidebar -->
+      <FilesSidebar
+        v-model="sidebarVisible"
+        :active-service-id="activeServiceId"
+        @navigate-home="fileManager.navigateToRoot()"
+      />
+
+      <!-- Main Area -->
+      <div class="files-main">
+        <!-- Breadcrumbs -->
+        <FilesBreadcrumbs
+          :items="breadcrumbs"
+          @navigate="handleBreadcrumbNavigate"
+        />
+
+        <!-- Loading -->
+        <v-progress-linear
+          v-if="fileManager.isLoading.value"
+          indeterminate
+          color="primary"
+          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>
+
+        <!-- Empty state -->
+        <FilesEmptyState v-else-if="!hasItems && !fileManager.isLoading.value" />
+
+        <!-- Grid View -->
+        <FilesGridView
+          v-else-if="viewMode === 'grid'"
+          :collections="sortedItems.collections"
+          :entities="sortedItems.entities"
+          :selected-ids="selectedIds"
+          @item-click="handleItemClick"
+          @rename="handleRenameItem"
+          @delete="handleDeleteItem"
+          @download="handleDownloadItem"
+          @show-details="handleShowDetails"
+        />
+
+        <!-- List View -->
+        <FilesListView
+          v-else-if="viewMode === 'list'"
+          :collections="sortedItems.collections"
+          :entities="sortedItems.entities"
+          :selected-ids="selectedIds"
+          @item-click="handleItemClick"
+          @rename="handleRenameItem"
+          @delete="handleDeleteItem"
+          @download="handleDownloadItem"
+          @show-details="handleShowDetails"
+        />
+
+        <!-- Details View -->
+        <FilesDetailsView
+          v-else-if="viewMode === 'details'"
+          :collections="sortedItems.collections"
+          :entities="sortedItems.entities"
+          :selected-ids="selectedIds"
+          @item-click="handleItemClick"
+          @rename="handleRenameItem"
+          @delete="handleDeleteItem"
+          @download="handleDownloadItem"
+          @show-details="handleShowDetails"
+        />
+      </div>
+    </div>
+
+    <!-- Hidden file inputs -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      style="display: none;"
+      @change="handleFileSelect"
+    />
+    <input
+      ref="folderInputRef"
+      type="file"
+      webkitdirectory
+      style="display: none;"
+      @change="handleFolderSelect"
+    />
+
+    <!-- Dialogs -->
+    <NewFolderDialog
+      v-model="showNewFolderDialog"
+      @create="handleCreateFolder"
+    />
+
+    <RenameDialog
+      v-model="showRenameDialog"
+      :current-name="nodeToRename?.label ?? ''"
+      @rename="handleRename"
+    />
+
+    <DeleteConfirmDialog
+      v-model="showDeleteDialog"
+      :item-count="nodesToDelete.length"
+      @confirm="handleDelete"
+    />
+
+    <UploadDialog
+      v-model="showUploadDialog"
+      :uploads="upload.uploads.value"
+      :total-progress="upload.totalProgress.value"
+      :is-uploading="upload.isUploading.value"
+      :pending-count="upload.pendingUploads.value.length"
+      :completed-count="upload.completedUploads.value.length"
+      @upload-all="handleUploadAll"
+      @remove-upload="upload.removeUpload"
+      @retry-upload="upload.retryUpload"
+      @add-files="openFilePicker"
+      @close="handleUploadDialogClose"
+    />
+
+    <!-- Info Panel (right side) -->
+    <FilesInfoPanel
+      :selected-items="selection.selectedNodeArray.value"
+      @close="selection.clear()"
+    />
+  </div>
+</template>
+
+<style scoped>
+.files-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  isolation: isolate;
+}
+
+.files-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.files-main {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/routes.ts

@@ -0,0 +1,11 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'files',
+    path: '/files',
+    component: () => import('@/pages/FilesPage.vue')
+  },
+]
+
+export default routes

src/types/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Files module types
+ */
+
+export type ViewMode = 'grid' | 'list' | 'details'
+
+export type SortField = 'label' | 'size' | 'modifiedOn' | 'createdOn' | 'mime'
+
+export type SortOrder = 'asc' | 'desc'
+
+export interface ViewSettings {
+  mode: ViewMode
+  sortField: SortField
+  sortOrder: SortOrder
+  showHidden: boolean
+}
+
+export interface BreadcrumbItem {
+  id: string
+  label: string
+  isRoot: boolean
+}
+
+export interface ContextMenuAction {
+  id: string
+  label: string
+  icon: string
+  disabled?: boolean
+  divider?: boolean
+}

src/utils/fileHelpers.ts

@@ -0,0 +1,68 @@
+import { FileEntityObject } from '@FileManager/models/entity'
+
+/**
+ * Get the appropriate icon for a file based on its MIME type
+ */
+export function getFileIcon(entity: FileEntityObject): string {
+  const mime = entity.mime || ''
+  if (!mime) return 'mdi-file'
+  if (mime.startsWith('image/')) return 'mdi-file-image'
+  if (mime.startsWith('video/')) return 'mdi-file-video'
+  if (mime.startsWith('audio/')) return 'mdi-file-music'
+  if (mime.startsWith('text/')) return 'mdi-file-document'
+  if (mime === 'application/pdf') return 'mdi-file-pdf-box'
+  if (mime.includes('zip') || mime.includes('tar') || mime.includes('compressed')) return 'mdi-folder-zip'
+  if (mime.includes('word') || mime.includes('document')) return 'mdi-file-word'
+  if (mime.includes('excel') || mime.includes('spreadsheet')) return 'mdi-file-excel'
+  if (mime.includes('powerpoint') || mime.includes('presentation')) return 'mdi-file-powerpoint'
+  return 'mdi-file'
+}
+
+/**
+ * Format file size in human readable format
+ */
+export function formatSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+/**
+ * Format date string to localized format
+ */
+export function formatDate(dateStr: string): string {
+  if (!dateStr) return '—'
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+/**
+ * Get upload status icon
+ */
+export function getUploadStatusIcon(status: string): string {
+  switch (status) {
+    case 'pending': return 'mdi-clock-outline'
+    case 'uploading': return 'mdi-loading mdi-spin'
+    case 'completed': return 'mdi-check-circle'
+    case 'error': return 'mdi-alert-circle'
+    default: return 'mdi-file'
+  }
+}
+
+/**
+ * Get upload status color
+ */
+export function getUploadStatusColor(status: string): string {
+  switch (status) {
+    case 'pending': return 'grey'
+    case 'uploading': return 'primary'
+    case 'completed': return 'success'
+    case 'error': return 'error'
+    default: return 'grey'
+  }
+}

src/utils/index.ts

@@ -0,0 +1 @@
+export * from './fileHelpers'

tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.app.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@KTXC/*": ["../../core/src/*"],
+      "@FileManager/*": ["../file_manager/src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts", 
+    "src/**/*.tsx", 
+    "src/**/*.vue",
+    "../file_manager/src/**/*.ts",
+    "../../core/src/**/*.ts"
+  ]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.node.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

vite.config.ts

@@ -0,0 +1,70 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    {
+      name: 'inject-css-filename',
+      enforce: 'post',
+      generateBundle(_options, bundle) {
+        // Find the CSS file in the bundle
+        const cssFile = Object.keys(bundle).find(name => name.endsWith('.css'))
+        
+        if (!cssFile) {
+          console.warn('No CSS file found in bundle')
+          return
+        }
+        
+        // Find and update all JS chunks
+        // Prefix with static/ to match nginx location pattern: /modules/{handle}/static/{file}
+        for (const fileName of Object.keys(bundle)) {
+          const chunk = bundle[fileName]
+          if (chunk.type === 'chunk' && chunk.code.includes('__CSS_FILENAME_PLACEHOLDER__')) {
+            chunk.code = chunk.code.replace(
+              /__CSS_FILENAME_PLACEHOLDER__/g,
+              `static/${cssFile}`
+            )
+            console.log(`Injected CSS filename "static/${cssFile}" into ${fileName}`)
+          }
+        }
+      }
+    }
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@KTXC': fileURLToPath(new URL('../../core/src', import.meta.url)),
+      '@FileManager': fileURLToPath(new URL('../file_manager/src', import.meta.url)),
+    },
+  },
+  build: {
+    outDir: 'static',
+    emptyOutDir: true,
+    sourcemap: false,
+    lib: {
+      entry: fileURLToPath(new URL('./src/main.ts', import.meta.url)),
+      name: 'Files',
+      formats: ['es'],
+      fileName: () => 'module.mjs',
+    },
+    rollupOptions: {
+      external: [
+        'vue',
+        'vue-router',
+        'pinia',
+      ],
+      output: {
+        // Use content hash for CSS files
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith('.css')) {
+            return 'files-[hash].css'
+          }
+          return '[name]-[hash][extname]'
+        }
+      }
+    },
+  },
+})