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>

src/components/views/FilesGridView.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+import { getFileIcon, formatSize } from '@/utils/fileHelpers'
+import { FileActionsMenu } from '@/components'
+
+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]
+}>()
+</script>
+
+<template>
+  <div class="files-grid pa-4">
+    <!-- Folders -->
+    <div
+      v-for="folder in collections"
+      :key="folder.id"
+      class="files-grid-item"
+      :class="{ selected: selectedIds.has(folder.id) }"
+      @click="emit('item-click', folder, $event)"
+    >
+      <div class="files-grid-item-actions">
+        <FileActionsMenu
+          :item="folder"
+          size="x-small"
+          button-class="action-btn"
+          @rename="emit('rename', $event)"
+          @delete="emit('delete', $event)"
+          @download="emit('download', $event)"
+          @show-details="emit('show-details', $event)"
+        />
+      </div>
+      <v-icon size="48" color="amber-darken-2">mdi-folder</v-icon>
+      <div class="files-grid-label">{{ folder.label }}</div>
+    </div>
+    
+    <!-- Files -->
+    <div
+      v-for="entity in entities"
+      :key="entity.id"
+      class="files-grid-item"
+      :class="{ selected: selectedIds.has(entity.id) }"
+      @click="emit('item-click', entity, $event)"
+    >
+      <div class="files-grid-item-actions">
+        <FileActionsMenu
+          :item="entity"
+          size="x-small"
+          button-class="action-btn"
+          @rename="emit('rename', $event)"
+          @delete="emit('delete', $event)"
+          @download="emit('download', $event)"
+          @show-details="emit('show-details', $event)"
+        />
+      </div>
+      <v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
+      <div class="files-grid-label">{{ entity.label }}</div>
+      <div class="files-grid-size">{{ formatSize(entity.size) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.files-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 16px;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 500px;
+}
+
+.files-grid-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  content-visibility: auto;
+  contain-intrinsic-size: 120px 120px;
+}
+
+.files-grid-item:hover {
+  background-color: rgb(var(--v-theme-surface-variant), 0.5);
+}
+
+.files-grid-item.selected {
+  background-color: rgb(var(--v-theme-primary), 0.12);
+}
+
+.files-grid-item-actions {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.files-grid-item:hover .files-grid-item-actions,
+.files-grid-item.selected .files-grid-item-actions {
+  opacity: 1;
+}
+
+.action-btn {
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.files-grid-label {
+  margin-top: 8px;
+  font-size: 13px;
+  text-align: center;
+  word-break: break-word;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.files-grid-size {
+  font-size: 11px;
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin-top: 2px;
+}
+
+@media (max-width: 600px) {
+  .files-grid {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 8px;
+  }
+}
+</style>

src/components/views/FilesListView.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { FileCollectionObject } from '@FileManager/models/collection'
+import { FileEntityObject } from '@FileManager/models/entity'
+import { getFileIcon, formatSize } 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>
+  <v-virtual-scroll
+    :items="allItems"
+    :item-height="56"
+    class="files-list-virtual pa-2"
+  >
+    <template #default="{ item: wrapped }">
+      <!-- Folder -->
+      <v-list-item
+        v-if="isCollection(wrapped)"
+        :active="selectedIds.has(wrapped.item.id)"
+        @click="($event: MouseEvent | KeyboardEvent) => emit('item-click', wrapped.item, $event)"
+      >
+        <template #prepend>
+          <v-icon color="amber-darken-2">mdi-folder</v-icon>
+        </template>
+        <v-list-item-title>{{ wrapped.item.label }}</v-list-item-title>
+        <template #append>
+          <FileActionsMenu
+            :item="wrapped.item"
+            @rename="emit('rename', $event)"
+            @delete="emit('delete', $event)"
+            @download="emit('download', $event)"
+            @show-details="emit('show-details', $event)"
+          />
+        </template>
+      </v-list-item>
+      
+      <!-- File -->
+      <v-list-item
+        v-else
+        :active="selectedIds.has(wrapped.item.id)"
+        @click="($event: MouseEvent | KeyboardEvent) => emit('item-click', wrapped.item, $event)"
+      >
+        <template #prepend>
+          <v-icon color="grey">{{ getFileIcon(wrapped.item as FileEntityObject) }}</v-icon>
+        </template>
+        <v-list-item-title>{{ wrapped.item.label }}</v-list-item-title>
+        <v-list-item-subtitle>{{ formatSize((wrapped.item as FileEntityObject).size) }}</v-list-item-subtitle>
+        <template #append>
+          <FileActionsMenu
+            :item="wrapped.item"
+            @rename="emit('rename', $event)"
+            @delete="emit('delete', $event)"
+            @download="emit('download', $event)"
+            @show-details="emit('show-details', $event)"
+          />
+        </template>
+      </v-list-item>
+    </template>
+  </v-virtual-scroll>
+</template>
+
+<style scoped>
+.files-list-virtual {
+  height: 100%;
+}
+</style>

src/components/views/index.ts

@@ -0,0 +1,3 @@
+export { default as FilesGridView } from './FilesGridView.vue'
+export { default as FilesListView } from './FilesListView.vue'
+export { default as FilesDetailsView } from './FilesDetailsView.vue'