Make everything look better again

Signed-off-by: Matt Strapp <matt@mattstrapp.net>

1 files changed, 30 insertions, 19 deletions

diff --git a/app/src/routes/truncate/+page.svelte b/app/src/routes/truncate/+page.svelte
index 1b37f56..6e0cfcd 100644
--- a/app/src/routes/truncate/+page.svelte
+++ b/app/src/routes/truncate/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import saveFile from '$lib/ts/download';
   import type { TruncateRequest, TruncateResponse } from '$lib/types/truncate-worker';
+  import Icon from '@iconify/svelte';
   import { FileDropzone, ProgressBar } from '@skeletonlabs/skeleton';
   import { onMount } from 'svelte';
 
@@ -18,15 +19,15 @@
       file: files[0],
       size: truncateTo
     } as TruncateRequest);
-    form.reset();
-    truncateTo = 1;
   }
 
   onMount(async () => {
     worker = new Worker(new URL('$lib/ts/truncate.worker.ts', import.meta.url), { type: 'module' });
-    worker.onmessage = (e: MessageEvent<TruncateResponse>) => {
+    worker.onmessage = async (e: MessageEvent<TruncateResponse>) => {
+      await saveFile(e.data.file, `trunc-${originalName}`).catch((e) => console.error(e));
       disableInput = false;
-      saveFile(e.data.file, `trunc-${originalName}`);
+      form.reset();
+      truncateTo = 1;
     };
   });
 </script>
@@ -38,19 +39,28 @@
 <div class="container h-full mx-auto flex justify-center items-center">
   <div class="space-y-10 text-center flex flex-col items-center">
     <form bind:this={form} on:submit|preventDefault={onUpload} method="POST" action="?/TODO">
+      <noscript>
+        <h3 class="h3">You need JavaScript to use this page, for now ;)</h3>
+        <br />
+      </noscript>
       <label class="label" for="truncateMe">
-        <FileDropzone
-          id="truncateMe"
-          name="truncateMe"
-          bind:files
-          on:change={() => form.requestSubmit()}
-          required
-          disabled={disableInput}
-        >
-          <svelte:fragment slot="lead">
-            <h2 class="h2">Drop a file here to truncate it.</h2>
-          </svelte:fragment>
-        </FileDropzone>
+        <div class="space-y-4 w-full">
+          <FileDropzone
+            id="truncateMe"
+            name="truncateMe"
+            bind:files
+            on:change={() => form.requestSubmit()}
+            required
+            disabled={disableInput}
+          >
+            <svelte:fragment slot="lead">
+              <div class="flex justify-center items-center">
+                <Icon icon="carbon:file-storage" width="50" />
+              </div>
+            </svelte:fragment>
+            <svelte:fragment slot="meta">Drop a file here to truncate it.</svelte:fragment>
+          </FileDropzone>
+        </div>
       </label>
       <br />
       <label class="label">
@@ -66,9 +76,10 @@
       </label>
       <br />
       <noscript>
-        <button type="submit" class="btn variant-filled"
-          >After adding a file, click to submit! (Not yet implemented)</button
-        >
+        <br />
+        <button type="submit" class="btn variant-filled" disabled>
+          After adding a file, click to submit! (Not yet implemented)
+        </button>
       </noscript>
       {#if disableInput}
         <h3 class="h3">Truncating the file, this may take time!</h3>