From 1c98747fd9e8c300b4d5655cc5ff401f54f61a2a Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Sun, 9 Mar 2025 17:03:40 +0300
Subject: [PATCH] feat: add clear all button

fixes #40
---
 .../components/functional/ConversionPanel.svelte  |  9 ++++++++-
 src/lib/components/layout/Navbar/Base.svelte      | 15 ++++++++++-----
 src/lib/converters/vips.svelte.ts                 |  2 +-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte
index f6be9be..7c0cc3b 100644
--- a/src/lib/components/functional/ConversionPanel.svelte
+++ b/src/lib/components/functional/ConversionPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { effects, files } from "$lib/store/index.svelte";
-	import { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
+	import { FolderArchiveIcon, RefreshCw, Trash2Icon } from "lucide-svelte";
 	import Panel from "../visual/Panel.svelte";
 	import Dropdown from "./Dropdown.svelte";
 </script>
@@ -27,6 +27,13 @@
 			<FolderArchiveIcon size="24" />
 			<p>Download all as .zip</p>
 		</button>
+		<button
+			class="btn p-4 {$effects ? '' : '!scale-100'} flex gap-3 max-md:w-full"
+			disabled={files.files.length === 0}
+			onclick={() => files.files = []}
+		>
+			<Trash2Icon size="24" />
+		</button>
 	</div>
 	<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
 	<div class="flex items-center gap-2">
diff --git a/src/lib/components/layout/Navbar/Base.svelte b/src/lib/components/layout/Navbar/Base.svelte
index 7413414..ee69a19 100644
--- a/src/lib/components/layout/Navbar/Base.svelte
+++ b/src/lib/components/layout/Navbar/Base.svelte
@@ -2,7 +2,12 @@
 	import { browser } from "$app/environment";
 	import { page } from "$app/state";
 	import { duration, fade } from "$lib/animation";
-	import { effects, files, goingLeft, setTheme } from "$lib/store/index.svelte";
+	import {
+		effects,
+		files,
+		goingLeft,
+		setTheme,
+	} from "$lib/store/index.svelte";
 	import clsx from "clsx";
 	import {
 		InfoIcon,
@@ -74,9 +79,9 @@
 			i.activeMatch(e.to?.url.pathname || ""),
 		);
 		if (newIndex < oldIndex) {
-			goingLeft.set(true)
+			goingLeft.set(true);
 		} else {
-			goingLeft.set(false)
+			goingLeft.set(false);
 		}
 	});
 </script>
@@ -88,7 +93,7 @@
 		href={item.url}
 		aria-label={item.name}
 		class={clsx(
-			"w-16 md:w-32 h-full relative z-10 rounded-xl flex items-center justify-center gap-3 overflow-hidden",
+			"min-w-16 md:min-w-32 h-full relative z-10 rounded-xl flex flex-1 items-center justify-center gap-3 overflow-hidden",
 			{
 				"bg-panel-highlight":
 					item.activeMatch(page.url.pathname) && !browser,
@@ -148,7 +153,7 @@
 {/snippet}
 
 <div bind:this={container}>
-	<Panel class="max-w-[778px] w-full h-20 flex items-center gap-3 relative">
+	<Panel class="max-w-[778px] w-screen h-20 flex items-center gap-3 relative">
 		{#if linkRects[selectedIndex]}
 			<div
 				class="absolute bg-panel-highlight rounded-xl"
diff --git a/src/lib/converters/vips.svelte.ts b/src/lib/converters/vips.svelte.ts
index ad0d953..24a8283 100644
--- a/src/lib/converters/vips.svelte.ts
+++ b/src/lib/converters/vips.svelte.ts
@@ -36,7 +36,7 @@ export class VipsConverter extends Converter {
 		".heif", // HEIF files that are encoded like HEIC files (and HEIC files in general) aren't supported due to https://github.com/kleisauke/wasm-vips/issues/3
 		".avif",
 		".jxl",
-		".svg",
+		".svg"
 	];
 
 	public readonly reportsProgress = false;