Make Center Module reactive & use snippets

src/routes/+page.svelte

@@ -10,6 +10,8 @@
     import {Button} from "$lib/components/ui/button";
     import {PlaybackMode, PlaybackStateSvelte} from "$lib/player.svelte.js";
     import PlayerSidebar from "$lib/components/custom/PlayerSidebar.svelte";
+    import AlbumView from "$lib/components/custom/Views/AlbumView.svelte";
+    import {AlbumViews, Views} from "$lib/components/custom/Views/views.svelte";
 
     function toFixedNumber(num, digits, base){
         const pow = Math.pow(base ?? 10, digits);
@@ -202,13 +204,29 @@
     <meta name="robots" content="noindex nofollow" />
 </svelte:head>
 
-<div class="border border-2 flex-1 grid grid-cols-5">
+{#snippet centerModule()}
-    <PlayerSidebar />
+    <div class="border border-2 col-span-3 overflow-hidden">
-    <div class="border border-2 col-span-3">
+        {#if viewMode === Views.Albums}
-        <h1>Center</h1>
+            <AlbumView viewMode={subViewMode}/>
+        {:else if viewMode === Views.Artists}
+            <p>Get Fucked</p>
+        {/if}
     </div>
+{/snippet}
+
+{#snippet leftModule()}
     <PlayerSidebar bind:view={viewMode} bind:subView={subViewMode} />
+{/snippet}
+
+{#snippet rightModule()}
     <QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} currentIndex={currentSong.queueIndex} />
+{/snippet}
+
+<div class="border border-2 flex-1 grid grid-cols-5 h-1 min-h-fit">
+    {@render leftModule()}
+    {@render centerModule()}
+    {@render rightModule()}
+
 </div>
 <div class="border border-2 min-h-24 h-24">
     <div class="flex flex-row gap-2">