From 5132e3eb2f510c911785ff9f27264e702dbf6035 Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Fri, 16 Jan 2026 18:16:54 +0000
Subject: [PATCH 01/18] fix: fixed a woppsie dossie

---
 nuxt.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8e93e9a..19a2d61 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,6 @@
 import tailwindcss from "@tailwindcss/vite";
 
 export default defineNuxtConfig({
-<<<<<<< HEAD
     compatibilityDate: "2026-01-01",
     devtools: { enabled: true },
 

From 7f265856491ee6b999afdc56355737a464a77449 Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Fri, 16 Jan 2026 19:33:38 +0000
Subject: [PATCH 02/18] feat: improved and updated navbar

---
 app/assets/css/main.css     |   2 +-
 app/layouts/default.vue     | 238 +++++++++++++++++++++++++++++-------
 app/pages/profile/index.vue |  84 ++++++-------
 3 files changed, 234 insertions(+), 90 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 9577ba9..9b39686 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -5,6 +5,7 @@
   --text-tertiary: #6e7681;
   --text-link: #2f81f7;
   --text-link-hover: #539bf5;
+  --text-slate: #57606a;
 
   --border-primary: #30363d;
   --border-hover: #8d96a0;
@@ -56,7 +57,6 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   line-height: 1.25;
-  color: var(--text-primary);
 }
 
 p {
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index b0fbd8d..c1ab5ca 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,67 +2,211 @@
 import { useAuthStore } from "~/stores/auth-store.js";
 
 const authStore = useAuthStore();
-const isDark = ref(false);
 const router = useRouter();
 
+// State (No more isScrolled)
+const isDark = ref(false);
+const isUserMenuOpen = ref(false);
+const isMobileMenuOpen = ref(false);
+const userMenuRef = ref(null);
+
+// Toggle Dark Mode
 function toggleDark() {
-  isDark.value = !isDark.value;
-  if (isDark.value) {
-    document.documentElement.classList.add('dark');
-    localStorage.theme = 'dark';
-  } else {
-    document.documentElement.classList.remove('dark');
-    localStorage.theme = 'light';
-  }
+    isDark.value = !isDark.value;
+    if (isDark.value) {
+        document.documentElement.classList.add('dark');
+        localStorage.theme = 'dark';
+    } else {
+        document.documentElement.classList.remove('dark');
+        localStorage.theme = 'light';
+    }
 }
 
-function logout() {
-  authStore.logout()
-  router.push("/auth/login");
+// Navigation Links
+const navLinks = [
+    { name: 'Dashboard', path: '/' },
+    { name: 'Courses', path: '/courses' },
+    { name: 'Students', path: '/students' },
+    { name: 'Schedule', path: '/schedule' },
+];
+
+function handleLogout() {
+    isUserMenuOpen.value = false;
+    isMobileMenuOpen.value = false;
+    authStore.logout();
+    router.push("/auth/login");
+}
+
+function navigateTo(path) {
+    isUserMenuOpen.value = false;
+    isMobileMenuOpen.value = false;
+    router.push(path);
+}
+
+function closeDropdowns(event) {
+    if (userMenuRef.value && !userMenuRef.value.contains(event.target)) {
+        isUserMenuOpen.value = false;
+    }
 }
 
 onMounted(() => {
-  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    isDark.value = true;
-    document.documentElement.classList.add('dark');
-  }
+    // Initialize Theme
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        isDark.value = true;
+        document.documentElement.classList.add('dark');
+    }
+
+    // Click listener for closing dropdowns
+    window.addEventListener('click', closeDropdowns);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('click', closeDropdowns);
 });
 </script>
+
 <template>
-  <nav
-    class="sticky top-0 z-50 flex items-center justify-between px-6 py-4 bg-white/80 backdrop-blur-md shadow-sm border-b border-gray-100">
+    <nav
+        class="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-slate-800 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md transition-colors duration-300">
+        <div class="w-full px-6 md:px-8">
+            <div class="flex items-center justify-between h-16">
 
-    <div class="flex items-center gap-6">
-      <nuxt-link to="/" class="text-sm font-medium text-gray-600 hover:text-blue-600 transition-colors duration-200"
-        active-class="text-blue-600 font-bold">
-        Home
-      </nuxt-link>
-    </div>
+                <nuxt-link to="/" class="flex items-center gap-2 group flex-shrink-0">
+                    <div
+                        class="w-9 h-9 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold text-xl shadow-blue-500/20 shadow-lg group-hover:scale-110 transition-transform">
+                        A
+                    </div>
+                    <span class="text-xl font-bold text-slate-900 dark:text-white tracking-tight hidden md:block">
+                        Academic<span class="text-blue-600">Sys</span>
+                    </span>
+                </nuxt-link>
 
-    <div class="flex items-center gap-4">
-      <button @click="toggleDark" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700">
-        <span v-if="isDark">☀️</span>
-        <span v-else>🌙</span>
-      </button>
+                <div class="flex items-center gap-4 md:gap-8">
 
-      <template v-if="authStore?.token">
-        <label class="py-2 text-sm font-semibold">{{ authStore?.user.name }}</label>
-        <button @click.prevent="logout"
-          class="px-4 py-2 text-sm font-semibold text-red-800 bg-red-100 hover:bg-red-200 rounded-lg transition-all duration-200">
-          Logout
-        </button>
-      </template>
+                    <div class="hidden md:flex items-center gap-1">
+                        <nuxt-link v-for="link in navLinks" :key="link.path" :to="link.path"
+                            class="px-3 py-2 rounded-md text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200"
+                            active-class="bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-semibold">
+                            {{ link.name }}
+                        </nuxt-link>
+                    </div>
 
-      <template v-else>
-        <nuxt-link to="/auth/login"
-          class="px-5 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm transition-all">
-          Login
-        </nuxt-link>
-      </template>
-    </div>
-  </nav>
+                    <div class="hidden md:block h-6 w-px bg-slate-200 dark:bg-slate-700 mx-2"></div>
 
-  <main class="max-w-7xl mx-auto">
-    <slot />
-  </main>
+                    <div class="flex items-center gap-3">
+
+                        <button @click="toggleDark"
+                            class="p-2.5 rounded-full text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <svg v-if="!isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                            </svg>
+                            <svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                            </svg>
+                        </button>
+
+                        <div v-if="authStore?.token" class="relative" ref="userMenuRef">
+                            <button @click.stop="isUserMenuOpen = !isUserMenuOpen"
+                                class="flex items-center gap-3 pl-2 pr-1 py-1.5 rounded-full border border-transparent hover:bg-slate-100 dark:hover:bg-slate-800 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                :class="{ 'bg-slate-100 dark:bg-slate-800': isUserMenuOpen }">
+                                <span
+                                    class="text-sm font-semibold text-slate-700 dark:text-slate-200 hidden sm:block ml-2">
+                                    {{ authStore.user.name.split(' ')[0] }}
+                                </span>
+                                <img :src="authStore.user.avatarUrl || `https://ui-avatars.com/api/?name=${authStore.user.name}&background=0D8ABC&color=fff`"
+                                    alt="Avatar"
+                                    class="w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 object-cover">
+                                <svg class="w-4 h-4 text-slate-400" :class="{ 'rotate-180': isUserMenuOpen }" fill="none"
+                                    viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M19 9l-7 7-7-7" />
+                                </svg>
+                            </button>
+
+                            <transition enter-active-class="transition ease-out duration-100"
+                                enter-from-class="transform opacity-0 scale-95"
+                                enter-to-class="transform opacity-100 scale-100"
+                                leave-active-class="transition ease-in duration-75"
+                                leave-from-class="transform opacity-100 scale-100"
+                                leave-to-class="transform opacity-0 scale-95">
+                                <div v-if="isUserMenuOpen"
+                                    class="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-100 dark:border-slate-800 py-2 focus:outline-none z-50">
+                                    <div class="px-4 py-3 border-b border-slate-100 dark:border-slate-800 mb-1">
+                                        <p class="text-xs text-slate-500 dark:text-slate-400 font-medium">Signed in as
+                                        </p>
+                                        <p class="text-sm font-bold text-slate-900 dark:text-white truncate">{{
+                                            authStore.user.email }}</p>
+                                    </div>
+                                    <button @click="navigateTo('/profile')"
+                                        class="w-full text-left px-4 py-2.5 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors">
+                                        <span>👤</span> Your Profile
+                                    </button>
+                                    <button @click="navigateTo('/settings')"
+                                        class="w-full text-left px-4 py-2.5 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors">
+                                        <span>⚙️</span> Settings
+                                    </button>
+                                    <div class="border-t border-slate-100 dark:border-slate-800 mt-1 pt-1">
+                                        <button @click="handleLogout"
+                                            class="w-full text-left px-4 py-2.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-3 transition-colors">
+                                            <span>🚪</span> Sign out
+                                        </button>
+                                    </div>
+                                </div>
+                            </transition>
+                        </div>
+
+                        <template v-else>
+                            <nuxt-link to="/auth/login"
+                                class="hidden sm:inline-flex items-center justify-center px-6 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm shadow-blue-500/30 transition-all">
+                                Sign In
+                            </nuxt-link>
+                        </template>
+
+                        <button @click="isMobileMenuOpen = !isMobileMenuOpen"
+                            class="md:hidden p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
+                            <svg v-if="!isMobileMenuOpen" class="w-7 h-7" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M4 6h16M4 12h16M4 18h16" />
+                            </svg>
+                            <svg v-else class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <transition enter-active-class="transition duration-200 ease-out"
+            enter-from-class="transform -translate-y-4 opacity-0" enter-to-class="transform translate-y-0 opacity-100"
+            leave-active-class="transition duration-150 ease-in" leave-from-class="transform translate-y-0 opacity-100"
+            leave-to-class="transform -translate-y-4 opacity-0">
+            <div v-if="isMobileMenuOpen"
+                class="md:hidden border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-xl">
+                <div class="px-4 pt-2 pb-6 space-y-2">
+                    <nuxt-link v-for="link in navLinks" :key="link.path" :to="link.path"
+                        class="block px-3 py-3 rounded-lg text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-blue-600"
+                        active-class="bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400"
+                        @click="isMobileMenuOpen = false">
+                        {{ link.name }}
+                    </nuxt-link>
+                    <template v-if="!authStore?.token">
+                        <nuxt-link to="/auth/login"
+                            class="block w-full text-center mt-6 px-5 py-3 text-base font-bold text-white bg-blue-600 rounded-lg shadow-lg shadow-blue-500/30">
+                            Sign In
+                        </nuxt-link>
+                    </template>
+                </div>
+            </div>
+        </transition>
+    </nav>
+
+    <main class="w-full min-h-screen">
+        <slot />
+    </main>
 </template>
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index a0fb397..f42db14 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -1,60 +1,60 @@
 <template>
     <title> Profile - {{user.name}}</title>
-    <div class="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-100 pb-12">
+    <div class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
 
         <div class="container mx-auto max-w-7xl px-4 py-8 md:py-12">
             <div class="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12">
 
                 <div class="md:col-span-4 lg:col-span-3 flex flex-col gap-6">
 
-                    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200">
+                    <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-800 transition-colors duration-300">
                         <div class="flex flex-col items-center text-center">
                             <div class="relative inline-block mb-4">
                                 <div
-                                    class="h-32 w-32 rounded-full border-4 border-white bg-slate-100 overflow-hidden shadow-md ring-1 ring-slate-200">
+                                    class="h-32 w-32 rounded-full border-4 border-white dark:border-slate-800 bg-slate-100 dark:bg-slate-800 overflow-hidden shadow-md ring-1 ring-slate-200 dark:ring-slate-700">
                                     <img :src="user.avatarUrl" :alt="user.name"
                                         class="h-full w-full object-cover transition-transform hover:scale-105" />
                                 </div>
-                                <div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white shadow-sm"
+                                <div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white dark:border-slate-900 shadow-sm"
                                     :class="user.isActive ? 'bg-emerald-500' : 'bg-gray-400'" title="Online Status">
                                 </div>
                             </div>
 
-                            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">{{ user.name }}</h1>
-                            <p class="text-sm font-semibold text-slate-500 mb-6 uppercase tracking-wide">{{ user.role }}
+                            <h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">{{ user.name }}</h1>
+                            <p class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-wide">{{ user.role }}
                             </p>
 
                             <div class="w-full space-y-3">
                                 <button
-                                    class="w-full py-2.5 px-4 bg-slate-900 hover:bg-slate-800 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer">
+                                    class="w-full py-2.5 px-4 bg-slate-900 dark:bg-blue-900 hover:bg-slate-800 dark:hover:bg-blue-500 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer">
                                     Edit Profile
                                 </button>
                                 <button
-                                    class="w-full py-2.5 px-4 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-medium rounded-lg text-sm transition-all active:scale-95 cursor-pointer">
+                                    class="w-full py-2.5 px-4 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-medium rounded-lg text-sm transition-all active:scale-95 cursor-pointer">
                                     View Settings
                                 </button>
                             </div>
                         </div>
 
-                        <div class="mt-8 pt-6 border-t border-slate-100 space-y-4">
-                            <div class="flex items-center gap-3 text-sm text-slate-600">
-                                <svg class="w-4 h-4 text-slate-400 shrink-0" fill="none" viewBox="0 0 24 24"
+                        <div class="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800 space-y-4">
+                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
+                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
                                     stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                 </svg>
                                 <span class="truncate">{{ user.email }}</span>
                             </div>
-                            <div class="flex items-center gap-3 text-sm text-slate-600">
-                                <svg class="w-4 h-4 text-slate-400 shrink-0" fill="none" viewBox="0 0 24 24"
+                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
+                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
                                     stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                 </svg>
                                 <span>Polytechnic of Leiria</span>
                             </div>
-                            <div class="flex items-center gap-3 text-sm text-slate-600">
-                                <svg class="w-4 h-4 text-slate-400 shrink-0" fill="none" viewBox="0 0 24 24"
+                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
+                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
                                     stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
@@ -66,15 +66,15 @@
 
                     <div class="grid grid-cols-2 gap-4">
                         <div
-                            class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 text-center hover:border-slate-300 transition-colors">
-                            <div class="text-2xl font-bold text-slate-900">{{ totalCitations }}</div>
-                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Citations
+                            class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
+                            <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ totalCitations }}</div>
+                            <div class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">Citations
                             </div>
                         </div>
                         <div
-                            class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 text-center hover:border-slate-300 transition-colors">
-                            <div class="text-2xl font-bold text-slate-900">{{ user.publications.length }}</div>
-                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Papers
+                            class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
+                            <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ user.publications.length }}</div>
+                            <div class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">Papers
                             </div>
                         </div>
                     </div>
@@ -82,75 +82,75 @@
 
                 <div class="md:col-span-8 lg:col-span-9 space-y-6">
 
-                    <div class="bg-white p-1.5 rounded-xl border border-slate-200 shadow-sm flex gap-1 overflow-x-auto">
+                    <div class="bg-white dark:bg-slate-900 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex gap-1 overflow-x-auto transition-colors">
                         <button
-                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold bg-slate-100 text-slate-900 shadow-sm ring-1 ring-black/5 cursor-pointer">
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5 cursor-pointer transition-colors">
                             Overview
                         </button>
                         <button
-                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 hover:text-slate-900 hover:bg-slate-50 transition-colors cursor-pointer">
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
                             Activity Log
                         </button>
                         <button
-                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 hover:text-slate-900 hover:bg-slate-50 transition-colors cursor-pointer">
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
                             Settings
                         </button>
                     </div>
 
-                    <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
-                        <h2 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">Biography</h2>
-                        <p class="text-slate-700 leading-relaxed text-sm">
+                    <div class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
+                        <h2 class="text-s font-bold text-slate-900 dark:text-slate-100 uppercase tracking-wider mb-3">Biography</h2>
+                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
                             {{ user.biography }}
                         </p>
                     </div>
 
                     <div class="flex items-center justify-between pt-2 px-1">
-                        <h2 class="text-lg font-bold text-slate-900 flex items-center gap-2">
+                        <h2 class="text-lg font-bold text-slate-900 dark:text-slate-300 flex items-center gap-2">
                             Recent Publications
-                            <span class="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded-full">{{
+                            <span class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">{{
                                 user.publications.length }}</span>
                         </h2>
                     </div>
 
                     <div class="flex flex-col gap-4">
                         <div v-if="user.publications.length === 0"
-                            class="text-center py-16 border-2 border-dashed border-slate-200 rounded-xl bg-slate-50/50">
-                            <p class="text-slate-500 font-medium">No publications found yet.</p>
+                            class="text-center py-16 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl bg-slate-50/50 dark:bg-slate-900/50">
+                            <p class="text-slate-500 dark:text-slate-400 font-medium">No publications found yet.</p>
                         </div>
 
                         <div v-for="pub in user.publications" :key="pub.id"
-                            class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md hover:border-blue-300 transition-all duration-200 group relative">
+                            class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 group relative">
                             <div class="flex justify-between items-start gap-4 mb-2">
                                 <h3
-                                    class="text-base font-bold text-slate-900 group-hover:text-blue-600 transition-colors leading-snug">
+                                    class="text-base font-bold text-slate-900 dark:text-slate-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors leading-snug">
                                     <a href="#" class="before:absolute before:inset-0">{{ pub.title }}</a>
                                 </h3>
                                 <span
-                                    class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 text-slate-600 text-xs font-bold border border-slate-200">
+                                    class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700">
                                     {{ pub.publishedYear }}
                                 </span>
                             </div>
 
-                            <p class="text-slate-600 text-sm leading-relaxed line-clamp-2">
+                            <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed line-clamp-2">
                                 {{ pub.abstract }}
                             </p>
 
                             <div
-                                class="mt-4 pt-4 border-t border-slate-50 flex flex-wrap items-center gap-4 text-xs font-medium z-10 relative">
+                                class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium z-10 relative">
                                 <span
-                                    class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 border border-blue-100">
+                                    class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800/50">
                                     <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
                                     {{ pub.field }}
                                 </span>
-                                <span class="inline-flex items-center gap-1.5 text-slate-500">
+                                <span class="inline-flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
                                     <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                                         <path
                                             d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                     </svg>
                                     {{ pub.citations }} Citations
                                 </span>
-                                <span class="text-slate-300">•</span>
-                                <span class="text-slate-500">{{ pub.publishedDate }}</span>
+                                <span class="text-slate-300 dark:text-slate-700">•</span>
+                                <span class="text-slate-500 dark:text-slate-400">{{ pub.publishedDate }}</span>
                             </div>
                         </div>
                     </div>
@@ -196,7 +196,7 @@ const user = ref<User>({
     id: 1,
     name: 'Dr. Maria Santos',
     email: 'maria.santos@ipleiria.pt',
-    biography: 'Focused on distributed systems and IoT security. Currently leading the research group on \"Smart City Infrastructures\" at IPLeiria. My work primarily involves developing scalable architectures for real-time data processing and ensuring data integrity in edge computing environments.',
+    biography: 'Focused on distributed systems and IoT security. Currently leading the research group on "Smart City Infrastructures" at IPLeiria. My work primarily involves developing scalable architectures for real-time data processing and ensuring data integrity in edge computing environments.',
     role: Role.RESEARCHER,
     isActive: true,
     avatarUrl: 'https://api.dicebear.com/7.x/notionists/svg?seed=Maria',

From 9c0dca8f1375138083650503cd601c4f0bcb1223 Mon Sep 17 00:00:00 2001
From: Edd <edd.ddev@gmail.com>
Date: Sun, 18 Jan 2026 01:37:27 +0000
Subject: [PATCH 03/18] forget and recover password functionalities

---
 app/app.vue                           |   6 ++
 app/components/ui/toast/Toast.vue     |  33 ++++++++
 app/layouts/default.vue               |   9 ++-
 app/middleware/guest.global.js        |  20 +++++
 app/pages/auth-test.vue               |  84 --------------------
 app/pages/auth/forgot-password.vue    |  89 +++++++++++++++++++++
 app/pages/auth/login.vue              |  84 ++++++++++----------
 app/pages/index.vue                   |  14 ++--
 app/pages/profile/index.vue           |   9 +--
 app/pages/profile/update-password.vue | 108 ++++++++++++++++++++++++++
 app/stores/notification-store.js      |  22 ++++++
 11 files changed, 333 insertions(+), 145 deletions(-)
 create mode 100644 app/components/ui/toast/Toast.vue
 create mode 100644 app/middleware/guest.global.js
 delete mode 100644 app/pages/auth-test.vue
 create mode 100644 app/pages/auth/forgot-password.vue
 create mode 100644 app/pages/profile/update-password.vue
 create mode 100644 app/stores/notification-store.js

diff --git a/app/app.vue b/app/app.vue
index f8eacfa..fab1d78 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,5 +1,11 @@
+<script setup lang="ts">
+import Toast from './components/ui/toast/Toast.vue';
+</script>
+
 <template>
   <NuxtLayout>
+    <Title>Reddit for scientists</Title>
+    <Toast />
     <NuxtPage />
   </NuxtLayout>
 </template>
diff --git a/app/components/ui/toast/Toast.vue b/app/components/ui/toast/Toast.vue
new file mode 100644
index 0000000..e82e783
--- /dev/null
+++ b/app/components/ui/toast/Toast.vue
@@ -0,0 +1,33 @@
+<script setup>
+const store = useNotificationStore();
+</script>
+
+<template>
+    <div class="fixed bottom-6 right-6 z-[9999] flex flex-col gap-3 w-80">
+        <TransitionGroup name="toast">
+            <div v-for="toast in store.notifications" :key="toast.id" :class="[
+                'p-4 rounded-lg shadow-xl border text-sm font-medium transition-all duration-300',
+                toast.type === 'error'
+                    ? 'bg-red-50 border-red-200 text-red-800'
+                    : 'bg-green-50 border-green-200 text-green-800'
+            ]">
+                <div class="flex justify-between items-center">
+                    <span>{{ toast.message }}</span>
+                    <button class="ml-4 opacity-50 hover:opacity-100" @click="store.remove(toast.id)">×</button>
+                </div>
+            </div>
+        </TransitionGroup>
+    </div>
+</template>
+
+<style scoped>
+.toast-enter-from {
+    opacity: 0;
+    transform: translateX(50px);
+}
+
+.toast-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+</style>
\ No newline at end of file
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index b0fbd8d..018d133 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -40,22 +40,23 @@ onMounted(() => {
     </div>
 
     <div class="flex items-center gap-4">
-      <button @click="toggleDark" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700">
+      <button class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700" @click="toggleDark">
         <span v-if="isDark">☀️</span>
         <span v-else>🌙</span>
       </button>
 
       <template v-if="authStore?.token">
         <label class="py-2 text-sm font-semibold">{{ authStore?.user.name }}</label>
-        <button @click.prevent="logout"
-          class="px-4 py-2 text-sm font-semibold text-red-800 bg-red-100 hover:bg-red-200 rounded-lg transition-all duration-200">
+        <button
+          class="px-4 py-2 text-sm font-semibold text-red-800 bg-red-100 hover:bg-red-200 rounded-lg transition-all duration-200"
+          @click.prevent="logout">
           Logout
         </button>
       </template>
 
       <template v-else>
         <nuxt-link to="/auth/login"
-          class="px-5 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm transition-all">
+          class="px-5 py-2 text-sm font-semibold text-white! bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm transition-all">
           Login
         </nuxt-link>
       </template>
diff --git a/app/middleware/guest.global.js b/app/middleware/guest.global.js
new file mode 100644
index 0000000..71bb559
--- /dev/null
+++ b/app/middleware/guest.global.js
@@ -0,0 +1,20 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+    const authStore = useAuthStore();
+    const isLoggedIn = !!(authStore.user || authStore.token);
+    const mustChangePassword = authStore.user?.mustChangePassword === true;
+
+    const isAuthPage = to.path.startsWith('/auth');
+    const isUpdatePasswordPage = to.path === '/profile/update-password';
+
+    if (!isLoggedIn && !isAuthPage) {
+        return navigateTo('/auth/login');
+    }
+
+    if (isLoggedIn && mustChangePassword && !isUpdatePasswordPage) {
+        return navigateTo('/profile/update-password');
+    }
+
+    if (isLoggedIn && isAuthPage) {
+        return navigateTo('/');
+    }
+});
\ No newline at end of file
diff --git a/app/pages/auth-test.vue b/app/pages/auth-test.vue
deleted file mode 100644
index a4bf2ed..0000000
--- a/app/pages/auth-test.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div>
-    <h1>Login Form</h1>
-    <div>Username: <input v-model="loginFormData.username" /></div>
-    <div>Password: <input v-model="loginFormData.password" /></div>
-    <button @click="login">LOGIN</button>
-    <button @click="reset">RESET</button>
-  </div>
-  <div v-if="token">
-    <h2>API Request Form</h2>
-    <div>
-      Request: <code>GET {{ api }}</code>/ <input v-model="loginFormData.password" />
-    </div>
-    <div>Token: {{ token }}</div>
-    <button @click="sendRequest">SEND REQUEST</button>
-  </div>
-  <div v-if="messages.length > 0">
-    <h2>Messages</h2>
-    <div v-for="message in messages">
-      <pre>{{ message }}</pre>
-    </div>
-  </div>
-</template>
-<script setup>
-const config = useRuntimeConfig();
-const api = config.public.apiBase;
-const loginFormData = reactive({
-  username: null,
-  password: null,
-});
-const token = ref(null);
-const messages = ref([]);
-async function login() {
-  reset();
-  try {
-    await $fetch(`${api}/auth/login`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: loginFormData,
-      onResponse({ request, response, options }) {
-        messages.value.push({
-          method: options.method,
-          request: request,
-          status: response.status,
-          statusText: response.statusText,
-          payload: response._data,
-        });
-        if (response.status == 200) token.value = response._data;
-      },
-    });
-  } catch (e) {
-    console.error("login request failed: ", e);
-  }
-}
-function reset() {
-  token.value = null;
-  messages.value = [];
-}
-async function sendRequest() {
-  try {
-    await $fetch(`${api}/`, {
-      method: "GET",
-      headers: {
-        Accept: "application/json",
-        Authorization: `Bearer ${token.value}`,
-      },
-      onResponse({ request, response, options }) {
-        messages.value.push({
-          method: options.method,
-          request: request,
-          status: response.status,
-          statusText: response.statusText,
-          payload: response._data,
-        });
-      },
-    });
-  } catch (e) {
-    console.error("api request failed: ", e);
-  }
-}
-</script>
diff --git a/app/pages/auth/forgot-password.vue b/app/pages/auth/forgot-password.vue
new file mode 100644
index 0000000..f032be0
--- /dev/null
+++ b/app/pages/auth/forgot-password.vue
@@ -0,0 +1,89 @@
+<script setup>
+const email = ref("");
+const error = ref(null);
+const message = ref("");
+const loading = ref(false);
+
+const config = useRuntimeConfig();
+const api = config.public.apiBase;
+const router = useRouter();
+const notifications = useNotificationStore();
+
+async function handleResetRequest() {
+    error.value = null;
+    message.value = "";
+
+    if (!email.value) {
+        error.value = "Email is required.";
+        return;
+    }
+
+    if (!/^\S+@\S+\.\S+$/.test(email.value)) {
+        error.value = "Please enter a valid email address.";
+        return;
+    }
+
+    loading.value = true;
+
+    try {
+        await $fetch(`${api}/auth/recover-password`, {
+            method: "POST",
+            body: { email: email.value },
+            onResponse({ response }) {
+                if (response.status === 200) {
+                    notifications.success("Password reset email sent.");
+                    router.push("/auth/login")
+                }
+            },
+            onResponseError() {
+                error.value = "Email not found in our records.";
+            }
+        });
+    } catch (e) {
+        console.error(e);
+        if (!error.value) error.value = "Network error: Connection to server failed.";
+    } finally {
+        loading.value = false;
+    }
+}
+</script>
+
+<template>
+    <div
+        class="min-h-screen bg-gray-100 dark:bg-gray-950 flex flex-col items-center justify-center p-6 transition-colors duration-300">
+        <Transition appear enter-active-class="transition duration-700 ease-out"
+            enter-from-class="translate-y-8 opacity-0" enter-to-class="translate-y-0 opacity-100">
+
+            <div
+                class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
+                <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100! mb-8 text-center">Reset Password</h1>
+
+                <form class="space-y-6" @submit.prevent="handleResetRequest">
+                    <div>
+                        <label for="email"
+                            class="block text-sm font-semibold text-gray-600 dark:text-gray-400 mb-1.5 ml-1">
+                            Email Address
+                        </label>
+                        <input id="email" v-model="email" type="email" :class="[
+                            'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
+                            error ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
+                        ]" placeholder="admin@mail.pt">
+                        <p v-if="error" class="mt-1.5 text-xs text-red-500! ml-1 font-medium">{{ error }}</p>
+                    </div>
+
+                    <div class="flex flex-col items-center gap-4 pt-2">
+                        <button type="submit" :disabled="loading"
+                            class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-bold py-3 rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition-all duration-200">
+                            {{ loading ? 'SENDING...' : 'SEND RESET LINK' }}
+                        </button>
+
+                        <nuxt-link to="/auth/login"
+                            class="text-sm text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors">
+                            Back to Login
+                        </nuxt-link>
+                    </div>
+                </form>
+            </div>
+        </Transition>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index 545ad25..e8711ff 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -6,7 +6,7 @@
 
       <div
         class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
-        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center capitalize">Login</h1>
+        <h1 class="text-3xl font-bold text-gray-800 dark:text-white! mb-8 text-center capitalize">Login</h1>
 
         <div v-if="globalError"
           class="mb-6 p-3 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400 text-sm text-center">
@@ -19,24 +19,29 @@
             <input v-model="loginFormData.email" type="email" :class="[
               'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
               errors.email ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
-            ]" placeholder="admin@mail.pt" />
-            <p v-if="errors.email" class="mt-1 text-xs text-red-500 ml-1">{{ errors.email }}</p>
+            ]" placeholder="admin@mail.pt">
+            <p v-if="errors.email" class="mt-1 text-xs text-red-500! ml-1">{{ errors.email }}</p>
           </div>
 
           <div>
             <label class="block text-sm font-semibold text-gray-600 dark:text-gray-400 mb-1.5 ml-1">Password</label>
-            <input v-model="loginFormData.password" type="password" @keyup.enter="handleLogin" :class="[
+            <input v-model="loginFormData.password" type="password" :class="[
               'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
               errors.password ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
-            ]" placeholder="••••••••" />
-            <p v-if="errors.password" class="mt-1 text-xs text-red-500 ml-1">{{ errors.password }}</p>
+            ]" placeholder="••••••••" @keyup.enter="handleLogin">
+            <p v-if="errors.password" class="mt-1 text-xs text-red-500! ml-1">{{ errors.password }}</p>
           </div>
 
-          <div class="flex justify-center pt-4">
-            <button @click="handleLogin" :disabled="loading"
-              class="w-1/2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-bold py-3 rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition-all duration-200">
+          <div class="flex flex-col items-center gap-4 pt-2">
+            <button :disabled="loading"
+              class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-bold py-3 rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition-all duration-200"
+              @click="handleLogin">
               {{ loading ? 'AUTHENTICATING...' : 'LOGIN' }}
             </button>
+
+            <nuxt-link to="/auth/forgot-password" class="text-xs text-blue-600 hover:underline dark:text-blue-400">
+              Forgot Password?
+            </nuxt-link>
           </div>
         </div>
       </div>
@@ -44,28 +49,6 @@
   </div>
 </template>
 
-<style scoped>
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-fade-in-up {
-  animation: fadeInUp 0.6s ease-out forwards;
-}
-
-.delay-200 {
-  animation-delay: 0.2s;
-  opacity: 0;
-}
-</style>
 <script setup>
 import { useAuthStore } from "~/stores/auth-store.js";
 import { storeToRefs } from "pinia";
@@ -111,8 +94,11 @@ async function handleLogin() {
           console.log(response)
           token.value = response._data.token;
           user.value = response._data.user;
-          router.push("/")
-          //getUserInfo();
+          if (response._data.user.mustChangePassword === true) {
+            router.push("/profile/update-password");
+          } else {
+            router.push("/");
+          }
         }
       },
       onResponseError({ response }) {
@@ -130,18 +116,26 @@ async function handleLogin() {
     loading.value = false;
   }
 }
+</script>
+<style scoped>
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
 
-async function getUserInfo() {
-  try {
-    const data = await $fetch(`${api}/auth/user`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${token.value}`,
-      },
-    });
-    user.value = data;
-  } catch (e) {
-    console.error("User info fetch failed:", e);
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
-</script>
\ No newline at end of file
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.delay-200 {
+  animation-delay: 0.2s;
+  opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 9b7905c..64eaa22 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -4,7 +4,7 @@
     <div class="w-full max-w-2xl animate-[fadeInUp_0.6s_ease-out]">
 
       <header class="text-center mb-12">
-        <h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 tracking-tight">
+        <h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white! mb-4 tracking-tight">
           Academic Management System
         </h1>
         <p class="text-lg text-gray-600 dark:text-gray-400 max-w-md mx-auto">
@@ -15,17 +15,17 @@
       <nav class="grid grid-cols-1 md:grid-cols-2 gap-6">
 
         <nuxt-link to="/auth/login"
-          class="group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+          class="no-underline text-current block group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
           <div class="text-3xl mb-4 group-hover:scale-110 transition-transform">🔐</div>
-          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-2">Access Portal</h2>
+          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100! mb-2">Access Portal</h2>
           <p class="text-sm text-gray-500 dark:text-gray-400">Sign in to manage your personalized dashboard and academic
             data.</p>
         </nuxt-link>
 
         <nuxt-link to="/auth-test"
-          class="group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+          class="no-underline text-current block group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
           <div class="text-3xl mb-4 group-hover:scale-110 transition-transform">🛠️</div>
-          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-2">System Test</h2>
+          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100! mb-2">System Test</h2>
           <p class="text-sm text-gray-500 dark:text-gray-400">Verify API connections and authentication state
             persistence.</p>
         </nuxt-link>
@@ -36,8 +36,8 @@
         <div
           class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 text-xs font-medium text-gray-600 dark:text-gray-400">
           <span class="relative flex h-2 w-2">
-            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
-            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
           </span>
           System Operational
         </div>
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index a0fb397..5ececc7 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <title> Profile - {{user.name}}</title>
+    <title> Profile - {{ user.name }}</title>
     <div class="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-100 pb-12">
 
         <div class="container mx-auto max-w-7xl px-4 py-8 md:py-12">
@@ -13,11 +13,10 @@
                                 <div
                                     class="h-32 w-32 rounded-full border-4 border-white bg-slate-100 overflow-hidden shadow-md ring-1 ring-slate-200">
                                     <img :src="user.avatarUrl" :alt="user.name"
-                                        class="h-full w-full object-cover transition-transform hover:scale-105" />
+                                        class="h-full w-full object-cover transition-transform hover:scale-105">
                                 </div>
                                 <div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white shadow-sm"
-                                    :class="user.isActive ? 'bg-emerald-500' : 'bg-gray-400'" title="Online Status">
-                                </div>
+                                    :class="user.isActive ? 'bg-emerald-500' : 'bg-gray-400'" title="Online Status" />
                             </div>
 
                             <h1 class="text-2xl font-bold text-slate-900 tracking-tight">{{ user.name }}</h1>
@@ -139,7 +138,7 @@
                                 class="mt-4 pt-4 border-t border-slate-50 flex flex-wrap items-center gap-4 text-xs font-medium z-10 relative">
                                 <span
                                     class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 border border-blue-100">
-                                    <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
+                                    <span class="w-1.5 h-1.5 rounded-full bg-blue-500" />
                                     {{ pub.field }}
                                 </span>
                                 <span class="inline-flex items-center gap-1.5 text-slate-500">
diff --git a/app/pages/profile/update-password.vue b/app/pages/profile/update-password.vue
new file mode 100644
index 0000000..b459690
--- /dev/null
+++ b/app/pages/profile/update-password.vue
@@ -0,0 +1,108 @@
+<script setup>
+const config = useRuntimeConfig();
+const api = config.public.apiBase;
+const authStore = useAuthStore();
+const notifications = useNotificationStore();
+const router = useRouter();
+
+const passwordData = reactive({
+    oldPassword: "",
+    newPassword: "",
+    confirmNewPassword: ""
+});
+
+const error = ref(null);
+const loading = ref(false);
+
+async function handleUpdatePassword() {
+    error.value = null;
+
+    if (passwordData.newPassword !== passwordData.confirmNewPassword) {
+        error.value = "Passwords do not match.";
+        return;
+    }
+
+    loading.value = true;
+
+    try {
+        await $fetch(`${api}/users/me/password`, {
+            method: "PUT",
+            headers: {
+                Authorization: `Bearer ${authStore.token}`
+            },
+            body: {
+                oldPassword: passwordData.oldPassword,
+                newPassword: passwordData.newPassword,
+                confirmNewPassword: passwordData.confirmNewPassword
+            },
+            onResponse({ response }) {
+                if (response.status === 200) {
+                    notifications.success("Password updated successfully.");
+                    authStore.user.mustChangePassword = false;
+                    router.push("/");
+                }
+            }
+        });
+    } catch (e) {
+        error.value = "Failed to update password. Please check your current password";
+    } finally {
+        loading.value = false;
+    }
+}
+</script>
+
+<template>
+    <div
+        class="min-h-screen bg-gray-100 dark:bg-gray-950 flex flex-col items-center justify-center p-6 transition-colors duration-300">
+        <Transition appear enter-active-class="transition duration-700 ease-out"
+            enter-from-class="translate-y-8 opacity-0" enter-to-class="translate-y-0 opacity-100">
+
+            <div
+                class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
+                <h1 class="text-2xl font-bold text-gray-800 dark:text-white! mb-2 text-center">Password Update</h1>
+                <p class="text-sm text-gray-500 dark:text-gray-400 mb-8 text-center">Please update your password to
+                    secure your account.</p>
+
+                <form class="space-y-5" @submit.prevent="handleUpdatePassword">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-600 dark:text-gray-400 mb-1.5 ml-1">Current
+                            Password</label>
+                        <input v-model="passwordData.oldPassword" type="password" required
+                            class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white"
+                            placeholder="••••••••">
+                    </div>
+
+                    <hr class="border-gray-100 dark:border-gray-800 my-2">
+
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-600 dark:text-gray-400 mb-1.5 ml-1">New
+                            Password</label>
+                        <input v-model="passwordData.newPassword" type="password" required
+                            class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white"
+                            placeholder="••••••••">
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-600 dark:text-gray-400 mb-1.5 ml-1">Confirm
+                            New Password</label>
+                        <input v-model="passwordData.confirmNewPassword" type="password" required
+                            class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white"
+                            placeholder="••••••••">
+                    </div>
+
+                    <div v-if="error"
+                        class="p-3 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400 text-xs text-center">
+                        {{ error }}
+                    </div>
+
+                    <div class="flex flex-col items-center gap-4 pt-4">
+                        <button type="submit" :disabled="loading"
+                            class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-bold py-3 rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition-all duration-200 capitalize">
+                            {{ loading ? 'Updating...' : 'Update Password' }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </Transition>
+    </div>
+</template>
\ No newline at end of file
diff --git a/app/stores/notification-store.js b/app/stores/notification-store.js
new file mode 100644
index 0000000..d7373c2
--- /dev/null
+++ b/app/stores/notification-store.js
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+
+export const useNotificationStore = defineStore('notifications', {
+    state: () => ({
+        notifications: []
+    }),
+    actions: {
+        add(message, type = 'success', duration = 3000) {
+            const id = Date.now()
+            this.notifications.push({ id, message, type })
+
+            setTimeout(() => {
+                this.remove(id)
+            }, duration)
+        },
+        remove(id) {
+            this.notifications = this.notifications.filter(n => n.id !== id)
+        },
+        error(msg) { this.add(msg, 'error') },
+        success(msg) { this.add(msg, 'success') }
+    }
+})
\ No newline at end of file

From 55287b026b5d52c86604845977d0be094eb84030 Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Tue, 20 Jan 2026 13:45:02 +0000
Subject: [PATCH 04/18] hotpatch: fixed the fucking profile

---
 app/pages/profile/index.vue | 270 +++++++++++++++++-------------------
 1 file changed, 128 insertions(+), 142 deletions(-)

diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 0ce60e7..c1fc5c8 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -1,175 +1,161 @@
 <template>
-    <title> Profile - {{ user.name }}</title>
-    <div
-        class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
+    <title> Profile - {{user.name}}</title>
+    <div class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
+
         <div class="container mx-auto max-w-7xl px-4 py-8 md:py-12">
             <div class="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12">
 
                 <div class="md:col-span-4 lg:col-span-3 flex flex-col gap-6">
 
-                    <div
-                        class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-800 transition-colors duration-300">
+                    <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-800 transition-colors duration-300">
                         <div class="flex flex-col items-center text-center">
                             <div class="relative inline-block mb-4">
                                 <div
                                     class="h-32 w-32 rounded-full border-4 border-white dark:border-slate-800 bg-slate-100 dark:bg-slate-800 overflow-hidden shadow-md ring-1 ring-slate-200 dark:ring-slate-700">
                                     <img :src="user.avatarUrl" :alt="user.name"
-                                        class="h-full w-full object-cover transition-transform hover:scale-105">
+                                        class="h-full w-full object-cover transition-transform hover:scale-105" />
                                 </div>
-                                <div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white shadow-sm"
-                                    :class="user.isActive ? 'bg-emerald-500' : 'bg-gray-400'" title="Online Status" />
+                                <div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white dark:border-slate-900 shadow-sm"
+                                    :class="user.isActive ? 'bg-emerald-500' : 'bg-gray-400'" title="Online Status">
+                                </div>
+                            </div>
+
+                            <h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">{{ user.name }}</h1>
+                            <p class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-wide">{{ user.role }}
+                            </p>
+
+                            <div class="w-full space-y-3">
+                                <button
+                                    class="w-full py-2.5 px-4 bg-slate-900 dark:bg-blue-600 hover:bg-slate-800 dark:hover:bg-blue-500 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer">
+                                    Edit Profile
+                                </button>
+                                <button
+                                    class="w-full py-2.5 px-4 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-medium rounded-lg text-sm transition-all active:scale-95 cursor-pointer">
+                                    View Settings
+                                </button>
                             </div>
                         </div>
 
-                        <h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">{{ user.name }}
-                        </h1>
-                        <p
-                            class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-wide">
-                            {{ user.role }}
+                        <div class="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800 space-y-4">
+                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
+                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                                </svg>
+                                <span class="truncate">{{ user.email }}</span>
+                            </div>
+                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
+                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                                </svg>
+                                <span>Polytechnic of Leiria</span>
+                            </div>
+                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
+                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
+                                <span>Joined {{ formattedDate }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-4">
+                        <div
+                            class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
+                            <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ totalCitations }}</div>
+                            <div class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">Citations
+                            </div>
+                        </div>
+                        <div
+                            class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
+                            <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ user.publications.length }}</div>
+                            <div class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">Papers
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="md:col-span-8 lg:col-span-9 space-y-6">
+
+                    <div class="bg-white dark:bg-slate-900 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex gap-1 overflow-x-auto transition-colors">
+                        <button
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5 cursor-pointer transition-colors">
+                            Overview
+                        </button>
+                        <button
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
+                            Activity Log
+                        </button>
+                        <button
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
+                            Settings
+                        </button>
+                    </div>
+
+                    <div class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
+                        <h2 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">Biography</h2>
+                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
+                            {{ user.biography }}
                         </p>
-
-                        <div class="w-full space-y-3">
-                            <button
-                                class="w-full py-2.5 px-4 bg-slate-900 dark:bg-blue-900 hover:bg-slate-800 dark:hover:bg-blue-500 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer">
-                                Edit Profile
-                            </button>
-                            <button
-                                class="w-full py-2.5 px-4 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-medium rounded-lg text-sm transition-all active:scale-95 cursor-pointer">
-                                View Settings
-                            </button>
-                        </div>
                     </div>
 
-                    <div class="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800 space-y-4">
-                        <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
-                            <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                            </svg>
-                            <span class="truncate">{{ user.email }}</span>
-                        </div>
-                        <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
-                            <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                            </svg>
-                            <span>Polytechnic of Leiria</span>
-                        </div>
-                        <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
-                            <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                            </svg>
-                            <span>Joined {{ formattedDate }}</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="grid grid-cols-2 gap-4">
-                    <div
-                        class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
-                        <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ totalCitations }}</div>
-                        <div
-                            class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
-                            Citations
-                        </div>
-                    </div>
-                    <div
-                        class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
-                        <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ user.publications.length }}
-                        </div>
-                        <div
-                            class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
-                            Papers
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="md:col-span-8 lg:col-span-9 space-y-6">
-
-                <div
-                    class="bg-white dark:bg-slate-900 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex gap-1 overflow-x-auto transition-colors">
-                    <button
-                        class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5 cursor-pointer transition-colors">
-                        Overview
-                    </button>
-                    <button
-                        class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
-                        Activity Log
-                    </button>
-                    <button
-                        class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
-                        Settings
-                    </button>
-                </div>
-
-                <div
-                    class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
-                    <h2 class="text-s font-bold text-slate-900 dark:text-slate-100 uppercase tracking-wider mb-3">
-                        Biography</h2>
-                    <p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
-                        {{ user.biography }}
-                    </p>
-                </div>
-
-                <div class="flex items-center justify-between pt-2 px-1">
-                    <h2 class="text-lg font-bold text-slate-900 dark:text-slate-300 flex items-center gap-2">
-                        Recent Publications
-                        <span
-                            class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">{{
+                    <div class="flex items-center justify-between pt-2 px-1">
+                        <h2 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
+                            Recent Publications
+                            <span class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">{{
                                 user.publications.length }}</span>
-                    </h2>
-                </div>
-
-                <div class="flex flex-col gap-4">
-                    <div v-if="user.publications.length === 0"
-                        class="text-center py-16 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl bg-slate-50/50 dark:bg-slate-900/50">
-                        <p class="text-slate-500 dark:text-slate-400 font-medium">No publications found yet.</p>
+                        </h2>
                     </div>
 
-                    <div v-for="pub in user.publications" :key="pub.id"
-                        class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 group relative">
-                        <div class="flex justify-between items-start gap-4 mb-2">
-                            <h3
-                                class="text-base font-bold text-slate-900 dark:text-slate-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors leading-snug">
-                                <a href="#" class="before:absolute before:inset-0">{{ pub.title }}</a>
-                            </h3>
-                            <span
-                                class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700">
-                                {{ pub.publishedYear }}
-                            </span>
+                    <div class="flex flex-col gap-4">
+                        <div v-if="user.publications.length === 0"
+                            class="text-center py-16 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl bg-slate-50/50 dark:bg-slate-900/50">
+                            <p class="text-slate-500 dark:text-slate-400 font-medium">No publications found yet.</p>
                         </div>
 
-                        <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed line-clamp-2">
-                            {{ pub.abstract }}
-                        </p>
+                        <div v-for="pub in user.publications" :key="pub.id"
+                            class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 group relative">
+                            <div class="flex justify-between items-start gap-4 mb-2">
+                                <h3
+                                    class="text-base font-bold text-slate-900 dark:text-slate-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors leading-snug">
+                                    <a href="#" class="before:absolute before:inset-0">{{ pub.title }}</a>
+                                </h3>
+                                <span
+                                    class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700">
+                                    {{ pub.publishedYear }}
+                                </span>
+                            </div>
 
-                        <div
-                            class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium z-10 relative">
-                            <span
-                                class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 border border-blue-100">
-                                <span class="w-1.5 h-1.5 rounded-full bg-blue-500">
+                            <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed line-clamp-2">
+                                {{ pub.abstract }}
+                            </p>
+
+                            <div
+                                class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium z-10 relative">
+                                <span
+                                    class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800/50">
+                                    <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
                                     {{ pub.field }}
                                 </span>
-                            </span>
-                            <span class="inline-flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
-                                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                                {{ pub.citations }} Citations
-                            </span>
-                            <span class="text-slate-300 dark:text-slate-700">•</span>
-                            <span class="text-slate-500 dark:text-slate-400">{{ pub.publishedDate }}</span>
+                                <span class="inline-flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
+                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path
+                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                                    </svg>
+                                    {{ pub.citations }} Citations
+                                </span>
+                                <span class="text-slate-300 dark:text-slate-700">•</span>
+                                <span class="text-slate-500 dark:text-slate-400">{{ pub.publishedDate }}</span>
+                            </div>
                         </div>
                     </div>
 
                 </div>
-
             </div>
         </div>
     </div>

From c2d4b9da27d29109c718175f1c5190d4eabc9601 Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Tue, 20 Jan 2026 20:44:09 +0000
Subject: [PATCH 05/18] feat: Profile Info Fetch. Admin Panel. Profile
 Settings. Profile Log. Fixed Navbar. Fixed Routing. Fixed Overall desgin
 flaws

---
 app/app.vue                        |   1 -
 app/layouts/default.vue            | 318 ++++++------
 app/pages/admin/users/index.vue    | 747 +++++++++++++++++++++++++++++
 app/pages/auth/forgot-password.vue |   3 +-
 app/pages/auth/login.vue           |   3 +-
 app/pages/index.vue                |   3 +-
 app/pages/profile/index.vue        | 475 ++++++++++++------
 7 files changed, 1258 insertions(+), 292 deletions(-)
 create mode 100644 app/pages/admin/users/index.vue

diff --git a/app/app.vue b/app/app.vue
index fab1d78..54c729e 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -4,7 +4,6 @@ import Toast from './components/ui/toast/Toast.vue';
 
 <template>
   <NuxtLayout>
-    <Title>Reddit for scientists</Title>
     <Toast />
     <NuxtPage />
   </NuxtLayout>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index deb6553..a6a24c2 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,10 +1,174 @@
+<template>
+    <nav
+        class="sticky top-0 z-50 w-full border-b border-slate-200/80 dark:border-slate-800/80 bg-white/80 dark:bg-slate-900 backdrop-blur-xl transition-colors duration-300">
+        <div class="w-full px-6 md:px-8">
+            <div class="flex items-center justify-between h-16">
+
+                <nuxt-link to="/" class="flex items-center gap-3 group flex-shrink-0">
+                    <div class="relative">
+                        <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg blur opacity-25 group-hover:opacity-40 transition duration-300"></div>
+                        <div
+                            class="relative w-10 h-10 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-blue-500/30">
+                            A
+                        </div>
+                    </div>
+                    <span class="text-xl font-bold text-slate-900 dark:text-white tracking-tight hidden md:block">
+                        Academic<span class="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">Sys</span>
+                    </span>
+                </nuxt-link>
+
+                <div class="flex items-center gap-4 md:gap-8">
+
+                    <div class="hidden md:flex items-center gap-1">
+                        <nuxt-link v-for="link in navLinks" :key="link.path" :to="link.path"
+                            class="px-4 py-2 rounded-lg text-sm font-semibold text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200"
+                            active-class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 text-blue-600 dark:text-blue-400 shadow-sm">
+                            {{ link.name }}
+                        </nuxt-link>
+                    </div>
+
+                    <div class="hidden md:block h-6 w-px bg-slate-200 dark:bg-slate-700 mx-2"></div>
+
+                    <div class="flex items-center gap-3">
+
+                        <button @click="toggleDark"
+                            class="p-2.5 rounded-full text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-700 dark:hover:text-slate-300 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50">
+                            <svg v-if="!isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                            </svg>
+                            <svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                            </svg>
+                        </button>
+
+                        <div v-if="authStore?.token" class="relative" ref="userMenuRef">
+                            <button @click.stop="isUserMenuOpen = !isUserMenuOpen"
+                                class="flex items-center gap-3 pl-3 pr-2 py-1.5 rounded-full border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                                :class="{ 'bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600': isUserMenuOpen }">
+                                <span
+                                    class="text-sm font-semibold text-slate-700 dark:text-slate-200 hidden sm:block">
+                                    {{ authStore.user.name.split(' ')[0] }}
+                                </span>
+                                <div class="relative">
+                                    <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-30"></div>
+                                    <img :src="authStore.user.avatarUrl || `https://ui-avatars.com/api/?name=${authStore.user.name}&background=0D8ABC&color=fff`"
+                                        alt="Avatar"
+                                        class="relative w-9 h-9 rounded-full border-2 border-white dark:border-slate-800 object-cover shadow-md">
+                                </div>
+                                <svg class="w-4 h-4 text-slate-400 transition-transform duration-200" :class="{ 'rotate-180': isUserMenuOpen }"
+                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M19 9l-7 7-7-7" />
+                                </svg>
+                            </button>
+
+                            <transition enter-active-class="transition ease-out duration-100"
+                                enter-from-class="transform opacity-0 scale-95"
+                                enter-to-class="transform opacity-100 scale-100"
+                                leave-active-class="transition ease-in duration-75"
+                                leave-from-class="transform opacity-100 scale-100"
+                                leave-to-class="transform opacity-0 scale-95">
+                                <div v-if="isUserMenuOpen"
+                                    class="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-800 py-2 focus:outline-none z-50 ring-1 ring-black/5 dark:ring-white/5">
+                                    <div class="px-4 py-3 border-b border-slate-100 dark:border-slate-800 mb-1">
+                                        <p class="text-xs text-slate-500 dark:text-slate-400 font-semibold uppercase tracking-wide">Signed in as
+                                        </p>
+                                        <p class="text-sm font-bold text-slate-900 dark:text-white truncate mt-1">{{
+                                            authStore.user.email }}</p>
+                                    </div>
+                                    <button @click="navigateTo('/profile')"
+                                        class="w-full text-left px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors">
+                                        <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                                        </svg>
+                                        Your Profile
+                                    </button>
+                                    <div v-if="authStore.user.role == 'ADMINISTRATOR'">
+                                        <button @click="navigateTo('/admin/users')"
+                                            class="w-full text-left px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors">
+                                            <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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-10c1.657 0 3 .895 3 2s-1.343 2-3 2-3 .895-3 2 1.343 2 3 2m0-10v10m0 0l3-3m-3 3l-3-3" />
+                                            </svg>
+                                            Admin Dashboard
+                                        </button>
+                                    </div>
+                                    <div class="border-t border-slate-100 dark:border-slate-800 mt-1 pt-1">
+                                        <button @click="handleLogout"
+                                            class="w-full text-left px-4 py-2.5 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-3 transition-colors">
+                                            <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                                            </svg>
+                                            Sign out
+                                        </button>
+                                    </div>
+                                </div>
+                            </transition>
+                        </div>
+
+                        <template v-else>
+                            <nuxt-link to="/auth/login"
+                                class="hidden sm:inline-flex items-center justify-center px-6 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 rounded-lg shadow-lg shadow-blue-500/30 hover:shadow-blue-500/40 transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0">
+                                Sign In
+                            </nuxt-link>
+                        </template>
+
+                        <button @click="isMobileMenuOpen = !isMobileMenuOpen"
+                            class="md:hidden p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
+                            <svg v-if="!isMobileMenuOpen" class="w-7 h-7" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M4 6h16M4 12h16M4 18h16" />
+                            </svg>
+                            <svg v-else class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <transition enter-active-class="transition duration-200 ease-out"
+                    enter-from-class="transform -translate-y-4 opacity-0"
+                    enter-to-class="transform translate-y-0 opacity-100"
+                    leave-active-class="transition duration-150 ease-in"
+                    leave-from-class="transform translate-y-0 opacity-100"
+                    leave-to-class="transform -translate-y-4 opacity-0">
+                    <div v-if="isMobileMenuOpen"
+                        class="md:hidden absolute left-0 right-0 top-16 border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-xl">
+                        <div class="px-4 pt-2 pb-6 space-y-2">
+                            <nuxt-link v-for="link in navLinks" :key="link.path" :to="link.path"
+                                class="block px-4 py-3 rounded-lg text-base font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                                active-class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/30 dark:to-indigo-900/30 text-blue-600 dark:text-blue-400"
+                                @click="isMobileMenuOpen = false">
+                                {{ link.name }}
+                            </nuxt-link>
+                            <template v-if="!authStore?.token">
+                                <nuxt-link to="/auth/login"
+                                    class="block w-full text-center mt-6 px-5 py-3 text-base font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg shadow-lg shadow-blue-500/30">
+                                    Sign In
+                                </nuxt-link>
+                            </template>
+                        </div>
+                    </div>
+                </transition>
+            </div>
+        </div>
+    </nav>
+
+    <main class="w-full min-h-screen bg-slate-50 dark:bg-slate-950">
+        <slot />
+    </main>
+</template>
+
 <script setup>
 import { useAuthStore } from "~/stores/auth-store.js";
 
 const authStore = useAuthStore();
 const router = useRouter();
 
-// State (No more isScrolled)
+// State
 const isDark = ref(false);
 const isUserMenuOpen = ref(false);
 const isMobileMenuOpen = ref(false);
@@ -24,10 +188,8 @@ function toggleDark() {
 
 // Navigation Links
 const navLinks = [
-    { name: 'Dashboard', path: '/' },
-    { name: 'Courses', path: '/courses' },
-    { name: 'Students', path: '/students' },
-    { name: 'Schedule', path: '/schedule' },
+    { name: 'Home', path: '/' },
+    { name: 'Profile', path: '/profile' },
 ];
 
 function handleLogout() {
@@ -65,149 +227,3 @@ onUnmounted(() => {
 });
 </script>
 
-<template>
-    <nav
-        class="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-slate-800 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md transition-colors duration-300">
-        <div class="w-full px-6 md:px-8">
-            <div class="flex items-center justify-between h-16">
-
-                <nuxt-link to="/" class="flex items-center gap-2 group flex-shrink-0">
-                    <div
-                        class="w-9 h-9 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold text-xl shadow-blue-500/20 shadow-lg group-hover:scale-110 transition-transform">
-                        A
-                    </div>
-                    <span class="text-xl font-bold text-slate-900 dark:text-white tracking-tight hidden md:block">
-                        Academic<span class="text-blue-600">Sys</span>
-                    </span>
-                </nuxt-link>
-
-                <div class="flex items-center gap-4 md:gap-8">
-
-                    <div class="hidden md:flex items-center gap-1">
-                        <nuxt-link v-for="link in navLinks" :key="link.path" :to="link.path"
-                            class="px-3 py-2 rounded-md text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200"
-                            active-class="bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-semibold">
-                            {{ link.name }}
-                        </nuxt-link>
-                    </div>
-
-                    <div class="hidden md:block h-6 w-px bg-slate-200 dark:bg-slate-700 mx-2"></div>
-
-                    <div class="flex items-center gap-3">
-
-                        <button @click="toggleDark"
-                            class="p-2.5 rounded-full text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <svg v-if="!isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                            </svg>
-                            <svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                            </svg>
-                        </button>
-
-                        <div v-if="authStore?.token" class="relative" ref="userMenuRef">
-                            <button @click.stop="isUserMenuOpen = !isUserMenuOpen"
-                                class="flex items-center gap-3 pl-2 pr-1 py-1.5 rounded-full border border-transparent hover:bg-slate-100 dark:hover:bg-slate-800 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                :class="{ 'bg-slate-100 dark:bg-slate-800': isUserMenuOpen }">
-                                <span
-                                    class="text-sm font-semibold text-slate-700 dark:text-slate-200 hidden sm:block ml-2">
-                                    {{ authStore.user.name.split(' ')[0] }}
-                                </span>
-                                <img :src="authStore.user.avatarUrl || `https://ui-avatars.com/api/?name=${authStore.user.name}&background=0D8ABC&color=fff`"
-                                    alt="Avatar"
-                                    class="w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 object-cover">
-                                <svg class="w-4 h-4 text-slate-400" :class="{ 'rotate-180': isUserMenuOpen }"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M19 9l-7 7-7-7" />
-                                </svg>
-                            </button>
-
-                            <transition enter-active-class="transition ease-out duration-100"
-                                enter-from-class="transform opacity-0 scale-95"
-                                enter-to-class="transform opacity-100 scale-100"
-                                leave-active-class="transition ease-in duration-75"
-                                leave-from-class="transform opacity-100 scale-100"
-                                leave-to-class="transform opacity-0 scale-95">
-                                <div v-if="isUserMenuOpen"
-                                    class="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-100 dark:border-slate-800 py-2 focus:outline-none z-50">
-                                    <div class="px-4 py-3 border-b border-slate-100 dark:border-slate-800 mb-1">
-                                        <p class="text-xs text-slate-500 dark:text-slate-400 font-medium">Signed in as
-                                        </p>
-                                        <p class="text-sm font-bold text-slate-900 dark:text-white truncate">{{
-                                            authStore.user.email }}</p>
-                                    </div>
-                                    <button @click="navigateTo('/profile')"
-                                        class="w-full text-left px-4 py-2.5 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors">
-                                        <span>👤</span> Your Profile
-                                    </button>
-                                    <button @click="navigateTo('/settings')"
-                                        class="w-full text-left px-4 py-2.5 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors">
-                                        <span>⚙️</span> Settings
-                                    </button>
-                                    <div class="border-t border-slate-100 dark:border-slate-800 mt-1 pt-1">
-                                        <button @click="handleLogout"
-                                            class="w-full text-left px-4 py-2.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-3 transition-colors">
-                                            <span>🚪</span> Sign out
-                                        </button>
-                                    </div>
-                                </div>
-                            </transition>
-                        </div>
-
-                        <template v-else>
-                            <nuxt-link to="/auth/login"
-                                class="hidden sm:inline-flex items-center justify-center px-6 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm shadow-blue-500/30 transition-all">
-                                Sign In
-                            </nuxt-link>
-                        </template>
-
-                        <button @click="isMobileMenuOpen = !isMobileMenuOpen"
-                            class="md:hidden p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
-                            <svg v-if="!isMobileMenuOpen" class="w-7 h-7" fill="none" viewBox="0 0 24 24"
-                                stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M4 6h16M4 12h16M4 18h16" />
-                            </svg>
-                            <svg v-else class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-
-                <transition enter-active-class="transition duration-200 ease-out"
-                    enter-from-class="transform -translate-y-4 opacity-0"
-                    enter-to-class="transform translate-y-0 opacity-100"
-                    leave-active-class="transition duration-150 ease-in"
-                    leave-from-class="transform translate-y-0 opacity-100"
-                    leave-to-class="transform -translate-y-4 opacity-0">
-                    <div v-if="isMobileMenuOpen"
-                        class="md:hidden border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-xl">
-                        <div class="px-4 pt-2 pb-6 space-y-2">
-                            <nuxt-link v-for="link in navLinks" :key="link.path" :to="link.path"
-                                class="block px-3 py-3 rounded-lg text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-blue-600"
-                                active-class="bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400"
-                                @click="isMobileMenuOpen = false">
-                                {{ link.name }}
-                            </nuxt-link>
-                            <template v-if="!authStore?.token">
-                                <nuxt-link to="/auth/login"
-                                    class="block w-full text-center mt-6 px-5 py-3 text-base font-bold text-white bg-blue-600 rounded-lg shadow-lg shadow-blue-500/30">
-                                    Sign In
-                                </nuxt-link>
-                            </template>
-                        </div>
-                    </div>
-                </transition>
-            </div>
-        </div>
-    </nav>
-
-    <main class="w-full min-h-screen">
-        <slot />
-    </main>
-</template>
diff --git a/app/pages/admin/users/index.vue b/app/pages/admin/users/index.vue
new file mode 100644
index 0000000..56c4a9b
--- /dev/null
+++ b/app/pages/admin/users/index.vue
@@ -0,0 +1,747 @@
+<template>
+    <title>Team Management - Reddit for Academic Papers</title>
+    <div
+        class="min-h-screen bg-slate-50 dark:bg-slate-950 p-4 md:p-8 font-sans text-slate-900 dark:text-slate-200 transition-colors duration-300">
+
+        <div class="max-w-7xl mx-auto space-y-8">
+
+            <!-- Header Section -->
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+                <div>
+                    <h1 class="text-3xl md:text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white mb-2">
+                        Team Management
+                    </h1>
+                    <p class="text-slate-600 dark:text-slate-400">
+                        Manage user accounts, roles, and system access permissions
+                    </p>
+                </div>
+                <button @click="openCreateModal"
+                    class="group relative inline-flex items-center gap-2.5 px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 transform hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200">
+                    <div
+                        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl blur opacity-30 group-hover:opacity-50 transition duration-200">
+                    </div>
+                    <svg class="relative w-5 h-5 transition-transform group-hover:rotate-90 duration-300" fill="none"
+                        viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                    </svg>
+                    <span class="relative">Add Team Member</span>
+                </button>
+            </div>
+
+            <!-- Stats Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="relative group">
+                    <div
+                        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-0 group-hover:opacity-20 transition duration-300">
+                    </div>
+                    <div
+                        class="relative bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-md transition-all duration-300">
+                        <div class="flex items-center gap-4">
+                            <div class="relative">
+                                <div class="absolute -inset-1 bg-blue-500/20 rounded-xl blur"></div>
+                                <div
+                                    class="relative p-3 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/30">
+                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                                    </svg>
+                                </div>
+                            </div>
+                            <div>
+                                <div
+                                    class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
+                                    {{ users.length }}
+                                </div>
+                                <div
+                                    class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
+                                    Total Users</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="relative group">
+                    <div
+                        class="absolute -inset-0.5 bg-gradient-to-r from-emerald-600 to-teal-600 rounded-2xl blur opacity-0 group-hover:opacity-20 transition duration-300">
+                    </div>
+                    <div
+                        class="relative bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-md transition-all duration-300">
+                        <div class="flex items-center gap-4">
+                            <div class="relative">
+                                <div class="absolute -inset-1 bg-emerald-500/20 rounded-xl blur"></div>
+                                <div
+                                    class="relative p-3 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 text-white shadow-lg shadow-emerald-500/30">
+                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    </svg>
+                                </div>
+                            </div>
+                            <div>
+                                <div
+                                    class="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
+                                    {{ activeCount }}
+                                </div>
+                                <div
+                                    class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
+                                    Active Accounts</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="relative group">
+                    <div
+                        class="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl blur opacity-0 group-hover:opacity-20 transition duration-300">
+                    </div>
+                    <div
+                        class="relative bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-md transition-all duration-300">
+                        <div class="flex items-center gap-4">
+                            <div class="relative">
+                                <div class="absolute -inset-1 bg-purple-500/20 rounded-xl blur"></div>
+                                <div
+                                    class="relative p-3 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg shadow-purple-500/30">
+                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                                    </svg>
+                                </div>
+                            </div>
+                            <div>
+                                <div
+                                    class="text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+                                    {{ adminCount }}
+                                </div>
+                                <div
+                                    class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
+                                    Administrators</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Search Bar -->
+            <div class="relative group">
+                <div
+                    class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-0 group-hover:opacity-10 transition duration-300">
+                </div>
+                <div
+                    class="relative bg-white dark:bg-slate-900 p-1.5 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 hover:border-blue-300 dark:hover:border-blue-700/50 transition-all">
+                    <div class="flex items-center gap-3 px-4">
+                        <svg class="w-5 h-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                        </svg>
+                        <input v-model="searchQuery" type="text" placeholder="Search by name or email..."
+                            class="flex-1 py-3 bg-transparent border-none text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none text-base">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Users Table -->
+            <div class="relative group">
+                <div
+                    class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-0 group-hover:opacity-5 transition duration-500">
+                </div>
+                <div
+                    class="relative bg-white dark:bg-slate-900 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-800 overflow-hidden">
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr
+                                    class="bg-gradient-to-r from-slate-50 to-slate-100/50 dark:from-slate-800/50 dark:to-slate-800/30 border-b border-slate-200 dark:border-slate-800">
+                                    <th
+                                        class="p-6 pl-8 text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider">
+                                        User</th>
+                                    <th
+                                        class="p-6 text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider">
+                                        Role</th>
+                                    <th
+                                        class="p-6 text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider">
+                                        Status</th>
+                                    <th
+                                        class="p-6 pr-8 text-right text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider">
+                                        Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
+                                <tr v-if="loading" class="animate-pulse">
+                                    <td colspan="4" class="p-12 text-center text-slate-400">Loading users...</td>
+                                </tr>
+                                <tr v-else-if="filteredUsers.length === 0">
+                                    <td colspan="4" class="p-12 text-center">
+                                        <div class="flex flex-col items-center justify-center text-slate-500">
+                                            <svg class="w-12 h-12 text-slate-300 mb-3" fill="none" viewBox="0 0 24 24"
+                                                stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                                            </svg>
+                                            <p>No users found matching your search.</p>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr v-for="user in filteredUsers" :key="user.id"
+                                    class="group/row hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors duration-150 cursor-pointer"
+                                    @click="openUserDetails(user)">
+                                    <td class="p-6 pl-8">
+                                        <div class="flex items-center gap-4">
+                                            <div class="relative">
+                                                <div
+                                                    class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-0 group-hover/row:opacity-30 transition duration-300">
+                                                </div>
+                                                <div
+                                                    class="relative w-11 h-11 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-white flex items-center justify-center font-bold text-sm shadow-md shadow-blue-500/20">
+                                                    {{ getInitials(user.name) }}
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <div
+                                                    class="font-semibold text-slate-900 dark:text-white group-hover/row:text-blue-600 dark:group-hover/row:text-blue-400 transition-colors">
+                                                    {{ user.name }}
+                                                </div>
+                                                <div class="text-sm text-slate-500 dark:text-slate-400">{{ user.email }}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="p-6">
+                                        <span
+                                            class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-bold border capitalize"
+                                            :class="{
+                                                'bg-purple-100 border-purple-200 text-purple-700 dark:bg-purple-900/20 dark:border-purple-800 dark:text-purple-300': user.role === 'ADMIN',
+                                                'bg-blue-100 border-blue-200 text-blue-700 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-300': user.role === 'TEACHER',
+                                                'bg-emerald-100 border-emerald-200 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-300': user.role === 'RESEARCHER',
+                                                'bg-amber-100 border-amber-200 text-amber-700 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-300': user.role === 'COLLABORATOR',
+                                                'bg-slate-100 border-slate-200 text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300': user.role === 'STUDENT'
+                                            }">
+                                            {{ user.role.toLowerCase() }}
+                                        </span>
+                                    </td>
+                                    <td class="p-6">
+                                        <span
+                                            class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold shadow-sm border"
+                                            :class="user.is_active ? 'bg-emerald-100 border-emerald-200 text-emerald-700 dark:bg-emerald-900/30 dark:border-emerald-800 dark:text-emerald-400' : 'bg-red-100 border-red-200 text-red-700 dark:bg-red-900/30 dark:border-red-800 dark:text-red-400'">
+                                            <span class="w-1.5 h-1.5 rounded-full"
+                                                :class="user.is_active ? 'bg-emerald-500' : 'bg-red-500'"></span>
+                                            {{ user.is_active ? 'Active' : 'Suspended' }}
+                                        </span>
+                                    </td>
+                                    <td class="p-6 pr-8 text-right">
+                                        <div
+                                            class="flex items-center justify-end gap-2 opacity-0 group-hover/row:opacity-100 transition-opacity duration-200">
+                                            <button @click.stop="openEditModal(user)"
+                                                class="p-2.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
+                                                title="Edit">
+                                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                                </svg>
+                                            </button>
+                                            <button @click.stop="confirmDelete(user)"
+                                                class="p-2.5 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
+                                                title="Delete">
+                                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modal -->
+        <Transition enter-active-class="duration-300 ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100"
+            leave-active-class="duration-200 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
+            <div v-if="showModal" class="fixed inset-0 z-[100] overflow-y-auto" role="dialog" aria-modal="true">
+                <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" @click="closeModal">
+                </div>
+                <div class="flex min-h-full items-center justify-center p-4">
+                    <Transition enter-active-class="duration-300 ease-out"
+                        enter-from-class="opacity-0 scale-95 translate-y-4"
+                        enter-to-class="opacity-100 scale-100 translate-y-0" leave-active-class="duration-200 ease-in"
+                        leave-from-class="opacity-100 scale-100 translate-y-0"
+                        leave-to-class="opacity-0 scale-95 translate-y-4">
+                        <div class="relative w-full max-w-2xl">
+                            <div
+                                class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-3xl blur opacity-20">
+                            </div>
+                            <div
+                                class="relative overflow-hidden rounded-2xl bg-white dark:bg-slate-900 shadow-2xl border border-slate-200 dark:border-slate-800">
+
+                                <div
+                                    class="relative bg-gradient-to-r from-slate-50 to-slate-100/50 dark:from-slate-800/50 dark:to-slate-800/30 px-8 py-6 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center">
+                                    <div class="flex items-center gap-3">
+                                        <div
+                                            class="w-1.5 h-8 bg-gradient-to-b from-blue-600 to-indigo-600 rounded-full">
+                                        </div>
+                                        <h3 class="text-xl font-bold text-slate-900 dark:text-white">{{ isEditing ?
+                                            'Edit User Details' : 'Create New User' }}</h3>
+                                    </div>
+                                    <button @click="closeModal"
+                                        class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"><svg
+                                            class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                d="M6 18L18 6M6 6l12 12" />
+                                        </svg></button>
+                                </div>
+
+                                <div class="p-8 space-y-6">
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label
+                                                class="block text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider mb-2">Full
+                                                Name</label>
+                                            <input v-model="formData.name" :disabled="isEditing" type="text"
+                                                class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white disabled:opacity-60 disabled:cursor-not-allowed transition-all"
+                                                placeholder="John Doe">
+                                        </div>
+                                        <div>
+                                            <label
+                                                class="block text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider mb-2">Email
+                                                Address</label>
+                                            <input v-model="formData.email" :disabled="isEditing" type="email"
+                                                class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white disabled:opacity-60 disabled:cursor-not-allowed transition-all"
+                                                placeholder="john@example.com">
+                                        </div>
+                                    </div>
+
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label
+                                                class="block text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider mb-2">Role</label>
+                                            <div class="relative">
+                                                <select v-model="formData.role"
+                                                    class="w-full appearance-none px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-all cursor-pointer">
+                                                    <option value="STUDENT">Student</option>
+                                                    <option value="TEACHER">Teacher</option>
+                                                    <option value="COLLABORATOR">Collaborator</option>
+                                                    <option value="RESEARCHER">Researcher</option>
+                                                    <option value="ADMIN">Admin</option>
+                                                </select>
+                                                <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 pointer-events-none"
+                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                                        stroke-width="2" d="M19 9l-7 7-7-7" />
+                                                </svg>
+                                            </div>
+                                        </div>
+
+                                        <div v-if="!isEditing">
+                                            <label
+                                                class="block text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider mb-2">Password</label>
+                                            <input v-model="formData.password" type="password"
+                                                class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-all"
+                                                placeholder="••••••••">
+                                        </div>
+
+                                        <div v-if="isEditing">
+                                            <label
+                                                class="block text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider mb-2">Account
+                                                Status</label>
+                                            <label
+                                                class="flex items-center gap-3 p-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-all h-[52px]">
+                                                <div class="relative inline-flex items-center">
+                                                    <input v-model="formData.is_active" type="checkbox"
+                                                        class="sr-only peer">
+                                                    <div
+                                                        class="w-11 h-6 bg-slate-200 rounded-full peer peer-checked:bg-blue-600 dark:bg-slate-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all">
+                                                    </div>
+                                                </div>
+                                                <span class="text-sm font-semibold transition-colors"
+                                                    :class="formData.is_active ? 'text-slate-900 dark:text-white' : 'text-slate-500'">{{
+                                                        formData.is_active ? 'Active' : 'Suspended' }}</span>
+                                            </label>
+                                        </div>
+                                    </div>
+
+                                    <div v-if="isEditing" class="pt-2 border-t border-slate-100 dark:border-slate-800">
+                                        <button type="button" @click="sendPasswordRecovery"
+                                            class="text-sm text-red-500 hover:text-red-600 font-semibold flex items-center gap-2">
+                                            <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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                                            </svg>
+                                            Send Password Recovery
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div
+                                    class="bg-gradient-to-r from-slate-50 to-slate-100/50 dark:from-slate-800/50 dark:to-slate-800/30 px-8 py-6 border-t border-slate-200 dark:border-slate-800 flex flex-row-reverse gap-3">
+                                    <button @click="handleSubmit"
+                                        class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg transition-all">{{
+                                            isEditing ? 'Save Changes' : 'Create Account' }}</button>
+                                    <button @click="closeModal"
+                                        class="px-8 py-3 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold rounded-xl transition-all">Cancel</button>
+                                </div>
+                            </div>
+                        </div>
+                    </Transition>
+                </div>
+            </div>
+        </Transition>
+
+        <!-- User Details Modal -->
+        <Transition enter-active-class="duration-300 ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100"
+            leave-active-class="duration-200 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
+            <div v-if="showDetailsModal" class="fixed inset-0 z-[100] overflow-y-auto" role="dialog" aria-modal="true">
+                <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"
+                    @click="closeDetailsModal"></div>
+                <div class="flex min-h-full items-center justify-center p-4">
+                    <Transition enter-active-class="duration-300 ease-out"
+                        enter-from-class="opacity-0 scale-95 translate-y-4"
+                        enter-to-class="opacity-100 scale-100 translate-y-0" leave-active-class="duration-200 ease-in"
+                        leave-from-class="opacity-100 scale-100 translate-y-0"
+                        leave-to-class="opacity-0 scale-95 translate-y-4">
+
+                        <div v-if="selectedUser"
+                            class="relative w-full max-w-4xl max-h-[85vh] flex flex-col bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 overflow-hidden">
+
+                            <div
+                                class="flex-none relative bg-gradient-to-r from-slate-50 to-slate-100/50 dark:from-slate-800/50 dark:to-slate-800/30 px-8 py-6 border-b border-slate-200 dark:border-slate-800">
+                                <div class="flex justify-between items-start">
+                                    <div class="flex items-center gap-4">
+                                        <div
+                                            class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-white flex items-center justify-center font-bold text-xl">
+                                            {{ getInitials(selectedUser.name) }}</div>
+                                        <div>
+                                            <h3 class="text-2xl font-bold text-slate-900 dark:text-white">{{
+                                                selectedUser.name }}</h3>
+                                            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{
+                                                selectedUser.email }}</p>
+                                            <div class="flex items-center gap-2 mt-2">
+                                                <span
+                                                    class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold border capitalize bg-slate-100 dark:bg-slate-800 dark:text-slate-300 border-slate-200 dark:border-slate-700">{{
+                                                        selectedUser.role.toLowerCase() }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <button @click="closeDetailsModal"
+                                        class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"><svg
+                                            class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                d="M6 18L18 6M6 6l12 12" />
+                                        </svg></button>
+                                </div>
+                            </div>
+
+                            <div class="flex-1 overflow-y-auto p-8">
+                                <div class="flex items-center justify-between mb-6">
+                                    <h4
+                                        class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
+                                        Activity History</h4>
+                                    <span class="text-sm text-slate-500 font-medium">{{ userHistory.length }}
+                                        events</span>
+                                </div>
+                                <div v-if="userHistory.length === 0"
+                                    class="text-center py-12 border border-dashed border-slate-200 dark:border-slate-800 rounded-xl">
+                                    <p class="text-slate-500">No activity recorded.</p>
+                                </div>
+                                <div v-else class="space-y-4">
+                                    <div v-for="(item, index) in userHistory" :key="item.id"
+                                        class="relative bg-slate-50 dark:bg-slate-800/50 rounded-xl p-5 border border-slate-200 dark:border-slate-800">
+                                        <div class="flex gap-4">
+                                            <div class="flex flex-col items-center min-w-[90px] text-center">
+                                                <span class="text-xs font-bold text-slate-500 uppercase mb-1">{{ new
+                                                    Date(item.timestamp).toLocaleDateString('en-US', {
+                                                        month: 'short',
+                                                        day: 'numeric'
+                                                    }) }}</span>
+                                                <span class="text-xs text-slate-400">{{ new
+                                                    Date(item.timestamp).toLocaleTimeString([], {
+                                                        hour: '2-digit',
+                                                        minute: '2-digit'
+                                                    }) }}</span>
+                                            </div>
+                                            <div class="flex-1">
+                                                <div class="flex items-center gap-2 mb-2">
+                                                    <span
+                                                        class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">{{
+                                                            item.action.replace('_', ' ') }}</span>
+                                                    <span class="text-xs text-slate-400 font-medium">{{ item.target_type
+                                                    }} #{{ item.target_id }}</span>
+                                                </div>
+                                                <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{
+                                                    item.details }}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div
+                                class="flex-none bg-gradient-to-r from-slate-50 to-slate-100/50 dark:from-slate-800/50 dark:to-slate-800/30 px-8 py-4 border-t border-slate-200 dark:border-slate-800">
+                                <button @click="closeDetailsModal"
+                                    class="w-full px-6 py-3 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold rounded-xl transition-all">Close</button>
+                            </div>
+
+                        </div>
+                    </Transition>
+                </div>
+            </div>
+        </Transition>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useAuthStore } from "~/stores/auth-store.js";
+import { storeToRefs } from "pinia";
+
+const config = useRuntimeConfig();
+const api = config.public.apiBase;
+const authStore = useAuthStore();
+const { token } = storeToRefs(authStore);
+
+// State
+const users = ref<any[]>([
+    { id: 1, name: 'Dr. Sarah Mitchell', email: 'sarah.mitchell@university.edu', role: 'ADMIN', is_active: true },
+    { id: 2, name: 'Prof. James Anderson', email: 'james.anderson@university.edu', role: 'TEACHER', is_active: true },
+    { id: 3, name: 'Dr. Emily Chen', email: 'emily.chen@university.edu', role: 'RESEARCHER', is_active: true },
+    { id: 4, name: 'Michael Roberts', email: 'michael.roberts@university.edu', role: 'STUDENT', is_active: true },
+    { id: 5, name: 'Dr. David Kim', email: 'david.kim@university.edu', role: 'COLLABORATOR', is_active: true },
+    { id: 6, name: 'Prof. Maria Garcia', email: 'maria.garcia@university.edu', role: 'TEACHER', is_active: true },
+    { id: 7, name: 'Jessica Thompson', email: 'jessica.thompson@university.edu', role: 'STUDENT', is_active: true },
+    { id: 8, name: 'Dr. Robert Wilson', email: 'robert.wilson@university.edu', role: 'RESEARCHER', is_active: true },
+    { id: 9, name: 'Amanda Foster', email: 'amanda.foster@university.edu', role: 'STUDENT', is_active: false },
+    { id: 10, name: 'Prof. Thomas Lee', email: 'thomas.lee@university.edu', role: 'ADMIN', is_active: true },
+    { id: 11, name: 'Dr. Lisa Martinez', email: 'lisa.martinez@university.edu', role: 'RESEARCHER', is_active: true },
+    { id: 12, name: 'Daniel Brown', email: 'daniel.brown@university.edu', role: 'STUDENT', is_active: true },
+    { id: 13, name: 'Prof. Jennifer Davis', email: 'jennifer.davis@university.edu', role: 'TEACHER', is_active: true },
+    { id: 14, name: 'Christopher Taylor', email: 'christopher.taylor@university.edu', role: 'STUDENT', is_active: false },
+    { id: 15, name: 'Dr. Patricia Johnson', email: 'patricia.johnson@university.edu', role: 'COLLABORATOR', is_active: true },
+    { id: 16, name: 'Matthew White', email: 'matthew.white@university.edu', role: 'STUDENT', is_active: true },
+    { id: 17, name: 'Prof. Elizabeth Moore', email: 'elizabeth.moore@university.edu', role: 'TEACHER', is_active: true },
+    { id: 18, name: 'Dr. William Harris', email: 'william.harris@university.edu', role: 'RESEARCHER', is_active: true },
+    { id: 19, name: 'Sophie Anderson', email: 'sophie.anderson@university.edu', role: 'STUDENT', is_active: true },
+    { id: 20, name: 'Dr. Richard Clark', email: 'richard.clark@university.edu', role: 'ADMIN', is_active: true }
+]);
+const loading = ref(false);
+const showModal = ref(false);
+const showDetailsModal = ref(false);
+const isEditing = ref(false);
+const searchQuery = ref('');
+const selectedUser = ref<any>(null);
+const userHistory = ref<any[]>([]);
+
+// Mock history data generator
+const generateMockHistory = (userId: number) => {
+    const actions = ['UPLOADED_PUBLICATION', 'ADDED_COMMENT', 'CORRECTED_PUBLICATION', 'RATED_PUBLICATION', 'TAGGED_PUBLICATION'];
+    const targetTypes = ['Publication', 'Comment', 'Review'];
+    const details = [
+        'Fez upload da publicação "A New Technique for Data Science"',
+        'Comentou na publicação "Reference Paper Y"',
+        'Corrigiu informação da publicação "Machine Learning Advances"',
+        'Atribuiu 5 estrelas à publicação "Deep Learning Research"',
+        'Adicionou tag "AI" à publicação "Neural Networks Study"',
+        'Fez upload da publicação "Quantum Computing Overview"',
+        'Comentou na publicação "Data Analysis Methods"',
+        'Corrigiu informação da publicação "Statistical Models in Research"',
+        'Atribuiu 4 estrelas à publicação "Big Data Trends"',
+        'Adicionou tag "Data Science" à publicação "Data Visualization Techniques"'
+    ];
+
+    const history = [];
+    const numEvents = Math.floor(Math.random() * 20) + 8;
+
+    for (let i = 0; i < numEvents; i++) {
+        const randomAction = actions[Math.floor(Math.random() * actions.length)];
+        const randomTargetType = targetTypes[Math.floor(Math.random() * targetTypes.length)];
+        const randomDetails = details[Math.floor(Math.random() * details.length)];
+        const daysAgo = Math.floor(Math.random() * 30);
+        const hoursAgo = Math.floor(Math.random() * 24);
+        const minutesAgo = Math.floor(Math.random() * 60);
+
+        const timestamp = new Date();
+        timestamp.setDate(timestamp.getDate() - daysAgo);
+        timestamp.setHours(timestamp.getHours() - hoursAgo);
+        timestamp.setMinutes(timestamp.getMinutes() - minutesAgo);
+
+        history.push({
+            id: 1000 + i,
+            action: randomAction,
+            target_type: randomTargetType,
+            target_id: 200 + Math.floor(Math.random() * 50),
+            details: randomDetails,
+            timestamp: timestamp.toISOString()
+        });
+    }
+
+    return history.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+};
+
+// Form Data
+const formData = reactive({
+    id: 0,
+    name: '',
+    email: '',
+    password: '',
+    role: 'STUDENT',
+    is_active: true
+});
+
+// Computed Stats & Filtering
+const filteredUsers = computed(() => {
+    if (!searchQuery.value) return users.value;
+    const query = searchQuery.value.toLowerCase();
+    return users.value.filter(u =>
+        u.name.toLowerCase().includes(query) ||
+        u.email.toLowerCase().includes(query)
+    );
+});
+
+const activeCount = computed(() => users.value.filter(u => u.is_active).length);
+const adminCount = computed(() => users.value.filter(u => u.role === 'ADMIN').length);
+
+// --- API ACTIONS ---
+const fetchUsers = async () => {
+    loading.value = true;
+    try {
+        const data = await $fetch<any[]>(`${api}/admin/users`, {
+            method: 'GET',
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        users.value = data || [];
+    } catch (error) {
+        console.error("Error fetching users", error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const createUser = async () => {
+    try {
+        await $fetch(`${api}/admin/users`, {
+            method: 'POST',
+            headers: { Authorization: `Bearer ${token.value}` },
+            body: {
+                name: formData.name,
+                email: formData.email,
+                password: formData.password,
+                role: formData.role
+            }
+        });
+        closeModal();
+        fetchUsers();
+    } catch (error) {
+        alert("Failed to create user.");
+    }
+};
+
+const updateUser = async () => {
+    try {
+        await $fetch(`${api}/admin/users/${formData.id}`, {
+            method: 'PATCH',
+            headers: { Authorization: `Bearer ${token.value}` },
+            body: {
+                role: formData.role,
+                is_active: formData.is_active
+            }
+        });
+        closeModal();
+        fetchUsers();
+    } catch (error) {
+        alert("Failed to update user.");
+    }
+};
+
+const sendPasswordRecovery = async () => {
+    if (!confirm(`Are you sure you want to send a password recovery to ${formData.email}?`)) return;
+
+    try {
+        await $fetch(`${api}/auth/recover-password`, {
+            method: 'POST',
+            // headers: { Authorization: ... } // EP02 is usually public, but check your API requirements
+            body: {
+                email: formData.email
+            }
+        });
+        alert(`Recovery sent to ${formData.email}`);
+    } catch (error) {
+        alert("Failed to send recovery.");
+        console.error(error);
+    }
+};
+
+const confirmDelete = async (user: any) => {
+    if (!confirm(`Are you sure you want to delete ${user.name}?`)) return;
+    try {
+        await $fetch(`${api}/admin/users/${user.id}`, {
+            method: 'DELETE',
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        fetchUsers();
+    } catch (error) {
+        alert("Error deleting user.");
+    }
+};
+
+// --- HELPERS ---
+const openUserDetails = (user: any) => {
+    selectedUser.value = user;
+    userHistory.value = generateMockHistory(user.id);
+    showDetailsModal.value = true;
+};
+
+const closeDetailsModal = () => {
+    showDetailsModal.value = false;
+    selectedUser.value = null;
+    userHistory.value = [];
+};
+
+const openCreateModal = () => {
+    isEditing.value = false;
+    resetForm();
+    showModal.value = true;
+};
+
+const openEditModal = (user: any) => {
+    isEditing.value = true;
+    formData.id = user.id;
+    formData.name = user.name;
+    formData.email = user.email;
+    formData.role = user.role;
+    formData.is_active = user.is_active;
+    showModal.value = true;
+};
+
+const closeModal = () => {
+    showModal.value = false;
+    resetForm();
+};
+
+const handleSubmit = () => {
+    if (isEditing.value) updateUser();
+    else createUser();
+};
+
+const resetForm = () => {
+    formData.id = 0;
+    formData.name = '';
+    formData.email = '';
+    formData.password = '';
+    formData.role = 'STUDENT';
+    formData.is_active = true;
+};
+
+const getInitials = (name: string) => {
+    if (!name) return '??';
+    return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
+};
+
+onMounted(() => {
+    fetchUsers();
+});
+</script>
diff --git a/app/pages/auth/forgot-password.vue b/app/pages/auth/forgot-password.vue
index f032be0..dac39a8 100644
--- a/app/pages/auth/forgot-password.vue
+++ b/app/pages/auth/forgot-password.vue
@@ -49,6 +49,7 @@ async function handleResetRequest() {
 </script>
 
 <template>
+    <title>Reset Password - Reddit for Academic Papers</title>
     <div
         class="min-h-screen bg-gray-100 dark:bg-gray-950 flex flex-col items-center justify-center p-6 transition-colors duration-300">
         <Transition appear enter-active-class="transition duration-700 ease-out"
@@ -86,4 +87,4 @@ async function handleResetRequest() {
             </div>
         </Transition>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index e8711ff..481a3e9 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -1,4 +1,5 @@
 <template>
+    <title> Login - Reddit for Academic Papers</title>
   <div
     class="min-h-screen bg-gray-100 dark:bg-gray-950 flex flex-col items-center justify-center p-6 transition-colors duration-300">
     <Transition appear enter-active-class="transition duration-700 ease-out" enter-from-class="translate-y-8 opacity-0"
@@ -138,4 +139,4 @@ async function handleLogin() {
   animation-delay: 0.2s;
   opacity: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 64eaa22..b1234d1 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,4 +1,5 @@
 <template>
+    <title> Reddit for Academic Papers - Home</title>
   <div
     class="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center p-6 transition-colors duration-300">
     <div class="w-full max-w-2xl animate-[fadeInUp_0.6s_ease-out]">
@@ -44,4 +45,4 @@
       </footer>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index c1fc5c8..52a1625 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -1,61 +1,65 @@
 <template>
-    <title> Profile - {{user.name}}</title>
-    <div class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
+    <title>{{ userProfile.name }} - Reddit for Academic Papers</title>
+    <div
+        class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
 
         <div class="container mx-auto max-w-7xl px-4 py-8 md:py-12">
             <div class="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12">
 
                 <div class="md:col-span-4 lg:col-span-3 flex flex-col gap-6">
 
-                    <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-800 transition-colors duration-300">
+                    <div
+                        class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-800 transition-colors duration-300">
                         <div class="flex flex-col items-center text-center">
                             <div class="relative inline-block mb-4">
                                 <div
                                     class="h-32 w-32 rounded-full border-4 border-white dark:border-slate-800 bg-slate-100 dark:bg-slate-800 overflow-hidden shadow-md ring-1 ring-slate-200 dark:ring-slate-700">
-                                    <img :src="user.avatarUrl" :alt="user.name"
+                                    <img :src="userProfile.avatarUrl" :alt="userProfile.name"
                                         class="h-full w-full object-cover transition-transform hover:scale-105" />
                                 </div>
                                 <div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white dark:border-slate-900 shadow-sm"
-                                    :class="user.isActive ? 'bg-emerald-500' : 'bg-gray-400'" title="Online Status">
+                                    :class="userProfile.is_active ? 'bg-emerald-500' : 'bg-gray-400'"
+                                    title="Online Status">
                                 </div>
                             </div>
 
-                            <h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">{{ user.name }}</h1>
-                            <p class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-wide">{{ user.role }}
+                            <h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">{{
+                                userProfile.name }}
+                            </h1>
+                            <p
+                                class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-wide">
+                                {{ userProfile.role }}
                             </p>
 
                             <div class="w-full space-y-3">
                                 <button
+                                    @click=" activeTab = 'settings' "
                                     class="w-full py-2.5 px-4 bg-slate-900 dark:bg-blue-600 hover:bg-slate-800 dark:hover:bg-blue-500 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer">
                                     Edit Profile
-                                </button>
-                                <button
-                                    class="w-full py-2.5 px-4 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-medium rounded-lg text-sm transition-all active:scale-95 cursor-pointer">
-                                    View Settings
-                                </button>
+                                </button> 
                             </div>
                         </div>
 
                         <div class="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800 space-y-4">
                             <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
-                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor">
+                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
+                                    viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                 </svg>
-                                <span class="truncate">{{ user.email }}</span>
+                                <span class="truncate">{{ userProfile.email }}</span>
                             </div>
                             <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
-                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor">
+                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
+                                    viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                 </svg>
                                 <span>Polytechnic of Leiria</span>
                             </div>
                             <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
-                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor">
+                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
+                                    viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                         d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                 </svg>
@@ -68,13 +72,19 @@
                         <div
                             class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
                             <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ totalCitations }}</div>
-                            <div class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">Citations
+                            <div
+                                class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
+                                Citations
                             </div>
                         </div>
                         <div
                             class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
-                            <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ user.publications.length }}</div>
-                            <div class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">Papers
+                            <div class="text-2xl font-bold text-slate-900 dark:text-white">{{
+                                userProfile.publications.length
+                                }}</div>
+                            <div
+                                class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
+                                Papers
                             </div>
                         </div>
                     </div>
@@ -82,78 +92,176 @@
 
                 <div class="md:col-span-8 lg:col-span-9 space-y-6">
 
-                    <div class="bg-white dark:bg-slate-900 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex gap-1 overflow-x-auto transition-colors">
-                        <button
-                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5 cursor-pointer transition-colors">
+                    <div
+                        class="bg-white dark:bg-slate-900 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex gap-1 overflow-x-auto transition-colors">
+                        <button @click="activeTab = 'overview'"
+                            :class="activeTab === 'overview' ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800'"
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold cursor-pointer transition-colors">
                             Overview
                         </button>
-                        <button
-                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
+                        <button @click="activeTab = 'activity'"
+                            :class="activeTab === 'activity' ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800'"
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium transition-colors cursor-pointer">
                             Activity Log
                         </button>
-                        <button
-                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
+                        <button @click="activeTab = 'settings'"
+                            :class="activeTab === 'settings' ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800'"
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium transition-colors cursor-pointer">
                             Settings
                         </button>
                     </div>
 
-                    <div class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
-                        <h2 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">Biography</h2>
-                        <p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
-                            {{ user.biography }}
-                        </p>
-                    </div>
-
-                    <div class="flex items-center justify-between pt-2 px-1">
-                        <h2 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
-                            Recent Publications
-                            <span class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">{{
-                                user.publications.length }}</span>
-                        </h2>
-                    </div>
-
-                    <div class="flex flex-col gap-4">
-                        <div v-if="user.publications.length === 0"
-                            class="text-center py-16 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl bg-slate-50/50 dark:bg-slate-900/50">
-                            <p class="text-slate-500 dark:text-slate-400 font-medium">No publications found yet.</p>
-                        </div>
-
-                        <div v-for="pub in user.publications" :key="pub.id"
-                            class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 group relative">
-                            <div class="flex justify-between items-start gap-4 mb-2">
-                                <h3
-                                    class="text-base font-bold text-slate-900 dark:text-slate-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors leading-snug">
-                                    <a href="#" class="before:absolute before:inset-0">{{ pub.title }}</a>
-                                </h3>
-                                <span
-                                    class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700">
-                                    {{ pub.publishedYear }}
-                                </span>
+                    <Transition mode="out-in" enter-active-class="transition duration-300 ease-out"
+                        enter-from-class="transform opacity-0 translate-y-2"
+                        enter-to-class="transform opacity-100 translate-y-0"
+                        leave-active-class="transition duration-200 ease-in"
+                        leave-from-class="transform opacity-100 translate-y-0"
+                        leave-to-class="transform opacity-0 translate-y-2">
+                        <div v-if="activeTab === 'overview'" key="overview" class="space-y-6">
+                            <div
+                                class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
+                                <h2
+                                    class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
+                                    Biography</h2>
+                                <p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
+                                    {{ userProfile.biography }}
+                                </p>
                             </div>
 
-                            <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed line-clamp-2">
-                                {{ pub.abstract }}
-                            </p>
+                            <div class="flex items-center justify-between pt-2 px-1">
+                                <h2 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
+                                    Recent Publications
+                                    <span
+                                        class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">
+                                        {{ userProfile.publications.length }}
+                                    </span>
+                                </h2>
+                            </div>
+
+                            <div class="flex flex-col gap-4">
+                                <div v-if="userProfile.publications.length === 0"
+                                    class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
+
+                                    <div
+                                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
+                                    </div>
+
+                                    <div class="relative z-10 flex flex-col items-center">
+                                        <div
+                                            class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
+                                            <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none"
+                                                viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                            </svg>
+                                        </div>
+
+                                        <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
+                                            No publications yet
+                                        </h3>
+                                        <p
+                                            class="text-slate-500 dark:text-slate-400 text-sm max-w-xs mx-auto mb-6 leading-relaxed">
+                                            Your profile is looking a little empty. Share your research with the
+                                            community to start building your portfolio.
+                                        </p>
+
+                                        <button
+                                            @click="goToCreatePost()"
+                                            class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer">
+                                            <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 4v16m8-8H4" />
+                                            </svg>
+                                            Submit your first paper
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div v-for="pub in userProfile.publications" :key="pub.id"
+                                    class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 group relative">
+                                    <div class="flex justify-between items-start gap-4 mb-2">
+                                        <h3 class="text-base font-bold text-slate-900 dark:text-slate-100">{{ pub.title
+                                            }}</h3>
+                                        <span
+                                            class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700">
+                                            {{ pub.publishedYear }}
+                                        </span>
+                                    </div>
+                                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed line-clamp-2">
+                                        {{ pub.abstract }}</p>
+                                    <div
+                                        class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium">
+                                        <span
+                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800/50">
+                                            {{ pub.field }}
+                                        </span>
+                                        <span>{{ pub.citations }} Citations</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div v-else-if="activeTab === 'activity'" key="activity" class="space-y-4">
+                            <h2 class="text-lg font-bold text-slate-900 dark:text-white px-1">User History</h2>
+
+                            <div v-if="activityLog.length === 0"
+                                class="text-center py-12 border border-dashed border-slate-200 dark:border-slate-800 rounded-xl">
+                                <p class="text-slate-500">No activity recorded.</p>
+                            </div>
 
                             <div
-                                class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium z-10 relative">
-                                <span
-                                    class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800/50">
-                                    <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
-                                    {{ pub.field }}
-                                </span>
-                                <span class="inline-flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
-                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
-                                        <path
-                                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                    </svg>
-                                    {{ pub.citations }} Citations
-                                </span>
-                                <span class="text-slate-300 dark:text-slate-700">•</span>
-                                <span class="text-slate-500 dark:text-slate-400">{{ pub.publishedDate }}</span>
+                                class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
+                                <div v-for="(item, index) in activityLog" :key="item.id"
+                                    class="p-4 flex gap-4 border-b border-slate-100 dark:border-slate-800 last:border-0 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
+
+                                    <div class="flex flex-col items-center min-w-[80px] text-center pt-1">
+                                        <span class="text-xs font-bold text-slate-500 uppercase">
+                                            {{ new Date(item.timestamp).toLocaleDateString('en-US', {
+                                                month: 'short',
+                                                day: 'numeric'
+                                            }) }}
+                                        </span>
+                                        <span class="text-[10px] text-slate-400">
+                                            {{ new Date(item.timestamp).toLocaleTimeString([], {
+                                                hour: '2-digit',
+                                                minute: '2-digit'
+                                            }) }}
+                                        </span>
+                                    </div>
+
+                                    <div class="flex-1">
+                                        <div class="flex items-center gap-2 mb-1">
+                                            <span
+                                                class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide"
+                                                :class="{
+                                                    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400': item.action.includes('UPLOAD'),
+                                                    'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': item.action.includes('COMMENT'),
+                                                    'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400': item.action.includes('RATED') || item.action.includes('CORRECT'),
+                                                    'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400': item.action.includes('TAG')
+                                                }">
+                                                {{ item.action.replace('_', ' ') }}
+                                            </span>
+                                            <span class="text-xs text-slate-400 font-medium">{{ item.target_type }} #{{
+                                                item.target_id }}</span>
+                                        </div>
+                                        <p class="text-sm text-slate-700 dark:text-slate-300">
+                                            {{ item.details }}
+                                        </p>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div>
+
+                        <div v-else-if="activeTab === 'settings'" key="settings"
+                            class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
+                            <h2
+                                    class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
+                                    Settings</h2>
+                            <p class="text-sm text-slate-600 dark:text-slate-400">
+                                Nothing here but chickens! Settings coming soon.
+                            </p>
+                        </div>
+                    </Transition>
 
                 </div>
             </div>
@@ -162,16 +270,41 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAuthStore } from "~/stores/auth-store.js";
+import { storeToRefs } from "pinia";
 
-enum Role {
-    STUDENT = "STUDENT",
-    TEACHER = "TEACHER",
-    ADMIN = "ADMIN",
-    RESEARCHER = "RESEARCHER"
+// --- Config & Store ---
+const config = useRuntimeConfig();
+const api = config.public.apiBase;
+const authStore = useAuthStore();
+const { token } = storeToRefs(authStore);
+const router = useRouter();
+
+// --- Interfaces ---
+
+interface Tag {
+    id: number;
+    name: string;
 }
 
-interface Publication {
+// Matches response from EP12 (/api/v1/publications/my-submissions) [cite: 296]
+interface ApiPublication {
+    id: number;
+    title: string;
+    authors: string[];
+    publication_date: string;
+    type: string;
+    rating: number; // Mapping this to citations for the UI
+    comment_count: number;
+    attached_file?: string;
+    tags: Tag[];
+    abstract?: string;
+}
+
+// Matches your UI requirements
+interface UIPublication {
     id: number;
     title: string;
     abstract: string;
@@ -181,63 +314,131 @@ interface Publication {
     field: string;
 }
 
-interface User {
-    id: number;
-    name: string;
-    email: string;
-    role: Role;
-    isActive: boolean;
-    avatarUrl: string;
-    joinDate: string;
-    publications: Publication[];
-}
 
-const user = ref<User>({
-    id: 1,
-    name: 'Dr. Maria Santos',
-    email: 'maria.santos@ipleiria.pt',
-    biography: 'Focused on distributed systems and IoT security. Currently leading the research group on "Smart City Infrastructures" at IPLeiria. My work primarily involves developing scalable architectures for real-time data processing and ensuring data integrity in edge computing environments.',
-    role: Role.RESEARCHER,
-    isActive: true,
-    avatarUrl: 'https://api.dicebear.com/7.x/notionists/svg?seed=Maria',
-    joinDate: '2023-09-15',
-    publications: [
-        {
-            id: 1,
-            title: 'Machine Learning Approaches to Predictive Maintenance in Industrial IoT',
-            abstract: 'This paper explores novel machine learning techniques for predictive maintenance in industrial Internet of Things environments, demonstrating a 35% improvement in fault detection accuracy.',
-            publishedDate: 'Nov 20, 2024',
-            publishedYear: '2024',
-            citations: 12,
-            field: 'Computer Science'
-        },
-        {
-            id: 2,
-            title: 'Distributed Systems Architecture for Real-Time Data Processing',
-            abstract: 'We present a scalable distributed architecture designed for real-time processing of large-scale sensor data streams. The proposed system leverages Kafka for ingestion.',
-            publishedDate: 'Aug 05, 2024',
-            publishedYear: '2024',
-            citations: 8,
-            field: 'Software Engineering'
-        },
-        {
-            id: 3,
-            title: 'Security Considerations in Edge Computing Environments',
-            abstract: 'An in-depth analysis of security vulnerabilities in edge computing deployments. This paper proposes a layered security framework that addresses both hardware and software.',
-            publishedDate: 'Mar 12, 2024',
-            publishedYear: '2024',
-            citations: 23,
-            field: 'Cybersecurity'
-        }
-    ]
+// --- State ---
+const loading = ref(true);
+const activeTab = ref('overview'); // State to control visible tab
+const activityLog = ref<ActivityItem[]>([]); // Store history data
+
+const userProfile = ref({
+    id: 0,
+    name: 'Loading...',
+    email: '',
+    role: '',
+    is_active: false,
+    avatarUrl: '',
+    biography: 'No biography provided.',
+    joinDate: new Date().toISOString(),
+    publications: [] as any[]
 });
 
-const totalCitations = computed(() => user.value.publications.reduce((sum, pub) => sum + pub.citations, 0));
+// --- API Actions ---
+
+// Fetch Tags (EP23) - To populate the select box
+async function fetchTags() {
+    if (!token.value) return;
+    try {
+        const data = await $fetch<Tag[]>(`${api}/tags`, {
+            method: 'GET',
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        availableTags.value = data || [];
+    } catch (e) {
+        console.error("Failed to fetch tags", e);
+    }
+}
+
+// --- Computed ---
+const totalCitations = computed(() =>
+    userProfile.value.publications.reduce((sum, pub) => sum + (pub.citations || 0), 0)
+);
 
 const formattedDate = computed(() => {
-    return new Date(user.value.joinDate).toLocaleDateString('en-US', {
+    return new Date(userProfile.value.joinDate).toLocaleDateString('en-US', {
         month: 'long',
         year: 'numeric'
     });
 });
+
+// --- API Actions ---
+
+// 1. Fetch Activity Log (EP06)
+async function fetchActivityHistory() {
+    if (!token.value) return;
+
+    try {
+        // GET /api/v1/me/history
+        const data = await $fetch<ActivityItem[]>(`${api}/me/history`, {
+            method: 'GET',
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        activityLog.value = data;
+    } catch (error) {
+        console.error("Error fetching history:", error);
+    }
+}
+
+// 2. Fetch Main Profile Data (EP03 & EP12)
+async function fetchProfileData() {
+    if (!token.value) return;
+    loading.value = true;
+
+    try {
+        // Fetch User Details
+        const userData = await $fetch(`${api}/users/me`, {
+            method: 'GET',
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+
+        // Fetch Publications
+        // const publicationsData = await $fetch(`${api}/publications/my-submissions`, {
+        //    method: 'GET',
+        //    headers: { Authorization: `Bearer ${token.value}` }
+        // });
+
+        // Map Data
+        userProfile.value = {
+            ...userProfile.value,
+            id: userData.id,
+            name: userData.name,
+            email: userData.email,
+            role: userData.role,
+            is_active: userData.is_active,
+            avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(userData.name)}&background=0D8ABC&color=fff`
+        };
+
+        userProfile.value.publications = (publicationsData as any[]).map(pub => {
+            const pubDate = new Date(pub.publication_date);
+            return {
+                id: pub.id,
+                title: pub.title,
+                abstract: pub.abstract || 'No abstract available.',
+                publishedDate: pubDate.toLocaleDateString(),
+                publishedYear: pubDate.getFullYear().toString(),
+                citations: pub.rating || 0,
+                field: pub.tags && pub.tags.length > 0 ? pub.tags[0].name : 'General'
+            };
+        });
+
+    } catch (error) {
+        console.error("Error fetching profile:", error);
+    } finally {
+        loading.value = false;
+    }
+}
+
+// --- Redirects ---
+const goToCreatePost = () => {
+    console.log("Navigating to create post modal...");
+    router.push({ 
+        path: '/', 
+        query: { openCreatePostModal: 'true' } 
+    });
+};
+
+// --- Lifecycle ---
+onMounted(() => {
+    fetchProfileData();
+    fetchActivityHistory(); // Fetch history on mount
+});
 </script>

From 0fade43944a79c57f48b0a4e9649db2b87859694 Mon Sep 17 00:00:00 2001
From: Edd <edd.ddev@gmail.com>
Date: Wed, 21 Jan 2026 02:03:12 +0000
Subject: [PATCH 06/18] home-page functionality, and some design tweaks

---
 app/app.vue                                 |   1 +
 app/assets/css/main.css                     |   7 +-
 app/components/ui/modal/CreatePostModal.vue | 301 ++++++++++++
 app/layouts/default.vue                     |  75 ++-
 app/pages/admin/users/index.vue             |  91 ++--
 app/pages/auth/forgot-password.vue          |   6 +-
 app/pages/auth/login.vue                    |   9 +-
 app/pages/index.vue                         | 511 ++++++++++++++++++--
 app/pages/profile/index.vue                 |  48 +-
 app/pages/profile/update-password.vue       |   2 +-
 nuxt.config.ts                              |   8 +-
 public/favicon.ico                          | Bin 4286 -> 410598 bytes
 12 files changed, 889 insertions(+), 170 deletions(-)
 create mode 100644 app/components/ui/modal/CreatePostModal.vue

diff --git a/app/app.vue b/app/app.vue
index 54c729e..fab1d78 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -4,6 +4,7 @@ import Toast from './components/ui/toast/Toast.vue';
 
 <template>
   <NuxtLayout>
+    <Title>Reddit for scientists</Title>
     <Toast />
     <NuxtPage />
   </NuxtLayout>
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 9b39686..85ac4ab 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -5,7 +5,6 @@
   --text-tertiary: #6e7681;
   --text-link: #2f81f7;
   --text-link-hover: #539bf5;
-  --text-slate: #57606a;
 
   --border-primary: #30363d;
   --border-hover: #8d96a0;
@@ -60,17 +59,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 p {
-  color: var(--text-secondary);
   line-height: 1.6;
 }
 
 a {
-  color: var(--text-link);
   text-decoration: none;
 }
 
 a:hover {
-  color: var(--text-link-hover);
   text-decoration: underline;
 }
 
@@ -81,8 +77,7 @@ code {
   border-radius: var(--radius-sm);
 }
 
-   SEMANTIC COMPONENTS (SAFE)
-   ============================================== */
+/* SEMANTIC COMPONENTS (SAFE) */
 
 
 .card {
diff --git a/app/components/ui/modal/CreatePostModal.vue b/app/components/ui/modal/CreatePostModal.vue
new file mode 100644
index 0000000..572e4d0
--- /dev/null
+++ b/app/components/ui/modal/CreatePostModal.vue
@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue';
+
+const props = defineProps<{
+    isOpen: boolean;
+    api: string;
+    token: string | null;
+}>();
+
+const emit = defineEmits(['close', 'refresh']);
+
+interface Tag { id: number; name: string; }
+
+const isSubmitting = ref(false);
+const availableTags = ref<Tag[]>([]);
+const errors = reactive({
+    title: '',
+    abstract: ''
+});
+
+const uploadForm = reactive({
+    title: '',
+    abstract: '',
+    type: 'CONFERENCE_PAPER',
+    newAuthorName: '',
+    authors: [] as string[],
+    selectedTagIds: [] as number[],
+    file: null as File | null
+});
+
+// --- Validation Logic ---
+const validate = () => {
+    let isValid = true;
+    errors.title = '';
+    errors.abstract = '';
+
+    if (!uploadForm.title.trim()) {
+        errors.title = 'Title is required';
+        isValid = false;
+    } else if (uploadForm.title.length > 50) {
+        errors.title = 'Title cannot exceed 50 characters';
+        isValid = false;
+    }
+
+    if (!uploadForm.abstract.trim()) {
+        errors.abstract = 'Abstract is required';
+        isValid = false;
+    } else if (uploadForm.abstract.length > 2000) {
+        errors.abstract = 'Abstract cannot exceed 2000 characters';
+        isValid = false;
+    }
+
+    return isValid;
+};
+
+async function fetchTags() {
+    if (!props.token) return;
+    try {
+        const data = await $fetch<Tag[]>(`${props.api}/tags`, {
+            headers: { Authorization: `Bearer ${props.token}` }
+        });
+        availableTags.value = data || [];
+    } catch (e) { console.error("Tags fetch failed", e); }
+}
+
+async function submitPublication() {
+    if (!validate()) return;
+
+    isSubmitting.value = true;
+    try {
+        const metadata = {
+            title: uploadForm.title,
+            authors: uploadForm.authors,
+            type: uploadForm.type,
+            abstract: uploadForm.abstract,
+            tags: uploadForm.selectedTagIds,
+            // Sending fixed defaults for removed fields to maintain API compatibility if needed
+            publication_date: new Date().toISOString().split('T')[0],
+            is_confidential: false
+        };
+
+        const formData = new FormData();
+        if (uploadForm.file) formData.append('file', uploadForm.file);
+        formData.append('data', JSON.stringify(metadata));
+
+        await $fetch(`${props.api}/publications`, {
+            method: 'POST',
+            headers: { Authorization: `Bearer ${props.token}` },
+            body: formData
+        });
+
+        emit('refresh');
+        closeModal();
+    } catch (error) {
+        alert("Upload failed.");
+    } finally {
+        isSubmitting.value = false;
+    }
+}
+
+function addAuthor() {
+    if (uploadForm.newAuthorName.trim()) {
+        uploadForm.authors.push(uploadForm.newAuthorName.trim());
+        uploadForm.newAuthorName = '';
+    }
+}
+
+function removeAuthor(index: number) { uploadForm.authors.splice(index, 1); }
+
+function handleFileChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files?.[0]) uploadForm.file = input.files[0];
+}
+
+function closeModal() {
+    emit('close');
+}
+
+watch(() => props.isOpen, (newVal) => {
+    if (newVal && availableTags.value.length === 0) fetchTags();
+    if (!newVal) {
+        // Reset errors on close
+        errors.title = '';
+        errors.abstract = '';
+    }
+});
+
+// Helper for colorful tags
+const getTagClass = (id: number) => {
+    const colors = [
+        'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-300',
+        'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300',
+        'bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300',
+        'bg-cyan-100 text-cyan-700 border-cyan-200 dark:bg-cyan-900/30 dark:text-cyan-300',
+        'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300',
+        'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300',
+    ];
+    return colors[id % colors.length];
+};
+</script>
+
+<template>
+    <Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0"
+        enter-to-class="opacity-100" leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100"
+        leave-to-class="opacity-0">
+        <div v-if="isOpen" class="fixed inset-0 z-50 overflow-y-auto">
+            <div class="fixed inset-0 bg-slate-900/75 backdrop-blur-sm" @click="closeModal" />
+
+            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                <div
+                    class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-slate-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl border border-slate-200 dark:border-slate-800">
+
+                    <div
+                        class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
+                        <h3 class="text-lg font-bold text-slate-900 dark:text-white">Submit New Publication</h3>
+                        <button class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"
+                            @click="closeModal">
+                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+
+                    <div class="px-6 py-6 max-h-[80vh] overflow-y-auto space-y-6">
+                        <div
+                            class="flex justify-center rounded-lg border-2 border-dashed border-slate-300 dark:border-slate-700 px-6 py-8 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
+                            <div class="text-center">
+                                <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                                </svg>
+                                <div
+                                    class="mt-4 flex text-sm leading-6 text-slate-600 dark:text-slate-400 justify-center">
+                                    <label for="file-upload"
+                                        class="relative cursor-pointer rounded-md font-semibold text-blue-600 hover:text-blue-500">
+                                        <span>Upload a file</span>
+                                        <input id="file-upload" type="file" class="sr-only" accept=".pdf,.zip"
+                                            @change="handleFileChange">
+                                    </label>
+                                    <p class="pl-1">or drag and drop</p>
+                                </div>
+                                <p v-if="uploadForm.file"
+                                    class="mt-2 text-sm font-bold text-green-600 dark:text-green-400 text-center">
+                                    Selected: {{ uploadForm.file.name }}
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                            <div class="md:col-span-2">
+                                <label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Title</label>
+                                <input v-model="uploadForm.title" type="text"
+                                    :class="[errors.title ? 'border-red-500' : 'border-slate-300 dark:border-slate-700']"
+                                    class="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2.5 px-3 border"
+                                    placeholder="e.g. A New Technique for Data Science">
+                                <p v-if="errors.title" class="mt-1 text-xs text-red-500">{{ errors.title }}</p>
+                            </div>
+                            <div>
+                                <label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Type</label>
+                                <select v-model="uploadForm.type"
+                                    class="w-full rounded-lg border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2.5 px-3 border">
+                                    <option value="CONFERENCE_PAPER">Conference Paper</option>
+                                    <option value="ARTICLE">Article</option>
+                                    <option value="THESIS">Thesis</option>
+                                    <option value="REPORT">Report</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+                                Abstract ({{ uploadForm.abstract.length }}/2000)
+                            </label>
+                            <textarea v-model="uploadForm.abstract" rows="4"
+                                :class="[errors.abstract ? 'border-red-500' : 'border-slate-300 dark:border-slate-700']"
+                                class="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2 px-3 border"
+                                placeholder="Enter a brief summary..." />
+                            <p v-if="errors.abstract" class="mt-1 text-xs text-red-500">{{ errors.abstract }}</p>
+                        </div>
+
+                        <div class="flex flex-col md:flex-row gap-8">
+
+                            <div class="flex-1">
+                                <label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Authors</label>
+                                <div class="relative flex items-center">
+                                    <input v-model="uploadForm.newAuthorName" type="text"
+                                        class="w-full rounded-lg border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm text-sm py-2 pl-3 pr-10 border"
+                                        placeholder="Name" @keyup.enter="addAuthor">
+                                    <button type="button"
+                                        class="absolute right-2 p-1 text-blue-600 hover:text-blue-700 transition-colors"
+                                        @click="addAuthor">
+                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                                            stroke-width="3">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M12 4.5v15m7.5-7.5h-15" />
+                                        </svg>
+                                    </button>
+                                </div>
+                                <div class="flex flex-wrap gap-2 mt-3">
+                                    <span v-for="(author, index) in uploadForm.authors" :key="index"
+                                        class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-medium border border-slate-200 dark:border-slate-700">
+                                        {{ author }}
+                                        <button @click="removeAuthor(index)">
+                                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M6 18L18 6M6 6l12 12" />
+                                            </svg>
+                                        </button>
+                                    </span>
+                                </div>
+                            </div>
+
+                            <div class="w-full md:w-auto min-w-[200px]">
+                                <label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Tags</label>
+                                <div
+                                    class="overflow-y-auto border border-slate-200 dark:border-slate-700 rounded-lg p-3 bg-slate-50/50 dark:bg-slate-800/30 flex flex-wrap gap-2 content-start">
+                                    <label v-if="availableTags.length == 0"
+                                        class="relative rounded-md font-semibold text-blue-600">
+                                        <span>No tags</span>
+                                    </label>
+                                    <button v-for="tag in availableTags" :key="tag.id" type="button" @click="() => {
+                                        const idx = uploadForm.selectedTagIds.indexOf(tag.id);
+                                        if (idx > -1) uploadForm.selectedTagIds.splice(idx, 1);
+                                        else uploadForm.selectedTagIds.push(tag.id);
+                                    }" :class="[
+                                            uploadForm.selectedTagIds.includes(tag.id)
+                                                ? getTagClass(tag.id) + ' border-transparent'
+                                                : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400'
+                                        ]"
+                                        class="px-3 py-1.5 rounded-full border text-xs font-bold uppercase tracking-tight transition-all shadow-sm whitespace-nowrap">
+                                        {{ tag.name }}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 flex flex-row-reverse gap-3 border-t border-slate-100 dark:border-slate-800">
+                        <button :disabled="isSubmitting"
+                            class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-bold text-white shadow-sm hover:bg-blue-500 disabled:opacity-50 sm:w-auto transition-all"
+                            @click="submitPublication">
+                            {{ isSubmitting ? 'Uploading...' : 'Submit Publication' }}
+                        </button>
+                        <button
+                            class="inline-flex w-full justify-center rounded-lg bg-white dark:bg-slate-800 px-6 py-2.5 text-sm font-bold text-slate-700 dark:text-slate-300 shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 sm:w-auto transition-all"
+                            @click="closeModal">
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Transition>
+</template>
\ No newline at end of file
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index a6a24c2..644ff12 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -6,33 +6,25 @@
 
                 <nuxt-link to="/" class="flex items-center gap-3 group flex-shrink-0">
                     <div class="relative">
-                        <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg blur opacity-25 group-hover:opacity-40 transition duration-300"></div>
+                        <div
+                            class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg blur opacity-25 group-hover:opacity-40 transition duration-300" />
                         <div
                             class="relative w-10 h-10 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-blue-500/30">
                             A
                         </div>
                     </div>
                     <span class="text-xl font-bold text-slate-900 dark:text-white tracking-tight hidden md:block">
-                        Academic<span class="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">Sys</span>
+                        Academic<span
+                            class="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">Sys</span>
                     </span>
                 </nuxt-link>
 
                 <div class="flex items-center gap-4 md:gap-8">
-
-                    <div class="hidden md:flex items-center gap-1">
-                        <nuxt-link v-for="link in navLinks" :key="link.path" :to="link.path"
-                            class="px-4 py-2 rounded-lg text-sm font-semibold text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200"
-                            active-class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 text-blue-600 dark:text-blue-400 shadow-sm">
-                            {{ link.name }}
-                        </nuxt-link>
-                    </div>
-
-                    <div class="hidden md:block h-6 w-px bg-slate-200 dark:bg-slate-700 mx-2"></div>
-
                     <div class="flex items-center gap-3">
 
-                        <button @click="toggleDark"
-                            class="p-2.5 rounded-full text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-700 dark:hover:text-slate-300 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50">
+                        <button
+                            class="p-2.5 rounded-full text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-700 dark:hover:text-slate-300 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                            @click="toggleDark">
                             <svg v-if="!isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                     d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
@@ -43,25 +35,21 @@
                             </svg>
                         </button>
 
-                        <div v-if="authStore?.token" class="relative" ref="userMenuRef">
-                            <button @click.stop="isUserMenuOpen = !isUserMenuOpen"
+                        <div v-if="authStore?.token" ref="userMenuRef" class="relative">
+                            <button
                                 class="flex items-center gap-3 pl-3 pr-2 py-1.5 rounded-full border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
-                                :class="{ 'bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600': isUserMenuOpen }">
-                                <span
-                                    class="text-sm font-semibold text-slate-700 dark:text-slate-200 hidden sm:block">
+                                :class="{ 'bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600': isUserMenuOpen }"
+                                @click.stop="isUserMenuOpen = !isUserMenuOpen">
+                                <span class="text-sm font-semibold text-slate-700 dark:text-slate-200 hidden sm:block">
                                     {{ authStore.user.name.split(' ')[0] }}
                                 </span>
                                 <div class="relative">
-                                    <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-30"></div>
+                                    <div
+                                        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-30" />
                                     <img :src="authStore.user.avatarUrl || `https://ui-avatars.com/api/?name=${authStore.user.name}&background=0D8ABC&color=fff`"
                                         alt="Avatar"
                                         class="relative w-9 h-9 rounded-full border-2 border-white dark:border-slate-800 object-cover shadow-md">
                                 </div>
-                                <svg class="w-4 h-4 text-slate-400 transition-transform duration-200" :class="{ 'rotate-180': isUserMenuOpen }"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M19 9l-7 7-7-7" />
-                                </svg>
                             </button>
 
                             <transition enter-active-class="transition ease-out duration-100"
@@ -73,32 +61,40 @@
                                 <div v-if="isUserMenuOpen"
                                     class="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-800 py-2 focus:outline-none z-50 ring-1 ring-black/5 dark:ring-white/5">
                                     <div class="px-4 py-3 border-b border-slate-100 dark:border-slate-800 mb-1">
-                                        <p class="text-xs text-slate-500 dark:text-slate-400 font-semibold uppercase tracking-wide">Signed in as
+                                        <p
+                                            class="text-xs text-slate-500 dark:text-slate-400 font-semibold uppercase tracking-wide">
+                                            Signed in as
                                         </p>
                                         <p class="text-sm font-bold text-slate-900 dark:text-white truncate mt-1">{{
                                             authStore.user.email }}</p>
                                     </div>
-                                    <button @click="navigateTo('/profile')"
-                                        class="w-full text-left px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors">
+                                    <button
+                                        class="w-full text-left px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors"
+                                        @click="navigateTo('/profile')">
                                         <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                         </svg>
                                         Your Profile
                                     </button>
                                     <div v-if="authStore.user.role == 'ADMINISTRATOR'">
-                                        <button @click="navigateTo('/admin/users')"
-                                            class="w-full text-left px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors">
+                                        <button
+                                            class="w-full text-left px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 flex items-center gap-3 transition-colors"
+                                            @click="navigateTo('/admin/users')">
                                             <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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-10c1.657 0 3 .895 3 2s-1.343 2-3 2-3 .895-3 2 1.343 2 3 2m0-10v10m0 0l3-3m-3 3l-3-3" />
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-10c1.657 0 3 .895 3 2s-1.343 2-3 2-3 .895-3 2 1.343 2 3 2m0-10v10m0 0l3-3m-3 3l-3-3" />
                                             </svg>
                                             Admin Dashboard
                                         </button>
                                     </div>
                                     <div class="border-t border-slate-100 dark:border-slate-800 mt-1 pt-1">
-                                        <button @click="handleLogout"
-                                            class="w-full text-left px-4 py-2.5 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-3 transition-colors">
+                                        <button
+                                            class="w-full text-left px-4 py-2.5 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-3 transition-colors"
+                                            @click="handleLogout">
                                             <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                                             </svg>
                                             Sign out
                                         </button>
@@ -114,8 +110,9 @@
                             </nuxt-link>
                         </template>
 
-                        <button @click="isMobileMenuOpen = !isMobileMenuOpen"
-                            class="md:hidden p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
+                        <button
+                            class="md:hidden p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+                            @click="isMobileMenuOpen = !isMobileMenuOpen">
                             <svg v-if="!isMobileMenuOpen" class="w-7 h-7" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -188,7 +185,6 @@ function toggleDark() {
 
 // Navigation Links
 const navLinks = [
-    { name: 'Home', path: '/' },
     { name: 'Profile', path: '/profile' },
 ];
 
@@ -226,4 +222,3 @@ onUnmounted(() => {
     window.removeEventListener('click', closeDropdowns);
 });
 </script>
-
diff --git a/app/pages/admin/users/index.vue b/app/pages/admin/users/index.vue
index 56c4a9b..a6f0777 100644
--- a/app/pages/admin/users/index.vue
+++ b/app/pages/admin/users/index.vue
@@ -1,5 +1,4 @@
 <template>
-    <title>Team Management - Reddit for Academic Papers</title>
     <div
         class="min-h-screen bg-slate-50 dark:bg-slate-950 p-4 md:p-8 font-sans text-slate-900 dark:text-slate-200 transition-colors duration-300">
 
@@ -15,11 +14,11 @@
                         Manage user accounts, roles, and system access permissions
                     </p>
                 </div>
-                <button @click="openCreateModal"
-                    class="group relative inline-flex items-center gap-2.5 px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 transform hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200">
+                <button
+                    class="group relative inline-flex items-center gap-2.5 px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 transform hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200"
+                    @click="openCreateModal">
                     <div
-                        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl blur opacity-30 group-hover:opacity-50 transition duration-200">
-                    </div>
+                        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl blur opacity-30 group-hover:opacity-50 transition duration-200" />
                     <svg class="relative w-5 h-5 transition-transform group-hover:rotate-90 duration-300" fill="none"
                         viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
@@ -32,13 +31,12 @@
             <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <div class="relative group">
                     <div
-                        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-0 group-hover:opacity-20 transition duration-300">
-                    </div>
+                        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-0 group-hover:opacity-20 transition duration-300" />
                     <div
                         class="relative bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-md transition-all duration-300">
                         <div class="flex items-center gap-4">
                             <div class="relative">
-                                <div class="absolute -inset-1 bg-blue-500/20 rounded-xl blur"></div>
+                                <div class="absolute -inset-1 bg-blue-500/20 rounded-xl blur" />
                                 <div
                                     class="relative p-3 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/30">
                                     <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -62,13 +60,12 @@
 
                 <div class="relative group">
                     <div
-                        class="absolute -inset-0.5 bg-gradient-to-r from-emerald-600 to-teal-600 rounded-2xl blur opacity-0 group-hover:opacity-20 transition duration-300">
-                    </div>
+                        class="absolute -inset-0.5 bg-gradient-to-r from-emerald-600 to-teal-600 rounded-2xl blur opacity-0 group-hover:opacity-20 transition duration-300" />
                     <div
                         class="relative bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-md transition-all duration-300">
                         <div class="flex items-center gap-4">
                             <div class="relative">
-                                <div class="absolute -inset-1 bg-emerald-500/20 rounded-xl blur"></div>
+                                <div class="absolute -inset-1 bg-emerald-500/20 rounded-xl blur" />
                                 <div
                                     class="relative p-3 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 text-white shadow-lg shadow-emerald-500/30">
                                     <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -92,13 +89,12 @@
 
                 <div class="relative group">
                     <div
-                        class="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl blur opacity-0 group-hover:opacity-20 transition duration-300">
-                    </div>
+                        class="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl blur opacity-0 group-hover:opacity-20 transition duration-300" />
                     <div
                         class="relative bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-md transition-all duration-300">
                         <div class="flex items-center gap-4">
                             <div class="relative">
-                                <div class="absolute -inset-1 bg-purple-500/20 rounded-xl blur"></div>
+                                <div class="absolute -inset-1 bg-purple-500/20 rounded-xl blur" />
                                 <div
                                     class="relative p-3 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg shadow-purple-500/30">
                                     <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -124,8 +120,7 @@
             <!-- Search Bar -->
             <div class="relative group">
                 <div
-                    class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-0 group-hover:opacity-10 transition duration-300">
-                </div>
+                    class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-0 group-hover:opacity-10 transition duration-300" />
                 <div
                     class="relative bg-white dark:bg-slate-900 p-1.5 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 hover:border-blue-300 dark:hover:border-blue-700/50 transition-all">
                     <div class="flex items-center gap-3 px-4">
@@ -142,8 +137,7 @@
             <!-- Users Table -->
             <div class="relative group">
                 <div
-                    class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-0 group-hover:opacity-5 transition duration-500">
-                </div>
+                    class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-0 group-hover:opacity-5 transition duration-500" />
                 <div
                     class="relative bg-white dark:bg-slate-900 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-800 overflow-hidden">
                     <div class="overflow-x-auto">
@@ -188,8 +182,7 @@
                                         <div class="flex items-center gap-4">
                                             <div class="relative">
                                                 <div
-                                                    class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-0 group-hover/row:opacity-30 transition duration-300">
-                                                </div>
+                                                    class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-0 group-hover/row:opacity-30 transition duration-300" />
                                                 <div
                                                     class="relative w-11 h-11 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-white flex items-center justify-center font-bold text-sm shadow-md shadow-blue-500/20">
                                                     {{ getInitials(user.name) }}
@@ -223,16 +216,16 @@
                                             class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold shadow-sm border"
                                             :class="user.is_active ? 'bg-emerald-100 border-emerald-200 text-emerald-700 dark:bg-emerald-900/30 dark:border-emerald-800 dark:text-emerald-400' : 'bg-red-100 border-red-200 text-red-700 dark:bg-red-900/30 dark:border-red-800 dark:text-red-400'">
                                             <span class="w-1.5 h-1.5 rounded-full"
-                                                :class="user.is_active ? 'bg-emerald-500' : 'bg-red-500'"></span>
+                                                :class="user.is_active ? 'bg-emerald-500' : 'bg-red-500'" />
                                             {{ user.is_active ? 'Active' : 'Suspended' }}
                                         </span>
                                     </td>
                                     <td class="p-6 pr-8 text-right">
                                         <div
                                             class="flex items-center justify-end gap-2 opacity-0 group-hover/row:opacity-100 transition-opacity duration-200">
-                                            <button @click.stop="openEditModal(user)"
+                                            <button
                                                 class="p-2.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
-                                                title="Edit">
+                                                title="Edit" @click.stop="openEditModal(user)">
                                                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                                                     stroke="currentColor">
                                                     <path stroke-linecap="round" stroke-linejoin="round"
@@ -240,9 +233,9 @@
                                                         d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                 </svg>
                                             </button>
-                                            <button @click.stop="confirmDelete(user)"
+                                            <button
                                                 class="p-2.5 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
-                                                title="Delete">
+                                                title="Delete" @click.stop="confirmDelete(user)">
                                                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                                                     stroke="currentColor">
                                                     <path stroke-linecap="round" stroke-linejoin="round"
@@ -264,8 +257,7 @@
         <Transition enter-active-class="duration-300 ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100"
             leave-active-class="duration-200 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
             <div v-if="showModal" class="fixed inset-0 z-[100] overflow-y-auto" role="dialog" aria-modal="true">
-                <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" @click="closeModal">
-                </div>
+                <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" @click="closeModal" />
                 <div class="flex min-h-full items-center justify-center p-4">
                     <Transition enter-active-class="duration-300 ease-out"
                         enter-from-class="opacity-0 scale-95 translate-y-4"
@@ -274,8 +266,7 @@
                         leave-to-class="opacity-0 scale-95 translate-y-4">
                         <div class="relative w-full max-w-2xl">
                             <div
-                                class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-3xl blur opacity-20">
-                            </div>
+                                class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-3xl blur opacity-20" />
                             <div
                                 class="relative overflow-hidden rounded-2xl bg-white dark:bg-slate-900 shadow-2xl border border-slate-200 dark:border-slate-800">
 
@@ -283,14 +274,13 @@
                                     class="relative bg-gradient-to-r from-slate-50 to-slate-100/50 dark:from-slate-800/50 dark:to-slate-800/30 px-8 py-6 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center">
                                     <div class="flex items-center gap-3">
                                         <div
-                                            class="w-1.5 h-8 bg-gradient-to-b from-blue-600 to-indigo-600 rounded-full">
-                                        </div>
+                                            class="w-1.5 h-8 bg-gradient-to-b from-blue-600 to-indigo-600 rounded-full" />
                                         <h3 class="text-xl font-bold text-slate-900 dark:text-white">{{ isEditing ?
                                             'Edit User Details' : 'Create New User' }}</h3>
                                     </div>
-                                    <button @click="closeModal"
-                                        class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"><svg
-                                            class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <button class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
+                                        @click="closeModal"><svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
+                                            stroke="currentColor">
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                 d="M6 18L18 6M6 6l12 12" />
                                         </svg></button>
@@ -355,8 +345,7 @@
                                                     <input v-model="formData.is_active" type="checkbox"
                                                         class="sr-only peer">
                                                     <div
-                                                        class="w-11 h-6 bg-slate-200 rounded-full peer peer-checked:bg-blue-600 dark:bg-slate-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all">
-                                                    </div>
+                                                        class="w-11 h-6 bg-slate-200 rounded-full peer peer-checked:bg-blue-600 dark:bg-slate-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all" />
                                                 </div>
                                                 <span class="text-sm font-semibold transition-colors"
                                                     :class="formData.is_active ? 'text-slate-900 dark:text-white' : 'text-slate-500'">{{
@@ -366,8 +355,9 @@
                                     </div>
 
                                     <div v-if="isEditing" class="pt-2 border-t border-slate-100 dark:border-slate-800">
-                                        <button type="button" @click="sendPasswordRecovery"
-                                            class="text-sm text-red-500 hover:text-red-600 font-semibold flex items-center gap-2">
+                                        <button type="button"
+                                            class="text-sm text-red-500 hover:text-red-600 font-semibold flex items-center gap-2"
+                                            @click="sendPasswordRecovery">
                                             <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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
@@ -379,11 +369,13 @@
 
                                 <div
                                     class="bg-gradient-to-r from-slate-50 to-slate-100/50 dark:from-slate-800/50 dark:to-slate-800/30 px-8 py-6 border-t border-slate-200 dark:border-slate-800 flex flex-row-reverse gap-3">
-                                    <button @click="handleSubmit"
-                                        class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg transition-all">{{
+                                    <button
+                                        class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg transition-all"
+                                        @click="handleSubmit">{{
                                             isEditing ? 'Save Changes' : 'Create Account' }}</button>
-                                    <button @click="closeModal"
-                                        class="px-8 py-3 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold rounded-xl transition-all">Cancel</button>
+                                    <button
+                                        class="px-8 py-3 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold rounded-xl transition-all"
+                                        @click="closeModal">Cancel</button>
                                 </div>
                             </div>
                         </div>
@@ -397,7 +389,7 @@
             leave-active-class="duration-200 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
             <div v-if="showDetailsModal" class="fixed inset-0 z-[100] overflow-y-auto" role="dialog" aria-modal="true">
                 <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"
-                    @click="closeDetailsModal"></div>
+                    @click="closeDetailsModal" />
                 <div class="flex min-h-full items-center justify-center p-4">
                     <Transition enter-active-class="duration-300 ease-out"
                         enter-from-class="opacity-0 scale-95 translate-y-4"
@@ -427,9 +419,9 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <button @click="closeDetailsModal"
-                                        class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"><svg
-                                            class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <button class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
+                                        @click="closeDetailsModal"><svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
+                                            stroke="currentColor">
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                 d="M6 18L18 6M6 6l12 12" />
                                         </svg></button>
@@ -470,7 +462,7 @@
                                                         class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">{{
                                                             item.action.replace('_', ' ') }}</span>
                                                     <span class="text-xs text-slate-400 font-medium">{{ item.target_type
-                                                    }} #{{ item.target_id }}</span>
+                                                        }} #{{ item.target_id }}</span>
                                                 </div>
                                                 <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{
                                                     item.details }}</p>
@@ -482,8 +474,9 @@
 
                             <div
                                 class="flex-none bg-gradient-to-r from-slate-50 to-slate-100/50 dark:from-slate-800/50 dark:to-slate-800/30 px-8 py-4 border-t border-slate-200 dark:border-slate-800">
-                                <button @click="closeDetailsModal"
-                                    class="w-full px-6 py-3 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold rounded-xl transition-all">Close</button>
+                                <button
+                                    class="w-full px-6 py-3 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold rounded-xl transition-all"
+                                    @click="closeDetailsModal">Close</button>
                             </div>
 
                         </div>
diff --git a/app/pages/auth/forgot-password.vue b/app/pages/auth/forgot-password.vue
index dac39a8..1181ff5 100644
--- a/app/pages/auth/forgot-password.vue
+++ b/app/pages/auth/forgot-password.vue
@@ -57,7 +57,7 @@ async function handleResetRequest() {
 
             <div
                 class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
-                <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100! mb-8 text-center">Reset Password</h1>
+                <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">Reset Password</h1>
 
                 <form class="space-y-6" @submit.prevent="handleResetRequest">
                     <div>
@@ -69,7 +69,7 @@ async function handleResetRequest() {
                             'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
                             error ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
                         ]" placeholder="admin@mail.pt">
-                        <p v-if="error" class="mt-1.5 text-xs text-red-500! ml-1 font-medium">{{ error }}</p>
+                        <p v-if="error" class="mt-1.5 text-xs text-red-500 ml-1 font-medium">{{ error }}</p>
                     </div>
 
                     <div class="flex flex-col items-center gap-4 pt-2">
@@ -87,4 +87,4 @@ async function handleResetRequest() {
             </div>
         </Transition>
     </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index 481a3e9..fc10139 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -1,5 +1,4 @@
 <template>
-    <title> Login - Reddit for Academic Papers</title>
   <div
     class="min-h-screen bg-gray-100 dark:bg-gray-950 flex flex-col items-center justify-center p-6 transition-colors duration-300">
     <Transition appear enter-active-class="transition duration-700 ease-out" enter-from-class="translate-y-8 opacity-0"
@@ -7,7 +6,7 @@
 
       <div
         class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
-        <h1 class="text-3xl font-bold text-gray-800 dark:text-white! mb-8 text-center capitalize">Login</h1>
+        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center capitalize">Login</h1>
 
         <div v-if="globalError"
           class="mb-6 p-3 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400 text-sm text-center">
@@ -21,7 +20,7 @@
               'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
               errors.email ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
             ]" placeholder="admin@mail.pt">
-            <p v-if="errors.email" class="mt-1 text-xs text-red-500! ml-1">{{ errors.email }}</p>
+            <p v-if="errors.email" class="mt-1 text-xs text-red-500 ml-1">{{ errors.email }}</p>
           </div>
 
           <div>
@@ -30,7 +29,7 @@
               'w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-gray-900 dark:text-white',
               errors.password ? 'border-red-500 ring-1 ring-red-500' : 'border-gray-200 dark:border-gray-700'
             ]" placeholder="••••••••" @keyup.enter="handleLogin">
-            <p v-if="errors.password" class="mt-1 text-xs text-red-500! ml-1">{{ errors.password }}</p>
+            <p v-if="errors.password" class="mt-1 text-xs text-red-500 ml-1">{{ errors.password }}</p>
           </div>
 
           <div class="flex flex-col items-center gap-4 pt-2">
@@ -139,4 +138,4 @@ async function handleLogin() {
   animation-delay: 0.2s;
   opacity: 0;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index b1234d1..08c384b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,48 +1,477 @@
 <template>
-    <title> Reddit for Academic Papers - Home</title>
   <div
-    class="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center p-6 transition-colors duration-300">
-    <div class="w-full max-w-2xl animate-[fadeInUp_0.6s_ease-out]">
+    class="min-h-screen bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-300">
+    <div class="max-w-6xl mx-auto flex gap-6 py-8 px-4">
 
-      <header class="text-center mb-12">
-        <h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white! mb-4 tracking-tight">
-          Academic Management System
-        </h1>
-        <p class="text-lg text-gray-600 dark:text-gray-400 max-w-md mx-auto">
-          Streamline your educational workflow, manage student records, and oversee courses in one place.
-        </p>
-      </header>
-
-      <nav class="grid grid-cols-1 md:grid-cols-2 gap-6">
-
-        <nuxt-link to="/auth/login"
-          class="no-underline text-current block group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
-          <div class="text-3xl mb-4 group-hover:scale-110 transition-transform">🔐</div>
-          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100! mb-2">Access Portal</h2>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Sign in to manage your personalized dashboard and academic
-            data.</p>
-        </nuxt-link>
-
-        <nuxt-link to="/auth-test"
-          class="no-underline text-current block group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
-          <div class="text-3xl mb-4 group-hover:scale-110 transition-transform">🛠️</div>
-          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100! mb-2">System Test</h2>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Verify API connections and authentication state
-            persistence.</p>
-        </nuxt-link>
-
-      </nav>
-
-      <footer class="mt-16 text-center">
-        <div
-          class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 text-xs font-medium text-gray-600 dark:text-gray-400">
-          <span class="relative flex h-2 w-2">
-            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
-          </span>
-          System Operational
+      <aside v-if="!selectedPost" class="hidden lg:block w-fit min-w-[160px] py-24">
+        <div class="sticky top-8">
+          <div class="flex flex-col gap-2">
+            <button v-for="tag in availableTags" :key="tag.id" :class="[
+              'px-3 py-2 rounded-lg text-xs font-bold transition-all text-left shadow-sm cursor-pointer',
+              subscribedTags.includes(tag.id)
+                ? `${tag.color} border-current ring-1 ring-inset ring-black/5`
+                : 'bg-gray-50 dark:bg-gray-800 dark:border-gray-800 border opacity-60 hover:opacity-100'
+            ]" @click="toggleTagSubscription(tag)">
+              <span class="opacity-70 mr-1">{{ subscribedTags.includes(tag.id) ? '✓' : '#' }}</span>
+              {{ tag.name }}
+            </button>
+          </div>
         </div>
-      </footer>
+      </aside>
+
+      <main :class="[
+        'py-8 flex-1 transition-all duration-500 ease-in-out',
+        selectedPost ? 'max-w-3xl mx-auto' : 'max-w-2xl'
+      ]">
+
+        <div v-show="!selectedPost" class="space-y-4">
+          <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
+            <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+              <div class="relative flex-1 sm:flex-none">
+                <input v-model="searchQuery" type="text" placeholder="Search posts..."
+                  class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
+              </div>
+              <div class="flex items-center">
+                <select v-model="sortBy"
+                  class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
+                  <option value="date">Date</option>
+                  <option value="votes">Rating</option>
+                  <option value="comments">Comments</option>
+                </select>
+                <button
+                  class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                  :title="sortDesc ? 'Descending' : 'Ascending'" @click="sortDesc = !sortDesc">
+                  <span class="inline-block transition-transform duration-200" :class="{ 'rotate-180': !sortDesc }">
+                    ▼
+                  </span>
+                </button>
+              </div>
+
+              <select v-model="filterType"
+                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
+                <option value="ALL">All Types</option>
+                <option value="CONFERENCE_PAPER">Conference Paper</option>
+                <option value="RESEARCH_POST">Research Post</option>
+              </select>
+            </div>
+
+            <button
+              class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all active:scale-95 flex items-center justify-center group"
+              title="New Post" @click="isModalOpen = true">
+              <svg viewBox="0 0 24 24" class="w-5 h-5 fill-none stroke-current stroke-[2.5]"
+                xmlns="http://www.w3.org/2000/svg">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+            </button>
+          </div>
+          <div v-if="filteredPosts.length === 0 && !loading"
+            class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
+
+            <div
+              class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+
+            <div class="relative z-10 flex flex-col items-center">
+              <div
+                class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
+                <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              </div>
+
+              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
+                No publications yet
+              </h3>
+
+              <button
+                class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
+                @click="isModalOpen = 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 4v16m8-8H4" />
+                </svg>
+                Submit your first post
+              </button>
+            </div>
+          </div>
+          <TransitionGroup v-else appear enter-active-class="transition duration-500 ease-out"
+            enter-from-class="translate-y-4 opacity-0" enter-to-class="translate-y-0 opacity-100">
+            <div v-for="post in filteredPosts" :key="post.id"
+              class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
+              @click="fetchPostDetail(post.id)">
+              <div class="flex gap-4">
+                <div
+                  class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
+                  <button class="hover:text-blue-500 transition-colors text-lg" @click.stop="post.rating++">▲</button>
+                  <span class="text-xs font-bold">{{ post.rating }}</span>
+                  <button class="hover:text-red-500 transition-colors text-lg" @click.stop="post.rating--">▼</button>
+                </div>
+
+                <div class="flex-1">
+                  <div class="flex items-center gap-2 mb-1">
+                    <span
+                      class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
+                      {{ post.type.replace('_', ' ') }}
+                    </span>
+                    <span class="text-xs text-gray-500">{{ post.publication_date }}</span>
+                  </div>
+                  <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{ post.title }}</h2>
+                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By {{ post.authors.join(', ') }}
+                  </p>
+                  <div class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
+                    <span>💬 {{ post.comment_count }} Comments</span>
+                    <div class="flex gap-2">
+                      <span v-for="tag in post.tags" :key="tag.id" class="text-blue-600 dark:text-blue-400">#{{ tag.name
+                      }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </TransitionGroup>
+
+          <div v-if="loading && filteredPosts.length === 0" class="space-y-4">
+            <div v-for="i in 6" :key="i"
+              class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 animate-pulse">
+              <div class="flex gap-4">
+                <div class="w-10 h-16 bg-gray-100 dark:bg-gray-800 rounded-lg" />
+                <div class="flex-1 space-y-3">
+                  <div class="h-3 w-24 bg-gray-100 dark:bg-gray-800 rounded" />
+                  <div class="h-5 w-3/4 bg-gray-100 dark:bg-gray-800 rounded" />
+                  <div class="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div ref="loadMoreTrigger" class="h-20 w-full flex flex-col items-center justify-center gap-2">
+            <div v-if="loading"
+              class="animate-spin h-6 w-6 border-2 border-blue-600 border-t-transparent rounded-full" />
+          </div>
+
+        </div>
+        <div v-if="selectedPost" class="animate-fade-in-up">
+          <button
+            class="mb-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
+            @click="selectedPost = null">
+            ← BACK TO FEED
+          </button>
+
+          <article class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-8 shadow-lg">
+            <header class="mb-6">
+              <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight">{{ selectedPost.title
+              }}</h1>
+              <div class="flex items-center gap-3 text-sm">
+                <span class="bg-blue-600 text-white px-3 py-1 rounded-md font-bold text-xs uppercase">{{
+                  selectedPost.type
+                }}</span>
+                <span class="text-gray-500 font-medium">By <span class="text-blue-500">{{ selectedPost.submitter.name
+                    }}</span></span>
+              </div>
+            </header>
+
+            <div class="prose dark:prose-invert max-w-none mb-8">
+              <h4 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-2">Abstract</h4>
+              <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg">{{ selectedPost.abstract }}</p>
+            </div>
+
+            <hr class="border-gray-100 dark:border-gray-800 mb-8">
+
+            <section class="mb-10">
+              <h3 class="text-xl font-bold mb-4">Comments ({{ selectedPost.comments.length }})</h3>
+              <div class="space-y-3">
+                <textarea v-model="newCommentContent" rows="3"
+                  class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
+                  placeholder="What are your thoughts?" />
+                <div class="flex justify-end">
+                  <button :disabled="!newCommentContent.trim()"
+                    class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
+                    @click="submitComment">
+                    COMMENT
+                  </button>
+                </div>
+              </div>
+
+              <div class="mt-8 space-y-6">
+                <div v-for="comment in selectedPost.comments" :key="comment.id" class="flex gap-4">
+                  <div class="w-0.5 bg-gray-200 dark:bg-gray-800 rounded-full ml-2" />
+                  <div class="flex-1">
+                    <div class="flex items-center gap-2 mb-1">
+                      <span class="font-bold text-sm text-blue-600 dark:text-blue-400">{{ comment.author.name }}</span>
+                      <span class="text-[10px] text-gray-500 font-bold uppercase">{{ new
+                        Date(comment.created_at).toLocaleDateString() }}</span>
+                    </div>
+                    <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
+                      {{ comment.content }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </article>
+        </div>
+        <CreatePostModal :is-open="isModalOpen" :api="api" :token="token" @close="closeModal()"
+          @refresh="handleRefresh" />
+      </main>
     </div>
   </div>
 </template>
+
+
+<script setup>
+import { useAuthStore } from "~/stores/auth-store.js";
+import { storeToRefs } from "pinia";
+import { useRoute } from 'vue-router';
+import CreatePostModal from "~/components/ui/modal/CreatePostModal.vue";
+
+const route = useRoute(); // 2. Access the route object
+const config = useRuntimeConfig();
+const authStore = useAuthStore();
+const { user, token } = storeToRefs(authStore);
+const api = config.public.apiBase;
+
+// --- State Management ---
+const posts = ref([]);
+const selectedPost = ref(null);
+const loading = ref(false);
+const loadMoreTrigger = ref(null);
+const isModalOpen = ref(false);
+const searchQuery = ref('');
+const page = ref(1);
+
+const sortBy = ref('date');
+const sortDesc = ref(true);
+
+const subscribedTags = ref([]);
+const availableTags = ref([]);
+
+const filterType = ref('ALL');
+
+const newCommentContent = ref('');
+
+// Form States
+
+const checkQueryForModal = () => {
+  if (route.query.openCreatePostModal === 'true') {
+    isModalOpen.value = true;
+  }
+}
+
+const closeModal = () => {
+  const router = useRouter();
+  isModalOpen.value = false;
+  router.replace({ query: { ...route.query, openCreatePostModal: undefined } });
+};
+
+const fetchTags = async () => {
+  try {
+    const allTags = await $fetch(`${api}/tags`, {
+      headers: { Authorization: `Bearer ${token.value}` }
+    });
+
+    const colors = [
+      "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400",
+      "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+      "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
+      "bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-400",
+      "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
+    ];
+
+    availableTags.value = allTags.map((tag, index) => ({
+      ...tag,
+      color: colors[index % colors.length]
+    }));
+
+
+    const myTags = await $fetch(`${api}/tags/me`, {
+      headers: { Authorization: `Bearer ${token.value}` }
+    });
+
+    subscribedTags.value = myTags.map(t => t.id);
+  } catch (err) {
+    console.error("Error fetching tags:", err);
+  }
+
+};
+
+
+const toggleTagSubscription = async (tag) => {
+  const index = subscribedTags.value.indexOf(tag.id);
+  const isSubscribing = index === -1;
+
+  if (isSubscribing) subscribedTags.value.push(tag.id);
+  else subscribedTags.value.splice(index, 1);
+
+  try {
+    const endpoint = isSubscribing
+      ? `${api}/tags/${tag.id}/subscribe`
+      : `${api}/tags/${tag.id}/unsubscribe`;
+
+    await $fetch(endpoint, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token.value}` }
+    });
+
+  } catch (err) {
+    if (isSubscribing) subscribedTags.value.pop();
+    else subscribedTags.value.push(tag.id);
+
+    console.error("Sync failed:", err);
+  }
+
+};
+
+
+const handleRefresh = () => {
+  isModalOpen.value = false;
+  loadPosts();
+};
+
+
+const submitComment = () => {
+  if (!newCommentContent.value.trim()) return;
+
+  const comment = {
+    id: Date.now(),
+    content: newCommentContent.value,
+    author: { name: user.value?.name || "Guest" },
+    created_at: new Date().toISOString()
+  };
+
+  selectedPost.value.comments.unshift(comment);
+  newCommentContent.value = '';
+
+};
+
+const loadPosts = async () => {
+  if (loading.value || !hasMore.value) return;
+  loading.value = true;
+
+  try {
+    const data = await $fetch(`${api}/posts`, {
+      method: 'GET',
+      headers: { Authorization: `Bearer ${token.value}` },
+      params: {
+        page: page.value,
+        sort: sortBy.value,
+        order: sortDesc.value ? 'desc' : 'asc',
+        type: filterType.value !== 'ALL' ? filterType.value : undefined
+      }
+    });
+
+    if (data && data.length > 0) {
+      posts.value = [...posts.value, ...data];
+      page.value++;
+    } else {
+      hasMore.value = false;
+    }
+  } catch (err) {
+    console.error("Failed to fetch posts:", err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+const fetchPostDetail = async (id) => {
+  loading.value = true;
+  await new Promise(r => setTimeout(r, 400));
+  selectedPost.value = {
+    id,
+    title: posts.value.find(p => p.id === id)?.title || "A New Technique for Data Science",
+    authors: ["Joana B", "External Researcher"],
+    publication_date: "2025-11-01",
+    type: "CONFERENCE_PAPER",
+    abstract: "This breakthrough research explores the boundaries of predictive modeling and machine learning in academic environments. By leveraging sparse data sets, we achieve higher accuracy in student retention predictions.",
+    submitter: { id: 2, name: "Joana B" },
+    comments: [
+      { id: 101, content: "This technique could revolutionize our approach to Project X!", author: { name: "Joana B" }, created_at: "2025-11-10T10:30:00Z" },
+    ]
+  };
+  loading.value = false;
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
+const filteredPosts = computed(() => {
+  const result = posts.value.filter(p => {
+    const matchesType = filterType.value === 'ALL' || p.type === filterType.value;
+    const matchesTags = subscribedTags.value.length === 0 ||
+      p.tags.some(t => subscribedTags.value.includes(t.id));
+    return matchesType && matchesTags;
+  });
+
+  return result.sort((a, b) => {
+    const modifier = sortDesc.value ? 1 : -1;
+
+    if (sortBy.value === 'votes') {
+      return (b.rating - a.rating) * modifier;
+    } else if (sortBy.value === 'comments') {
+      return (b.comment_count - a.comment_count) * modifier;
+    } else {
+      return (new Date(b.publication_date).getTime() - new Date(a.publication_date).getTime()) * modifier;
+    }
+  });
+});
+
+watch(posts, () => {
+  if (filteredPosts.value.length < 3 && !loading.value && !selectedPost.value) {
+    loadPosts();
+  }
+}, { deep: true });
+
+watch([sortBy, sortDesc, filterType], () => {
+  posts.value = [];
+  page.value = 1;
+  hasMore.value = true;
+  loadPosts();
+});
+
+onMounted(async () => {
+  checkQueryForModal();
+
+  await Promise.all([
+    loadPosts(),
+    fetchTags()
+  ]);
+
+  const observer = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && !loading.value && !selectedPost.value) {
+      loadPosts();
+    }
+  }, {
+    rootMargin: '300px',
+    threshold: 0.1
+  });
+
+  if (loadMoreTrigger.value) {
+    observer.observe(loadMoreTrigger.value);
+  }
+});
+</script>
+
+<style scoped>
+@keyframes fadeInUp {
+
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.5s ease-out forwards;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 52a1625..8021a32 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -1,5 +1,4 @@
 <template>
-    <title>{{ userProfile.name }} - Reddit for Academic Papers</title>
     <div
         class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
 
@@ -15,12 +14,11 @@
                                 <div
                                     class="h-32 w-32 rounded-full border-4 border-white dark:border-slate-800 bg-slate-100 dark:bg-slate-800 overflow-hidden shadow-md ring-1 ring-slate-200 dark:ring-slate-700">
                                     <img :src="userProfile.avatarUrl" :alt="userProfile.name"
-                                        class="h-full w-full object-cover transition-transform hover:scale-105" />
+                                        class="h-full w-full object-cover transition-transform hover:scale-105">
                                 </div>
                                 <div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white dark:border-slate-900 shadow-sm"
                                     :class="userProfile.is_active ? 'bg-emerald-500' : 'bg-gray-400'"
-                                    title="Online Status">
-                                </div>
+                                    title="Online Status" />
                             </div>
 
                             <h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">{{
@@ -33,10 +31,10 @@
 
                             <div class="w-full space-y-3">
                                 <button
-                                    @click=" activeTab = 'settings' "
-                                    class="w-full py-2.5 px-4 bg-slate-900 dark:bg-blue-600 hover:bg-slate-800 dark:hover:bg-blue-500 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer">
+                                    class="w-full py-2.5 px-4 bg-slate-900 dark:bg-blue-600 hover:bg-slate-800 dark:hover:bg-blue-500 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer"
+                                    @click=" activeTab = 'settings'">
                                     Edit Profile
-                                </button> 
+                                </button>
                             </div>
                         </div>
 
@@ -81,7 +79,7 @@
                             class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
                             <div class="text-2xl font-bold text-slate-900 dark:text-white">{{
                                 userProfile.publications.length
-                                }}</div>
+                            }}</div>
                             <div
                                 class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
                                 Papers
@@ -94,19 +92,22 @@
 
                     <div
                         class="bg-white dark:bg-slate-900 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex gap-1 overflow-x-auto transition-colors">
-                        <button @click="activeTab = 'overview'"
+                        <button
                             :class="activeTab === 'overview' ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800'"
-                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold cursor-pointer transition-colors">
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold cursor-pointer transition-colors"
+                            @click="activeTab = 'overview'">
                             Overview
                         </button>
-                        <button @click="activeTab = 'activity'"
+                        <button
                             :class="activeTab === 'activity' ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800'"
-                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium transition-colors cursor-pointer">
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium transition-colors cursor-pointer"
+                            @click="activeTab = 'activity'">
                             Activity Log
                         </button>
-                        <button @click="activeTab = 'settings'"
+                        <button
                             :class="activeTab === 'settings' ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800'"
-                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium transition-colors cursor-pointer">
+                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium transition-colors cursor-pointer"
+                            @click="activeTab = 'settings'">
                             Settings
                         </button>
                     </div>
@@ -143,8 +144,7 @@
                                     class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
 
                                     <div
-                                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
-                                    </div>
+                                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
 
                                     <div class="relative z-10 flex flex-col items-center">
                                         <div
@@ -166,8 +166,8 @@
                                         </p>
 
                                         <button
-                                            @click="goToCreatePost()"
-                                            class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer">
+                                            class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
+                                            @click="goToCreatePost()">
                                             <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 4v16m8-8H4" />
@@ -181,7 +181,7 @@
                                     class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 group relative">
                                     <div class="flex justify-between items-start gap-4 mb-2">
                                         <h3 class="text-base font-bold text-slate-900 dark:text-slate-100">{{ pub.title
-                                            }}</h3>
+                                        }}</h3>
                                         <span
                                             class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700">
                                             {{ pub.publishedYear }}
@@ -255,8 +255,8 @@
                         <div v-else-if="activeTab === 'settings'" key="settings"
                             class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
                             <h2
-                                    class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
-                                    Settings</h2>
+                                class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
+                                Settings</h2>
                             <p class="text-sm text-slate-600 dark:text-slate-400">
                                 Nothing here but chickens! Settings coming soon.
                             </p>
@@ -430,9 +430,9 @@ async function fetchProfileData() {
 // --- Redirects ---
 const goToCreatePost = () => {
     console.log("Navigating to create post modal...");
-    router.push({ 
-        path: '/', 
-        query: { openCreatePostModal: 'true' } 
+    router.push({
+        path: '/',
+        query: { openCreatePostModal: 'true' }
     });
 };
 
diff --git a/app/pages/profile/update-password.vue b/app/pages/profile/update-password.vue
index b459690..ce181ab 100644
--- a/app/pages/profile/update-password.vue
+++ b/app/pages/profile/update-password.vue
@@ -59,7 +59,7 @@ async function handleUpdatePassword() {
 
             <div
                 class="w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border dark:border-gray-800 transition-colors">
-                <h1 class="text-2xl font-bold text-gray-800 dark:text-white! mb-2 text-center">Password Update</h1>
+                <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-2 text-center">Password Update</h1>
                 <p class="text-sm text-gray-500 dark:text-gray-400 mb-8 text-center">Please update your password to
                     secure your account.</p>
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 19a2d61..1168135 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,13 @@ import tailwindcss from "@tailwindcss/vite";
 export default defineNuxtConfig({
     compatibilityDate: "2026-01-01",
     devtools: { enabled: true },
-
+    app: {
+        head: {
+        link: [
+            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+        ]
+        }
+    },
     css: [
         "~/assets/css/main.css",
         "~/assets/css/tailwind.css"
diff --git a/public/favicon.ico b/public/favicon.ico
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..438a0e1f9be913318764198bf1d9c073a027c5bd 100644
GIT binary patch
literal 410598
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

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e


From c2bb9a9b77deee5063840434366cc0d85a1caf0e Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Thu, 22 Jan 2026 15:34:33 +0000
Subject: [PATCH 07/18] feat: admin panel

---
 app/pages/index.vue         | 963 +++++++++++++++++++++++-------------
 app/pages/profile/index.vue | 136 ++++-
 2 files changed, 719 insertions(+), 380 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 08c384b..1030ea1 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,225 +1,404 @@
 <template>
-  <div
-    class="min-h-screen bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-300">
-    <div class="max-w-6xl mx-auto flex gap-6 py-8 px-4">
+    <div
+        class="min-h-screen bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-300">
+        <div class="max-w-6xl mx-auto flex gap-6 py-8 px-4">
 
-      <aside v-if="!selectedPost" class="hidden lg:block w-fit min-w-[160px] py-24">
-        <div class="sticky top-8">
-          <div class="flex flex-col gap-2">
-            <button v-for="tag in availableTags" :key="tag.id" :class="[
-              'px-3 py-2 rounded-lg text-xs font-bold transition-all text-left shadow-sm cursor-pointer',
-              subscribedTags.includes(tag.id)
-                ? `${tag.color} border-current ring-1 ring-inset ring-black/5`
-                : 'bg-gray-50 dark:bg-gray-800 dark:border-gray-800 border opacity-60 hover:opacity-100'
-            ]" @click="toggleTagSubscription(tag)">
-              <span class="opacity-70 mr-1">{{ subscribedTags.includes(tag.id) ? '✓' : '#' }}</span>
-              {{ tag.name }}
-            </button>
-          </div>
-        </div>
-      </aside>
-
-      <main :class="[
-        'py-8 flex-1 transition-all duration-500 ease-in-out',
-        selectedPost ? 'max-w-3xl mx-auto' : 'max-w-2xl'
-      ]">
-
-        <div v-show="!selectedPost" class="space-y-4">
-          <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
-            <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
-              <div class="relative flex-1 sm:flex-none">
-                <input v-model="searchQuery" type="text" placeholder="Search posts..."
-                  class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
-              </div>
-              <div class="flex items-center">
-                <select v-model="sortBy"
-                  class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
-                  <option value="date">Date</option>
-                  <option value="votes">Rating</option>
-                  <option value="comments">Comments</option>
-                </select>
-                <button
-                  class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-                  :title="sortDesc ? 'Descending' : 'Ascending'" @click="sortDesc = !sortDesc">
-                  <span class="inline-block transition-transform duration-200" :class="{ 'rotate-180': !sortDesc }">
-                    ▼
-                  </span>
-                </button>
-              </div>
-
-              <select v-model="filterType"
-                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
-                <option value="ALL">All Types</option>
-                <option value="CONFERENCE_PAPER">Conference Paper</option>
-                <option value="RESEARCH_POST">Research Post</option>
-              </select>
-            </div>
-
-            <button
-              class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all active:scale-95 flex items-center justify-center group"
-              title="New Post" @click="isModalOpen = true">
-              <svg viewBox="0 0 24 24" class="w-5 h-5 fill-none stroke-current stroke-[2.5]"
-                xmlns="http://www.w3.org/2000/svg">
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
-            </button>
-          </div>
-          <div v-if="filteredPosts.length === 0 && !loading"
-            class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
-
-            <div
-              class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
-
-            <div class="relative z-10 flex flex-col items-center">
-              <div
-                class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
-                <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
-                  stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-
-              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
-                No publications yet
-              </h3>
-
-              <button
-                class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
-                @click="isModalOpen = 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 4v16m8-8H4" />
-                </svg>
-                Submit your first post
-              </button>
-            </div>
-          </div>
-          <TransitionGroup v-else appear enter-active-class="transition duration-500 ease-out"
-            enter-from-class="translate-y-4 opacity-0" enter-to-class="translate-y-0 opacity-100">
-            <div v-for="post in filteredPosts" :key="post.id"
-              class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
-              @click="fetchPostDetail(post.id)">
-              <div class="flex gap-4">
-                <div
-                  class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
-                  <button class="hover:text-blue-500 transition-colors text-lg" @click.stop="post.rating++">▲</button>
-                  <span class="text-xs font-bold">{{ post.rating }}</span>
-                  <button class="hover:text-red-500 transition-colors text-lg" @click.stop="post.rating--">▼</button>
-                </div>
-
-                <div class="flex-1">
-                  <div class="flex items-center gap-2 mb-1">
-                    <span
-                      class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
-                      {{ post.type.replace('_', ' ') }}
-                    </span>
-                    <span class="text-xs text-gray-500">{{ post.publication_date }}</span>
-                  </div>
-                  <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{ post.title }}</h2>
-                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By {{ post.authors.join(', ') }}
-                  </p>
-                  <div class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
-                    <span>💬 {{ post.comment_count }} Comments</span>
-                    <div class="flex gap-2">
-                      <span v-for="tag in post.tags" :key="tag.id" class="text-blue-600 dark:text-blue-400">#{{ tag.name
-                      }}</span>
+            <aside v-if="!selectedPost" class="hidden lg:block w-fit min-w-[160px] py-24">
+                <div class="sticky top-8">
+                    <div class="flex flex-col gap-2">
+                        <button v-for="tag in availableTags" :key="tag.id" :class="[
+                            'px-3 py-2 rounded-lg text-xs font-bold transition-all text-left shadow-sm cursor-pointer',
+                            subscribedTags.includes(tag.id)
+                                ? `${tag.color} border-current ring-1 ring-inset ring-black/5`
+                                : 'bg-gray-50 dark:bg-gray-800 dark:border-gray-800 border opacity-60 hover:opacity-100'
+                        ]" @click="toggleTagSubscription(tag)">
+                            <span class="opacity-70 mr-1">{{ subscribedTags.includes(tag.id) ? '✓' : '#' }}</span>
+                            {{ tag.name }}
+                        </button>
                     </div>
-                  </div>
                 </div>
-              </div>
-            </div>
-          </TransitionGroup>
+            </aside>
 
-          <div v-if="loading && filteredPosts.length === 0" class="space-y-4">
-            <div v-for="i in 6" :key="i"
-              class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 animate-pulse">
-              <div class="flex gap-4">
-                <div class="w-10 h-16 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-                <div class="flex-1 space-y-3">
-                  <div class="h-3 w-24 bg-gray-100 dark:bg-gray-800 rounded" />
-                  <div class="h-5 w-3/4 bg-gray-100 dark:bg-gray-800 rounded" />
-                  <div class="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" />
-                </div>
-              </div>
-            </div>
-          </div>
+            <main :class="[
+                'py-8 flex-1 transition-all duration-500 ease-in-out',
+                selectedPost ? 'max-w-3xl mx-auto' : 'max-w-2xl'
+            ]">
 
-          <div ref="loadMoreTrigger" class="h-20 w-full flex flex-col items-center justify-center gap-2">
-            <div v-if="loading"
-              class="animate-spin h-6 w-6 border-2 border-blue-600 border-t-transparent rounded-full" />
-          </div>
+                <div v-show="!selectedPost" class="space-y-4">
+                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
+                        <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+                            <div class="relative flex-1 sm:flex-none">
+                                <input v-model="searchQuery" type="text" placeholder="Search posts..."
+                                    class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
+                            </div>
+                            <div class="flex items-center">
+                                <select v-model="sortBy"
+                                    class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
+                                    <option value="date">Date</option>
+                                    <option value="votes">Rating</option>
+                                    <option value="comments">Comments</option>
+                                </select>
+                                <button
+                                    class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                                    :title="sortDesc ? 'Descending' : 'Ascending'" @click="sortDesc = !sortDesc">
+                                    <span class="inline-block transition-transform duration-200"
+                                        :class="{ 'rotate-180': !sortDesc }">
+                                        ▼
+                                    </span>
+                                </button>
+                            </div>
 
-        </div>
-        <div v-if="selectedPost" class="animate-fade-in-up">
-          <button
-            class="mb-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
-            @click="selectedPost = null">
-            ← BACK TO FEED
-          </button>
+                            <select v-model="filterType"
+                                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
+                                <option value="ALL">All Types</option>
+                                <option value="CONFERENCE_PAPER">Conference Paper</option>
+                                <option value="RESEARCH_POST">Research Post</option>
+                            </select>
+                        </div>
 
-          <article class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-8 shadow-lg">
-            <header class="mb-6">
-              <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight">{{ selectedPost.title
-              }}</h1>
-              <div class="flex items-center gap-3 text-sm">
-                <span class="bg-blue-600 text-white px-3 py-1 rounded-md font-bold text-xs uppercase">{{
-                  selectedPost.type
-                }}</span>
-                <span class="text-gray-500 font-medium">By <span class="text-blue-500">{{ selectedPost.submitter.name
-                    }}</span></span>
-              </div>
-            </header>
-
-            <div class="prose dark:prose-invert max-w-none mb-8">
-              <h4 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-2">Abstract</h4>
-              <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg">{{ selectedPost.abstract }}</p>
-            </div>
-
-            <hr class="border-gray-100 dark:border-gray-800 mb-8">
-
-            <section class="mb-10">
-              <h3 class="text-xl font-bold mb-4">Comments ({{ selectedPost.comments.length }})</h3>
-              <div class="space-y-3">
-                <textarea v-model="newCommentContent" rows="3"
-                  class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
-                  placeholder="What are your thoughts?" />
-                <div class="flex justify-end">
-                  <button :disabled="!newCommentContent.trim()"
-                    class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
-                    @click="submitComment">
-                    COMMENT
-                  </button>
-                </div>
-              </div>
-
-              <div class="mt-8 space-y-6">
-                <div v-for="comment in selectedPost.comments" :key="comment.id" class="flex gap-4">
-                  <div class="w-0.5 bg-gray-200 dark:bg-gray-800 rounded-full ml-2" />
-                  <div class="flex-1">
-                    <div class="flex items-center gap-2 mb-1">
-                      <span class="font-bold text-sm text-blue-600 dark:text-blue-400">{{ comment.author.name }}</span>
-                      <span class="text-[10px] text-gray-500 font-bold uppercase">{{ new
-                        Date(comment.created_at).toLocaleDateString() }}</span>
+                        <button
+                            class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all active:scale-95 flex items-center justify-center group"
+                            title="New Post" @click="isModalOpen = true">
+                            <svg viewBox="0 0 24 24" class="w-5 h-5 fill-none stroke-current stroke-[2.5]"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <line x1="12" y1="5" x2="12" y2="19" />
+                                <line x1="5" y1="12" x2="19" y2="12" />
+                            </svg>
+                        </button>
                     </div>
-                    <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
-                      {{ comment.content }}
-                    </p>
-                  </div>
+                    <div v-if="filteredPosts.length === 0 && !loading"
+                        class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
+
+                        <div
+                            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+
+                        <div class="relative z-10 flex flex-col items-center">
+                            <div
+                                class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
+                                <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                </svg>
+                            </div>
+
+                            <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
+                                No publications yet
+                            </h3>
+
+                            <button
+                                class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
+                                @click="isModalOpen = 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 4v16m8-8H4" />
+                                </svg>
+                                Submit your first post
+                            </button>
+                        </div>
+                    </div>
+                    <TransitionGroup v-else appear enter-active-class="transition duration-500 ease-out"
+                        enter-from-class="translate-y-4 opacity-0" enter-to-class="translate-y-0 opacity-100">
+                        <div v-for="post in filteredPosts" :key="post.id"
+                            class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
+                            @click="fetchPostDetail(post.id)">
+                            <div class="flex gap-4">
+                                <div
+                                    class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
+
+                                    <button class="hover:text-blue-500 transition-colors text-lg"
+                                        :class="{ 'text-orange-500': post.my_vote === 'UP' }"
+                                        @click.stop="votePost(post, 1)">▲</button>
+
+                                    <span class="text-xs font-bold">{{ post.rating }}</span>
+
+                                    <button class="hover:text-red-500 transition-colors text-lg"
+                                        :class="{ 'text-blue-500': post.my_vote === 'DOWN' }"
+                                        @click.stop="votePost(post, -1)">▼</button>
+                                </div>
+
+                                <div class="flex-1">
+                                    <div class="flex items-center gap-2 mb-1">
+                                        <span
+                                            class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
+                                            {{ post.type.replace('_', ' ') }}
+                                        </span>
+                                        <span class="text-xs text-gray-500">{{ post.publication_date }}</span>
+                                    </div>
+                                    <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{ post.title }}
+                                    </h2>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By {{
+                                        post.authors.join(', ') }}
+                                    </p>
+                                    <div class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
+                                        <span>💬 {{ post.comment_count }} Comments</span>
+                                        <div class="flex gap-2">
+                                            <span v-for="tag in post.tags" :key="tag.id"
+                                                class="text-blue-600 dark:text-blue-400">#{{ tag.name
+                                                }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </TransitionGroup>
+
+                    <div v-if="loading && filteredPosts.length === 0" class="space-y-4">
+                        <div v-for="i in 6" :key="i"
+                            class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 animate-pulse">
+                            <div class="flex gap-4">
+                                <div class="w-10 h-16 bg-gray-100 dark:bg-gray-800 rounded-lg" />
+                                <div class="flex-1 space-y-3">
+                                    <div class="h-3 w-24 bg-gray-100 dark:bg-gray-800 rounded" />
+                                    <div class="h-5 w-3/4 bg-gray-100 dark:bg-gray-800 rounded" />
+                                    <div class="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div ref="loadMoreTrigger" class="h-20 w-full flex flex-col items-center justify-center gap-2">
+                        <div v-if="loading"
+                            class="animate-spin h-6 w-6 border-2 border-blue-600 border-t-transparent rounded-full" />
+                    </div>
+
                 </div>
-              </div>
-            </section>
-          </article>
+                <div v-if="selectedPost" class="animate-fade-in-up">
+                    <button
+                        class="mb-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
+                        @click="selectedPost = null">
+                        ← BACK TO FEED
+                    </button>
+
+                    <article
+                        class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-2xl shadow-xl overflow-hidden">
+
+                        <div
+                            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">
+                                <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">
+                                    {{ selectedPost.type.replace('_', ' ') }}
+                                </span>
+                                <span
+                                    class="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
+                                    <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                    </svg>
+                                    {{ new Date(selectedPost.publicationDate).toLocaleDateString('en-US', {
+                                        year:
+                                            'numeric', month: 'long', day: 'numeric'
+                                    }) }}
+                                </span>
+                            </div>
+
+                            <h1
+                                class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
+                                {{ selectedPost.title }}
+                            </h1>
+
+                            <div
+                                class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
+
+                                <div>
+                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Authors
+                                    </h4>
+                                    <div class="flex flex-wrap gap-2">
+                                        <span v-for="(author, idx) in selectedPost.authors" :key="idx"
+                                            class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200">
+                                            <span
+                                                class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 flex items-center justify-center text-xs">
+                                                {{ author.charAt(0) }}
+                                            </span>
+                                            {{ author }}
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Submitted
+                                        By</h4>
+                                    <div class="flex items-center gap-3">
+                                        <div
+                                            class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
+                                            {{ selectedPost.submitter.name.charAt(0) }}
+                                        </div>
+                                        <div>
+                                            <div class="text-sm font-bold text-gray-900 dark:text-white">{{
+                                                selectedPost.submitter.name }}</div>
+                                            <div class="text-xs text-gray-500">{{ selectedPost.submitter.role }} • {{
+                                                selectedPost.submitter.email }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="p-8">
+                            <div class="mb-10">
+                                <h3
+                                    class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                                    <svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24"
+                                        stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M4 6h16M4 12h16M4 18h7" />
+                                    </svg>
+                                    Abstract
+                                </h3>
+                                <p
+                                    class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-justify whitespace-pre-line">
+                                    {{ selectedPost.abstractText }}
+                                </p>
+                            </div>
+
+                            <div
+                                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-8 border-b dark:border-gray-800">
+                                <div v-if="selectedPost.tags && selectedPost.tags.length > 0">
+                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Tags</h4>
+                                    <div class="flex flex-wrap gap-2">
+                                        <span v-for="tag in selectedPost.tags" :key="tag.id"
+                                            class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-medium border border-gray-200 dark:border-gray-700">
+                                            #{{ tag.name }}
+                                        </span>
+                                    </div>
+                                </div>
+                                <div v-else class="text-sm text-gray-400 italic">No tags assigned</div>
+
+                                <div class="flex items-center gap-4">
+                                    <div
+                                        class="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-1.5 shadow-sm">
+
+                                        <button @click="votePost(selectedPost, 1)"
+                                            class="p-2 rounded-lg transition-all active:scale-90"
+                                            :class="selectedPost.my_vote === 'UP' ? 'text-orange-600 bg-orange-100 dark:bg-orange-900/30' : 'text-slate-400 hover:text-orange-500 hover:bg-white dark:hover:bg-slate-700'"
+                                            title="Upvote">
+                                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                                                stroke-width="2.5">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                    d="M5 15l7-7 7 7" />
+                                            </svg>
+                                        </button>
+
+                                        <div class="min-w-[40px] text-center">
+                                            <span class="text-2xl font-black tracking-tight" :class="{
+                                                'text-orange-600': selectedPost.my_vote === 'UP',
+                                                'text-blue-600': selectedPost.my_vote === 'DOWN',
+                                                'text-slate-900 dark:text-white': !selectedPost.my_vote || selectedPost.my_vote === 'NONE'
+                                            }">
+                                                {{ selectedPost.rating }}
+                                            </span>
+                                        </div>
+
+                                        <button @click="votePost(selectedPost, -1)"
+                                            class="p-2 rounded-lg transition-all active:scale-90"
+                                            :class="selectedPost.my_vote === 'DOWN' ? 'text-blue-600 bg-blue-100 dark:bg-blue-900/30' : 'text-slate-400 hover:text-blue-500 hover:bg-white dark:hover:bg-slate-700'"
+                                            title="Downvote">
+                                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                                                stroke-width="2.5">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                    d="M19 9l-7 7-7-7" />
+                                            </svg>
+                                        </button>
+                                    </div>
+
+                                </div>
+
+
+                            </div>
+
+                            <div v-if="selectedPost.attachedFile"
+                                class="mb-10 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:border-blue-400 transition-colors group">
+                                <div class="flex items-center justify-between">
+                                    <div class="flex items-center gap-4">
+                                        <div
+                                            class="p-3 bg-red-100 text-red-600 rounded-lg group-hover:scale-110 transition-transform">
+                                            <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <div class="font-bold text-gray-900 dark:text-white mb-0.5">Attachment
+                                                Available</div>
+                                            <div
+                                                class="text-xs text-gray-500 font-mono truncate max-w-[200px] md:max-w-md">
+                                                {{ getFileName(selectedPost.attachedFile) }}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <button @click="downloadFile(selectedPost)"
+                                        class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all">
+                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                                        </svg>
+                                        Download
+                                    </button>
+                                </div>
+                            </div>
+
+                            <hr class="border-gray-100 dark:border-gray-800 mb-8">
+
+                            <section>
+                                <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
+                                    Comments
+                                    <span
+                                        class="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs px-2 py-1 rounded-full">{{
+                                            selectedPost.comments.length }}</span>
+                                </h3>
+                                <div class="space-y-3">
+                                    <textarea v-model="newCommentContent" rows="3"
+                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
+                                        placeholder="What are your thoughts?" />
+                                    <div class="flex justify-end">
+                                        <button :disabled="!newCommentContent.trim()"
+                                            class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
+                                            @click="submitComment">
+                                            COMMENT
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div class="mt-8 space-y-6">
+                                    <div v-if="selectedPost.comments.length === 0"
+                                        class="text-center py-8 text-gray-400 italic">
+                                        Be the first to comment!
+                                    </div>
+
+                                    <div v-for="comment in selectedPost.comments" :key="comment.id" class="flex gap-4">
+                                        <div
+                                            class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 flex-shrink-0" />
+                                        <div class="flex-1">
+                                            <div
+                                                class="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-xl rounded-tl-none border border-gray-100 dark:border-gray-800">
+                                                <div class="flex items-center justify-between mb-2">
+                                                    <span class="font-bold text-sm text-blue-600 dark:text-blue-400">{{
+                                                        comment.author.name }}</span>
+                                                    <span class="text-[10px] text-gray-400 uppercase">{{ new
+                                                        Date(comment.created_at).toLocaleDateString() }}</span>
+                                                </div>
+                                                <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
+                                                    {{ comment.content }}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </article>
+                </div>
+                <CreatePostModal :is-open="isModalOpen" :api="api" :token="token" @close="closeModal()"
+                    @refresh="handleRefresh" />
+            </main>
         </div>
-        <CreatePostModal :is-open="isModalOpen" :api="api" :token="token" @close="closeModal()"
-          @refresh="handleRefresh" />
-      </main>
     </div>
-  </div>
 </template>
 
 
-<script setup>
+<script setup lang="ts">
 import { useAuthStore } from "~/stores/auth-store.js";
 import { storeToRefs } from "pinia";
 import { useRoute } from 'vue-router';
@@ -239,6 +418,7 @@ const loadMoreTrigger = ref(null);
 const isModalOpen = ref(false);
 const searchQuery = ref('');
 const page = ref(1);
+const hasMore = ref(true);
 
 const sortBy = ref('date');
 const sortDesc = ref(true);
@@ -253,225 +433,296 @@ const newCommentContent = ref('');
 // Form States
 
 const checkQueryForModal = () => {
-  if (route.query.openCreatePostModal === 'true') {
-    isModalOpen.value = true;
-  }
+    if (route.query.openCreatePostModal === 'true') {
+        isModalOpen.value = true;
+    }
 }
 
 const closeModal = () => {
-  const router = useRouter();
-  isModalOpen.value = false;
-  router.replace({ query: { ...route.query, openCreatePostModal: undefined } });
+    const router = useRouter();
+    isModalOpen.value = false;
+    router.replace({ query: { ...route.query, openCreatePostModal: undefined } });
 };
 
 const fetchTags = async () => {
-  try {
-    const allTags = await $fetch(`${api}/tags`, {
-      headers: { Authorization: `Bearer ${token.value}` }
-    });
+    try {
+        const allTags = await $fetch(`${api}/tags`, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
 
-    const colors = [
-      "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400",
-      "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
-      "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
-      "bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-400",
-      "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
-    ];
+        const colors = [
+            "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400",
+            "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+            "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
+            "bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-400",
+            "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
+        ];
 
-    availableTags.value = allTags.map((tag, index) => ({
-      ...tag,
-      color: colors[index % colors.length]
-    }));
+        availableTags.value = allTags.map((tag, index) => ({
+            ...tag,
+            color: colors[index % colors.length]
+        }));
 
 
-    const myTags = await $fetch(`${api}/tags/me`, {
-      headers: { Authorization: `Bearer ${token.value}` }
-    });
+        const myTags = await $fetch(`${api}/tags/me`, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
 
-    subscribedTags.value = myTags.map(t => t.id);
-  } catch (err) {
-    console.error("Error fetching tags:", err);
-  }
+        subscribedTags.value = myTags.map(t => t.id);
+    } catch (err) {
+        console.error("Error fetching tags:", err);
+    }
 
 };
 
 
 const toggleTagSubscription = async (tag) => {
-  const index = subscribedTags.value.indexOf(tag.id);
-  const isSubscribing = index === -1;
+    const index = subscribedTags.value.indexOf(tag.id);
+    const isSubscribing = index === -1;
 
-  if (isSubscribing) subscribedTags.value.push(tag.id);
-  else subscribedTags.value.splice(index, 1);
+    if (isSubscribing) subscribedTags.value.push(tag.id);
+    else subscribedTags.value.splice(index, 1);
 
-  try {
-    const endpoint = isSubscribing
-      ? `${api}/tags/${tag.id}/subscribe`
-      : `${api}/tags/${tag.id}/unsubscribe`;
+    try {
+        const endpoint = isSubscribing
+            ? `${api}/tags/${tag.id}/subscribe`
+            : `${api}/tags/${tag.id}/unsubscribe`;
 
-    await $fetch(endpoint, {
-      method: 'POST',
-      headers: { Authorization: `Bearer ${token.value}` }
-    });
+        await $fetch(endpoint, {
+            method: 'POST',
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
 
-  } catch (err) {
-    if (isSubscribing) subscribedTags.value.pop();
-    else subscribedTags.value.push(tag.id);
+    } catch (err) {
+        if (isSubscribing) subscribedTags.value.pop();
+        else subscribedTags.value.push(tag.id);
 
-    console.error("Sync failed:", err);
-  }
+        console.error("Sync failed:", err);
+    }
 
 };
 
 
 const handleRefresh = () => {
-  isModalOpen.value = false;
-  loadPosts();
+    isModalOpen.value = false;
+    loadPosts();
 };
 
 
 const submitComment = () => {
-  if (!newCommentContent.value.trim()) return;
+    if (!newCommentContent.value.trim()) return;
 
-  const comment = {
-    id: Date.now(),
-    content: newCommentContent.value,
-    author: { name: user.value?.name || "Guest" },
-    created_at: new Date().toISOString()
-  };
+    const comment = {
+        id: Date.now(),
+        content: newCommentContent.value,
+        author: { name: user.value?.name || "Guest" },
+        created_at: new Date().toISOString()
+    };
 
-  selectedPost.value.comments.unshift(comment);
-  newCommentContent.value = '';
+    selectedPost.value.comments.unshift(comment);
+    newCommentContent.value = '';
 
 };
 
 const loadPosts = async () => {
-  if (loading.value || !hasMore.value) return;
-  loading.value = true;
+    if (loading.value || !hasMore.value) return;
+    loading.value = true;
 
-  try {
-    const data = await $fetch(`${api}/posts`, {
-      method: 'GET',
-      headers: { Authorization: `Bearer ${token.value}` },
-      params: {
-        page: page.value,
-        sort: sortBy.value,
-        order: sortDesc.value ? 'desc' : 'asc',
-        type: filterType.value !== 'ALL' ? filterType.value : undefined
-      }
-    });
+    try {
+        const data = await $fetch(`${api}/publications`, {
+            method: 'GET',
+            headers: { Authorization: `Bearer ${token.value}` },
+            params: {
+                page: page.value,
+                sort: sortBy.value,
+                order: sortDesc.value ? 'desc' : 'asc',
+                type: filterType.value !== 'ALL' ? filterType.value : undefined
+            }
+        });
 
-    if (data && data.length > 0) {
-      posts.value = [...posts.value, ...data];
-      page.value++;
-    } else {
-      hasMore.value = false;
+        if (data && data.length > 0) {
+            posts.value = [...posts.value, ...data];
+            page.value++;
+        } else {
+            hasMore.value = false;
+        }
+    } catch (err) {
+        console.error("Failed to fetch posts:", err);
+    } finally {
+        loading.value = false;
     }
-  } catch (err) {
-    console.error("Failed to fetch posts:", err);
-  } finally {
-    loading.value = false;
-  }
 };
 
-
 const fetchPostDetail = async (id) => {
-  loading.value = true;
-  await new Promise(r => setTimeout(r, 400));
-  selectedPost.value = {
-    id,
-    title: posts.value.find(p => p.id === id)?.title || "A New Technique for Data Science",
-    authors: ["Joana B", "External Researcher"],
-    publication_date: "2025-11-01",
-    type: "CONFERENCE_PAPER",
-    abstract: "This breakthrough research explores the boundaries of predictive modeling and machine learning in academic environments. By leveraging sparse data sets, we achieve higher accuracy in student retention predictions.",
-    submitter: { id: 2, name: "Joana B" },
-    comments: [
-      { id: 101, content: "This technique could revolutionize our approach to Project X!", author: { name: "Joana B" }, created_at: "2025-11-10T10:30:00Z" },
-    ]
-  };
-  loading.value = false;
-  window.scrollTo({ top: 0, behavior: 'smooth' });
+    loading.value = true;
+    try {
+        const postDetail = await $fetch(`${api}/publications/${id}`, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        selectedPost.value = postDetail;
+    } catch (err) {
+        console.error("Failed to fetch post detail:", err);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const votePost = async (targetPost, direction) => {
+    if (!targetPost) return;
+
+    let voteTypeToSend = 'NONE';
+    const currentVote = targetPost.my_vote || 'NONE';
+
+    if (direction === 1) { 
+        voteTypeToSend = currentVote === 'UP' ? 'NONE' : 'UP';
+    } else if (direction === -1) { 
+        voteTypeToSend = currentVote === 'DOWN' ? 'NONE' : 'DOWN';
+    }
+
+    try {
+        const response = await $fetch(`${api}/publications/${targetPost.id}/vote`, {
+            method: 'PUT',
+            headers: { Authorization: `Bearer ${token.value}` },
+            body: { vote_type: voteTypeToSend }
+        });
+
+        targetPost.rating = response.score;
+        targetPost.my_vote = response.my_vote;
+
+        if (selectedPost.value && selectedPost.value.id === targetPost.id) {
+            selectedPost.value.rating = response.score;
+            selectedPost.value.my_vote = response.my_vote;
+        }
+
+    } catch (error) {
+        console.error("Vote failed", error);
+        alert("Failed to submit vote.");
+    }
+};
+
+const getFileName = (fullPath) => {
+    if (!fullPath) return null;
+    return fullPath.split(/[/\\]/).pop();
+};
+
+const downloadFile = async (post) => {
+    if (!post.attachedFile) return;
+
+    const filename = getFileName(post.attachedFile);
+    
+    const downloadUrl = `${api}/publications/download/${filename}`;
+    
+    try {
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.setAttribute('download', filename);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+        // Opção B: Se o endpoint for PRIVADO (@Authenticated), tens de fazer fetch com o token:
+        /*
+        const response = await fetch(downloadUrl, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        
+        if (!response.ok) throw new Error('Download failed');
+        
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        window.URL.revokeObjectURL(url);
+        */
+
+    } catch (e) {
+        console.error("Download error:", e);
+        alert("Could not download file.");
+    }
 };
 
 const filteredPosts = computed(() => {
-  const result = posts.value.filter(p => {
-    const matchesType = filterType.value === 'ALL' || p.type === filterType.value;
-    const matchesTags = subscribedTags.value.length === 0 ||
-      p.tags.some(t => subscribedTags.value.includes(t.id));
-    return matchesType && matchesTags;
-  });
+    const result = posts.value.filter(p => {
+        const matchesType = filterType.value === 'ALL' || p.type === filterType.value;
+        const matchesTags = subscribedTags.value.length === 0 ||
+            p.tags.some(t => subscribedTags.value.includes(t.id));
+        return matchesType && matchesTags;
+    });
 
-  return result.sort((a, b) => {
-    const modifier = sortDesc.value ? 1 : -1;
+    return result.sort((a, b) => {
+        const modifier = sortDesc.value ? 1 : -1;
 
-    if (sortBy.value === 'votes') {
-      return (b.rating - a.rating) * modifier;
-    } else if (sortBy.value === 'comments') {
-      return (b.comment_count - a.comment_count) * modifier;
-    } else {
-      return (new Date(b.publication_date).getTime() - new Date(a.publication_date).getTime()) * modifier;
-    }
-  });
+        if (sortBy.value === 'votes') {
+            return (b.rating - a.rating) * modifier;
+        } else if (sortBy.value === 'comments') {
+            return (b.comment_count - a.comment_count) * modifier;
+        } else {
+            return (new Date(b.publication_date).getTime() - new Date(a.publication_date).getTime()) * modifier;
+        }
+    });
 });
 
 watch(posts, () => {
-  if (filteredPosts.value.length < 3 && !loading.value && !selectedPost.value) {
-    loadPosts();
-  }
+    if (filteredPosts.value.length < 3 && !loading.value && !selectedPost.value) {
+        loadPosts();
+    }
 }, { deep: true });
 
 watch([sortBy, sortDesc, filterType], () => {
-  posts.value = [];
-  page.value = 1;
-  hasMore.value = true;
-  loadPosts();
+    posts.value = [];
+    page.value = 1;
+    hasMore.value = true;
+    loadPosts();
 });
 
 onMounted(async () => {
-  checkQueryForModal();
+    checkQueryForModal();
 
-  await Promise.all([
-    loadPosts(),
-    fetchTags()
-  ]);
+    await Promise.all([
+        loadPosts(),
+        fetchTags()
+    ]);
 
-  const observer = new IntersectionObserver((entries) => {
-    if (entries[0].isIntersecting && !loading.value && !selectedPost.value) {
-      loadPosts();
+    const observer = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && !loading.value && !selectedPost.value) {
+            loadPosts();
+        }
+    }, {
+        rootMargin: '300px',
+        threshold: 0.1
+    });
+
+    if (loadMoreTrigger.value) {
+        observer.observe(loadMoreTrigger.value);
     }
-  }, {
-    rootMargin: '300px',
-    threshold: 0.1
-  });
-
-  if (loadMoreTrigger.value) {
-    observer.observe(loadMoreTrigger.value);
-  }
 });
 </script>
 
 <style scoped>
 @keyframes fadeInUp {
 
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .animate-fade-in-up {
-  animation: fadeInUp 0.5s ease-out forwards;
+    animation: fadeInUp 0.5s ease-out forwards;
 }
 
 .line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 8021a32..6eec2d4 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -140,6 +140,41 @@
                             </div>
 
                             <div class="flex flex-col gap-4">
+
+                                <div
+                                    class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
+                                    <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+                                        <div class="relative flex-1 sm:flex-none">
+                                            <input v-model="searchQuery" type="text" placeholder="Search posts..."
+                                                class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
+                                        </div>
+                                        <div class="flex items-center">
+                                            <select v-model="sortBy"
+                                                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
+                                                <option value="date">Date</option>
+                                                <option value="votes">Rating</option>
+                                                <option value="comments">Comments</option>
+                                            </select>
+                                            <button
+                                                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                                                :title="sortDesc ? 'Descending' : 'Ascending'"
+                                                @click="sortDesc = !sortDesc">
+                                                <span class="inline-block transition-transform duration-200"
+                                                    :class="{ 'rotate-180': !sortDesc }">
+                                                    ▼
+                                                </span>
+                                            </button>
+                                        </div>
+
+                                        <select v-model="filterType"
+                                            class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
+                                            <option value="ALL">All Types</option>
+                                            <option value="CONFERENCE_PAPER">Conference Paper</option>
+                                            <option value="RESEARCH_POST">Research Post</option>
+                                        </select>
+                                    </div>
+                                </div>
+
                                 <div v-if="userProfile.publications.length === 0"
                                     class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
 
@@ -177,25 +212,50 @@
                                     </div>
                                 </div>
 
-                                <div v-for="pub in userProfile.publications" :key="pub.id"
-                                    class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 group relative">
-                                    <div class="flex justify-between items-start gap-4 mb-2">
-                                        <h3 class="text-base font-bold text-slate-900 dark:text-slate-100">{{ pub.title
-                                        }}</h3>
-                                        <span
-                                            class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700">
-                                            {{ pub.publishedYear }}
-                                        </span>
-                                    </div>
-                                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed line-clamp-2">
-                                        {{ pub.abstract }}</p>
-                                    <div
-                                        class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium">
-                                        <span
-                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800/50">
-                                            {{ pub.field }}
-                                        </span>
-                                        <span>{{ pub.citations }} Citations</span>
+                                <div v-for="post in userProfile.publicationsData" :key="post.id"
+                                    class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
+                                    @click="fetchPostDetail(post.id)">
+                                    <div class="flex gap-4">
+                                        <div
+                                            class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
+
+                                            <button class="hover:text-blue-500 transition-colors text-lg"
+                                                :class="{ 'text-orange-500': post.my_vote === 'UP' }"
+                                                @click.stop="votePost(post, 1)">▲</button>
+
+                                            <span class="text-xs font-bold">{{ post.rating }}</span>
+
+                                            <button class="hover:text-red-500 transition-colors text-lg"
+                                                :class="{ 'text-blue-500': post.my_vote === 'DOWN' }"
+                                                @click.stop="votePost(post, -1)">▼</button>
+                                        </div>
+
+                                        <div class="flex-1">
+                                            <div class="flex items-center gap-2 mb-1">
+                                                <span
+                                                    class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
+                                                    {{ post.type.replace('_', ' ') }}
+                                                </span>
+                                                <span class="text-xs text-gray-500">{{ post.publication_date
+                                                    }}</span>
+                                            </div>
+                                            <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{
+                                                post.title }}
+                                            </h2>
+                                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By
+                                                {{
+                                                    post.authors.join(', ') }}
+                                            </p>
+                                            <div
+                                                class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
+                                                <span>💬 {{ post.comment_count }} Comments</span>
+                                                <div class="flex gap-2">
+                                                    <span v-for="tag in post.tags" :key="tag.id"
+                                                        class="text-blue-600 dark:text-blue-400">#{{ tag.name
+                                                        }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -282,6 +342,14 @@ const authStore = useAuthStore();
 const { token } = storeToRefs(authStore);
 const router = useRouter();
 
+// --- Reactive Variables ---
+const availableTags = ref<Tag[]>([]); // For tag select viewBox
+const searchQuery = ref('');
+const sortBy = ref('date'); // 'date' | 'votes' | 'comments'
+const sortDesc = ref(true);
+const filterType = ref('ALL'); // 'ALL' | 'CONFERENCE_PAPER' | 'RESEARCH_POST'
+const page = ref(1);
+
 // --- Interfaces ---
 
 interface Tag {
@@ -348,6 +416,20 @@ async function fetchTags() {
     }
 }
 
+const fetchPostDetail = async (id) => {
+    loading.value = true;
+    try {
+        const postDetail = await $fetch(`${api}/publications/${id}`, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        selectedPost.value = postDetail;
+    } catch (err) {
+        console.error("Failed to fetch post detail:", err);
+    } finally {
+        loading.value = false;
+    }
+};
+
 // --- Computed ---
 const totalCitations = computed(() =>
     userProfile.value.publications.reduce((sum, pub) => sum + (pub.citations || 0), 0)
@@ -390,11 +472,17 @@ async function fetchProfileData() {
             headers: { Authorization: `Bearer ${token.value}` }
         });
 
-        // Fetch Publications
-        // const publicationsData = await $fetch(`${api}/publications/my-submissions`, {
-        //    method: 'GET',
-        //    headers: { Authorization: `Bearer ${token.value}` }
-        // });
+        // Fetch User Publications 
+        const publicationsData = await $fetch(`${api}/publications/me`, {
+            method: 'GET',
+            headers: { Authorization: `Bearer ${token.value}` },
+            params: {
+                page: page.value,
+                sort: sortBy.value,
+                order: sortDesc.value ? 'desc' : 'asc',
+                type: filterType.value !== 'ALL' ? filterType.value : undefined
+            }
+        });
 
         // Map Data
         userProfile.value = {

From 0d93b212c6ee1c3ec19619e929c39041ea2c0ed3 Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Thu, 22 Jan 2026 16:27:28 +0000
Subject: [PATCH 08/18] feat: profile publications in page

---
 app/pages/profile/index.vue | 440 +++++++++++++++++++++++++++++++-----
 1 file changed, 380 insertions(+), 60 deletions(-)

diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 6eec2d4..2b46ab2 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -2,6 +2,269 @@
     <div
         class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
 
+        <Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0"
+            enter-to-class="opacity-100" leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100" leave-to-class="opacity-0">
+            <div v-if="selectedPost" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 overflow-y-auto"
+                @click.self="selectedPost = null">
+
+                <div class="min-h-screen px-4 py-8 flex items-start justify-center">
+                    <Transition enter-active-class="transition duration-200 ease-out"
+                        enter-from-class="opacity-0 scale-95 translate-y-4"
+                        enter-to-class="opacity-100 scale-100 translate-y-0"
+                        leave-active-class="transition duration-150 ease-in"
+                        leave-from-class="opacity-100 scale-100 translate-y-0"
+                        leave-to-class="opacity-0 scale-95 translate-y-4">
+
+                        <div v-if="selectedPost"
+                            class="w-full max-w-4xl bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border dark:border-gray-800"
+                            @click.stop>
+
+                            <!-- Close Button Header -->
+                            <div
+                                class="sticky top-0 z-10 flex justify-between items-center p-4 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm border-b dark:border-gray-800 rounded-t-2xl">
+                                <button
+                                    class="flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
+                                    @click="selectedPost = null">
+                                    ← BACK TO FEED
+                                </button>
+
+                                <button @click="selectedPost = null"
+                                    class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M6 18L18 6M6 6l12 12" />
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <!-- Post Content - Same as main page -->
+                            <article class="overflow-hidden">
+                                <div
+                                    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">
+                                        <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">
+                                            {{ selectedPost.type.replace('_', ' ') }}
+                                        </span>
+                                        <span
+                                            class="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
+                                            <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                            </svg>
+                                            {{ new Date(selectedPost.publicationDate ||
+                                                selectedPost.publication_date).toLocaleDateString('en-US', {
+                                                    year: 'numeric', month: 'long', day: 'numeric'
+                                                }) }}
+                                        </span>
+                                    </div>
+
+                                    <h1
+                                        class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
+                                        {{ selectedPost.title }}
+                                    </h1>
+
+                                    <div
+                                        class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
+                                        <div>
+                                            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
+                                                Authors</h4>
+                                            <div class="flex flex-wrap gap-2">
+                                                <span v-for="(author, idx) in selectedPost.authors" :key="idx"
+                                                    class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200">
+                                                    <span
+                                                        class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 flex items-center justify-center text-xs">
+                                                        {{ author.charAt(0) }}
+                                                    </span>
+                                                    {{ author }}
+                                                </span>
+                                            </div>
+                                        </div>
+
+                                        <div v-if="selectedPost.submitter">
+                                            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
+                                                Submitted By</h4>
+                                            <div class="flex items-center gap-3">
+                                                <div
+                                                    class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
+                                                    {{ selectedPost.submitter.name.charAt(0) }}
+                                                </div>
+                                                <div>
+                                                    <div class="text-sm font-bold text-gray-900 dark:text-white">{{
+                                                        selectedPost.submitter.name }}</div>
+                                                    <div class="text-xs text-gray-500">{{ selectedPost.submitter.role }}
+                                                        • {{ selectedPost.submitter.email }}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="p-8 max-h-[60vh] overflow-y-auto">
+                                    <div class="mb-10">
+                                        <h3
+                                            class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                                            <svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24"
+                                                stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M4 6h16M4 12h16M4 18h7" />
+                                            </svg>
+                                            Abstract
+                                        </h3>
+                                        <p
+                                            class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-justify whitespace-pre-line">
+                                            {{ selectedPost.abstractText || selectedPost.abstract }}
+                                        </p>
+                                    </div>
+
+                                    <div
+                                        class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-8 border-b dark:border-gray-800">
+                                        <div v-if="selectedPost.tags && selectedPost.tags.length > 0">
+                                            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
+                                                Tags</h4>
+                                            <div class="flex flex-wrap gap-2">
+                                                <span v-for="tag in selectedPost.tags" :key="tag.id"
+                                                    class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-medium border border-gray-200 dark:border-gray-700">
+                                                    #{{ tag.name }}
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div v-else class="text-sm text-gray-400 italic">No tags assigned</div>
+
+                                        <div class="flex items-center gap-4">
+                                            <div
+                                                class="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-1.5 shadow-sm">
+                                                <button @click.stop="votePost(selectedPost, 1)"
+                                                    class="p-2 rounded-lg transition-all active:scale-90"
+                                                    :class="selectedPost.my_vote === 'UP' ? 'text-orange-600 bg-orange-100 dark:bg-orange-900/30' : 'text-slate-400 hover:text-orange-500 hover:bg-white dark:hover:bg-slate-700'"
+                                                    title="Upvote">
+                                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                                                        stroke="currentColor" stroke-width="2.5">
+                                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                                            d="M5 15l7-7 7 7" />
+                                                    </svg>
+                                                </button>
+                                                <div class="min-w-[40px] text-center">
+                                                    <span class="text-2xl font-black tracking-tight" :class="{
+                                                        'text-orange-600': selectedPost.my_vote === 'UP',
+                                                        'text-blue-600': selectedPost.my_vote === 'DOWN',
+                                                        'text-slate-900 dark:text-white': !selectedPost.my_vote || selectedPost.my_vote === 'NONE'
+                                                    }">
+                                                        {{ selectedPost.rating }}
+                                                    </span>
+                                                </div>
+                                                <button @click.stop="votePost(selectedPost, -1)"
+                                                    class="p-2 rounded-lg transition-all active:scale-90"
+                                                    :class="selectedPost.my_vote === 'DOWN' ? 'text-blue-600 bg-blue-100 dark:bg-blue-900/30' : 'text-slate-400 hover:text-blue-500 hover:bg-white dark:hover:bg-slate-700'"
+                                                    title="Downvote">
+                                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                                                        stroke="currentColor" stroke-width="2.5">
+                                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                                            d="M19 9l-7 7-7-7" />
+                                                    </svg>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div v-if="selectedPost.attachedFile || selectedPost.attached_file"
+                                        class="mb-10 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:border-blue-400 transition-colors group">
+                                        <div class="flex items-center justify-between">
+                                            <div class="flex items-center gap-4">
+                                                <div
+                                                    class="p-3 bg-red-100 text-red-600 rounded-lg group-hover:scale-110 transition-transform">
+                                                    <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24"
+                                                        stroke="currentColor">
+                                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                                            stroke-width="2"
+                                                            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                                                    </svg>
+                                                </div>
+                                                <div>
+                                                    <div class="font-bold text-gray-900 dark:text-white mb-0.5">
+                                                        Attachment Available</div>
+                                                    <div
+                                                        class="text-xs text-gray-500 font-mono truncate max-w-[200px] md:max-w-md">
+                                                        {{ getFileName(selectedPost.attachedFile ||
+                                                            selectedPost.attached_file) }}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <button @click.stop="downloadFile(selectedPost)"
+                                                class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all">
+                                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
+                                                    stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                                        stroke-width="2"
+                                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                                                </svg>
+                                                Download
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    <hr class="border-gray-100 dark:border-gray-800 mb-8">
+
+                                    <section>
+                                        <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
+                                            Comments
+                                            <span
+                                                class="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs px-2 py-1 rounded-full">
+                                                {{ selectedPost.comments?.length || 0 }}
+                                            </span>
+                                        </h3>
+                                        <div class="space-y-3">
+                                            <textarea v-model="newCommentContent" rows="3"
+                                                class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
+                                                placeholder="What are your thoughts?" />
+                                            <div class="flex justify-end">
+                                                <button :disabled="!newCommentContent.trim()"
+                                                    class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
+                                                    @click="submitComment">
+                                                    COMMENT
+                                                </button>
+                                            </div>
+                                        </div>
+
+                                        <div class="mt-8 space-y-6">
+                                            <div v-if="!selectedPost.comments || selectedPost.comments.length === 0"
+                                                class="text-center py-8 text-gray-400 italic">
+                                                Be the first to comment!
+                                            </div>
+
+                                            <div v-for="comment in selectedPost.comments" :key="comment.id"
+                                                class="flex gap-4">
+                                                <div
+                                                    class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 flex-shrink-0" />
+                                                <div class="flex-1">
+                                                    <div
+                                                        class="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-xl rounded-tl-none border border-gray-100 dark:border-gray-800">
+                                                        <div class="flex items-center justify-between mb-2">
+                                                            <span
+                                                                class="font-bold text-sm text-blue-600 dark:text-blue-400">{{
+                                                                    comment.author.name }}</span>
+                                                            <span class="text-[10px] text-gray-400 uppercase">{{ new
+                                                                Date(comment.created_at).toLocaleDateString() }}</span>
+                                                        </div>
+                                                        <p
+                                                            class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
+                                                            {{ comment.content }}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </section>
+                                </div>
+                            </article>
+                        </div>
+                    </Transition>
+                </div>
+            </div>
+        </Transition>
+
         <div class="container mx-auto max-w-7xl px-4 py-8 md:py-12">
             <div class="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12">
 
@@ -119,11 +382,13 @@
                         leave-from-class="transform opacity-100 translate-y-0"
                         leave-to-class="transform opacity-0 translate-y-2">
                         <div v-if="activeTab === 'overview'" key="overview" class="space-y-6">
+
                             <div
                                 class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
                                 <h2
                                     class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
-                                    Biography</h2>
+                                    Biography
+                                </h2>
                                 <p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
                                     {{ userProfile.biography }}
                                 </p>
@@ -134,13 +399,12 @@
                                     Recent Publications
                                     <span
                                         class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">
-                                        {{ userProfile.publications.length }}
+                                        {{ userProfile.publications.length }} Papers
                                     </span>
                                 </h2>
                             </div>
 
                             <div class="flex flex-col gap-4">
-
                                 <div
                                     class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
                                     <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
@@ -175,90 +439,60 @@
                                     </div>
                                 </div>
 
-                                <div v-if="userProfile.publications.length === 0"
-                                    class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
-
+                                <div v-if="userProfile.publications.length === 0" class="...">
                                     <div
-                                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
-
-                                    <div class="relative z-10 flex flex-col items-center">
-                                        <div
-                                            class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
-                                            <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                            </svg>
+                                        class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
+                                        <div class="relative z-10 flex flex-col items-center">
+                                            <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">No
+                                                publications yet</h3>
+                                            <button @click="goToCreatePost()"
+                                                class="mt-4 inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg transition-all cursor-pointer">
+                                                Submit your first paper
+                                            </button>
                                         </div>
-
-                                        <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
-                                            No publications yet
-                                        </h3>
-                                        <p
-                                            class="text-slate-500 dark:text-slate-400 text-sm max-w-xs mx-auto mb-6 leading-relaxed">
-                                            Your profile is looking a little empty. Share your research with the
-                                            community to start building your portfolio.
-                                        </p>
-
-                                        <button
-                                            class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
-                                            @click="goToCreatePost()">
-                                            <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 4v16m8-8H4" />
-                                            </svg>
-                                            Submit your first paper
-                                        </button>
                                     </div>
                                 </div>
 
-                                <div v-for="post in userProfile.publicationsData" :key="post.id"
+                                <div v-for="post in userProfile.publications" :key="post.id"
                                     class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
                                     @click="fetchPostDetail(post.id)">
+
                                     <div class="flex gap-4">
                                         <div
                                             class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
-
                                             <button class="hover:text-blue-500 transition-colors text-lg"
                                                 :class="{ 'text-orange-500': post.my_vote === 'UP' }"
                                                 @click.stop="votePost(post, 1)">▲</button>
-
                                             <span class="text-xs font-bold">{{ post.rating }}</span>
-
                                             <button class="hover:text-red-500 transition-colors text-lg"
                                                 :class="{ 'text-blue-500': post.my_vote === 'DOWN' }"
                                                 @click.stop="votePost(post, -1)">▼</button>
                                         </div>
-
                                         <div class="flex-1">
                                             <div class="flex items-center gap-2 mb-1">
                                                 <span
                                                     class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
                                                     {{ post.type.replace('_', ' ') }}
                                                 </span>
-                                                <span class="text-xs text-gray-500">{{ post.publication_date
-                                                    }}</span>
+                                                <span class="text-xs text-gray-500">{{ post.publishedDate }}</span>
                                             </div>
                                             <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{
-                                                post.title }}
-                                            </h2>
-                                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By
-                                                {{
-                                                    post.authors.join(', ') }}
-                                            </p>
+                                                post.title }}</h2>
+                                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By {{
+                                                post.authors.join(', ') }}</p>
                                             <div
                                                 class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
                                                 <span>💬 {{ post.comment_count }} Comments</span>
                                                 <div class="flex gap-2">
                                                     <span v-for="tag in post.tags" :key="tag.id"
-                                                        class="text-blue-600 dark:text-blue-400">#{{ tag.name
-                                                        }}</span>
+                                                        class="text-blue-600 dark:text-blue-400">#{{ tag.name }}</span>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
+
                         </div>
 
                         <div v-else-if="activeTab === 'activity'" key="activity" class="space-y-4">
@@ -322,7 +556,6 @@
                             </p>
                         </div>
                     </Transition>
-
                 </div>
             </div>
         </div>
@@ -351,6 +584,8 @@ const filterType = ref('ALL'); // 'ALL' | 'CONFERENCE_PAPER' | 'RESEARCH_POST'
 const page = ref(1);
 
 // --- Interfaces ---
+const selectedPost = ref(null);
+const newCommentContent = ref('');
 
 interface Tag {
     id: number;
@@ -401,6 +636,28 @@ const userProfile = ref({
 });
 
 // --- API Actions ---
+const getFileName = (fullPath: string) => {
+    if (!fullPath) return null;
+    return fullPath.split(/[/\\]/).pop();
+};
+
+const downloadFile = async (post: any) => {
+    if (!post.attachedFile) return;
+    const filename = getFileName(post.attachedFile);
+    const downloadUrl = `${api}/publications/download/${filename}`; // Verifica se este endpoint existe no teu backend
+
+    try {
+        // Método simples para download (se o endpoint for público ou lidar com cookies)
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.setAttribute('download', filename || 'download');
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    } catch (e) {
+        console.error("Download error:", e);
+    }
+};
 
 // Fetch Tags (EP23) - To populate the select box
 async function fetchTags() {
@@ -416,13 +673,17 @@ async function fetchTags() {
     }
 }
 
-const fetchPostDetail = async (id) => {
+const fetchPostDetail = async (id: number) => {
     loading.value = true;
     try {
         const postDetail = await $fetch(`${api}/publications/${id}`, {
             headers: { Authorization: `Bearer ${token.value}` }
         });
+
         selectedPost.value = postDetail;
+
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+
     } catch (err) {
         console.error("Failed to fetch post detail:", err);
     } finally {
@@ -466,13 +727,10 @@ async function fetchProfileData() {
     loading.value = true;
 
     try {
-        // Fetch User Details
         const userData = await $fetch(`${api}/users/me`, {
             method: 'GET',
             headers: { Authorization: `Bearer ${token.value}` }
         });
-
-        // Fetch User Publications 
         const publicationsData = await $fetch(`${api}/publications/me`, {
             method: 'GET',
             headers: { Authorization: `Bearer ${token.value}` },
@@ -484,7 +742,6 @@ async function fetchProfileData() {
             }
         });
 
-        // Map Data
         userProfile.value = {
             ...userProfile.value,
             id: userData.id,
@@ -497,14 +754,18 @@ async function fetchProfileData() {
 
         userProfile.value.publications = (publicationsData as any[]).map(pub => {
             const pubDate = new Date(pub.publication_date);
+
             return {
-                id: pub.id,
-                title: pub.title,
-                abstract: pub.abstract || 'No abstract available.',
+                ...pub, // Manter todos os campos originais da API
+
                 publishedDate: pubDate.toLocaleDateString(),
                 publishedYear: pubDate.getFullYear().toString(),
                 citations: pub.rating || 0,
-                field: pub.tags && pub.tags.length > 0 ? pub.tags[0].name : 'General'
+
+                authors: pub.authors || [],
+                tags: pub.tags || [],
+                comment_count: pub.comment_count || 0,
+                rating: pub.rating || 0
             };
         });
 
@@ -515,6 +776,39 @@ async function fetchProfileData() {
     }
 }
 
+const votePost = async (targetPost, direction) => {
+    if (!targetPost) return;
+
+    let voteTypeToSend = 'NONE';
+    const currentVote = targetPost.my_vote || 'NONE';
+
+    if (direction === 1) {
+        voteTypeToSend = currentVote === 'UP' ? 'NONE' : 'UP';
+    } else if (direction === -1) {
+        voteTypeToSend = currentVote === 'DOWN' ? 'NONE' : 'DOWN';
+    }
+
+    try {
+        const response = await $fetch(`${api}/publications/${targetPost.id}/vote`, {
+            method: 'PUT',
+            headers: { Authorization: `Bearer ${token.value}` },
+            body: { vote_type: voteTypeToSend }
+        });
+
+        targetPost.rating = response.score;
+        targetPost.my_vote = response.my_vote;
+
+        if (selectedPost.value && selectedPost.value.id === targetPost.id) {
+            selectedPost.value.rating = response.score;
+            selectedPost.value.my_vote = response.my_vote;
+        }
+
+    } catch (error) {
+        console.error("Vote failed", error);
+        alert("Failed to submit vote.");
+    }
+};
+
 // --- Redirects ---
 const goToCreatePost = () => {
     console.log("Navigating to create post modal...");
@@ -530,3 +824,29 @@ onMounted(() => {
     fetchActivityHistory(); // Fetch history on mount
 });
 </script>
+
+<style scoped>
+@keyframes fadeInUp {
+
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-in-up {
+    animation: fadeInUp 0.5s ease-out forwards;
+}
+
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+</style>

From dacec7133882bd4f5987ceab255adf55b479bdeb Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Thu, 22 Jan 2026 18:51:14 +0000
Subject: [PATCH 09/18] feat: profile publications in page

---
 app/pages/profile/index.vue | 85 +++++++++++++++++++++++++++++++------
 1 file changed, 73 insertions(+), 12 deletions(-)

diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 2b46ab2..37682bc 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -382,18 +382,6 @@
                         leave-from-class="transform opacity-100 translate-y-0"
                         leave-to-class="transform opacity-0 translate-y-2">
                         <div v-if="activeTab === 'overview'" key="overview" class="space-y-6">
-
-                            <div
-                                class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
-                                <h2
-                                    class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
-                                    Biography
-                                </h2>
-                                <p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
-                                    {{ userProfile.biography }}
-                                </p>
-                            </div>
-
                             <div class="flex items-center justify-between pt-2 px-1">
                                 <h2 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
                                     Recent Publications
@@ -457,6 +445,8 @@
                                     class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
                                     @click="fetchPostDetail(post.id)">
 
+
+
                                     <div class="flex gap-4">
                                         <div
                                             class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
@@ -489,10 +479,58 @@
                                                 </div>
                                             </div>
                                         </div>
+                                        <div
+                                            class="flex items-center justify-end gap-2 group-hover/row:opacity-100 transition-opacity duration-200">
+                                            <button
+                                                class="p-2.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
+                                                title="Edit" @click.stop="openEditModal(user)">
+                                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                                </svg>
+                                            </button>
+                                            <button
+                                                class="p-2.5 text-slate-400 hover:text-amber-600 hover:bg-white-50 dark:hover:bg-white-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
+                                                title="Hide" @click.stop="confirmHide(post)">
+                                                <svg width="16px" height="16px" viewBox="0 0 16 16"
+                                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                                                    class="bi bi-eye">
+                                                    <path
+                                                        d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
+                                                    <path
+                                                        d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
+                                                </svg>
+                                            </button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
 
+                            <td class="p-6 pr-8 text-right">
+                                <div
+                                    class="flex items-center justify-end gap-2 opacity-0 group-hover/row:opacity-100 transition-opacity duration-200">
+                                    <button
+                                        class="p-2.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
+                                        title="Edit" @click.stop="openEditModal(user)">
+                                        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                        </svg>
+                                    </button>
+                                    <button
+                                        class="p-2.5 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
+                                        title="Delete" @click.stop="confirmHide(user)">
+                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                                        </svg>
+                                    </button>
+                                </div>
+                            </td>
+
+
                         </div>
 
                         <div v-else-if="activeTab === 'activity'" key="activity" class="space-y-4">
@@ -809,6 +847,29 @@ const votePost = async (targetPost, direction) => {
     }
 };
 
+const confirmHide = async (post) => {
+    if (!post) return;
+
+    const confirmed = confirm(`Are you sure you want to hide the post titled "${post.title}"?`);
+
+    if (!confirmed) return;
+
+    try {
+        await $fetch(`${api}/publications/${post.id}`, {
+            method: 'DELETE',
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+
+        userProfile.value.publications = userProfile.value.publications.filter(p => p.id !== post.id);
+
+        alert("Post deleted successfully.");
+
+    } catch (error) {
+        console.error("Delete failed", error);
+        alert("Failed to delete the post.");
+    }
+};
+
 // --- Redirects ---
 const goToCreatePost = () => {
     console.log("Navigating to create post modal...");

From 1644d9f80c440de49581fbc07ff6f17bf993986f Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Thu, 22 Jan 2026 21:04:46 +0000
Subject: [PATCH 10/18] feat: fixed admin page, settings on user

---
 app/pages/admin/users/index.vue |  23 +----
 app/pages/profile/index.vue     | 146 ++++++++++++++++++++++++++++----
 2 files changed, 129 insertions(+), 40 deletions(-)

diff --git a/app/pages/admin/users/index.vue b/app/pages/admin/users/index.vue
index a6f0777..5d99e42 100644
--- a/app/pages/admin/users/index.vue
+++ b/app/pages/admin/users/index.vue
@@ -499,28 +499,7 @@ const authStore = useAuthStore();
 const { token } = storeToRefs(authStore);
 
 // State
-const users = ref<any[]>([
-    { id: 1, name: 'Dr. Sarah Mitchell', email: 'sarah.mitchell@university.edu', role: 'ADMIN', is_active: true },
-    { id: 2, name: 'Prof. James Anderson', email: 'james.anderson@university.edu', role: 'TEACHER', is_active: true },
-    { id: 3, name: 'Dr. Emily Chen', email: 'emily.chen@university.edu', role: 'RESEARCHER', is_active: true },
-    { id: 4, name: 'Michael Roberts', email: 'michael.roberts@university.edu', role: 'STUDENT', is_active: true },
-    { id: 5, name: 'Dr. David Kim', email: 'david.kim@university.edu', role: 'COLLABORATOR', is_active: true },
-    { id: 6, name: 'Prof. Maria Garcia', email: 'maria.garcia@university.edu', role: 'TEACHER', is_active: true },
-    { id: 7, name: 'Jessica Thompson', email: 'jessica.thompson@university.edu', role: 'STUDENT', is_active: true },
-    { id: 8, name: 'Dr. Robert Wilson', email: 'robert.wilson@university.edu', role: 'RESEARCHER', is_active: true },
-    { id: 9, name: 'Amanda Foster', email: 'amanda.foster@university.edu', role: 'STUDENT', is_active: false },
-    { id: 10, name: 'Prof. Thomas Lee', email: 'thomas.lee@university.edu', role: 'ADMIN', is_active: true },
-    { id: 11, name: 'Dr. Lisa Martinez', email: 'lisa.martinez@university.edu', role: 'RESEARCHER', is_active: true },
-    { id: 12, name: 'Daniel Brown', email: 'daniel.brown@university.edu', role: 'STUDENT', is_active: true },
-    { id: 13, name: 'Prof. Jennifer Davis', email: 'jennifer.davis@university.edu', role: 'TEACHER', is_active: true },
-    { id: 14, name: 'Christopher Taylor', email: 'christopher.taylor@university.edu', role: 'STUDENT', is_active: false },
-    { id: 15, name: 'Dr. Patricia Johnson', email: 'patricia.johnson@university.edu', role: 'COLLABORATOR', is_active: true },
-    { id: 16, name: 'Matthew White', email: 'matthew.white@university.edu', role: 'STUDENT', is_active: true },
-    { id: 17, name: 'Prof. Elizabeth Moore', email: 'elizabeth.moore@university.edu', role: 'TEACHER', is_active: true },
-    { id: 18, name: 'Dr. William Harris', email: 'william.harris@university.edu', role: 'RESEARCHER', is_active: true },
-    { id: 19, name: 'Sophie Anderson', email: 'sophie.anderson@university.edu', role: 'STUDENT', is_active: true },
-    { id: 20, name: 'Dr. Richard Clark', email: 'richard.clark@university.edu', role: 'ADMIN', is_active: true }
-]);
+const users = ref<any[]>([]);
 const loading = ref(false);
 const showModal = ref(false);
 const showDetailsModal = ref(false);
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 37682bc..ee7674c 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -427,17 +427,35 @@
                                     </div>
                                 </div>
 
-                                <div v-if="userProfile.publications.length === 0" class="...">
+                                <div v-if="userProfile.publications.length === 0 && !loading"
+                                    class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
+
                                     <div
-                                        class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
-                                        <div class="relative z-10 flex flex-col items-center">
-                                            <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">No
-                                                publications yet</h3>
-                                            <button @click="goToCreatePost()"
-                                                class="mt-4 inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg transition-all cursor-pointer">
-                                                Submit your first paper
-                                            </button>
+                                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+
+                                    <div class="relative z-10 flex flex-col items-center">
+                                        <div
+                                            class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
+                                            <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none"
+                                                viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                            </svg>
                                         </div>
+
+                                        <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
+                                            No publications yet
+                                        </h3>
+
+                                        <button
+                                            class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
+                                            @click="isModalOpen = 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 4v16m8-8H4" />
+                                            </svg>
+                                            Submit your first post
+                                        </button>
                                     </div>
                                 </div>
 
@@ -585,13 +603,67 @@
                         </div>
 
                         <div v-else-if="activeTab === 'settings'" key="settings"
-                            class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
-                            <h2
-                                class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
-                                Settings</h2>
-                            <p class="text-sm text-slate-600 dark:text-slate-400">
-                                Nothing here but chickens! Settings coming soon.
-                            </p>
+                            class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
+                            <!-- Header -->
+                            <div class="px-6 py-5 border-b border-slate-200 dark:border-slate-800">
+                                <h2 class="text-lg font-semibold text-slate-900 dark:text-white">
+                                    Edit Profile
+                                </h2>
+                                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
+                                    Update your personal information and account details.
+                                </p>
+                            </div>
+
+                            <div class="p-6 space-y-6">
+                                <div>
+                                    <label for="name"
+                                        class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+                                        Name
+                                    </label>
+                                    <input id="name" type="text" v-model="newUsername"
+                                        placeholder="Your first name and last name" class="w-full px-4 py-2.5 bg-white dark:bg-slate-800
+               border border-slate-300 dark:border-slate-700
+               rounded-xl text-slate-900 dark:text-white
+               placeholder-slate-400
+               focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+               outline-none transition-all" />
+                                </div>
+
+                                <div>
+                                    <label for="email"
+                                        class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+                                        Email address
+                                    </label>
+                                    <input id="email" type="email" v-model="newEmail" placeholder="you@example.com"
+                                        class="w-full px-4 py-2.5 bg-white dark:bg-slate-800
+               border border-slate-300 dark:border-slate-700
+               rounded-xl text-slate-900 dark:text-white
+               placeholder-slate-400
+               focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+               outline-none transition-all" />
+                                    <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                                        Dont worry, Your email is going to be sold to russian hackers.
+                                    </p>
+                                </div>
+
+                                <a @click="openResetPassword" class="text-sm text-red dark:text-red-600 hover:underline">
+                                    Reset Password 
+                                </a>
+                            </div>
+
+                            <!-- Footer / Actions -->
+                            <div class="px-6 py-4 bg-slate-50 dark:bg-slate-800/50
+           border-t border-slate-200 dark:border-slate-800
+           flex justify-end">
+                                <button @click="updateProfile" class="inline-flex items-center gap-2
+             bg-blue-600 hover:bg-blue-700
+             text-white font-semibold
+             px-6 py-2.5 rounded-xl
+             shadow-sm transition-all
+             active:scale-95">
+                                    Save changes
+                                </button>
+                            </div>
                         </div>
                     </Transition>
                 </div>
@@ -625,6 +697,9 @@ const page = ref(1);
 const selectedPost = ref(null);
 const newCommentContent = ref('');
 
+const newUsername = ref('');
+const newEmail = ref('');
+
 interface Tag {
     id: number;
     name: string;
@@ -668,8 +743,6 @@ const userProfile = ref({
     role: '',
     is_active: false,
     avatarUrl: '',
-    biography: 'No biography provided.',
-    joinDate: new Date().toISOString(),
     publications: [] as any[]
 });
 
@@ -870,6 +943,39 @@ const confirmHide = async (post) => {
     }
 };
 
+const updateProfile = async () => {
+    if (!token.value) {
+        return;
+    }
+
+    try {
+        const name = newUsername.value.trim();
+        const email = newEmail.value.trim();
+
+        if (name.length === 0 || email.length === 0) {
+            alert("Name and email cannot be empty.");
+            return;
+        }
+
+        await $fetch(`${api}/users/me`, {
+            method: 'PATCH',
+            headers: { Authorization: `Bearer ${token.value}` },
+            body: {
+                name: name,
+                email: email
+            }
+        });
+        alert("Profile updated successfully. Please log in again.");
+        authStore.logout();
+
+    } catch (error) {
+        console.error("Profile update failed", error);
+        alert("Failed to update profile.");
+    }
+
+    fetchProfileData();
+};
+
 // --- Redirects ---
 const goToCreatePost = () => {
     console.log("Navigating to create post modal...");
@@ -879,6 +985,10 @@ const goToCreatePost = () => {
     });
 };
 
+const openResetPassword = () => {
+    router.push({ path: '/profile/update-password' });
+};
+
 // --- Lifecycle ---
 onMounted(() => {
     fetchProfileData();

From b9ad7879a6be658344ed245be5cf7558a16efbe7 Mon Sep 17 00:00:00 2001
From: Edd <edd.ddev@gmail.com>
Date: Fri, 23 Jan 2026 03:01:13 +0000
Subject: [PATCH 11/18] final fe part 1

---
 app/components/ui/modal/CreatePostModal.vue |   79 +-
 app/pages/admin/users/index.vue             |   41 +-
 app/pages/index.vue                         | 1309 ++++++++++---------
 app/pages/profile/index.vue                 |  372 ++----
 public/f.png                                |  Bin 0 -> 17306 bytes
 5 files changed, 909 insertions(+), 892 deletions(-)
 create mode 100644 public/f.png

diff --git a/app/components/ui/modal/CreatePostModal.vue b/app/components/ui/modal/CreatePostModal.vue
index 572e4d0..aa73f73 100644
--- a/app/components/ui/modal/CreatePostModal.vue
+++ b/app/components/ui/modal/CreatePostModal.vue
@@ -5,12 +5,14 @@ const props = defineProps<{
     isOpen: boolean;
     api: string;
     token: string | null;
+    postToEdit?: any;
 }>();
 
 const emit = defineEmits(['close', 'refresh']);
 
 interface Tag { id: number; name: string; }
 
+const notifications = useNotificationStore();
 const isSubmitting = ref(false);
 const availableTags = ref<Tag[]>([]);
 const errors = reactive({
@@ -73,26 +75,41 @@ async function submitPublication() {
             authors: uploadForm.authors,
             type: uploadForm.type,
             abstract: uploadForm.abstract,
-            tags: uploadForm.selectedTagIds,
-            // Sending fixed defaults for removed fields to maintain API compatibility if needed
-            publication_date: new Date().toISOString().split('T')[0],
-            is_confidential: false
+            tags: uploadForm.selectedTagIds
         };
 
-        const formData = new FormData();
-        if (uploadForm.file) formData.append('file', uploadForm.file);
-        formData.append('data', JSON.stringify(metadata));
+        const isEditing = !!props.postToEdit;
+        const url = isEditing
+            ? `${props.api}/publications/${props.postToEdit.id}`
+            : `${props.api}/publications`;
 
-        await $fetch(`${props.api}/publications`, {
-            method: 'POST',
-            headers: { Authorization: `Bearer ${props.token}` },
-            body: formData
+        let requestBody: any;
+        let headers: Record<string, string> = {
+            Authorization: `Bearer ${props.token}`
+        };
+
+        if (!isEditing || uploadForm.file) {
+            const formData = new FormData();
+            if (uploadForm.file) formData.append('file', uploadForm.file);
+            formData.append('data', JSON.stringify(metadata));
+            requestBody = formData;
+        }
+        else {
+            requestBody = metadata;
+        }
+
+        await $fetch(url, {
+            method: isEditing ? 'PATCH' : 'POST',
+            headers,
+            body: requestBody
         });
 
+        notifications.success(`Publication ${isEditing ? "updated" : "created"}`);
         emit('refresh');
         closeModal();
     } catch (error) {
-        alert("Upload failed.");
+        console.error("Submission error:", error);
+        notifications.error("Operation failed");
     } finally {
         isSubmitting.value = false;
     }
@@ -113,19 +130,34 @@ function handleFileChange(event: Event) {
 }
 
 function closeModal() {
+    uploadForm.title = '';
+    uploadForm.abstract = '';
+    uploadForm.type = 'CONFERENCE_PAPER';
+    uploadForm.newAuthorName = '';
+    uploadForm.authors = [];
+    uploadForm.selectedTagIds = [];
+    uploadForm.file = null;
     emit('close');
 }
 
 watch(() => props.isOpen, (newVal) => {
     if (newVal && availableTags.value.length === 0) fetchTags();
     if (!newVal) {
-        // Reset errors on close
         errors.title = '';
         errors.abstract = '';
     }
 });
 
-// Helper for colorful tags
+watch(() => props.postToEdit, (newPost) => {
+    if (newPost) {
+        uploadForm.title = newPost.title;
+        uploadForm.abstract = newPost.abstractText || newPost.abstract;
+        uploadForm.type = newPost.type;
+        uploadForm.authors = [...newPost?.authors];
+        uploadForm.selectedTagIds = newPost?.tags.map((t: any) => t.id);
+    }
+}, { immediate: true });
+
 const getTagClass = (id: number) => {
     const colors = [
         'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-300',
@@ -204,9 +236,6 @@ const getTagClass = (id: number) => {
                                 <select v-model="uploadForm.type"
                                     class="w-full rounded-lg border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2.5 px-3 border">
                                     <option value="CONFERENCE_PAPER">Conference Paper</option>
-                                    <option value="ARTICLE">Article</option>
-                                    <option value="THESIS">Thesis</option>
-                                    <option value="REPORT">Report</option>
                                 </select>
                             </div>
                         </div>
@@ -224,7 +253,7 @@ const getTagClass = (id: number) => {
 
                         <div class="flex flex-col md:flex-row gap-8">
 
-                            <div class="flex-1">
+                            <div class="w-full">
                                 <label
                                     class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Authors</label>
                                 <div class="relative flex items-center">
@@ -241,7 +270,7 @@ const getTagClass = (id: number) => {
                                         </svg>
                                     </button>
                                 </div>
-                                <div class="flex flex-wrap gap-2 mt-3">
+                                <div :class="['flex flex-wrap gap-2', uploadForm.authors.length != 0 ? 'mt-3' : '']">
                                     <span v-for="(author, index) in uploadForm.authors" :key="index"
                                         class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-medium border border-slate-200 dark:border-slate-700">
                                         {{ author }}
@@ -255,7 +284,7 @@ const getTagClass = (id: number) => {
                                 </div>
                             </div>
 
-                            <div class="w-full md:w-auto min-w-[200px]">
+                            <div class="flex-1 md:w-auto min-w-[300px]">
                                 <label
                                     class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Tags</label>
                                 <div
@@ -269,10 +298,10 @@ const getTagClass = (id: number) => {
                                         if (idx > -1) uploadForm.selectedTagIds.splice(idx, 1);
                                         else uploadForm.selectedTagIds.push(tag.id);
                                     }" :class="[
-                                            uploadForm.selectedTagIds.includes(tag.id)
-                                                ? getTagClass(tag.id) + ' border-transparent'
-                                                : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400'
-                                        ]"
+                                        uploadForm.selectedTagIds.includes(tag.id)
+                                            ? getTagClass(tag.id) + ' border-transparent'
+                                            : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400'
+                                    ]"
                                         class="px-3 py-1.5 rounded-full border text-xs font-bold uppercase tracking-tight transition-all shadow-sm whitespace-nowrap">
                                         {{ tag.name }}
                                     </button>
@@ -286,7 +315,7 @@ const getTagClass = (id: number) => {
                         <button :disabled="isSubmitting"
                             class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-bold text-white shadow-sm hover:bg-blue-500 disabled:opacity-50 sm:w-auto transition-all"
                             @click="submitPublication">
-                            {{ isSubmitting ? 'Uploading...' : 'Submit Publication' }}
+                            {{ isSubmitting ? 'Uploading...' : 'Submit' }}
                         </button>
                         <button
                             class="inline-flex w-full justify-center rounded-lg bg-white dark:bg-slate-800 px-6 py-2.5 text-sm font-bold text-slate-700 dark:text-slate-300 shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 sm:w-auto transition-all"
diff --git a/app/pages/admin/users/index.vue b/app/pages/admin/users/index.vue
index 5d99e42..52f568d 100644
--- a/app/pages/admin/users/index.vue
+++ b/app/pages/admin/users/index.vue
@@ -488,7 +488,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useAuthStore } from "~/stores/auth-store.js";
 import { storeToRefs } from "pinia";
@@ -497,19 +497,18 @@ const config = useRuntimeConfig();
 const api = config.public.apiBase;
 const authStore = useAuthStore();
 const { token } = storeToRefs(authStore);
+const notifications = useNotifications();
 
-// State
-const users = ref<any[]>([]);
+const users = ref([]);
 const loading = ref(false);
 const showModal = ref(false);
 const showDetailsModal = ref(false);
 const isEditing = ref(false);
 const searchQuery = ref('');
-const selectedUser = ref<any>(null);
-const userHistory = ref<any[]>([]);
+const selectedUser = ref(null);
+const userHistory = ref([]);
 
-// Mock history data generator
-const generateMockHistory = (userId: number) => {
+const generateMockHistory = () => {
     const actions = ['UPLOADED_PUBLICATION', 'ADDED_COMMENT', 'CORRECTED_PUBLICATION', 'RATED_PUBLICATION', 'TAGGED_PUBLICATION'];
     const targetTypes = ['Publication', 'Comment', 'Review'];
     const details = [
@@ -554,7 +553,6 @@ const generateMockHistory = (userId: number) => {
     return history.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
 };
 
-// Form Data
 const formData = reactive({
     id: 0,
     name: '',
@@ -564,7 +562,6 @@ const formData = reactive({
     is_active: true
 });
 
-// Computed Stats & Filtering
 const filteredUsers = computed(() => {
     if (!searchQuery.value) return users.value;
     const query = searchQuery.value.toLowerCase();
@@ -577,11 +574,10 @@ const filteredUsers = computed(() => {
 const activeCount = computed(() => users.value.filter(u => u.is_active).length);
 const adminCount = computed(() => users.value.filter(u => u.role === 'ADMIN').length);
 
-// --- API ACTIONS ---
 const fetchUsers = async () => {
     loading.value = true;
     try {
-        const data = await $fetch<any[]>(`${api}/admin/users`, {
+        const data = await $fetch(`${api}/admin/users`, {
             method: 'GET',
             headers: { Authorization: `Bearer ${token.value}` }
         });
@@ -605,10 +601,11 @@ const createUser = async () => {
                 role: formData.role
             }
         });
+        notifications.success("User created successfully");
         closeModal();
         fetchUsers();
     } catch (error) {
-        alert("Failed to create user.");
+        notifications.error("Failed to create user");
     }
 };
 
@@ -622,10 +619,11 @@ const updateUser = async () => {
                 is_active: formData.is_active
             }
         });
+        notifications.success("User updated successfully");
         closeModal();
         fetchUsers();
     } catch (error) {
-        alert("Failed to update user.");
+        notifications.error("Failed to update user");
     }
 };
 
@@ -635,33 +633,32 @@ const sendPasswordRecovery = async () => {
     try {
         await $fetch(`${api}/auth/recover-password`, {
             method: 'POST',
-            // headers: { Authorization: ... } // EP02 is usually public, but check your API requirements
             body: {
                 email: formData.email
             }
         });
-        alert(`Recovery sent to ${formData.email}`);
+        notifications.success(`Recovery sent to ${formData.email}`);
     } catch (error) {
-        alert("Failed to send recovery.");
         console.error(error);
+        notifications.error("Failed to send recovery");
     }
 };
 
-const confirmDelete = async (user: any) => {
+const confirmDelete = async (user) => {
     if (!confirm(`Are you sure you want to delete ${user.name}?`)) return;
     try {
         await $fetch(`${api}/admin/users/${user.id}`, {
             method: 'DELETE',
             headers: { Authorization: `Bearer ${token.value}` }
         });
+        notifications.success("Deleted user");
         fetchUsers();
     } catch (error) {
-        alert("Error deleting user.");
+        notifications.error("Failed to delete user");
     }
 };
 
-// --- HELPERS ---
-const openUserDetails = (user: any) => {
+const openUserDetails = (user) => {
     selectedUser.value = user;
     userHistory.value = generateMockHistory(user.id);
     showDetailsModal.value = true;
@@ -679,7 +676,7 @@ const openCreateModal = () => {
     showModal.value = true;
 };
 
-const openEditModal = (user: any) => {
+const openEditModal = (user) => {
     isEditing.value = true;
     formData.id = user.id;
     formData.name = user.name;
@@ -708,7 +705,7 @@ const resetForm = () => {
     formData.is_active = true;
 };
 
-const getInitials = (name: string) => {
+const getInitials = (name) => {
     if (!name) return '??';
     return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
 };
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1030ea1..c526c27 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,416 +1,455 @@
 <template>
-    <div
-        class="min-h-screen bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-300">
-        <div class="max-w-6xl mx-auto flex gap-6 py-8 px-4">
+  <div
+    class="min-h-screen bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-300">
+    <div class="max-w-6xl mx-auto flex gap-6 py-8 px-4">
 
-            <aside v-if="!selectedPost" class="hidden lg:block w-fit min-w-[160px] py-24">
-                <div class="sticky top-8">
-                    <div class="flex flex-col gap-2">
-                        <button v-for="tag in availableTags" :key="tag.id" :class="[
-                            'px-3 py-2 rounded-lg text-xs font-bold transition-all text-left shadow-sm cursor-pointer',
-                            subscribedTags.includes(tag.id)
-                                ? `${tag.color} border-current ring-1 ring-inset ring-black/5`
-                                : 'bg-gray-50 dark:bg-gray-800 dark:border-gray-800 border opacity-60 hover:opacity-100'
-                        ]" @click="toggleTagSubscription(tag)">
-                            <span class="opacity-70 mr-1">{{ subscribedTags.includes(tag.id) ? '✓' : '#' }}</span>
-                            {{ tag.name }}
-                        </button>
-                    </div>
+      <aside v-if="!selectedPost" class="hidden lg:block w-fit min-w-[160px] py-24">
+        <div class="sticky top-24">
+          <div class="flex flex-col gap-2">
+            <button v-if="user?.role !== 'COLLABORATOR'"
+              class="mb-2 px-3 py-2 rounded-lg text-xs font-bold bg-blue-600 hover:bg-blue-700 text-white shadow-md transition-all active:scale-95 flex items-center justify-center gap-1"
+              @click="showCreateInput = !showCreateInput">
+              <span>+</span> NEW TAG
+            </button>
+
+            <div v-if="showCreateInput" class="mb-2">
+              <input ref="createInputRef" v-model="newTagName" placeholder="Tag name..."
+                class="w-full px-3 py-2 rounded-lg text-xs font-bold bg-white dark:bg-gray-800 border-2 border-blue-500 outline-none"
+                autofocus @keyup.enter="handleCreateTag" @blur="showCreateInput = false">
+            </div>
+            <div v-for="tag in availableTags" :key="tag.id" class="relative group">
+              <button v-if="editingTagId !== tag.id" :class="[
+                'w-full px-3 py-2 rounded-lg text-xs font-bold transition-all text-left shadow-sm cursor-pointer flex justify-between items-center pr-8',
+                subscribedTags.includes(tag.id)
+                  ? `${tag.color} border-current ring-1 ring-inset ring-black/5`
+                  : 'bg-gray-50 dark:bg-gray-800 dark:border-gray-800 border opacity-60 hover:opacity-100'
+              ]" @click="toggleTagSubscription(tag)">
+                <span class="truncate">
+                  <span class="opacity-70 mr-1">{{ subscribedTags.includes(tag.id) ? '✓' : '#' }}</span>
+                  {{ tag.name }}
+                </span>
+              </button>
+
+              <input v-else v-model="editTagName"
+                class="w-full px-3 py-2 rounded-lg text-xs font-bold bg-white dark:bg-gray-900 border-2 border-blue-500 outline-none"
+                autofocus @keyup.enter="handleEditTag(tag.id)" @blur="editingTagId = null">
+
+              <button v-if="user?.role !== 'COLLABORATOR' && editingTagId !== tag.id"
+                class="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 p-1 hover:text-blue-500 transition-all"
+                @click.stop="startEditing(tag)">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <main :class="[
+        'py-8 flex-1 transition-all duration-500 ease-in-out',
+        selectedPost ? 'max-w-3xl mx-auto' : 'max-w-2xl'
+      ]">
+
+        <div v-show="!selectedPost" class="space-y-4">
+          <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
+            <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+              <div class="relative flex-1 sm:flex-none">
+                <input v-model.lazy="searchQuery" type="text" placeholder="Search publications..."
+                  class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500"
+                  @keyup.enter="$el.blur()">
+              </div>
+              <div class="flex items-center">
+                <select v-model="sortBy"
+                  class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
+                  <option value="date">Date</option>
+                  <option value="votes">Rating</option>
+                  <option value="comments">Comments</option>
+                </select>
+                <button
+                  class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                  :title="sortDesc ? 'Descending' : 'Ascending'" @click="sortDesc = !sortDesc">
+                  <span class="inline-block transition-transform duration-200" :class="{ 'rotate-180': !sortDesc }">
+                    ▼
+                  </span>
+                </button>
+              </div>
+
+              <select v-model="filterType"
+                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
+                <option value="ALL">All Types</option>
+                <option value="CONFERENCE_PAPER">Conference Paper</option>
+                <option value="RESEARCH_POST">Research Post</option>
+              </select>
+            </div>
+
+            <button
+              class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all active:scale-95 flex items-center justify-center group"
+              title="New Post" @click="isModalOpen = true">
+              <svg viewBox="0 0 24 24" class="w-5 h-5 fill-none stroke-current stroke-[2.5]"
+                xmlns="http://www.w3.org/2000/svg">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+            </button>
+          </div>
+          <div v-if="filteredPosts.length === 0 && !loading"
+            class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
+
+            <div
+              class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+
+            <div class="relative z-10 flex flex-col items-center">
+              <div
+                class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
+                <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              </div>
+
+              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
+                No publications yet
+              </h3>
+
+              <button
+                class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
+                @click="isModalOpen = 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 4v16m8-8H4" />
+                </svg>
+                Submit your first post
+              </button>
+            </div>
+          </div>
+          <TransitionGroup v-else appear enter-active-class="transition duration-500 ease-out"
+            enter-from-class="translate-y-4 opacity-0" enter-to-class="translate-y-0 opacity-100">
+            <div v-for="post in filteredPosts" :key="post.id"
+              :class="['relative group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4 overflow-hidden', post.isHidden ? 'opacity-60 bg-gray-50' : 'bg-white']"
+              @click="fetchPostDetail(post.id)">
+
+              <div v-if="post.attachedFile"
+                class="absolute right-1 bottom-5 opacity-50 group-hover:opacity-100 transition-opacity duration-300">
+                <img src="/f.png" alt="attachment"
+                  class="w-32 h-32 transform rotate-[-45deg] pointer-events-none select-none">
+              </div>
+
+              <div class="flex gap-4">
+                <div
+                  class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
+
+                  <button class="hover:text-blue-500 transition-colors text-lg"
+                    :class="{ 'text-orange-500': post.my_vote === 'UP' }" @click.stop="votePost(post, 1)">▲</button>
+
+                  <span class="text-xs font-bold">{{ post.rating }}</span>
+
+                  <button class="hover:text-red-500 transition-colors text-lg"
+                    :class="{ 'text-blue-500': post.my_vote === 'DOWN' }" @click.stop="votePost(post, -1)">▼</button>
                 </div>
-            </aside>
 
-            <main :class="[
-                'py-8 flex-1 transition-all duration-500 ease-in-out',
-                selectedPost ? 'max-w-3xl mx-auto' : 'max-w-2xl'
-            ]">
+                <div class="flex-1">
+                  <div class="flex items-center gap-2 mb-1">
+                    <span
+                      class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
+                      {{ post.type.replace('_', ' ') }}
+                    </span>
+                    <span class="text-xs text-gray-500">{{ new Date(post.publicationDate).toLocaleDateString('en-US', {
+                      year:
+                        'numeric', month: 'long', day: 'numeric'
+                    }) }}</span>
+                    <button v-if="authStore.user.id == post.submitter.id"
+                      class="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
+                      title="Edit" @click.stop="openEditModal(post)">
+                      <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                    </button>
+                    <button v-if="authStore.user.id == post.submitter.id || authStore.user.role != 'COLLABORATOR'"
+                      class="p-1 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
+                      :title="post.isHidden ? 'Unhide' : 'Hide'" @click.stop="toggleHide(post)">
+                      <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+                        fill="currentColor">
+                        <path
+                          d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
+                        <path
+                          d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
 
-                <div v-show="!selectedPost" class="space-y-4">
-                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
-                        <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
-                            <div class="relative flex-1 sm:flex-none">
-                                <input v-model="searchQuery" type="text" placeholder="Search posts..."
-                                    class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
-                            </div>
-                            <div class="flex items-center">
-                                <select v-model="sortBy"
-                                    class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
-                                    <option value="date">Date</option>
-                                    <option value="votes">Rating</option>
-                                    <option value="comments">Comments</option>
-                                </select>
-                                <button
-                                    class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-                                    :title="sortDesc ? 'Descending' : 'Ascending'" @click="sortDesc = !sortDesc">
-                                    <span class="inline-block transition-transform duration-200"
-                                        :class="{ 'rotate-180': !sortDesc }">
-                                        ▼
-                                    </span>
-                                </button>
-                            </div>
+                        <line v-if="post.isHidden" x1="3" y1="3" x2="13" y2="13" stroke="currentColor"
+                          stroke-width="1.5" stroke-linecap="round" />
+                      </svg>
+                    </button>
+                  </div>
+                  <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{ post.title }}
+                  </h2>
+                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 truncate max-w-[400px]">
+                    {{ post.authors.length > 0 ? `By ${post.authors.join(', ')}` : 'No Authors' }}
+                  </p>
+                  <div class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase min-w-0">
+                    <span class="shrink-0">💬 {{ post.commentCount }} Comments</span>
 
-                            <select v-model="filterType"
-                                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
-                                <option value="ALL">All Types</option>
-                                <option value="CONFERENCE_PAPER">Conference Paper</option>
-                                <option value="RESEARCH_POST">Research Post</option>
-                            </select>
-                        </div>
-
-                        <button
-                            class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all active:scale-95 flex items-center justify-center group"
-                            title="New Post" @click="isModalOpen = true">
-                            <svg viewBox="0 0 24 24" class="w-5 h-5 fill-none stroke-current stroke-[2.5]"
-                                xmlns="http://www.w3.org/2000/svg">
-                                <line x1="12" y1="5" x2="12" y2="19" />
-                                <line x1="5" y1="12" x2="19" y2="12" />
-                            </svg>
-                        </button>
+                    <div class="max-w-[300px] truncate">
+                      <span v-for="tag in post.tags" :key="tag.id" class="text-blue-600 dark:text-blue-400 mr-2">
+                        #{{ tag.name }}
+                      </span>
                     </div>
-                    <div v-if="filteredPosts.length === 0 && !loading"
-                        class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
-
-                        <div
-                            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
-
-                        <div class="relative z-10 flex flex-col items-center">
-                            <div
-                                class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
-                                <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                </svg>
-                            </div>
-
-                            <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
-                                No publications yet
-                            </h3>
-
-                            <button
-                                class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
-                                @click="isModalOpen = 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 4v16m8-8H4" />
-                                </svg>
-                                Submit your first post
-                            </button>
-                        </div>
-                    </div>
-                    <TransitionGroup v-else appear enter-active-class="transition duration-500 ease-out"
-                        enter-from-class="translate-y-4 opacity-0" enter-to-class="translate-y-0 opacity-100">
-                        <div v-for="post in filteredPosts" :key="post.id"
-                            class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
-                            @click="fetchPostDetail(post.id)">
-                            <div class="flex gap-4">
-                                <div
-                                    class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
-
-                                    <button class="hover:text-blue-500 transition-colors text-lg"
-                                        :class="{ 'text-orange-500': post.my_vote === 'UP' }"
-                                        @click.stop="votePost(post, 1)">▲</button>
-
-                                    <span class="text-xs font-bold">{{ post.rating }}</span>
-
-                                    <button class="hover:text-red-500 transition-colors text-lg"
-                                        :class="{ 'text-blue-500': post.my_vote === 'DOWN' }"
-                                        @click.stop="votePost(post, -1)">▼</button>
-                                </div>
-
-                                <div class="flex-1">
-                                    <div class="flex items-center gap-2 mb-1">
-                                        <span
-                                            class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
-                                            {{ post.type.replace('_', ' ') }}
-                                        </span>
-                                        <span class="text-xs text-gray-500">{{ post.publication_date }}</span>
-                                    </div>
-                                    <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{ post.title }}
-                                    </h2>
-                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By {{
-                                        post.authors.join(', ') }}
-                                    </p>
-                                    <div class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
-                                        <span>💬 {{ post.comment_count }} Comments</span>
-                                        <div class="flex gap-2">
-                                            <span v-for="tag in post.tags" :key="tag.id"
-                                                class="text-blue-600 dark:text-blue-400">#{{ tag.name
-                                                }}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </TransitionGroup>
-
-                    <div v-if="loading && filteredPosts.length === 0" class="space-y-4">
-                        <div v-for="i in 6" :key="i"
-                            class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 animate-pulse">
-                            <div class="flex gap-4">
-                                <div class="w-10 h-16 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-                                <div class="flex-1 space-y-3">
-                                    <div class="h-3 w-24 bg-gray-100 dark:bg-gray-800 rounded" />
-                                    <div class="h-5 w-3/4 bg-gray-100 dark:bg-gray-800 rounded" />
-                                    <div class="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div ref="loadMoreTrigger" class="h-20 w-full flex flex-col items-center justify-center gap-2">
-                        <div v-if="loading"
-                            class="animate-spin h-6 w-6 border-2 border-blue-600 border-t-transparent rounded-full" />
-                    </div>
-
+                  </div>
                 </div>
-                <div v-if="selectedPost" class="animate-fade-in-up">
-                    <button
-                        class="mb-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
-                        @click="selectedPost = null">
-                        ← BACK TO FEED
+              </div>
+            </div>
+          </TransitionGroup>
+
+          <div v-if="loading && filteredPosts.length === 0" class="space-y-4">
+            <div v-for="i in 6" :key="i"
+              class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 animate-pulse">
+              <div class="flex gap-4">
+                <div class="w-10 h-16 bg-gray-100 dark:bg-gray-800 rounded-lg" />
+                <div class="flex-1 space-y-3">
+                  <div class="h-3 w-24 bg-gray-100 dark:bg-gray-800 rounded" />
+                  <div class="h-5 w-3/4 bg-gray-100 dark:bg-gray-800 rounded" />
+                  <div class="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div ref="loadMoreTrigger" class="h-20 w-full flex flex-col items-center justify-center gap-2">
+            <div v-if="loading"
+              class="animate-spin h-6 w-6 border-2 border-blue-600 border-t-transparent rounded-full" />
+          </div>
+
+        </div>
+        <div v-if="selectedPost" class="animate-fade-in-up">
+          <button
+            class="mb-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
+            @click="selectedPost = null">
+            ← BACK TO FEED
+          </button>
+
+          <article class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-2xl shadow-xl overflow-hidden">
+
+            <div
+              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">
+                <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">
+                  {{ selectedPost.type.replace('_', ' ') }}
+                </span>
+                <span class="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
+                  <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                  {{ new Date(selectedPost.publicationDate).toLocaleDateString('en-US', {
+                    year:
+                      'numeric', month: 'long', day: 'numeric'
+                  }) }}
+                </span>
+              </div>
+
+              <h1 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
+                {{ selectedPost.title }}
+              </h1>
+
+              <div
+                class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
+
+                <div>
+                  <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Authors
+                  </h4>
+                  <div class="flex flex-wrap gap-2">
+                    <span v-for="(author, idx) in selectedPost.authors" :key="idx"
+                      class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200">
+                      <span
+                        class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 flex items-center justify-center text-xs">
+                        {{ author.charAt(0) }}
+                      </span>
+                      {{ author }}
+                    </span>
+                  </div>
+                </div>
+
+                <div>
+                  <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Submitted
+                    By</h4>
+                  <div class="flex items-center gap-3">
+                    <div
+                      class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
+                      {{ selectedPost.submitter.name.charAt(0) }}
+                    </div>
+                    <div>
+                      <div class="text-sm font-bold text-gray-900 dark:text-white">{{
+                        selectedPost.submitter.name }}</div>
+                      <div class="text-xs text-gray-500">{{ selectedPost.submitter.role }} • {{
+                        selectedPost.submitter.email }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="p-8">
+              <div class="mb-10">
+                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                  <svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
+                  </svg>
+                  Abstract
+                </h3>
+                <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-justify whitespace-pre-line">
+                  {{ selectedPost.abstractText }}
+                </p>
+              </div>
+
+              <div
+                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-8 border-b dark:border-gray-800">
+                <div v-if="selectedPost.tags && selectedPost.tags.length > 0">
+                  <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Tags</h4>
+                  <div class="flex flex-wrap gap-2">
+                    <span v-for="tag in selectedPost.tags" :key="tag.id"
+                      class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-medium border border-gray-200 dark:border-gray-700">
+                      #{{ tag.name }}
+                    </span>
+                  </div>
+                </div>
+                <div v-else class="text-sm text-gray-400 italic">No tags assigned</div>
+
+                <div class="flex items-center gap-4">
+                  <div
+                    class="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-1.5 shadow-sm">
+
+                    <button class="p-2 rounded-lg transition-all active:scale-90"
+                      :class="selectedPost.my_vote === 'UP' ? 'text-orange-600 bg-orange-100 dark:bg-orange-900/30' : 'text-slate-400 hover:text-orange-500 hover:bg-white dark:hover:bg-slate-700'"
+                      title="Upvote" @click="votePost(selectedPost, 1)">
+                      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+                      </svg>
                     </button>
 
-                    <article
-                        class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-2xl shadow-xl overflow-hidden">
+                    <div class="min-w-[40px] text-center">
+                      <span class="text-2xl font-black tracking-tight" :class="{
+                        'text-orange-600': selectedPost.my_vote === 'UP',
+                        'text-blue-600': selectedPost.my_vote === 'DOWN',
+                        'text-slate-900 dark:text-white': !selectedPost.my_vote || selectedPost.my_vote === 'NONE'
+                      }">
+                        {{ selectedPost.rating }}
+                      </span>
+                    </div>
 
-                        <div
-                            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">
-                                <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">
-                                    {{ selectedPost.type.replace('_', ' ') }}
-                                </span>
-                                <span
-                                    class="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                                    <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                    </svg>
-                                    {{ new Date(selectedPost.publicationDate).toLocaleDateString('en-US', {
-                                        year:
-                                            'numeric', month: 'long', day: 'numeric'
-                                    }) }}
-                                </span>
-                            </div>
-
-                            <h1
-                                class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
-                                {{ selectedPost.title }}
-                            </h1>
-
-                            <div
-                                class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
-
-                                <div>
-                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Authors
-                                    </h4>
-                                    <div class="flex flex-wrap gap-2">
-                                        <span v-for="(author, idx) in selectedPost.authors" :key="idx"
-                                            class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200">
-                                            <span
-                                                class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 flex items-center justify-center text-xs">
-                                                {{ author.charAt(0) }}
-                                            </span>
-                                            {{ author }}
-                                        </span>
-                                    </div>
-                                </div>
-
-                                <div>
-                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Submitted
-                                        By</h4>
-                                    <div class="flex items-center gap-3">
-                                        <div
-                                            class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
-                                            {{ selectedPost.submitter.name.charAt(0) }}
-                                        </div>
-                                        <div>
-                                            <div class="text-sm font-bold text-gray-900 dark:text-white">{{
-                                                selectedPost.submitter.name }}</div>
-                                            <div class="text-xs text-gray-500">{{ selectedPost.submitter.role }} • {{
-                                                selectedPost.submitter.email }}</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="p-8">
-                            <div class="mb-10">
-                                <h3
-                                    class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                                    <svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24"
-                                        stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4 6h16M4 12h16M4 18h7" />
-                                    </svg>
-                                    Abstract
-                                </h3>
-                                <p
-                                    class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-justify whitespace-pre-line">
-                                    {{ selectedPost.abstractText }}
-                                </p>
-                            </div>
-
-                            <div
-                                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-8 border-b dark:border-gray-800">
-                                <div v-if="selectedPost.tags && selectedPost.tags.length > 0">
-                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Tags</h4>
-                                    <div class="flex flex-wrap gap-2">
-                                        <span v-for="tag in selectedPost.tags" :key="tag.id"
-                                            class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-medium border border-gray-200 dark:border-gray-700">
-                                            #{{ tag.name }}
-                                        </span>
-                                    </div>
-                                </div>
-                                <div v-else class="text-sm text-gray-400 italic">No tags assigned</div>
-
-                                <div class="flex items-center gap-4">
-                                    <div
-                                        class="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-1.5 shadow-sm">
-
-                                        <button @click="votePost(selectedPost, 1)"
-                                            class="p-2 rounded-lg transition-all active:scale-90"
-                                            :class="selectedPost.my_vote === 'UP' ? 'text-orange-600 bg-orange-100 dark:bg-orange-900/30' : 'text-slate-400 hover:text-orange-500 hover:bg-white dark:hover:bg-slate-700'"
-                                            title="Upvote">
-                                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                                stroke-width="2.5">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M5 15l7-7 7 7" />
-                                            </svg>
-                                        </button>
-
-                                        <div class="min-w-[40px] text-center">
-                                            <span class="text-2xl font-black tracking-tight" :class="{
-                                                'text-orange-600': selectedPost.my_vote === 'UP',
-                                                'text-blue-600': selectedPost.my_vote === 'DOWN',
-                                                'text-slate-900 dark:text-white': !selectedPost.my_vote || selectedPost.my_vote === 'NONE'
-                                            }">
-                                                {{ selectedPost.rating }}
-                                            </span>
-                                        </div>
-
-                                        <button @click="votePost(selectedPost, -1)"
-                                            class="p-2 rounded-lg transition-all active:scale-90"
-                                            :class="selectedPost.my_vote === 'DOWN' ? 'text-blue-600 bg-blue-100 dark:bg-blue-900/30' : 'text-slate-400 hover:text-blue-500 hover:bg-white dark:hover:bg-slate-700'"
-                                            title="Downvote">
-                                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                                stroke-width="2.5">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M19 9l-7 7-7-7" />
-                                            </svg>
-                                        </button>
-                                    </div>
-
-                                </div>
-
-
-                            </div>
-
-                            <div v-if="selectedPost.attachedFile"
-                                class="mb-10 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:border-blue-400 transition-colors group">
-                                <div class="flex items-center justify-between">
-                                    <div class="flex items-center gap-4">
-                                        <div
-                                            class="p-3 bg-red-100 text-red-600 rounded-lg group-hover:scale-110 transition-transform">
-                                            <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                                            </svg>
-                                        </div>
-                                        <div>
-                                            <div class="font-bold text-gray-900 dark:text-white mb-0.5">Attachment
-                                                Available</div>
-                                            <div
-                                                class="text-xs text-gray-500 font-mono truncate max-w-[200px] md:max-w-md">
-                                                {{ getFileName(selectedPost.attachedFile) }}
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <button @click="downloadFile(selectedPost)"
-                                        class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all">
-                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                                        </svg>
-                                        Download
-                                    </button>
-                                </div>
-                            </div>
-
-                            <hr class="border-gray-100 dark:border-gray-800 mb-8">
-
-                            <section>
-                                <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
-                                    Comments
-                                    <span
-                                        class="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs px-2 py-1 rounded-full">{{
-                                            selectedPost.comments.length }}</span>
-                                </h3>
-                                <div class="space-y-3">
-                                    <textarea v-model="newCommentContent" rows="3"
-                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
-                                        placeholder="What are your thoughts?" />
-                                    <div class="flex justify-end">
-                                        <button :disabled="!newCommentContent.trim()"
-                                            class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
-                                            @click="submitComment">
-                                            COMMENT
-                                        </button>
-                                    </div>
-                                </div>
-
-                                <div class="mt-8 space-y-6">
-                                    <div v-if="selectedPost.comments.length === 0"
-                                        class="text-center py-8 text-gray-400 italic">
-                                        Be the first to comment!
-                                    </div>
-
-                                    <div v-for="comment in selectedPost.comments" :key="comment.id" class="flex gap-4">
-                                        <div
-                                            class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 flex-shrink-0" />
-                                        <div class="flex-1">
-                                            <div
-                                                class="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-xl rounded-tl-none border border-gray-100 dark:border-gray-800">
-                                                <div class="flex items-center justify-between mb-2">
-                                                    <span class="font-bold text-sm text-blue-600 dark:text-blue-400">{{
-                                                        comment.author.name }}</span>
-                                                    <span class="text-[10px] text-gray-400 uppercase">{{ new
-                                                        Date(comment.created_at).toLocaleDateString() }}</span>
-                                                </div>
-                                                <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
-                                                    {{ comment.content }}
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </section>
-                        </div>
-                    </article>
+                    <button class="p-2 rounded-lg transition-all active:scale-90"
+                      :class="selectedPost.my_vote === 'DOWN' ? 'text-blue-600 bg-blue-100 dark:bg-blue-900/30' : 'text-slate-400 hover:text-blue-500 hover:bg-white dark:hover:bg-slate-700'"
+                      title="Downvote" @click="votePost(selectedPost, -1)">
+                      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
-                <CreatePostModal :is-open="isModalOpen" :api="api" :token="token" @close="closeModal()"
-                    @refresh="handleRefresh" />
-            </main>
+              </div>
+
+              <div v-if="selectedPost.attachedFile"
+                class="mb-10 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:border-blue-400 transition-colors group">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-4">
+                    <div class="p-3 bg-red-100 text-red-600 rounded-lg group-hover:scale-110 transition-transform">
+                      <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <div class="font-bold text-gray-900 dark:text-white mb-0.5">Attachment
+                        Available</div>
+                      <div class="text-xs text-gray-500 font-mono truncate max-w-[200px] md:max-w-md">
+                        {{ getFileName(selectedPost.attachedFile) }}
+                      </div>
+                    </div>
+                  </div>
+                  <button
+                    class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all"
+                    @click="downloadFile(selectedPost)">
+                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                    </svg>
+                    Download
+                  </button>
+                </div>
+              </div>
+
+              <hr class="border-gray-100 dark:border-gray-800 mb-8">
+
+              <section>
+                <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
+                  Comments
+                  <span
+                    class="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs px-2 py-1 rounded-full">{{
+                      selectedPost.comments.length }}</span>
+                </h3>
+                <div class="space-y-3">
+                  <textarea v-model="newCommentContent" rows="3"
+                    class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
+                    placeholder="What are your thoughts?" />
+                  <div class="flex justify-end">
+                    <button :disabled="!newCommentContent.trim()"
+                      class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
+                      @click="submitComment">
+                      COMMENT
+                    </button>
+                  </div>
+                </div>
+
+                <div class="mt-8 space-y-6">
+                  <div v-if="selectedPost.comments.length === 0" class="text-center py-8 text-gray-400 italic">
+                    Be the first to comment!
+                  </div>
+
+                  <div v-for="comment in selectedPost.comments" :key="comment.id" class="flex gap-4">
+                    <div
+                      class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 flex-shrink-0" />
+                    <div class="flex-1">
+                      <div
+                        class="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-xl rounded-tl-none border border-gray-100 dark:border-gray-800">
+                        <div class="flex items-center justify-between mb-2">
+                          <span class="font-bold text-sm text-blue-600 dark:text-blue-400">{{
+                            comment.author.name }}</span>
+                          <span class="text-[10px] text-gray-400 uppercase">{{ new
+                            Date(comment.created_at).toLocaleDateString() }}</span>
+                        </div>
+                        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
+                          {{ comment.content }}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </article>
         </div>
+        <CreatePostModal :is-open="isModalOpen" :post-to-edit="postToEdit" :api="api" :token="token"
+          @close="closeModal()" @refresh="handleRefresh" />
+      </main>
     </div>
+  </div>
 </template>
 
 
-<script setup lang="ts">
+<script setup>
 import { useAuthStore } from "~/stores/auth-store.js";
 import { storeToRefs } from "pinia";
 import { useRoute } from 'vue-router';
 import CreatePostModal from "~/components/ui/modal/CreatePostModal.vue";
 
-const route = useRoute(); // 2. Access the route object
-const config = useRuntimeConfig();
 const authStore = useAuthStore();
 const { user, token } = storeToRefs(authStore);
+const route = useRoute();
+const config = useRuntimeConfig();
+const notifications = useNotificationStore();
 const api = config.public.apiBase;
 
-// --- State Management ---
 const posts = ref([]);
 const selectedPost = ref(null);
 const loading = ref(false);
@@ -422,307 +461,383 @@ const hasMore = ref(true);
 
 const sortBy = ref('date');
 const sortDesc = ref(true);
+const filterType = ref('ALL');
 
 const subscribedTags = ref([]);
 const availableTags = ref([]);
+const showCreateInput = ref(false);
+const newTagName = ref('');
+const editingTagId = ref(null);
+const editTagName = ref('');
 
-const filterType = ref('ALL');
+const postToEdit = ref(null);
 
 const newCommentContent = ref('');
 
-// Form States
-
 const checkQueryForModal = () => {
-    if (route.query.openCreatePostModal === 'true') {
-        isModalOpen.value = true;
-    }
+  if (route.query.openCreatePostModal === 'true') {
+    isModalOpen.value = true;
+  }
 }
 
+const toggleHide = async (post) => {
+  try {
+    const newState = !post.isHidden;
+
+    await $fetch(`${api}/publications/${post.id}`, {
+      method: 'PATCH',
+      headers: { Authorization: `Bearer ${token.value}` },
+      body: { isHidden: newState }
+    });
+
+    post.isHidden = newState;
+    notifications.success(`Post ${newState ? 'hidden' : 'restored'}`);
+
+  } catch (err) {
+    notifications.error("Failed to update post visibility");
+  }
+};
+
+const openEditModal = (post) => {
+  postToEdit.value = post;
+  isModalOpen.value = true;
+};
+
+const handleCreateTag = async () => {
+  if (!newTagName.value.trim()) return;
+
+  try {
+    await $fetch(`${api}/tags`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token.value}` },
+      body: { name: newTagName.value }
+    });
+    newTagName.value = '';
+    showCreateInput.value = false;
+    notifications.success("Tag created successfully");
+    await fetchTags();
+  } catch (err) {
+    notifications.error("Failed to create tag");
+  }
+};
+
+const startEditing = (tag) => {
+  editingTagId.value = tag.id;
+  editTagName.value = tag.name;
+};
+
+const handleEditTag = async (tagId) => {
+  const trimmedName = editTagName.value.trim();
+  if (!trimmedName) {
+    editingTagId.value = null;
+    return;
+  }
+
+  try {
+    await $fetch(`${api}/tags/${tagId}`, {
+      method: 'PATCH',
+      headers: { Authorization: `Bearer ${token.value}` },
+      body: { name: trimmedName }
+    });
+
+    const tagIndex = availableTags.value.findIndex(t => t.id === tagId);
+    if (tagIndex !== -1) availableTags.value[tagIndex].name = trimmedName;
+
+    posts.value.forEach(post => {
+      const postTag = post.tags.find(t => t.id === tagId);
+      if (postTag) {
+        postTag.name = trimmedName;
+      }
+    });
+
+    if (selectedPost.value) {
+      const selectedPostTag = selectedPost.value.tags.find(t => t.id === tagId);
+      if (selectedPostTag) selectedPostTag.name = trimmedName;
+    }
+
+    editingTagId.value = null;
+    notifications.success("Tag edited successfully");
+  } catch (err) {
+    notifications.error("Failed to edit tag");
+  }
+};
+
 const closeModal = () => {
-    const router = useRouter();
-    isModalOpen.value = false;
-    router.replace({ query: { ...route.query, openCreatePostModal: undefined } });
+  const router = useRouter();
+  isModalOpen.value = false;
+  postToEdit.value = null;
+  router.replace({ query: { ...route.query, openCreatePostModal: undefined } });
 };
 
 const fetchTags = async () => {
-    try {
-        const allTags = await $fetch(`${api}/tags`, {
-            headers: { Authorization: `Bearer ${token.value}` }
-        });
+  try {
+    const allTags = await $fetch(`${api}/tags`, {
+      headers: { Authorization: `Bearer ${token.value}` }
+    });
 
-        const colors = [
-            "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400",
-            "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
-            "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
-            "bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-400",
-            "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
-        ];
+    const colors = [
+      "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400",
+      "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+      "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
+      "bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-400",
+      "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
+    ];
 
-        availableTags.value = allTags.map((tag, index) => ({
-            ...tag,
-            color: colors[index % colors.length]
-        }));
+    availableTags.value = allTags.map((tag, index) => ({
+      ...tag,
+      color: colors[index % colors.length]
+    }));
 
 
-        const myTags = await $fetch(`${api}/tags/me`, {
-            headers: { Authorization: `Bearer ${token.value}` }
-        });
+    const myTags = await $fetch(`${api}/tags/me`, {
+      headers: { Authorization: `Bearer ${token.value}` }
+    });
 
-        subscribedTags.value = myTags.map(t => t.id);
-    } catch (err) {
-        console.error("Error fetching tags:", err);
-    }
+    subscribedTags.value = myTags.map(t => t.id);
+  } catch (err) {
+    console.error("Error fetching tags:", err);
+  }
 
 };
 
-
 const toggleTagSubscription = async (tag) => {
-    const index = subscribedTags.value.indexOf(tag.id);
-    const isSubscribing = index === -1;
+  const index = subscribedTags.value.indexOf(tag.id);
+  const isSubscribing = index === -1;
 
-    if (isSubscribing) subscribedTags.value.push(tag.id);
-    else subscribedTags.value.splice(index, 1);
+  if (isSubscribing) subscribedTags.value.push(tag.id);
+  else subscribedTags.value.splice(index, 1);
 
-    try {
-        const endpoint = isSubscribing
-            ? `${api}/tags/${tag.id}/subscribe`
-            : `${api}/tags/${tag.id}/unsubscribe`;
+  try {
+    const endpoint = isSubscribing
+      ? `${api}/tags/${tag.id}/subscribe`
+      : `${api}/tags/${tag.id}/unsubscribe`;
 
-        await $fetch(endpoint, {
-            method: 'POST',
-            headers: { Authorization: `Bearer ${token.value}` }
-        });
+    await $fetch(endpoint, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token.value}` }
+    });
 
-    } catch (err) {
-        if (isSubscribing) subscribedTags.value.pop();
-        else subscribedTags.value.push(tag.id);
+  } catch (err) {
+    if (isSubscribing) subscribedTags.value.pop();
+    else subscribedTags.value.push(tag.id);
 
-        console.error("Sync failed:", err);
-    }
+    console.error("Sync failed:", err);
+  }
 
 };
 
-
 const handleRefresh = () => {
-    isModalOpen.value = false;
-    loadPosts();
+  isModalOpen.value = false;
+  posts.value = [];
+  page.value = 1;
+  hasMore.value = true;
+  loadPosts();
+  window.scrollTo({ top: 0, behavior: 'smooth' })
 };
 
-
 const submitComment = () => {
-    if (!newCommentContent.value.trim()) return;
+  if (!newCommentContent.value.trim()) return;
 
-    const comment = {
-        id: Date.now(),
-        content: newCommentContent.value,
-        author: { name: user.value?.name || "Guest" },
-        created_at: new Date().toISOString()
-    };
-
-    selectedPost.value.comments.unshift(comment);
-    newCommentContent.value = '';
+  const comment = {
+    id: Date.now(),
+    content: newCommentContent.value,
+    author: { name: user.value?.name || "Guest" },
+    created_at: new Date().toISOString()
+  };
 
+  selectedPost.value.comments.unshift(comment);
+  newCommentContent.value = '';
 };
 
 const loadPosts = async () => {
-    if (loading.value || !hasMore.value) return;
-    loading.value = true;
+  if (loading.value || !hasMore.value) return;
+  loading.value = true;
 
-    try {
-        const data = await $fetch(`${api}/publications`, {
-            method: 'GET',
-            headers: { Authorization: `Bearer ${token.value}` },
-            params: {
-                page: page.value,
-                sort: sortBy.value,
-                order: sortDesc.value ? 'desc' : 'asc',
-                type: filterType.value !== 'ALL' ? filterType.value : undefined
-            }
-        });
+  try {
+    const data = await $fetch(`${api}/publications`, {
+      method: 'GET',
+      headers: { Authorization: `Bearer ${token.value}` },
+      params: {
+        page: page.value,
+        sort: sortBy.value,
+        order: sortDesc.value ? 'desc' : 'asc',
+        type: filterType.value !== 'ALL' ? filterType.value : undefined,
+        search: searchQuery.value ? searchQuery.value : ''
+      }
+    });
 
-        if (data && data.length > 0) {
-            posts.value = [...posts.value, ...data];
-            page.value++;
-        } else {
-            hasMore.value = false;
-        }
-    } catch (err) {
-        console.error("Failed to fetch posts:", err);
-    } finally {
-        loading.value = false;
+    if (data && data.length > 0) {
+      posts.value = [...posts.value, ...data];
+      page.value++;
+    } else {
+      hasMore.value = false;
     }
+  } catch (err) {
+    console.error("Failed to fetch posts:", err);
+  } finally {
+    loading.value = false;
+  }
 };
 
 const fetchPostDetail = async (id) => {
-    loading.value = true;
-    try {
-        const postDetail = await $fetch(`${api}/publications/${id}`, {
-            headers: { Authorization: `Bearer ${token.value}` }
-        });
-        selectedPost.value = postDetail;
-    } catch (err) {
-        console.error("Failed to fetch post detail:", err);
-    } finally {
-        loading.value = false;
-    }
+  loading.value = true;
+  try {
+    const postDetail = await $fetch(`${api}/publications/${id}`, {
+      headers: { Authorization: `Bearer ${token.value}` }
+    });
+    selectedPost.value = postDetail;
+  } catch (err) {
+    console.error("Failed to fetch post detail:", err);
+  } finally {
+    loading.value = false;
+  }
 };
 
 const votePost = async (targetPost, direction) => {
-    if (!targetPost) return;
+  if (!targetPost) return;
 
-    let voteTypeToSend = 'NONE';
-    const currentVote = targetPost.my_vote || 'NONE';
+  let voteTypeToSend = 'NONE';
+  const currentVote = targetPost.my_vote || 'NONE';
 
-    if (direction === 1) { 
-        voteTypeToSend = currentVote === 'UP' ? 'NONE' : 'UP';
-    } else if (direction === -1) { 
-        voteTypeToSend = currentVote === 'DOWN' ? 'NONE' : 'DOWN';
+  if (direction === 1) {
+    voteTypeToSend = currentVote === 'UP' ? 'NONE' : 'UP';
+  } else if (direction === -1) {
+    voteTypeToSend = currentVote === 'DOWN' ? 'NONE' : 'DOWN';
+  }
+
+  try {
+    const response = await $fetch(`${api}/publications/${targetPost.id}/vote`, {
+      method: 'PUT',
+      headers: { Authorization: `Bearer ${token.value}` },
+      body: { vote_type: voteTypeToSend }
+    });
+
+    targetPost.rating = response.score;
+    targetPost.my_vote = response.my_vote;
+
+    if (selectedPost.value && selectedPost.value.id === targetPost.id) {
+      selectedPost.value.rating = response.score;
+      selectedPost.value.my_vote = response.my_vote;
     }
 
-    try {
-        const response = await $fetch(`${api}/publications/${targetPost.id}/vote`, {
-            method: 'PUT',
-            headers: { Authorization: `Bearer ${token.value}` },
-            body: { vote_type: voteTypeToSend }
-        });
-
-        targetPost.rating = response.score;
-        targetPost.my_vote = response.my_vote;
-
-        if (selectedPost.value && selectedPost.value.id === targetPost.id) {
-            selectedPost.value.rating = response.score;
-            selectedPost.value.my_vote = response.my_vote;
-        }
-
-    } catch (error) {
-        console.error("Vote failed", error);
-        alert("Failed to submit vote.");
-    }
+  } catch (error) {
+    console.error("Vote failed", error);
+    notifications.error("Failed to submit vote.");
+  }
 };
 
 const getFileName = (fullPath) => {
-    if (!fullPath) return null;
-    return fullPath.split(/[/\\]/).pop();
+  if (!fullPath) return null;
+  return fullPath.split(/[/\\]/).pop();
 };
 
 const downloadFile = async (post) => {
-    if (!post.attachedFile) return;
+  if (!post.attachedFile) return;
 
-    const filename = getFileName(post.attachedFile);
-    
-    const downloadUrl = `${api}/publications/download/${filename}`;
-    
-    try {
-        const link = document.createElement('a');
-        link.href = downloadUrl;
-        link.setAttribute('download', filename);
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
+  const filename = getFileName(post.attachedFile);
 
-        // Opção B: Se o endpoint for PRIVADO (@Authenticated), tens de fazer fetch com o token:
-        /*
-        const response = await fetch(downloadUrl, {
-            headers: { Authorization: `Bearer ${token.value}` }
-        });
-        
-        if (!response.ok) throw new Error('Download failed');
-        
-        const blob = await response.blob();
-        const url = window.URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        window.URL.revokeObjectURL(url);
-        */
+  const downloadUrl = `${api}/publications/download/${filename}`;
 
-    } catch (e) {
-        console.error("Download error:", e);
-        alert("Could not download file.");
-    }
+  try {
+    const link = document.createElement('a');
+    link.href = downloadUrl;
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } catch (e) {
+    console.error("Download error:", e);
+    notifications.error("Could not download file.");
+  }
 };
 
 const filteredPosts = computed(() => {
-    const result = posts.value.filter(p => {
-        const matchesType = filterType.value === 'ALL' || p.type === filterType.value;
-        const matchesTags = subscribedTags.value.length === 0 ||
-            p.tags.some(t => subscribedTags.value.includes(t.id));
-        return matchesType && matchesTags;
-    });
+  const result = posts.value.filter(p => {
+    const matchesType = filterType.value === 'ALL' || p.type === filterType.value;
+    const matchesTags = subscribedTags.value.length === 0 ||
+      p.tags.some(t => subscribedTags.value.includes(t.id));
+    return matchesType && matchesTags;
+  });
 
-    return result.sort((a, b) => {
-        const modifier = sortDesc.value ? 1 : -1;
+  return result.sort((a, b) => {
+    const modifier = sortDesc.value ? 1 : -1;
 
-        if (sortBy.value === 'votes') {
-            return (b.rating - a.rating) * modifier;
-        } else if (sortBy.value === 'comments') {
-            return (b.comment_count - a.comment_count) * modifier;
-        } else {
-            return (new Date(b.publication_date).getTime() - new Date(a.publication_date).getTime()) * modifier;
-        }
-    });
+    if (sortBy.value === 'votes') {
+      return (b.rating - a.rating) * modifier;
+    } else if (sortBy.value === 'comments') {
+      return (b.commentCount - a.commentCount) * modifier;
+    } else {
+      return (new Date(b.publicationDate).getTime() - new Date(a.publicationDate).getTime()) * modifier;
+    }
+  });
 });
 
 watch(posts, () => {
-    if (filteredPosts.value.length < 3 && !loading.value && !selectedPost.value) {
-        loadPosts();
-    }
+  if (filteredPosts.value.length < 3 && !loading.value && !selectedPost.value) {
+    loadPosts();
+  }
 }, { deep: true });
 
 watch([sortBy, sortDesc, filterType], () => {
-    posts.value = [];
-    page.value = 1;
-    hasMore.value = true;
-    loadPosts();
+  resetAndLoad();
 });
 
+watch(searchQuery, () => {
+  resetAndLoad();
+});
+
+function resetAndLoad() {
+  posts.value = [];
+  page.value = 1;
+  hasMore.value = true;
+  loadPosts();
+}
+
 onMounted(async () => {
-    checkQueryForModal();
+  checkQueryForModal();
 
-    await Promise.all([
-        loadPosts(),
-        fetchTags()
-    ]);
+  await Promise.all([
+    loadPosts(),
+    fetchTags()
+  ]);
 
-    const observer = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && !loading.value && !selectedPost.value) {
-            loadPosts();
-        }
-    }, {
-        rootMargin: '300px',
-        threshold: 0.1
-    });
-
-    if (loadMoreTrigger.value) {
-        observer.observe(loadMoreTrigger.value);
+  const observer = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && !loading.value && !selectedPost.value) {
+      loadPosts();
     }
+  }, {
+    rootMargin: '300px',
+    threshold: 0.1
+  });
+
+  if (loadMoreTrigger.value) {
+    observer.observe(loadMoreTrigger.value);
+  }
 });
 </script>
 
 <style scoped>
 @keyframes fadeInUp {
 
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .animate-fade-in-up {
-    animation: fadeInUp 0.5s ease-out forwards;
+  animation: fadeInUp 0.5s ease-out forwards;
 }
 
 .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 </style>
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index ee7674c..be5a498 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -2,6 +2,9 @@
     <div
         class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
 
+        <CreatePostModal :is-open="isModalOpen" :post-to-edit="postToEdit" :api="api" :token="token" @close="closeModal"
+            @refresh="fetchProfileData" />
+
         <Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0"
             enter-to-class="opacity-100" leave-active-class="transition duration-150 ease-in"
             leave-from-class="opacity-100" leave-to-class="opacity-0">
@@ -20,7 +23,6 @@
                             class="w-full max-w-4xl bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border dark:border-gray-800"
                             @click.stop>
 
-                            <!-- Close Button Header -->
                             <div
                                 class="sticky top-0 z-10 flex justify-between items-center p-4 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm border-b dark:border-gray-800 rounded-t-2xl">
                                 <button
@@ -29,8 +31,9 @@
                                     ← BACK TO FEED
                                 </button>
 
-                                <button @click="selectedPost = null"
-                                    class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                                <button
+                                    class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                                    @click="selectedPost = null">
                                     <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                             d="M6 18L18 6M6 6l12 12" />
@@ -38,7 +41,6 @@
                                 </button>
                             </div>
 
-                            <!-- Post Content - Same as main page -->
                             <article class="overflow-hidden">
                                 <div
                                     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">
@@ -136,10 +138,9 @@
                                         <div class="flex items-center gap-4">
                                             <div
                                                 class="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-1.5 shadow-sm">
-                                                <button @click.stop="votePost(selectedPost, 1)"
-                                                    class="p-2 rounded-lg transition-all active:scale-90"
+                                                <button class="p-2 rounded-lg transition-all active:scale-90"
                                                     :class="selectedPost.my_vote === 'UP' ? 'text-orange-600 bg-orange-100 dark:bg-orange-900/30' : 'text-slate-400 hover:text-orange-500 hover:bg-white dark:hover:bg-slate-700'"
-                                                    title="Upvote">
+                                                    title="Upvote" @click.stop="votePost(selectedPost, 1)">
                                                     <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                                         stroke="currentColor" stroke-width="2.5">
                                                         <path stroke-linecap="round" stroke-linejoin="round"
@@ -155,10 +156,9 @@
                                                         {{ selectedPost.rating }}
                                                     </span>
                                                 </div>
-                                                <button @click.stop="votePost(selectedPost, -1)"
-                                                    class="p-2 rounded-lg transition-all active:scale-90"
+                                                <button class="p-2 rounded-lg transition-all active:scale-90"
                                                     :class="selectedPost.my_vote === 'DOWN' ? 'text-blue-600 bg-blue-100 dark:bg-blue-900/30' : 'text-slate-400 hover:text-blue-500 hover:bg-white dark:hover:bg-slate-700'"
-                                                    title="Downvote">
+                                                    title="Downvote" @click.stop="votePost(selectedPost, -1)">
                                                     <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                                         stroke="currentColor" stroke-width="2.5">
                                                         <path stroke-linecap="round" stroke-linejoin="round"
@@ -192,8 +192,9 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <button @click.stop="downloadFile(selectedPost)"
-                                                class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all">
+                                            <button
+                                                class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all"
+                                                @click.stop="downloadFile(selectedPost)">
                                                 <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                                                     stroke="currentColor">
                                                     <path stroke-linecap="round" stroke-linejoin="round"
@@ -318,14 +319,6 @@
                                 </svg>
                                 <span>Polytechnic of Leiria</span>
                             </div>
-                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
-                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                </svg>
-                                <span>Joined {{ formattedDate }}</span>
-                            </div>
                         </div>
                     </div>
 
@@ -345,7 +338,7 @@
                             }}</div>
                             <div
                                 class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
-                                Papers
+                                Publications
                             </div>
                         </div>
                     </div>
@@ -387,46 +380,12 @@
                                     Recent Publications
                                     <span
                                         class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">
-                                        {{ userProfile.publications.length }} Papers
+                                        {{ userProfile.publications.length }} Publications
                                     </span>
                                 </h2>
                             </div>
 
                             <div class="flex flex-col gap-4">
-                                <div
-                                    class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
-                                    <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
-                                        <div class="relative flex-1 sm:flex-none">
-                                            <input v-model="searchQuery" type="text" placeholder="Search posts..."
-                                                class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
-                                        </div>
-                                        <div class="flex items-center">
-                                            <select v-model="sortBy"
-                                                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
-                                                <option value="date">Date</option>
-                                                <option value="votes">Rating</option>
-                                                <option value="comments">Comments</option>
-                                            </select>
-                                            <button
-                                                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-                                                :title="sortDesc ? 'Descending' : 'Ascending'"
-                                                @click="sortDesc = !sortDesc">
-                                                <span class="inline-block transition-transform duration-200"
-                                                    :class="{ 'rotate-180': !sortDesc }">
-                                                    ▼
-                                                </span>
-                                            </button>
-                                        </div>
-
-                                        <select v-model="filterType"
-                                            class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
-                                            <option value="ALL">All Types</option>
-                                            <option value="CONFERENCE_PAPER">Conference Paper</option>
-                                            <option value="RESEARCH_POST">Research Post</option>
-                                        </select>
-                                    </div>
-                                </div>
-
                                 <div v-if="userProfile.publications.length === 0 && !loading"
                                     class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
 
@@ -449,21 +408,25 @@
 
                                         <button
                                             class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
-                                            @click="isModalOpen = true">
+                                            @click="goToCreatePost()">
                                             <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 4v16m8-8H4" />
                                             </svg>
-                                            Submit your first post
+                                            Submit your first publication
                                         </button>
                                     </div>
                                 </div>
 
                                 <div v-for="post in userProfile.publications" :key="post.id"
-                                    class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
+                                    :class="['relative group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4 overflow-hidden', post.isHidden ? 'opacity-60 bg-gray-50' : 'bg-white']"
                                     @click="fetchPostDetail(post.id)">
 
-
+                                    <div v-if="post.attachedFile"
+                                        class="absolute right-1 bottom-5 opacity-50 group-hover:opacity-100 transition-opacity duration-300">
+                                        <img src="/f.png" alt="attachment"
+                                            class="w-32 h-32 transform rotate-[-45deg] pointer-events-none select-none">
+                                    </div>
 
                                     <div class="flex gap-4">
                                         <div
@@ -482,7 +445,38 @@
                                                     class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
                                                     {{ post.type.replace('_', ' ') }}
                                                 </span>
-                                                <span class="text-xs text-gray-500">{{ post.publishedDate }}</span>
+                                                <span class="text-xs text-gray-500">{{ new
+                                                    Date(post.publicationDate).toLocaleDateString('en-US', {
+                                                        year:
+                                                            'numeric', month: 'long', day: 'numeric'
+                                                    }) }}</span>
+                                                <button v-if="authStore.user.id == post.submitter.id"
+                                                    class="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
+                                                    title="Edit" @click.stop="openEditModal(post)">
+                                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                                    </svg>
+                                                </button>
+                                                <button
+                                                    v-if="authStore.user.id == post.submitter.id || authStore.user.role != 'COLLABORATOR'"
+                                                    class="p-1 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
+                                                    :title="post.isHidden ? 'Unhide' : 'Hide'"
+                                                    @click.stop="toggleHide(post)">
+                                                    <svg width="16px" height="16px" viewBox="0 0 16 16"
+                                                        xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                                                        <path
+                                                            d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
+                                                        <path
+                                                            d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
+
+                                                        <line v-if="post.isHidden" x1="3" y1="3" x2="13" y2="13"
+                                                            stroke="currentColor" stroke-width="1.5"
+                                                            stroke-linecap="round" />
+                                                    </svg>
+                                                </button>
                                             </div>
                                             <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{
                                                 post.title }}</h2>
@@ -490,65 +484,16 @@
                                                 post.authors.join(', ') }}</p>
                                             <div
                                                 class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
-                                                <span>💬 {{ post.comment_count }} Comments</span>
+                                                <span>💬 {{ post.commentCount }} Comments</span>
                                                 <div class="flex gap-2">
                                                     <span v-for="tag in post.tags" :key="tag.id"
                                                         class="text-blue-600 dark:text-blue-400">#{{ tag.name }}</span>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div
-                                            class="flex items-center justify-end gap-2 group-hover/row:opacity-100 transition-opacity duration-200">
-                                            <button
-                                                class="p-2.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
-                                                title="Edit" @click.stop="openEditModal(user)">
-                                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                                </svg>
-                                            </button>
-                                            <button
-                                                class="p-2.5 text-slate-400 hover:text-amber-600 hover:bg-white-50 dark:hover:bg-white-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
-                                                title="Hide" @click.stop="confirmHide(post)">
-                                                <svg width="16px" height="16px" viewBox="0 0 16 16"
-                                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-                                                    class="bi bi-eye">
-                                                    <path
-                                                        d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
-                                                    <path
-                                                        d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
-                                                </svg>
-                                            </button>
-                                        </div>
                                     </div>
                                 </div>
                             </div>
-
-                            <td class="p-6 pr-8 text-right">
-                                <div
-                                    class="flex items-center justify-end gap-2 opacity-0 group-hover/row:opacity-100 transition-opacity duration-200">
-                                    <button
-                                        class="p-2.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
-                                        title="Edit" @click.stop="openEditModal(user)">
-                                        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                        </svg>
-                                    </button>
-                                    <button
-                                        class="p-2.5 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95"
-                                        title="Delete" @click.stop="confirmHide(user)">
-                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            </td>
-
-
                         </div>
 
                         <div v-else-if="activeTab === 'activity'" key="activity" class="space-y-4">
@@ -561,7 +506,7 @@
 
                             <div
                                 class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
-                                <div v-for="(item, index) in activityLog" :key="item.id"
+                                <div v-for="item in activityLog" :key="item.id"
                                     class="p-4 flex gap-4 border-b border-slate-100 dark:border-slate-800 last:border-0 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
 
                                     <div class="flex flex-col items-center min-w-[80px] text-center pt-1">
@@ -604,7 +549,6 @@
 
                         <div v-else-if="activeTab === 'settings'" key="settings"
                             class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
-                            <!-- Header -->
                             <div class="px-6 py-5 border-b border-slate-200 dark:border-slate-800">
                                 <h2 class="text-lg font-semibold text-slate-900 dark:text-white">
                                     Edit Profile
@@ -620,13 +564,13 @@
                                         class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                         Name
                                     </label>
-                                    <input id="name" type="text" v-model="newUsername"
+                                    <input id="name" v-model="newUsername" type="text"
                                         placeholder="Your first name and last name" class="w-full px-4 py-2.5 bg-white dark:bg-slate-800
                border border-slate-300 dark:border-slate-700
                rounded-xl text-slate-900 dark:text-white
                placeholder-slate-400
                focus:ring-2 focus:ring-blue-500 focus:border-blue-500
-               outline-none transition-all" />
+               outline-none transition-all">
                                 </div>
 
                                 <div>
@@ -634,33 +578,34 @@
                                         class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                         Email address
                                     </label>
-                                    <input id="email" type="email" v-model="newEmail" placeholder="you@example.com"
+                                    <input id="email" v-model="newEmail" type="email" placeholder="you@example.com"
                                         class="w-full px-4 py-2.5 bg-white dark:bg-slate-800
                border border-slate-300 dark:border-slate-700
                rounded-xl text-slate-900 dark:text-white
                placeholder-slate-400
                focus:ring-2 focus:ring-blue-500 focus:border-blue-500
-               outline-none transition-all" />
+               outline-none transition-all">
                                     <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                                         Dont worry, Your email is going to be sold to russian hackers.
                                     </p>
                                 </div>
 
-                                <a @click="openResetPassword" class="text-sm text-red dark:text-red-600 hover:underline">
-                                    Reset Password 
+                                <a class="text-sm text-red dark:text-red-600 hover:underline"
+                                    @click="openResetPassword">
+                                    Reset Password
                                 </a>
                             </div>
 
-                            <!-- Footer / Actions -->
                             <div class="px-6 py-4 bg-slate-50 dark:bg-slate-800/50
            border-t border-slate-200 dark:border-slate-800
            flex justify-end">
-                                <button @click="updateProfile" class="inline-flex items-center gap-2
+
+                                <button class="inline-flex items-center gap-2
              bg-blue-600 hover:bg-blue-700
              text-white font-semibold
              px-6 py-2.5 rounded-xl
              shadow-sm transition-all
-             active:scale-95">
+             active:scale-95" @click="updateProfile">
                                     Save changes
                                 </button>
                             </div>
@@ -672,69 +617,32 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from "~/stores/auth-store.js";
 import { storeToRefs } from "pinia";
+import CreatePostModal from '~/components/ui/modal/CreatePostModal.vue';
 
-// --- Config & Store ---
 const config = useRuntimeConfig();
 const api = config.public.apiBase;
 const authStore = useAuthStore();
 const { token } = storeToRefs(authStore);
 const router = useRouter();
+const notifications = useNotificationStore();
 
-// --- Reactive Variables ---
-const availableTags = ref<Tag[]>([]); // For tag select viewBox
-const searchQuery = ref('');
-const sortBy = ref('date'); // 'date' | 'votes' | 'comments'
-const sortDesc = ref(true);
-const filterType = ref('ALL'); // 'ALL' | 'CONFERENCE_PAPER' | 'RESEARCH_POST'
-const page = ref(1);
+const isModalOpen = ref(false);
+const postToEdit = ref(null);
 
-// --- Interfaces ---
 const selectedPost = ref(null);
 const newCommentContent = ref('');
 
 const newUsername = ref('');
 const newEmail = ref('');
 
-interface Tag {
-    id: number;
-    name: string;
-}
-
-// Matches response from EP12 (/api/v1/publications/my-submissions) [cite: 296]
-interface ApiPublication {
-    id: number;
-    title: string;
-    authors: string[];
-    publication_date: string;
-    type: string;
-    rating: number; // Mapping this to citations for the UI
-    comment_count: number;
-    attached_file?: string;
-    tags: Tag[];
-    abstract?: string;
-}
-
-// Matches your UI requirements
-interface UIPublication {
-    id: number;
-    title: string;
-    abstract: string;
-    publishedDate: string;
-    publishedYear: string;
-    citations: number;
-    field: string;
-}
-
-
-// --- State ---
 const loading = ref(true);
-const activeTab = ref('overview'); // State to control visible tab
-const activityLog = ref<ActivityItem[]>([]); // Store history data
+const activeTab = ref('overview');
+const activityLog = ref([]);
 
 const userProfile = ref({
     id: 0,
@@ -743,22 +651,49 @@ const userProfile = ref({
     role: '',
     is_active: false,
     avatarUrl: '',
-    publications: [] as any[]
+    publications: []
 });
 
-// --- API Actions ---
-const getFileName = (fullPath: string) => {
+
+const toggleHide = async (post) => {
+    try {
+        const newState = !post.isHidden;
+
+        await $fetch(`${api}/publications/${post.id}`, {
+            method: 'PATCH',
+            headers: { Authorization: `Bearer ${token.value}` },
+            body: { isHidden: newState }
+        });
+
+        post.isHidden = newState;
+        notifications.success(`Post ${newState ? 'hidden' : 'restored'}`);
+
+    } catch (err) {
+        notifications.error("Failed to update post visibility");
+    }
+};
+
+const openEditModal = (post) => {
+    postToEdit.value = post;
+    isModalOpen.value = true;
+};
+
+const closeModal = () => {
+    isModalOpen.value = false;
+    postToEdit.value = null;
+};
+
+const getFileName = (fullPath) => {
     if (!fullPath) return null;
     return fullPath.split(/[/\\]/).pop();
 };
 
-const downloadFile = async (post: any) => {
+const downloadFile = async (post) => {
     if (!post.attachedFile) return;
     const filename = getFileName(post.attachedFile);
-    const downloadUrl = `${api}/publications/download/${filename}`; // Verifica se este endpoint existe no teu backend
+    const downloadUrl = `${api}/publications/download/${filename}`;
 
     try {
-        // Método simples para download (se o endpoint for público ou lidar com cookies)
         const link = document.createElement('a');
         link.href = downloadUrl;
         link.setAttribute('download', filename || 'download');
@@ -770,21 +705,7 @@ const downloadFile = async (post: any) => {
     }
 };
 
-// Fetch Tags (EP23) - To populate the select box
-async function fetchTags() {
-    if (!token.value) return;
-    try {
-        const data = await $fetch<Tag[]>(`${api}/tags`, {
-            method: 'GET',
-            headers: { Authorization: `Bearer ${token.value}` }
-        });
-        availableTags.value = data || [];
-    } catch (e) {
-        console.error("Failed to fetch tags", e);
-    }
-}
-
-const fetchPostDetail = async (id: number) => {
+const fetchPostDetail = async (id) => {
     loading.value = true;
     try {
         const postDetail = await $fetch(`${api}/publications/${id}`, {
@@ -802,27 +723,15 @@ const fetchPostDetail = async (id: number) => {
     }
 };
 
-// --- Computed ---
 const totalCitations = computed(() =>
     userProfile.value.publications.reduce((sum, pub) => sum + (pub.citations || 0), 0)
 );
 
-const formattedDate = computed(() => {
-    return new Date(userProfile.value.joinDate).toLocaleDateString('en-US', {
-        month: 'long',
-        year: 'numeric'
-    });
-});
-
-// --- API Actions ---
-
-// 1. Fetch Activity Log (EP06)
 async function fetchActivityHistory() {
     if (!token.value) return;
 
     try {
-        // GET /api/v1/me/history
-        const data = await $fetch<ActivityItem[]>(`${api}/me/history`, {
+        const data = await $fetch(`${api}/me/history`, {
             method: 'GET',
             headers: { Authorization: `Bearer ${token.value}` }
         });
@@ -832,7 +741,6 @@ async function fetchActivityHistory() {
     }
 }
 
-// 2. Fetch Main Profile Data (EP03 & EP12)
 async function fetchProfileData() {
     if (!token.value) return;
     loading.value = true;
@@ -845,12 +753,6 @@ async function fetchProfileData() {
         const publicationsData = await $fetch(`${api}/publications/me`, {
             method: 'GET',
             headers: { Authorization: `Bearer ${token.value}` },
-            params: {
-                page: page.value,
-                sort: sortBy.value,
-                order: sortDesc.value ? 'desc' : 'asc',
-                type: filterType.value !== 'ALL' ? filterType.value : undefined
-            }
         });
 
         userProfile.value = {
@@ -863,16 +765,14 @@ async function fetchProfileData() {
             avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(userData.name)}&background=0D8ABC&color=fff`
         };
 
-        userProfile.value.publications = (publicationsData as any[]).map(pub => {
-            const pubDate = new Date(pub.publication_date);
+        userProfile.value.publications = (publicationsData).map(pub => {
+            const pubDate = new Date(pub.publicationDate);
 
             return {
-                ...pub, // Manter todos os campos originais da API
-
+                ...pub,
                 publishedDate: pubDate.toLocaleDateString(),
                 publishedYear: pubDate.getFullYear().toString(),
                 citations: pub.rating || 0,
-
                 authors: pub.authors || [],
                 tags: pub.tags || [],
                 comment_count: pub.comment_count || 0,
@@ -914,33 +814,18 @@ const votePost = async (targetPost, direction) => {
             selectedPost.value.my_vote = response.my_vote;
         }
 
+        notifications.success("Voted successfully");
     } catch (error) {
         console.error("Vote failed", error);
-        alert("Failed to submit vote.");
+        notifications.error("Failed to voted");
     }
 };
 
-const confirmHide = async (post) => {
-    if (!post) return;
-
-    const confirmed = confirm(`Are you sure you want to hide the post titled "${post.title}"?`);
-
-    if (!confirmed) return;
-
-    try {
-        await $fetch(`${api}/publications/${post.id}`, {
-            method: 'DELETE',
-            headers: { Authorization: `Bearer ${token.value}` }
-        });
-
-        userProfile.value.publications = userProfile.value.publications.filter(p => p.id !== post.id);
-
-        alert("Post deleted successfully.");
-
-    } catch (error) {
-        console.error("Delete failed", error);
-        alert("Failed to delete the post.");
-    }
+const goToCreatePost = () => {
+    router.push({
+        path: '/',
+        query: { openCreatePostModal: 'true' }
+    });
 };
 
 const updateProfile = async () => {
@@ -953,7 +838,7 @@ const updateProfile = async () => {
         const email = newEmail.value.trim();
 
         if (name.length === 0 || email.length === 0) {
-            alert("Name and email cannot be empty.");
+            notifications.error("Name and email cannot be empty");
             return;
         }
 
@@ -965,35 +850,26 @@ const updateProfile = async () => {
                 email: email
             }
         });
-        alert("Profile updated successfully. Please log in again.");
+        notifications.success("Profile updated successfully");
         authStore.logout();
 
     } catch (error) {
         console.error("Profile update failed", error);
-        alert("Failed to update profile.");
+        notifications.error("Failed to update profile");
     }
 
     fetchProfileData();
 };
 
-// --- Redirects ---
-const goToCreatePost = () => {
-    console.log("Navigating to create post modal...");
-    router.push({
-        path: '/',
-        query: { openCreatePostModal: 'true' }
-    });
-};
-
 const openResetPassword = () => {
     router.push({ path: '/profile/update-password' });
 };
 
-// --- Lifecycle ---
 onMounted(() => {
     fetchProfileData();
-    fetchActivityHistory(); // Fetch history on mount
+    fetchActivityHistory();
 });
+
 </script>
 
 <style scoped>
diff --git a/public/f.png b/public/f.png
new file mode 100644
index 0000000000000000000000000000000000000000..ecc0d36d644493efeaaf0db48a2503a23134616b
GIT binary patch
literal 17306
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

literal 0
HcmV?d00001


From 6eae88f4e9d8d2875d6f087764fbce6382d0ed24 Mon Sep 17 00:00:00 2001
From: FernandoJVideira <03.pleaser-minster@icloud.com>
Date: Fri, 23 Jan 2026 17:29:04 +0000
Subject: [PATCH 12/18] feat: basic toggle post visibility

---
 app/components/ui/modal/CreatePostModal.vue | 648 ++++++++++----------
 app/pages/admin/users/index.vue             |   2 +-
 app/pages/index.vue                         |  34 +-
 app/pages/profile/index.vue                 |  21 +-
 4 files changed, 343 insertions(+), 362 deletions(-)

diff --git a/app/components/ui/modal/CreatePostModal.vue b/app/components/ui/modal/CreatePostModal.vue
index aa73f73..b72548d 100644
--- a/app/components/ui/modal/CreatePostModal.vue
+++ b/app/components/ui/modal/CreatePostModal.vue
@@ -1,330 +1,320 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from 'vue';
-
-const props = defineProps<{
-    isOpen: boolean;
-    api: string;
-    token: string | null;
-    postToEdit?: any;
-}>();
-
-const emit = defineEmits(['close', 'refresh']);
-
-interface Tag { id: number; name: string; }
-
-const notifications = useNotificationStore();
-const isSubmitting = ref(false);
-const availableTags = ref<Tag[]>([]);
-const errors = reactive({
-    title: '',
-    abstract: ''
-});
-
-const uploadForm = reactive({
-    title: '',
-    abstract: '',
-    type: 'CONFERENCE_PAPER',
-    newAuthorName: '',
-    authors: [] as string[],
-    selectedTagIds: [] as number[],
-    file: null as File | null
-});
-
-// --- Validation Logic ---
-const validate = () => {
-    let isValid = true;
-    errors.title = '';
-    errors.abstract = '';
-
-    if (!uploadForm.title.trim()) {
-        errors.title = 'Title is required';
-        isValid = false;
-    } else if (uploadForm.title.length > 50) {
-        errors.title = 'Title cannot exceed 50 characters';
-        isValid = false;
-    }
-
-    if (!uploadForm.abstract.trim()) {
-        errors.abstract = 'Abstract is required';
-        isValid = false;
-    } else if (uploadForm.abstract.length > 2000) {
-        errors.abstract = 'Abstract cannot exceed 2000 characters';
-        isValid = false;
-    }
-
-    return isValid;
-};
-
-async function fetchTags() {
-    if (!props.token) return;
-    try {
-        const data = await $fetch<Tag[]>(`${props.api}/tags`, {
-            headers: { Authorization: `Bearer ${props.token}` }
-        });
-        availableTags.value = data || [];
-    } catch (e) { console.error("Tags fetch failed", e); }
-}
-
-async function submitPublication() {
-    if (!validate()) return;
-
-    isSubmitting.value = true;
-    try {
-        const metadata = {
-            title: uploadForm.title,
-            authors: uploadForm.authors,
-            type: uploadForm.type,
-            abstract: uploadForm.abstract,
-            tags: uploadForm.selectedTagIds
-        };
-
-        const isEditing = !!props.postToEdit;
-        const url = isEditing
-            ? `${props.api}/publications/${props.postToEdit.id}`
-            : `${props.api}/publications`;
-
-        let requestBody: any;
-        let headers: Record<string, string> = {
-            Authorization: `Bearer ${props.token}`
-        };
-
-        if (!isEditing || uploadForm.file) {
-            const formData = new FormData();
-            if (uploadForm.file) formData.append('file', uploadForm.file);
-            formData.append('data', JSON.stringify(metadata));
-            requestBody = formData;
-        }
-        else {
-            requestBody = metadata;
-        }
-
-        await $fetch(url, {
-            method: isEditing ? 'PATCH' : 'POST',
-            headers,
-            body: requestBody
-        });
-
-        notifications.success(`Publication ${isEditing ? "updated" : "created"}`);
-        emit('refresh');
-        closeModal();
-    } catch (error) {
-        console.error("Submission error:", error);
-        notifications.error("Operation failed");
-    } finally {
-        isSubmitting.value = false;
-    }
-}
-
-function addAuthor() {
-    if (uploadForm.newAuthorName.trim()) {
-        uploadForm.authors.push(uploadForm.newAuthorName.trim());
-        uploadForm.newAuthorName = '';
-    }
-}
-
-function removeAuthor(index: number) { uploadForm.authors.splice(index, 1); }
-
-function handleFileChange(event: Event) {
-    const input = event.target as HTMLInputElement;
-    if (input.files?.[0]) uploadForm.file = input.files[0];
-}
-
-function closeModal() {
-    uploadForm.title = '';
-    uploadForm.abstract = '';
-    uploadForm.type = 'CONFERENCE_PAPER';
-    uploadForm.newAuthorName = '';
-    uploadForm.authors = [];
-    uploadForm.selectedTagIds = [];
-    uploadForm.file = null;
-    emit('close');
-}
-
-watch(() => props.isOpen, (newVal) => {
-    if (newVal && availableTags.value.length === 0) fetchTags();
-    if (!newVal) {
-        errors.title = '';
-        errors.abstract = '';
-    }
-});
-
-watch(() => props.postToEdit, (newPost) => {
-    if (newPost) {
-        uploadForm.title = newPost.title;
-        uploadForm.abstract = newPost.abstractText || newPost.abstract;
-        uploadForm.type = newPost.type;
-        uploadForm.authors = [...newPost?.authors];
-        uploadForm.selectedTagIds = newPost?.tags.map((t: any) => t.id);
-    }
-}, { immediate: true });
-
-const getTagClass = (id: number) => {
-    const colors = [
-        'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-300',
-        'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300',
-        'bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300',
-        'bg-cyan-100 text-cyan-700 border-cyan-200 dark:bg-cyan-900/30 dark:text-cyan-300',
-        'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300',
-        'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300',
-    ];
-    return colors[id % colors.length];
-};
-</script>
-
-<template>
-    <Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0"
-        enter-to-class="opacity-100" leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100"
-        leave-to-class="opacity-0">
-        <div v-if="isOpen" class="fixed inset-0 z-50 overflow-y-auto">
-            <div class="fixed inset-0 bg-slate-900/75 backdrop-blur-sm" @click="closeModal" />
-
-            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-                <div
-                    class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-slate-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl border border-slate-200 dark:border-slate-800">
-
-                    <div
-                        class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
-                        <h3 class="text-lg font-bold text-slate-900 dark:text-white">Submit New Publication</h3>
-                        <button class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"
-                            @click="closeModal">
-                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-
-                    <div class="px-6 py-6 max-h-[80vh] overflow-y-auto space-y-6">
-                        <div
-                            class="flex justify-center rounded-lg border-2 border-dashed border-slate-300 dark:border-slate-700 px-6 py-8 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
-                            <div class="text-center">
-                                <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-                                </svg>
-                                <div
-                                    class="mt-4 flex text-sm leading-6 text-slate-600 dark:text-slate-400 justify-center">
-                                    <label for="file-upload"
-                                        class="relative cursor-pointer rounded-md font-semibold text-blue-600 hover:text-blue-500">
-                                        <span>Upload a file</span>
-                                        <input id="file-upload" type="file" class="sr-only" accept=".pdf,.zip"
-                                            @change="handleFileChange">
-                                    </label>
-                                    <p class="pl-1">or drag and drop</p>
-                                </div>
-                                <p v-if="uploadForm.file"
-                                    class="mt-2 text-sm font-bold text-green-600 dark:text-green-400 text-center">
-                                    Selected: {{ uploadForm.file.name }}
-                                </p>
-                            </div>
-                        </div>
-
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                            <div class="md:col-span-2">
-                                <label
-                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Title</label>
-                                <input v-model="uploadForm.title" type="text"
-                                    :class="[errors.title ? 'border-red-500' : 'border-slate-300 dark:border-slate-700']"
-                                    class="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2.5 px-3 border"
-                                    placeholder="e.g. A New Technique for Data Science">
-                                <p v-if="errors.title" class="mt-1 text-xs text-red-500">{{ errors.title }}</p>
-                            </div>
-                            <div>
-                                <label
-                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Type</label>
-                                <select v-model="uploadForm.type"
-                                    class="w-full rounded-lg border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2.5 px-3 border">
-                                    <option value="CONFERENCE_PAPER">Conference Paper</option>
-                                </select>
-                            </div>
-                        </div>
-
-                        <div>
-                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                                Abstract ({{ uploadForm.abstract.length }}/2000)
-                            </label>
-                            <textarea v-model="uploadForm.abstract" rows="4"
-                                :class="[errors.abstract ? 'border-red-500' : 'border-slate-300 dark:border-slate-700']"
-                                class="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2 px-3 border"
-                                placeholder="Enter a brief summary..." />
-                            <p v-if="errors.abstract" class="mt-1 text-xs text-red-500">{{ errors.abstract }}</p>
-                        </div>
-
-                        <div class="flex flex-col md:flex-row gap-8">
-
-                            <div class="w-full">
-                                <label
-                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Authors</label>
-                                <div class="relative flex items-center">
-                                    <input v-model="uploadForm.newAuthorName" type="text"
-                                        class="w-full rounded-lg border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm text-sm py-2 pl-3 pr-10 border"
-                                        placeholder="Name" @keyup.enter="addAuthor">
-                                    <button type="button"
-                                        class="absolute right-2 p-1 text-blue-600 hover:text-blue-700 transition-colors"
-                                        @click="addAuthor">
-                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                            stroke-width="3">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M12 4.5v15m7.5-7.5h-15" />
-                                        </svg>
-                                    </button>
-                                </div>
-                                <div :class="['flex flex-wrap gap-2', uploadForm.authors.length != 0 ? 'mt-3' : '']">
-                                    <span v-for="(author, index) in uploadForm.authors" :key="index"
-                                        class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-medium border border-slate-200 dark:border-slate-700">
-                                        {{ author }}
-                                        <button @click="removeAuthor(index)">
-                                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M6 18L18 6M6 6l12 12" />
-                                            </svg>
-                                        </button>
-                                    </span>
-                                </div>
-                            </div>
-
-                            <div class="flex-1 md:w-auto min-w-[300px]">
-                                <label
-                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Tags</label>
-                                <div
-                                    class="overflow-y-auto border border-slate-200 dark:border-slate-700 rounded-lg p-3 bg-slate-50/50 dark:bg-slate-800/30 flex flex-wrap gap-2 content-start">
-                                    <label v-if="availableTags.length == 0"
-                                        class="relative rounded-md font-semibold text-blue-600">
-                                        <span>No tags</span>
-                                    </label>
-                                    <button v-for="tag in availableTags" :key="tag.id" type="button" @click="() => {
-                                        const idx = uploadForm.selectedTagIds.indexOf(tag.id);
-                                        if (idx > -1) uploadForm.selectedTagIds.splice(idx, 1);
-                                        else uploadForm.selectedTagIds.push(tag.id);
-                                    }" :class="[
-                                        uploadForm.selectedTagIds.includes(tag.id)
-                                            ? getTagClass(tag.id) + ' border-transparent'
-                                            : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400'
-                                    ]"
-                                        class="px-3 py-1.5 rounded-full border text-xs font-bold uppercase tracking-tight transition-all shadow-sm whitespace-nowrap">
-                                        {{ tag.name }}
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div
-                        class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 flex flex-row-reverse gap-3 border-t border-slate-100 dark:border-slate-800">
-                        <button :disabled="isSubmitting"
-                            class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-bold text-white shadow-sm hover:bg-blue-500 disabled:opacity-50 sm:w-auto transition-all"
-                            @click="submitPublication">
-                            {{ isSubmitting ? 'Uploading...' : 'Submit' }}
-                        </button>
-                        <button
-                            class="inline-flex w-full justify-center rounded-lg bg-white dark:bg-slate-800 px-6 py-2.5 text-sm font-bold text-slate-700 dark:text-slate-300 shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 sm:w-auto transition-all"
-                            @click="closeModal">
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </Transition>
+<script setup>
+import { ref, reactive, watch } from 'vue';
+
+const props = defineProps({
+    isOpen: Boolean,
+    api: String,
+    token: String,
+    postToEdit: Object
+});
+
+const emit = defineEmits(['close', 'refresh']);
+
+const notifications = useNotificationStore();
+const isSubmitting = ref(false);
+const availableTags = ref([]);
+const errors = reactive({
+    title: '',
+    abstract: ''
+});
+
+const uploadForm = reactive({
+    title: '',
+    abstract: '',
+    type: 'CONFERENCE_PAPER',
+    newAuthorName: '',
+    authors: [],
+    selectedTagIds: [],
+    file: null
+});
+
+const validate = () => {
+    let isValid = true;
+    errors.title = '';
+    errors.abstract = '';
+
+    if (!uploadForm.title.trim()) {
+        errors.title = 'Title is required';
+        isValid = false;
+    } else if (uploadForm.title.length > 50) {
+        errors.title = 'Title cannot exceed 50 characters';
+        isValid = false;
+    }
+
+    if (!uploadForm.abstract.trim()) {
+        errors.abstract = 'Abstract is required';
+        isValid = false;
+    } else if (uploadForm.abstract.length > 2000) {
+        errors.abstract = 'Abstract cannot exceed 2000 characters';
+        isValid = false;
+    }
+
+    return isValid;
+};
+
+async function fetchTags() {
+    if (!props.token) return;
+    try {
+        const data = await $fetch(`${props.api}/tags`, {
+            headers: { Authorization: `Bearer ${props.token}` }
+        });
+        availableTags.value = data || [];
+    } catch (e) { console.error("Tags fetch failed", e); }
+}
+
+async function submitPublication() {
+    if (!validate()) return;
+
+    isSubmitting.value = true;
+    try {
+        const metadata = {
+            title: uploadForm.title,
+            authors: uploadForm.authors,
+            type: uploadForm.type,
+            abstract: uploadForm.abstract,
+            tags: uploadForm.selectedTagIds
+        };
+
+        const isEditing = !!props.postToEdit;
+        const url = isEditing
+            ? `${props.api}/publications/${props.postToEdit.id}`
+            : `${props.api}/publications`;
+
+        const headers = {
+            Authorization: `Bearer ${props.token}`
+        };
+
+        const formData = new FormData();
+        if (uploadForm.file) formData.append('file', uploadForm.file);
+        formData.append('data', JSON.stringify(metadata));
+
+        await $fetch(url, {
+            method: isEditing ? 'PATCH' : 'POST',
+            headers,
+            body: formData
+        });
+
+        notifications.success(`Publication ${isEditing ? "updated" : "created"}`);
+        emit('refresh');
+        closeModal();
+    } catch (error) {
+        console.error("Submission error:", error);
+        notifications.error("Operation failed");
+    } finally {
+        isSubmitting.value = false;
+    }
+}
+
+function addAuthor() {
+    if (uploadForm.newAuthorName.trim()) {
+        uploadForm.authors.push(uploadForm.newAuthorName.trim());
+        uploadForm.newAuthorName = '';
+    }
+}
+
+function removeAuthor(index) { uploadForm.authors.splice(index, 1); }
+
+function handleFileChange(event) {
+    const input = event.target;
+    if (input.files?.[0]) uploadForm.file = input.files[0];
+}
+
+function closeModal() {
+    uploadForm.title = '';
+    uploadForm.abstract = '';
+    uploadForm.type = 'CONFERENCE_PAPER';
+    uploadForm.newAuthorName = '';
+    uploadForm.authors = [];
+    uploadForm.selectedTagIds = [];
+    uploadForm.file = null;
+    emit('close');
+}
+
+watch(() => props.isOpen, (newVal) => {
+    if (newVal && availableTags.value.length === 0) fetchTags();
+    if (!newVal) {
+        errors.title = '';
+        errors.abstract = '';
+    }
+});
+
+watch(() => props.postToEdit, (newPost) => {
+    if (newPost) {
+        uploadForm.title = newPost.title;
+        uploadForm.abstract = newPost.abstractText || newPost.abstract;
+        uploadForm.type = newPost.type;
+        uploadForm.authors = [...newPost?.authors];
+        uploadForm.selectedTagIds = newPost?.tags.map((t) => t.id);
+    }
+}, { immediate: true });
+
+const getTagClass = (id) => {
+    const colors = [
+        'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-300',
+        'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300',
+        'bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300',
+        'bg-cyan-100 text-cyan-700 border-cyan-200 dark:bg-cyan-900/30 dark:text-cyan-300',
+        'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300',
+        'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300',
+    ];
+    return colors[id % colors.length];
+};
+</script>
+
+<template>
+    <Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0"
+        enter-to-class="opacity-100" leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100"
+        leave-to-class="opacity-0">
+        <div v-if="props.isOpen" class="fixed inset-0 z-50 overflow-y-auto">
+            <div class="fixed inset-0 bg-slate-900/75 backdrop-blur-sm" @click="closeModal" />
+
+            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                <div
+                    class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-slate-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl border border-slate-200 dark:border-slate-800">
+
+                    <div
+                        class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
+                        <h3 class="text-lg font-bold text-slate-900 dark:text-white">Submit New Publication</h3>
+                        <button class="text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"
+                            @click="closeModal">
+                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+
+                    <div class="px-6 py-6 max-h-[80vh] overflow-y-auto space-y-6">
+                        <div
+                            class="flex justify-center rounded-lg border-2 border-dashed border-slate-300 dark:border-slate-700 px-6 py-8 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
+                            <div class="text-center">
+                                <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                                </svg>
+                                <div
+                                    class="mt-4 flex text-sm leading-6 text-slate-600 dark:text-slate-400 justify-center">
+                                    <label for="file-upload"
+                                        class="relative cursor-pointer rounded-md font-semibold text-blue-600 hover:text-blue-500">
+                                        <span>Upload a file</span>
+                                        <input id="file-upload" type="file" class="sr-only" accept=".pdf,.zip"
+                                            @change="handleFileChange">
+                                    </label>
+                                    <p class="pl-1">or drag and drop</p>
+                                </div>
+                                <p v-if="uploadForm.file"
+                                    class="mt-2 text-sm font-bold text-green-600 dark:text-green-400 text-center">
+                                    Selected: {{ uploadForm.file.name }}
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                            <div class="md:col-span-2">
+                                <label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Title</label>
+                                <input v-model="uploadForm.title" type="text"
+                                    :class="[errors.title ? 'border-red-500' : 'border-slate-300 dark:border-slate-700']"
+                                    class="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2.5 px-3 border"
+                                    placeholder="e.g. A New Technique for Data Science">
+                                <p v-if="errors.title" class="mt-1 text-xs text-red-500">{{ errors.title }}</p>
+                            </div>
+                            <div>
+                                <label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Type</label>
+                                <select v-model="uploadForm.type"
+                                    class="w-full rounded-lg border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2.5 px-3 border">
+                                    <option value="CONFERENCE_PAPER">Conference Paper</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+                                Abstract ({{ uploadForm.abstract.length }}/2000)
+                            </label>
+                            <textarea v-model="uploadForm.abstract" rows="4"
+                                :class="[errors.abstract ? 'border-red-500' : 'border-slate-300 dark:border-slate-700']"
+                                class="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2 px-3 border"
+                                placeholder="Enter a brief summary..." />
+                            <p v-if="errors.abstract" class="mt-1 text-xs text-red-500">{{ errors.abstract }}</p>
+                        </div>
+
+                        <div class="flex flex-col md:flex-row gap-8">
+
+                            <div class="w-full">
+                                <label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Authors</label>
+                                <div class="relative flex items-center">
+                                    <input v-model="uploadForm.newAuthorName" type="text"
+                                        class="w-full rounded-lg border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm text-sm py-2 pl-3 pr-10 border"
+                                        placeholder="Name" @keyup.enter="addAuthor">
+                                    <button type="button"
+                                        class="absolute right-2 p-1 text-blue-600 hover:text-blue-700 transition-colors"
+                                        @click="addAuthor">
+                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                                            stroke-width="3">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M12 4.5v15m7.5-7.5h-15" />
+                                        </svg>
+                                    </button>
+                                </div>
+                                <div :class="['flex flex-wrap gap-2', uploadForm.authors.length != 0 ? 'mt-3' : '']">
+                                    <span v-for="(author, index) in uploadForm.authors" :key="index"
+                                        class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-medium border border-slate-200 dark:border-slate-700">
+                                        {{ author }}
+                                        <button @click="removeAuthor(index)">
+                                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M6 18L18 6M6 6l12 12" />
+                                            </svg>
+                                        </button>
+                                    </span>
+                                </div>
+                            </div>
+
+                            <div class="flex-1 md:w-auto min-w-[300px]">
+                                <label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Tags</label>
+                                <div
+                                    class="overflow-y-auto border border-slate-200 dark:border-slate-700 rounded-lg p-3 bg-slate-50/50 dark:bg-slate-800/30 flex flex-wrap gap-2 content-start">
+                                    <label v-if="availableTags.length == 0"
+                                        class="relative rounded-md font-semibold text-blue-600">
+                                        <span>No tags</span>
+                                    </label>
+                                    <button v-for="tag in availableTags" :key="tag.id" type="button" :class="[
+                                        uploadForm.selectedTagIds.includes(tag.id)
+                                            ? getTagClass(tag.id) + ' border-transparent'
+                                            : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400'
+                                    ]" class="px-3 py-1.5 rounded-full border text-xs font-bold uppercase tracking-tight transition-all shadow-sm whitespace-nowrap"
+                                        @click="() => {
+                                            const idx = uploadForm.selectedTagIds.indexOf(tag.id);
+                                            if (idx > -1) uploadForm.selectedTagIds.splice(idx, 1);
+                                            else uploadForm.selectedTagIds.push(tag.id);
+                                        }">
+                                        {{ tag.name }}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 flex flex-row-reverse gap-3 border-t border-slate-100 dark:border-slate-800">
+                        <button :disabled="isSubmitting"
+                            class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-bold text-white shadow-sm hover:bg-blue-500 disabled:opacity-50 sm:w-auto transition-all"
+                            @click="submitPublication">
+                            {{ isSubmitting ? 'Uploading...' : 'Submit' }}
+                        </button>
+                        <button
+                            class="inline-flex w-full justify-center rounded-lg bg-white dark:bg-slate-800 px-6 py-2.5 text-sm font-bold text-slate-700 dark:text-slate-300 shadow-sm ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 sm:w-auto transition-all"
+                            @click="closeModal">
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Transition>
 </template>
\ No newline at end of file
diff --git a/app/pages/admin/users/index.vue b/app/pages/admin/users/index.vue
index 52f568d..87dc9a6 100644
--- a/app/pages/admin/users/index.vue
+++ b/app/pages/admin/users/index.vue
@@ -497,7 +497,7 @@ const config = useRuntimeConfig();
 const api = config.public.apiBase;
 const authStore = useAuthStore();
 const { token } = storeToRefs(authStore);
-const notifications = useNotifications();
+const notifications = useNotificationStore();
 
 const users = ref([]);
 const loading = ref(false);
diff --git a/app/pages/index.vue b/app/pages/index.vue
index c526c27..c4aec5f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -127,26 +127,20 @@
           <TransitionGroup v-else appear enter-active-class="transition duration-500 ease-out"
             enter-from-class="translate-y-4 opacity-0" enter-to-class="translate-y-0 opacity-100">
             <div v-for="post in filteredPosts" :key="post.id"
-              :class="['relative group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4 overflow-hidden', post.isHidden ? 'opacity-60 bg-gray-50' : 'bg-white']"
+              :class="['relative group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4 overflow-hidden', post.hidden ? 'opacity-60 bg-gray-50' : 'bg-white']"
               @click="fetchPostDetail(post.id)">
 
-              <div v-if="post.attachedFile"
-                class="absolute right-1 bottom-5 opacity-50 group-hover:opacity-100 transition-opacity duration-300">
-                <img src="/f.png" alt="attachment"
-                  class="w-32 h-32 transform rotate-[-45deg] pointer-events-none select-none">
-              </div>
-
               <div class="flex gap-4">
                 <div
                   class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
 
                   <button class="hover:text-blue-500 transition-colors text-lg"
-                    :class="{ 'text-orange-500': post.my_vote === 'UP' }" @click.stop="votePost(post, 1)">▲</button>
+                    @click.stop="votePost(post, 1)">▲</button>
 
                   <span class="text-xs font-bold">{{ post.rating }}</span>
 
                   <button class="hover:text-red-500 transition-colors text-lg"
-                    :class="{ 'text-blue-500': post.my_vote === 'DOWN' }" @click.stop="votePost(post, -1)">▼</button>
+                    @click.stop="votePost(post, -1)">▼</button>
                 </div>
 
                 <div class="flex-1">
@@ -159,17 +153,9 @@
                       year:
                         'numeric', month: 'long', day: 'numeric'
                     }) }}</span>
-                    <button v-if="authStore.user.id == post.submitter.id"
-                      class="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
-                      title="Edit" @click.stop="openEditModal(post)">
-                      <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                      </svg>
-                    </button>
-                    <button v-if="authStore.user.id == post.submitter.id || authStore.user.role != 'COLLABORATOR'"
+                    <button v-if="authStore.user.role != 'COLLABORATOR'"
                       class="p-1 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
-                      :title="post.isHidden ? 'Unhide' : 'Hide'" @click.stop="toggleHide(post)">
+                      :title="post.hidden ? 'Unhide' : 'Hide'" @click.stop="toggleHide(post)">
                       <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor">
                         <path
@@ -177,7 +163,7 @@
                         <path
                           d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
 
-                        <line v-if="post.isHidden" x1="3" y1="3" x2="13" y2="13" stroke="currentColor"
+                        <line v-if="post.hidden" x1="3" y1="3" x2="13" y2="13" stroke="currentColor"
                           stroke-width="1.5" stroke-linecap="round" />
                       </svg>
                     </button>
@@ -482,15 +468,15 @@ const checkQueryForModal = () => {
 
 const toggleHide = async (post) => {
   try {
-    const newState = !post.isHidden;
+    const newState = !post.hidden;
 
-    await $fetch(`${api}/publications/${post.id}`, {
+    await $fetch(`${api}/publications/${post.id}/hide`, {
       method: 'PATCH',
       headers: { Authorization: `Bearer ${token.value}` },
-      body: { isHidden: newState }
+      body: { is_hidden: newState }
     });
 
-    post.isHidden = newState;
+    post.hidden = newState;
     notifications.success(`Post ${newState ? 'hidden' : 'restored'}`);
 
   } catch (err) {
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index be5a498..97a4664 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -618,7 +618,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from "~/stores/auth-store.js";
 import { storeToRefs } from "pinia";
@@ -765,6 +765,11 @@ async function fetchProfileData() {
             avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(userData.name)}&background=0D8ABC&color=fff`
         };
 
+        if (authStore.user) {
+            authStore.user.name = userData.name;
+            authStore.user.email = userData.email;
+        }
+
         userProfile.value.publications = (publicationsData).map(pub => {
             const pubDate = new Date(pub.publicationDate);
 
@@ -837,21 +842,21 @@ const updateProfile = async () => {
         const name = newUsername.value.trim();
         const email = newEmail.value.trim();
 
-        if (name.length === 0 || email.length === 0) {
-            notifications.error("Name and email cannot be empty");
-            return;
-        }
 
         await $fetch(`${api}/users/me`, {
             method: 'PATCH',
             headers: { Authorization: `Bearer ${token.value}` },
             body: {
-                name: name,
-                email: email
+                name: name || userProfile.value.name,
+                email: email || userProfile.value.email
             }
         });
         notifications.success("Profile updated successfully");
-        authStore.logout();
+
+        if (authStore.user) {
+            authStore.user.name = name || userProfile.value.name;
+            authStore.user.email = email || userProfile.value.email;
+        }
 
     } catch (error) {
         console.error("Profile update failed", error);

From 9fff07c67405e2fc70fc160767f07674cf227bca Mon Sep 17 00:00:00 2001
From: FernandoJVideira <03.pleaser-minster@icloud.com>
Date: Fri, 23 Jan 2026 18:02:34 +0000
Subject: [PATCH 13/18] fix: added back edit post button

---
 app/pages/index.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index c4aec5f..bade6eb 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -153,6 +153,14 @@
                       year:
                         'numeric', month: 'long', day: 'numeric'
                     }) }}</span>
+                    <button v-if="authStore.user.id == post.submitter.id"
+                      class="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
+                      title="Edit" @click.stop="openEditModal(post)">
+                      <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                    </button>
                     <button v-if="authStore.user.role != 'COLLABORATOR'"
                       class="p-1 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
                       :title="post.hidden ? 'Unhide' : 'Hide'" @click.stop="toggleHide(post)">

From 8ce343a1951da7143d522a54f3cb3b9b63daf248 Mon Sep 17 00:00:00 2001
From: FernandoJVideira <03.pleaser-minster@icloud.com>
Date: Fri, 23 Jan 2026 20:03:32 +0000
Subject: [PATCH 14/18] fix: added more file types

---
 app/components/ui/modal/CreatePostModal.vue | 5 +++++
 app/pages/index.vue                         | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/app/components/ui/modal/CreatePostModal.vue b/app/components/ui/modal/CreatePostModal.vue
index b72548d..c12e85f 100644
--- a/app/components/ui/modal/CreatePostModal.vue
+++ b/app/components/ui/modal/CreatePostModal.vue
@@ -226,6 +226,11 @@ const getTagClass = (id) => {
                                 <select v-model="uploadForm.type"
                                     class="w-full rounded-lg border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm focus:ring-blue-500 sm:text-sm py-2.5 px-3 border">
                                     <option value="CONFERENCE_PAPER">Conference Paper</option>
+                                    <option value="RESEARCH_POST">Research Post</option>
+                                    <option value="THESIS">Thesis</option>
+                                    <option value="ARTICLE">Article</option>
+                                    <option value="REPORT">Report</option>
+                                    <option value="OTHER">Other</option>
                                 </select>
                             </div>
                         </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index bade6eb..1f202cb 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -81,6 +81,10 @@
                 <option value="ALL">All Types</option>
                 <option value="CONFERENCE_PAPER">Conference Paper</option>
                 <option value="RESEARCH_POST">Research Post</option>
+                <option value="THESIS">Thesis</option>
+                <option value="ARTICLE">Article</option>
+                <option value="REPORT">Report</option>
+                <option value="OTHER">Other</option>
               </select>
             </div>
 

From e38613ca6baaf9b1938b2b74dfd70042065717e9 Mon Sep 17 00:00:00 2001
From: Edd <edd.ddev@gmail.com>
Date: Fri, 23 Jan 2026 20:04:46 +0000
Subject: [PATCH 15/18] final frontend

---
 app/components/post/PostDetail.vue          | 395 ++++++++++++++++++++
 app/components/ui/modal/CreatePostModal.vue |   2 +-
 app/pages/admin/users/index.vue             |  24 +-
 app/pages/auth/login.vue                    |   2 -
 app/pages/index.vue                         | 260 +------------
 app/pages/profile/index.vue                 | 346 +++--------------
 6 files changed, 466 insertions(+), 563 deletions(-)
 create mode 100644 app/components/post/PostDetail.vue

diff --git a/app/components/post/PostDetail.vue b/app/components/post/PostDetail.vue
new file mode 100644
index 0000000..782121d
--- /dev/null
+++ b/app/components/post/PostDetail.vue
@@ -0,0 +1,395 @@
+<template>
+    <div class="animate-fade-in-up">
+        <button
+            class="my-6 mx-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
+            @click="$emit('back')">
+            ← BACK TO FEED
+        </button>
+
+        <article class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-2xl shadow-xl overflow-hidden">
+            <div
+                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">
+                    <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('_', ' ') }}
+                    </span>
+                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
+                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        {{ new Date(post.publicationDate).toLocaleDateString('en-US', {
+                            year:
+                                'numeric', month: 'long', day: 'numeric'
+                        }) }}
+                    </span>
+                </div>
+
+                <div class="flex gap-6 mb-6">
+                    <div>
+                        <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Rating</span>
+                        <div
+                            class="flex items-center gap-2 px-4 py-1.5 bg-white/80 dark:bg-gray-800/80 backdrop-blur shadow-sm rounded-xl border border-gray-200 dark:border-gray-700">
+                            <span class="text-xl font-black text-blue-600 dark:text-blue-400">{{ post.rating }}</span>
+                        </div>
+                    </div>
+                    <h1
+                        class="content-end text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight">
+                        {{
+                            post.title }}</h1>
+                </div>
+
+                <div
+                    class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
+
+                    <div>
+                        <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Authors
+                        </h4>
+                        <div class="flex flex-wrap flex-col gap-2">
+                            <span v-for="(author, idx) in post.authors" :key="idx"
+                                class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200">
+                                <span
+                                    class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 flex items-center justify-center text-xs">
+                                    {{ author.charAt(0) }}
+                                </span>
+                                {{ author }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div>
+                        <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Submitted
+                            By</h4>
+                        <div class="flex items-center gap-3">
+                            <div
+                                class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
+                                {{ post.submitter.name.charAt(0) }}
+                            </div>
+                            <div>
+                                <div class="text-sm font-bold text-gray-900 dark:text-white">{{
+                                    post.submitter.name }}</div>
+                                <div class="text-xs text-gray-500">{{ post.submitter.role }} • {{
+                                    post.submitter.email }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="p-8">
+                    <div class="mb-10">
+                        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                            <svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M4 6h16M4 12h16M4 18h7" />
+                            </svg>
+                            Abstract
+                        </h3>
+                        <p
+                            class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-justify whitespace-pre-line break-normal">
+                            {{ post.abstractText }}
+                        </p>
+                    </div>
+
+                    <div
+                        class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-8 border-b dark:border-gray-800">
+                        <div v-if="post.tags && post.tags.length > 0">
+                            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Tags</h4>
+                            <div class="flex flex-wrap gap-2">
+                                <span v-for="tag in post.tags" :key="tag.id"
+                                    class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-medium border border-gray-200 dark:border-gray-700">
+                                    #{{ tag.name }}
+                                </span>
+                            </div>
+                        </div>
+                        <div v-else class="text-sm text-gray-400 italic">No tags assigned</div>
+                    </div>
+
+                    <div v-if="post.attachedFile"
+                        class="mb-10 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:border-blue-400 transition-colors group">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-4">
+                                <div
+                                    class="p-3 bg-red-100 text-red-600 rounded-lg group-hover:scale-110 transition-transform">
+                                    <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                                    </svg>
+                                </div>
+                                <div>
+                                    <div class="font-bold text-gray-900 dark:text-white mb-0.5">Attachment
+                                        Available</div>
+                                    <div class="text-xs text-gray-500 font-mono truncate max-w-[200px] md:max-w-md">
+                                        {{ getFileName(post.attachedFile) }}
+                                    </div>
+                                </div>
+                            </div>
+                            <button
+                                class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all"
+                                @click="downloadFile(post)">
+                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                                </svg>
+                                Download
+                            </button>
+                        </div>
+                    </div>
+
+                    <section class="border-t dark:border-gray-800 pt-8">
+                        <div class="flex justify-between items-center mb-6">
+                            <h3 class="text-xl font-bold flex items-center gap-2">
+                                Comments <span class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full">{{
+                                    totalComments }}</span>
+                            </h3>
+                            <button
+                                class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all active:scale-95 flex items-center justify-center group"
+                                title="New Post" @click="showCommentInput = !showCommentInput">
+                                <svg viewBox="0 0 24 24" class="w-5 h-5 fill-none stroke-current stroke-[2.5]"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <line x1="12" y1="5" x2="12" y2="19" />
+                                    <line x1="5" y1="12" x2="19" y2="12" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        <Transition enter-active-class="transition duration-200 ease-out"
+                            enter-from-class="transform scale-95 opacity-0"
+                            enter-to-class="transform scale-100 opacity-100"
+                            leave-active-class="transition duration-150 ease-in"
+                            leave-from-class="transform scale-100 opacity-100"
+                            leave-to-class="transform scale-95 opacity-0">
+                            <div v-if="showCommentInput" class="mb-8 space-y-3">
+                                <textarea v-model="commentText" rows="3"
+                                    class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded-lg outline-none text-sm focus:ring-2 focus:ring-blue-500"
+                                    placeholder="What are your thoughts?" />
+                                <div class="flex justify-end">
+                                    <button :disabled="!commentText.trim() || submitting"
+                                        class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg transition-all"
+                                        @click="handleCommentSubmit">
+                                        {{ submitting ? 'POSTING...' : 'COMMENT' }}
+                                    </button>
+                                </div>
+                            </div>
+                        </Transition>
+
+                        <div class="space-y-6">
+                            <div v-for="comment in comments" :key="comment.id" class="flex gap-4">
+                                <div
+                                    class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 shrink-0 flex items-center justify-center text-[10px] font-bold">
+                                    {{ comment.author.name.charAt(0) }}
+                                </div>
+                                <div class="flex-1">
+                                    <div
+                                        class="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-xl rounded-tl-none border dark:border-gray-800">
+                                        <div class="flex justify-between mb-2">
+                                            <div>
+                                                <span class="mr-3 font-bold text-sm text-blue-600 dark:text-blue-400">{{
+                                                    comment.author.name }}</span>
+                                                <button v-if="authStore.user.id == comment.author.id"
+                                                    class="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
+                                                    title="Edit" @click.stop="startEdit(comment)">
+                                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                                    </svg>
+                                                </button>
+                                                <button
+                                                    v-if="authStore.user.id == comment.author.id || authStore.user.role != 'COLLABORATOR'"
+                                                    class="p-1 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
+                                                    :title="post.hidden ? 'Unhide' : 'Hide'"
+                                                    @click.stop="toggleHide(comment)">
+                                                    <svg width="16px" height="16px" viewBox="0 0 16 16"
+                                                        xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                                                        <path
+                                                            d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
+                                                        <path
+                                                            d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
+
+                                                        <line v-if="comment.hidden" x1="3" y1="3" x2="13" y2="13"
+                                                            stroke="currentColor" stroke-width="1.5"
+                                                            stroke-linecap="round" />
+                                                    </svg>
+                                                </button>
+                                            </div>
+
+                                            <span class="text-[10px] text-gray-400 uppercase">{{ new
+                                                Date(comment.createdAt).toLocaleDateString('en-US', {
+                                                    year:
+                                                        'numeric', month: 'long', day: 'numeric'
+                                                }) }}</span>
+                                        </div>
+                                        <div class="mt-2">
+                                            <div v-if="editingCommentId === comment.id" class="space-y-2">
+                                                <textarea v-model="editText"
+                                                    class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
+                                                    rows="2" />
+                                                <div class="flex gap-2 justify-end">
+                                                    <button class="text-xs font-bold text-gray-500 hover:text-gray-700"
+                                                        @click="cancelEdit">CANCEL</button>
+                                                    <button class="text-xs font-bold text-blue-600 hover:text-blue-700"
+                                                        :disabled="submitting" @click="handleEditSubmit(comment)">
+                                                        {{ submitting ? 'SAVING...' : 'SAVE' }}
+                                                    </button>
+                                                </div>
+                                            </div>
+
+                                            <p v-else
+                                                :class="['text-sm leading-relaxed whitespace-pre-wrap break-normal', comment.hidden ? 'text-gray-400 italic opacity-50' : 'text-gray-700 dark:text-gray-300']">
+                                                {{ comment.hidden ? 'This comment has been hidden.' : comment.content }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="h-20 flex flex-col items-center justify-center">
+                                <p v-if="comments.length === 0 && !loadingComments"
+                                    class="text-sm text-gray-500 italic py-4">No comments yet. Be the first!</p>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </article>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    post: Object,
+    api: String,
+    token: String
+});
+
+const emit = defineEmits(['back', 'comment-added']);
+
+const authStore = useAuthStore();
+const notifications = useNotificationStore();
+const comments = ref([]);
+const commentText = ref('');
+const submitting = ref(false);
+const loadingComments = ref(false);
+const showCommentInput = ref(false);
+const totalComments = ref(0);
+const editingCommentId = ref(null);
+const editText = ref('');
+
+const toggleHide = async (comment) => {
+    try {
+        console.log(comment)
+        comment.hidden = !comment.hidden;
+
+        await $fetch(`${props.api}/comments/${comment.id}`, {
+            method: 'PATCH',
+            headers: { Authorization: `Bearer ${props.token}` },
+        });
+
+        notifications.success(comment.hidden ? "Comment hidden" : "Comment visible");
+    } catch (err) {
+        comment.hidden = !comment.hidden;
+        notifications.error("Failed to update comment visibility");
+    }
+};
+
+const startEdit = (comment) => {
+    editingCommentId.value = comment.id;
+    editText.value = comment.content;
+};
+
+const cancelEdit = () => {
+    editingCommentId.value = null;
+    editText.value = '';
+};
+
+const handleEditSubmit = async (comment) => {
+    if (!editText.value.trim() || submitting.value) return;
+
+    submitting.value = true;
+    try {
+        const updatedComment = await $fetch(`${props.api}/comments/${comment.id}`, {
+            method: 'PUT',
+            headers: { Authorization: `Bearer ${props.token}` },
+            body: { content: editText.value }
+        });
+
+        comment.content = updatedComment.content;
+        editingCommentId.value = null;
+        notifications.success("Comment updated!");
+    } catch (err) {
+        notifications.error("Failed to edit comment");
+    } finally {
+        submitting.value = false;
+    }
+};
+
+const fetchComments = async () => {
+    if (loadingComments.value) return;
+    loadingComments.value = true;
+    try {
+        const data = await $fetch(`${props.api}/publications/${props.post.id}/comments`, {
+            headers: { Authorization: `Bearer ${props.token}` }
+        });
+
+        comments.value = data.items || data;
+        totalComments.value = data.total || comments.value.length;
+    } catch (err) {
+        console.error("Comments fetch error", err);
+    } finally {
+        loadingComments.value = false;
+    }
+};
+
+const handleCommentSubmit = async () => {
+    submitting.value = true;
+    try {
+        const newComment = await $fetch(`${props.api}/publications/${props.post.id}/comments`, {
+            method: 'POST',
+            headers: { Authorization: `Bearer ${props.token}` },
+            body: { content: commentText.value }
+        });
+
+        comments.value.unshift(newComment);
+        totalComments.value++;
+        commentText.value = '';
+        showCommentInput.value = false;
+        emit('comment-added');
+        notifications.success("Comment posted!");
+    } catch (err) {
+        notifications.error("Failed to post comment");
+    } finally {
+        submitting.value = false;
+    }
+};
+
+const getFileName = (fullPath) => {
+    if (!fullPath) return null;
+    return fullPath.split(/[/\\]/).pop();
+};
+
+const downloadFile = async () => {
+    if (!props.post.attachedFile) return;
+
+    const filename = getFileName(props.post.attachedFile);
+
+    const downloadUrl = `${props.api}/publications/download/${filename}`;
+
+    try {
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.setAttribute('download', filename);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    } catch (e) {
+        notifications.error("Could not download file.");
+    }
+};
+
+onMounted(() => {
+    fetchComments();
+});
+</script>
\ No newline at end of file
diff --git a/app/components/ui/modal/CreatePostModal.vue b/app/components/ui/modal/CreatePostModal.vue
index b72548d..6a44923 100644
--- a/app/components/ui/modal/CreatePostModal.vue
+++ b/app/components/ui/modal/CreatePostModal.vue
@@ -232,7 +232,7 @@ const getTagClass = (id) => {
 
                         <div>
                             <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                                Abstract ({{ uploadForm.abstract.length }}/2000)
+                                Abstract ({{ uploadForm.abstract.length }}/255)
                             </label>
                             <textarea v-model="uploadForm.abstract" rows="4"
                                 :class="[errors.abstract ? 'border-red-500' : 'border-slate-300 dark:border-slate-700']"
diff --git a/app/pages/admin/users/index.vue b/app/pages/admin/users/index.vue
index 87dc9a6..4715795 100644
--- a/app/pages/admin/users/index.vue
+++ b/app/pages/admin/users/index.vue
@@ -202,11 +202,9 @@
                                         <span
                                             class="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-bold border capitalize"
                                             :class="{
-                                                'bg-purple-100 border-purple-200 text-purple-700 dark:bg-purple-900/20 dark:border-purple-800 dark:text-purple-300': user.role === 'ADMIN',
-                                                'bg-blue-100 border-blue-200 text-blue-700 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-300': user.role === 'TEACHER',
-                                                'bg-emerald-100 border-emerald-200 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-300': user.role === 'RESEARCHER',
-                                                'bg-amber-100 border-amber-200 text-amber-700 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-300': user.role === 'COLLABORATOR',
-                                                'bg-slate-100 border-slate-200 text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300': user.role === 'STUDENT'
+                                                'bg-purple-100 border-purple-200 text-purple-700 dark:bg-purple-900/20 dark:border-purple-800 dark:text-purple-300': user.role === 'ADMINISTRATOR',
+                                                'bg-emerald-100 border-emerald-200 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-300': user.role === 'MODERATOR',
+                                                'bg-amber-100 border-amber-200 text-amber-700 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-300': user.role === 'COLLABORATOR'
                                             }">
                                             {{ user.role.toLowerCase() }}
                                         </span>
@@ -276,7 +274,7 @@
                                         <div
                                             class="w-1.5 h-8 bg-gradient-to-b from-blue-600 to-indigo-600 rounded-full" />
                                         <h3 class="text-xl font-bold text-slate-900 dark:text-white">{{ isEditing ?
-                                            'Edit User Details' : 'Create New User' }}</h3>
+                                            'Edit User Details' : 'Create' }}</h3>
                                     </div>
                                     <button class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
                                         @click="closeModal"><svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
@@ -313,10 +311,8 @@
                                             <div class="relative">
                                                 <select v-model="formData.role"
                                                     class="w-full appearance-none px-4 py-3 rounded-xl border-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-all cursor-pointer">
-                                                    <option value="STUDENT">Student</option>
-                                                    <option value="TEACHER">Teacher</option>
                                                     <option value="COLLABORATOR">Collaborator</option>
-                                                    <option value="RESEARCHER">Researcher</option>
+                                                    <option value="MODERATOR">Moderator</option>
                                                     <option value="ADMIN">Admin</option>
                                                 </select>
                                                 <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 pointer-events-none"
@@ -372,7 +368,7 @@
                                     <button
                                         class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg transition-all"
                                         @click="handleSubmit">{{
-                                            isEditing ? 'Save Changes' : 'Create Account' }}</button>
+                                            isEditing ? 'Save Changes' : 'Create' }}</button>
                                     <button
                                         class="px-8 py-3 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold rounded-xl transition-all"
                                         @click="closeModal">Cancel</button>
@@ -462,7 +458,7 @@
                                                         class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">{{
                                                             item.action.replace('_', ' ') }}</span>
                                                     <span class="text-xs text-slate-400 font-medium">{{ item.target_type
-                                                        }} #{{ item.target_id }}</span>
+                                                    }} #{{ item.target_id }}</span>
                                                 </div>
                                                 <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{
                                                     item.details }}</p>
@@ -558,7 +554,7 @@ const formData = reactive({
     name: '',
     email: '',
     password: '',
-    role: 'STUDENT',
+    role: 'COLLABORATOR',
     is_active: true
 });
 
@@ -572,7 +568,7 @@ const filteredUsers = computed(() => {
 });
 
 const activeCount = computed(() => users.value.filter(u => u.is_active).length);
-const adminCount = computed(() => users.value.filter(u => u.role === 'ADMIN').length);
+const adminCount = computed(() => users.value.filter(u => u.role === 'ADMINISTRATOR').length);
 
 const fetchUsers = async () => {
     loading.value = true;
@@ -701,7 +697,7 @@ const resetForm = () => {
     formData.name = '';
     formData.email = '';
     formData.password = '';
-    formData.role = 'STUDENT';
+    formData.role = 'COLLABORATOR';
     formData.is_active = true;
 };
 
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index fc10139..a7421da 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -91,7 +91,6 @@ async function handleLogin() {
       body: loginFormData,
       onResponse({ response }) {
         if (response.status === 200) {
-          console.log(response)
           token.value = response._data.token;
           user.value = response._data.user;
           if (response._data.user.mustChangePassword === true) {
@@ -102,7 +101,6 @@ async function handleLogin() {
         }
       },
       onResponseError({ response }) {
-        console.log(response.status)
         if (response.status === 401) {
           globalError.value = "Invalid email or password.";
         } else {
diff --git a/app/pages/index.vue b/app/pages/index.vue
index bade6eb..d738c54 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -135,12 +135,12 @@
                   class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
 
                   <button class="hover:text-blue-500 transition-colors text-lg"
-                    @click.stop="votePost(post, 1)">▲</button>
+                    :class="{ 'text-orange-500': post.my_vote === 'UP' }" @click.stop="votePost(post, 1)">▲</button>
 
                   <span class="text-xs font-bold">{{ post.rating }}</span>
 
                   <button class="hover:text-red-500 transition-colors text-lg"
-                    @click.stop="votePost(post, -1)">▼</button>
+                    :class="{ 'text-blue-500': post.my_vote === 'DOWN' }" @click.stop="votePost(post, -1)">▼</button>
                 </div>
 
                 <div class="flex-1">
@@ -161,7 +161,7 @@
                           d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                       </svg>
                     </button>
-                    <button v-if="authStore.user.role != 'COLLABORATOR'"
+                    <button v-if="authStore.user.id == post.submitter.id || authStore.user.role != 'COLLABORATOR'"
                       class="p-1 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
                       :title="post.hidden ? 'Unhide' : 'Hide'" @click.stop="toggleHide(post)">
                       <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
@@ -171,8 +171,8 @@
                         <path
                           d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
 
-                        <line v-if="post.hidden" x1="3" y1="3" x2="13" y2="13" stroke="currentColor"
-                          stroke-width="1.5" stroke-linecap="round" />
+                        <line v-if="post.hidden" x1="3" y1="3" x2="13" y2="13" stroke="currentColor" stroke-width="1.5"
+                          stroke-linecap="round" />
                       </svg>
                     </button>
                   </div>
@@ -213,216 +213,11 @@
             <div v-if="loading"
               class="animate-spin h-6 w-6 border-2 border-blue-600 border-t-transparent rounded-full" />
           </div>
-
         </div>
-        <div v-if="selectedPost" class="animate-fade-in-up">
-          <button
-            class="mb-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
-            @click="selectedPost = null">
-            ← BACK TO FEED
-          </button>
 
-          <article class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <PostDetail v-if="selectedPost" :post="selectedPost" :api="api" :token="token" @back="selectedPost = null"
+          @vote="(dir) => votePost(selectedPost, dir)" @comment-added="() => selectedPost.commentCount++" />
 
-            <div
-              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">
-                <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">
-                  {{ selectedPost.type.replace('_', ' ') }}
-                </span>
-                <span class="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                  <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                  </svg>
-                  {{ new Date(selectedPost.publicationDate).toLocaleDateString('en-US', {
-                    year:
-                      'numeric', month: 'long', day: 'numeric'
-                  }) }}
-                </span>
-              </div>
-
-              <h1 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
-                {{ selectedPost.title }}
-              </h1>
-
-              <div
-                class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
-
-                <div>
-                  <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Authors
-                  </h4>
-                  <div class="flex flex-wrap gap-2">
-                    <span v-for="(author, idx) in selectedPost.authors" :key="idx"
-                      class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200">
-                      <span
-                        class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 flex items-center justify-center text-xs">
-                        {{ author.charAt(0) }}
-                      </span>
-                      {{ author }}
-                    </span>
-                  </div>
-                </div>
-
-                <div>
-                  <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Submitted
-                    By</h4>
-                  <div class="flex items-center gap-3">
-                    <div
-                      class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
-                      {{ selectedPost.submitter.name.charAt(0) }}
-                    </div>
-                    <div>
-                      <div class="text-sm font-bold text-gray-900 dark:text-white">{{
-                        selectedPost.submitter.name }}</div>
-                      <div class="text-xs text-gray-500">{{ selectedPost.submitter.role }} • {{
-                        selectedPost.submitter.email }}</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="p-8">
-              <div class="mb-10">
-                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                  <svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
-                  </svg>
-                  Abstract
-                </h3>
-                <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-justify whitespace-pre-line">
-                  {{ selectedPost.abstractText }}
-                </p>
-              </div>
-
-              <div
-                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-8 border-b dark:border-gray-800">
-                <div v-if="selectedPost.tags && selectedPost.tags.length > 0">
-                  <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Tags</h4>
-                  <div class="flex flex-wrap gap-2">
-                    <span v-for="tag in selectedPost.tags" :key="tag.id"
-                      class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-medium border border-gray-200 dark:border-gray-700">
-                      #{{ tag.name }}
-                    </span>
-                  </div>
-                </div>
-                <div v-else class="text-sm text-gray-400 italic">No tags assigned</div>
-
-                <div class="flex items-center gap-4">
-                  <div
-                    class="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-1.5 shadow-sm">
-
-                    <button class="p-2 rounded-lg transition-all active:scale-90"
-                      :class="selectedPost.my_vote === 'UP' ? 'text-orange-600 bg-orange-100 dark:bg-orange-900/30' : 'text-slate-400 hover:text-orange-500 hover:bg-white dark:hover:bg-slate-700'"
-                      title="Upvote" @click="votePost(selectedPost, 1)">
-                      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
-                      </svg>
-                    </button>
-
-                    <div class="min-w-[40px] text-center">
-                      <span class="text-2xl font-black tracking-tight" :class="{
-                        'text-orange-600': selectedPost.my_vote === 'UP',
-                        'text-blue-600': selectedPost.my_vote === 'DOWN',
-                        'text-slate-900 dark:text-white': !selectedPost.my_vote || selectedPost.my_vote === 'NONE'
-                      }">
-                        {{ selectedPost.rating }}
-                      </span>
-                    </div>
-
-                    <button class="p-2 rounded-lg transition-all active:scale-90"
-                      :class="selectedPost.my_vote === 'DOWN' ? 'text-blue-600 bg-blue-100 dark:bg-blue-900/30' : 'text-slate-400 hover:text-blue-500 hover:bg-white dark:hover:bg-slate-700'"
-                      title="Downvote" @click="votePost(selectedPost, -1)">
-                      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <div v-if="selectedPost.attachedFile"
-                class="mb-10 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:border-blue-400 transition-colors group">
-                <div class="flex items-center justify-between">
-                  <div class="flex items-center gap-4">
-                    <div class="p-3 bg-red-100 text-red-600 rounded-lg group-hover:scale-110 transition-transform">
-                      <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                      </svg>
-                    </div>
-                    <div>
-                      <div class="font-bold text-gray-900 dark:text-white mb-0.5">Attachment
-                        Available</div>
-                      <div class="text-xs text-gray-500 font-mono truncate max-w-[200px] md:max-w-md">
-                        {{ getFileName(selectedPost.attachedFile) }}
-                      </div>
-                    </div>
-                  </div>
-                  <button
-                    class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all"
-                    @click="downloadFile(selectedPost)">
-                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                    </svg>
-                    Download
-                  </button>
-                </div>
-              </div>
-
-              <hr class="border-gray-100 dark:border-gray-800 mb-8">
-
-              <section>
-                <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
-                  Comments
-                  <span
-                    class="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs px-2 py-1 rounded-full">{{
-                      selectedPost.comments.length }}</span>
-                </h3>
-                <div class="space-y-3">
-                  <textarea v-model="newCommentContent" rows="3"
-                    class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
-                    placeholder="What are your thoughts?" />
-                  <div class="flex justify-end">
-                    <button :disabled="!newCommentContent.trim()"
-                      class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
-                      @click="submitComment">
-                      COMMENT
-                    </button>
-                  </div>
-                </div>
-
-                <div class="mt-8 space-y-6">
-                  <div v-if="selectedPost.comments.length === 0" class="text-center py-8 text-gray-400 italic">
-                    Be the first to comment!
-                  </div>
-
-                  <div v-for="comment in selectedPost.comments" :key="comment.id" class="flex gap-4">
-                    <div
-                      class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 flex-shrink-0" />
-                    <div class="flex-1">
-                      <div
-                        class="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-xl rounded-tl-none border border-gray-100 dark:border-gray-800">
-                        <div class="flex items-center justify-between mb-2">
-                          <span class="font-bold text-sm text-blue-600 dark:text-blue-400">{{
-                            comment.author.name }}</span>
-                          <span class="text-[10px] text-gray-400 uppercase">{{ new
-                            Date(comment.created_at).toLocaleDateString() }}</span>
-                        </div>
-                        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
-                          {{ comment.content }}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </section>
-            </div>
-          </article>
-        </div>
         <CreatePostModal :is-open="isModalOpen" :post-to-edit="postToEdit" :api="api" :token="token"
           @close="closeModal()" @refresh="handleRefresh" />
       </main>
@@ -466,8 +261,6 @@ const editTagName = ref('');
 
 const postToEdit = ref(null);
 
-const newCommentContent = ref('');
-
 const checkQueryForModal = () => {
   if (route.query.openCreatePostModal === 'true') {
     isModalOpen.value = true;
@@ -629,20 +422,6 @@ const handleRefresh = () => {
   window.scrollTo({ top: 0, behavior: 'smooth' })
 };
 
-const submitComment = () => {
-  if (!newCommentContent.value.trim()) return;
-
-  const comment = {
-    id: Date.now(),
-    content: newCommentContent.value,
-    author: { name: user.value?.name || "Guest" },
-    created_at: new Date().toISOString()
-  };
-
-  selectedPost.value.comments.unshift(comment);
-  newCommentContent.value = '';
-};
-
 const loadPosts = async () => {
   if (loading.value || !hasMore.value) return;
   loading.value = true;
@@ -720,31 +499,6 @@ const votePost = async (targetPost, direction) => {
   }
 };
 
-const getFileName = (fullPath) => {
-  if (!fullPath) return null;
-  return fullPath.split(/[/\\]/).pop();
-};
-
-const downloadFile = async (post) => {
-  if (!post.attachedFile) return;
-
-  const filename = getFileName(post.attachedFile);
-
-  const downloadUrl = `${api}/publications/download/${filename}`;
-
-  try {
-    const link = document.createElement('a');
-    link.href = downloadUrl;
-    link.setAttribute('download', filename);
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  } catch (e) {
-    console.error("Download error:", e);
-    notifications.error("Could not download file.");
-  }
-};
-
 const filteredPosts = computed(() => {
   const result = posts.value.filter(p => {
     const matchesType = filterType.value === 'ALL' || p.type === filterType.value;
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 97a4664..905d390 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -12,256 +12,13 @@
                 @click.self="selectedPost = null">
 
                 <div class="min-h-screen px-4 py-8 flex items-start justify-center">
-                    <Transition enter-active-class="transition duration-200 ease-out"
-                        enter-from-class="opacity-0 scale-95 translate-y-4"
-                        enter-to-class="opacity-100 scale-100 translate-y-0"
-                        leave-active-class="transition duration-150 ease-in"
-                        leave-from-class="opacity-100 scale-100 translate-y-0"
-                        leave-to-class="opacity-0 scale-95 translate-y-4">
+                    <div
+                        class="self-center w-full max-w-3xl bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border dark:border-gray-800 relative">
 
-                        <div v-if="selectedPost"
-                            class="w-full max-w-4xl bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border dark:border-gray-800"
-                            @click.stop>
+                        <PostDetail :post="selectedPost" :api="api" :token="token" @back="selectedPost = null"
+                            @comment-added="handleCommentAdded" />
 
-                            <div
-                                class="sticky top-0 z-10 flex justify-between items-center p-4 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm border-b dark:border-gray-800 rounded-t-2xl">
-                                <button
-                                    class="flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
-                                    @click="selectedPost = null">
-                                    ← BACK TO FEED
-                                </button>
-
-                                <button
-                                    class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                                    @click="selectedPost = null">
-                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M6 18L18 6M6 6l12 12" />
-                                    </svg>
-                                </button>
-                            </div>
-
-                            <article class="overflow-hidden">
-                                <div
-                                    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">
-                                        <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">
-                                            {{ selectedPost.type.replace('_', ' ') }}
-                                        </span>
-                                        <span
-                                            class="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                                            <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                            </svg>
-                                            {{ new Date(selectedPost.publicationDate ||
-                                                selectedPost.publication_date).toLocaleDateString('en-US', {
-                                                    year: 'numeric', month: 'long', day: 'numeric'
-                                                }) }}
-                                        </span>
-                                    </div>
-
-                                    <h1
-                                        class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
-                                        {{ selectedPost.title }}
-                                    </h1>
-
-                                    <div
-                                        class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
-                                        <div>
-                                            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
-                                                Authors</h4>
-                                            <div class="flex flex-wrap gap-2">
-                                                <span v-for="(author, idx) in selectedPost.authors" :key="idx"
-                                                    class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200">
-                                                    <span
-                                                        class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 flex items-center justify-center text-xs">
-                                                        {{ author.charAt(0) }}
-                                                    </span>
-                                                    {{ author }}
-                                                </span>
-                                            </div>
-                                        </div>
-
-                                        <div v-if="selectedPost.submitter">
-                                            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
-                                                Submitted By</h4>
-                                            <div class="flex items-center gap-3">
-                                                <div
-                                                    class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
-                                                    {{ selectedPost.submitter.name.charAt(0) }}
-                                                </div>
-                                                <div>
-                                                    <div class="text-sm font-bold text-gray-900 dark:text-white">{{
-                                                        selectedPost.submitter.name }}</div>
-                                                    <div class="text-xs text-gray-500">{{ selectedPost.submitter.role }}
-                                                        • {{ selectedPost.submitter.email }}</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="p-8 max-h-[60vh] overflow-y-auto">
-                                    <div class="mb-10">
-                                        <h3
-                                            class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                                            <svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24"
-                                                stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M4 6h16M4 12h16M4 18h7" />
-                                            </svg>
-                                            Abstract
-                                        </h3>
-                                        <p
-                                            class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-justify whitespace-pre-line">
-                                            {{ selectedPost.abstractText || selectedPost.abstract }}
-                                        </p>
-                                    </div>
-
-                                    <div
-                                        class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-8 border-b dark:border-gray-800">
-                                        <div v-if="selectedPost.tags && selectedPost.tags.length > 0">
-                                            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
-                                                Tags</h4>
-                                            <div class="flex flex-wrap gap-2">
-                                                <span v-for="tag in selectedPost.tags" :key="tag.id"
-                                                    class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-medium border border-gray-200 dark:border-gray-700">
-                                                    #{{ tag.name }}
-                                                </span>
-                                            </div>
-                                        </div>
-                                        <div v-else class="text-sm text-gray-400 italic">No tags assigned</div>
-
-                                        <div class="flex items-center gap-4">
-                                            <div
-                                                class="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-1.5 shadow-sm">
-                                                <button class="p-2 rounded-lg transition-all active:scale-90"
-                                                    :class="selectedPost.my_vote === 'UP' ? 'text-orange-600 bg-orange-100 dark:bg-orange-900/30' : 'text-slate-400 hover:text-orange-500 hover:bg-white dark:hover:bg-slate-700'"
-                                                    title="Upvote" @click.stop="votePost(selectedPost, 1)">
-                                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24"
-                                                        stroke="currentColor" stroke-width="2.5">
-                                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                                            d="M5 15l7-7 7 7" />
-                                                    </svg>
-                                                </button>
-                                                <div class="min-w-[40px] text-center">
-                                                    <span class="text-2xl font-black tracking-tight" :class="{
-                                                        'text-orange-600': selectedPost.my_vote === 'UP',
-                                                        'text-blue-600': selectedPost.my_vote === 'DOWN',
-                                                        'text-slate-900 dark:text-white': !selectedPost.my_vote || selectedPost.my_vote === 'NONE'
-                                                    }">
-                                                        {{ selectedPost.rating }}
-                                                    </span>
-                                                </div>
-                                                <button class="p-2 rounded-lg transition-all active:scale-90"
-                                                    :class="selectedPost.my_vote === 'DOWN' ? 'text-blue-600 bg-blue-100 dark:bg-blue-900/30' : 'text-slate-400 hover:text-blue-500 hover:bg-white dark:hover:bg-slate-700'"
-                                                    title="Downvote" @click.stop="votePost(selectedPost, -1)">
-                                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24"
-                                                        stroke="currentColor" stroke-width="2.5">
-                                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                                            d="M19 9l-7 7-7-7" />
-                                                    </svg>
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div v-if="selectedPost.attachedFile || selectedPost.attached_file"
-                                        class="mb-10 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:border-blue-400 transition-colors group">
-                                        <div class="flex items-center justify-between">
-                                            <div class="flex items-center gap-4">
-                                                <div
-                                                    class="p-3 bg-red-100 text-red-600 rounded-lg group-hover:scale-110 transition-transform">
-                                                    <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24"
-                                                        stroke="currentColor">
-                                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                                            stroke-width="2"
-                                                            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                                                    </svg>
-                                                </div>
-                                                <div>
-                                                    <div class="font-bold text-gray-900 dark:text-white mb-0.5">
-                                                        Attachment Available</div>
-                                                    <div
-                                                        class="text-xs text-gray-500 font-mono truncate max-w-[200px] md:max-w-md">
-                                                        {{ getFileName(selectedPost.attachedFile ||
-                                                            selectedPost.attached_file) }}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <button
-                                                class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all"
-                                                @click.stop="downloadFile(selectedPost)">
-                                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
-                                                    stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                                                </svg>
-                                                Download
-                                            </button>
-                                        </div>
-                                    </div>
-
-                                    <hr class="border-gray-100 dark:border-gray-800 mb-8">
-
-                                    <section>
-                                        <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
-                                            Comments
-                                            <span
-                                                class="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs px-2 py-1 rounded-full">
-                                                {{ selectedPost.comments?.length || 0 }}
-                                            </span>
-                                        </h3>
-                                        <div class="space-y-3">
-                                            <textarea v-model="newCommentContent" rows="3"
-                                                class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
-                                                placeholder="What are your thoughts?" />
-                                            <div class="flex justify-end">
-                                                <button :disabled="!newCommentContent.trim()"
-                                                    class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
-                                                    @click="submitComment">
-                                                    COMMENT
-                                                </button>
-                                            </div>
-                                        </div>
-
-                                        <div class="mt-8 space-y-6">
-                                            <div v-if="!selectedPost.comments || selectedPost.comments.length === 0"
-                                                class="text-center py-8 text-gray-400 italic">
-                                                Be the first to comment!
-                                            </div>
-
-                                            <div v-for="comment in selectedPost.comments" :key="comment.id"
-                                                class="flex gap-4">
-                                                <div
-                                                    class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 flex-shrink-0" />
-                                                <div class="flex-1">
-                                                    <div
-                                                        class="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-xl rounded-tl-none border border-gray-100 dark:border-gray-800">
-                                                        <div class="flex items-center justify-between mb-2">
-                                                            <span
-                                                                class="font-bold text-sm text-blue-600 dark:text-blue-400">{{
-                                                                    comment.author.name }}</span>
-                                                            <span class="text-[10px] text-gray-400 uppercase">{{ new
-                                                                Date(comment.created_at).toLocaleDateString() }}</span>
-                                                        </div>
-                                                        <p
-                                                            class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
-                                                            {{ comment.content }}
-                                                        </p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </section>
-                                </div>
-                            </article>
-                        </div>
-                    </Transition>
+                    </div>
                 </div>
             </div>
         </Transition>
@@ -419,15 +176,9 @@
                                 </div>
 
                                 <div v-for="post in userProfile.publications" :key="post.id"
-                                    :class="['relative group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4 overflow-hidden', post.isHidden ? 'opacity-60 bg-gray-50' : 'bg-white']"
+                                    :class="['relative group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4 overflow-hidden', post.hidden ? 'opacity-60 bg-gray-50' : 'bg-white']"
                                     @click="fetchPostDetail(post.id)">
 
-                                    <div v-if="post.attachedFile"
-                                        class="absolute right-1 bottom-5 opacity-50 group-hover:opacity-100 transition-opacity duration-300">
-                                        <img src="/f.png" alt="attachment"
-                                            class="w-32 h-32 transform rotate-[-45deg] pointer-events-none select-none">
-                                    </div>
-
                                     <div class="flex gap-4">
                                         <div
                                             class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
@@ -450,7 +201,7 @@
                                                         year:
                                                             'numeric', month: 'long', day: 'numeric'
                                                     }) }}</span>
-                                                <button v-if="authStore.user.id == post.submitter.id"
+                                                <button
                                                     class="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
                                                     title="Edit" @click.stop="openEditModal(post)">
                                                     <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24"
@@ -461,9 +212,8 @@
                                                     </svg>
                                                 </button>
                                                 <button
-                                                    v-if="authStore.user.id == post.submitter.id || authStore.user.role != 'COLLABORATOR'"
                                                     class="p-1 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
-                                                    :title="post.isHidden ? 'Unhide' : 'Hide'"
+                                                    :title="post.hiddenidden ? 'Unhide' : 'Hide'"
                                                     @click.stop="toggleHide(post)">
                                                     <svg width="16px" height="16px" viewBox="0 0 16 16"
                                                         xmlns="http://www.w3.org/2000/svg" fill="currentColor">
@@ -472,7 +222,7 @@
                                                         <path
                                                             d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
 
-                                                        <line v-if="post.isHidden" x1="3" y1="3" x2="13" y2="13"
+                                                        <line v-if="post.hidden" x1="3" y1="3" x2="13" y2="13"
                                                             stroke="currentColor" stroke-width="1.5"
                                                             stroke-linecap="round" />
                                                     </svg>
@@ -507,42 +257,54 @@
                             <div
                                 class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
                                 <div v-for="item in activityLog" :key="item.id"
-                                    class="p-4 flex gap-4 border-b border-slate-100 dark:border-slate-800 last:border-0 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
+                                    class="group p-4 flex gap-5 border-b border-slate-100 dark:border-slate-800 last:border-0 hover:bg-slate-50/80 dark:hover:bg-slate-800/30 transition-all duration-200">
 
-                                    <div class="flex flex-col items-center min-w-[80px] text-center pt-1">
-                                        <span class="text-xs font-bold text-slate-500 uppercase">
+                                    <div
+                                        class="flex flex-col items-end min-w-[90px] pt-1 border-r border-slate-100 dark:border-slate-800 pr-4">
+                                        <span
+                                            class="text-[11px] font-semibold text-slate-600 dark:text-slate-400 tabular-nums">
                                             {{ new Date(item.timestamp).toLocaleDateString('en-US', {
                                                 month: 'short',
-                                                day: 'numeric'
-                                            }) }}
+                                            day: 'numeric', year: 'numeric' }) }}
                                         </span>
-                                        <span class="text-[10px] text-slate-400">
+                                        <span class="text-[10px] text-slate-400 tabular-nums mt-0.5">
                                             {{ new Date(item.timestamp).toLocaleTimeString([], {
                                                 hour: '2-digit',
-                                                minute: '2-digit'
-                                            }) }}
+                                            minute: '2-digit' }) }}
                                         </span>
                                     </div>
 
                                     <div class="flex-1">
-                                        <div class="flex items-center gap-2 mb-1">
+                                        <div class="flex items-center gap-3 mb-1.5">
                                             <span
-                                                class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide"
+                                                class="px-2 py-0.5 rounded-full text-[10px] font-bold tracking-tight border"
                                                 :class="{
-                                                    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400': item.action.includes('UPLOAD'),
-                                                    'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': item.action.includes('COMMENT'),
-                                                    'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400': item.action.includes('RATED') || item.action.includes('CORRECT'),
-                                                    'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400': item.action.includes('TAG')
+                                                    'bg-emerald-50 text-emerald-700 border-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20': item.actionType.includes('UPLOAD'),
+                                                    'bg-blue-50 text-blue-700 border-blue-100 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/20': item.actionType.includes('COMMENT'),
+                                                    'bg-indigo-50 text-indigo-700 border-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-400 dark:border-indigo-500/20': item.actionType.includes('EDIT'),
+                                                    'bg-amber-50 text-amber-700 border-amber-100 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20': item.actionType.includes('RATED') || item.actionType.includes('CORRECT'),
+                                                    'bg-purple-50 text-purple-700 border-purple-100 dark:bg-purple-500/10 dark:text-purple-400 dark:border-purple-500/20': item.actionType.includes('TAG')
                                                 }">
-                                                {{ item.action.replace('_', ' ') }}
+                                                {{ item.actionType.replace('_', ' ') }}
+                                            </span>
+
+                                            <span class="text-[11px] text-slate-400 font-medium">
+                                                {{ item.targetType }} #{{ item.targetId }}
                                             </span>
-                                            <span class="text-xs text-slate-400 font-medium">{{ item.target_type }} #{{
-                                                item.target_id }}</span>
                                         </div>
-                                        <p class="text-sm text-slate-700 dark:text-slate-300">
-                                            {{ item.details }}
+
+                                        <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
+                                            {{ item.description }}
                                         </p>
                                     </div>
+
+                                    <div class="flex items-center opacity-0 group-hover:opacity-100 transition-opacity">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-300"
+                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                d="9 5l7 7-7 7" />
+                                        </svg>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -618,7 +380,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from "~/stores/auth-store.js";
 import { storeToRefs } from "pinia";
@@ -635,7 +397,6 @@ const isModalOpen = ref(false);
 const postToEdit = ref(null);
 
 const selectedPost = ref(null);
-const newCommentContent = ref('');
 
 const newUsername = ref('');
 const newEmail = ref('');
@@ -657,15 +418,15 @@ const userProfile = ref({
 
 const toggleHide = async (post) => {
     try {
-        const newState = !post.isHidden;
+        const newState = !post.hidden;
 
-        await $fetch(`${api}/publications/${post.id}`, {
+        await $fetch(`${api}/publications/${post.id}/hide`, {
             method: 'PATCH',
             headers: { Authorization: `Bearer ${token.value}` },
-            body: { isHidden: newState }
+            body: { is_hidden: newState }
         });
 
-        post.isHidden = newState;
+        post.hidden = newState;
         notifications.success(`Post ${newState ? 'hidden' : 'restored'}`);
 
     } catch (err) {
@@ -706,20 +467,15 @@ const downloadFile = async (post) => {
 };
 
 const fetchPostDetail = async (id) => {
-    loading.value = true;
     try {
         const postDetail = await $fetch(`${api}/publications/${id}`, {
             headers: { Authorization: `Bearer ${token.value}` }
         });
-
         selectedPost.value = postDetail;
-
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-
+        document.body.style.overflow = 'hidden';
     } catch (err) {
-        console.error("Failed to fetch post detail:", err);
-    } finally {
-        loading.value = false;
+        notifications.error("Failed to load publication details");
+        console.error(err);
     }
 };
 
@@ -731,7 +487,7 @@ async function fetchActivityHistory() {
     if (!token.value) return;
 
     try {
-        const data = await $fetch(`${api}/me/history`, {
+        const data = await $fetch(`${api}/users/me/history`, {
             method: 'GET',
             headers: { Authorization: `Bearer ${token.value}` }
         });
@@ -870,6 +626,10 @@ const openResetPassword = () => {
     router.push({ path: '/profile/update-password' });
 };
 
+watch(selectedPost, (newVal) => {
+    if (!newVal) document.body.style.overflow = 'auto';
+});
+
 onMounted(() => {
     fetchProfileData();
     fetchActivityHistory();

From 90e0624cfa35759e3c7c48d6c13bae4aa048fbef Mon Sep 17 00:00:00 2001
From: Edd <edd.ddev@gmail.com>
Date: Fri, 23 Jan 2026 20:30:00 +0000
Subject: [PATCH 16/18] final frontend part 2

---
 app/components/post/PostDetail.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/post/PostDetail.vue b/app/components/post/PostDetail.vue
index 782121d..7410a7f 100644
--- a/app/components/post/PostDetail.vue
+++ b/app/components/post/PostDetail.vue
@@ -280,12 +280,12 @@ const editText = ref('');
 
 const toggleHide = async (comment) => {
     try {
-        console.log(comment)
         comment.hidden = !comment.hidden;
 
         await $fetch(`${props.api}/comments/${comment.id}`, {
             method: 'PATCH',
             headers: { Authorization: `Bearer ${props.token}` },
+            body: { is_hidden: comment.hidden }
         });
 
         notifications.success(comment.hidden ? "Comment hidden" : "Comment visible");
@@ -310,13 +310,13 @@ const handleEditSubmit = async (comment) => {
 
     submitting.value = true;
     try {
-        const updatedComment = await $fetch(`${props.api}/comments/${comment.id}`, {
+        await $fetch(`${props.api}/comments/${comment.id}`, {
             method: 'PUT',
             headers: { Authorization: `Bearer ${props.token}` },
             body: { content: editText.value }
         });
 
-        comment.content = updatedComment.content;
+        comment.content = editText.value;
         editingCommentId.value = null;
         notifications.success("Comment updated!");
     } catch (err) {

From 582cb3cb4c4a9fe5837354fdf5e54bb354de753c Mon Sep 17 00:00:00 2001
From: Edd <edd.ddev@gmail.com>
Date: Fri, 23 Jan 2026 21:21:43 +0000
Subject: [PATCH 17/18] user history

---
 app/pages/admin/users/index.vue | 100 ++++++++++++--------------------
 1 file changed, 37 insertions(+), 63 deletions(-)

diff --git a/app/pages/admin/users/index.vue b/app/pages/admin/users/index.vue
index 4715795..5456bc8 100644
--- a/app/pages/admin/users/index.vue
+++ b/app/pages/admin/users/index.vue
@@ -441,27 +441,30 @@
                                         class="relative bg-slate-50 dark:bg-slate-800/50 rounded-xl p-5 border border-slate-200 dark:border-slate-800">
                                         <div class="flex gap-4">
                                             <div class="flex flex-col items-center min-w-[90px] text-center">
-                                                <span class="text-xs font-bold text-slate-500 uppercase mb-1">{{ new
-                                                    Date(item.timestamp).toLocaleDateString('en-US', {
-                                                        month: 'short',
-                                                        day: 'numeric'
-                                                    }) }}</span>
-                                                <span class="text-xs text-slate-400">{{ new
-                                                    Date(item.timestamp).toLocaleTimeString([], {
-                                                        hour: '2-digit',
-                                                        minute: '2-digit'
-                                                    }) }}</span>
+                                                <span class="text-xs font-bold text-slate-500 uppercase mb-1">
+                                                    {{ new Date(item.timestamp).toLocaleDateString('en-US', {
+                                                        month:
+                                                    'short', day: 'numeric' }) }}
+                                                </span>
+                                                <span class="text-xs text-slate-400">
+                                                    {{ new Date(item.timestamp).toLocaleTimeString([], {
+                                                        hour:
+                                                    '2-digit', minute: '2-digit' }) }}
+                                                </span>
                                             </div>
                                             <div class="flex-1">
                                                 <div class="flex items-center gap-2 mb-2">
                                                     <span
-                                                        class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">{{
-                                                            item.action.replace('_', ' ') }}</span>
-                                                    <span class="text-xs text-slate-400 font-medium">{{ item.target_type
-                                                    }} #{{ item.target_id }}</span>
+                                                        class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">
+                                                        {{ item.actionType.replace('_', ' ') }}
+                                                    </span>
+                                                    <span class="text-xs text-slate-400 font-medium">
+                                                        {{ item.targetType }} #{{ item.targetId }}
+                                                    </span>
                                                 </div>
-                                                <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{
-                                                    item.details }}</p>
+                                                <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
+                                                    {{ item.description }}
+                                                </p>
                                             </div>
                                         </div>
                                     </div>
@@ -504,51 +507,6 @@ const searchQuery = ref('');
 const selectedUser = ref(null);
 const userHistory = ref([]);
 
-const generateMockHistory = () => {
-    const actions = ['UPLOADED_PUBLICATION', 'ADDED_COMMENT', 'CORRECTED_PUBLICATION', 'RATED_PUBLICATION', 'TAGGED_PUBLICATION'];
-    const targetTypes = ['Publication', 'Comment', 'Review'];
-    const details = [
-        'Fez upload da publicação "A New Technique for Data Science"',
-        'Comentou na publicação "Reference Paper Y"',
-        'Corrigiu informação da publicação "Machine Learning Advances"',
-        'Atribuiu 5 estrelas à publicação "Deep Learning Research"',
-        'Adicionou tag "AI" à publicação "Neural Networks Study"',
-        'Fez upload da publicação "Quantum Computing Overview"',
-        'Comentou na publicação "Data Analysis Methods"',
-        'Corrigiu informação da publicação "Statistical Models in Research"',
-        'Atribuiu 4 estrelas à publicação "Big Data Trends"',
-        'Adicionou tag "Data Science" à publicação "Data Visualization Techniques"'
-    ];
-
-    const history = [];
-    const numEvents = Math.floor(Math.random() * 20) + 8;
-
-    for (let i = 0; i < numEvents; i++) {
-        const randomAction = actions[Math.floor(Math.random() * actions.length)];
-        const randomTargetType = targetTypes[Math.floor(Math.random() * targetTypes.length)];
-        const randomDetails = details[Math.floor(Math.random() * details.length)];
-        const daysAgo = Math.floor(Math.random() * 30);
-        const hoursAgo = Math.floor(Math.random() * 24);
-        const minutesAgo = Math.floor(Math.random() * 60);
-
-        const timestamp = new Date();
-        timestamp.setDate(timestamp.getDate() - daysAgo);
-        timestamp.setHours(timestamp.getHours() - hoursAgo);
-        timestamp.setMinutes(timestamp.getMinutes() - minutesAgo);
-
-        history.push({
-            id: 1000 + i,
-            action: randomAction,
-            target_type: randomTargetType,
-            target_id: 200 + Math.floor(Math.random() * 50),
-            details: randomDetails,
-            timestamp: timestamp.toISOString()
-        });
-    }
-
-    return history.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
-};
-
 const formData = reactive({
     id: 0,
     name: '',
@@ -654,10 +612,26 @@ const confirmDelete = async (user) => {
     }
 };
 
-const openUserDetails = (user) => {
+const openUserDetails = async (user) => {
     selectedUser.value = user;
-    userHistory.value = generateMockHistory(user.id);
     showDetailsModal.value = true;
+
+    try {
+        const data = await $fetch(`${api}/users/${user.id}/history`, {
+            method: 'GET',
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+
+        if (data && typeof data === 'object') {
+            userHistory.value = Object.values(data).sort((a, b) => b.timestamp - a.timestamp);
+        } else {
+            userHistory.value = [];
+        }
+    } catch (error) {
+        console.error("Error fetching user history", error);
+        notifications.error("Failed to load activity history");
+        userHistory.value = [];
+    }
 };
 
 const closeDetailsModal = () => {

From af6ca88fd4d7d8d7ebf64ae84bf0ccd470408707 Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Fri, 23 Jan 2026 21:45:49 +0000
Subject: [PATCH 18/18] dont read the name of the branch

---
 app/components/post/PostDetail.vue | 110 ++++++++++++++++++++++++++++-
 1 file changed, 109 insertions(+), 1 deletion(-)

diff --git a/app/components/post/PostDetail.vue b/app/components/post/PostDetail.vue
index 7410a7f..c2d81e7 100644
--- a/app/components/post/PostDetail.vue
+++ b/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>
\ No newline at end of file
+</script>