From 5fa6131e541d17c1b90c07d0a3c9a9914d0224e3 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Fri, 28 Aug 2026 14:31:26 +0600
Subject: [PATCH 1/4] feat(pwa): modernize PWA install prompt design and
 integrate into Global Chat

---
 resources/js/components/PwaInstallPrompt.vue | 206 +++++++++++++++----
 resources/js/pages/Chat/Index.vue            |   4 +
 2 files changed, 169 insertions(+), 41 deletions(-)

diff --git a/resources/js/components/PwaInstallPrompt.vue b/resources/js/components/PwaInstallPrompt.vue
index 9e74ba0..4aecada 100644
--- a/resources/js/components/PwaInstallPrompt.vue
+++ b/resources/js/components/PwaInstallPrompt.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Download, X, CheckCircle2, Loader2 } from 'lucide-vue-next';
 import { ref, shallowRef, onMounted, onUnmounted } from 'vue';
 
 defineOptions({
@@ -10,10 +11,19 @@ const props = defineProps({
         type: String,
         default: 'modal',
     },
+    title: {
+        type: String,
+        default: 'HSCStack অ্যাপ ইনস্টল করুন',
+    },
+    description: {
+        type: String,
+        default: 'দ্রুতগতির ব্রাউজিং ও নিরবচ্ছিন্ন স্টাডি এক্সপেরিয়েন্স',
+    },
 });
 
 const isVisible = ref(false);
-const deferredPrompt = shallowRef(null);
+const isInstalling = ref(false);
+const deferredPrompt = shallowRef<any>(null);
 
 const handleBeforeInstall = (e: Event) => {
     e.preventDefault();
@@ -56,6 +66,7 @@ const handleInstall = async () => {
         return;
     }
 
+    isInstalling.value = true;
     try {
         await deferredPrompt.value.prompt();
         const { outcome } = await deferredPrompt.value.userChoice;
@@ -66,6 +77,8 @@ const handleInstall = async () => {
         }
     } catch (error) {
         console.error('PWA install error:', error);
+    } finally {
+        isInstalling.value = false;
     }
 };
 
@@ -81,73 +94,183 @@ const handleDismiss = () => {
 <template>
     <template v-if="isVisible && deferredPrompt">
         <Teleport v-if="variant === 'modal'" to="body">
-            <div
-                class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4 backdrop-blur-sm dark:bg-black/60"
+            <Transition
+                enter-active-class="transition duration-200 ease-out"
+                enter-from-class="opacity-0 scale-95"
+                enter-to-class="opacity-100 scale-100"
+                leave-active-class="transition duration-150 ease-in"
+                leave-from-class="opacity-100 scale-100"
+                leave-to-class="opacity-0 scale-95"
             >
                 <div
-                    class="w-full max-w-sm rounded-2xl border border-slate-100 bg-white p-6 shadow-xl dark:border-gray-700 dark:bg-gray-900"
+                    class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center sm:p-6"
+                    role="dialog"
+                    aria-modal="true"
                 >
-                    <div class="mb-4 flex items-center gap-3">
+                    <!-- Backdrop -->
+                    <div
+                        @click="handleDismiss"
+                        class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs transition-opacity dark:bg-black/75"
+                    ></div>
+
+                    <!-- Modal Box -->
+                    <div
+                        class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-200/80 bg-white/95 p-6 shadow-2xl backdrop-blur-xl transition-all sm:p-7 dark:border-gray-800 dark:bg-gray-900/95"
+                    >
+                        <!-- Ambient Blur Blob -->
                         <div
-                            class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 text-xl text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
+                            class="pointer-events-none absolute -top-20 -right-20 h-40 w-40 rounded-full bg-indigo-500/10 blur-2xl dark:bg-indigo-500/20"
+                        ></div>
+
+                        <!-- Close Button -->
+                        <button
+                            @click="handleDismiss"
+                            class="absolute top-4 right-4 flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                            title="Close"
                         >
-                            📱
+                            <X class="h-4 w-4" />
+                        </button>
+
+                        <!-- Header -->
+                        <div class="flex items-center gap-3.5">
+                            <div
+                                class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-slate-200/80 bg-slate-900 shadow-md shadow-indigo-500/10 dark:border-gray-700 dark:bg-gray-100"
+                            >
+                                <img
+                                    src="/favicon.svg"
+                                    alt="HSCStack App"
+                                    class="h-8 w-8 scale-110 object-contain"
+                                />
+                            </div>
+                            <div class="min-w-0 flex-1 pr-3">
+                                <h3
+                                    class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
+                                >
+                                    {{ title }}
+                                </h3>
+                                <p
+                                    class="text-xs text-slate-500 dark:text-gray-400"
+                                >
+                                    {{ description }}
+                                </p>
+                            </div>
                         </div>
-                        <div>
-                            <h3
-                                class="text-base font-bold text-slate-900 dark:text-gray-100"
+
+                        <!-- Highlights / Feature description in Bengali -->
+                        <div
+                            class="mt-4 space-y-2.5 rounded-2xl border border-slate-100 bg-slate-50/80 p-3.5 text-xs dark:border-gray-800 dark:bg-gray-800/40"
+                        >
+                            <div
+                                class="flex items-start gap-2.5 text-slate-700 dark:text-gray-300"
                             >
-                                Install Our App
-                            </h3>
-                            <p
-                                class="text-xs text-slate-500 dark:text-gray-400"
+                                <CheckCircle2
+                                    class="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-500"
+                                />
+                                <div>
+                                    <strong
+                                        class="font-semibold text-slate-900 dark:text-gray-100"
+                                        >দ্রুতগতির লাইভ চ্যাট ও আপডেট:</strong
+                                    >
+                                    <p
+                                        class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400"
+                                    >
+                                        ব্রাউজার ব্যাকগ্রাউন্ড ল্যাগ ছাড়াই
+                                        ইনস্ট্যান্ট মেসেজিং ও লেকচার নোটস।
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div
+                                class="flex items-start gap-2.5 text-slate-700 dark:text-gray-300"
+                            >
+                                <CheckCircle2
+                                    class="mt-0.5 h-3.5 w-3.5 shrink-0 text-indigo-500"
+                                />
+                                <div>
+                                    <strong
+                                        class="font-semibold text-slate-900 dark:text-gray-100"
+                                        >ফুলস্ক্রিন অ্যাপ মোড:</strong
+                                    >
+                                    <p
+                                        class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400"
+                                    >
+                                        অ্যাড্রেস বার বা অপ্রয়োজনীয় ট্যাবের
+                                        ঝামেলাহীন পরিচ্ছন্ন ইন্টারফেস।
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div
+                                class="flex items-start gap-2.5 text-slate-700 dark:text-gray-300"
                             >
-                                Get fast, offline access right from your home
-                                screen.
-                            </p>
+                                <CheckCircle2
+                                    class="mt-0.5 h-3.5 w-3.5 shrink-0 text-violet-500"
+                                />
+                                <div>
+                                    <strong
+                                        class="font-semibold text-slate-900 dark:text-gray-100"
+                                        >কম ডাটা খরচ ও ১-ক্লিক ওপেন:</strong
+                                    >
+                                    <p
+                                        class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400"
+                                    >
+                                        হোমস্ক্রিন বা অ্যাপ ড্রয়ার থেকে সরাসরি
+                                        ওপেন ও অপ্টিমাইজড স্পিড।
+                                    </p>
+                                </div>
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="flex items-center gap-3">
-                        <button
-                            @click="handleInstall"
-                            class="flex-1 rounded-lg bg-indigo-600 py-2 text-xs font-semibold text-white shadow transition hover:bg-indigo-700"
-                        >
-                            Install App
-                        </button>
-                        <button
-                            @click="handleDismiss"
-                            class="rounded-lg border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
-                        >
-                            Maybe Later
-                        </button>
+                        <!-- Action Button -->
+                        <div class="mt-5">
+                            <button
+                                @click="handleInstall"
+                                :disabled="isInstalling"
+                                class="flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-3 text-xs font-bold text-white shadow-md shadow-indigo-600/20 transition-all hover:bg-indigo-700 active:scale-[0.99] disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                            >
+                                <Loader2
+                                    v-if="isInstalling"
+                                    class="h-4 w-4 animate-spin"
+                                />
+                                <Download v-else class="h-4 w-4" />
+                                <span>{{
+                                    isInstalling
+                                        ? 'ইনস্টল হচ্ছে...'
+                                        : 'অ্যাপ ইনস্টল করুন'
+                                }}</span>
+                            </button>
+                        </div>
                     </div>
                 </div>
-            </div>
+            </Transition>
         </Teleport>
 
-        <!-- Compact Inline Banner (Mobile) / Scaled Up (PC) -->
+        <!-- Compact Inline Banner -->
         <div
             v-else
             v-bind="$attrs"
-            class="flex items-center justify-between gap-2.5 rounded-xl border border-indigo-100 bg-gradient-to-r from-indigo-50/80 to-slate-50/80 px-3 py-2 shadow-sm backdrop-blur-sm sm:gap-4 sm:px-5 sm:py-3.5 dark:border-indigo-500/20 dark:from-indigo-500/5 dark:to-gray-900/80"
+            class="flex items-center justify-between gap-2.5 rounded-2xl border border-indigo-100 bg-gradient-to-r from-indigo-50/80 to-slate-50/80 px-3.5 py-2.5 shadow-sm backdrop-blur-sm sm:gap-4 sm:px-5 sm:py-3.5 dark:border-indigo-500/20 dark:from-indigo-500/5 dark:to-gray-900/80"
         >
             <div class="flex min-w-0 items-center gap-2.5 sm:gap-3.5">
                 <div
-                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-600/10 text-base sm:h-10 sm:w-10 sm:rounded-xl sm:text-xl dark:bg-indigo-500/20"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-slate-200/80 bg-slate-900 shadow-xs sm:h-10 sm:w-10 dark:border-gray-700 dark:bg-gray-100"
                 >
-                    📱
+                    <img
+                        src="/favicon.svg"
+                        alt="HSCStack App"
+                        class="h-6 w-6 scale-110 object-contain sm:h-7 sm:w-7"
+                    />
                 </div>
                 <div class="min-w-0">
                     <h3
                         class="truncate text-xs font-bold text-slate-900 sm:text-sm dark:text-gray-100"
                     >
-                        Install Our App
+                        {{ title }}
                     </h3>
                     <p
                         class="truncate text-[11px] text-slate-500 sm:text-xs dark:text-gray-400"
                     >
-                        Fast, offline home screen access.
+                        {{ description }}
                     </p>
                 </div>
             </div>
@@ -155,13 +278,14 @@ const handleDismiss = () => {
             <div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
                 <button
                     @click="handleInstall"
-                    class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-xs transition hover:bg-indigo-700 active:scale-95 sm:rounded-lg sm:px-4 sm:py-2 sm:text-xs"
+                    class="flex cursor-pointer items-center gap-1.5 rounded-lg bg-indigo-600 px-3.5 py-1.5 text-xs font-bold text-white shadow-xs transition hover:bg-indigo-700 active:scale-95 sm:px-4 sm:py-2 dark:bg-indigo-500 dark:hover:bg-indigo-600"
                 >
-                    Install
+                    <Download class="h-3.5 w-3.5" />
+                    <span>ইনস্টল করুন</span>
                 </button>
                 <button
                     @click="handleDismiss"
-                    class="flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-200/50 hover:text-slate-600 sm:h-8 sm:w-8 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+                    class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-200/50 hover:text-slate-600 sm:h-8 sm:w-8 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                     title="Dismiss"
                 >
                     ✕
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 5472b02..54f33a4 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -22,6 +22,7 @@ import {
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import ChatBanModal from '@/components/ChatBanModal.vue';
 import type { ChatBanUser } from '@/components/ChatBanModal.vue';
+import PwaInstallPrompt from '@/components/PwaInstallPrompt.vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { getEcho } from '@/lib/echo';
 import { usePermissions } from '@/lib/usePermissions';
@@ -1735,6 +1736,9 @@ onUnmounted(() => {
             @close="isBanModalOpen = false"
         />
 
+        <!-- PWA Install Modal Prompt -->
+        <PwaInstallPrompt variant="modal" />
+
         <!-- Chat Guidelines & Rules Alert Dialog Modal -->
         <div
             v-if="showRulesModal"

From 681fd5a5c49dd246490992bbc957bf4e468c0a6a Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Fri, 28 Aug 2026 14:34:24 +0600
Subject: [PATCH 2/4] feat(pwa): add permanent Install App options in desktop
 navbar, user menu, and mobile drawer

---
 resources/js/app.ts                          |  2 +
 resources/js/components/NavBar.vue           | 76 ++++++++++++++++++++
 resources/js/components/PwaInstallPrompt.vue | 43 ++++-------
 resources/js/lib/usePwa.ts                   | 58 +++++++++++++++
 4 files changed, 149 insertions(+), 30 deletions(-)
 create mode 100644 resources/js/lib/usePwa.ts

diff --git a/resources/js/app.ts b/resources/js/app.ts
index 1db690c..0083c31 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -1,5 +1,6 @@
 import { createInertiaApp, router } from '@inertiajs/vue3';
 import { registerSW } from 'virtual:pwa-register';
+import { initPwa } from './lib/usePwa';
 import AdminLayout from './layouts/AdminLayout.vue';
 import AppLayout from './layouts/AppLayout.vue';
 
@@ -17,6 +18,7 @@ if (
 }
 
 registerSW({ immediate: true });
+initPwa();
 
 router.on('navigate', () => {
     if (typeof window !== 'undefined' && (window as any).posthog) {
diff --git a/resources/js/components/NavBar.vue b/resources/js/components/NavBar.vue
index 567f574..1bbdb7a 100644
--- a/resources/js/components/NavBar.vue
+++ b/resources/js/components/NavBar.vue
@@ -19,6 +19,7 @@ import {
     HeartHandshake,
     Search,
     MessageCircle,
+    Download,
 } from 'lucide-vue-next';
 import {
     computed,
@@ -30,6 +31,7 @@ import {
 } from 'vue';
 import { globalSearchQuery } from '@/lib/searchStore';
 import { useDarkMode } from '@/lib/useDarkMode';
+import { usePwa } from '@/lib/usePwa';
 import AppLogo from './AppLogo.vue';
 import AuthModal from './AuthModal.vue';
 
@@ -41,6 +43,15 @@ defineProps({
 });
 
 const { theme, toggle } = useDarkMode();
+const { deferredPrompt, isInstalled, promptInstall } = usePwa();
+
+const canInstallApp = computed(
+    () => !isInstalled.value && Boolean(deferredPrompt.value),
+);
+
+const handleInstallApp = async () => {
+    await promptInstall();
+};
 
 const page = usePage();
 const user = computed(() => page.props.auth?.user);
@@ -322,6 +333,18 @@ onBeforeUnmount(() => {
                         <span>Search</span>
                     </button>
 
+                    <!-- Permanent Install App Button on Desktop -->
+                    <button
+                        v-if="canInstallApp"
+                        type="button"
+                        @click="handleInstallApp"
+                        class="flex h-9 items-center gap-1.5 rounded-xl border border-indigo-200/80 bg-indigo-50/80 px-3 text-xs font-bold text-indigo-700 shadow-2xs transition-all hover:bg-indigo-100 hover:text-indigo-800 active:scale-95 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400 dark:hover:bg-indigo-500/20 dark:hover:text-indigo-300"
+                        title="Install HSCStack App"
+                    >
+                        <Download class="h-3.5 w-3.5" />
+                        <span>Install App</span>
+                    </button>
+
                     <!-- Dark Mode Toggle Button -->
                     <button
                         @click="toggle"
@@ -452,6 +475,21 @@ onBeforeUnmount(() => {
                                         />
                                         {{ isAdmin ? 'Home' : 'Staff Panel' }}
                                     </Link>
+
+                                    <button
+                                        v-if="canInstallApp"
+                                        type="button"
+                                        @click="
+                                            () => {
+                                                closeDropdown();
+                                                handleInstallApp();
+                                            }
+                                        "
+                                        class="flex w-full cursor-pointer items-center gap-2.5 rounded-xl px-3 py-2 text-xs font-semibold text-indigo-600 transition-colors hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-950/40"
+                                    >
+                                        <Download class="h-3.5 w-3.5" />
+                                        <span>Install App</span>
+                                    </button>
                                 </div>
                             </div>
                         </Transition>
@@ -619,6 +657,44 @@ onBeforeUnmount(() => {
                                 </Link>
                             </div>
 
+                            <!-- Permanent Install App Button (Mobile Drawer) -->
+                            <div v-if="canInstallApp">
+                                <button
+                                    type="button"
+                                    @click="
+                                        () => {
+                                            closeMobileMenu();
+                                            handleInstallApp();
+                                        }
+                                    "
+                                    class="flex w-full cursor-pointer items-center justify-between rounded-2xl border border-indigo-200/80 bg-indigo-50/80 p-3 text-xs font-bold text-indigo-700 transition hover:bg-indigo-100 active:scale-98 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400 dark:hover:bg-indigo-500/20"
+                                >
+                                    <div class="flex items-center gap-2.5">
+                                        <div
+                                            class="flex h-8 w-8 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-2xs dark:bg-indigo-500"
+                                        >
+                                            <Download class="h-4 w-4" />
+                                        </div>
+                                        <div class="text-left">
+                                            <p
+                                                class="font-bold text-slate-900 dark:text-gray-100"
+                                            >
+                                                Install HSCStack App
+                                            </p>
+                                            <p
+                                                class="text-[10px] font-normal text-slate-500 dark:text-gray-400"
+                                            >
+                                                Faster access & full-screen mode
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <span
+                                        class="rounded-md bg-indigo-200/70 px-2 py-0.5 text-[10px] font-extrabold text-indigo-800 uppercase dark:bg-indigo-900/60 dark:text-indigo-300"
+                                        >Install</span
+                                    >
+                                </button>
+                            </div>
+
                             <!-- Main Exploration Navigation -->
                             <div>
                                 <p
diff --git a/resources/js/components/PwaInstallPrompt.vue b/resources/js/components/PwaInstallPrompt.vue
index 4aecada..da3a444 100644
--- a/resources/js/components/PwaInstallPrompt.vue
+++ b/resources/js/components/PwaInstallPrompt.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Download, X, CheckCircle2, Loader2 } from 'lucide-vue-next';
-import { ref, shallowRef, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { usePwa } from '@/lib/usePwa';
 
 defineOptions({
     inheritAttrs: false,
@@ -21,13 +22,15 @@ const props = defineProps({
     },
 });
 
+const { deferredPrompt, isInstalled, promptInstall } = usePwa();
 const isVisible = ref(false);
 const isInstalling = ref(false);
-const deferredPrompt = shallowRef<any>(null);
 
-const handleBeforeInstall = (e: Event) => {
-    e.preventDefault();
-    deferredPrompt.value = e;
+const updateVisibility = () => {
+    if (isInstalled.value || !deferredPrompt.value) {
+        isVisible.value = false;
+        return;
+    }
 
     if (props.variant === 'modal') {
         if (!sessionStorage.getItem('pwa_prompt_dismissed')) {
@@ -38,27 +41,12 @@ const handleBeforeInstall = (e: Event) => {
     }
 };
 
-const handleAppInstalled = () => {
-    isVisible.value = false;
-    deferredPrompt.value = null;
-};
-
 onMounted(() => {
-    const isStandalone =
-        window.matchMedia('(display-mode: standalone)').matches ||
-        (window.navigator as Record<string, unknown>).standalone === true;
-
-    if (isStandalone) {
-        return;
-    }
-
-    window.addEventListener('beforeinstallprompt', handleBeforeInstall);
-    window.addEventListener('appinstalled', handleAppInstalled);
+    updateVisibility();
 });
 
-onUnmounted(() => {
-    window.removeEventListener('beforeinstallprompt', handleBeforeInstall);
-    window.removeEventListener('appinstalled', handleAppInstalled);
+watch([deferredPrompt, isInstalled], () => {
+    updateVisibility();
 });
 
 const handleInstall = async () => {
@@ -68,15 +56,10 @@ const handleInstall = async () => {
 
     isInstalling.value = true;
     try {
-        await deferredPrompt.value.prompt();
-        const { outcome } = await deferredPrompt.value.userChoice;
-
-        if (outcome === 'accepted') {
+        const success = await promptInstall();
+        if (success) {
             isVisible.value = false;
-            deferredPrompt.value = null;
         }
-    } catch (error) {
-        console.error('PWA install error:', error);
     } finally {
         isInstalling.value = false;
     }
diff --git a/resources/js/lib/usePwa.ts b/resources/js/lib/usePwa.ts
new file mode 100644
index 0000000..b7fab46
--- /dev/null
+++ b/resources/js/lib/usePwa.ts
@@ -0,0 +1,58 @@
+import { ref, shallowRef } from 'vue';
+
+const deferredPrompt = shallowRef<any>(null);
+const isInstalled = ref(false);
+
+let isInitialized = false;
+
+export function initPwa() {
+    if (typeof window === 'undefined' || isInitialized) return;
+    isInitialized = true;
+
+    const checkStandalone = () => {
+        const isStandalone =
+            window.matchMedia('(display-mode: standalone)').matches ||
+            (window.navigator as Record<string, unknown>).standalone === true;
+        isInstalled.value = isStandalone;
+    };
+
+    checkStandalone();
+
+    window.addEventListener('beforeinstallprompt', (e: Event) => {
+        e.preventDefault();
+        deferredPrompt.value = e;
+    });
+
+    window.addEventListener('appinstalled', () => {
+        isInstalled.value = true;
+        deferredPrompt.value = null;
+    });
+}
+
+export function usePwa() {
+    if (!isInitialized) {
+        initPwa();
+    }
+
+    const promptInstall = async (): Promise<boolean> => {
+        if (!deferredPrompt.value) return false;
+        try {
+            await deferredPrompt.value.prompt();
+            const { outcome } = await deferredPrompt.value.userChoice;
+            if (outcome === 'accepted') {
+                isInstalled.value = true;
+                deferredPrompt.value = null;
+                return true;
+            }
+        } catch (err) {
+            console.error('PWA install error:', err);
+        }
+        return false;
+    };
+
+    return {
+        deferredPrompt,
+        isInstalled,
+        promptInstall,
+    };
+}

From 7f381cf5cede74346d729a50223bed6a422b216e Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Fri, 28 Aug 2026 14:35:46 +0600
Subject: [PATCH 3/4] feat(pwa): move desktop install app option into user
 dropdown menu

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

diff --git a/resources/js/components/NavBar.vue b/resources/js/components/NavBar.vue
index 1bbdb7a..4cc8b44 100644
--- a/resources/js/components/NavBar.vue
+++ b/resources/js/components/NavBar.vue
@@ -333,18 +333,6 @@ onBeforeUnmount(() => {
                         <span>Search</span>
                     </button>
 
-                    <!-- Permanent Install App Button on Desktop -->
-                    <button
-                        v-if="canInstallApp"
-                        type="button"
-                        @click="handleInstallApp"
-                        class="flex h-9 items-center gap-1.5 rounded-xl border border-indigo-200/80 bg-indigo-50/80 px-3 text-xs font-bold text-indigo-700 shadow-2xs transition-all hover:bg-indigo-100 hover:text-indigo-800 active:scale-95 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400 dark:hover:bg-indigo-500/20 dark:hover:text-indigo-300"
-                        title="Install HSCStack App"
-                    >
-                        <Download class="h-3.5 w-3.5" />
-                        <span>Install App</span>
-                    </button>
-
                     <!-- Dark Mode Toggle Button -->
                     <button
                         @click="toggle"

From 3b4500438df9c72725d8ab67c169655f484039c8 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Fri, 28 Aug 2026 14:39:59 +0600
Subject: [PATCH 4/4] fix(lint): satisfy vue/require-toggle-inside-transition
 and code styling

---
 resources/js/components/PwaInstallPrompt.vue | 340 ++++++++++---------
 resources/js/lib/usePwa.ts                   |  13 +-
 2 files changed, 182 insertions(+), 171 deletions(-)

diff --git a/resources/js/components/PwaInstallPrompt.vue b/resources/js/components/PwaInstallPrompt.vue
index da3a444..9bc5751 100644
--- a/resources/js/components/PwaInstallPrompt.vue
+++ b/resources/js/components/PwaInstallPrompt.vue
@@ -29,6 +29,7 @@ const isInstalling = ref(false);
 const updateVisibility = () => {
     if (isInstalled.value || !deferredPrompt.value) {
         isVisible.value = false;
+
         return;
     }
 
@@ -55,8 +56,10 @@ const handleInstall = async () => {
     }
 
     isInstalling.value = true;
+
     try {
         const success = await promptInstall();
+
         if (success) {
             isVisible.value = false;
         }
@@ -75,205 +78,204 @@ const handleDismiss = () => {
 </script>
 
 <template>
-    <template v-if="isVisible && deferredPrompt">
-        <Teleport v-if="variant === 'modal'" to="body">
-            <Transition
-                enter-active-class="transition duration-200 ease-out"
-                enter-from-class="opacity-0 scale-95"
-                enter-to-class="opacity-100 scale-100"
-                leave-active-class="transition duration-150 ease-in"
-                leave-from-class="opacity-100 scale-100"
-                leave-to-class="opacity-0 scale-95"
+    <Teleport v-if="variant === 'modal'" to="body">
+        <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+        >
+            <div
+                v-if="isVisible && deferredPrompt"
+                class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center sm:p-6"
+                role="dialog"
+                aria-modal="true"
             >
+                <!-- Backdrop -->
                 <div
-                    class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center sm:p-6"
-                    role="dialog"
-                    aria-modal="true"
+                    @click="handleDismiss"
+                    class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs transition-opacity dark:bg-black/75"
+                ></div>
+
+                <!-- Modal Box -->
+                <div
+                    class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-200/80 bg-white/95 p-6 shadow-2xl backdrop-blur-xl transition-all sm:p-7 dark:border-gray-800 dark:bg-gray-900/95"
                 >
-                    <!-- Backdrop -->
+                    <!-- Ambient Blur Blob -->
                     <div
-                        @click="handleDismiss"
-                        class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs transition-opacity dark:bg-black/75"
+                        class="pointer-events-none absolute -top-20 -right-20 h-40 w-40 rounded-full bg-indigo-500/10 blur-2xl dark:bg-indigo-500/20"
                     ></div>
 
-                    <!-- Modal Box -->
-                    <div
-                        class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-200/80 bg-white/95 p-6 shadow-2xl backdrop-blur-xl transition-all sm:p-7 dark:border-gray-800 dark:bg-gray-900/95"
+                    <!-- Close Button -->
+                    <button
+                        @click="handleDismiss"
+                        class="absolute top-4 right-4 flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                        title="Close"
                     >
-                        <!-- Ambient Blur Blob -->
-                        <div
-                            class="pointer-events-none absolute -top-20 -right-20 h-40 w-40 rounded-full bg-indigo-500/10 blur-2xl dark:bg-indigo-500/20"
-                        ></div>
+                        <X class="h-4 w-4" />
+                    </button>
 
-                        <!-- Close Button -->
-                        <button
-                            @click="handleDismiss"
-                            class="absolute top-4 right-4 flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300"
-                            title="Close"
+                    <!-- Header -->
+                    <div class="flex items-center gap-3.5">
+                        <div
+                            class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-slate-200/80 bg-slate-900 shadow-md shadow-indigo-500/10 dark:border-gray-700 dark:bg-gray-100"
                         >
-                            <X class="h-4 w-4" />
-                        </button>
-
-                        <!-- Header -->
-                        <div class="flex items-center gap-3.5">
-                            <div
-                                class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-slate-200/80 bg-slate-900 shadow-md shadow-indigo-500/10 dark:border-gray-700 dark:bg-gray-100"
+                            <img
+                                src="/favicon.svg"
+                                alt="HSCStack App"
+                                class="h-8 w-8 scale-110 object-contain"
+                            />
+                        </div>
+                        <div class="min-w-0 flex-1 pr-3">
+                            <h3
+                                class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
                             >
-                                <img
-                                    src="/favicon.svg"
-                                    alt="HSCStack App"
-                                    class="h-8 w-8 scale-110 object-contain"
-                                />
-                            </div>
-                            <div class="min-w-0 flex-1 pr-3">
-                                <h3
-                                    class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
+                                {{ title }}
+                            </h3>
+                            <p
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                            >
+                                {{ description }}
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Highlights / Feature description in Bengali -->
+                    <div
+                        class="mt-4 space-y-2.5 rounded-2xl border border-slate-100 bg-slate-50/80 p-3.5 text-xs dark:border-gray-800 dark:bg-gray-800/40"
+                    >
+                        <div
+                            class="flex items-start gap-2.5 text-slate-700 dark:text-gray-300"
+                        >
+                            <CheckCircle2
+                                class="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-500"
+                            />
+                            <div>
+                                <strong
+                                    class="font-semibold text-slate-900 dark:text-gray-100"
+                                    >দ্রুতগতির লাইভ চ্যাট ও আপডেট:</strong
                                 >
-                                    {{ title }}
-                                </h3>
                                 <p
-                                    class="text-xs text-slate-500 dark:text-gray-400"
+                                    class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400"
                                 >
-                                    {{ description }}
+                                    ব্রাউজার ব্যাকগ্রাউন্ড ল্যাগ ছাড়াই
+                                    ইনস্ট্যান্ট মেসেজিং ও লেকচার নোটস।
                                 </p>
                             </div>
                         </div>
 
-                        <!-- Highlights / Feature description in Bengali -->
                         <div
-                            class="mt-4 space-y-2.5 rounded-2xl border border-slate-100 bg-slate-50/80 p-3.5 text-xs dark:border-gray-800 dark:bg-gray-800/40"
+                            class="flex items-start gap-2.5 text-slate-700 dark:text-gray-300"
                         >
-                            <div
-                                class="flex items-start gap-2.5 text-slate-700 dark:text-gray-300"
-                            >
-                                <CheckCircle2
-                                    class="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-500"
-                                />
-                                <div>
-                                    <strong
-                                        class="font-semibold text-slate-900 dark:text-gray-100"
-                                        >দ্রুতগতির লাইভ চ্যাট ও আপডেট:</strong
-                                    >
-                                    <p
-                                        class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400"
-                                    >
-                                        ব্রাউজার ব্যাকগ্রাউন্ড ল্যাগ ছাড়াই
-                                        ইনস্ট্যান্ট মেসেজিং ও লেকচার নোটস।
-                                    </p>
-                                </div>
-                            </div>
-
-                            <div
-                                class="flex items-start gap-2.5 text-slate-700 dark:text-gray-300"
-                            >
-                                <CheckCircle2
-                                    class="mt-0.5 h-3.5 w-3.5 shrink-0 text-indigo-500"
-                                />
-                                <div>
-                                    <strong
-                                        class="font-semibold text-slate-900 dark:text-gray-100"
-                                        >ফুলস্ক্রিন অ্যাপ মোড:</strong
-                                    >
-                                    <p
-                                        class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400"
-                                    >
-                                        অ্যাড্রেস বার বা অপ্রয়োজনীয় ট্যাবের
-                                        ঝামেলাহীন পরিচ্ছন্ন ইন্টারফেস।
-                                    </p>
-                                </div>
-                            </div>
-
-                            <div
-                                class="flex items-start gap-2.5 text-slate-700 dark:text-gray-300"
-                            >
-                                <CheckCircle2
-                                    class="mt-0.5 h-3.5 w-3.5 shrink-0 text-violet-500"
-                                />
-                                <div>
-                                    <strong
-                                        class="font-semibold text-slate-900 dark:text-gray-100"
-                                        >কম ডাটা খরচ ও ১-ক্লিক ওপেন:</strong
-                                    >
-                                    <p
-                                        class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400"
-                                    >
-                                        হোমস্ক্রিন বা অ্যাপ ড্রয়ার থেকে সরাসরি
-                                        ওপেন ও অপ্টিমাইজড স্পিড।
-                                    </p>
-                                </div>
+                            <CheckCircle2
+                                class="mt-0.5 h-3.5 w-3.5 shrink-0 text-indigo-500"
+                            />
+                            <div>
+                                <strong
+                                    class="font-semibold text-slate-900 dark:text-gray-100"
+                                    >ফুলস্ক্রিন অ্যাপ মোড:</strong
+                                >
+                                <p
+                                    class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400"
+                                >
+                                    অ্যাড্রেস বার বা অপ্রয়োজনীয় ট্যাবের
+                                    ঝামেলাহীন পরিচ্ছন্ন ইন্টারফেস।
+                                </p>
                             </div>
                         </div>
 
-                        <!-- Action Button -->
-                        <div class="mt-5">
-                            <button
-                                @click="handleInstall"
-                                :disabled="isInstalling"
-                                class="flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-3 text-xs font-bold text-white shadow-md shadow-indigo-600/20 transition-all hover:bg-indigo-700 active:scale-[0.99] disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600"
-                            >
-                                <Loader2
-                                    v-if="isInstalling"
-                                    class="h-4 w-4 animate-spin"
-                                />
-                                <Download v-else class="h-4 w-4" />
-                                <span>{{
-                                    isInstalling
-                                        ? 'ইনস্টল হচ্ছে...'
-                                        : 'অ্যাপ ইনস্টল করুন'
-                                }}</span>
-                            </button>
+                        <div
+                            class="flex items-start gap-2.5 text-slate-700 dark:text-gray-300"
+                        >
+                            <CheckCircle2
+                                class="mt-0.5 h-3.5 w-3.5 shrink-0 text-violet-500"
+                            />
+                            <div>
+                                <strong
+                                    class="font-semibold text-slate-900 dark:text-gray-100"
+                                    >কম ডাটা খরচ ও ১-ক্লিক ওপেন:</strong
+                                >
+                                <p
+                                    class="mt-0.5 text-[11px] text-slate-500 dark:text-gray-400"
+                                >
+                                    হোমস্ক্রিন বা অ্যাপ ড্রয়ার থেকে সরাসরি ওপেন
+                                    ও অপ্টিমাইজড স্পিড।
+                                </p>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </Transition>
-        </Teleport>
 
-        <!-- Compact Inline Banner -->
-        <div
-            v-else
-            v-bind="$attrs"
-            class="flex items-center justify-between gap-2.5 rounded-2xl border border-indigo-100 bg-gradient-to-r from-indigo-50/80 to-slate-50/80 px-3.5 py-2.5 shadow-sm backdrop-blur-sm sm:gap-4 sm:px-5 sm:py-3.5 dark:border-indigo-500/20 dark:from-indigo-500/5 dark:to-gray-900/80"
-        >
-            <div class="flex min-w-0 items-center gap-2.5 sm:gap-3.5">
-                <div
-                    class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-slate-200/80 bg-slate-900 shadow-xs sm:h-10 sm:w-10 dark:border-gray-700 dark:bg-gray-100"
-                >
-                    <img
-                        src="/favicon.svg"
-                        alt="HSCStack App"
-                        class="h-6 w-6 scale-110 object-contain sm:h-7 sm:w-7"
-                    />
-                </div>
-                <div class="min-w-0">
-                    <h3
-                        class="truncate text-xs font-bold text-slate-900 sm:text-sm dark:text-gray-100"
-                    >
-                        {{ title }}
-                    </h3>
-                    <p
-                        class="truncate text-[11px] text-slate-500 sm:text-xs dark:text-gray-400"
-                    >
-                        {{ description }}
-                    </p>
+                    <!-- Action Button -->
+                    <div class="mt-5">
+                        <button
+                            @click="handleInstall"
+                            :disabled="isInstalling"
+                            class="flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-3 text-xs font-bold text-white shadow-md shadow-indigo-600/20 transition-all hover:bg-indigo-700 active:scale-[0.99] disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                        >
+                            <Loader2
+                                v-if="isInstalling"
+                                class="h-4 w-4 animate-spin"
+                            />
+                            <Download v-else class="h-4 w-4" />
+                            <span>{{
+                                isInstalling
+                                    ? 'ইনস্টল হচ্ছে...'
+                                    : 'অ্যাপ ইনস্টল করুন'
+                            }}</span>
+                        </button>
+                    </div>
                 </div>
             </div>
+        </Transition>
+    </Teleport>
 
-            <div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
-                <button
-                    @click="handleInstall"
-                    class="flex cursor-pointer items-center gap-1.5 rounded-lg bg-indigo-600 px-3.5 py-1.5 text-xs font-bold text-white shadow-xs transition hover:bg-indigo-700 active:scale-95 sm:px-4 sm:py-2 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+    <!-- Compact Inline Banner -->
+    <div
+        v-else-if="isVisible && deferredPrompt"
+        v-bind="$attrs"
+        class="flex items-center justify-between gap-2.5 rounded-2xl border border-indigo-100 bg-gradient-to-r from-indigo-50/80 to-slate-50/80 px-3.5 py-2.5 shadow-sm backdrop-blur-sm sm:gap-4 sm:px-5 sm:py-3.5 dark:border-indigo-500/20 dark:from-indigo-500/5 dark:to-gray-900/80"
+    >
+        <div class="flex min-w-0 items-center gap-2.5 sm:gap-3.5">
+            <div
+                class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-slate-200/80 bg-slate-900 shadow-xs sm:h-10 sm:w-10 dark:border-gray-700 dark:bg-gray-100"
+            >
+                <img
+                    src="/favicon.svg"
+                    alt="HSCStack App"
+                    class="h-6 w-6 scale-110 object-contain sm:h-7 sm:w-7"
+                />
+            </div>
+            <div class="min-w-0">
+                <h3
+                    class="truncate text-xs font-bold text-slate-900 sm:text-sm dark:text-gray-100"
                 >
-                    <Download class="h-3.5 w-3.5" />
-                    <span>ইনস্টল করুন</span>
-                </button>
-                <button
-                    @click="handleDismiss"
-                    class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-200/50 hover:text-slate-600 sm:h-8 sm:w-8 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300"
-                    title="Dismiss"
+                    {{ title }}
+                </h3>
+                <p
+                    class="truncate text-[11px] text-slate-500 sm:text-xs dark:text-gray-400"
                 >
-                    ✕
-                </button>
+                    {{ description }}
+                </p>
             </div>
         </div>
-    </template>
+
+        <div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
+            <button
+                @click="handleInstall"
+                class="flex cursor-pointer items-center gap-1.5 rounded-lg bg-indigo-600 px-3.5 py-1.5 text-xs font-bold text-white shadow-xs transition hover:bg-indigo-700 active:scale-95 sm:px-4 sm:py-2 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+            >
+                <Download class="h-3.5 w-3.5" />
+                <span>ইনস্টল করুন</span>
+            </button>
+            <button
+                @click="handleDismiss"
+                class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-200/50 hover:text-slate-600 sm:h-8 sm:w-8 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+                title="Dismiss"
+            >
+                ✕
+            </button>
+        </div>
+    </div>
 </template>
diff --git a/resources/js/lib/usePwa.ts b/resources/js/lib/usePwa.ts
index b7fab46..b3b333a 100644
--- a/resources/js/lib/usePwa.ts
+++ b/resources/js/lib/usePwa.ts
@@ -6,7 +6,10 @@ const isInstalled = ref(false);
 let isInitialized = false;
 
 export function initPwa() {
-    if (typeof window === 'undefined' || isInitialized) return;
+    if (typeof window === 'undefined' || isInitialized) {
+        return;
+    }
+
     isInitialized = true;
 
     const checkStandalone = () => {
@@ -35,18 +38,24 @@ export function usePwa() {
     }
 
     const promptInstall = async (): Promise<boolean> => {
-        if (!deferredPrompt.value) return false;
+        if (!deferredPrompt.value) {
+            return false;
+        }
+
         try {
             await deferredPrompt.value.prompt();
             const { outcome } = await deferredPrompt.value.userChoice;
+
             if (outcome === 'accepted') {
                 isInstalled.value = true;
                 deferredPrompt.value = null;
+
                 return true;
             }
         } catch (err) {
             console.error('PWA install error:', err);
         }
+
         return false;
     };