Set relevant form elements required, support drag-dropping URLs and plain text

Author: jpenilla

web/src/lib/components/files/MultimodalFileInput.svelte

@@ -4,11 +4,12 @@
     import { RadioGroup } from "bits-ui";
     import SingleFileInput from "$lib/components/files/SingleFileInput.svelte";
 
-    let { label = "File", state = $bindable() }: MultimodalFileInputProps = $props();
+    let { state = $bindable(), label = "File", required = false }: MultimodalFileInputProps = $props();
 
     const instance = new MultimodalFileInputState({
-        label: box.with(() => label),
         state,
+        label: box.with(() => label),
+        required: box.with(() => required),
     });
     state = instance;
 
@@ -24,16 +25,51 @@
         event.preventDefault();
     }
 
-    async function handleFileDrop(event: DragEvent) {
+    async function handleDrop(event: DragEvent) {
         instance.dragActive = false;
         event.preventDefault();
-        const files = event.dataTransfer?.files;
-        if (!files || files.length !== 1) {
+        if (!event.dataTransfer) {
+            return;
+        }
+
+        const types = event.dataTransfer.types;
+        const files = event.dataTransfer.files;
+
+        // Handle file drops
+        if (files.length > 1) {
             alert("Only one file can be dropped at a time.");
             return;
+        } else if (files.length === 1) {
+            instance.file = files[0];
+            instance.mode = "file";
+            return;
+        }
+
+        // Handle URL drops
+        if (types.includes("text/uri-list")) {
+            const urls = event.dataTransfer
+                .getData("text/uri-list")
+                .split("\n")
+                .filter((url) => url && !url.startsWith("#"));
+            if (urls.length > 1) {
+                alert("Only one URL can be dropped at a time.");
+                return;
+            } else if (urls.length === 1) {
+                instance.url = urls[0];
+                instance.mode = "url";
+                return;
+            }
+        }
+
+        // Handle plain text drops
+        if (types.includes("text/plain")) {
+            const text = event.dataTransfer.getData("text/plain");
+            if (text) {
+                instance.text = text;
+                instance.mode = "text";
+                return;
+            }
         }
-        instance.file = files[0];
-        instance.mode = "file";
     }
 </script>
 
@@ -52,7 +88,7 @@
     class="file-drop-target w-full"
     data-drag-active={instance.dragActive}
     ondragover={handleDragOver}
-    ondrop={handleFileDrop}
+    ondrop={handleDrop}
     ondragleavecapture={handleDragLeave}
 >
     <RadioGroup.Root class="mb-1 flex w-full gap-1" bind:value={instance.mode}>
@@ -69,6 +105,7 @@
     {/if}
 </div>
 
+<!-- TODO: Implement required prop for SingleFileInput -->
 {#snippet fileInput()}
     <SingleFileInput bind:file={instance.file} class="flex w-fit items-center gap-2 rounded-md border btn-ghost px-2 py-1 has-focus-visible:outline-2">
         <span class="iconify size-4 shrink-0 text-em-disabled octicon--file-16"></span>
@@ -82,11 +119,11 @@
 {/snippet}
 
 {#snippet urlInput()}
-    <input title="{label} URL" placeholder="Enter file URL" bind:value={instance.url} type="url" class="w-full rounded-md border px-2 py-1" />
+    <input title="{label} URL" bind:value={instance.url} placeholder="Enter file URL" type="url" {required} class="w-full rounded-md border px-2 py-1" />
 {/snippet}
 
 {#snippet textInput()}
-    <textarea title="{label} Text" bind:value={instance.text} placeholder="Enter text here" class="w-full rounded-md border px-2 py-1"></textarea>
+    <textarea title="{label} Text" bind:value={instance.text} placeholder="Enter text here" {required} class="w-full rounded-md border px-2 py-1"></textarea>
 {/snippet}
 
 <style>
@@ -103,7 +140,7 @@
         align-items: center;
         justify-content: center;
 
-        content: "Drop file here";
+        content: "Drop here";
         font-size: var(--text-3xl);
         color: var(--color-black);
 

web/src/lib/components/files/index.svelte.ts

@@ -143,12 +143,14 @@ export type MultimodalFileInputProps = {
     state?: MultimodalFileInputState | undefined;
 
     label?: string | undefined;
+    required?: boolean | undefined;
 };
 
 export type MultimodalFileInputStateProps = {
     state: MultimodalFileInputState | undefined;
 } & ReadableBoxedValues<{
     label: string;
+    required: boolean;
 }>;
 
 export class MultimodalFileInputState {
@@ -158,10 +160,7 @@ export class MultimodalFileInputState {
     file: File | undefined = $state(undefined);
     url: string = $state("");
     private urlResolver = $derived.by(() => {
-        let url = this.url;
-        if (!url.startsWith("http://") && !url.startsWith("https://")) {
-            url = `https://${url}`;
-        }
+        const url = this.url;
         return lazyPromise(async () => {
             let threw = false;
             try {

web/src/routes/LoadDiffDialog.svelte

@@ -73,7 +73,7 @@
         const [aBinary, bBinary] = await Promise.all([isBinaryFile(blobA), isBinaryFile(blobB)]);
         if (aBinary || bBinary) {
             if (!isImageDiff) {
-                alert("Cannot compare binary files.");
+                alert("Cannot compare binary files (except image-to-image comparisons).");
                 return;
             }
         }
@@ -290,7 +290,6 @@
     }
 
     async function handleGithubUrl() {
-        modalOpen = false;
         const url = new URL(githubUrl);
         // exclude hash + query params
         const test = url.protocol + "//" + url.hostname + url.pathname;
@@ -300,11 +299,11 @@
 
         if (!match) {
             alert("Invalid GitHub URL. Use: https://github.com/owner/repo/(commit|pull|compare)/(id|ref_a...ref_b)");
-            modalOpen = true;
             return;
         }
 
         githubUrl = match[0];
+        modalOpen = false;
         const success = await viewer.loadFromGithubApi(match);
         if (success) {
             await updateUrlParams({ githubUrl });
@@ -408,6 +407,7 @@
                     <input
                         id="githubUrl"
                         type="url"
+                        required
                         autocomplete="url"
                         placeholder="https://github.com/"
                         class="grow rounded-l-md border-t border-b border-l px-2 py-1 overflow-ellipsis"
@@ -464,7 +464,7 @@
                     <span class="iconify size-6 shrink-0 octicon--file-diff-24"></span>
                     From Patch File
                 </h3>
-                <MultimodalFileInput bind:state={patchFile} label="Patch File" />
+                <MultimodalFileInput bind:state={patchFile} required label="Patch File" />
                 <Button.Root type="submit" class="mt-1 rounded-md btn-primary px-2 py-1">Go</Button.Root>
             </form>
 
@@ -482,11 +482,11 @@
                     From Files
                 </h3>
                 <div class="flex flex-wrap items-center gap-1">
-                    <MultimodalFileInput bind:state={fileA} label="File A" />
+                    <MultimodalFileInput bind:state={fileA} required label="File A" />
                     <div class="flex w-full">
                         <span class="iconify size-4 shrink-0 octicon--arrow-down-16"></span>
                     </div>
-                    <MultimodalFileInput bind:state={fileB} label="File B" />
+                    <MultimodalFileInput bind:state={fileB} required label="File B" />
                     <Button.Root type="submit" class="rounded-md btn-primary px-2 py-1">Go</Button.Root>
                     <Button.Root
                         title="Swap File A and File B"