made stuff nicer a bit

src/components/CollectionsListElement.vue

@@ -1,9 +1,15 @@
 <template>
   <b-col class="my-3" cols="12" md="6">
-    <b-card :title="title">
+    <b-card>
+      <template slot="header">
+        <h4>
+          <b-icon :icon="typeIcon"/>&nbsp;{{ title }}
+        </h4>
+      </template>
       <b-button class="float-right" @click="performClick">Open</b-button>
       <div class="float-left">
-        Tracks: {{ count }}
+        <p><b>Items:</b> {{ count }}</p>
+        <p><b>Type:</b> {{ type | capitalize }}</p>
       </div>
     </b-card>
   </b-col>
@@ -14,12 +20,36 @@ export default {
   name: "CollectionsListElement",
   props: {
     title: String,
-    count: Number
+    count: Number,
+    type: String
   },
   methods: {
     performClick() {
       this.$emit('click');
     }
+  },
+  computed: {
+    typeIcon() {
+      switch (this.type) {
+        case "work":
+          return "pencil-fill";
+        case "artist":
+          return "person-fill";
+        case "recording":
+          return "music-note";
+        case "release":
+          return "folder2";
+        default:
+          return "play-fill";
+      }
+    }
+  },
+  filters: {
+    capitalize(value) {
+      if (!value) return ''
+      value = value.toString()
+      return value.charAt(0).toUpperCase() + value.slice(1)
+    }
   }
 }
 </script>

src/views/Collection.vue

@@ -20,7 +20,7 @@
           <template #cell(id)="data">
             <div class="text-right">
               <b-button variant="success" :disabled="!data.item.spotify_id" @click="startPlayer(data.item.spotify_id)">
-                Play
+                <b-icon icon="play-fill"/> Play
               </b-button>
             </div>
           </template>

src/views/Collections.vue

@@ -7,7 +7,8 @@
     </b-row>
     <big-chungus-loader text="Fetching collections..." v-if="processing"/>
     <b-row v-else>
-      <collections-list-element :title="c.name" :count="c.element_count" @click="openCollection(c.id)" :key="c.id" v-for="c in collections"/>
+      <collections-list-element :title="c.name" :count="c.element_count" :type="c.type" @click="openCollection(c.id)"
+                                :key="c.id" v-for="c in collections"/>
     </b-row>
   </b-container>
 </template>
@@ -41,6 +42,7 @@ export default {
     }).catch(({text}) => {
       this.$showToast(text);
     });
+
   }
 }
 </script>

src/views/Item.vue

@@ -23,7 +23,7 @@
         </div>
         <div class="my-3">
           <b-button :disabled="!songInfo.spotify_id" :href="spotifyLink" target="_blank">Open on Spotify!</b-button>&nbsp;
-          <b-button variant="success" :disabled="!songInfo.spotify_id" @click="startPlayer">Play!</b-button>
+          <b-button variant="success" :disabled="!songInfo.spotify_id" @click="startPlayer"><b-icon icon="play-fill"/>  Play!</b-button>
 
         </div>
       </b-col>