show file sizes (basic version)

frontend/components/DirectoryBackEntry.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import byteSize from 'byte-size';
 import type { DirectoryEntry } from '~/shared/types';
 
 const { entry } = defineProps<{ entry: DirectoryEntry }>();
@@ -28,12 +29,9 @@ const onDrop = onDirectoryEntryDrop(entry, true);
                     >({{ entry.name }})</span
                 ></span
             >
-            <NuxtTime
-                v-if="entry.createdAt != null"
-                :datetime="entry.createdAt * 1000"
-                class="text-muted-foreground w-full truncate text-sm"
-                relative
-            ></NuxtTime>
+            <span class="text-muted-foreground w-full truncate text-sm">{{
+                byteSize(entry.size)
+            }}</span>
         </div>
     </button>
 </template>

frontend/components/DirectoryEntry.vue

@@ -7,6 +7,7 @@ import {
     ContextMenuSeparator,
 } from '@/components/ui/context-menu';
 import type { DirectoryEntry } from '#shared/types';
+import byteSize from 'byte-size';
 
 const warrenStore = useWarrenStore();
 const copyStore = useCopyStore();
@@ -111,12 +112,10 @@ function onClearCopy() {
                     class="flex w-full flex-col items-start justify-stretch gap-0 overflow-hidden text-left leading-6"
                 >
                     <span class="w-full truncate">{{ entry.name }}</span>
-                    <NuxtTime
-                        v-if="entry.createdAt != null"
-                        :datetime="entry.createdAt * 1000"
+                    <span
                         class="text-muted-foreground w-full truncate text-sm"
-                        relative
-                    ></NuxtTime>
+                        >{{ byteSize(entry.size) }}</span
+                    >
                 </div>
             </button>
         </ContextMenuTrigger>

frontend/shared/types/index.ts

@@ -9,6 +9,7 @@ export type DirectoryEntry = {
     name: string;
     fileType: FileType;
     mimeType: string | null;
+    size: number;
     /// Timestamp in seconds
     createdAt: number | null;
     isParent: boolean;