`6f3d442`

Phase 3.3: Advanced file operations with folder creation, bulk download/delete, file preview system, enhanced UI components

Authored by mfwolffe <wolffemf@dukes.jmu.edu> 8 months ago

SHA: 6f3d4428d1c13216b45f95e3026de25440d3e0ec
Parents: c5369ca
Tree: d9055be

10 changed files

Status	File	+	-
A	`client/src/components/CreateFolderModal.vue`	196	0
M	`client/src/components/FileBrowser.vue`	85	10
A	`client/src/components/FileCard.vue`	266	0
A	`client/src/components/FilePreview.vue`	378	0
A	`client/src/components/FileRow.vue`	295	0
A	`client/src/components/JsonViewer.vue`	164	0
M	`server/package.json`	3	1
A	`server/src/routes/bulk.ts`	184	0
A	`server/src/routes/folders.ts`	211	0
M	`server/src/routes/index.ts`	4	0

client/src/components/CreateFolderModal.vueadded

++<template>
++  <Modal @close="$emit('close')">
++    <template #title>Create New Folder</template>
++
++    <form @submit.prevent="handleCreate" class="space-y-4">
++      <!-- Folder name input -->
++      <div>
++        <label for="folderName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
++          Folder Name
++        </label>
++        <input
++          id="folderName"
++          ref="nameInput"
++          v-model="form.name"
++          type="text"
++          required
++          class="input"
++          :class="{ 'border-red-500': errors.name }"
++          placeholder="Enter folder name"
++          @input="validateName"
++        />
++        <p v-if="errors.name" class="mt-1 text-sm text-red-600 dark:text-red-400">
++          {{ errors.name }}
++        </p>
++      </div>
++
++      <!-- Current path display -->
++      <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-md">
++        <p class="text-sm text-gray-600 dark:text-gray-400">
++          Create in: <span class="font-mono">{{ displayPath }}</span>
++        </p>
++      </div>
++
++      <!-- Options -->
++      <div class="space-y-3">
++        <label class="flex items-center">
++          <input
++            v-model="form.encrypted"
++            type="checkbox"
++            class="mr-2 rounded border-gray-300 focus:ring-primary-500"
++          />
++          <span class="text-sm text-gray-700 dark:text-gray-300">
++            Create encrypted folder
++          </span>
++        </label>
++
++        <div v-if="form.encrypted" class="ml-6 text-xs text-gray-500 dark:text-gray-400">
++          All files uploaded to this folder will be automatically encrypted
++        </div>
++      </div>
++
++      <!-- Error display -->
++      <div v-if="error" class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
++        <p class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
++      </div>
++    </form>
++
++    <template #footer>
++      <button
++        type="button"
++        @click="$emit('close')"
++        class="btn btn-outline mr-3"
++      >
++        Cancel
++      </button>
++      <button
++        @click="handleCreate"
++        :disabled="loading || !isValid"
++        class="btn btn-primary"
++        :class="{ 'opacity-50 cursor-not-allowed': loading || !isValid }"
++      >
++        <div v-if="loading" class="spinner w-4 h-4 mr-2"></div>
++        {{ loading ? 'Creating...' : 'Create Folder' }}
++      </button>
++    </template>
++  </Modal>
++</template>
++
++<script setup lang="ts">
++import { ref, computed, onMounted, nextTick } from 'vue'
++import { apiClient } from '@/services/api'
++import Modal from './Modal.vue'
++
++interface Props {
++  currentPath?: string
++}
++
++const props = withDefaults(defineProps<Props>(), {
++  currentPath: '/',
++})
++
++const emit = defineEmits<{
++  close: []
++  created: [path: string]
++}>()
++
++// Form state
++const form = ref({
++  name: '',
++  encrypted: false,
++})
++
++const nameInput = ref<HTMLInputElement>()
++const loading = ref(false)
++const error = ref('')
++const errors = ref<Record<string, string>>({})
++
++// Computed
++const displayPath = computed(() => {
++  return props.currentPath === '/' ? '/' : props.currentPath
++})
++
++const isValid = computed(() => {
++  return form.value.name.trim().length > 0 && !errors.value.name
++})
++
++// Methods
++function validateName() {
++  errors.value.name = ''
++
++  const name = form.value.name.trim()
++
++  if (!name) {
++    errors.value.name = 'Folder name is required'
++    return
++  }
++
++  if (name.length > 255) {
++    errors.value.name = 'Folder name must be less than 255 characters'
++    return
++  }
++
++  // Check for invalid characters
++  const invalidChars = /[<>:"/\\|?*\x00-\x1f]/
++  if (invalidChars.test(name)) {
++    errors.value.name = 'Folder name contains invalid characters'
++    return
++  }
++
++  // Check for reserved names
++  const reservedNames = ['CON', 'PRN', 'AUX', 'NUL', 'COM1', 'COM2', 'COM3', 'COM4', 'COM5', 'COM6', 'COM7', 'COM8', 'COM9', 'LPT1', 'LPT2', 'LPT3', 'LPT4', 'LPT5', 'LPT6', 'LPT7', 'LPT8', 'LPT9']
++  if (reservedNames.includes(name.toUpperCase())) {
++    errors.value.name = 'This folder name is reserved'
++    return
++  }
++
++  // Check for names starting/ending with spaces or dots
++  if (name.startsWith(' ') || name.endsWith(' ') || name.startsWith('.') || name.endsWith('.')) {
++    errors.value.name = 'Folder name cannot start or end with spaces or dots'
++    return
++  }
++}
++
++async function handleCreate() {
++  if (!isValid.value || loading.value) return
++
++  loading.value = true
++  error.value = ''
++
++  try {
++    const folderName = form.value.name.trim()
++
++    // Create folder via API
++    await apiClient.request({
++      method: 'POST',
++      url: '/files/folder',
++      data: {
++        name: folderName,
++        path: props.currentPath,
++        encrypted: form.value.encrypted,
++      },
++    })
++
++    const newPath = props.currentPath === '/' ? `/${folderName}` : `${props.currentPath}/${folderName}`
++
++    emit('created', newPath)
++    emit('close')
++
++    // Show success notification
++    if (window.$notify) {
++      window.$notify.success(`Folder "${folderName}" created successfully`)
++    }
++  } catch (err: any) {
++    error.value = err.response?.data?.message || 'Failed to create folder'
++    console.error('Create folder failed:', err)
++  } finally {
++    loading.value = false
++  }
++}
++
++// Focus input on mount
++onMounted(async () => {
++  await nextTick()
++  nameInput.value?.focus()
++})
++</script>

client/src/components/FileBrowser.vuemodified

  <template>
    <div class="file-browser">
++    <!-- Create folder modal -->
++    <CreateFolderModal
++      v-if="showCreateFolder"
++      :current-path="currentPath"
++      @close="showCreateFolder = false"
++      @created="handleFolderCreated"
++    />
++
      <!-- Toolbar -->
      <div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4">
        <div class="flex items-center justify-between">
              </MenuItems>
            </Menu>
--          <!-- Upload button -->
++          <!-- Actions -->
--          <button
++          <div class="flex items-center space-x-2">
--            @click="$emit('upload')"
++            <!-- Create folder button -->
--            class="btn btn-primary"
++            <button
--          >
++              @click="showCreateFolder = true"
--            <ArrowUpTrayIcon class="w-4 h-4 mr-2" />
++              class="btn btn-outline"
--            Upload
++            >
--          </button>
++              <FolderPlusIcon class="w-4 h-4 mr-2" />
++              New Folder
++            </button>
++
++            <!-- Upload button -->
++            <button
++              @click="$emit('upload')"
++              class="btn btn-primary"
++            >
++              <ArrowUpTrayIcon class="w-4 h-4 mr-2" />
++              Upload
++            </button>
++          </div>
          </div>
        </div>
    TrashIcon,
    ExclamationTriangleIcon,
    FolderIcon,
++  FolderPlusIcon,
  } from '@heroicons/vue/24/outline'
  import FileCard from './FileCard.vue'
  import FileRow from './FileRow.vue'
