From 763482db5b61f4caac74dbaa1604627f9a132e83 Mon Sep 17 00:00:00 2001
From: Nilsen84 <56961087+Nilsen84@users.noreply.github.com>
Date: Wed, 9 Aug 2023 23:06:01 +0200
Subject: [PATCH] Fix agents overflow, drop handler

---
 gui/src/pages/Agents.svelte | 40 ++++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/gui/src/pages/Agents.svelte b/gui/src/pages/Agents.svelte
index 85e1747..a0f1ce0 100644
--- a/gui/src/pages/Agents.svelte
+++ b/gui/src/pages/Agents.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import trash from '../assets/trash.svg'
-    import { config } from '../config'
+    import {config} from '../config'
 
     function addAgent(file) {
-        if($config.agents.some(a => a.path == file.path)) {
+        if ($config.agents.some(a => a.path == file.path)) {
             return
         }
 
@@ -21,17 +21,22 @@
     }
 </script>
 
-<div class="flex flex-col items-stretch">
-    <div class="h-[52px] bg-white flex items-center text-lg relative px-2">
+<div class="flex flex-col items-stretch h-full">
+    <div class="h-[52px] flex-shrink-0 bg-white flex items-center text-lg relative px-2">
         <div class="flex-1">
-            <label
-                    class="border-2 border-black rounded-md w-9 h-9 text-4xl flex justify-center border-opacity-70 cursor-pointer"
-                    on:change={e => {
-                        addAgent(e.target.files[0])
-                        e.target.value = ''
+            <label class="border-2 border-black rounded-md w-9 h-9 text-4xl flex justify-center border-opacity-70 cursor-pointer">
+                <input
+                        type="file"
+                        class="hidden"
+                        accept=".jar"
+                        multiple="multiple"
+                        on:change={e => {
+                            for (const file of e.target.files) {
+                                addAgent(file)
+                            }
+                            e.target.value = ''
                     }}
-            >
-                <input type="file" class="hidden" accept=".jar">
+                >
                 <span class="absolute top-1 font-light opacity-80">+</span>
             </label>
         </div>
@@ -39,7 +44,18 @@
         <div class="flex-1"></div>
     </div>
 
-    <div class="flex flex-col p-4 gap-2">
+    <div
+            class="flex flex-col p-4 gap-2 overflow-y-scroll flex-grow"
+            on:dragover|preventDefault
+            on:drop|preventDefault={e => {
+                for(const file of e.dataTransfer.files) {
+                    if(file.name.endsWith('.jar')) {
+                        addAgent(file)
+                    }
+                }
+                window.dispatchEvent(new Event('change'))
+            }}
+    >
         {#each $config.agents as agent, i (agent.path)}
             <div class="flex items-center bg-white px-2 w-full h-10 rounded-lg agent">
                 <input tabindex="-1" type="checkbox" class="scale-[115%]" bind:checked={agent.enabled}>