directory entries show created at date

backend/src/lib/domain/file_system/models/file.rs

@@ -9,14 +9,21 @@ pub struct File {
     name: FileName,
     file_type: FileType,
     mime_type: Option<FileMimeType>,
+    created_at: u64,
 }
 
 impl File {
-    pub fn new(name: FileName, file_type: FileType, mime_type: Option<FileMimeType>) -> Self {
+    pub fn new(
+        name: FileName,
+        file_type: FileType,
+        mime_type: Option<FileMimeType>,
+        created_at: u64,
+    ) -> Self {
         Self {
             name,
             file_type,
             mime_type,
+            created_at,
         }
     }
 
@@ -31,6 +38,10 @@ impl File {
     pub fn mime_type(&self) -> Option<&FileMimeType> {
         self.mime_type.as_ref()
     }
+
+    pub fn created_at(&self) -> u64 {
+        self.created_at
+    }
 }
 
 /// A valid file name

backend/src/lib/inbound/http/handlers/warrens/list_warren_files.rs

@@ -68,6 +68,7 @@ pub struct WarrenFileElement {
     name: String,
     file_type: FileType,
     mime_type: Option<String>,
+    created_at: u64,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq, Serialize)]
@@ -82,6 +83,7 @@ impl From<File> for WarrenFileElement {
             name: value.name().to_string(),
             file_type: value.file_type().to_owned(),
             mime_type: value.mime_type().map(FileMimeType::to_string),
+            created_at: value.created_at(),
         }
     }
 }

backend/src/lib/outbound/file_system.rs

@@ -1,3 +1,5 @@
+use std::time::UNIX_EPOCH;
+
 use anyhow::{Context, anyhow};
 use tokio::{fs, io::AsyncWriteExt as _};
 
@@ -67,13 +69,20 @@ impl FileSystem {
                     continue;
                 }
             };
+            let metadata = entry.metadata().await?;
+            let created_at = metadata.created()?.duration_since(UNIX_EPOCH)?.as_secs();
 
             let mime_type = match file_type {
                 FileType::File => FileMimeType::from_name(&name),
                 _ => None,
             };
 
-            files.push(File::new(FileName::new(&name)?, file_type, mime_type));
+            files.push(File::new(
+                FileName::new(&name)?,
+                file_type,
+                mime_type,
+                created_at,
+            ));
         }
 
         Ok(files)

frontend/components/DirectoryEntry.vue

@@ -7,6 +7,7 @@ import {
 } from '@/components/ui/context-menu';
 import { deleteWarrenDirectory, deleteWarrenFile } from '~/lib/api/warrens';
 import type { DirectoryEntry } from '~/types';
+import { buttonVariants } from '@/components/ui/button';
 
 const route = useRoute();
 const warrenRoute = useWarrenRoute();
@@ -37,22 +38,27 @@ async function submitDelete(force: boolean = false) {
             <NuxtLink
                 :to="joinPaths(route.path, entry.name)"
                 :class="[
-                    'select-none',
+                    'flex flex-row gap-4 bg-accent/30 border-1 border-border px-4 py-2 rounded-md select-none w-52',
                     {
                         'pointer-events-none':
                             disabled || entry.fileType === 'file',
                     },
                 ]"
             >
-                <Button
-                    class="w-44 h-12"
-                    variant="outline"
-                    size="lg"
-                    :disabled="disabled"
+                <div class="flex flex-row items-center">
+                    <Icon class="size-6" :name="getFileIcon(entry.mimeType)" />
+                </div>
+
+                <div
+                    class="flex flex-col gap-0 leading-6 overflow-hidden truncate"
                 >
-                    <Icon :name="getFileIcon(entry.mimeType)" />
-                    <span class="truncate">{{ entry.name }}</span>
-                </Button>
+                    <span>{{ entry.name }}</span>
+                    <NuxtTime
+                        :datetime="entry.createdAt * 1000"
+                        class="text-muted-foreground text-sm"
+                        relative
+                    ></NuxtTime>
+                </div>
             </NuxtLink>
         </ContextMenuTrigger>
         <ContextMenuContent>

frontend/types/index.ts

@@ -9,6 +9,8 @@ export type DirectoryEntry = {
     name: string;
     fileType: FileType;
     mimeType: string | null;
+    /// Timestamp in seconds
+    createdAt: number;
 };
 
 export type UploadStatus =