[ui] base of file/url upload dialog

webui/src/App.svelte

@@ -7,6 +7,7 @@
   import Browse from "./views/Browse.svelte";
   import Search from "./views/Search.svelte";
   import DropAdd from "./components/DropAdd.svelte";
+  import AddModal from "./components/AddModal.svelte";
 
   const history = createHistory(createHashSource());
 
@@ -35,6 +36,7 @@
 </Router>
 
 <DropAdd />
+<AddModal />
 
 <style global lang="scss">
   @use "normalize.css/normalize.css";

webui/src/components/AddModal.svelte

@@ -0,0 +1,44 @@
+<script context="module" lang="ts">
+  export type AddEvents = {
+    files: File[];
+    urls: string[];
+  };
+  export const addEmitter = mitt<AddEvents>();
+</script>
+
+<script lang="ts">
+  import mitt from "mitt";
+
+  let files: File[] = [];
+  let URLs: string[] = [];
+  $: visible = files.length + URLs.length > 0;
+
+  addEmitter.on("files", (ev) => {
+    files = ev;
+  });
+</script>
+
+<div class="addmodal-container" class:visible>
+  <div class="addmodal">
+    {#each files as file}
+      <div>{file.name}</div>
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  .addmodal-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    color: var(--foreground);
+
+    display: none;
+    &.visible {
+      display: unset;
+    }
+  }
+</style>

webui/src/components/DropAdd.svelte

@@ -1,23 +1,24 @@
 <script lang="ts">
+  import { addEmitter } from "./AddModal.svelte";
   import Icon from "./utils/Icon.svelte";
 
   let dragging = false;
 
   function onDrop(ev: DragEvent) {
-    console.log(ev.dataTransfer);
+    console.debug(ev.dataTransfer);
+    if (ev.dataTransfer.files.length > 0) {
+      addEmitter.emit("files", Array.from(ev.dataTransfer.files));
+    } // TODO: else check for URLs
     dragging = false;
   }
 
-  function onDragEnter(ev: DragEvent) {
-    console.log("dragstart!");
-  }
+  function onDragEnter(ev: DragEvent) {}
 
   function onDragOver(ev: DragEvent) {
     dragging = true;
   }
 
   function onDragLeave(ev: DragEvent) {
-    console.log("dragleave!");
     dragging = false;
   }
 </script>

webui/src/components/layout/Header.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Link, useLocation, useNavigate, useParams } from "svelte-navigator";
   import { useMatch } from "svelte-navigator";
+  import { addEmitter } from "../AddModal.svelte";
   import Icon from "../utils/Icon.svelte";
   import Input from "../utils/Input.svelte";
   const navigate = useNavigate();
@@ -19,6 +20,13 @@
       navigate("/");
     }
   }
+
+  let fileInput: HTMLInputElement;
+  function onFileChange() {
+    if (fileInput.files.length > 0) {
+      addEmitter.emit("files", Array.from(fileInput.files));
+    }
+  }
 </script>
 
 <div class="header">
@@ -37,8 +45,9 @@
       <Icon name="search" slot="prefix" />
     </Input>
   </div>
-  <button class="add-button">
+  <button class="add-button" on:click={() => fileInput.click()}>
     <Icon name="plus-circle" />
+    <input type="file" bind:this={fileInput} on:change={onFileChange} />
   </button>
 </div>
 
@@ -91,6 +100,10 @@
       line-height: 1;
       display: block;
       cursor: pointer;
+
+      input {
+        display: none;
+      }
     }
   }
 </style>