feat: more tooltips & fixes

src/lib/components/layout/Navbar/Base.svelte

@@ -21,6 +21,7 @@
 	import Panel from "../../visual/Panel.svelte";
 	import Logo from "../../visual/svg/Logo.svelte";
 	import { beforeNavigate } from "$app/navigation";
+	import Tooltip from "$lib/components/visual/Tooltip.svelte";
 
 	const items = $derived<
 		{
@@ -182,6 +183,7 @@
 			{@render link(item, i)}
 		{/each}
 		<div class="w-0.5 bg-separator h-full hidden md:flex"></div>
+		<Tooltip text="Toggle theme" position="right">
 			<button
 				onclick={() => {
 					const isDark =
@@ -193,5 +195,6 @@
 				<SunIcon class="dynadark:hidden block" />
 				<MoonIcon class="dynadark:block hidden" />
 			</button>
+		</Tooltip>
 	</Panel>
 </div>

src/lib/components/visual/Tooltip.svelte

@@ -57,7 +57,13 @@
 	}
 
 	.tooltip-top::after {
-		@apply content-[""] absolute top-full left-1/2 -ml-2 border-x-transparent border-b-transparent border-t-inherit;
+		@apply content-[""] absolute top-full left-1/2 -translate-x-1/2 border-8 border-x-transparent border-b-transparent;
+	}
+
+	.tooltip-top::before {
+		border-width: calc(var(--border-size) + 8px);
+		margin-left: calc(-1 * (var(--border-size) + 8px));
+		@apply content-[""] absolute top-full left-1/2 border-x-transparent border-b-transparent border-t-inherit;
 	}
 
 	.tooltip-bottom {

src/routes/convert/+page.svelte

@@ -14,7 +14,7 @@
 		vertdLoaded,
 	} from "$lib/store/index.svelte";
 	import { addToast } from "$lib/store/ToastProvider";
-	import { VertFile, type Categories } from "$lib/types";
+	import { VertFile } from "$lib/types";
 	import {
 		AudioLines,
 		BookText,
@@ -129,15 +129,25 @@
 	<Panel class="p-5 flex flex-col min-w-0 gap-4 relative">
 		<div class="flex-shrink-0 h-8 w-full flex items-center gap-2">
 			{#if !converters.length}
+				<Tooltip text="Unknown file type" position="bottom">
 					<FileQuestionIcon size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{:else if isAudio}
+				<Tooltip text="Audio file" position="bottom">
 					<AudioLines size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{:else if isVideo}
+				<Tooltip text="Video file" position="bottom">
 					<FilmIcon size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{:else if isDocument}
+				<Tooltip text="Document file" position="bottom">
 					<BookText size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{:else}
+				<Tooltip text="Image file" position="bottom">
 					<ImageIcon size="24" class="flex-shrink-0" />
+				</Tooltip>
 			{/if}
 			<div class="flex-grow overflow-hidden">
 				{#if file.processing}