wip

Author: MMelchor

components/torrent/TorrentCommentTab.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="torrent-comment" 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">
+        Comment
+      </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="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
+        <template v-if="torrent.comment">
+          <Markdown :source="torrent.comment" />
+        </template>
+        <template v-else>
+          <span class="italic text-neutral-content">No comment provided.</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/24/solid";
+import { TorrentResponse } from "torrust-index-types-lib";
+import { PropType } from "vue";
+import { ref } from "#imports";
+import Markdown from "~/components/Markdown.vue";
+
+const collapsed = ref(false);
+
+const props = defineProps({
+  torrent: {
+    type: Object as PropType<TorrentResponse>,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+
+</style>

components/torrent/TorrentDetails.vue

@@ -16,6 +16,7 @@
               </div>
               <div v-if="torrent" class="flex flex-col flex-auto w-full gap-6">
                 <TorrentDescriptionTab :torrent="torrent" @updated="reloadTorrent" />
+                <TorrentCommentTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentFilesTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentTrackersTab :torrent="torrent" @updated="reloadTorrent" />
               </div>