From 9be883cbafef5adc333e2aec93804e60e59494b2 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Sat, 21 Feb 2026 00:32:33 +0700
Subject: [PATCH] Improve mobile dashboard menus and keyword actions

---
 app/resources/views/dashboard/app.blade.php   | 36 ++++++++--------
 .../views/dashboard/user/keywords.blade.php   | 43 +++++++++++++++++--
 2 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/app/resources/views/dashboard/app.blade.php b/app/resources/views/dashboard/app.blade.php
index d42a966..8bcaa01 100644
--- a/app/resources/views/dashboard/app.blade.php
+++ b/app/resources/views/dashboard/app.blade.php
@@ -105,47 +105,47 @@
                             <button id="quick-action-btn" class="rounded-full bg-white/10 text-white border border-white/10 px-5 py-2 text-sm font-semibold hover:bg-white/20 transition-colors">
                                 Quick action
                             </button>
-                            <div id="quick-action-menu" class="hidden absolute right-0 mt-2 w-60 rounded-2xl border border-slate-200 bg-white p-2 shadow-xl dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
+                            <div id="quick-action-menu" class="hidden absolute left-0 sm:left-auto sm:right-0 mt-2 w-60 max-w-[calc(100vw-2rem)] rounded-2xl border border-slate-200 bg-white p-2 shadow-xl z-50 dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
                                 <div class="text-[11px] uppercase tracking-[0.3em] text-slate-500 px-3 py-2 dark:text-gray-500">Actions</div>
                                 @if ($isAdmin)
-                                    <a href="{{ route('dashboard.admin.users') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.admin.users') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="users" class="w-4 h-4"></i><span>Manage users</span>
                                     </a>
-                                    <a href="{{ route('dashboard.admin.subscriptions') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.admin.subscriptions') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="credit-card" class="w-4 h-4"></i><span>Grant subscription</span>
                                     </a>
-                                    <a href="{{ route('dashboard.admin.catalog') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.admin.catalog') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="package-search" class="w-4 h-4"></i><span>Manage catalog</span>
                                     </a>
-                                    <a href="{{ route('dashboard.admin.webhooks') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.admin.webhooks') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="webhook" class="w-4 h-4"></i><span>Review webhooks</span>
                                     </a>
-                                    <a href="{{ route('dashboard.admin.audit_logs') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.admin.audit_logs') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="list-checks" class="w-4 h-4"></i><span>Audit logs</span>
                                     </a>
-                                    <a href="{{ route('dashboard.admin.settings') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.admin.settings') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="settings" class="w-4 h-4"></i><span>Update settings</span>
                                     </a>
-                                    <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="user-round" class="w-4 h-4"></i><span>Edit profile</span>
                                     </a>
                                 @else
-                                    <a href="{{ route('dashboard.keywords') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.keywords') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="hash" class="w-4 h-4"></i><span>My keywords</span>
                                     </a>
-                                    <a href="{{ route('dashboard.keywords') }}#add" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.keywords') }}#add" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="plus-circle" class="w-4 h-4"></i><span>Add keyword</span>
                                     </a>
-                                    <a href="{{ route('dashboard.api-keys') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.api-keys') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="key-round" class="w-4 h-4"></i><span>Manage API keys</span>
                                     </a>
-                                    <a href="{{ route('dashboard.billing') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.billing') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="badge-dollar-sign" class="w-4 h-4"></i><span>Billing overview</span>
                                     </a>
-                                    <a href="{{ route('dashboard.preferences') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.preferences') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="settings-2" class="w-4 h-4"></i><span>Preferences</span>
                                     </a>
-                                    <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="user-round" class="w-4 h-4"></i><span>Edit profile</span>
                                     </a>
                                 @endif
@@ -156,15 +156,15 @@
                                 <button id="export-btn" class="rounded-full border border-white/10 px-5 py-2 text-sm font-semibold text-gray-200 hover:bg-white/5 transition-colors">
                                     Export
                                 </button>
-                                <div id="export-menu" class="hidden absolute right-0 mt-2 w-56 rounded-2xl border border-slate-200 bg-white p-2 shadow-xl dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
+                                <div id="export-menu" class="hidden absolute left-0 sm:left-auto sm:right-0 mt-2 w-56 max-w-[calc(100vw-2rem)] rounded-2xl border border-slate-200 bg-white p-2 shadow-xl z-50 dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
                                     <div class="text-[11px] uppercase tracking-[0.3em] text-slate-500 px-3 py-2 dark:text-gray-500">Export CSV</div>
