From 7680d8062cb86a82b92eda838075f09317bd3291 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Wed, 26 Aug 2026 16:13:41 +0600
Subject: [PATCH 1/5] fix(profile): reuse UserListItem component in
 appreciation modals

- Replace custom modal markup with shared UserListItem component
- Fix avatar image resolution with user.image_url and user.image_path support
- Include users.title in appreciators and appreciating queries
- Recompile production assets cleanly
---
 .../Controllers/UserProfileController.php     |  4 +-
 resources/js/pages/User/Show.vue              | 97 +++----------------
 2 files changed, 13 insertions(+), 88 deletions(-)

diff --git a/app/Http/Controllers/UserProfileController.php b/app/Http/Controllers/UserProfileController.php
index dcb7b21..4a9d859 100644
--- a/app/Http/Controllers/UserProfileController.php
+++ b/app/Http/Controllers/UserProfileController.php
@@ -51,14 +51,14 @@ public function show(string $username)
             : false;
 
         $appreciators = $user->appreciators()
-            ->select(['users.id', 'users.name', 'users.username', 'users.image_path', 'users.institution'])
+            ->select(['users.id', 'users.name', 'users.username', 'users.image_path', 'users.institution', 'users.title'])
             ->with('roles:id,name')
             ->latest('user_appreciations.id')
             ->take(50)
             ->get();
 
         $appreciating = $user->appreciatingUsers()
-            ->select(['users.id', 'users.name', 'users.username', 'users.image_path', 'users.institution'])
+            ->select(['users.id', 'users.name', 'users.username', 'users.image_path', 'users.institution', 'users.title'])
             ->with('roles:id,name')
             ->latest('user_appreciations.id')
             ->take(50)
diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index 530fde9..da489c0 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -23,6 +23,7 @@ import {
     Users,
     X,
 } from 'lucide-vue-next';
