Merge #497: Show Canonical Infohash Group info in the details page

28c0db8 feat: [#279] show canonical infohash group in details page (Jose Celano)
eb88095 refactor: [#279] use the canonical infohash instead (Jose Celano)
e743c75 refactor: [#279] rename field in TorrentActionCard (Jose Celano)
75712ad chore(deps): update depencencies (Jose Celano)

Pull request description:

  Changes in the UI to make it clear when the infohash of an uploaded torrent changes.

ACKs for top commit:
  josecelano:
    ACK 28c0db8

Tree-SHA512: b51be07f44a16509a4ea07aa40661e122e088ebcf6dcc5872edbd08349ec3e814f3473af8597a824ccb1871171bc302cd5c24f3f313ad90a5025736f08834fb1

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/TorrentActionCard.vue

@@ -44,6 +44,17 @@
 
         <div class="flex flex-col p-6 stats bg-base-100 rounded-2xl">
           <div class="flex flex-col text-sm text-base-content/60">
+            <div class="flex flex-row">
+              <div class="flex flex-row w-1/2 py-2">
+                <HashtagIcon class="w-4 mr-2" />
+                <span>Canonical Info Hash</span>
+              </div>
+              <div class="flex flex-row w-1/2 py-1">
+                <div class="relative flex items-center max-w-full overflow-x-auto border rounded-lg border-base-content/10">
+                  <span data-cy="torrent-action-info-hash" class="px-2">{{ torrent.info_hash }}</span>
+                </div>
+              </div>
+            </div>
             <div v-if="torrent.category !== null" class="flex flex-row py-2 pt-0">
               <div class="flex flex-row w-1/2">
                 <TagIcon class="w-4 mr-2" />
@@ -73,17 +84,6 @@
                 <span>{{ fileSize(torrent.file_size) }}</span>
               </div>
             </div>
-            <div class="flex flex-row">
-              <div class="flex flex-row w-1/2 py-2">
-                <HashtagIcon class="w-4 mr-2" />
-                <span>Info Hash</span>
-              </div>
-              <div class="flex flex-row w-1/2 py-1">
-                <div class="relative flex items-center max-w-full overflow-x-auto border rounded-lg border-base-content/10">
-                  <span data-cy="torrent-action-info-hash" class="px-2">{{ torrent.info_hash }}</span>
-                </div>
-              </div>
-            </div>
             <div class="flex flex-row py-2 pb-0">
               <div class="flex flex-row w-1/2">
                 <UserCircleIcon class="w-4 mr-2" />

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";