From b0628fe0bdebca6b327231253475fbb18b9027a1 Mon Sep 17 00:00:00 2001
From: 409 <409dev@protonmail.com>
Date: Sun, 13 Jul 2025 13:33:14 +0200
Subject: [PATCH] better file previews

---
 backend/Cargo.lock                            |  1 +
 backend/Cargo.toml                            |  1 +
 backend/src/fs/mod.rs                         | 16 ++++++++--
 frontend/components/DirectoryEntry.vue        | 18 +++++------
 frontend/components/DirectoryList.vue         |  3 +-
 frontend/components/actions/UploadDialog.vue  |  3 +-
 .../components/actions/UploadListEntry.vue    | 30 +++++++++++++-----
 frontend/types/index.ts                       |  1 +
 frontend/utils/icons.ts                       | 31 +++++++++++++------
 9 files changed, 71 insertions(+), 33 deletions(-)

diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index 5ebcbb9..52cc20b 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -1960,6 +1960,7 @@ dependencies = [
  "dotenv",
  "env_logger",
  "log",
+ "mime_guess",
  "serde",
  "serde_json",
  "sqlx",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index d5eab92..8585b29 100644
--- a/backend/Cargo.toml
+++ b/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"] }
diff --git a/backend/src/fs/mod.rs b/backend/src/fs/mod.rs
index f5381d4..ca3b4ca 100644
--- a/backend/src/fs/mod.rs
+++ b/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,
+        }
     }
 }
diff --git a/frontend/components/DirectoryEntry.vue b/frontend/components/DirectoryEntry.vue
index 7ccefdd..d99e0aa 100644
--- a/frontend/components/DirectoryEntry.vue
+++ b/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>
diff --git a/frontend/components/DirectoryList.vue b/frontend/components/DirectoryList.vue
index d0af4fc..b1df74d 100644
--- a/frontend/components/DirectoryList.vue
+++ b/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>
diff --git a/frontend/components/actions/UploadDialog.vue b/frontend/components/actions/UploadDialog.vue
index f917935..dfe2eb2 100644
--- a/frontend/components/actions/UploadDialog.vue
+++ b/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>
diff --git a/frontend/components/actions/UploadListEntry.vue b/frontend/components/actions/UploadListEntry.vue
index f1bcb29..098c329 100644
--- a/frontend/components/actions/UploadListEntry.vue
+++ b/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"
diff --git a/frontend/types/index.ts b/frontend/types/index.ts
index 131aae0..f759455 100644
--- a/frontend/types/index.ts
+++ b/frontend/types/index.ts
@@ -8,6 +8,7 @@ export type BreadcrumbData = {
 export type DirectoryEntry = {
     name: string;
     fileType: FileType;
+    mimeType: string | null;
 };
 
 export type UploadStatus =
diff --git a/frontend/utils/icons.ts b/frontend/utils/icons.ts
index 365d46e..1d91b19 100644
--- a/frontend/utils/icons.ts
+++ b/frontend/utils/icons.ts
@@ -1,28 +1,41 @@
-export function getFileIcon(fileType: string) {
-    if (fileType.startsWith('image/')) {
+export function getFileIcon(mimeType: string | null) {
+    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 (fileType === 'application/x-msdownload') {
+    if (mimeType.startsWith('application/')) {
+        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';
     }