fix: pwa prompt should be propagated via context

src/app/app.tsx

@@ -1,5 +1,6 @@
 import { useMe } from "@/api/accounts/user.ts";
 import { AuthManager } from "@/api/helpers/AuthManager.tsx";
+import { PwaPromptProvider } from "@/app/pwa-prompt.tsx";
 import { queryClient } from "@/app/query-client.ts";
 import { GoogleAnalytics } from "@/lib/tracking/GoogleAnalytics.tsx";
 import { UserInfoTracker } from "@/lib/tracking/UserInfoTracker.tsx";
@@ -13,7 +14,9 @@ import { useTernaryDarkMode } from "usehooks-ts";
 export function App({ router }: { router: Register["router"] }) {
   return (
     <QueryClientProvider client={queryClient}>
-      <AppRouter router={router} />
+      <PwaPromptProvider>
+        <AppRouter router={router} />
+      </PwaPromptProvider>
 
       <YandexMetrika />
       <GoogleAnalytics />

src/app/entry-client.tsx

@@ -4,8 +4,6 @@ import { App } from "./app.tsx";
 import { registerServiceWorker } from "./register-sw.ts";
 import { getRouter } from "./router.ts";
 
-import "./pwa-prompt.ts"; // Import here to handle event
-
 // Init service worker
 registerServiceWorker();
 

src/app/pwa-prompt.tsx

@@ -0,0 +1,26 @@
+// null - pwa prompt is not supported by this browser or platform
+// BeforeInstallPromptEvent - we can trigger the prompt with the prompt() method
+import { createContext, PropsWithChildren, useContext, useState } from "react";
+import { useEventListener } from "usehooks-ts";
+
+export const PwaPromptContext = createContext<any>(null);
+
+export function PwaPromptProvider({ children }: PropsWithChildren) {
+  const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
+
+  useEventListener("beforeinstallprompt" as any, (e) => {
+    console.log(e);
+    // Remember the event in global variable, so we can trigger the prompt later
+    setDeferredPrompt(e);
+  });
+
+  return (
+    <PwaPromptContext.Provider value={deferredPrompt}>
+      {children}
+    </PwaPromptContext.Provider>
+  );
+}
+
+export function usePwaPrompt() {
+  return useContext(PwaPromptContext);
+}

src/components/dashboard/PwaWidget.tsx

@@ -1,4 +1,4 @@
-import { usePwaPrompt } from "@/app/pwa-prompt.ts";
+import { usePwaPrompt } from "@/app/pwa-prompt.tsx";
 
 export function PwaWidget() {
   const deferredPrompt = usePwaPrompt();