better file previews

frontend/components/DirectoryEntry.vue

@@ -6,26 +6,22 @@ import {
     ContextMenuItem,
 } from '@/components/ui/context-menu';
 import { deleteWarrenEntry } from '~/lib/api/warrens';
-import type { FileType } from '~/types';
+import type { DirectoryEntry } from '~/types';
 
 const route = useRoute();
 const warrenRoute = useWarrenRoute();
 
-const { name, fileType, disabled } = defineProps<{
-    name: string;
-    fileType: FileType;
+const { entry, disabled } = defineProps<{
+    entry: DirectoryEntry;
     disabled: boolean;
 }>();
 
-const iconName = computed(() =>
-    fileType === 'file' ? 'lucide:file' : 'lucide:folder'
-);
 const deleting = ref(false);
 
 async function submitDelete() {
     deleting.value = true;
 
-    await deleteWarrenEntry(warrenRoute.value, name, fileType);
+    await deleteWarrenEntry(warrenRoute.value, entry.name, entry.fileType);
 
     deleting.value = false;
 }
@@ -35,7 +31,7 @@ async function submitDelete() {
     <ContextMenu>
         <ContextMenuTrigger>
             <NuxtLink
-                :to="joinPaths(route.path, name)"
+                :to="joinPaths(route.path, entry.name)"
                 :class="['select-none', { 'pointer-events-none': disabled }]"
             >
                 <Button
@@ -44,8 +40,8 @@ async function submitDelete() {
                     size="lg"
                     :disabled="disabled"
                 >
-                    <Icon :name="iconName" />
-                    <span class="truncate">{{ name }}</span>
+                    <Icon :name="getFileIcon(entry.mimeType)" />
+                    <span class="truncate">{{ entry.name }}</span>
                 </Button>
             </NuxtLink>
         </ContextMenuTrigger>

frontend/components/DirectoryList.vue

@@ -18,8 +18,7 @@ const sortedEntries = computed(() =>
             <DirectoryEntry
                 v-for="entry in sortedEntries"
                 :key="entry.name"
-                :name="entry.name"
-                :file-type="entry.fileType"
+                :entry="entry"
                 :disabled="isLoading"
             />
         </div>

frontend/components/actions/UploadDialog.vue

@@ -216,14 +216,13 @@ async function submit() {
                     class="h-full w-full"
                 >
                     <div
-                        class="flex h-full w-full flex-col items-stretch gap-1 text-left p-2"
+                        class="flex h-full w-full flex-col items-stretch gap-2 text-left p-4"
                     >
                         <UploadListEntry
                             v-for="(file, i) in uploadStore.files"
                             :key="file.data.name"
                             :file="file"
                             :uploading="uploading"
-                            class="flex flex-row items-center justify-between gap-4 rounded-lg border px-4 py-2"
                             @remove-file="() => removeFile(i)"
                         />
                     </div>

frontend/components/actions/UploadListEntry.vue

@@ -8,18 +8,34 @@ const { file, uploading } = defineProps<{
     file: UploadFile;
     uploading: boolean;
 }>();
+
+function createObjectUrl(file: File): string {
+    return URL.createObjectURL(file);
+}
 </script>
 
 <template>
     <div
-        class="flex flex-row items-center justify-between gap-4 rounded-lg border px-4 py-2"
+        class="flex border rounded-lg flex-row items-center justify-between gap-4 px-3 py-3"
     >
-        <div class="rounded-sm border p-3">
-            <Icon
-                v-if="file.status === 'not_uploaded'"
-                class="h-5 w-5"
-                :name="getFileIcon(file.data.type)"
-            />
+        <div
+            :class="[
+                'rounded-md border overflow-hidden w-12 h-12 min-w-12 min-h-12 items-center justify-center flex',
+                { 'p-2': !file.data.type.startsWith('image/') },
+            ]"
+        >
+            <div v-if="file.status === 'not_uploaded'" class="w-full h-full">
+                <img
+                    v-if="file.data.type.startsWith('image/')"
+                    :src="createObjectUrl(file.data)"
+                    class="h-full w-full object-cover"
+                />
+                <Icon
+                    v-else
+                    class="h-5 w-5"
+                    :name="getFileIcon(file.data.type)"
+                />
+            </div>
             <Icon
                 v-else-if="file.status === 'uploading'"
                 class="h-5 w-5"