dont read the name of the branch

Reviewed-on: https://gitea.fernandovideira.com/SyntaxSquad/DAEProject_Frontend/pulls/16
Reviewed-by: FernandoJVideira <[email protected]>
Reviewed-by: Afonso Clerigo Mendes de Sousa <[email protected]>

app/components/post/PostDetail.vue

@@ -11,6 +11,15 @@
                 class="relative bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 p-8 border-b dark:border-gray-800">
 
                 <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4">
+                    <button
+                        class="flex items-center gap-2 text-xs font-bold text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                        @click="showHistory = true">
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        View history
+                    </button>
                     <span
                         class="bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-sm border border-blue-200 dark:border-blue-800">
                         {{ post.type.replace('_', ' ') }}
@@ -256,6 +265,53 @@
             </div>
         </article>
     </div>
+    <Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100" leave-active-class="transition duration-150 ease-in"
+        leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+        <div v-if="showHistory"
+            class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+            <div
+                class="bg-white dark:bg-gray-900 w-full max-w-2xl rounded-2xl shadow-xl border dark:border-gray-800 overflow-hidden">
+
+                <!-- Header -->
+                <div class="flex justify-between items-center px-6 py-4 border-b dark:border-gray-800">
+                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">
+                        Publication history
+                    </h3>
+                    <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                        @click="showHistory = false">
+                        ✕
+                    </button>
+                </div>
+
+                <!-- Body -->
+                <div class="p-6 space-y-4 max-h-[60vh] overflow-y-auto">
+                    <div v-for="entry in publicationHistory" :key="entry.id"
+                        class="p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
+                        <div class="flex items-start gap-3">
+                            <!-- Action tag -->
+                            <span class="px-2 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-wide"
+                                :class="actionTagClass(entry.actionType)">
+                                {{ formatAction(entry.actionType) }}
+                            </span>
+                        </div>
+
+                        <div class="mt-2 flex items-start gap-4">
+                            <!-- Text -->
+                            <div class="flex-1">
+                                <div class="text-sm text-gray-700 dark:text-gray-300">
+                                    {{ entry.description }}
+                                </div>
+                                <div class="mt-1 text-xs text-gray-400">
+                                    {{ new Date(entry.timestamp).toLocaleString() }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Transition>
 </template>
 
 <script setup>
@@ -277,6 +333,43 @@ const showCommentInput = ref(false);
 const totalComments = ref(0);
 const editingCommentId = ref(null);
 const editText = ref('');
+const showHistory = ref(false)
+const publicationHistory = ref([])
+
+const actionTagClass = (type) => {
+    const map = {
+        // Publication lifecycle
+        CREATE_PUBLICATION: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+        DELETE_PUBLICATION: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+        EDIT_PUBLICATION: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+        TAG_PUBLICATION: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+        HIDE_PUBLICATION: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
+
+        // Interaction
+        COMMENT_PUBLICATION: 'bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300',
+        EDIT_COMMENT: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300',
+        HIDE_COMMENT: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
+        RATE_PUBLICATION: 'bg-pink-100 text-pink-700 dark:bg-pink-900/40 dark:text-pink-300',
+
+        // User / admin actions
+        CREATE_USER: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
+        DELETE_USER: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
+        CHANGE_ROLE: 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',
+        CHANGE_EMAIL: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/40 dark:text-cyan-300',
+        CHANGE_NAME: 'bg-lime-100 text-lime-700 dark:bg-lime-900/40 dark:text-lime-300',
+
+        // Fallback
+        UPLOAD_PUBLICATION: 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+    }
+
+    return map[type] ?? 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+}
+
+const formatAction = (type) => {
+    return type
+        .replace(/_/g, ' ')
+        .toLowerCase()
+}
 
 const toggleHide = async (comment) => {
     try {
@@ -343,6 +436,18 @@ const fetchComments = async () => {
     }
 };
 
+const fetchPublicationHistory = async () => {
+    try {
+        const history = await $fetch(`${props.api}/publications/${props.post.id}/history`, {
+            headers: { Authorization: `Bearer ${props.token}` }
+        });
+        return history;
+    } catch (err) {
+        console.error("Publication history fetch error", err);
+        return [];
+    }
+};
+
 const handleCommentSubmit = async () => {
     submitting.value = true;
     try {
@@ -391,5 +496,8 @@ const downloadFile = async () => {
 
 onMounted(() => {
     fetchComments();
+    fetchPublicationHistory().then(history => {
+        publicationHistory.value = history;
+    });
 });
 </script>