feat: implement image preview

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

src/components/FilesInfoPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { VNavigationDrawer } from 'vuetify/components'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
@@ -8,8 +8,10 @@ import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
 const props = withDefaults(defineProps<{
   selectedItems: (CollectionObject | EntityObject)[]
   embedded?: boolean
+  previewUrl?: string | null
 }>(), {
   embedded: false,
+  previewUrl: null,
 })
 
 const emit = defineEmits<{
@@ -69,6 +71,13 @@ const totalSize = computed(() => {
     return sum
   }, 0)
 })
+
+const previewFailed = ref(false)
+const showPreview = computed(() => isEntity.value && !!props.previewUrl && !previewFailed.value)
+
+watch(() => props.previewUrl, () => {
+  previewFailed.value = false
+})
 </script>
 
 <template>
@@ -94,9 +103,24 @@ const totalSize = computed(() => {
 
       <!-- Single item selected -->
       <template v-if="singleSelection && selectedItem">
-        <!-- Icon and name -->
+        <!-- Preview/icon and name -->
         <div class="text-center mb-4">
-          <v-icon :color="itemIconColor" size="64">{{ itemIcon }}</v-icon>
+          <div v-if="showPreview" class="files-info-preview mb-3">
+            <v-img
+              :src="previewUrl!"
+              :alt="selectedItem.properties.label || 'File preview'"
+              aspect-ratio="1.45"
+              cover
+              @error="previewFailed = true"
+            >
+              <template #placeholder>
+                <div class="d-flex fill-height align-center justify-center">
+                  <v-progress-circular indeterminate color="primary" size="28" width="2" />
+                </div>
+              </template>
+            </v-img>
+          </div>
+          <v-icon v-else :color="itemIconColor" size="64">{{ itemIcon }}</v-icon>
           <div class="text-h6 mt-2 text-truncate">{{ selectedItem.properties.label || String(selectedItem.identifier ?? '') }}</div>
           <div class="text-caption text-grey">
             {{ isCollection ? 'Folder' : entity?.properties.mime || 'File' }}
@@ -205,4 +229,11 @@ const totalSize = computed(() => {
   overflow-y: auto;
   background-color: rgb(var(--v-theme-surface));
 }
+
+.files-info-preview {
+  overflow: hidden;
+  border: 1px solid rgb(var(--v-border-color));
+  border-radius: 8px;
+  background-color: rgb(var(--v-theme-surface-variant));
+}
 </style>

src/components/views/FilesGridView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { reactive } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
@@ -7,13 +8,30 @@ import FilePreviewPopover from '@/components/viewer/FilePreviewPopover.vue'
 
 type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
 
-defineProps<{
+const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
   previewSource?: PreviewSource
 }>()
 
+// Thumbnails only support the plain-URL form of PreviewSource (what Documents
+// actually passes); Blob/Promise results just fall back to the file icon.
+const thumbnailErrors = reactive(new Set<string>())
+
+function thumbnailUrl(entity: EntityObject): string | null {
+  if (!props.previewSource) return null
+  const result = props.previewSource({
+    id: String(entity.identifier ?? ''),
+    meta: { collection: entity.collection ? String(entity.collection) : null },
+  })
+  return typeof result === 'string' ? result : null
+}
+
+function markThumbnailFailed(id: string) {
+  thumbnailErrors.add(id)
+}
+
 const emit = defineEmits<{
   'item-click': [item: CollectionObject | EntityObject, event: MouseEvent | KeyboardEvent]
   'open': [item: CollectionObject | EntityObject]
@@ -74,7 +92,23 @@ const emit = defineEmits<{
           @show-details="emit('show-details', $event)"
         />
       </div>
-      <v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
+      <div class="files-grid-thumbnail">
+        <v-img
+          v-if="thumbnailUrl(entity) && !thumbnailErrors.has(String(entity.identifier))"
+          :src="thumbnailUrl(entity)!"
+          :alt="entity.properties.label || 'File preview'"
+          cover
+          class="files-grid-thumbnail-img"
+          @error="markThumbnailFailed(String(entity.identifier))"
+        >
+          <template #placeholder>
+            <div class="d-flex fill-height align-center justify-center">
+              <v-progress-circular indeterminate color="primary" size="20" width="2" />
+            </div>
+          </template>
+        </v-img>
+        <v-icon v-else size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
+      </div>
       <div class="files-grid-label">{{ entity.properties.label || String(entity.identifier ?? '') }}</div>
       <div class="files-grid-size">{{ formatSize(entity.properties.size) }}</div>
 
@@ -136,6 +170,22 @@ const emit = defineEmits<{
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
+.files-grid-thumbnail {
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: rgb(var(--v-theme-surface-variant), 0.4);
+}
+
+.files-grid-thumbnail-img {
+  width: 100%;
+  height: 100%;
+}
+
 .files-grid-label {
   margin-top: 8px;
   font-size: 13px;

src/pages/Main.vue

@@ -132,6 +132,19 @@ function resolveViewerSource(item: ViewerItem): string {
   return documentManager.getEntityUrl(item.id, (item.meta?.collection as string | null) ?? null)
 }
 
+function resolvePreviewSource(item: ViewerItem): string {
+  return documentManager.getEntityPreviewUrl(item.id, (item.meta?.collection as string | null) ?? null)
+}
+
+// Preview shown in the info panel sidebar for the current single selection
+const infoPanelPreviewUrl = computed<string | null>(() => {
+  const items = selection.selectedNodeArray.value
+  if (items.length !== 1) return null
+  const item = items[0]
+  if (!(item instanceof EntityObject)) return null
+  return documentManager.getEntityPreviewUrl(nodeId(item), item.collection ? String(item.collection) : null)
+})
+
 function downloadViewerItem(item: ViewerItem): void {
   documentManager.downloadEntity(item.id, (item.meta?.collection as string | null) ?? null)
 }
@@ -782,7 +795,7 @@ onMounted(async () => {
                 :collections="sortedItems.collections"
                 :entities="sortedItems.entities"
                 :selected-ids="selectedIds"
-                :preview-source="resolveViewerSource"
+                :preview-source="resolvePreviewSource"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -798,7 +811,7 @@ onMounted(async () => {
                 :collections="sortedItems.collections"
                 :entities="sortedItems.entities"
                 :selected-ids="selectedIds"
-                :preview-source="resolveViewerSource"
+                :preview-source="resolvePreviewSource"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -814,7 +827,7 @@ onMounted(async () => {
                 :collections="sortedItems.collections"
                 :entities="sortedItems.entities"
                 :selected-ids="selectedIds"
-                :preview-source="resolveViewerSource"
+                :preview-source="resolvePreviewSource"
                 @item-click="handleItemClick"
                 @open="handleOpenItem"
                 @edit="handleEditItem"
@@ -830,6 +843,7 @@ onMounted(async () => {
             v-if="hasSelection && !isMobile"
             embedded
             :selected-items="selection.selectedNodeArray.value"
+            :preview-url="infoPanelPreviewUrl"
             @close="selection.clear()"
           />
         </div>
@@ -838,6 +852,7 @@ onMounted(async () => {
       <FilesInfoPanel
         v-if="isMobile"
         :selected-items="selection.selectedNodeArray.value"
+        :preview-url="infoPanelPreviewUrl"
         @close="selection.clear()"
       />
     </div>