feat: [#279] show canonical infohash group in details page

Author: josecelano

components/torrent/CanonicalInfoHashGroup.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="torrent-description" class="flex flex-col gap-6">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
+        Canonical InfoHash Group ({{ torrent.canonical_info_hash_group.length }})
+      </h2>
+      <button
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
+        @click="collapsed = !collapsed"
+      >
+        <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
+      </button>
+    </div>
+    <template v-if="!collapsed">
+      <div class="overflow-x-auto">
+        <table class="table w-full table-zebra">
+          <!-- head -->
+          <thead>
+            <tr>
+              <th />
+              <th>original infohash</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="(infohash, index) in torrent.canonical_info_hash_group">
+              <tr>
+                <th>{{ index + 1 }}</th>
+                <td>{{ infohash }}</td>
+                <td />
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/24/solid";
+import type { PropType } from "vue";
+import type { TorrentResponse } from "torrust-index-types-lib";
+import { ref } from "#imports";
+
+const collapsed = ref(false);
+
+const props = defineProps({
+  torrent: {
+    type: Object as PropType<TorrentResponse>,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+
+</style>

components/torrent/TorrentDetails.vue

@@ -23,6 +23,7 @@
                 <TorrentEncodingTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentFilesTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentTrackersTab :torrent="torrent" @updated="reloadTorrent" />
+                <CanonicalInfoHashGroup :torrent="torrent" @updated="reloadTorrent" />
               </div>
             </div>
           </div>
@@ -47,6 +48,7 @@ import { ChevronLeftIcon } from "@heroicons/vue/24/solid";
 import type { Ref } from "vue";
 import type { TorrentResponse } from "torrust-index-types-lib";
 import { notify } from "notiwind-ts";
+import CanonicalInfoHashGroup from "./CanonicalInfoHashGroup.vue";
 import { useRoute, navigateTo, ref, useRestApi } from "#imports";
 import TorrentActionCard from "~/components/torrent/TorrentActionCard.vue";
 import TorrentDescriptionTab from "~/components/torrent/TorrentDescriptionTab.vue";