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>