From b5fe6339569dcb7ae00e0e285684b2005f2d05d9 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Sat, 29 Aug 2026 14:14:30 +0600
Subject: [PATCH 1/3] feat(admin): support username field in user management
 and quick ban action in user list

---
 app/Http/Requests/User/StoreUserRequest.php   |   1 +
 app/Http/Requests/User/UpdateUserRequest.php  |   9 +
 resources/js/components/admin/UserRow.vue     |  60 +++++-
 .../js/pages/admin/users/CreateOrEdit.vue     | 187 ++++--------------
 4 files changed, 99 insertions(+), 158 deletions(-)

diff --git a/app/Http/Requests/User/StoreUserRequest.php b/app/Http/Requests/User/StoreUserRequest.php
index 6c40ad0..ca451fe 100644
--- a/app/Http/Requests/User/StoreUserRequest.php
+++ b/app/Http/Requests/User/StoreUserRequest.php
@@ -25,6 +25,7 @@ public function rules(): array
         return [
 
             'name' => ['required', 'string', 'max:255'],
+            'username' => ['nullable', 'string', 'min:3', 'max:30', 'regex:/^[a-zA-Z0-9_]+$/', 'unique:users,username'],
             'email' => ['required', 'email', 'unique:users,email'],
             'role' => ['nullable', 'string'],
             'permissions' => ['nullable', 'array'],
diff --git a/app/Http/Requests/User/UpdateUserRequest.php b/app/Http/Requests/User/UpdateUserRequest.php
index 2c6a2ab..8a2d28b 100644
--- a/app/Http/Requests/User/UpdateUserRequest.php
+++ b/app/Http/Requests/User/UpdateUserRequest.php
@@ -26,6 +26,15 @@ public function rules(): array
 
         $rules = [
             'name' => ['sometimes', 'string', 'max:255'],
+            'username' => [
+                'sometimes',
+                'nullable',
+                'string',
+                'min:3',
+                'max:30',
+                'regex:/^[a-zA-Z0-9_]+$/',
+                'unique:users,username,'.$user->id,
+            ],
             'email' => ['sometimes', 'email', 'unique:users,email,'.$user->id],
             'file' => ['sometimes', 'nullable', 'image', 'max:2048'],
             'about' => ['sometimes', 'nullable', 'string'],
diff --git a/resources/js/components/admin/UserRow.vue b/resources/js/components/admin/UserRow.vue
index 114087d..c3c9f31 100644
--- a/resources/js/components/admin/UserRow.vue
+++ b/resources/js/components/admin/UserRow.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Link, router, usePage } from '@inertiajs/vue3';
 import { LogIn, Pencil, Trash2, Ban } from 'lucide-vue-next';
+import { ref } from 'vue';
+import ChatBanModal from '@/components/ChatBanModal.vue';
 import { usePermissions } from '@/lib/usePermissions';
 
 const { can } = usePermissions();
@@ -11,6 +13,7 @@ defineProps({
 
 const page = usePage();
 const userId = page.props.auth.user.id;
+const isBanModalOpen = ref(false);
 
 const isChatBanned = (user: any) => {
     if (!user?.chat_banned_until) {
@@ -20,6 +23,10 @@ const isChatBanned = (user: any) => {
     return new Date(user.chat_banned_until).getTime() > Date.now();
 };
 
+const openBanModal = () => {
+    isBanModalOpen.value = true;
+};
+
 const getRoleBadgeStyles = (role: string) => {
     switch (role) {
         case 'admin':
@@ -59,22 +66,30 @@ const deleteUser = (id: number) => {
                 : '',
         ]"
     >
-        <!-- Left: User Avatar + Name + Email + Role -->
-        <div class="flex min-w-0 flex-1 items-center gap-3">
+        <!-- Left: User Avatar + Name + Email + Role (Clickable to profile) -->
+        <Link
+            :href="user.username ? `/u/${user.username}` : '#'"
+            class="flex min-w-0 flex-1 cursor-pointer items-center gap-3"
+        >
             <div
-                class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-black/5 bg-slate-100 text-xs font-bold text-slate-700 uppercase sm:h-10 sm:w-10 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300"
+                class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-black/5 bg-slate-100 text-xs font-bold text-slate-700 uppercase sm:h-10 sm:w-10 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300"
             >
-                {{ user.name.charAt(0) }}
+                <img
+                    v-if="user.image_url || user.image_path"
+                    :src="user.image_url || '/storage/' + user.image_path"
+                    :alt="user.name"
+                    class="h-full w-full object-cover"
+                />
+                <span v-else>{{ user.name.charAt(0) }}</span>
             </div>
 
             <div class="flex min-w-0 flex-col">
                 <div class="flex flex-wrap items-center gap-2">
-                    <Link
-                        :href="user.username ? `/u/${user.username}` : '#'"
-                        class="text-sm font-semibold break-words text-slate-900 transition-colors hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
+                    <span
+                        class="text-sm font-semibold break-words text-slate-900 transition-colors group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
                     >
                         {{ user.name }}
-                    </Link>
+                    </span>
 
                     <span
                         v-if="user.id === userId"
@@ -106,13 +121,14 @@ const deleteUser = (id: number) => {
                     {{ user.email }}
                 </p>
             </div>
-        </div>
+        </Link>
 
         <!-- Right: Actions -->
         <div
             v-if="
                 (user.id !== userId && can('impersonate users')) ||
                 can('edit users') ||
+                can('manage chat') ||
                 (user.id !== userId && can('delete users'))
             "
             class="flex shrink-0 items-center gap-1"
@@ -128,6 +144,25 @@ const deleteUser = (id: number) => {
                 <LogIn class="h-4 w-4" :stroke-width="1.8" />
             </button>
 
+            <button
+                v-if="can('manage chat') || can('edit users')"
+                type="button"
+                @click="openBanModal"
+                class="rounded-lg p-1.5 transition-colors"
+                :class="
+                    isChatBanned(user)
+                        ? 'text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/40'
+                        : 'text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:text-gray-500 dark:hover:bg-rose-950/40 dark:hover:text-rose-400'
+                "
+                :title="
+                    isChatBanned(user)
+                        ? 'Edit chat ban timer / Unban'
+                        : 'Ban from chat'
+                "
+            >
+                <Ban class="h-4 w-4" :stroke-width="1.8" />
+            </button>
+
             <Link
                 v-if="can('edit users')"
                 :href="`/admin/users/edit/${user.id}`"
@@ -147,5 +182,12 @@ const deleteUser = (id: number) => {
                 <Trash2 class="h-4 w-4" :stroke-width="1.8" />
             </button>
         </div>
+
+        <!-- Chat Ban Modal -->
+        <ChatBanModal
+            :is-open="isBanModalOpen"
+            :user="user"
+            @close="isBanModalOpen = false"
+        />
     </div>
 </template>
diff --git a/resources/js/pages/admin/users/CreateOrEdit.vue b/resources/js/pages/admin/users/CreateOrEdit.vue
index a022777..59a78e3 100644
--- a/resources/js/pages/admin/users/CreateOrEdit.vue
+++ b/resources/js/pages/admin/users/CreateOrEdit.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
 import { Head, Link, useForm } from '@inertiajs/vue3';
-import {
-    UserPlus,
-    Loader2,
-    Save,
-    Ban,
-    Clock,
-    CheckCircle,
-} from 'lucide-vue-next';
+import { UserPlus, Loader2, Save } from 'lucide-vue-next';
 import { watch } from 'vue';
 
 const props = defineProps({
@@ -15,6 +8,8 @@ const props = defineProps({
     permissions: Array,
 });
 
+const availablePermissions = props.permissions;
+
 const roles = [
     { value: '', label: 'Student (No Role)' },
     { value: 'admin', label: 'Admin' },
@@ -22,34 +17,13 @@ const roles = [
     { value: 'manager', label: 'Manager' },
 ];
 
-const availablePermissions = props.permissions;
-
-const formatForDatetimeLocal = (dateString?: string | null) => {
-    if (!dateString) {
-        return '';
-    }
-
-    const d = new Date(dateString);
-
-    if (isNaN(d.getTime())) {
-        return '';
-    }
-
-    const offset = d.getTimezoneOffset() * 60000;
-    const localISOTime = new Date(d.getTime() - offset)
-        .toISOString()
-        .slice(0, 16);
-
-    return localISOTime;
-};
-
 const form = useForm({
     _method: props.user ? 'PATCH' : 'POST',
     name: props.user?.name || '',
+    username: props.user?.username || '',
     email: props.user?.email || '',
     role: props.user?.roles?.[0]?.name || '',
     permissions: props.user?.permissions?.map((p) => p.name) || ['view admin'],
-    chat_banned_until: formatForDatetimeLocal(props.user?.chat_banned_until),
 
     file: null,
     about: props.user?.about || '',
@@ -60,23 +34,6 @@ const form = useForm({
     instagram: props.user?.instagram || '',
 });
 
-const banPresets = [
-    { label: '1 Hour', hours: 1 },
-    { label: '24 Hours', hours: 24 },
-    { label: '3 Days', hours: 72 },
-    { label: '7 Days', hours: 168 },
-    { label: '30 Days', hours: 720 },
-];
-
-const applyBanPreset = (hours: number) => {
-    const futureDate = new Date(Date.now() + hours * 60 * 60 * 1000);
-    form.chat_banned_until = formatForDatetimeLocal(futureDate.toISOString());
-};
-
-const clearBan = () => {
-    form.chat_banned_until = '';
-};
-
 watch(
     () => form.role,
     (newRole) => {
@@ -131,7 +88,7 @@ const submitForm = () => {
         </div>
 
         <form @submit.prevent="submitForm" class="max-w-3xl space-y-6">
-            <!-- Base fields section (Name, Email) -->
+            <!-- Base fields section (Name, Username, Email) -->
             <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                 <div>
                     <label
@@ -161,6 +118,39 @@ const submitForm = () => {
                 </div>
 
                 <div>
+                    <label
+                        for="username"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                        >Username</label
+                    >
+                    <div class="relative">
+                        <span
+                            class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-sm font-medium text-slate-400 dark:text-gray-500"
+                            >@</span
+                        >
+                        <input
+                            v-model="form.username"
+                            type="text"
+                            id="username"
+                            placeholder="johndoe"
+                            :disabled="form.processing"
+                            class="w-full rounded-lg border py-2.5 pr-4 pl-8 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
+                            :class="
+                                form.errors.username
+                                    ? 'border-rose-500 focus:ring-rose-500/20'
+                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
+                            "
+                        />
+                    </div>
+                    <p
+                        v-if="form.errors.username"
+                        class="mt-1 text-sm text-rose-600"
+                    >
+                        {{ form.errors.username }}
+                    </p>
+                </div>
+
+                <div class="md:col-span-2">
                     <label
                         for="email"
                         class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
@@ -284,107 +274,6 @@ const submitForm = () => {
                 </p>
             </div>
 
-            <!-- GLOBAL CHAT MODERATION / BAN SECTION -->
-            <div
-                class="space-y-4 rounded-xl border border-rose-200 bg-rose-50/30 p-5 dark:border-rose-900/40 dark:bg-rose-950/10"
-            >
-                <div class="flex items-start justify-between">
-                    <div>
-                        <h3
-                            class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            <Ban class="h-4 w-4 text-rose-500" />
-                            Global Chat Moderation
-                        </h3>
-                        <p
-                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
-                        >
-                            Restrict this user from sending messages in the
-                            Global Student Chat until a specified date & time.
-                        </p>
-                    </div>
-
-                    <span
-                        v-if="form.chat_banned_until"
-                        class="inline-flex items-center gap-1 rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-bold text-rose-700 dark:bg-rose-900/50 dark:text-rose-300"
-                    >
-                        <Clock class="h-3 w-3" />
-                        Chat Banned
-                    </span>
-                    <span
-                        v-else
-                        class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-bold text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300"
-                    >
-                        <CheckCircle class="h-3 w-3" />
-                        Active
-                    </span>
-                </div>
-
-                <!-- Quick Presets -->
-                <div>
-                    <label
-                        class="mb-1.5 block text-xs font-semibold text-slate-600 dark:text-gray-400"
-                    >
-                        Quick Ban Presets:
-                    </label>
-                    <div class="flex flex-wrap gap-2">
-                        <button
-                            v-for="preset in banPresets"
-                            :key="preset.label"
-                            type="button"
-                            @click="applyBanPreset(preset.hours)"
-                            :disabled="form.processing"
-                            class="cursor-pointer rounded-lg border border-rose-200 bg-white px-2.5 py-1 text-xs font-medium text-rose-700 transition hover:bg-rose-50 active:scale-95 disabled:opacity-50 dark:border-rose-800/60 dark:bg-gray-800 dark:text-rose-300 dark:hover:bg-rose-900/30"
-                        >
-                            +{{ preset.label }}
-                        </button>
-
-                        <button
-                            v-if="form.chat_banned_until"
-                            type="button"
-                            @click="clearBan"
-                            :disabled="form.processing"
-                            class="cursor-pointer rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-100 active:scale-95 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                        >
-                            Unban (Clear)
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Custom Datetime Input -->
-                <div class="max-w-md">
-                    <label
-                        for="chat_banned_until"
-                        class="mb-1.5 block text-xs font-semibold text-slate-700 dark:text-gray-300"
-                    >
-                        Ban Until Date & Time:
-                    </label>
-                    <input
-                        v-model="form.chat_banned_until"
-                        type="datetime-local"
-                        id="chat_banned_until"
-                        :disabled="form.processing"
-                        class="w-full rounded-lg border bg-white px-4 py-2 text-xs font-medium transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.chat_banned_until
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-rose-500 focus:ring-rose-500/20 dark:border-gray-600'
-                        "
-                    />
-                    <p
-                        v-if="form.errors.chat_banned_until"
-                        class="mt-1 text-xs text-rose-600"
-                    >
-                        {{ form.errors.chat_banned_until }}
-                    </p>
-                    <p
-                        class="mt-1 text-[11px] text-slate-500 dark:text-gray-400"
-                    >
-                        Leave blank if the user should not be banned.
-                    </p>
-                </div>
-            </div>
-
             <!-- Profile Meta details section -->
             <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                 <div>

From 7b5af8e9ebabd1caf493d71340aea39253a4a1e8 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Sat, 29 Aug 2026 14:14:39 +0600
Subject: [PATCH 2/3] feat(chat): enforce single reaction per user and keep ban
 action accessible on deleted messages

---
 app/Events/ChatMessageDeleted.php        |   4 +-
 app/Events/ChatMessageReacted.php        |   4 +-
 app/Events/ChatMessageSent.php           |   4 +-
 app/Events/ChatSettingsUpdated.php       |   4 +-
 app/Http/Controllers/ChatController.php  |  17 ++-
 resources/js/components/ChatBanModal.vue |  18 +--
 resources/js/pages/Chat/Index.vue        | 149 ++++++++++++++++-------
 7 files changed, 143 insertions(+), 57 deletions(-)

diff --git a/app/Events/ChatMessageDeleted.php b/app/Events/ChatMessageDeleted.php
index c511060..a84b456 100644
--- a/app/Events/ChatMessageDeleted.php
+++ b/app/Events/ChatMessageDeleted.php
@@ -32,8 +32,10 @@ public function __construct(int $messageId, ?string $deletedAt = null)
      */
     public function broadcastOn(): array
     {
+        $channel = app()->environment('production') ? 'global-chat' : app()->environment().'.global-chat';
+
         return [
-            new Channel('global-chat'),
+            new Channel($channel),
         ];
     }
 
diff --git a/app/Events/ChatMessageReacted.php b/app/Events/ChatMessageReacted.php
index 8f6262e..eb888cc 100644
--- a/app/Events/ChatMessageReacted.php
+++ b/app/Events/ChatMessageReacted.php
@@ -32,8 +32,10 @@ public function __construct(int $messageId, array $reactions)
      */
     public function broadcastOn(): array
     {
+        $channel = app()->environment('production') ? 'global-chat' : app()->environment().'.global-chat';
+
         return [
-            new Channel('global-chat'),
+            new Channel($channel),
         ];
     }
 
diff --git a/app/Events/ChatMessageSent.php b/app/Events/ChatMessageSent.php
index de7c362..debc56a 100644
--- a/app/Events/ChatMessageSent.php
+++ b/app/Events/ChatMessageSent.php
@@ -50,8 +50,10 @@ public function __construct(ChatMessage $chatMessage)
      */
     public function broadcastOn(): array
     {
+        $channel = app()->environment('production') ? 'global-chat' : app()->environment().'.global-chat';
+
         return [
-            new Channel('global-chat'),
+            new Channel($channel),
         ];
     }
 
diff --git a/app/Events/ChatSettingsUpdated.php b/app/Events/ChatSettingsUpdated.php
index 4f917fb..cd0ec48 100644
--- a/app/Events/ChatSettingsUpdated.php
+++ b/app/Events/ChatSettingsUpdated.php
@@ -38,8 +38,10 @@ public function __construct()
      */
     public function broadcastOn(): array
     {
+        $channel = app()->environment('production') ? 'global-chat' : app()->environment().'.global-chat';
+
         return [
-            new Channel('global-chat'),
+            new Channel($channel),
         ];
     }
 
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index cf50ac3..4b4c089 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -79,6 +79,8 @@ public function index(Request $request)
 
         $allowedEmojis = (array) AppSetting::get('global_chat_allowed_emojis', ['👍', '❤️', '🔥', '😂', '🎉', '😮', '😢', '👏']);
 
+        $channelName = app()->environment('production') ? 'global-chat' : app()->environment().'.global-chat';
+
         if (! $request->wantsJson() && ! $request->is('api/*')) {
             return Inertia::render('Chat/Index', [
                 'chatState' => [
@@ -92,6 +94,7 @@ public function index(Request $request)
                     'can_delete' => (bool) $user?->can('manage chat'),
                     'reaction_emojis' => $allowedEmojis,
                     'messages' => $messages,
+                    'channel_name' => $channelName,
                     'pusher_key' => config('broadcasting.connections.pusher.key'),
                     'pusher_cluster' => config('broadcasting.connections.pusher.options.cluster', 'ap2'),
                 ],
@@ -109,6 +112,7 @@ public function index(Request $request)
             'can_delete' => (bool) $user?->can('manage chat'),
             'reaction_emojis' => $allowedEmojis,
             'messages' => $messages,
+            'channel_name' => $channelName,
             'pusher_key' => config('broadcasting.connections.pusher.key'),
             'pusher_cluster' => config('broadcasting.connections.pusher.options.cluster', 'ap2'),
         ]);
@@ -362,14 +366,19 @@ public function toggleReaction(Request $request, ChatMessage $message)
             ], 422);
         }
 
-        $existing = $message->reactions()
+        $existingReaction = $message->reactions()
             ->where('user_id', $user->id)
-            ->where('emoji', $emoji)
             ->first();
 
-        if ($existing) {
-            $existing->delete();
+        if ($existingReaction && $existingReaction->emoji === $emoji) {
+            // Same emoji clicked again -> toggle off / remove
+            $existingReaction->delete();
         } else {
+            // Different emoji or no previous reaction -> remove existing and add new
+            if ($existingReaction) {
+                $existingReaction->delete();
+            }
+
             $message->reactions()->create([
                 'user_id' => $user->id,
                 'emoji' => $emoji,
diff --git a/resources/js/components/ChatBanModal.vue b/resources/js/components/ChatBanModal.vue
index 7f296d6..6eb9fad 100644
--- a/resources/js/components/ChatBanModal.vue
+++ b/resources/js/components/ChatBanModal.vue
@@ -24,11 +24,13 @@ const banUntilInput = ref('');
 const isSubmittingBan = ref(false);
 
 const banPresets = [
-    { label: '1 Hour', hours: 1 },
-    { label: '24 Hours', hours: 24 },
-    { label: '3 Days', hours: 72 },
-    { label: '7 Days', hours: 168 },
-    { label: '30 Days', hours: 720 },
+    { label: '3 Mins', minutes: 3 },
+    { label: '5 Mins', minutes: 5 },
+    { label: '15 Mins', minutes: 15 },
+    { label: '1 Hour', minutes: 60 },
+    { label: '24 Hours', minutes: 24 * 60 },
+    { label: '3 Days', minutes: 3 * 24 * 60 },
+    { label: '7 Days', minutes: 7 * 24 * 60 },
 ];
 
 const formatForDatetimeLocal = (dateString?: string | null) => {
@@ -70,8 +72,8 @@ const formatDate = (isoString?: string | null) => {
     }
 };
 
-const applyBanPreset = (hours: number) => {
-    const futureDate = new Date(Date.now() + hours * 60 * 60 * 1000);
+const applyBanPreset = (minutes: number) => {
+    const futureDate = new Date(Date.now() + minutes * 60 * 1000);
     banUntilInput.value = formatForDatetimeLocal(futureDate.toISOString());
 };
 
@@ -209,7 +211,7 @@ const submitBan = () => {
                                     v-for="preset in banPresets"
                                     :key="preset.label"
                                     type="button"
-                                    @click="applyBanPreset(preset.hours)"
+                                    @click="applyBanPreset(preset.minutes)"
                                     class="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-700 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
                                 >
                                     +{{ preset.label }}
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 33f587d..3fe010b 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -75,6 +75,7 @@ const props = defineProps<{
         can_delete: boolean;
         reaction_emojis?: string[];
         messages: ChatMessageItem[];
+        channel_name?: string;
         pusher_key?: string;
         pusher_cluster?: string;
     };
@@ -84,6 +85,10 @@ const page = usePage();
 const { can } = usePermissions();
 const currentUser = computed(() => page.props.auth?.user);
 
+const chatChannelName = computed(
+    () => props.chatState.channel_name || 'global-chat',
+);
+
 const maxMessagesLimit = ref(props.chatState.max_messages ?? 200);
 const maxLengthLimit = ref(props.chatState.max_length ?? 280);
 const messages = ref<ChatMessageItem[]>(props.chatState.messages || []);
@@ -147,7 +152,10 @@ const showRulesModal = ref(false);
 const mobileActionMessage = ref<ChatMessageItem | null>(null);
 
 const openMobileActions = (msg: ChatMessageItem) => {
-    if (msg.is_deleted || msg.deleted_at) {
+    const isDeleted = Boolean(msg.is_deleted || msg.deleted_at);
+    const isStaff = Boolean(can('manage chat') || canDelete.value);
+
+    if (isDeleted && !isStaff) {
         return;
     }
 
@@ -462,7 +470,7 @@ const setupRealtime = () => {
         return;
     }
 
-    echo.channel('global-chat')
+    echo.channel(chatChannelName.value)
         .stopListening('.message.sent')
         .stopListening('.message.deleted')
         .stopListening('.message.reacted')
@@ -744,29 +752,45 @@ const reactToMessage = async (message: ChatMessageItem, emoji: string) => {
         message.reactions = [];
     }
 
-    // Optimistic UI update
-    const existing = message.reactions.find((r) => r.emoji === emoji);
+    // Optimistic UI update: Find currently reacted emoji by this user if any
+    const currentlyReacted = message.reactions.find((r) => r.reacted);
+
+    if (currentlyReacted && currentlyReacted.emoji === emoji) {
+        // Toggle off same emoji
+        currentlyReacted.reacted = false;
+        currentlyReacted.count = Math.max(0, currentlyReacted.count - 1);
 
-    if (existing) {
-        if (existing.reacted) {
-            existing.reacted = false;
-            existing.count = Math.max(0, existing.count - 1);
+        if (currentlyReacted.count === 0) {
+            message.reactions = message.reactions.filter(
+                (r) => r.emoji !== emoji,
+            );
+        }
+    } else {
+        // Remove previous reaction if any
+        if (currentlyReacted) {
+            currentlyReacted.reacted = false;
+            currentlyReacted.count = Math.max(0, currentlyReacted.count - 1);
 
-            if (existing.count === 0) {
+            if (currentlyReacted.count === 0) {
                 message.reactions = message.reactions.filter(
-                    (r) => r.emoji !== emoji,
+                    (r) => r.emoji !== currentlyReacted.emoji,
                 );
             }
+        }
+
+        // Add new reaction
+        const target = message.reactions.find((r) => r.emoji === emoji);
+
+        if (target) {
+            target.reacted = true;
+            target.count += 1;
         } else {
-            existing.reacted = true;
-            existing.count += 1;
+            message.reactions.push({
+                emoji,
+                count: 1,
+                reacted: true,
+            });
         }
-    } else {
-        message.reactions.push({
-            emoji,
-            count: 1,
-            reacted: true,
-        });
     }
 
     try {
@@ -1126,7 +1150,7 @@ onUnmounted(() => {
             }
         }
 
-        echo.leave('global-chat');
+        echo.leave(chatChannelName.value);
     }
 });
 </script>
@@ -1423,17 +1447,25 @@ onUnmounted(() => {
 
                         <!-- Floating Action Toolbar (Desktop on Hover or Active Picker) -->
                         <div
-                            v-if="!msg.is_deleted && !msg.deleted_at"
-                            class="absolute -top-3.5 right-3 items-center gap-0.5 rounded-xl border border-slate-200/90 bg-white p-0.5 shadow-md dark:border-zinc-700 dark:bg-zinc-800"
+                            v-if="
+                                (!msg.is_deleted && !msg.deleted_at) ||
+                                ((can('manage chat') || canDelete) &&
+                                    Number(currentUser?.id) !==
+                                        Number(msg.user.id))
+                            "
+                            class="absolute -top-3.5 right-3 z-30 items-center gap-0.5 rounded-xl border border-slate-200/90 bg-white p-0.5 shadow-md dark:border-zinc-700 dark:bg-zinc-800"
                             :class="[
                                 activeReactionPickerMessageId === msg.id
-                                    ? 'z-30 flex ring-1 ring-black/5 dark:ring-white/10'
-                                    : 'z-20 hidden sm:group-hover:flex',
+                                    ? 'flex ring-1 ring-black/5 dark:ring-white/10'
+                                    : 'hidden sm:group-hover:flex',
                             ]"
                             @click.stop
                         >
-                            <!-- Reaction Trigger -->
-                            <div class="relative">
+                            <!-- Reaction Trigger (active messages only) -->
+                            <div
+                                v-if="!msg.is_deleted && !msg.deleted_at"
+                                class="relative"
+                            >
                                 <button
                                     v-if="currentUser"
                                     type="button"
@@ -1470,18 +1502,23 @@ onUnmounted(() => {
                                 </div>
                             </div>
 
-                            <!-- Reply -->
+                            <!-- Reply (active messages only) -->
                             <button
-                                v-if="currentUser && canPost"
+                                v-if="
+                                    !msg.is_deleted &&
+                                    !msg.deleted_at &&
+                                    currentUser &&
+                                    canPost
+                                "
                                 type="button"
-                                @click="startReply(msg)"
+                                @click.stop="startReply(msg)"
                                 class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 dark:text-zinc-400 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
                                 title="Reply"
                             >
                                 <Reply class="h-3.5 w-3.5" />
                             </button>
 
-                            <!-- Ban (Staff) -->
+                            <!-- Ban (Staff) - stays visible on deleted messages -->
                             <button
                                 v-if="
                                     (can('manage chat') || canDelete) &&
@@ -1489,33 +1526,39 @@ onUnmounted(() => {
                                         Number(msg.user.id)
                                 "
                                 type="button"
-                                @click="openBanModal(msg.user)"
+                                @click.stop="openBanModal(msg.user)"
                                 class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:text-zinc-400 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
                                 :title="`Ban @${msg.user.username}`"
                             >
                                 <Ban class="h-3.5 w-3.5" />
                             </button>
 
-                            <!-- Report -->
+                            <!-- Report (active messages only) -->
                             <button
                                 v-if="
+                                    !msg.is_deleted &&
+                                    !msg.deleted_at &&
                                     currentUser &&
                                     Number(currentUser.id) !==
                                         Number(msg.user.id)
                                 "
                                 type="button"
-                                @click="openReportModal(msg)"
+                                @click.stop="openReportModal(msg)"
                                 class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-amber-50 hover:text-amber-600 dark:text-zinc-400 dark:hover:bg-amber-950/40 dark:hover:text-amber-400"
                                 title="Report"
                             >
                                 <Flag class="h-3.5 w-3.5" />
                             </button>
 
-                            <!-- Delete (Staff) -->
+                            <!-- Delete (Staff, active messages only) -->
                             <button
-                                v-if="canDelete"
+                                v-if="
+                                    !msg.is_deleted &&
+                                    !msg.deleted_at &&
+                                    canDelete
+                                "
                                 type="button"
-                                @click="deleteMessage(msg.id)"
+                                @click.stop="deleteMessage(msg.id)"
                                 class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:text-zinc-400 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
                                 title="Delete"
                             >
@@ -1525,7 +1568,12 @@ onUnmounted(() => {
 
                         <!-- Mobile Action Trigger (3-dots) -->
                         <button
-                            v-if="!msg.is_deleted && !msg.deleted_at"
+                            v-if="
+                                (!msg.is_deleted && !msg.deleted_at) ||
+                                ((can('manage chat') || canDelete) &&
+                                    Number(currentUser?.id) !==
+                                        Number(msg.user.id))
+                            "
                             type="button"
                             @click.stop="openMobileActions(msg)"
                             class="shrink-0 p-1 text-slate-300 hover:text-slate-600 sm:hidden dark:text-zinc-600 dark:hover:text-zinc-300"
@@ -1792,8 +1840,15 @@ onUnmounted(() => {
                     </button>
                 </div>
 
-                <!-- Quick Emoji Reactions -->
-                <div v-if="currentUser" class="my-3 flex justify-between gap-1">
+                <!-- Quick Emoji Reactions (active messages only) -->
+                <div
+                    v-if="
+                        currentUser &&
+                        !mobileActionMessage.is_deleted &&
+                        !mobileActionMessage.deleted_at
+                    "
+                    class="my-3 flex justify-between gap-1"
+                >
                     <button
                         v-for="emoji in reactionEmojis"
                         :key="emoji"
@@ -1808,7 +1863,12 @@ onUnmounted(() => {
                 <!-- Action Rows -->
                 <div class="space-y-1 pt-1 text-xs">
                     <button
-                        v-if="currentUser && canPost"
+                        v-if="
+                            currentUser &&
+                            canPost &&
+                            !mobileActionMessage.is_deleted &&
+                            !mobileActionMessage.deleted_at
+                        "
                         type="button"
                         @click="startReply(mobileActionMessage)"
                         class="flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 font-semibold text-slate-700 hover:bg-slate-100 active:scale-98 dark:text-zinc-200 dark:hover:bg-zinc-800"
@@ -1821,7 +1881,9 @@ onUnmounted(() => {
                         v-if="
                             currentUser &&
                             Number(currentUser.id) !==
-                                Number(mobileActionMessage.user.id)
+                                Number(mobileActionMessage.user.id) &&
+                            !mobileActionMessage.is_deleted &&
+                            !mobileActionMessage.deleted_at
                         "
                         type="button"
                         @click="openReportModal(mobileActionMessage)"
@@ -1831,6 +1893,7 @@ onUnmounted(() => {
                         <span>Report Message</span>
                     </button>
 
+                    <!-- Ban User (Staff) - stays visible on deleted messages -->
                     <button
                         v-if="
                             (can('manage chat') || canDelete) &&
@@ -1846,7 +1909,11 @@ onUnmounted(() => {
                     </button>
 
                     <button
-                        v-if="canDelete"
+                        v-if="
+                            canDelete &&
+                            !mobileActionMessage.is_deleted &&
+                            !mobileActionMessage.deleted_at
+                        "
                         type="button"
                         @click="deleteMessage(mobileActionMessage.id)"
                         class="flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 font-semibold text-rose-600 hover:bg-rose-50 active:scale-98 dark:text-rose-400 dark:hover:bg-rose-950/40"

From 1c0b6fb6216d1912ddb22c1f1718c7ba2d3961e9 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Sat, 29 Aug 2026 14:14:50 +0600
Subject: [PATCH 3/3] style: remove go back button and excess spacing on about
 page, remove concern attribution from footer

---
 resources/js/components/Footer.vue      | 24 ------------------------
 resources/js/pages/platform/AboutUs.vue | 15 +--------------
 2 files changed, 1 insertion(+), 38 deletions(-)

diff --git a/resources/js/components/Footer.vue b/resources/js/components/Footer.vue
index 48ef995..4b48af3 100644
--- a/resources/js/components/Footer.vue
+++ b/resources/js/components/Footer.vue
@@ -75,17 +75,6 @@ const isFullFooter = computed(() => {
                             <Instagram class="h-5 w-5" />
                         </a>
                     </div>
-
-                    <p
-                        class="mt-4 hidden text-xs font-medium text-slate-400 md:block dark:text-gray-500"
-                    >
-                        A concern of
-                        <Link
-                            href="/u/trtajim"
-                            class="text-slate-600 underline transition-colors hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400"
-                            >Tajim</Link
-                        >
-                    </p>
                 </div>
 
                 <div
@@ -195,19 +184,6 @@ const isFullFooter = computed(() => {
             <div
                 class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-100 pt-8 sm:flex-row dark:border-gray-800"
             >
-                <p
-                    class="text-center text-xs font-medium text-slate-400 md:hidden dark:text-gray-500"
-                >
-                    A concern of
-                    <a
-                        href="https://tajimz.xyz"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-slate-600 underline transition-colors hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400"
-                        >Tajim</a
-                    >
-                </p>
-
                 <p
                     class="text-center text-xs font-medium text-slate-400 sm:text-left dark:text-gray-500"
                 >
diff --git a/resources/js/pages/platform/AboutUs.vue b/resources/js/pages/platform/AboutUs.vue
index 92851bd..4e4cc1c 100644
--- a/resources/js/pages/platform/AboutUs.vue
+++ b/resources/js/pages/platform/AboutUs.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
-import { ArrowLeft } from 'lucide-vue-next';
 import UserCard from '@/components/UserCard.vue';
 
 defineProps({
     users: Array,
 });
-const goBack = () => {
-    window.history.back();
-};
 </script>
 
 <template>
@@ -25,16 +21,7 @@ const goBack = () => {
         />
     </Head>
 
-    <header class="mx-auto max-w-4xl px-4 pt-16 pb-14 text-center sm:pt-20">
-        <button
-            @click="goBack"
-            class="group mb-5 inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-indigo-600 dark:text-gray-500 dark:hover:text-indigo-400"
-        >
-            <ArrowLeft
-                class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
-            />
-            Go Back
-        </button>
+    <header class="mx-auto max-w-4xl px-4 pt-8 pb-10 text-center sm:pt-12">
         <h1
             class="text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-gray-100"
         >