feat: redesign the metronome page

src/lib/device/metronome/MetronomeBeats.svelte

@@ -15,7 +15,7 @@
 
 <div
 	{...$$restProps}
-	class="{$$props.class} relative flex w-5/6 flex-row flex-wrap items-center justify-center gap-[40px]"
+	class="{$$props.class} relative flex w-screen flex-row flex-wrap items-center justify-center gap-[40px]"
 >
 	{#each new Array(beatPerBar) as _, i}
 		{#if i === 0}

src/lib/device/metronome/MetronomePlayButton.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { getMetronomeContext } from '$/lib/device/metronome/context';
+	import { Play, Stop } from '@steeze-ui/heroicons';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { onDestroy } from 'svelte';
+
+	const metronome = getMetronomeContext();
+	metronome.schedule();
+
+	let isRunning = false;
+	const cancelStart = metronome.timer.onStart(() => {
+		isRunning = true;
+	});
+	const cancelStop = metronome.timer.onStop(() => {
+		isRunning = false;
+	});
+	onDestroy(() => {
+		cancelStart();
+		cancelStop();
+	});
+</script>
+
+<button
+	{...$$restProps}
+	class="{$$props.class} flex aspect-square items-center justify-center rounded-full bg-indigo-900 p-0 focus:outline-none"
+	on:click={() => {
+		metronome.timer.toggle();
+	}}
+>
+	{#if isRunning}
+		<Icon class="m-0 h-1/2 p-0 text-indigo-100" src={Stop} theme="solid" />
+	{:else}
+		<Icon class="m-0 h-1/2 p-0 text-indigo-100" src={Play} theme="solid" />
+	{/if}
+</button>

src/lib/device/metronome/metronome.ts

@@ -127,6 +127,7 @@ class Metronome {
 	}
 
 	destroy() {
+		this.removeSchedule();
 		this.clearDerivedSchedule();
 	}
 }

src/routes/tools/metronome/+page.svelte

@@ -1,25 +1,7 @@
 <script lang="ts">
 	import MetronomeBeats from '$/lib/device/metronome/MetronomeBeats.svelte';
 	import MetronomeOptions from '$/lib/device/metronome/MetronomeOptions.svelte';
-	import { getMetronomeContext } from '$/lib/device/metronome/context';
-	import { Play, Stop } from '@steeze-ui/heroicons';
-	import { Icon } from '@steeze-ui/svelte-icon';
-	import { onDestroy } from 'svelte';
-
-	const metronome = getMetronomeContext();
-	metronome.schedule();
-
-	let isRunning = false;
-	const cancelStart = metronome.timer.onStart(() => {
-		isRunning = true;
-	});
-	const cancelStop = metronome.timer.onStop(() => {
-		isRunning = false;
-	});
-	onDestroy(() => {
-		cancelStart();
-		cancelStop();
-	});
+	import MetronomePlayButton from '$/lib/device/metronome/MetronomePlayButton.svelte';
 </script>
 
 <div class="h-full w-screen">
@@ -28,21 +10,10 @@
 			<div class="ml-4 flex h-full flex-row items-start justify-between gap-4">
 				<MetronomeOptions />
 			</div>
-			<button
-				class="mr-8 flex aspect-square h-3/4 items-center justify-center rounded-full bg-indigo-900 p-0 focus:outline-none"
-				on:click={() => {
-					metronome.timer.toggle();
-				}}
-			>
-				{#if isRunning}
-					<Icon class="m-0 h-[20px] w-[20px] p-0 text-indigo-100" src={Stop} theme="solid" />
-				{:else}
-					<Icon class="m-0 h-[20px] w-[20px] p-0 text-indigo-100" src={Play} theme="solid" />
-				{/if}
-			</button>
 		</div>
 		<div class="relative flex h-full flex-col items-center justify-center">
-			<MetronomeBeats />
+			<MetronomeBeats class="p-20" />
+			<MetronomePlayButton class="h-20" />
 		</div>
 	</div>
 </div>