better file previews

backend/Cargo.lock

@@ -1960,6 +1960,7 @@ dependencies = [
  "dotenv",
  "env_logger",
  "log",
+ "mime_guess",
  "serde",
  "serde_json",
  "sqlx",

backend/Cargo.toml

@@ -8,6 +8,7 @@ axum = { version = "0.8.4", features = ["multipart", "query"] }
 dotenv = "0.15.0"
 env_logger = "0.11.8"
 log = "0.4.27"
+mime_guess = "2.0.5"
 serde = { version = "1.0.219", features = ["derive"] }
 serde_json = "1.0.140"
 sqlx = { version = "0.8.6", features = ["postgres", "runtime-tokio", "uuid"] }

backend/src/fs/mod.rs

@@ -5,7 +5,7 @@ pub use file::*;
 
 use serde::{Deserialize, Serialize};
 
-#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub enum FileType {
     File,
@@ -17,10 +17,22 @@ pub enum FileType {
 pub struct DirectoryEntry {
     name: String,
     file_type: FileType,
+    mime_type: Option<String>,
 }
 
 impl DirectoryEntry {
     pub fn new(name: String, file_type: FileType) -> Self {
-        Self { name, file_type }
+        let mime_type = match name.split("/").last() {
+            Some(last) if last.contains(".") => {
+                mime_guess::from_path(&name).first_raw().map(str::to_owned)
+            }
+            _ => None,
+        };
+
+        Self {
+            name,
+            file_type,
+            mime_type,
+        }
     }
 }

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<{
+const { entry, disabled } = defineProps<{
-    name: string;
+    entry: DirectoryEntry;
-    fileType: FileType;
     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" />
+                    <Icon :name="getFileIcon(entry.mimeType)" />
-                    <span class="truncate">{{ name }}</span>
+                    <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"
+                :entry="entry"
-                :file-type="entry.fileType"
                 :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">
+        <div
-            <Icon
+            :class="[
-                v-if="file.status === 'not_uploaded'"
+                'rounded-md border overflow-hidden w-12 h-12 min-w-12 min-h-12 items-center justify-center flex',
-                class="h-5 w-5"
+                { 'p-2': !file.data.type.startsWith('image/') },
-                :name="getFileIcon(file.data.type)"
+            ]"
-            />
+        >
+            <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"

frontend/types/index.ts

@@ -8,6 +8,7 @@ export type BreadcrumbData = {
 export type DirectoryEntry = {
     name: string;
     fileType: FileType;
+    mimeType: string | null;
 };
 
 export type UploadStatus =

frontend/utils/icons.ts

@@ -1,28 +1,41 @@
-export function getFileIcon(fileType: string) {
+export function getFileIcon(mimeType: string | null) {
-    if (fileType.startsWith('image/')) {
+    if (mimeType == null) {
+        return 'lucide:folder';
+    }
+
+    if (mimeType.startsWith('image/')) {
         return 'lucide:file-image';
     }
 
-    if (fileType.startsWith('video/')) {
+    if (mimeType.startsWith('video/')) {
         return 'lucide:file-video-2';
     }
 
-    if (fileType.startsWith('audio/')) {
+    if (mimeType.startsWith('audio/')) {
         return 'lucide:file-audio-2';
     }
 
-    if (fileType.startsWith('application/')) {
+    if (mimeType.startsWith('application/')) {
-        if (fileType === 'application/x-msdownload') {
+        if (mimeType === 'application/x-msdownload') {
             return 'lucide:file-box';
         }
-        if (fileType === 'application/json') {
+        if (mimeType === 'application/json') {
             return 'lucide:file-json';
         }
-        if (fileType === 'application/pdf') {
+        if (mimeType === 'application/pdf') {
+            return 'lucide:file-text';
+        }
+        if (mimeType === 'application/zip') {
+            return 'lucide:file-archive';
+        }
+        if (
+            mimeType === 'application/epub+zip' ||
+            mimeType === 'application/x-mobipocket-ebook'
+        ) {
             return 'lucide:file-text';
         }
     }
-    if (fileType === 'text/html') {
+    if (mimeType === 'text/html') {
         return 'lucide:file-code';
     }