revise VTag and VMediaTags

Author: ngken0995

frontend/src/components/VMediaInfo/VMediaTags.vue

@@ -1,25 +1,45 @@
 <template>
   <ul v-if="tags.length" class="flex flex-wrap gap-2">
+    <div v-if="additionalSearchViews">
+      <VTag
+        v-for="(tag, index) in tags"
+        :key="index"
+        href="/"
+        :title="tag.name"
+      />
+    </div>
     <VMediaTag v-for="(tag, index) in tags" :key="index" tag="li">{{
       tag.name
     }}</VMediaTag>
   </ul>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from "vue"
+import { computed, defineComponent, PropType } from "vue"
 
 import type { Tag } from "~/types/media"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import VMediaTag from "~/components/VMediaTag/VMediaTag.vue"
 
+import VTag from "~/components/VTag/VTag.vue"
+
 export default defineComponent({
   name: "VMediaTags",
-  components: { VMediaTag },
+  components: { VMediaTag, VTag },
   props: {
     tags: {
       type: Array as PropType<Tag[]>,
       required: true,
     },
   },
+  setup() {
+    const featureFlagStore = useFeatureFlagStore()
+
+    const additionalSearchViews = computed(() =>
+      featureFlagStore.isOn("additional_search_views")
+    )
+
+    return { additionalSearchViews }
+  },
 })
 </script>

frontend/src/components/VTag/VTag.vue

@@ -10,21 +10,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent } from "vue"
 
 import VButton from "~/components/VButton.vue"
 
 export default defineComponent({
   name: "VTag",
   components: { VButton },
   props: {
-    title: { type: String },
+    title: {
+      type: String,
+      required: true,
+    },
     href: {
       type: String,
       required: true,
     },
   },
 })
 </script>
-
-<style scoped></style>