web/remux: move drop area and open file button into own components

web/src/components/misc/DragDropArea.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    export let id: string;
+    export let classes = "";
+
+    export let draggedOver = false;
+    export let file: File;
+
+    const dropHandler = async (ev: DragEvent) => {
+        draggedOver = false;
+        ev.preventDefault();
+
+        if (ev?.dataTransfer?.files.length === 1) {
+            file = ev.dataTransfer.files[0];
+            return file;
+        }
+    };
+
+    const dragOverHandler = (ev: DragEvent) => {
+        draggedOver = true;
+        ev.preventDefault();
+    };
+</script>
+
+<div
+    {id}
+    class={classes}
+    role="region"
+    on:drop={(ev) => dropHandler(ev)}
+    on:dragover={(ev) => dragOverHandler(ev)}
+    on:dragend={() => {
+        draggedOver = false;
+    }}
+>
+    <slot></slot>
+</div>

web/src/components/misc/OpenFileButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    export let file: File;
+    export let draggedOver = false;
+
+    const openFile = async () => {
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.accept = "video/*,audio/*";
+
+        fileInput.click();
+
+        fileInput.onchange = async (e: Event) => {
+            const target = e.target as HTMLInputElement;
+
+            if (target.files?.length === 1) {
+                file = target.files[0];
+                return file;
+            }
+        };
+    };
+</script>
+
+<button on:click={() => openFile()}>
+    {#if draggedOver}
+        drop the file!
+    {:else}
+        open the file
+    {/if}
+</button>