-                                    <a href="{{ route('dashboard.admin.export', array_merge(['type' => 'users'], $exportQuery)) }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.admin.export', array_merge(['type' => 'users'], $exportQuery)) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="users" class="w-4 h-4"></i><span>Users</span>
                                     </a>
-                                    <a href="{{ route('dashboard.admin.export', array_merge(['type' => 'subscriptions'], $exportQuery)) }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.admin.export', array_merge(['type' => 'subscriptions'], $exportQuery)) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="credit-card" class="w-4 h-4"></i><span>Subscriptions</span>
                                     </a>
-                                    <a href="{{ route('dashboard.admin.export', array_merge(['type' => 'webhooks'], $exportQuery)) }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
+                                    <a href="{{ route('dashboard.admin.export', array_merge(['type' => 'webhooks'], $exportQuery)) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
                                         <i data-lucide="webhook" class="w-4 h-4"></i><span>Webhooks</span>
                                     </a>
                                 </div>
diff --git a/app/resources/views/dashboard/user/keywords.blade.php b/app/resources/views/dashboard/user/keywords.blade.php
index b94557e..bf0942f 100644
--- a/app/resources/views/dashboard/user/keywords.blade.php
+++ b/app/resources/views/dashboard/user/keywords.blade.php
@@ -86,7 +86,7 @@
                     <th class="px-4 py-3 text-left">Keyword</th>
                     <th class="px-4 py-3 text-left">Language</th>
                     <th class="px-4 py-3 text-left">Status</th>
-                    <th class="px-4 py-3 text-right">Actions</th>
+                    <th class="hidden px-4 py-3 text-right md:table-cell">Actions</th>
                 </tr>
             </thead>
             <tbody id="keyword-table">
@@ -104,7 +104,44 @@
                                 </div>
                             </div>
                         </td>
-                        <td class="px-4 py-3 font-semibold text-white">{{ $item->keyword }}</td>
+                        <td class="px-4 py-3 font-semibold text-white">
+                            {{ $item->keyword }}
+                            @php
+                                $isActiveMobile = (bool) ($item->is_active ?? true);
+                                $canActivateMobile = $isActiveMobile || $isPersonal || !$limitReached;
+                            @endphp
+                            <div class="mt-3 flex flex-wrap gap-2 md:hidden">
+                                <button
+                                    type="button"
+                                    class="edit-btn rounded-full border border-white/10 px-3 py-1.5 text-xs text-gray-200 hover:bg-white/10"
+                                    data-id="{{ $item->id }}"
+                                    data-emoji="{{ $item->emoji_slug }}"
+                                    data-keyword="{{ $item->keyword }}"
+                                    data-lang="{{ $item->lang }}"
+                                >
+                                    Edit
+                                </button>
+                                <form method="POST" action="{{ route('dashboard.keywords.toggle_active', $item->id) }}" class="inline">
+                                    @csrf
+                                    @method('PUT')
+                                    <input type="hidden" name="is_active" value="{{ $isActiveMobile ? '0' : '1' }}">
+                                    <button
+                                        type="submit"
+                                        class="rounded-full border border-white/10 px-3 py-1.5 text-xs text-gray-200 hover:bg-white/10 {{ (!$canActivateMobile && !$isActiveMobile) ? 'opacity-50 cursor-not-allowed' : '' }}"
+                                        {{ (!$canActivateMobile && !$isActiveMobile) ? 'disabled' : '' }}
+                                    >
+                                        {{ $isActiveMobile ? 'Deactivate' : 'Activate' }}
+                                    </button>
+                                </form>
+                                <form method="POST" action="{{ route('dashboard.keywords.delete', $item->id) }}" class="inline">
+                                    @csrf
+                                    @method('DELETE')
+                                    <button type="submit" class="rounded-full border border-white/10 px-3 py-1.5 text-xs text-gray-200 hover:bg-white/10">
+                                        Delete
+                                    </button>
+                                </form>
+                            </div>
+                        </td>
                         <td class="px-4 py-3 text-xs uppercase tracking-[0.15em] text-gray-400">{{ $item->lang ?? 'und' }}</td>
                         <td class="px-4 py-3">
                             @php
@@ -115,7 +152,7 @@
                                 {{ $isActive ? 'Active' : 'Inactive' }}
                             </span>
                         </td>
-                        <td class="px-4 py-3 text-right">
+                        <td class="hidden px-4 py-3 text-right md:table-cell">
                             <button
                                 type="button"
                                 class="edit-btn rounded-full border border-white/10 px-3 py-1 text-xs text-gray-200 hover:bg-white/10"