++import CreateFolderModal from './CreateFolderModal.vue'
  import type { FileItem } from '@shared/types'
  // Emits
  const route = useRoute()
  const router = useRouter()
++// State
++const showCreateFolder = ref(false)
++
  // Computed
  const { currentListing, currentPath, loading, error, selectedFiles, viewMode, sortBy, sortOrder } = filesStore
  const { sortedFiles, hasSelection } = storeToRefs(filesStore)
+ }
  async function downloadSelected() {
--  // TODO: Implement bulk download
++  if (!hasSelection.value) return
--  console.log('Bulk download not implemented yet')
++
++  try {
++    const fileIds = Array.from(selectedFiles.value)
++
++    // Call bulk download API
++    const response = await fetch('/api/files/bulk/download', {
++      method: 'POST',
++      headers: {
++        'Content-Type': 'application/json',
++        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
++      },
++      body: JSON.stringify({
++        fileIds,
++        format: 'zip',
++        archiveName: `zephyrfs-files-${new Date().toISOString().split('T')[0]}.zip`,
++      }),
++    })
++
++    if (!response.ok) {
++      throw new Error('Bulk download failed')
++    }
++
++    // Create download link
++    const blob = await response.blob()
++    const url = window.URL.createObjectURL(blob)
++    const link = document.createElement('a')
++    link.href = url
++    link.download = `zephyrfs-files-${new Date().toISOString().split('T')[0]}.zip`
++    document.body.appendChild(link)
++    link.click()
++    document.body.removeChild(link)
++    window.URL.revokeObjectURL(url)
++
++    // Clear selection
++    filesStore.clearSelection()
++
++    if (window.$notify) {
++      window.$notify.success(`Downloaded ${fileIds.length} files as ZIP archive`)
++    }
++  } catch (error) {
++    console.error('Bulk download failed:', error)
++    if (window.$notify) {
++      window.$notify.error('Failed to download selected files')
++    }
++  }
+ }
  async function deleteSelected() {
    await filesStore.loadDirectory(path)
+ }
++function handleFolderCreated(folderPath: string) {
++  showCreateFolder.value = false
++  // Refresh current directory to show new folder
++  loadDirectory(currentPath.value)
++}
++
  // Watch route changes
  watch(
    () => route.params.path,

client/src/components/FileCard.vueadded

++<template>
++  <div
++    class="file-card group cursor-pointer border border-gray-200 dark:border-gray-700 rounded-lg p-3 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-md transition-all"
++    :class="{
++      'ring-2 ring-primary-500 border-primary-500': selected,
++      'bg-primary-50 dark:bg-primary-900/20': selected
++    }"
++    @click="$emit('click')"
++    @dblclick="$emit('dblclick')"
++  >
++    <!-- Selection checkbox -->
++    <div class="flex items-start justify-between mb-2">
++      <button
++        @click.stop="$emit('select')"
++        class="opacity-0 group-hover:opacity-100 transition-opacity"
++        :class="{ 'opacity-100': selected }"
++      >
++        <div
++          class="w-4 h-4 border-2 rounded border-gray-300 dark:border-gray-600 flex items-center justify-center"
++          :class="{
++            'bg-primary-500 border-primary-500': selected,
++            'hover:border-gray-400 dark:hover:border-gray-500': !selected
++          }"
++        >
++          <CheckIcon v-if="selected" class="w-3 h-3 text-white" />
++        </div>
++      </button>
++
++      <!-- Actions menu -->
++      <Menu as="div" class="relative">
++        <MenuButton
++          @click.stop
++          class="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-opacity"
++        >
++          <EllipsisVerticalIcon class="w-4 h-4 text-gray-500" />
++        </MenuButton>
++
++        <MenuItems class="absolute right-0 mt-1 w-36 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg z-20">
++          <MenuItem v-slot="{ active }">
++            <button
++              @click="$emit('preview')"
++              class="w-full text-left px-3 py-2 text-sm"
++              :class="active ? 'bg-gray-100 dark:bg-gray-700' : ''"
++            >
++              <EyeIcon class="w-4 h-4 inline mr-2" />
++              Preview
++            </button>
++          </MenuItem>
++          <MenuItem v-slot="{ active }">
++            <button
++              @click="$emit('download')"
++              class="w-full text-left px-3 py-2 text-sm"
++              :class="active ? 'bg-gray-100 dark:bg-gray-700' : ''"
++            >
++              <ArrowDownTrayIcon class="w-4 h-4 inline mr-2" />
++              Download
++            </button>
++          </MenuItem>
++          <MenuItem v-if="!file.encrypted" v-slot="{ active }">
++            <button
++              @click="$emit('share')"
++              class="w-full text-left px-3 py-2 text-sm"
++              :class="active ? 'bg-gray-100 dark:bg-gray-700' : ''"
++            >
++              <ShareIcon class="w-4 h-4 inline mr-2" />
++              Share
++            </button>
++          </MenuItem>
++          <MenuItem v-slot="{ active }">
++            <button
++              @click="$emit('rename')"
++              class="w-full text-left px-3 py-2 text-sm"
++              :class="active ? 'bg-gray-100 dark:bg-gray-700' : ''"
++            >
++              <PencilIcon class="w-4 h-4 inline mr-2" />
++              Rename
++            </button>
++          </MenuItem>
++          <MenuItem v-slot="{ active }">
++            <button
++              @click="$emit('delete')"
++              class="w-full text-left px-3 py-2 text-sm text-red-600 dark:text-red-400"
++              :class="active ? 'bg-red-50 dark:bg-red-900/20' : ''"
++            >
++              <TrashIcon class="w-4 h-4 inline mr-2" />
++              Delete
++            </button>
++          </MenuItem>
++        </MenuItems>
++      </Menu>
++    </div>
++
++    <!-- File icon and preview -->
++    <div class="flex flex-col items-center mb-3">
++      <!-- Thumbnail or icon -->
++      <div class="w-16 h-16 flex items-center justify-center rounded-lg mb-2"
++           :class="file.type === 'directory' ? 'bg-blue-100 dark:bg-blue-900/30' : 'bg-gray-100 dark:bg-gray-700'">
++
++        <!-- Directory icon -->
++        <FolderIcon
++          v-if="file.type === 'directory'"
++          class="w-10 h-10 text-blue-600 dark:text-blue-400"
++        />
++
++        <!-- File icons based on type -->
++        <component
++          v-else
++          :is="getFileIcon(file)"
++          class="w-10 h-10"
++          :class="getFileIconColor(file)"
++        />
++      </div>
++
++      <!-- Encryption indicator -->
++      <div v-if="file.encrypted" class="flex items-center text-xs text-amber-600 dark:text-amber-400 mb-1">
++        <LockClosedIcon class="w-3 h-3 mr-1" />
++        <span>Encrypted</span>
++      </div>
++    </div>
++
++    <!-- File info -->
++    <div class="text-center space-y-1">
++      <!-- File name -->
++      <h3 class="text-sm font-medium text-gray-900 dark:text-white truncate" :title="file.name">
++        {{ file.name }}
++      </h3>
++
++      <!-- File size and date -->
++      <div class="text-xs text-gray-500 dark:text-gray-400 space-y-0.5">
++        <div v-if="file.type === 'file'">
++          {{ formatFileSize(file.size) }}
++        </div>
++        <div>
++          {{ formatDate(file.lastModified) }}
++        </div>
++      </div>
++    </div>
++  </div>
++</template>
++
++<script setup lang="ts">
++import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
++import {
++  CheckIcon,
++  EllipsisVerticalIcon,
++  FolderIcon,
++  DocumentIcon,
++  PhotoIcon,
++  VideoCameraIcon,
++  MusicNoteIcon,
++  ArchiveBoxIcon,
++  CodeBracketIcon,
++  LockClosedIcon,
++  EyeIcon,
++  ArrowDownTrayIcon,
++  ShareIcon,
++  PencilIcon,
++  TrashIcon,
++} from '@heroicons/vue/24/outline'
++import type { FileItem } from '@shared/types'
++
++interface Props {
++  file: FileItem
++  selected?: boolean
++}
++
++const props = withDefaults(defineProps<Props>(), {
++  selected: false,
++})
++
++const emit = defineEmits<{
++  click: []
++  dblclick: []
++  select: []
++  preview: []
++  download: []
++  share: []
++  rename: []
++  delete: []
++}>()
++
++function getFileIcon(file: FileItem) {
++  if (file.type === 'directory') return FolderIcon
++
++  const ext = file.name.split('.').pop()?.toLowerCase()
++  const mimeType = file.mimeType?.toLowerCase()
++
++  // Images
++  if (mimeType?.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(ext || '')) {
++    return PhotoIcon
++  }
++
++  // Videos
++  if (mimeType?.startsWith('video/') || ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm'].includes(ext || '')) {
++    return VideoCameraIcon
++  }
++
++  // Audio
++  if (mimeType?.startsWith('audio/') || ['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(ext || '')) {
++    return MusicNoteIcon
++  }
++
++  // Code files
++  if (['js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'go', 'rs', 'php', 'rb', 'css', 'html', 'json', 'xml'].includes(ext || '')) {
++    return CodeBracketIcon
++  }
++
++  // Archives
++  if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(ext || '')) {
++    return ArchiveBoxIcon
++  }
++
++  return DocumentIcon
++}
++
++function getFileIconColor(file: FileItem) {
++  const ext = file.name.split('.').pop()?.toLowerCase()
++  const mimeType = file.mimeType?.toLowerCase()
++
++  if (mimeType?.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(ext || '')) {
++    return 'text-green-600 dark:text-green-400'
++  }
++
++  if (mimeType?.startsWith('video/') || ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm'].includes(ext || '')) {
++    return 'text-red-600 dark:text-red-400'
++  }
++
++  if (mimeType?.startsWith('audio/') || ['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(ext || '')) {
++    return 'text-purple-600 dark:text-purple-400'
++  }
++
++  if (['js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'go', 'rs', 'php', 'rb', 'css', 'html', 'json', 'xml'].includes(ext || '')) {
++    return 'text-blue-600 dark:text-blue-400'
++  }
++
++  if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(ext || '')) {
++    return 'text-orange-600 dark:text-orange-400'
++  }
++
++  return 'text-gray-600 dark:text-gray-400'
++}
++
++function formatFileSize(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(1)) + ' ' + sizes[i]
++}
++
++function formatDate(date: Date): string {
++  const now = new Date()
++  const diff = now.getTime() - new Date(date).getTime()
++  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
++
++  if (days === 0) return 'Today'
++  if (days === 1) return 'Yesterday'
++  if (days < 7) return `${days} days ago`
++
++  return new Intl.DateTimeFormat('en-US', {
++    month: 'short',
++    day: 'numeric',
++    year: now.getFullYear() !== new Date(date).getFullYear() ? 'numeric' : undefined,
++  }).format(new Date(date))
++}
++</script>

client/src/components/FilePreview.vueadded

++<template>
++  <Modal :show="!!file" @close="$emit('close')" :closable="!loading">
++    <template #title>
++      <div class="flex items-center space-x-3">
++        <component :is="getFileIcon(file)" class="w-6 h-6 text-gray-600 dark:text-gray-400" />
++        <span>{{ file?.name }}</span>
++      </div>
++    </template>
++
++    <div class="min-h-[60vh] max-h-[80vh] overflow-hidden">
++      <!-- Loading state -->
++      <div v-if="loading" class="flex items-center justify-center h-64">
++        <div class="flex items-center space-x-3">
++          <div class="spinner w-6 h-6"></div>
++          <span class="text-gray-600 dark:text-gray-400">Loading preview...</span>
++        </div>
++      </div>
++
++      <!-- Error state -->
++      <div v-else-if="error" class="flex flex-col items-center justify-center h-64 text-center">
++        <ExclamationTriangleIcon class="w-12 h-12 text-red-500 mb-3" />
++        <p class="text-red-600 dark:text-red-400 mb-4">{{ error }}</p>
++        <button @click="loadPreview" class="btn btn-outline">
++          Try Again
++        </button>
++      </div>
++
++      <!-- Preview content -->
++      <div v-else class="preview-content">
++        <!-- Image preview -->
++        <div v-if="previewType === 'image'" class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden">
++          <img
++            :src="previewUrl"
++            :alt="file?.name"
++            class="max-w-full max-h-[70vh] object-contain"
++            @load="handleImageLoad"
++            @error="handleImageError"
++          />
++        </div>
++
++        <!-- Text preview -->
++        <div v-else-if="previewType === 'text'" class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 overflow-auto max-h-[70vh]">
++          <pre class="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap font-mono">{{ textContent }}</pre>
++        </div>
++
++        <!-- PDF preview -->
++        <div v-else-if="previewType === 'pdf'" class="bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden">
++          <iframe
++            :src="previewUrl"
++            class="w-full h-[70vh] border-0"
++            title="PDF Preview"
++          ></iframe>
++        </div>
++
++        <!-- Video preview -->
++        <div v-else-if="previewType === 'video'" class="bg-black rounded-lg overflow-hidden flex items-center justify-center">
++          <video
++            :src="previewUrl"
++            controls
++            class="max-w-full max-h-[70vh]"
++            preload="metadata"
++          >
++            Your browser does not support video playback.
++          </video>
++        </div>
++
++        <!-- Audio preview -->
++        <div v-else-if="previewType === 'audio'" class="flex flex-col items-center justify-center h-64 space-y-4">
++          <MusicNoteIcon class="w-16 h-16 text-gray-400" />
++          <audio
++            :src="previewUrl"
++            controls
++            class="w-full max-w-md"
++            preload="metadata"
++          >
++            Your browser does not support audio playback.
++          </audio>
++        </div>
++
++        <!-- Archive preview -->
++        <div v-else-if="previewType === 'archive'" class="space-y-4">
++          <div class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
++            <ArchiveBoxIcon class="w-5 h-5" />
++            <span>Archive contents ({{ archiveContents.length }} items)</span>
++          </div>
++          <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 max-h-96 overflow-auto">
++            <div class="space-y-1">
++              <div
++                v-for="item in archiveContents"
++                :key="item.path"
++                class="flex items-center space-x-2 text-sm"
++              >
++                <component
++                  :is="item.isDirectory ? FolderIcon : DocumentIcon"
++                  class="w-4 h-4 text-gray-400"
++                />
++                <span class="font-mono text-gray-700 dark:text-gray-300">{{ item.path }}</span>
++                <span v-if="!item.isDirectory" class="text-gray-500">
++                  ({{ formatFileSize(item.size) }})
++                </span>
++              </div>
++            </div>
++          </div>
++        </div>
++
++        <!-- JSON preview -->
++        <div v-else-if="previewType === 'json'" class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 overflow-auto max-h-[70vh]">
++          <JsonViewer :data="jsonData" />
++        </div>
++
++        <!-- Not supported -->
++        <div v-else class="flex flex-col items-center justify-center h-64 text-center">
++          <DocumentIcon class="w-16 h-16 text-gray-300 dark:text-gray-600 mb-4" />
++          <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
++            Preview not available
++          </h3>
++          <p class="text-gray-500 dark:text-gray-400 mb-6">
++            This file type cannot be previewed in the browser.
++          </p>
++          <button @click="downloadFile" class="btn btn-primary">
++            <ArrowDownTrayIcon class="w-4 h-4 mr-2" />
++            Download File
++          </button>
++        </div>
++      </div>
++
++      <!-- File info -->
++      <div v-if="file && !loading" class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
++        <div class="grid grid-cols-2 gap-4 text-sm">
++          <div>
++            <span class="text-gray-500 dark:text-gray-400">Size:</span>
++            <span class="ml-2 text-gray-700 dark:text-gray-300">{{ formatFileSize(file.size) }}</span>
++          </div>
++          <div>
++            <span class="text-gray-500 dark:text-gray-400">Modified:</span>
++            <span class="ml-2 text-gray-700 dark:text-gray-300">{{ formatDate(file.lastModified) }}</span>
++          </div>
++          <div>
++            <span class="text-gray-500 dark:text-gray-400">Type:</span>
++            <span class="ml-2 text-gray-700 dark:text-gray-300">{{ file.mimeType || 'Unknown' }}</span>
++          </div>
++          <div>
++            <span class="text-gray-500 dark:text-gray-400">Encrypted:</span>
++            <span class="ml-2 text-gray-700 dark:text-gray-300">{{ file.encrypted ? 'Yes' : 'No' }}</span>
++          </div>
++        </div>
++      </div>
++    </div>
++
++    <template #footer>
++      <div class="flex justify-between items-center w-full">
++        <div class="flex items-center space-x-2">
++          <button
++            v-if="file"
++            @click="downloadFile"
++            class="btn btn-outline"
++          >
++            <ArrowDownTrayIcon class="w-4 h-4 mr-2" />
++            Download
++          </button>
++          <button
++            v-if="file && canShare"
++            @click="shareFile"
++            class="btn btn-outline"
++          >
++            <ShareIcon class="w-4 h-4 mr-2" />
++            Share
++          </button>
++        </div>
++        <button @click="$emit('close')" class="btn btn-primary">
++          Close
++        </button>
++      </div>
++    </template>
++  </Modal>
++</template>
++
++<script setup lang="ts">
++import { ref, computed, watch, onUnmounted } from 'vue'
++import { apiClient } from '@/services/api'
++import {
++  ExclamationTriangleIcon,
++  DocumentIcon,
++  PhotoIcon,
++  VideoCameraIcon,
++  MusicNoteIcon,
++  ArchiveBoxIcon,
++  FolderIcon,
++  ArrowDownTrayIcon,
++  ShareIcon,
++  CodeBracketIcon,
++} from '@heroicons/vue/24/outline'
++import Modal from './Modal.vue'
++import JsonViewer from './JsonViewer.vue'
++import type { FileItem } from '@shared/types'
++
++interface Props {
++  file: FileItem | null
++}
++
++const props = defineProps<Props>()
++
++const emit = defineEmits<{
++  close: []
++  share: [file: FileItem]
++}>()
++
++// State
++const loading = ref(false)
++const error = ref('')
++const previewUrl = ref('')
++const textContent = ref('')
++const jsonData = ref<any>(null)
++const archiveContents = ref<Array<{ path: string; size: number; isDirectory: boolean }>>([])
++
++// Computed
++const previewType = computed(() => {
++  if (!props.file?.mimeType) return 'unknown'
++
++  const mimeType = props.file.mimeType.toLowerCase()
++
++  if (mimeType.startsWith('image/')) return 'image'
++  if (mimeType.startsWith('video/')) return 'video'
++  if (mimeType.startsWith('audio/')) return 'audio'
++  if (mimeType === 'application/pdf') return 'pdf'
++  if (mimeType === 'application/json' || mimeType === 'text/json') return 'json'
++  if (mimeType.startsWith('text/') || mimeType === 'application/javascript') return 'text'
++  if (mimeType.includes('zip') || mimeType.includes('tar') || mimeType.includes('archive')) return 'archive'
++
++  return 'unknown'
++})
++
++const canShare = computed(() => {
++  return props.file && !props.file.encrypted
++})
++
++// Methods
++function getFileIcon(file: FileItem | null) {
++  if (!file) return DocumentIcon
++
++  const type = previewType.value
++  switch (type) {
++    case 'image': return PhotoIcon
++    case 'video': return VideoCameraIcon
++    case 'audio': return MusicNoteIcon
++    case 'archive': return ArchiveBoxIcon
++    case 'json': return CodeBracketIcon
++    default: return DocumentIcon
++  }
++}
++
++async function loadPreview() {
++  if (!props.file) return
++
++  loading.value = true
++  error.value = ''
++
++  try {
++    const blob = await apiClient.downloadFile(props.file.id)
++    previewUrl.value = URL.createObjectURL(blob)
++
++    // Load content based on type
++    if (previewType.value === 'text' || previewType.value === 'json') {
++      const text = await blob.text()
++
++      if (previewType.value === 'json') {
++        try {
++          jsonData.value = JSON.parse(text)
++        } catch {
++          textContent.value = text
++        }
++      } else {
++        textContent.value = text.slice(0, 50000) // Limit to 50KB for display
++      }
++    }
++
++    // TODO: Implement archive contents parsing for ZIP files
++    if (previewType.value === 'archive') {
++      // This would require a ZIP parsing library
++      archiveContents.value = [
++        { path: 'example.txt', size: 1024, isDirectory: false },
++      ]
++    }
++
++  } catch (err: any) {
++    error.value = err.message || 'Failed to load preview'
++    console.error('Preview failed:', err)
++  } finally {
++    loading.value = false
++  }
++}
++
++function handleImageLoad() {
++  // Image loaded successfully
++}
++
++function handleImageError() {
++  error.value = 'Failed to load image'
++}
++
++async function downloadFile() {
++  if (!props.file) return
++
++  try {
++    const blob = await apiClient.downloadFile(props.file.id)
++    const url = URL.createObjectURL(blob)
++    const link = document.createElement('a')
++    link.href = url
++    link.download = props.file.name
++    document.body.appendChild(link)
++    link.click()
++    document.body.removeChild(link)
++    URL.revokeObjectURL(url)
++  } catch (error) {
++    console.error('Download failed:', error)
++    if (window.$notify) {
++      window.$notify.error('Failed to download file')
++    }
++  }
++}
++
++function shareFile() {
++  if (props.file) {
++    emit('share', props.file)
++  }
++}
++
++function formatFileSize(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(1)) + ' ' + sizes[i]
++}
++
++function formatDate(date: Date): string {
++  return new Intl.DateTimeFormat('en-US', {
++    year: 'numeric',
++    month: 'short',
++    day: 'numeric',
++    hour: '2-digit',
++    minute: '2-digit',
++  }).format(new Date(date))
++}
++
++// Watch for file changes
++watch(() => props.file, (newFile) => {
++  if (newFile) {
++    loadPreview()
++  } else {
++    // Clean up
++    if (previewUrl.value) {
++      URL.revokeObjectURL(previewUrl.value)
++      previewUrl.value = ''
++    }
++    textContent.value = ''
++    jsonData.value = null
++    archiveContents.value = []
++  }
++}, { immediate: true })
++
++// Cleanup on unmount
++onUnmounted(() => {
++  if (previewUrl.value) {
++    URL.revokeObjectURL(previewUrl.value)
++  }
++})
++</script>
++
++<style scoped>
++.preview-content {
++  @apply flex flex-col space-y-4;
++}
++
++pre {
++  @apply break-words whitespace-pre-wrap;
++}
++</style>

