refactor: standardize design

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/views/FilesGridView.vue

@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import { FileCollectionObject } from '@FilesManager/models/collection'
-import { FileEntityObject } from '@FilesManager/models/entity'
+import { CollectionObject } from '@DocumentsManager/models/collection'
+import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
 import { FileActionsMenu } from '@/components'
 
 defineProps<{
-  collections: FileCollectionObject[]
-  entities: FileEntityObject[]
+  collections: CollectionObject[]
+  entities: EntityObject[]
   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]
+  'item-click': [item: CollectionObject | EntityObject, event: MouseEvent | KeyboardEvent]
+  'open': [item: CollectionObject | EntityObject]
+  'rename': [item: CollectionObject | EntityObject]
+  'delete': [item: CollectionObject | EntityObject]
+  'download': [item: CollectionObject | EntityObject]
+  'show-details': [item: CollectionObject | EntityObject]
 }>()
 </script>
 
@@ -24,9 +25,9 @@ const emit = defineEmits<{
     <!-- Folders -->
     <div
       v-for="folder in collections"
-      :key="folder.id"
+      :key="String(folder.identifier)"
       class="files-grid-item"
-      :class="{ selected: selectedIds.has(folder.id) }"
+      :class="{ selected: selectedIds.has(String(folder.identifier)) }"
       @click="emit('item-click', folder, $event)"
     >
       <div class="files-grid-item-actions">
@@ -34,6 +35,7 @@ const emit = defineEmits<{
           :item="folder"
           size="x-small"
           button-class="action-btn"
+          @open="emit('open', $event)"
           @rename="emit('rename', $event)"
           @delete="emit('delete', $event)"
           @download="emit('download', $event)"
@@ -41,22 +43,24 @@ const emit = defineEmits<{
         />
       </div>
       <v-icon size="48" color="amber-darken-2">mdi-folder</v-icon>
-      <div class="files-grid-label">{{ folder.label }}</div>
+      <div class="files-grid-label">{{ folder.properties.label || String(folder.identifier ?? '') }}</div>
     </div>
     
     <!-- Files -->
     <div
       v-for="entity in entities"
-      :key="entity.id"
+      :key="String(entity.identifier)"
       class="files-grid-item"
-      :class="{ selected: selectedIds.has(entity.id) }"
+      :class="{ selected: selectedIds.has(String(entity.identifier)) }"
       @click="emit('item-click', entity, $event)"
+      @dblclick.stop="emit('open', entity)"
     >
       <div class="files-grid-item-actions">
         <FileActionsMenu
           :item="entity"
           size="x-small"
           button-class="action-btn"
+          @open="emit('open', $event)"
           @rename="emit('rename', $event)"
           @delete="emit('delete', $event)"
           @download="emit('download', $event)"
@@ -64,8 +68,8 @@ const emit = defineEmits<{
         />
       </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 class="files-grid-label">{{ entity.properties.label || String(entity.identifier ?? '') }}</div>
+      <div class="files-grid-size">{{ formatSize(entity.properties.size) }}</div>
     </div>
   </div>
 </template>