+import UserListItem from '@/components/UserListItem.vue';
 import { computed, ref, watch } from 'vue';
 
 const props = defineProps<{
@@ -1220,53 +1221,15 @@ const totalActivitiesCount = computed(
 
                 <div
                     v-if="appreciators && appreciators.length > 0"
-                    class="max-h-72 space-y-2 overflow-y-auto pr-1"
+                    class="-mx-1 max-h-72 divide-y divide-slate-100 overflow-y-auto px-1 dark:divide-gray-800/80"
                 >
-                    <Link
+                    <UserListItem
                         v-for="person in appreciators"
                         :key="person.id"
-                        :href="`/u/${person.username}`"
+                        :user="person"
+                        theme="rose"
                         @click="showAppreciatorsModal = false"
-                        class="group flex items-center justify-between rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-gray-800/60"
-                    >
-                        <div class="flex min-w-0 items-center gap-2.5">
-                            <div
-                                class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-indigo-50 text-xs font-black text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
-                            >
-                                <img
-                                    v-if="person.image_path"
-                                    :src="'/storage/' + person.image_path"
-                                    :alt="person.name"
-                                    class="h-full w-full object-cover"
-                                />
-                                <span v-else>{{
-                                    person.name.charAt(0).toUpperCase()
-                                }}</span>
-                            </div>
-                            <div class="min-w-0 flex-1">
-                                <p
-                                    class="truncate text-xs font-bold text-slate-900 group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
-                                >
-                                    {{ person.name }}
-                                </p>
-                                <p
-                                    class="truncate text-[10px] text-slate-400 dark:text-gray-500"
-                                >
-                                    {{
-                                        person.institution ||
-                                        '@' + person.username
-                                    }}
-                                </p>
-                            </div>
-                        </div>
-
-                        <span
-                            v-if="person.roles && person.roles.length > 0"
-                            class="rounded-md bg-indigo-50 px-1.5 py-0.5 text-[9px] font-bold text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400"
-                        >
-                            {{ person.roles[0].name }}
-                        </span>
-                    </Link>
+                    />
                 </div>
 
                 <div
@@ -1323,53 +1286,15 @@ const totalActivitiesCount = computed(
 
                 <div
                     v-if="appreciating && appreciating.length > 0"
-                    class="max-h-72 space-y-2 overflow-y-auto pr-1"
+                    class="-mx-1 max-h-72 divide-y divide-slate-100 overflow-y-auto px-1 dark:divide-gray-800/80"
                 >
-                    <Link
+                    <UserListItem
                         v-for="person in appreciating"
                         :key="person.id"
-                        :href="`/u/${person.username}`"
+                        :user="person"
+                        theme="indigo"
                         @click="showAppreciatingModal = false"
-                        class="group flex items-center justify-between rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-gray-800/60"
-                    >
-                        <div class="flex min-w-0 items-center gap-2.5">
-                            <div
-                                class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-indigo-50 text-xs font-black text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"
-                            >
-                                <img
-                                    v-if="person.image_path"
-                                    :src="'/storage/' + person.image_path"
-                                    :alt="person.name"
-                                    class="h-full w-full object-cover"
-                                />
-                                <span v-else>{{
-                                    person.name.charAt(0).toUpperCase()
-                                }}</span>
-                            </div>
-                            <div class="min-w-0 flex-1">
-                                <p
-                                    class="truncate text-xs font-bold text-slate-900 group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
-                                >
-                                    {{ person.name }}
-                                </p>
-                                <p
-                                    class="truncate text-[10px] text-slate-400 dark:text-gray-500"
-                                >
-                                    {{
-                                        person.institution ||
-                                        '@' + person.username
-                                    }}
-                                </p>
-                            </div>
-                        </div>
-
-                        <span
-                            v-if="person.roles && person.roles.length > 0"
-                            class="rounded-md bg-indigo-50 px-1.5 py-0.5 text-[9px] font-bold text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400"
-                        >
-                            {{ person.roles[0].name }}
-                        </span>
-                    </Link>
+                    />
                 </div>
 
                 <div

From 3cf72b7f1f2f629b711a42f822bca56bf3083974 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Wed, 26 Aug 2026 16:17:37 +0600
Subject: [PATCH 2/5] refactor(ui): remove redundant verified badges from blog
 cards and articles

---
 resources/js/components/BlogCard.vue | 20 +++++---------------
 resources/js/pages/Blog/Show.vue     | 12 ++----------
 2 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/resources/js/components/BlogCard.vue b/resources/js/components/BlogCard.vue
index 3fa5bc7..50e58c0 100644
--- a/resources/js/components/BlogCard.vue
+++ b/resources/js/components/BlogCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { ArrowRight, Heart, MessageSquare, BadgeCheck } from 'lucide-vue-next';
+import { ArrowRight, Heart, MessageSquare } from 'lucide-vue-next';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -59,25 +59,15 @@ const formattedDate = computed(() => {
                 <Link
                     v-if="blog.user?.username"
                     :href="`/u/${blog.user.username}`"
-                    class="inline-flex items-center gap-1 font-medium text-indigo-600 underline transition-colors hover:underline dark:text-indigo-400"
+                    class="font-medium text-indigo-600 underline transition-colors hover:underline dark:text-indigo-400"
                 >
-                    <span>{{ blog.user?.name }}</span>
-                    <BadgeCheck
-                        v-if="blog.user?.roles && blog.user.roles.length > 0"
-                        class="h-3.5 w-3.5 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
-                        title="Verified Contributor"
-                    />
+                    {{ blog.user?.name }}
                 </Link>
                 <span
                     v-else
-                    class="inline-flex items-center gap-1 font-medium text-slate-700 dark:text-gray-300"
+                    class="font-medium text-slate-700 dark:text-gray-300"
                 >
-                    <span>{{ blog.user?.name }}</span>
-                    <BadgeCheck
-                        v-if="blog.user?.roles && blog.user.roles.length > 0"
-                        class="h-3.5 w-3.5 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
-                        title="Verified Contributor"
-                    />
+                    {{ blog.user?.name }}
                 </span>
 
                 <span
diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index bb5077d..06e26e2 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -14,7 +14,6 @@ import {
     LogIn,
     X,
     Loader2,
-    BadgeCheck,
 } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
 import UserListItem from '@/components/UserListItem.vue';
@@ -277,16 +276,9 @@ const goBack = () => {
                                 ? `/u/${blog.user.username}`
                                 : '#'
                         "
-                        class="inline-flex items-center gap-1 font-medium text-indigo-600 transition-colors hover:text-indigo-800 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
+                        class="font-medium text-indigo-600 transition-colors hover:text-indigo-800 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
-                        <span>{{ blog.user?.name }}</span>
-                        <BadgeCheck
-                            v-if="
-                                blog.user?.roles && blog.user.roles.length > 0
-                            "
-                            class="h-4 w-4 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
-                            title="Verified Contributor"
-                        />
+                        {{ blog.user?.name }}
                     </Link>
                 </div>
 

From 3872370693287cbf20758ddb15bae6595687d357 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Wed, 26 Aug 2026 16:18:37 +0600
Subject: [PATCH 3/5] refactor(comments): remove verified badges from comment
 author headers

---
 resources/js/pages/Blog/Show.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index 06e26e2..369acda 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -632,19 +632,9 @@ const goBack = () => {
                                                 ? `/u/${comment.user.username}`
                                                 : '#'
                                         "
-                                        class="inline-flex items-center gap-1 text-sm font-bold text-slate-900 transition hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
+                                        class="text-sm font-bold text-slate-900 transition hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
                                     >
-                                        <span>{{
-                                            comment.user?.name || 'Anonymous'
-                                        }}</span>
-                                        <BadgeCheck
-                                            v-if="
-                                                comment.user?.roles &&
-                                                comment.user.roles.length > 0
-                                            "
-                                            class="h-3.5 w-3.5 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
-                                            title="Verified Contributor"
-                                        />
+                                        {{ comment.user?.name || 'Anonymous' }}
                                     </Link>
                                     <span
                                         v-if="comment.user_id === blog.user_id"

From 7a935f575023e5be98f0519bb4f8bb0ba728ae91 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Wed, 26 Aug 2026 16:20:25 +0600
Subject: [PATCH 4/5] refactor(blog): optimize queries by removing unused roles
 eager load for blog authors and retain verified badge in comments

---
 app/Http/Controllers/BlogController.php |  4 ++--
 resources/js/pages/Blog/Show.vue        | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/Http/Controllers/BlogController.php b/app/Http/Controllers/BlogController.php
index 1df4fd2..88e3e51 100644
--- a/app/Http/Controllers/BlogController.php
+++ b/app/Http/Controllers/BlogController.php
@@ -25,7 +25,7 @@ public function index(Request $request)
                 'views',
                 'created_at',
             ])
-            ->with(['user:id,name,username', 'user.roles:id,name'])
+            ->with('user:id,name,username')
             ->withCount(['reactions', 'comments'])
             ->where('is_published', true);
 
@@ -56,7 +56,7 @@ public function show(Blog $blog)
     {
         abort_unless($blog->is_published, 404);
 
-        $blog->load(['user:id,name,username,image_path', 'user.roles:id,name']);
+        $blog->load('user:id,name,username,image_path');
         $blog->increment('views');
 
         $reactionsCount = $blog->reactions()->count();
diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index 369acda..3c91ae1 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -14,6 +14,7 @@ import {
     LogIn,
     X,
     Loader2,
+    BadgeCheck,
 } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
 import UserListItem from '@/components/UserListItem.vue';
@@ -632,9 +633,19 @@ const goBack = () => {
                                                 ? `/u/${comment.user.username}`
                                                 : '#'
                                         "
-                                        class="text-sm font-bold text-slate-900 transition hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
+                                        class="inline-flex items-center gap-1 text-sm font-bold text-slate-900 transition hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
                                     >
-                                        {{ comment.user?.name || 'Anonymous' }}
+                                        <span>{{
+                                            comment.user?.name || 'Anonymous'
+                                        }}</span>
+                                        <BadgeCheck
+                                            v-if="
+                                                comment.user?.roles &&
+                                                comment.user.roles.length > 0
+                                            "
+                                            class="h-3.5 w-3.5 fill-blue-50 stroke-[2.2] text-blue-600 dark:fill-blue-950/60 dark:text-blue-400"
+                                            title="Verified Contributor"
+                                        />
                                     </Link>
                                     <span
                                         v-if="comment.user_id === blog.user_id"

From 9bcad6c55e157da883f2f2d93b3ed744c621eae0 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Wed, 26 Aug 2026 16:21:30 +0600
Subject: [PATCH 5/5] refactor(ui): remove redundant verified badges from team
 cards and profile headers

---
 resources/js/components/UserCard.vue | 11 +----------
 resources/js/pages/User/Show.vue     | 11 -----------
 2 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/resources/js/components/UserCard.vue b/resources/js/components/UserCard.vue
index 9fb21ef..f0c0b9c 100644
--- a/resources/js/components/UserCard.vue
+++ b/resources/js/components/UserCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { GraduationCap, ArrowRight, BadgeCheck } from 'lucide-vue-next';
+import { GraduationCap, ArrowRight } from 'lucide-vue-next';
 import { computed } from 'vue';
 
 const props = defineProps<{
@@ -88,15 +88,6 @@ const roleInfo = computed(() => {
                     >
                         {{ member.name }}
                     </Link>
-                    <span
-                        v-if="member.roles && member.roles.length > 0"
-                        class="inline-flex items-center text-blue-600 dark:text-blue-400"
-                        title="Verified HSCStack Contributor"
-                    >
-                        <BadgeCheck
-                            class="h-4.5 w-4.5 fill-blue-50 stroke-[2.2] dark:fill-blue-950/60"
-                        />
-                    </span>
                 </div>
 
                 <!-- Role Pill -->
diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index da489c0..d5ac4fe 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -360,17 +360,6 @@ const totalActivitiesCount = computed(
                                     {{ profileUser.name }}
                                 </h1>
 
-                                <!-- Verified Staff Badge -->
-                                <span
-                                    v-if="profileUser.is_staff"
-                                    class="inline-flex items-center text-blue-600 dark:text-blue-400"
-                                    title="Verified HSCStack Staff / Contributor"
-                                >
-                                    <BadgeCheck
-                                        class="h-4.5 w-4.5 fill-blue-50 stroke-[2.2] sm:h-5 sm:w-5 dark:fill-blue-950/60"
-                                    />
-                                </span>
-
                                 <!-- Role Pill -->
                                 <span
                                     class="inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-bold"