From b69f04fbe87827c633c565f488004f6c1823107a Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Mon, 29 Apr 2024 07:13:33 +0200
Subject: [PATCH] Make left sidebar interactive

---
 .../components/custom/PlayerSidebar.svelte    | 24 +++++++++++--------
 src/routes/+page.svelte                       |  3 +++
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/custom/PlayerSidebar.svelte b/src/lib/components/custom/PlayerSidebar.svelte
index ad886c2..e3c97b4 100644
--- a/src/lib/components/custom/PlayerSidebar.svelte
+++ b/src/lib/components/custom/PlayerSidebar.svelte
@@ -3,24 +3,28 @@
 <script lang="ts">
     import {Separator} from "$lib/components/ui/separator";
     import {Button} from "$lib/components/ui/button";
+    import {Views} from "$lib/components/custom/Views/views.svelte";
+    import {AlbumViews} from "$lib/components/custom/Views/views.svelte.js";
 
-    let { selectedPlayerView = $bindable() } = $props();
+    let { view = $bindable(), subView = $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>
+        <Button onclick={() => view=Views.Albums} class="flex flex-col h-fit">Albums
+            <Button variant="secondary" onclick={() => subView=AlbumViews.All}>All</Button>
+            <Button variant="secondary" onclick={() => subView=AlbumViews.Random}>Random</Button>
+            <Button variant="secondary" onclick={() => subView=AlbumViews.Favourites}>Favourites</Button>
+            <Button variant="secondary" onclick={() => subView=AlbumViews.TopRated}>Top Rated</Button>
+            <Button variant="secondary" onclick={() => subView=AlbumViews.RecentlyAdded}>Recently Added</Button>
+            <Button variant="secondary" onclick={() => subView=AlbumViews.RecentlyPlayed}>Recently Played</Button>
+            <Button variant="secondary" onclick={() => subView=AlbumViews.MostPlayed}>Most Played</Button>
+        </Button>
+
     </div>
     <Separator />
-    <h1>Artists</h1>
+    <Button onclick={() => view=Views.Artists}>Artists</Button>
     <h1>Songs</h1>
     <h1>Radios</h1>
     <h1>Shares</h1>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a29be4e..46d806f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -33,6 +33,8 @@
     let volume = $state(0.2);
     let progress = $state(0);
     let duration = $state(0);
+    let viewMode = $state(Views.Albums);
+    let subViewMode = $state(AlbumViews.All);
 
     let queue: Array<Song> = $state([]);
 
@@ -205,6 +207,7 @@
     <div class="border border-2 col-span-3">
         <h1>Center</h1>
     </div>
+    <PlayerSidebar bind:view={viewMode} bind:subView={subViewMode} />
     <QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} currentIndex={currentSong.queueIndex} />
 </div>
 <div class="border border-2 min-h-24 h-24">