Skip to content

fix(profile): reuse UserListItem component in appreciation modals #179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
trtajim merged 5 commits into from
Aug 26, 2026
Merged

fix(profile): reuse UserListItem component in appreciation modals #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7680d80
fix(profile): reuse UserListItem component in appreciation modals
trtajim Aug 26, 2026
3cf72b7
refactor(ui): remove redundant verified badges from blog cards and ar…
trtajim Aug 26, 2026
3872370
refactor(comments): remove verified badges from comment author headers
trtajim Aug 26, 2026
7a935f5
refactor(blog): optimize queries by removing unused roles eager load …
trtajim Aug 26, 2026
9bcad6c
refactor(ui): remove redundant verified badges from team cards and pr…
trtajim Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/Http/Controllers/BlogController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions app/Http/Controllers/UserProfileController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
20 changes: 5 additions & 15 deletions resources/js/components/BlogCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -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
Expand Down
11 changes: 1 addition & 10 deletions resources/js/components/UserCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<{
Expand Down Expand Up @@ -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 -->
Expand Down
11 changes: 2 additions & 9 deletions resources/js/pages/Blog/Show.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,16 +277,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>

Expand Down
108 changes: 11 additions & 97 deletions resources/js/pages/User/Show.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand Down Expand Up @@ -359,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"
Expand Down Expand Up @@ -1220,53 +1210,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
Expand Down Expand Up @@ -1323,53 +1275,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
Expand Down