basic file sharing

frontend/components/DirectoryList.vue

@@ -2,10 +2,22 @@
 import { ScrollArea } from '@/components/ui/scroll-area';
 import type { DirectoryEntry } from '#shared/types';
 
-const { entries, parent, isOverDropZone } = defineProps<{
+const {
+    entries,
+    parent,
+    isOverDropZone,
+    disableEntries = false,
+} = defineProps<{
     entries: DirectoryEntry[];
     parent: DirectoryEntry | null;
     isOverDropZone?: boolean;
+    disableEntries?: boolean;
+}>();
+
+const emit = defineEmits<{
+    'entry-click': [entry: DirectoryEntry];
+    'entry-download': [entry: DirectoryEntry];
+    back: [];
 }>();
 
 const { isLoading } = useLoadingIndicator();
@@ -13,23 +25,39 @@ const { isLoading } = useLoadingIndicator();
 const sortedEntries = computed(() =>
     entries.toSorted((a, b) => a.name.localeCompare(b.name))
 );
+
+function onEntryClicked(entry: DirectoryEntry) {
+    emit('entry-click', entry);
+}
+
+function onEntryDownload(entry: DirectoryEntry) {
+    emit('entry-download', entry);
+}
 </script>
 
 <template>
-    <ScrollArea class="h-full w-full">
+    <ScrollArea class="flex h-full w-full flex-col overflow-hidden">
         <div
             v-if="isOverDropZone"
             class="bg-background/50 pointer-events-none absolute flex h-full w-full items-center justify-center"
         >
             <Icon class="size-16 animate-pulse" name="lucide:upload" />
         </div>
-        <div class="flex flex-row flex-wrap gap-2">
-            <DirectoryBackEntry v-if="parent != null" :entry="parent" />
+        <div
+            class="flex w-full flex-col gap-2 overflow-hidden sm:flex-row sm:flex-wrap"
+        >
+            <DirectoryBackEntry
+                v-if="parent != null"
+                :entry="parent"
+                @back="() => emit('back')"
+            />
             <DirectoryEntry
                 v-for="entry in sortedEntries"
                 :key="entry.name"
                 :entry="entry"
-                :disabled="isLoading"
+                :disabled="isLoading || disableEntries"
+                @entry-click="onEntryClicked"
+                @entry-download="onEntryDownload"
             />
         </div>
     </ScrollArea>