Added rudimentary tags page. Improved social match behavior.

assets/components/tags/tag.vue

@@ -0,0 +1,92 @@
+<template>
+    <div
+        v-if="tag"
+        class="content tag"
+    >
+        <FilterBar :fetch-releases="fetchReleases" />
+
+        <div class="header">
+            <img
+                :src="`/img/tags/${tag.slug}.jpg`"
+                class="poster"
+            >
+
+            <span>
+                <h2 class="title">
+                    <Icon icon="price-tag4" />
+                    {{ tag.name }}
+                </h2>
+
+                <span class="description">{{ tag.description }}</span>
+            </span>
+        </div>
+
+        <div class="content-inner">
+            <Releases
+                :releases="releases"
+                :context="tag.name"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import FilterBar from '../header/filter-bar.vue';
+import Releases from '../releases/releases.vue';
+
+async function fetchReleases() {
+    this.releases = await this.$store.dispatch('fetchTagReleases', this.$route.params.tagSlug);
+}
+
+async function mounted() {
+    [this.tag] = await Promise.all([
+        this.$store.dispatch('fetchTags', { tagId: this.$route.params.tagSlug }),
+        this.fetchReleases(),
+    ]);
+
+    this.pageTitle = this.tag.name;
+}
+
+export default {
+    components: {
+        FilterBar,
+        Releases,
+    },
+    data() {
+        return {
+            tag: null,
+            releases: null,
+            pageTitle: null,
+        };
+    },
+    mounted,
+    methods: {
+        fetchReleases,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.header {
+}
+
+.poster {
+    width: 30rem;
+    height: 18rem;
+    object-fit: cover;
+}
+
+.title {
+    display: inline-block;
+    padding: 1rem;
+    margin: 0 .5rem 0 0;
+    text-transform: capitalize;
+
+    .icon {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+}
+</style>