[ui] create/add preliminaries

ui/src/App.svelte

@@ -6,6 +6,7 @@
   import Home from "./views/Home.svelte";
   import Browse from "./views/Browse.svelte";
   import Search from "./views/Search.svelte";
+  import DropAdd from "./components/DropAdd.svelte";
 
   const history = createHistory(createHashSource());
 
@@ -33,6 +34,8 @@
   <Footer on:resize={setBottomMargin} />
 </Router>
 
+<DropAdd />
+
 <style global lang="scss">
   @use "normalize.css/normalize.css";
   @use "styles/colors-app";

ui/src/components/DropAdd.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import Icon from "./utils/Icon.svelte";
+
+  let dragging = false;
+
+  function onDrop(ev: DragEvent) {
+    console.log(ev.dataTransfer);
+    dragging = false;
+  }
+
+  function onDragEnter(ev: DragEvent) {
+    console.log("dragstart!");
+  }
+
+  function onDragOver(ev: DragEvent) {
+    dragging = true;
+  }
+
+  function onDragLeave(ev: DragEvent) {
+    console.log("dragleave!");
+    dragging = false;
+  }
+</script>
+
+<svelte:body
+  on:dragenter|preventDefault={onDragEnter}
+  on:dragover|preventDefault={onDragOver}
+  on:dragleave|preventDefault={onDragLeave}
+  on:drop|preventDefault={onDrop} />
+
+<div class="dropindicator" class:dragging>
+  <div class="content">
+    <div class="icon">
+      <Icon name="current-location" />
+    </div>
+    <p>Drop an URL, an image or a file here!</p>
+  </div>
+</div>
+
+<style>
+  .dropindicator {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.75);
+
+    display: none;
+  }
+
+  .dragging {
+    display: unset;
+  }
+
+  .content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    background: rgba(0, 0, 0, 0.9);
+
+    color: var(--foreground);
+    border: solid 0.25em var(--foreground);
+    border-radius: 0.5em;
+    padding: 1.5em;
+
+    text-align: center;
+    font-size: 32px;
+  }
+
+  .icon {
+    font-size: 128px;
+  }
+</style>

ui/src/components/layout/Header.svelte

@@ -29,10 +29,17 @@
     </Link>
   </h1>
   <div class="input">
-    <Input placeholder="Search" value={searchQuery} on:input={onInput}>
+    <Input
+      placeholder="Search or add..."
+      value={searchQuery}
+      on:input={onInput}
+    >
       <Icon name="search" slot="prefix" />
     </Input>
   </div>
+  <button class="add-button">
+    <Icon name="plus-circle" />
+  </button>
 </div>
 
 <style lang="scss">
@@ -73,5 +80,17 @@
       margin-left: 1em;
       flex-grow: 1;
     }
+
+    .add-button {
+      border: 1px solid var(--foreground);
+      border-radius: 4px;
+      background: var(--background-lighter);
+      color: var(--foreground);
+      margin: 0 0.5em;
+      padding: 0.25em 1em;
+      line-height: 1;
+      display: block;
+      cursor: pointer;
+    }
   }
 </style>