documents/src/components/FilesInfoPanel.vue

<script setup lang="ts">
import { computed } from 'vue'
import { FileCollectionObject } from '@FilesManager/models/collection'
import { FileEntityObject } from '@FilesManager/models/entity'
import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'

const props = defineProps<{
  selectedItems: (FileCollectionObject | FileEntityObject)[]
}>()

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

const hasSelection = computed(() => props.selectedItems.length > 0)
const singleSelection = computed(() => props.selectedItems.length === 1)
const selectedItem = computed(() => props.selectedItems[0] ?? null)

const isCollection = computed(() => 
  selectedItem.value?.['@type'] === 'files.collection'
)

const isEntity = computed(() => 
  selectedItem.value?.['@type'] === 'files.entity'
)

const entity = computed(() => 
  isEntity.value ? selectedItem.value as FileEntityObject : null
)

// Computed display values
const itemIcon = computed(() => {
  if (!selectedItem.value) return 'mdi-file'
  if (isCollection.value) return 'mdi-folder'
  return getFileIcon(entity.value!)
})

const itemIconColor = computed(() => {
  if (isCollection.value) return 'amber-darken-2'
  return 'grey'
})

const totalSize = computed(() => {
  if (props.selectedItems.length === 0) return 0
  return props.selectedItems.reduce((sum, item) => {
    if (item['@type'] === 'files.entity') {
      return sum + ((item as FileEntityObject).size || 0)
    }
    return sum
  }, 0)
})
</script>

<template>
  <v-navigation-drawer
    :model-value="hasSelection"
    :key="selectedItems.map(i => i.id).join(',')"
    location="right"
    width="320"
    temporary
    class="files-info-panel"
  >
    <div class="pa-4">
      <!-- Header -->
      <div class="d-flex align-center mb-4">
        <span class="text-h6">Info</span>
        <v-spacer />
        <v-btn
          icon="mdi-close"
          size="small"
          variant="text"
          @click="emit('close')"
        />
      </div>

      <!-- Single item selected -->
      <template v-if="singleSelection && selectedItem">
        <!-- Icon and name -->
        <div class="text-center mb-4">
          <v-icon :color="itemIconColor" size="64">{{ itemIcon }}</v-icon>
          <div class="text-h6 mt-2 text-truncate">{{ selectedItem.label }}</div>
          <div class="text-caption text-grey">
            {{ isCollection ? 'Folder' : entity?.mime || 'File' }}
          </div>
        </div>

        <v-divider class="mb-4" />

        <!-- Details list -->
        <v-list density="compact" class="bg-transparent">
          <!-- Type -->
          <v-list-item>
            <template #prepend>
              <v-icon size="small" class="mr-3">mdi-tag-outline</v-icon>
            </template>
            <v-list-item-title class="text-caption text-grey">Type</v-list-item-title>
            <v-list-item-subtitle>
              {{ isCollection ? 'Folder' : (entity?.mime || 'Unknown') }}
            </v-list-item-subtitle>
          </v-list-item>

          <!-- Size (only for files) -->
          <v-list-item v-if="isEntity && entity">
            <template #prepend>
              <v-icon size="small" class="mr-3">mdi-harddisk</v-icon>
            </template>
            <v-list-item-title class="text-caption text-grey">Size</v-list-item-title>
            <v-list-item-subtitle>{{ formatSize(entity.size) }}</v-list-item-subtitle>
          </v-list-item>

          <!-- Created -->
          <v-list-item v-if="selectedItem.createdOn">
            <template #prepend>
              <v-icon size="small" class="mr-3">mdi-calendar-plus</v-icon>
            </template>
            <v-list-item-title class="text-caption text-grey">Created</v-list-item-title>
            <v-list-item-subtitle>{{ formatDate(selectedItem.createdOn) }}</v-list-item-subtitle>
          </v-list-item>

          <!-- Modified -->
          <v-list-item v-if="selectedItem.modifiedOn">
            <template #prepend>
              <v-icon size="small" class="mr-3">mdi-calendar-edit</v-icon>
            </template>
            <v-list-item-title class="text-caption text-grey">Modified</v-list-item-title>
            <v-list-item-subtitle>{{ formatDate(selectedItem.modifiedOn) }}</v-list-item-subtitle>
          </v-list-item>

          <!-- ID -->
          <v-list-item>
            <template #prepend>
              <v-icon size="small" class="mr-3">mdi-identifier</v-icon>
            </template>
            <v-list-item-title class="text-caption text-grey">ID</v-list-item-title>
            <v-list-item-subtitle class="text-truncate" style="font-family: monospace; font-size: 11px;">
              {{ selectedItem.id }}
            </v-list-item-subtitle>
          </v-list-item>
        </v-list>
      </template>

      <!-- Multiple items selected -->
      <template v-else-if="selectedItems.length > 1">
        <div class="text-center mb-4">
          <v-icon color="primary" size="64">mdi-checkbox-multiple-marked</v-icon>
          <div class="text-h6 mt-2">{{ selectedItems.length }} items selected</div>
        </div>

        <v-divider class="mb-4" />

        <v-list density="compact" class="bg-transparent">
          <!-- Total size -->
          <v-list-item>
            <template #prepend>
              <v-icon size="small" class="mr-3">mdi-harddisk</v-icon>
            </template>
            <v-list-item-title class="text-caption text-grey">Total Size</v-list-item-title>
            <v-list-item-subtitle>{{ formatSize(totalSize) }}</v-list-item-subtitle>
          </v-list-item>

          <!-- Item breakdown -->
          <v-list-item>
            <template #prepend>
              <v-icon size="small" class="mr-3">mdi-file-multiple</v-icon>
            </template>
            <v-list-item-title class="text-caption text-grey">Contents</v-list-item-title>
            <v-list-item-subtitle>
              {{ selectedItems.filter(i => i['@type'] === 'files.collection').length }} folders,
              {{ selectedItems.filter(i => i['@type'] === 'files.entity').length }} files
            </v-list-item-subtitle>
          </v-list-item>
        </v-list>
      </template>
    </div>
  </v-navigation-drawer>
</template>

<style scoped>
.files-info-panel {
  border-left: 1px solid rgb(var(--v-border-color)) !important;
}
</style>