From 536df17c2e170f562e3c908f97f5a0579fdc69da Mon Sep 17 00:00:00 2001
From: Matt Strapp <matt@mattstrapp.net>
Date: Thu, 28 Sep 2023 10:17:11 -0500
Subject: Make everything look better again

Signed-off-by: Matt Strapp <matt@mattstrapp.net>
---
 app/src/lib/svelte/Navigation.svelte |  2 +-
 app/src/lib/ts/download.ts           |  5 +++-
 app/src/routes/+layout.svelte        | 34 +++++++++++--------------
 app/src/routes/+page.svelte          |  2 +-
 app/src/routes/truncate/+page.svelte | 49 ++++++++++++++++++++++--------------
 5 files changed, 50 insertions(+), 42 deletions(-)

(limited to 'app')

diff --git a/app/src/lib/svelte/Navigation.svelte b/app/src/lib/svelte/Navigation.svelte
index 973924a..f0535ef 100644
--- a/app/src/lib/svelte/Navigation.svelte
+++ b/app/src/lib/svelte/Navigation.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+  import { page } from '$app/stores';
   import Icon from '@iconify/svelte';
   import { AppRail, AppRailAnchor, getDrawerStore } from '@skeletonlabs/skeleton';
-  import { page } from '$app/stores';
 
   const drawerStore = getDrawerStore();
 
diff --git a/app/src/lib/ts/download.ts b/app/src/lib/ts/download.ts
index 16712fb..c3e98b0 100644
--- a/app/src/lib/ts/download.ts
+++ b/app/src/lib/ts/download.ts
@@ -19,10 +19,11 @@ export default async function saveFile(blob: ArrayBuffer, suggestedName: string
       const writable = await handle.createWritable();
       await writable.write(blob);
       await writable.close();
+      return;
     } catch (err: unknown) {
       // TypeScript
       if ((err as Error)?.name !== 'AbortError') {
-        console.error(err);
+        return Promise.reject(err);
       }
     }
   } else {
@@ -30,5 +31,7 @@ export default async function saveFile(blob: ArrayBuffer, suggestedName: string
     anchor.download = suggestedName ?? 'truncated';
     anchor.href = URL.createObjectURL(new Blob([blob]));
     anchor.click();
+    URL.revokeObjectURL(anchor.href);
+    document.body.removeChild(anchor);
   }
 }
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 519a11d..1a15251 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { useRegisterSW } from 'virtual:pwa-register/svelte';
-  import { pwaInfo } from 'virtual:pwa-info';
-  import { onMount } from 'svelte';
+  import Navigation from '$lib/svelte/Navigation.svelte';
+  import Icon from '@iconify/svelte';
   import {
-    AppShell,
-    AppBar,
-    getDrawerStore,
-    getToastStore,
-    initializeStores,
-    Toast,
-    Drawer
+      AppBar,
+      AppShell,
+      Drawer,
+      Toast,
+      getDrawerStore,
+      getToastStore,
+      initializeStores
   } from '@skeletonlabs/skeleton';
-
-  import Navigation from '$lib/svelte/Navigation.svelte';
-
+  import { onMount } from 'svelte';
+  import { pwaInfo } from 'virtual:pwa-info';
+  import { useRegisterSW } from 'virtual:pwa-register/svelte';
   import '../app.postcss';
+
   // Floating UI for Popups
   // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
   // import { storePopup } from '@skeletonlabs/skeleton';
@@ -75,13 +75,7 @@
       <svelte:fragment slot="lead">
         <div class="flex items-center">
           <button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}>
-            <span>
-              <svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
-                <rect width="100" height="20" />
-                <rect y="30" width="100" height="20" />
-                <rect y="60" width="100" height="20" />
-              </svg>
-            </span>
+            <Icon icon="carbon:menu" width=25 />
           </button>
           <strong class="text-xl uppercase">A!</strong>
         </div>
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 1f0a15d..e34c31e 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -11,5 +11,5 @@
 </div>
 
 <style lang="postcss">
-	
+
 </style>
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>
-- 
cgit v1.2.3