refactor: standardize design

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

src/components/FilesInfoPanel.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-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, formatDate } from '@/utils/fileHelpers'
 
 const props = defineProps<{
-  selectedItems: (FileCollectionObject | FileEntityObject)[]
+  selectedItems: (CollectionObject | EntityObject)[]
 }>()
 
 const emit = defineEmits<{
@@ -17,15 +17,15 @@ const singleSelection = computed(() => props.selectedItems.length === 1)
 const selectedItem = computed(() => props.selectedItems[0] ?? null)
 
 const isCollection = computed(() => 
-  selectedItem.value?.['@type'] === 'files.collection'
+  selectedItem.value instanceof CollectionObject
 )
 
 const isEntity = computed(() => 
-  selectedItem.value?.['@type'] === 'files.entity'
+  selectedItem.value instanceof EntityObject
 )
 
 const entity = computed(() => 
-  isEntity.value ? selectedItem.value as FileEntityObject : null
+  isEntity.value ? selectedItem.value as EntityObject : null
 )
 
 // Computed display values
@@ -43,8 +43,8 @@ const itemIconColor = computed(() => {
 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)
+    if (item instanceof EntityObject) {
+      return sum + (item.properties.size || 0)
     }
     return sum
   }, 0)
@@ -54,7 +54,7 @@ const totalSize = computed(() => {
 <template>
   <v-navigation-drawer
     :model-value="hasSelection"
-    :key="selectedItems.map(i => i.id).join(',')"
+    :key="selectedItems.map(i => String(i.identifier)).join(',')"
     location="right"
     width="320"
     temporary
@@ -78,9 +78,9 @@ const totalSize = computed(() => {
         <!-- 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-h6 mt-2 text-truncate">{{ selectedItem.properties.label || String(selectedItem.identifier ?? '') }}</div>
           <div class="text-caption text-grey">
-            {{ isCollection ? 'Folder' : entity?.mime || 'File' }}
+            {{ isCollection ? 'Folder' : entity?.properties.mime || 'File' }}
           </div>
         </div>
 
@@ -95,7 +95,7 @@ const totalSize = computed(() => {
             </template>
             <v-list-item-title class="text-caption text-grey">Type</v-list-item-title>
             <v-list-item-subtitle>
-              {{ isCollection ? 'Folder' : (entity?.mime || 'Unknown') }}
+              {{ isCollection ? 'Folder' : (entity?.properties.mime || 'Unknown') }}
             </v-list-item-subtitle>
           </v-list-item>
 
@@ -105,25 +105,25 @@ const totalSize = computed(() => {
               <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-subtitle>{{ formatSize(entity.properties.size) }}</v-list-item-subtitle>
           </v-list-item>
 
           <!-- Created -->
-          <v-list-item v-if="selectedItem.createdOn">
+          <v-list-item v-if="selectedItem.created">
             <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-subtitle>{{ formatDate(selectedItem.created) }}</v-list-item-subtitle>
           </v-list-item>
 
           <!-- Modified -->
-          <v-list-item v-if="selectedItem.modifiedOn">
+          <v-list-item v-if="selectedItem.modified">
             <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-subtitle>{{ formatDate(selectedItem.modified) }}</v-list-item-subtitle>
           </v-list-item>
 
           <!-- ID -->
@@ -133,7 +133,7 @@ const totalSize = computed(() => {
             </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 }}
+              {{ selectedItem.identifier }}
             </v-list-item-subtitle>
           </v-list-item>
         </v-list>
@@ -165,8 +165,8 @@ const totalSize = computed(() => {
             </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
+              {{ selectedItems.filter(i => i instanceof CollectionObject).length }} folders,
+              {{ selectedItems.filter(i => i instanceof EntityObject).length }} files
             </v-list-item-subtitle>
           </v-list-item>
         </v-list>