fixes

src/lib/ScanCapture.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Haptics, ImpactStyle } from '@capacitor/haptics';
+	import { Haptics } from '@capacitor/haptics';
 
 	let {
 		focused = $bindable(false),

src/lib/components/ui/sonner/sonner.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <Sonner
-	theme={"light"}
+	theme={"dark"}
 	class="toaster group"
 	toastOptions={{
 		classes: {

src/routes/+layout.svelte

@@ -5,12 +5,12 @@
 	let { children } = $props();
 </script>
 
-<Toaster />
+<Toaster class="break-all" position="top-right" />
 
 <div class="flex flex-col h-screen">
 	<div id="header"></div>
 
-	<div class="overflow-y-auto">
+	<div class="grow flex flex-col overflow-y-auto">
 		{@render children()}
 	</div>
 
@@ -20,11 +20,13 @@
 <style>
 	#header {
 		height: var(--safe-area-inset-top);
+		padding-bottom: 5px;
 		background-color: black;
 	}
 
 	#footer {
 		height: var(--safe-area-inset-bottom);
+		padding-top: 10px;
 		background-color: black;
 	}
 </style>

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Button from '$lib/components/ui/button/button.svelte';
 	import ScanCapture from '$lib/ScanCapture.svelte';
+	import { Haptics, ImpactStyle } from '@capacitor/haptics';
+	import { toast } from 'svelte-sonner';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { fade } from 'svelte/transition';
 
@@ -10,31 +12,40 @@
 	function onscan(value: string) {
 		if (!list.has(value)) {
 			list.add(value);
+			Haptics.impact({ style: ImpactStyle.Light });
+			toast(`${value}`);
 		}
 	}
 </script>
 
 <ScanCapture {onscan} />
 
-<div class="flex h-screen">
+<div class="flex grow">
 	<div class="m-auto flex flex-col justify-center items-center gap-8 p-4">
 		{#key count}
-			<h1 in:fade class="decoration-sky text-9xl font-bold text-center underline-offset-4">
+			<h1
+				in:fade={{ duration: 200 }}
+				class="decoration-sky text-9xl font-bold text-center underline-offset-4"
+			>
 				{count}
 			</h1>
 		{/key}
 
-		<div class="flex flex-wrap gap-2">
-			{#each list as value (value)}
-				<span>{value}</span>
-			{/each}
-		</div>
-
+		<div class="flex gap-2">
 			<Button
 				class="w-28 cursor-pointer"
+				variant="outline"
 				onclick={() => {
 					list.clear();
 				}}>Reset</Button
 			>
+			<Button
+				class="w-28 cursor-pointer"
+				onclick={() => {
+					list.clear();
+					toast.success("Scans added")
+				}}>Submit</Button
+			>
+		</div>
 	</div>
 </div>