From 2f506e941dd77698ddafe1fa08ecd72e5f3ff8ee Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 18:27:06 +0600
Subject: [PATCH 1/4] style(profile): ensure appreciations pills stay in single
 horizontal row on mobile

---
 resources/js/pages/User/Show.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index 00ef003..75f6273 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -482,22 +482,22 @@ const handleAppreciate = () => {
                     <p class="whitespace-pre-line">{{ profileUser.about }}</p>
                 </div>
 
-                <!-- Appreciations Summary Pill Row -->
+                <!-- Appreciations Summary Pill Row (Always single horizontal row) -->
                 <div
                     v-if="localAppreciationsCount > 0 || appreciatingCount > 0"
-                    class="mt-3.5 flex flex-wrap items-center gap-2"
+                    class="mt-3.5 flex items-center gap-2 overflow-x-auto"
                 >
                     <button
                         v-if="localAppreciationsCount > 0"
                         type="button"
                         @click="showAppreciatorsModal = true"
-                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-rose-100 bg-rose-50/70 px-2.5 py-1 text-xs font-bold text-rose-700 transition select-none hover:bg-rose-100 active:scale-95 dark:border-rose-900/40 dark:bg-rose-950/40 dark:text-rose-300 dark:hover:bg-rose-900/60"
+                        class="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-lg border border-rose-100 bg-rose-50/70 px-2.5 py-1 text-xs font-bold text-rose-700 transition select-none hover:bg-rose-100 active:scale-95 dark:border-rose-900/40 dark:bg-rose-950/40 dark:text-rose-300 dark:hover:bg-rose-900/60"
                         title="View members who appreciated this profile"
                     >
                         <Heart
                             class="h-3.5 w-3.5 fill-rose-500 text-rose-500 dark:fill-rose-400 dark:text-rose-400"
                         />
-                        <span
+                        <span class="whitespace-nowrap"
                             >{{ localAppreciationsCount }}
                             {{
                                 localAppreciationsCount === 1
@@ -511,13 +511,13 @@ const handleAppreciate = () => {
                         v-if="appreciatingCount > 0"
                         type="button"
                         @click="showAppreciatingModal = true"
-                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-slate-200/80 bg-slate-50/80 px-2.5 py-1 text-xs font-semibold text-slate-600 transition select-none hover:bg-slate-100 active:scale-95 dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-300 dark:hover:bg-gray-700"
+                        class="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-lg border border-slate-200/80 bg-slate-50/80 px-2.5 py-1 text-xs font-semibold text-slate-600 transition select-none hover:bg-slate-100 active:scale-95 dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-300 dark:hover:bg-gray-700"
                         title="View members this user appreciates"
                     >
                         <Heart
                             class="h-3.5 w-3.5 stroke-[2] text-slate-400 dark:text-gray-500"
                         />
-                        <span
+                        <span class="whitespace-nowrap"
                             >Appreciating {{ appreciatingCount }}
                             {{
                                 appreciatingCount === 1 ? 'user' : 'users'

From 8a5f64b1063a5de3dd64785f3108a99d3a7a8c70 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 18:29:20 +0600
Subject: [PATCH 2/4] feat(auth): move logout button from profile page to
 navbar user preview card

---
 resources/js/components/NavBar.vue | 37 +++++++++++-----
 resources/js/pages/Blog/Show.vue   |  2 +
 resources/js/pages/User/Show.vue   | 71 ------------------------------
 3 files changed, 28 insertions(+), 82 deletions(-)

diff --git a/resources/js/components/NavBar.vue b/resources/js/components/NavBar.vue
index 6b4d278..7b22919 100644
--- a/resources/js/components/NavBar.vue
+++ b/resources/js/components/NavBar.vue
@@ -8,6 +8,7 @@ import {
     Sun,
     Monitor,
     User,
+    LogOut,
     Menu,
     X,
     BookOpen,
@@ -372,20 +373,34 @@ onBeforeUnmount(() => {
                                 v-if="dropdownOpen"
                                 class="absolute right-0 mt-2 w-56 origin-top-right rounded-2xl border border-slate-200 bg-white p-1.5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
                             >
-                                <!-- User Identity Card -->
+                                <!-- User Identity Card with Logout on Right -->
                                 <div
-                                    class="border-b border-slate-100 p-2.5 dark:border-gray-800"
+                                    class="flex items-center justify-between gap-2 border-b border-slate-100 p-2.5 dark:border-gray-800"
                                 >
-                                    <p
-                                        class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
-                                    >
-                                        {{ user.name }}
-                                    </p>
-                                    <p
-                                        class="truncate text-[11px] font-medium text-slate-400 dark:text-gray-500"
+                                    <div class="min-w-0 flex-1">
+                                        <p
+                                            class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
+                                        >
+                                            {{ user.name }}
+                                        </p>
+                                        <p
+                                            class="truncate text-[11px] font-medium text-slate-400 dark:text-gray-500"
+                                        >
+                                            {{ user.email }}
+                                        </p>
+                                    </div>
+
+                                    <Link
+                                        href="/logout"
+                                        method="post"
+                                        as="button"
+                                        class="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 active:scale-95 dark:text-gray-500 dark:hover:bg-rose-950/50 dark:hover:text-rose-400"
+                                        title="Sign out"
+                                        aria-label="Sign out"
+                                        @click="closeDropdown"
                                     >
-                                        {{ user.email }}
-                                    </p>
+                                        <LogOut class="h-3.5 w-3.5" />
+                                    </Link>
                                 </div>
 
                                 <div class="py-1">
diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index 74f4376..a96d4cc 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -113,10 +113,12 @@ const hasUserCommented = computed(() => {
     if (!currentUser.value?.id) {
         return false;
     }
+
     const currentId = Number(currentUser.value.id);
 
     return props.comments.some((c: any) => {
         const commentUserId = Number(c.user_id ?? c.user?.id);
+
         return commentUserId === currentId;
     });
 });
diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index 75f6273..370ccb5 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -18,7 +18,6 @@ import {
     Heart,
     Instagram,
     LogIn,
-    LogOut,
     MessageSquare,
     UploadCloud,
     Users,
@@ -213,7 +212,6 @@ const localAppreciationsCount = ref(props.appreciationsCount);
 const showAppreciatorsModal = ref(false);
 const showAppreciatingModal = ref(false);
 const showGuestModal = ref(false);
-const showLogoutModal = ref(false);
 
 watch(
     () => props.isAppreciated,
@@ -418,16 +416,6 @@ const handleAppreciate = () => {
                                 <Edit3 class="h-3.5 w-3.5" />
                                 <span>Edit</span>
                             </Link>
-
-                            <button
-                                type="button"
-                                @click="showLogoutModal = true"
-                                class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-2xs transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600 active:scale-95 sm:h-8.5 sm:w-8.5 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-rose-900/60 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                title="Sign out"
-                                aria-label="Sign out"
-                            >
-                                <LogOut class="h-3.5 w-3.5" />
-                            </button>
                         </template>
 
                         <button
@@ -1346,63 +1334,4 @@ const handleAppreciate = () => {
             </div>
         </div>
     </Teleport>
-
-    <!-- Sign Out Confirmation Modal -->
-    <Teleport to="body">
-        <div
-            v-if="showLogoutModal"
-            class="fixed inset-0 z-50 flex items-center justify-center p-4"
-        >
-            <div
-                @click="showLogoutModal = false"
-                class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity"
-            ></div>
-
-            <div
-                class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-100 bg-white p-6 text-center shadow-2xl transition-all sm:p-7 dark:border-gray-800 dark:bg-gray-900"
-            >
-                <button
-                    @click="showLogoutModal = false"
-                    class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
-                >
-                    <X class="h-4 w-4" />
-                </button>
-
-                <div
-                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
-                >
-                    <LogOut class="h-6 w-6" />
-                </div>
-
-                <h3
-                    class="mt-3.5 text-base font-bold text-slate-900 dark:text-gray-100"
-                >
-                    Sign out of your account?
-                </h3>
-                <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
-                    Are you sure you want to log out of HSCStack? You will need
-                    to sign in again to access your private data.
-                </p>
-
-                <div class="mt-5 flex gap-2.5">
-                    <button
-                        type="button"
-                        @click="showLogoutModal = false"
-                        class="flex-1 cursor-pointer rounded-xl border border-slate-200 py-2.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                        Cancel
-                    </button>
-                    <Link
-                        href="/logout"
-                        method="post"
-                        as="button"
-                        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-rose-600 py-2.5 text-xs font-bold text-white shadow-xs transition hover:bg-rose-700 active:scale-95 dark:bg-rose-600 dark:hover:bg-rose-500"
-                    >
-                        <LogOut class="h-3.5 w-3.5" />
-                        <span>Sign Out</span>
-                    </Link>
-                </div>
-            </div>
-        </div>
-    </Teleport>
 </template>

From 8336de3d6e6dcf9f648c77b8e07c819620d16340 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 18:30:27 +0600
Subject: [PATCH 3/4] feat(mobile): add quick logout button to mobile drawer
 user card

---
 resources/js/components/NavBar.vue | 79 ++++++++++++++++++------------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/resources/js/components/NavBar.vue b/resources/js/components/NavBar.vue
index 7b22919..3c41c8a 100644
--- a/resources/js/components/NavBar.vue
+++ b/resources/js/components/NavBar.vue
@@ -534,40 +534,57 @@ onBeforeUnmount(() => {
                         <div class="flex-1 space-y-6 overflow-y-auto px-4 py-4">
                             <!-- User Card or Guest Login CTA -->
                             <div v-if="user">
-                                <Link
-                                    :href="
-                                        user.username
-                                            ? `/u/${user.username}`
-                                            : '/profile'
-                                    "
-                                    @click="closeMobileMenu"
-                                    class="flex items-center gap-3 rounded-2xl border border-slate-200/80 bg-slate-50/80 p-3 transition hover:border-slate-300 hover:bg-slate-100 dark:border-gray-800 dark:bg-gray-900/60 dark:hover:border-gray-700 dark:hover:bg-gray-900"
+                                <div
+                                    class="flex items-center justify-between gap-2 rounded-2xl border border-slate-200/80 bg-slate-50/80 p-3 transition hover:border-slate-300 dark:border-gray-800 dark:bg-gray-900/60 dark:hover:border-gray-700"
                                 >
-                                    <img
-                                        v-if="user.image_url"
-                                        :src="user.image_url"
-                                        :alt="user.name"
-                                        class="h-10 w-10 rounded-full object-cover ring-2 ring-indigo-500/20"
-                                    />
-                                    <div
-                                        v-else
-                                        class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white dark:bg-indigo-500"
+                                    <Link
+                                        :href="
+                                            user.username
+                                                ? `/u/${user.username}`
+                                                : '/profile'
+                                        "
+                                        @click="closeMobileMenu"
+                                        class="flex min-w-0 flex-1 items-center gap-3"
                                     >
-                                        {{ user.name.charAt(0).toUpperCase() }}
-                                    </div>
-                                    <div class="min-w-0 flex-1">
-                                        <p
-                                            class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
-                                        >
-                                            {{ user.name }}
-                                        </p>
-                                        <p
-                                            class="truncate text-[11px] text-slate-400 dark:text-gray-500"
+                                        <img
+                                            v-if="user.image_url"
+                                            :src="user.image_url"
+                                            :alt="user.name"
+                                            class="h-10 w-10 rounded-full object-cover ring-2 ring-indigo-500/20"
+                                        />
+                                        <div
+                                            v-else
+                                            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white dark:bg-indigo-500"
                                         >
-                                            {{ user.email }}
-                                        </p>
-                                    </div>
-                                </Link>
+                                            {{ user.name.charAt(0).toUpperCase() }}
+                                        </div>
+                                        <div class="min-w-0 flex-1">
+                                            <p
+                                                class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
+                                            >
+                                                {{ user.name }}
+                                            </p>
+                                            <p
+                                                class="truncate text-[11px] text-slate-400 dark:text-gray-500"
+                                            >
+                                                {{ user.email }}
+                                            </p>
+                                        </div>
+                                    </Link>
+
+                                    <!-- Quick Logout Button on Mobile -->
+                                    <Link
+                                        href="/logout"
+                                        method="post"
+                                        as="button"
+                                        @click="closeMobileMenu"
+                                        class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-xl text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 active:scale-95 dark:text-gray-500 dark:hover:bg-rose-950/50 dark:hover:text-rose-400"
+                                        title="Sign out"
+                                        aria-label="Sign out"
+                                    >
+                                        <LogOut class="h-4 w-4" />
+                                    </Link>
+                                </div>
                             </div>
 
                             <div v-else>

From c019dd8beff2d91d5892717cad91beebc8116ced Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Thu, 27 Aug 2026 18:31:27 +0600
Subject: [PATCH 4/4] feat(auth): add sign out confirmation dialog to navbar
 for desktop & mobile

---
 resources/js/components/NavBar.vue | 87 +++++++++++++++++++++++++-----
 1 file changed, 75 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/NavBar.vue b/resources/js/components/NavBar.vue
index 3c41c8a..a1529b9 100644
--- a/resources/js/components/NavBar.vue
+++ b/resources/js/components/NavBar.vue
@@ -65,6 +65,13 @@ const isHomeOrSsc = computed(
 
 const showAuthModal = ref(false);
 const authModalMessage = ref('অনুগ্রহ করে সার্চ ফিচার ব্যবহার করতে লগইন করুন।');
+const showLogoutModal = ref(false);
+
+const openLogoutModal = () => {
+    dropdownOpen.value = false;
+    mobileMenuOpen.value = false;
+    showLogoutModal.value = true;
+};
 
 const searchActive = ref(false);
 const searchInputRef = ref<HTMLInputElement | null>(null);
@@ -390,17 +397,15 @@ onBeforeUnmount(() => {
                                         </p>
                                     </div>
 
-                                    <Link
-                                        href="/logout"
-                                        method="post"
-                                        as="button"
+                                    <button
+                                        type="button"
+                                        @click="openLogoutModal"
                                         class="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 active:scale-95 dark:text-gray-500 dark:hover:bg-rose-950/50 dark:hover:text-rose-400"
                                         title="Sign out"
                                         aria-label="Sign out"
-                                        @click="closeDropdown"
                                     >
                                         <LogOut class="h-3.5 w-3.5" />
-                                    </Link>
+                                    </button>
                                 </div>
 
                                 <div class="py-1">
@@ -573,17 +578,15 @@ onBeforeUnmount(() => {
                                     </Link>
 
                                     <!-- Quick Logout Button on Mobile -->
-                                    <Link
-                                        href="/logout"
-                                        method="post"
-                                        as="button"
-                                        @click="closeMobileMenu"
+                                    <button
+                                        type="button"
+                                        @click="openLogoutModal"
                                         class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-xl text-slate-400 transition hover:bg-rose-50 hover:text-rose-600 active:scale-95 dark:text-gray-500 dark:hover:bg-rose-950/50 dark:hover:text-rose-400"
                                         title="Sign out"
                                         aria-label="Sign out"
                                     >
                                         <LogOut class="h-4 w-4" />
-                                    </Link>
+                                    </button>
                                 </div>
                             </div>
 
@@ -787,5 +790,65 @@ onBeforeUnmount(() => {
                 </Transition>
             </div>
         </Teleport>
+
+        <!-- Sign Out Confirmation Modal -->
+        <Teleport to="body">
+            <div
+                v-if="showLogoutModal"
+                class="fixed inset-0 z-50 flex items-center justify-center p-4"
+            >
+                <div
+                    @click="showLogoutModal = false"
+                    class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity dark:bg-black/60"
+                ></div>
+
+                <div
+                    class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-100 bg-white p-6 text-center shadow-2xl transition-all sm:p-7 dark:border-gray-800 dark:bg-gray-900"
+                >
+                    <button
+                        @click="showLogoutModal = false"
+                        class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
+                    >
+                        <X class="h-4 w-4" />
+                    </button>
+
+                    <div
+                        class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
+                    >
+                        <LogOut class="h-6 w-6" />
+                    </div>
+
+                    <h3
+                        class="mt-3.5 text-base font-bold text-slate-900 dark:text-gray-100"
+                    >
+                        Sign out of your account?
+                    </h3>
+                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                        Are you sure you want to log out of HSCStack? You will need
+                        to sign in again to access your account features.
+                    </p>
+
+                    <div class="mt-5 flex gap-2.5">
+                        <button
+                            type="button"
+                            @click="showLogoutModal = false"
+                            class="flex-1 cursor-pointer rounded-xl border border-slate-200 py-2.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                        >
+                            Cancel
+                        </button>
+                        <Link
+                            href="/logout"
+                            method="post"
+                            as="button"
+                            @click="showLogoutModal = false"
+                            class="inline-flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-xl bg-rose-600 py-2.5 text-xs font-bold text-white shadow-xs transition hover:bg-rose-700 active:scale-95 dark:bg-rose-600 dark:hover:bg-rose-500"
+                        >
+                            <LogOut class="h-3.5 w-3.5" />
+                            <span>Sign Out</span>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </Teleport>
     </nav>
 </template>