file upload drop zones

frontend/components/DirectoryList.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ScrollArea } from '@/components/ui/scroll-area';
 import type { DirectoryEntry } from '#shared/types';
-const { entries } = defineProps<{
+
+const { entries, isOverDropZone } = defineProps<{
     entries: DirectoryEntry[];
+    isOverDropZone?: boolean;
 }>();
 
 const { isLoading } = useLoadingIndicator();
@@ -14,6 +16,12 @@ const sortedEntries = computed(() =>
 
 <template>
     <ScrollArea class="h-full w-full">
+        <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">
             <DirectoryEntry
                 v-for="entry in sortedEntries"