From b1ee4b18dcd634ab434a2de0dabcde3e60095a6a Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sun, 9 May 2021 10:56:58 +0200
Subject: [PATCH] split starred into tabs

---
 src/library/starred/Starred.vue | 42 ++++++++++++++++++++++-----------
 src/shared/router.ts            |  3 ++-
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/library/starred/Starred.vue b/src/library/starred/Starred.vue
index 091819c..efd6705 100644
--- a/src/library/starred/Starred.vue
+++ b/src/library/starred/Starred.vue
@@ -1,18 +1,29 @@
 <template>
-  <ContentLoader v-slot :loading="result == null">
-    <div v-if="result.albums.length > 0" class="mb-4">
-      <h1>Albums</h1>
-      <AlbumList :items="result.albums" />
-    </div>
-    <div v-if="result.artists.length > 0" class="mb-4">
-      <h1>Artists</h1>
-      <ArtistList :items="result.artists" />
-    </div>
-    <div v-if="result.tracks.length > 0" class="mb-4">
-      <h1>Tracks</h1>
-      <TrackList :tracks="result.tracks" />
-    </div>
-  </ContentLoader>
+  <div>
+    <h1>Starred</h1>
+    <ul class="nav-underlined">
+      <li>
+        <router-link :to="{... $route, params: { }}">
+          Albums
+        </router-link>
+      </li>
+      <li>
+        <router-link :to="{... $route, params: { section: 'artists' }}">
+          Artists
+        </router-link>
+      </li>
+      <li>
+        <router-link :to="{... $route, params: { section: 'tracks' }}">
+          Tracks
+        </router-link>
+      </li>
+    </ul>
+    <ContentLoader v-slot :loading="result == null">
+      <ArtistList v-if="section === 'artists'" :items="result.artists" />
+      <TrackList v-else-if="section === 'tracks'" :tracks="result.tracks" />
+      <AlbumList v-else :items="result.albums" />
+    </ContentLoader>
+  </div>
 </template>
 <script lang="ts">
   import Vue from 'vue'
@@ -26,6 +37,9 @@
       ArtistList,
       TrackList,
     },
+    props: {
+      section: { type: String, default: '' },
+    },
     data() {
       return {
         result: null as any,
diff --git a/src/shared/router.ts b/src/shared/router.ts
index c142bf0..2a33a9b 100644
--- a/src/shared/router.ts
+++ b/src/shared/router.ts
@@ -88,8 +88,9 @@ export function setupRouter(auth: AuthService) {
       },
       {
         name: 'starred',
-        path: '/starred',
+        path: '/starred/:section?',
         component: Starred,
+        props: true,
       },
       {
         name: 'radio',