From c977a012f899db05066eb743a04cc33a4db38312 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Thu, 16 Apr 2026 22:17:56 +0300
Subject: [PATCH] feat: add push notification onboarding prompt

---
 frontend/src/components/AppShell.tsx          |   6 +-
 .../src/components/PushOnboardingPrompt.tsx   | 118 ++++++++++++++++++
 2 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/PushOnboardingPrompt.tsx

diff --git a/frontend/src/components/AppShell.tsx b/frontend/src/components/AppShell.tsx
index b01ab21c..f7602df8 100644
--- a/frontend/src/components/AppShell.tsx
+++ b/frontend/src/components/AppShell.tsx
@@ -10,6 +10,7 @@ import { useNotifications } from "@/hooks/useApi";
 import { getVerbCategory } from "@/lib/verbTranslations";
 import { NotificationCenter, NotificationPanel } from "@/components/NotificationCenter";
 import { CalendarSidebar } from "@/components/calendar/CalendarSidebar";
+import { PushOnboardingPrompt } from "@/components/PushOnboardingPrompt";
 import { useCalendarModals } from "@/hooks/useCalendarModals";
 import { CalendarModals } from "@/components/layout/CalendarModals";
 import { MobileLeftDrawer, MobileCalendarDrawer } from "@/components/layout/MobileDrawers";
@@ -478,7 +479,10 @@ export function AppShell({ children }: AppShellProps) {
         />
         <div className={`mx-auto flex w-full flex-1 min-h-0 max-w-6xl ${isMessageDialogPage ? 'gap-0 px-0 py-0 lg:gap-6 lg:px-8 lg:py-8' : 'gap-6 px-4 py-4 sm:px-8 lg:py-8'}`}>
           <LeftNav fixedDesktop />
-          <main className={`flex-1 min-w-0 min-h-0 space-y-6 ${isMessageDialogPage ? 'overflow-visible' : ''}`}>{children}</main>
+          <main className={`flex-1 min-w-0 min-h-0 space-y-6 ${isMessageDialogPage ? 'overflow-visible' : ''}`}>
+            {!isMessageDialogPage ? <PushOnboardingPrompt /> : null}
+            {children}
+          </main>
           <CalendarSidebar
             onOpenCalendarModal={cal.handleOpenCalendarModal}
             onOpenEventModal={cal.handleOpenEventModal}
diff --git a/frontend/src/components/PushOnboardingPrompt.tsx b/frontend/src/components/PushOnboardingPrompt.tsx
new file mode 100644
index 00000000..8cc7641c
--- /dev/null
+++ b/frontend/src/components/PushOnboardingPrompt.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import Link from "next/link";
+import { Bell, X } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+
+import { useUser } from "@/contexts/UserContext";
+import { useWebPush } from "@/hooks/useWebPush";
+
+const PUSH_PROMPT_VERSION = "v1";
+
+function getDismissStorageKey(userId: number) {
+  return `push-onboarding-dismissed:${PUSH_PROMPT_VERSION}:${userId}`;
+}
+
+export function PushOnboardingPrompt() {
+  const { user } = useUser();
+  const {
+    isSupported,
+    isSubscribed,
+    isLoading,
+    permission,
+    subscribe,
+  } = useWebPush();
+  const [sessionDismissed, setSessionDismissed] = useState(false);
+  const userId = user?.id ?? null;
+
+  const persistedDismissed = useMemo(() => {
+    if (typeof window === "undefined" || !userId) {
+      return false;
+    }
+
+    return (
+      window.localStorage.getItem(getDismissStorageKey(userId)) === "1"
+    );
+  }, [userId]);
+
+  const dismissed = sessionDismissed || persistedDismissed;
+
+  const shouldShow = useMemo(() => {
+    if (!userId) return false;
+    if (dismissed || isLoading) return false;
+    if (!isSupported || isSubscribed) return false;
+    return permission === "default";
+  }, [dismissed, isLoading, isSubscribed, isSupported, permission, userId]);
+
+  const handleDismiss = useCallback(() => {
+    if (typeof window !== "undefined" && userId) {
+      window.localStorage.setItem(getDismissStorageKey(userId), "1");
+    }
+    setSessionDismissed(true);
+  }, [userId]);
+
+  const handleEnable = useCallback(async () => {
+    const success = await subscribe();
+    if (success) {
+      setSessionDismissed(true);
+    }
+  }, [subscribe]);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  return (
+    <section className="app-surface rounded-2xl p-4 sm:p-5">
+      <div className="flex items-start gap-3">
+        <div className="app-badge app-badge-accent mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl">
+          <Bell size={18} />
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <p className="app-card-caption">Системные уведомления</p>
+              <h2 className="mt-1 text-base font-semibold text-[var(--foreground)]">
+                Включить push-уведомления
+              </h2>
+            </div>
+            <button
+              type="button"
+              onClick={handleDismiss}
+              className="app-action-ghost flex h-8 w-8 items-center justify-center rounded-full"
+              aria-label="Скрыть предложение включить уведомления"
+              title="Скрыть"
+            >
+              <X size={16} />
+            </button>
+          </div>
+
+          <p className="app-text-muted mt-2 text-sm">
+            Приложение сможет присылать системные уведомления о новых сообщениях,
+            заявках и других событиях, даже когда вкладка закрыта.
+          </p>
+
+          <div className="mt-4 flex flex-wrap items-center gap-2">
+            <button
+              type="button"
+              onClick={() => void handleEnable()}
+              disabled={isLoading}
+              className="app-action-primary inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50"
+            >
+              <Bell size={16} />
+              {isLoading ? "Подключаем..." : "Включить уведомления"}
+            </button>
+
+            <Link
+              href="/settings?section=notifications"
+              className="app-action-ghost inline-flex items-center rounded-lg px-4 py-2 text-sm"
+            >
+              Настройки уведомлений
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}