Initial commit

src/components/views/FilesDetailsView.vue

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