playlist: change to tile layout

src/playlist/PlaylistList.vue

@@ -1,32 +1,14 @@
 <template>
-  <div>
+  <Tiles square>
-    <b-table-simple>
+    <Tile v-for="item in playlists" :key="item.id"
-    <thead>
+      :image="item.image"
-      <tr>
+      :to="{name: 'playlist', params: { id: item.id } }"
-        <th>Name</th>
+      :title="item.name">
-        <th>Created</th>
+      <template v-slot:text>
-        <th>Updated</th>
+        <strong>{{ item.songCount }}</strong> songs
-        <th></th>
+      </template>
-      </tr>
+    </Tile>
-    </thead>
+  </Tiles>
-    <tbody>
-      <tr v-for="(item, index) in playlists" :key="item.id">
-        <td>
-          <router-link :to="{name: 'playlist', params: { id: item.id } }">
-            {{ item.name }}
-          </router-link>
-        </td>
-        <td>{{ item.created | dateTime }}</td>
-        <td>{{ item.changed | dateTime }}</td>
-        <td class="text-right">
-          <OverflowMenu>
-            <b-dropdown-item-btn @click="deletePlaylist(item.id)">Delete</b-dropdown-item-btn>
-          </OverflowMenu>
-        </td>
-      </tr>
-    </tbody>
-    </b-table-simple>
-  </div>
 </template>
 <script lang="ts">
   import Vue from "vue";

src/shared/api.ts

@@ -139,6 +139,7 @@ export class API {
     return response.playlists.playlist.map((playlist: any) => ({
       ...playlist,
       name: playlist.name || "(Unnamed)",
+      image: playlist.songCount > 0 ? this.getCoverArtUrl(playlist) : undefined,
     }));
   }