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>