add some stuff to home page

src/home/Home.vue

@@ -1,9 +1,59 @@
 <template>
-  <div></div>
+  <div>
+    <Spinner v-if="loading"/>
+    <template v-else>
+      <div v-for="section in sections" :key="section.key" class="mb-4">
+        <h1>{{ section.name }}</h1>
+        <Tiles :items="$data[section.key]" v-slot="{ item }" square>
+          <div class="text-truncate">
+            <router-link :to="{name: 'album', params: { id: item.id } }">
+              <strong>{{ item.name }}</strong>
+            </router-link>
+          </div>
+          <div class="text-truncate text-muted">
+            <router-link :to="{name: 'artist', params: { id: item.artistId } }">
+              {{ item.artist }}
+            </router-link>
+          </div>
+        </Tiles>
+      </div>
+    </template>
+  </div>
 </template>
 <script lang="ts">
 import Vue from 'vue';
 
 export default Vue.extend({
+  data() {
+    return {
+      sections: [
+        { name: "Recently played", key: "recent" },
+        { name: "Recently added", key: "newest" },
+        { name: "Most played", key: "frequent" },
+        { name: "Random", key: "random" },
+      ],
+      loading: true as boolean,
+      recent: [],
+      newest: [],
+      frequent: [],
+      random: [],
+    }
+  },
+  created() {
+    const size = 10;
+    this.$api.getAlbums("recent", size).then(result => {
+      this.recent = result;
+      this.loading = false;
+    });
+    this.$api.getAlbums("newest", size).then(result => {
+      this.newest = result
+    });
+    this.$api.getAlbums("frequent", size).then(result => {
+      this.frequent = result
+    });
+    this.$api.getAlbums("random", 50).then(result => {
+      this.random = result
+    });
+  }
 });
 </script>

src/library/album/AlbumList.vue

@@ -19,6 +19,7 @@
 <script lang="ts">
 import Vue from "vue";
 import AlbumCard from "./AlbumCard.vue";
+import { AlbumSort } from '@/shared/api';
 
 export default Vue.extend({
   components: {
@@ -48,7 +49,7 @@ export default Vue.extend({
   watch: {
     sort: {
       immediate: true,
-      handler(value: string) {
+      handler(value: AlbumSort) {
         this.albums = null;
         this.$api.getAlbums(value).then(albums => {
           this.albums = albums;

src/shared/api.ts

@@ -1,6 +1,8 @@
 import axios, { AxiosRequestConfig, AxiosInstance } from "axios"
 import { AuthService } from '@/auth/service';
 
+export type AlbumSort = "alphabeticalByName" | "newest" |  "recent" | "frequent" | "random"
+
 
 export class API {
   readonly http: AxiosInstance;
@@ -80,11 +82,12 @@ export class API {
     })));
   }
 
-  async getAlbums(sort: string) {
+
+  async getAlbums(sort: AlbumSort, size: number = 500) {
     const params = {
       type: sort,
       offset: "0",
-      size: "500",
+      size: size,
     };
     const data = await this.get("rest/getAlbumList2", params);
     return data.albumList2.album.map((item: any) => ({