documents/src/components/views/FilesDetailsView.vue

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

type ItemWithType = {
  item: FileCollectionObject | FileEntityObject
  type: 'collection' | 'entity'
}

const props = defineProps<{
  collections: FileCollectionObject[]
  entities: FileEntityObject[]
  selectedIds: Set<string>
}>()

const emit = defineEmits<{
  'item-click': [item: FileCollectionObject | FileEntityObject, event: MouseEvent | KeyboardEvent]
  'rename': [item: FileCollectionObject | FileEntityObject]
  'delete': [item: FileCollectionObject | FileEntityObject]
  'download': [item: FileCollectionObject | FileEntityObject]
  'show-details': [item: FileCollectionObject | FileEntityObject]
}>()

// Combine collections and entities into a single list for virtual scrolling
const allItems = computed<ItemWithType[]>(() => [
  ...props.collections.map(c => ({ item: c, type: 'collection' as const })),
  ...props.entities.map(e => ({ item: e, type: 'entity' as const }))
])

function isCollection(wrapped: ItemWithType): wrapped is { item: FileCollectionObject; type: 'collection' } {
  return wrapped.type === 'collection'
}
</script>

<template>
  <div class="files-details-view mx-4">
    <!-- Header -->
    <div class="files-details-header">
      <div class="files-details-cell files-details-name">Name</div>
      <div class="files-details-cell files-details-size">Size</div>
      <div class="files-details-cell files-details-modified">Modified</div>
      <div class="files-details-cell files-details-actions"></div>
    </div>
    
    <!-- Virtual scrolling rows -->
    <v-virtual-scroll
      :items="allItems"
      :item-height="48"
      class="files-details-body"
    >
      <template #default="{ item: wrapped }">
        <!-- Folder row -->
        <div
          v-if="isCollection(wrapped)"
          class="files-details-row"
          :class="{ 'files-details-row--selected': selectedIds.has(wrapped.item.id) }"
          @click="emit('item-click', wrapped.item, $event)"
        >
          <div class="files-details-cell files-details-name">
            <v-icon color="amber-darken-2" size="small" class="mr-2">mdi-folder</v-icon>
            {{ wrapped.item.label }}
          </div>
          <div class="files-details-cell files-details-size">—</div>
          <div class="files-details-cell files-details-modified">{{ formatDate(wrapped.item.modifiedOn) }}</div>
          <div class="files-details-cell files-details-actions">
            <FileActionsMenu
              :item="wrapped.item"
              @rename="emit('rename', $event)"
              @delete="emit('delete', $event)"
              @download="emit('download', $event)"
              @show-details="emit('show-details', $event)"
            />
          </div>
        </div>
        
        <!-- File row -->
        <div
          v-else
          class="files-details-row"
          :class="{ 'files-details-row--selected': selectedIds.has(wrapped.item.id) }"
          @click="emit('item-click', wrapped.item, $event)"
        >
          <div class="files-details-cell files-details-name">
            <v-icon color="grey" size="small" class="mr-2">{{ getFileIcon(wrapped.item as FileEntityObject) }}</v-icon>
            {{ wrapped.item.label }}
          </div>
          <div class="files-details-cell files-details-size">{{ formatSize((wrapped.item as FileEntityObject).size) }}</div>
          <div class="files-details-cell files-details-modified">{{ formatDate(wrapped.item.modifiedOn) }}</div>
          <div class="files-details-cell files-details-actions">
            <FileActionsMenu
              :item="wrapped.item"
              @rename="emit('rename', $event)"
              @delete="emit('delete', $event)"
              @download="emit('download', $event)"
              @show-details="emit('show-details', $event)"
            />
          </div>
        </div>
      </template>
    </v-virtual-scroll>
  </div>
</template>

<style scoped>
.files-details-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.files-details-header {
  display: flex;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid rgb(var(--v-border-color));
  font-weight: 500;
  font-size: 13px;
  color: rgb(var(--v-theme-on-surface-variant));
  flex-shrink: 0;
}

.files-details-body {
  flex: 1;
  overflow-y: auto;
}

.files-details-row {
  display: flex;
  align-items: center;
  height: 48px;
  cursor: pointer;
  border-bottom: 1px solid rgb(var(--v-border-color), 0.5);
}

.files-details-row:hover {
  background-color: rgb(var(--v-theme-surface-variant), 0.3);
}

.files-details-row--selected {
  background-color: rgb(var(--v-theme-primary), 0.08);
}

.files-details-row--selected:hover {
  background-color: rgb(var(--v-theme-primary), 0.12);
}

.files-details-cell {
  padding: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.files-details-name {
  flex: 1;
  display: flex;
  align-items: center;
}

.files-details-size {
  width: 100px;
  text-align: right;
}

.files-details-modified {
  width: 160px;
}

.files-details-actions {
  width: 48px;
  text-align: center;
}
</style>