I've used typescript for 30 minutes and I already love it

src/lib/components/util/alert.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    export let alertType: AlertType
+    export let alertMessage: string
+    import { onMount, createEventDispatcher } from 'svelte'
+    import { slide, fly } from 'svelte/transition'
+
+    let show: boolean = false
+    const dispatch = createEventDispatcher<{ closeAlert: null }>()
+
+    type BgColors = {
+        [key in AlertType]: string
+    }
+
+    const bgColors: BgColors = {
+        info: 'bg-neutral-500',
+        success: 'bg-emerald-500',
+        caution: 'bg-amber-500',
+        warning: 'bg-red-500',
+    }
+
+    export const triggerClose = () => {
+        show = false
+        dispatch('closeAlert')
+    }
+
+    onMount(() => {
+        show = true
+        setTimeout(() => triggerClose(), 10000)
+    })
+</script>
+
+{#if show}
+    <div in:fly={{ x: 500 }} out:slide={{ axis: 'y' }} class="py-1">
+        <div class="flex gap-1 overflow-hidden rounded-md">
+            <div class="flex w-full items-center p-4 {bgColors[alertType]}">
+                {alertMessage}
+            </div>
+            <button class="w-16 {bgColors[alertType]}" on:click={() => triggerClose()}>
+                <i class="fa-solid fa-x" />
+            </button>
+        </div>
+    </div>
+{/if}

src/lib/components/util/alertBox.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import Alert from './alert.svelte'
+
+    let alertBox: HTMLDivElement
+    let alertQueue: Alert[] = []
+
+    export const addAlert = (alertType: AlertType, alertMessage: string) => {
+        if (alertQueue.length > 5) alertQueue[0].triggerClose()
+
+        const alert = new Alert({
+            target: alertBox,
+            props: { alertType, alertMessage },
+        })
+
+        alert.$on('closeAlert', () => {
+            const index = alertQueue.indexOf(alert)
+            if (index > -1) alertQueue.splice(index, 1)
+            setTimeout(() => alert.$destroy(), 300)
+        })
+
+        alertQueue.push(alert)
+    }
+</script>
+
+<div bind:this={alertBox} class="fixed right-0 top-0 z-50 max-h-screen w-full max-w-sm overflow-hidden p-4"></div>

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/lib/stores.ts

@@ -0,0 +1,11 @@
+import { writable } from 'svelte/store'
+import type { Writable } from 'svelte/store'
+
+export const pageWidth: Writable<number> = writable(0)
+
+export const newestAlert: Writable<[AlertType, string] | null> = writable(null)
+
+export const currentlyPlaying = writable(null)
+
+const youtubeMusicBackground: string = 'https://www.gstatic.com/youtube/media/ytm/images/sbg/wsbg@4000x2250.png' // Default Youtube music background
+export const backgroundImage: Writable<string> = writable(youtubeMusicBackground)