feat: tooltips using floatingui (#10)

Co-authored-by: Emerald <emerald@emeraldgreen.dev>
Reviewed-on: #10
Co-authored-by: Emerald <emerald_actual@proton.me>
Co-committed-by: Emerald <emerald_actual@proton.me>

justfile

@@ -2,8 +2,11 @@ set export
 
 alias d := debug
 
+web-dev:
+	TAURI_MODE=web yarn dev
+
 dev:
-	-yarn tauri dev
+	-TAURI_MODE=tauri yarn tauri dev
 
 debug:
 	RUST_LOG=debug yarn tauri dev

src/lib/components/FramePreview.svelte

@@ -1,16 +1,16 @@
 <script lang="ts" context="module">
 	const hints = [
-		'Eyes open | Mouth closed',
-		'Eyes open | Mouth open',
-		'Eyes closed | Mouth closed',
-		'Eyes closed | Mouth open'
+		'Mouth closed | Not blinking',
+		'Mouth open | Not blinking',
+		'Mouth closed | Blinking',
+		'Mouth open | Blinking'
 	];
 </script>
 
 <script lang="ts">
 	import { frames, mode } from '../store';
 
-	import { ProgressRadial } from '@skeletonlabs/skeleton';
+	import { ProgressRadial, popup } from '@skeletonlabs/skeleton';
 	import { debug, info } from '$lib/logging';
 	import { loadGif, loadImage } from '$lib/io';
 	import { keepFocused } from '$lib/state';
@@ -97,7 +97,7 @@
 			}
 		}
 
-		fileInput.value = "";
+		fileInput.value = '';
 		loading = false;
 	};
 
@@ -107,7 +107,7 @@
 	};
 
 	const handleCancel = () => {
-		if(loading && fileInput?.value.length === 0) loading = false;
+		if (loading && fileInput?.value.length === 0) loading = false;
 	};
 
 	let fileInput: HTMLInputElement;
@@ -119,18 +119,23 @@
 	<input
 		bind:this={fileInput}
 		type="file"
-		bind:files={files}
+		bind:files
 		on:change={finishLoad}
-		on:input={() => debug("This is the input event")}
+		on:input={() => debug('This is the input event')}
 		class="hidden"
 		accept="image/png, image/jpeg, image/tiff, image/gif"
 	/>
 {/if}
 
 <button
-	class="btn btn-xl p-4 w-24 md:w-32 variant-soft-primary border-token border-primary-400-500-token aspect-square cursor-pointer z-50"
+	use:popup={{
+		event: 'hover',
+		target: `usageHint${index}`,
+		placement: 'right',
+		middleware: {}
+	}}
+	class="[&>*]:pointer-events-none btn btn-xl p-4 w-24 md:w-32 variant-soft-primary border-token border-primary-400-500-token aspect-square cursor-pointer z-50"
 	aria-label="Preview of frame {index + 1}"
-
 	on:click={(e) => {
 		if (e.shiftKey) {
 			clearImage();
@@ -145,3 +150,8 @@
 		<img {src} alt="Frame {{ index }}" class="w-full" />
 	{/if}
 </button>
+
+<div data-popup="usageHint{index}">
+	<span class="card variant-filled-surface p-4 rounded">{hints[index]}</span>
+	<div class="arrow variant-filled-surface" />
+</div>