client/src/components/FileRow.vueadded

++<template>
++  <div
++    class="file-row group flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-200 dark:border-gray-700 cursor-pointer"
++    :class="{
++      'bg-primary-50 dark:bg-primary-900/20': selected,
++      'border-primary-200 dark:border-primary-800': selected
++    }"
++    @click="$emit('click')"
++    @dblclick="$emit('dblclick')"
++  >
++    <!-- Selection checkbox -->
++    <div class="flex-shrink-0 mr-3">
++      <button
++        @click.stop="$emit('select')"
++        class="opacity-0 group-hover:opacity-100 transition-opacity"
++        :class="{ 'opacity-100': selected }"
++      >
++        <div
++          class="w-4 h-4 border-2 rounded border-gray-300 dark:border-gray-600 flex items-center justify-center"
++          :class="{
++            'bg-primary-500 border-primary-500': selected,
++            'hover:border-gray-400 dark:hover:border-gray-500': !selected
++          }"
++        >
++          <CheckIcon v-if="selected" class="w-3 h-3 text-white" />
++        </div>
++      </button>
++    </div>
++
++    <!-- File icon -->
++    <div class="flex-shrink-0 mr-3">
++      <div class="w-8 h-8 flex items-center justify-center">
++        <FolderIcon
++          v-if="file.type === 'directory'"
++          class="w-6 h-6 text-blue-600 dark:text-blue-400"
++        />
++        <component
++          v-else
++          :is="getFileIcon(file)"
++          class="w-6 h-6"
++          :class="getFileIconColor(file)"
++        />
++      </div>
++    </div>
++
++    <!-- File name and info -->
++    <div class="flex-1 min-w-0 mr-4">
++      <div class="flex items-center space-x-2">
++        <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
++          {{ file.name }}
++        </p>
++
++        <!-- Encryption indicator -->
++        <LockClosedIcon
++          v-if="file.encrypted"
++          class="w-3 h-3 text-amber-600 dark:text-amber-400 flex-shrink-0"
++          title="Encrypted"
++        />
++      </div>
++
++      <!-- File type/description -->
++      <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
++        {{ getFileDescription(file) }}
++      </p>
++    </div>
++
++    <!-- File size -->
++    <div class="flex-shrink-0 w-20 text-right mr-4">
++      <p class="text-sm text-gray-700 dark:text-gray-300">
++        {{ file.type === 'file' ? formatFileSize(file.size) : '—' }}
++      </p>
++    </div>
++
++    <!-- Last modified -->
++    <div class="flex-shrink-0 w-32 text-right mr-4">
++      <p class="text-sm text-gray-700 dark:text-gray-300">
++        {{ formatDate(file.lastModified) }}
++      </p>
++    </div>
++
++    <!-- Actions menu -->
++    <div class="flex-shrink-0">
++      <Menu as="div" class="relative">
++        <MenuButton
++          @click.stop
++          class="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-opacity"
++        >
++          <EllipsisHorizontalIcon class="w-5 h-5 text-gray-500" />
++        </MenuButton>
++
++        <MenuItems class="absolute right-0 mt-1 w-36 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg z-20">
++          <MenuItem v-slot="{ active }">
++            <button
++              @click="$emit('preview')"
++              class="w-full text-left px-3 py-2 text-sm"
++              :class="active ? 'bg-gray-100 dark:bg-gray-700' : ''"
++            >
++              <EyeIcon class="w-4 h-4 inline mr-2" />
++              Preview
++            </button>
++          </MenuItem>
++          <MenuItem v-slot="{ active }">
++            <button
++              @click="$emit('download')"
++              class="w-full text-left px-3 py-2 text-sm"
++              :class="active ? 'bg-gray-100 dark:bg-gray-700' : ''"
++            >
++              <ArrowDownTrayIcon class="w-4 h-4 inline mr-2" />
++              Download
++            </button>
++          </MenuItem>
++          <MenuItem v-if="!file.encrypted" v-slot="{ active }">
++            <button
++              @click="$emit('share')"
++              class="w-full text-left px-3 py-2 text-sm"
++              :class="active ? 'bg-gray-100 dark:bg-gray-700' : ''"
++            >
++              <ShareIcon class="w-4 h-4 inline mr-2" />
++              Share
++            </button>
++          </MenuItem>
++          <MenuItem v-slot="{ active }">
++            <button
++              @click="$emit('rename')"
++              class="w-full text-left px-3 py-2 text-sm"
++              :class="active ? 'bg-gray-100 dark:bg-gray-700' : ''"
++            >
++              <PencilIcon class="w-4 h-4 inline mr-2" />
++              Rename
++            </button>
++          </MenuItem>
++          <MenuItem v-slot="{ active }">
++            <button
++              @click="$emit('delete')"
++              class="w-full text-left px-3 py-2 text-sm text-red-600 dark:text-red-400"
++              :class="active ? 'bg-red-50 dark:bg-red-900/20' : ''"
++            >
++              <TrashIcon class="w-4 h-4 inline mr-2" />
++              Delete
++            </button>
++          </MenuItem>
++        </MenuItems>
++      </Menu>
++    </div>
++  </div>
++</template>
++
++<script setup lang="ts">
++import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
++import {
++  CheckIcon,
++  EllipsisHorizontalIcon,
++  FolderIcon,
++  DocumentIcon,
++  PhotoIcon,
++  VideoCameraIcon,
++  MusicNoteIcon,
++  ArchiveBoxIcon,
++  CodeBracketIcon,
++  LockClosedIcon,
++  EyeIcon,
++  ArrowDownTrayIcon,
++  ShareIcon,
++  PencilIcon,
++  TrashIcon,
++} from '@heroicons/vue/24/outline'
++import type { FileItem } from '@shared/types'
++
++interface Props {
++  file: FileItem
++  selected?: boolean
++}
++
++const props = withDefaults(defineProps<Props>(), {
++  selected: false,
++})
++
++const emit = defineEmits<{
++  click: []
++  dblclick: []
++  select: []
++  preview: []
++  download: []
++  share: []
++  rename: []
++  delete: []
++}>()
++
++function getFileIcon(file: FileItem) {
++  if (file.type === 'directory') return FolderIcon
++
++  const ext = file.name.split('.').pop()?.toLowerCase()
++  const mimeType = file.mimeType?.toLowerCase()
++
++  if (mimeType?.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(ext || '')) {
++    return PhotoIcon
++  }
++
++  if (mimeType?.startsWith('video/') || ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm'].includes(ext || '')) {
++    return VideoCameraIcon
++  }
++
++  if (mimeType?.startsWith('audio/') || ['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(ext || '')) {
++    return MusicNoteIcon
++  }
++
++  if (['js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'go', 'rs', 'php', 'rb', 'css', 'html', 'json', 'xml'].includes(ext || '')) {
++    return CodeBracketIcon
++  }
++
++  if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(ext || '')) {
++    return ArchiveBoxIcon
++  }
++
++  return DocumentIcon
++}
++
++function getFileIconColor(file: FileItem) {
++  const ext = file.name.split('.').pop()?.toLowerCase()
++  const mimeType = file.mimeType?.toLowerCase()
++
++  if (mimeType?.startsWith('image/')) return 'text-green-600 dark:text-green-400'
++  if (mimeType?.startsWith('video/')) return 'text-red-600 dark:text-red-400'
++  if (mimeType?.startsWith('audio/')) return 'text-purple-600 dark:text-purple-400'
++  if (['js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'go', 'rs', 'php', 'rb', 'css', 'html', 'json', 'xml'].includes(ext || '')) {
++    return 'text-blue-600 dark:text-blue-400'
++  }
++  if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(ext || '')) {
++    return 'text-orange-600 dark:text-orange-400'
++  }
++
++  return 'text-gray-600 dark:text-gray-400'
++}
++
++function getFileDescription(file: FileItem): string {
++  if (file.type === 'directory') {
++    return 'Folder'
++  }
++
++  const ext = file.name.split('.').pop()?.toLowerCase()
++
++  if (file.mimeType) {
++    const mimeType = file.mimeType.toLowerCase()
++    if (mimeType.startsWith('image/')) return 'Image'
++    if (mimeType.startsWith('video/')) return 'Video'
++    if (mimeType.startsWith('audio/')) return 'Audio'
++    if (mimeType === 'application/pdf') return 'PDF Document'
++    if (mimeType.includes('json')) return 'JSON File'
++    if (mimeType.includes('zip') || mimeType.includes('archive')) return 'Archive'
++  }
++
++  // Fallback to extension
++  const extMap: Record<string, string> = {
++    'txt': 'Text File',
++    'md': 'Markdown',
++    'js': 'JavaScript',
++    'ts': 'TypeScript',
++    'py': 'Python',
++    'java': 'Java',
++    'cpp': 'C++',
++    'c': 'C',
++    'go': 'Go',
++    'rs': 'Rust',
++    'php': 'PHP',
++    'rb': 'Ruby',
++    'css': 'CSS',
++    'html': 'HTML',
++    'json': 'JSON',
++    'xml': 'XML',
++    'zip': 'ZIP Archive',
++    'rar': 'RAR Archive',
++    '7z': '7-Zip Archive',
++    'tar': 'TAR Archive',
++    'gz': 'Gzip Archive',
++  }
++
++  return extMap[ext || ''] || (ext ? `${ext.toUpperCase()} File` : 'File')
++}
++
++function formatFileSize(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(1)) + ' ' + sizes[i]
++}
++
++function formatDate(date: Date): string {
++  return new Intl.DateTimeFormat('en-US', {
++    month: 'short',
++    day: 'numeric',
++    year: 'numeric',
++  }).format(new Date(date))
++}
++</script>

