From 77763dd2d0f39ac346007dace12342d63099ece7 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Sun, 9 Mar 2025 18:20:27 +0300
Subject: [PATCH] feat: add tooltips

works on desktop and mobile. also shows the clear button text on mobile only, tooltip on pc
---
 .../functional/ConversionPanel.svelte         | 34 ++++++--
 src/lib/components/visual/Tooltip.svelte      | 78 +++++++++++++++++++
 src/routes/convert/+page.svelte               | 50 +++++++-----
 3 files changed, 133 insertions(+), 29 deletions(-)
 create mode 100644 src/lib/components/visual/Tooltip.svelte

diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte
index 7c0cc3b..767021f 100644
--- a/src/lib/components/functional/ConversionPanel.svelte
+++ b/src/lib/components/functional/ConversionPanel.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { effects, files } from "$lib/store/index.svelte";
+	import { effects, files, isMobile } from "$lib/store/index.svelte";
 	import { FolderArchiveIcon, RefreshCw, Trash2Icon } from "lucide-svelte";
 	import Panel from "../visual/Panel.svelte";
 	import Dropdown from "./Dropdown.svelte";
+	import Tooltip from "../visual/Tooltip.svelte";
 </script>
 
 <Panel
@@ -27,13 +28,30 @@
 			<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>
+		{#if $isMobile}
+			<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" />
+				<p>Remove all files</p>
+			</button>
+		{:else}
+			<Tooltip text="Remove all files" position="right">
+				<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>
+			</Tooltip>
+		{/if}
 	</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/visual/Tooltip.svelte b/src/lib/components/visual/Tooltip.svelte
new file mode 100644
index 0000000..23e51ed
--- /dev/null
+++ b/src/lib/components/visual/Tooltip.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	interface Props {
+		children: () => any;
+		text: string;
+		position?: "top" | "bottom" | "left" | "right";
+	}
+
+	let { children, text, position = "top" }: Props = $props();
+	let showTooltip = $state(false);
+	let timeout: number = 0;
+
+	function show() {
+		timeout = setTimeout(() => {
+			showTooltip = true;
+		}, 500);
+	}
+
+	function hide() {
+		showTooltip = false;
+		clearTimeout(timeout);
+	}
+</script>
+
+<div
+	class="relative inline-block"
+	onmouseenter={show}
+	onmouseleave={hide}
+	onfocusin={show}
+	onfocusout={hide}
+	ontouchstart={show}
+	ontouchend={hide}
+	role="tooltip"
+>
+	{@render children()}
+	{#if showTooltip}
+		<div class="tooltip tooltip-{position}">
+			{text}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tooltip {
+		@apply absolute z-10 bg-panel-alt text-foreground border-2 border-stone-400 dynadark:border-white drop-shadow-lg text-xs px-4 py-2 rounded-full whitespace-nowrap pointer-events-none;
+	}
+
+	.tooltip-top {
+		@apply bottom-full left-1/2 -translate-x-1/2 mb-3;
+	}
+
+	.tooltip-top::after {
+		@apply content-[""] absolute top-full left-1/2 -ml-2 border-8 border-x-transparent border-b-transparent border-t-inherit;
+	}
+
+	.tooltip-bottom {
+		@apply top-full left-1/2 -translate-x-1/2 mt-3;
+	}
+
+	.tooltip-bottom::after {
+		@apply content-[""] absolute bottom-full left-1/2 -ml-2 border-8 border-x-transparent border-t-transparent border-b-inherit;
+	}
+
+	.tooltip-left {
+		@apply right-full top-1/2 -translate-y-1/2 mr-3;
+	}
+
+	.tooltip-left::after {
+		@apply content-[""] absolute top-1/2 left-full -mt-2 border-8 border-y-transparent border-r-transparent border-l-inherit;
+	}
+
+	.tooltip-right {
+		@apply left-full top-1/2 -translate-y-1/2 ml-3;
+	}
+
+	.tooltip-right::after {
+		@apply content-[""] absolute top-1/2 right-full -mt-2 border-8 border-y-transparent border-l-transparent border-r-inherit;
+	}
+</style>
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index af77515..3b3d6d6 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -4,6 +4,7 @@
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
+	import Tooltip from "$lib/components/visual/Tooltip.svelte";
 	import {
 		effects,
 		files,
@@ -192,28 +193,35 @@
 							onselect={(option) => handleSelect(option, file)}
 						/>
 						<div class="w-full flex items-center justify-between">
-							<button
-								class="btn {$effects
-									? ''
-									: '!scale-100'} p-0 w-14 h-14 text-black {isAudio
-									? 'bg-accent-purple'
-									: isVideo
-										? 'bg-accent-red'
-										: 'bg-accent-blue'}"
-								disabled={!files.ready}
-								onclick={file.convert}
+							<Tooltip text="Convert this file" position="bottom">
+								<button
+									class="btn {$effects
+										? ''
+										: '!scale-100'} p-0 w-14 h-14 text-black {isAudio
+										? 'bg-accent-purple'
+										: isVideo
+											? 'bg-accent-red'
+											: 'bg-accent-blue'}"
+									disabled={!files.ready}
+									onclick={file.convert}
+								>
+									<RotateCwIcon size="24" />
+								</button>
+							</Tooltip>
+							<Tooltip
+								text="Download this file"
+								position="bottom"
 							>
-								<RotateCwIcon size="24" />
-							</button>
-							<button
-								class="btn {$effects
-									? ''
-									: '!scale-100'} p-0 w-14 h-14"
-								onclick={file.download}
-								disabled={!file.result}
-							>
-								<DownloadIcon size="24" />
-							</button>
+								<button
+									class="btn {$effects
+										? ''
+										: '!scale-100'} p-0 w-14 h-14"
+									onclick={file.download}
+									disabled={!file.result}
+								>
+									<DownloadIcon size="24" />
+								</button>
+							</Tooltip>
 						</div>
 					</div>
 				</div>