Move Sidebar and Player into components

src/lib/components/custom/PlayerControls.svelte

@@ -0,0 +1,29 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {Button} from "$lib/components/ui/button";
+    import {onMount} from "svelte";
+    let { audio, pause, play } = $props();
+    let mounted = $state(false);
+
+    $inspect(audio);
+
+    onMount(() => {
+        mounted = true;
+    })
+</script>
+
+<div class="flex flex-row gap-2">
+    {#if mounted}
+        <p>Paused: {audio.paused}</p>
+        <p>Volume: {audio.volume}</p>
+        <p>Duration: {audio.duration}</p>
+        {#if audio.paused}
+            <Button onclick={play}>Play</Button>
+        {:else}
+            <Button onclick={pause}>Pause</Button>
+        {/if}
+    {:else}
+        <p>Nothing going on here</p>
+    {/if}
+</div>

src/lib/components/custom/PlayerSidebar.svelte

@@ -0,0 +1,32 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {Separator} from "$lib/components/ui/separator";
+    import {Button} from "$lib/components/ui/button";
+
+    let { selectedPlayerView = $bindable() } = $props();
+    let playlists = $state([]);
+</script>
+
+<div class="border border-2 col-span-1 flex flex-col gap-1 p-2">
+    <div class="flex flex-col gap-2">
+        <h1>Albums</h1>
+        <h2>All</h2>
+        <h2>Random</h2>
+        <h2>Favourites</h2>
+        <h2>Top Rated</h2>
+        <h2>Recently Added</h2>
+        <h2>Recently Played</h2>
+        <h2>Most Played</h2>
+    </div>
+    <Separator />
+    <h1>Artists</h1>
+    <h1>Songs</h1>
+    <h1>Radios</h1>
+    <h1>Shares</h1>
+    <Separator />
+    <h1>Playlists</h1>
+    {#each playlists as playlist}
+        <h2>{playlist}</h2>
+    {/each}
+</div>