client/src/components/JsonViewer.vueadded

++<template>
++  <div class="json-viewer">
++    <div class="json-content text-sm font-mono">
++      <JsonNode
++        :data="data"
++        :key-name="''"
++        :level="0"
++        :is-root="true"
++      />
++    </div>
++  </div>
++</template>
++
++<script setup lang="ts">
++import { defineComponent } from 'vue'
++
++interface Props {
++  data: any
++}
++
++defineProps<Props>()
++
++// Recursive JSON node component
++const JsonNode = defineComponent({
++  name: 'JsonNode',
++  props: {
++    data: { required: true },
++    keyName: { type: String, default: '' },
++    level: { type: Number, default: 0 },
++    isRoot: { type: Boolean, default: false },
++  },
++  data() {
++    return {
++      collapsed: this.level > 2, // Auto-collapse deep objects
++    }
++  },
++  computed: {
++    dataType() {
++      if (this.data === null) return 'null'
++      if (Array.isArray(this.data)) return 'array'
++      return typeof this.data
++    },
++    isCollapsible() {
++      return this.dataType === 'object' || this.dataType === 'array'
++    },
++    keys() {
++      if (this.dataType === 'object') {
++        return Object.keys(this.data)
++      }
++      if (this.dataType === 'array') {
++        return this.data.map((_: any, index: number) => index.toString())
++      }
++      return []
++    },
++    hasChildren() {
++      return this.keys.length > 0
++    },
++    indentStyle() {
++      return {
++        paddingLeft: `${this.level * 20}px`,
++      }
++    },
++  },
++  methods: {
++    toggleCollapse() {
++      if (this.isCollapsible) {
++        this.collapsed = !this.collapsed
++      }
++    },
++    formatValue(value: any) {
++      if (value === null) return 'null'
++      if (typeof value === 'string') return `"${value}"`
++      if (typeof value === 'boolean') return value.toString()
++      if (typeof value === 'number') return value.toString()
++      return String(value)
++    },
++    getValueClass(value: any) {
++      if (value === null) return 'text-gray-500'
++      if (typeof value === 'string') return 'text-green-600 dark:text-green-400'
++      if (typeof value === 'boolean') return 'text-blue-600 dark:text-blue-400'
++      if (typeof value === 'number') return 'text-purple-600 dark:text-purple-400'
++      return 'text-gray-700 dark:text-gray-300'
++    },
++  },
++  template: `
++    <div class="json-node">
++      <div
++        v-if="!isRoot"
++        class="json-line flex items-start hover:bg-gray-100 dark:hover:bg-gray-700 rounded px-1"
++        :style="indentStyle"
++      >
++        <!-- Toggle button -->
++        <button
++          v-if="isCollapsible"
++          @click="toggleCollapse"
++          class="flex-shrink-0 w-4 h-4 mt-0.5 mr-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
++        >
++          <svg class="w-3 h-3 transition-transform" :class="{ 'rotate-90': !collapsed }" fill="currentColor" viewBox="0 0 20 20">
++            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
++          </svg>
++        </button>
++        <span v-else class="w-4 mr-1"></span>
++
++        <!-- Key name -->
++        <span v-if="keyName" class="text-blue-700 dark:text-blue-300 mr-2">
++          "{{ keyName }}":
++        </span>
++
++        <!-- Value for primitives -->
++        <span
++          v-if="!isCollapsible"
++          :class="getValueClass(data)"
++        >
++          {{ formatValue(data) }}
++        </span>
++
++        <!-- Container indicators -->
++        <span v-else class="text-gray-600 dark:text-gray-400">
++          <span v-if="dataType === 'array'">
++            [{{ collapsed ? \`\${keys.length} items\` : '' }}
++          </span>
++          <span v-else-if="dataType === 'object'">
++            {{{ collapsed ? \`\${keys.length} keys\` : '' }}
++          </span>
++        </span>
++      </div>
++
++      <!-- Children -->
++      <div v-if="(isRoot || !collapsed) && hasChildren">
++        <JsonNode
++          v-for="key in keys"
++          :key="key"
++          :data="data[key]"
++          :key-name="key"
++          :level="isRoot ? 0 : level + 1"
++        />
++      </div>
++
++      <!-- Closing brackets -->
++      <div
++        v-if="(isRoot || !collapsed) && isCollapsible && !isRoot"
++        class="text-gray-600 dark:text-gray-400 px-1"
++        :style="indentStyle"
++      >
++        {{ dataType === 'array' ? ']' : '}' }}
++      </div>
++    </div>
++  `,
++})
++</script>
++
++<style scoped>
++.json-viewer {
++  @apply text-sm;
++}
++
++.json-line {
++  @apply py-0.5;
++}
++
++.json-content {
++  @apply leading-relaxed;
++}
++</style>

