`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 -->
 -          <button
 -            @click="$emit('upload')"
 -            class="btn btn-primary"
 -          >
 -            <ArrowUpTrayIcon class="w-4 h-4 mr-2" />
 -            Upload
 -          </button>
 +          <!-- Actions -->
 +          <div class="flex items-center space-x-2">
 +            <!-- Create folder button -->
 +            <button
 +              @click="showCreateFolder = true"
 +              class="btn btn-outline"
 +            >
 +              <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
 -  console.log('Bulk download not implemented yet')
 +  if (!hasSelection.value) return
++
 +  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);