Implement drag & drop for local JSON files

src/lib/stores.ts

@@ -3,4 +3,5 @@ import type { DataWithDiagnostics, Profile } from './types';
 
 export const notification = writable('');
 
+export const localFile = writable<File | null>(null);
 export const localData = writable<DataWithDiagnostics | Profile | null>(null);

src/routes/+layout.svelte

@@ -1,16 +1,99 @@
 <script lang="ts">
   import '../app.css';
-  import { notification } from '$lib/stores';
+  import { goto, invalidateAll } from '$app/navigation';
+  import { localData, localFile, notification } from '$lib/stores';
+  import { page } from '$app/stores';
 
   $: if ($notification) {
     setTimeout(() => ($notification = ''), 2000);
   }
+
+  let dragTarget: EventTarget | null = null;
+  let validDragFile = false;
+
+  const onDragEnter = (e: DragEvent) => {
+    dragTarget = e.target;
+
+    if (!e.dataTransfer) return;
+
+    validDragFile = [...e.dataTransfer.items].some(
+      (item) => item.kind === 'file' && item.type === 'application/json'
+    );
+  };
+
+  const onDragLeave = (e: DragEvent) => {
+    if (e.target === dragTarget || !dragTarget || !e.target) {
+      dragTarget = null;
+      validDragFile = false;
+    }
+  };
+
+  const onDragOver = (e: DragEvent) => {
+    if (!e.dataTransfer) return;
+
+    const fileItems = [...e.dataTransfer.items].filter((item) => item.kind === 'file');
+
+    if (fileItems.length === 0) return;
+    e.preventDefault();
+
+    if (fileItems.some((item) => item.type === 'application/json')) {
+      e.dataTransfer.dropEffect = 'copy';
+    } else {
+      e.dataTransfer.dropEffect = 'none';
+    }
+  };
+
+  const onDrop = (e: DragEvent) => {
+    dragTarget = null;
+    validDragFile = false;
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+      e.preventDefault();
+      $localFile = e.dataTransfer.files[0];
+    }
+  };
+
+  $: if ($localFile) {
+    const file = $localFile;
+    $localFile = null;
+
+    file.arrayBuffer().then((data) => {
+      try {
+        let string_data = new TextDecoder().decode(data);
+        $localData = JSON.parse(string_data);
+        const pathname = $page.url.pathname;
+        if (pathname === '/p' || pathname.startsWith('/p/')) {
+          invalidateAll();
+        } else {
+          goto('/p');
+        }
+      } catch (e) {
+        $notification = `Couldn't open ${file.name}: ${e}`;
+      }
+    });
+  }
 </script>
 
+<svelte:document
+  on:dragenter={onDragEnter}
+  on:dragleave={onDragLeave}
+  on:dragover={onDragOver}
+  on:drop={onDrop}
+/>
+
 <slot />
 
+{#if validDragFile}
+  <div class="fixed left-0 top-0 h-dvh w-dvw bg-gray-900/60 p-10">
+    <div
+      class="pointer-events-none flex h-full w-full items-center justify-center rounded-3xl border-4 border-dashed border-green-500 bg-gray-900/80"
+    >
+      <h1 class="text-3xl">Drop profile JSON here</h1>
+    </div>
+  </div>
+{/if}
+
 {#if $notification}
-  <div class="fixed right-10 bottom-10 bg-gray-700/50 w-96 p-2 rounded-lg backdrop-blur-md">
+  <div class="fixed bottom-10 right-10 w-96 rounded-lg bg-gray-700/50 p-2 backdrop-blur-md">
     {@html $notification}
   </div>
 {/if}

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { localData, notification } from '$lib/stores';
+  import { localFile } from '$lib/stores';
   import logo from '../assets/logo.png';
 
   $: {
@@ -12,16 +12,7 @@
   let files: FileList | null = null;
 
   $: if (files && files?.length > 0) {
-    const file = files[0];
-    file.arrayBuffer().then((data) => {
-      try {
-        let string_data = new TextDecoder().decode(data);
-        $localData = JSON.parse(string_data);
-        goto('/p');
-      } catch (e) {
-        $notification = `Couldn't open ${file.name}: ${e}`;
-      }
-    });
+    $localFile = files[0];
   }
 </script>
 

src/routes/p/[[id]]/+page.svelte

@@ -23,7 +23,7 @@
   <input
     bind:value={query}
     placeholder="Search entries..."
-    class="w-full mx-2 bg-neutral-900 focus:outline-none"
+    class="w-full px-2 bg-neutral-900 focus:outline-none"
   />
 </div>
 <table class="border-b w-full">