rect file selection

frontend/components/DirectoryEntry.vue

@@ -14,10 +14,12 @@ const renameDialog = useRenameDirectoryDialog();
 
 const {
     entry,
+    entryIndex,
     disabled,
     draggable = true,
 } = defineProps<{
     entry: DirectoryEntry;
+    entryIndex: number;
     disabled: boolean;
     draggable?: boolean;
 }>();
@@ -90,6 +92,7 @@ function onClearCopy() {
     <ContextMenu>
         <ContextMenuTrigger class="flex sm:w-52">
             <button
+                :data-entry-index="entryIndex"
                 :disabled="warrenStore.loading || disabled"
                 :class="[
                     'bg-accent/30 border-border flex w-full translate-0 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2 outline-0 select-none',

frontend/components/DirectoryList.vue

@@ -25,10 +25,6 @@ const emit = defineEmits<{
 
 const { isLoading } = useLoadingIndicator();
 
-const sortedEntries = computed(() =>
-    entries.toSorted((a, b) => a.name.localeCompare(b.name))
-);
-
 function onEntryClicked(entry: DirectoryEntry, event: MouseEvent) {
     emit('entry-click', entry, event);
 }
@@ -59,8 +55,9 @@ function onEntryDelete(entry: DirectoryEntry, force: boolean) {
                 @back="() => emit('back')"
             />
             <DirectoryEntry
-                v-for="entry in sortedEntries"
+                v-for="(entry, i) in entries"
                 :key="entry.name"
+                :entry-index="i"
                 :entry="entry"
                 :disabled="isLoading || disableEntries"
                 :draggable="entriesDraggable"

frontend/components/SelectionRect.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const rect = useSelectionRect();
+const left = computed(() => Math.min(rect.a.x, rect.b.x));
+const top = computed(() => Math.min(rect.a.y, rect.b.y));
+const width = computed(() => Math.abs(rect.a.x - rect.b.x));
+const height = computed(() => Math.abs(rect.a.y - rect.b.y));
+</script>
+
+<template>
+    <div
+        v-if="rect.enabled && rect.isMinSize()"
+        class="bg-primary/20 pointer-events-none absolute z-50"
+        :style="`left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;`"
+    ></div>
+</template>