server/package.jsonmodified

      "@fastify/websocket": "^8.3.1",
      "webdav": "^5.3.0",
      "ws": "^8.14.2",
--    "zod": "^3.22.4"
++    "zod": "^3.22.4",
++    "archiver": "^6.0.1"
    },
    "devDependencies": {
      "@types/node": "^20.8.10",
      "@types/ws": "^8.5.8",
++    "@types/archiver": "^6.0.2",
      "@typescript-eslint/eslint-plugin": "^6.9.1",
      "@typescript-eslint/parser": "^6.9.1",
      "eslint": "^8.52.0",

server/src/routes/bulk.tsadded

++import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
++import { z } from 'zod';
++import archiver from 'archiver';
++import { PassThrough } from 'node:stream';
++
++const bulkDownloadSchema = z.object({
++  fileIds: z.array(z.string()).min(1).max(100), // Limit to 100 files
++  format: z.enum(['zip', 'tar']).default('zip'),
++  archiveName: z.string().optional(),
++});
++
++const bulkDeleteSchema = z.object({
++  fileIds: z.array(z.string()).min(1).max(100),
++});
++
++const bulkMoveSchema = z.object({
++  fileIds: z.array(z.string()).min(1).max(100),
++  targetPath: z.string(),
++});
++
++export async function bulkRoutes(fastify: FastifyInstance) {
++  // Bulk download files as archive
++  fastify.post<{
++    Body: z.infer<typeof bulkDownloadSchema>;
++  }>('/files/bulk/download', {
++    schema: {
++      body: bulkDownloadSchema,
++    },
++    preHandler: fastify.authenticate,
++  }, async (request: FastifyRequest, reply: FastifyReply) => {
++    const { fileIds, format, archiveName } = request.body as z.infer<typeof bulkDownloadSchema>;
++
++    try {
++      // Create archive
++      const archive = archiver(format, {
++        zlib: { level: 6 }, // Compression level for zip
++      });
++
++      const passThrough = new PassThrough();
++      archive.pipe(passThrough);
++
++      // Set response headers
++      const timestamp = new Date().toISOString().split('T')[0];
++      const defaultName = archiveName || `zephyrfs-files-${timestamp}.${format}`;
++
++      reply.header('Content-Type', `application/${format}`);
++      reply.header('Content-Disposition', `attachment; filename="${defaultName}"`);
++
++      // Handle archive errors
++      archive.on('error', (err) => {
++        fastify.log.error(err, 'Archive creation failed');
++        if (!reply.sent) {
++          reply.code(500).send({ error: 'Archive creation failed' });
++        }
++      });
++
++      // Process each file
++      const filePromises = fileIds.map(async (fileId) => {
++        try {
++          // Get file info first
++          const fileInfo = await fastify.zephyrfs.getFileInfo(fileId);
++
++          // Download file stream
++          const download = await fastify.zephyrfs.downloadFile(fileId);
++
++          // Add to archive
++          archive.append(download.stream as any, {
++            name: fileInfo.name,
++            date: fileInfo.lastModified,
++          });
++
++        } catch (error) {
++          fastify.log.warn({ fileId, error }, 'Failed to add file to archive');
++          // Continue with other files instead of failing entire operation
++        }
++      });
++
++      // Wait for all files to be processed
++      await Promise.allSettled(filePromises);
++
++      // Finalize archive
++      await archive.finalize();
++
++      // Stream the archive
++      return reply.send(passThrough);
++
++    } catch (error) {
++      fastify.log.error(error, 'Bulk download failed');
++      throw fastify.httpErrors.internalServerError('Bulk download failed');
++    }
++  });
++
++  // Bulk delete files
++  fastify.delete<{
++    Body: z.infer<typeof bulkDeleteSchema>;
++  }>('/files/bulk/delete', {
++    schema: {
++      body: bulkDeleteSchema,
++    },
++    preHandler: fastify.authenticate,
++  }, async (request: FastifyRequest, reply: FastifyReply) => {
++    const { fileIds } = request.body as z.infer<typeof bulkDeleteSchema>;
++
++    try {
++      const results = await Promise.allSettled(
++        fileIds.map(fileId => fastify.zephyrfs.deleteFile(fileId))
++      );
++
++      // Count successes and failures
++      const successful = results.filter(r => r.status === 'fulfilled').length;
++      const failed = results.filter(r => r.status === 'rejected').length;
++
++      // Get details of failures
++      const failures = results
++        .map((result, index) => ({ result, fileId: fileIds[index] }))
++        .filter(({ result }) => result.status === 'rejected')
++        .map(({ result, fileId }) => ({
++          fileId,
++          error: (result as PromiseRejectedResult).reason?.message || 'Unknown error'
++        }));
++
++      return {
++        success: true,
++        summary: {
++          total: fileIds.length,
++          successful,
++          failed,
++        },
++        failures: failed > 0 ? failures : undefined,
++      };
++
++    } catch (error) {
++      fastify.log.error(error, 'Bulk delete failed');
++      throw fastify.httpErrors.internalServerError('Bulk delete failed');
++    }
++  });
++
++  // Bulk move files
++  fastify.post<{
++    Body: z.infer<typeof bulkMoveSchema>;
++  }>('/files/bulk/move', {
++    schema: {
++      body: bulkMoveSchema,
++    },
++    preHandler: fastify.authenticate,
++  }, async (request: FastifyRequest, reply: FastifyReply) => {
++    const { fileIds, targetPath } = request.body as z.infer<typeof bulkMoveSchema>;
++
++    try {
++      // For now, return not implemented since file moving requires
++      // proper implementation in the ZephyrFS core
++      throw fastify.httpErrors.notImplemented('Bulk move is not yet implemented');
++
++    } catch (error) {
++      fastify.log.error(error, 'Bulk move failed');
++      if (error.statusCode) {
++        throw error;
++      }
++      throw fastify.httpErrors.internalServerError('Bulk move failed');
++    }
++  });
++
++  // Get bulk operation status
++  fastify.get<{
++    Params: { operationId: string };
++  }>('/files/bulk/status/:operationId', {
++    preHandler: fastify.authenticate,
++  }, async (request: FastifyRequest, reply: FastifyReply) => {
++    const { operationId } = request.params as { operationId: string };
++
++    try {
++      // For now, return not implemented since this would require
++      // background job tracking
++      throw fastify.httpErrors.notImplemented('Bulk operation status tracking is not yet implemented');
++
++    } catch (error) {
++      fastify.log.error(error, 'Failed to get bulk operation status');
++      if (error.statusCode) {
++        throw error;
++      }
++      throw fastify.httpErrors.internalServerError('Failed to get bulk operation status');
++    }
++  });
++}

server/src/routes/folders.tsadded

++import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
++import { z } from 'zod';
++
++const createFolderSchema = z.object({
++  name: z.string().min(1).max(255),
++  path: z.string().default('/'),
++  encrypted: z.boolean().optional().default(false),
++});
++
++const renameFolderSchema = z.object({
++  newName: z.string().min(1).max(255),
++});
++
++const moveFolderSchema = z.object({
++  sourcePath: z.string(),
++  targetPath: z.string(),
++});
++
++export async function foldersRoutes(fastify: FastifyInstance) {
++  // Create folder
++  fastify.post<{
++    Body: z.infer<typeof createFolderSchema>;
++  }>('/files/folder', {
++    schema: {
++      body: createFolderSchema,
++    },
++    preHandler: fastify.authenticate,
++  }, async (request: FastifyRequest, reply: FastifyReply) => {
++    const { name, path, encrypted } = request.body as z.infer<typeof createFolderSchema>;
++
++    try {
++      // Validate folder name
++      const invalidChars = /[<>:"/\\|?*\x00-\x1f]/;
++      if (invalidChars.test(name)) {
++        throw fastify.httpErrors.badRequest('Folder name contains invalid characters');
++      }
++
++      // Check for reserved names
++      const reservedNames = ['CON', 'PRN', 'AUX', 'NUL', 'COM1', 'COM2', 'COM3', 'COM4', 'COM5', 'COM6', 'COM7', 'COM8', 'COM9', 'LPT1', 'LPT2', 'LPT3', 'LPT4', 'LPT5', 'LPT6', 'LPT7', 'LPT8', 'LPT9'];
++      if (reservedNames.includes(name.toUpperCase())) {
++        throw fastify.httpErrors.badRequest('This folder name is reserved');
++      }
++
++      // Trim and validate
++      const folderName = name.trim();
++      if (!folderName || folderName.startsWith('.') || folderName.endsWith('.')) {
++        throw fastify.httpErrors.badRequest('Invalid folder name');
++      }
++
++      // Check if folder already exists
++      try {
++        const listing = await fastify.zephyrfs.listFiles(path);
++        const existingFolder = listing.files.find(f => f.name === folderName && f.type === 'directory');
++        if (existingFolder) {
++          throw fastify.httpErrors.conflict('Folder already exists');
++        }
++      } catch (error) {
++        // If listing fails, the parent directory doesn't exist
++        if (error.statusCode === 404) {
++          throw fastify.httpErrors.notFound('Parent directory does not exist');
++        }
++        throw error;
++      }
++
++      // Create folder by creating a marker file (since most storage systems don't support empty directories)
++      const folderPath = path === '/' ? `/${folderName}` : `${path}/${folderName}`;
++      const markerFileName = '.zephyrfs_folder_marker';
++      const markerContent = JSON.stringify({
++        type: 'directory',
++        name: folderName,
++        created: new Date().toISOString(),
++        encrypted: encrypted,
++      });
++
++      const markerBuffer = Buffer.from(markerContent, 'utf-8');
++      await fastify.zephyrfs.uploadFile(folderPath, markerFileName, markerBuffer, {
++        encrypted: false, // Marker files are always unencrypted for metadata
++      });
++
++      return {
++        success: true,
++        path: folderPath,
++        name: folderName,
++        encrypted: encrypted,
++      };
++    } catch (error) {
++      fastify.log.error(error, 'Failed to create folder');
++      if (error.statusCode) {
++        throw error;
++      }
++      throw fastify.httpErrors.internalServerError('Failed to create folder');
++    }
++  });
++
++  // Rename folder
++  fastify.patch<{
++    Params: { path: string };
++    Body: z.infer<typeof renameFolderSchema>;
++  }>('/files/folder/:path(*)', {
++    schema: {
++      body: renameFolderSchema,
++    },
++    preHandler: fastify.authenticate,
++  }, async (request: FastifyRequest, reply: FastifyReply) => {
++    const folderPath = '/' + (request.params as any).path;
++    const { newName } = request.body as z.infer<typeof renameFolderSchema>;
++
++    try {
++      // Validate new name
++      const invalidChars = /[<>:"/\\|?*\x00-\x1f]/;
++      if (invalidChars.test(newName)) {
++        throw fastify.httpErrors.badRequest('Folder name contains invalid characters');
++      }
++
++      const trimmedName = newName.trim();
++      if (!trimmedName || trimmedName.startsWith('.') || trimmedName.endsWith('.')) {
++        throw fastify.httpErrors.badRequest('Invalid folder name');
++      }
++
++      // Get parent path
++      const pathParts = folderPath.split('/').filter(Boolean);
++      const parentPath = pathParts.length > 1 ? '/' + pathParts.slice(0, -1).join('/') : '/';
++
++      // Check if target name already exists
++      try {
++        const parentListing = await fastify.zephyrfs.listFiles(parentPath);
++        const existingItem = parentListing.files.find(f => f.name === trimmedName);
++        if (existingItem) {
++          throw fastify.httpErrors.conflict('An item with this name already exists');
++        }
++      } catch (error) {
++        if (error.statusCode === 404) {
++          throw fastify.httpErrors.notFound('Parent directory does not exist');
++        }
++        throw error;
++      }
++
++      // For now, return not implemented since folder renaming requires moving all contained files
++      // This would need to be implemented in the ZephyrFS core with proper atomic operations
++      throw fastify.httpErrors.notImplemented('Folder renaming is not yet implemented');
++
++    } catch (error) {
++      fastify.log.error(error, 'Failed to rename folder');
++      if (error.statusCode) {
++        throw error;
++      }
++      throw fastify.httpErrors.internalServerError('Failed to rename folder');
++    }
++  });
++
++  // Move folder
++  fastify.post<{
++    Body: z.infer<typeof moveFolderSchema>;
++  }>('/files/folder/move', {
++    schema: {
++      body: moveFolderSchema,
++    },
++    preHandler: fastify.authenticate,
++  }, async (request: FastifyRequest, reply: FastifyReply) => {
++    const { sourcePath, targetPath } = request.body as z.infer<typeof moveFolderSchema>;
++
++    try {
++      // For now, return not implemented since folder moving requires atomic operations
++      // This would need to be implemented in the ZephyrFS core
++      throw fastify.httpErrors.notImplemented('Folder moving is not yet implemented');
++
++    } catch (error) {
++      fastify.log.error(error, 'Failed to move folder');
++      if (error.statusCode) {
++        throw error;
++      }
++      throw fastify.httpErrors.internalServerError('Failed to move folder');
++    }
++  });
++
++  // Delete empty folder
++  fastify.delete<{
++    Params: { path: string };
++  }>('/files/folder/:path(*)', {
++    preHandler: fastify.authenticate,
++  }, async (request: FastifyRequest, reply: FastifyReply) => {
++    const folderPath = '/' + (request.params as any).path;
++
++    try {
++      // Check if folder exists and is empty
++      const listing = await fastify.zephyrfs.listFiles(folderPath);
++
++      // Filter out the marker file
++      const realFiles = listing.files.filter(f => f.name !== '.zephyrfs_folder_marker');
++
++      if (realFiles.length > 0) {
++        throw fastify.httpErrors.badRequest('Folder is not empty');
++      }
++
++      // Delete the marker file
++      const markerFile = listing.files.find(f => f.name === '.zephyrfs_folder_marker');
++      if (markerFile) {
++        await fastify.zephyrfs.deleteFile(markerFile.id);
++      }
++
++      return { success: true };
++
++    } catch (error) {
++      fastify.log.error(error, 'Failed to delete folder');
++      if (error.statusCode) {
++        throw error;
++      }
++      throw fastify.httpErrors.internalServerError('Failed to delete folder');
++    }
++  });
++}

server/src/routes/index.tsmodified

  import { statusRoutes } from './status.js';
  import { authRoutes } from './auth.js';
  import { webdavRoutes } from './webdav.js';
++import { foldersRoutes } from './folders.js';
++import { bulkRoutes } from './bulk.js';
  export async function registerRoutes(fastify: FastifyInstance) {
    // Register all route modules
    await fastify.register(authRoutes);
    await fastify.register(filesRoutes);
++  await fastify.register(foldersRoutes);
++  await fastify.register(bulkRoutes);
    await fastify.register(statusRoutes);
    await fastify.register(webdavRoutes);