Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | 8x 8x 8x 96x 8x 74x 17x 10x 74x 9x 9x 9x 74x 74x 74x 66x 8x 8x 8x 2x 2x 179x 179x 179x 179x 179x 74x 74x 179x 4x 4x 4x 4x 3x 3x 3x 2x 3x 1x 1x 1x 1x 8x 1x 1x 1x 1x 1x 2x 2x 1x 1x 1x 1x 1x 4x 179x 2x 2x 2x 2x 179x 1x 1x 179x 98x 2x 1x 1x 1x 1x 1x 1x 1x 1x | import { useState, useEffect } from "react";
import { Bell, Download, X } from "lucide-react";
import { notificationsApi } from "../../lib/api";
import { notify } from "../../lib/notify";
// ─── Push Notification Prompt ───────────────────────────────────────────────
const PUSH_DENIAL_KEY = "push_denial_count";
const PUSH_DENIED_AT_KEY = "push_denied_at";
const THREE_DAYS_MS = 3 * 24 * 60 * 60 * 1000;
function safeGet(key: string): string | null {
try { return localStorage.getItem(key); } catch { return null; }
}
function safeSet(key: string, value: string): void {
try { localStorage.setItem(key, value); } catch {}
}
function shouldShowPush(): boolean {
if (!("PushManager" in window)) return false;
if (typeof Notification !== "undefined" && Notification.permission === "granted") return false;
const denials = Number(safeGet(PUSH_DENIAL_KEY) ?? 0);
if (denials >= 5) return false;
const deniedAt = safeGet(PUSH_DENIED_AT_KEY);
Iif (deniedAt && Date.now() - Number(deniedAt) < THREE_DAYS_MS) return false;
return true;
}
function shouldShowInstall(): boolean {
// Check if already installed as PWA
Iif (window.matchMedia("(display-mode: standalone)").matches) return false;
Iif ((navigator as Navigator & { standalone?: boolean }).standalone) return false;
if (safeGet("app_install_dismissed")) return false;
return true;
}
// Capture the beforeinstallprompt event for triggering PWA install
let deferredInstallPrompt: BeforeInstallPromptEvent | null = null;
interface BeforeInstallPromptEvent extends Event {
prompt(): Promise<void>;
userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
}
Eif (typeof window !== "undefined") {
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
deferredInstallPrompt = e as BeforeInstallPromptEvent;
});
}
export function SidebarPrompts() {
const [showPush, setShowPush] = useState(false);
const [showInstall, setShowInstall] = useState(false);
const [enabling, setEnabling] = useState(false);
const [isIos] = useState(() => /iPhone|iPad/.test(navigator.userAgent));
useEffect(() => {
setShowPush(shouldShowPush());
setShowInstall(shouldShowInstall());
}, []);
const handleEnablePush = async () => {
setEnabling(true);
try {
const permission = await Notification.requestPermission();
if (permission === "granted") {
const reg = await Promise.race([
navigator.serviceWorker.ready,
new Promise<never>((_, reject) =>
setTimeout(() => reject(new Error("SW not available")), 10_000),
),
]);
const vapidRes = await notificationsApi.getVapidPublicKey();
const publicKey = vapidRes.data?.publicKey;
if (publicKey) {
const padding = "=".repeat((4 - (publicKey.length % 4)) % 4);
const base64 = (publicKey + padding).replace(/-/g, "+").replace(/_/g, "/");
const rawData = atob(base64);
const arr = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; i++) arr[i] = rawData.charCodeAt(i);
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: arr.buffer as ArrayBuffer,
});
const json = sub.toJSON();
const keys = json.keys as { p256dh: string; auth: string } | undefined;
Eif (keys?.p256dh && keys?.auth) {
await notificationsApi.subscribe({
endpoint: sub.endpoint,
p256dh: keys.p256dh,
auth: keys.auth,
});
}
}
notify.success("Notifications enabled!");
setShowPush(false);
} else {
const count = Number(safeGet(PUSH_DENIAL_KEY) ?? 0);
safeSet(PUSH_DENIAL_KEY, String(count + 1));
safeSet(PUSH_DENIED_AT_KEY, String(Date.now()));
setShowPush(false);
}
} catch {
notify.error("Could not enable notifications");
} finally {
setEnabling(false);
}
};
const handleDismissPush = () => {
const count = Number(safeGet(PUSH_DENIAL_KEY) ?? 0);
safeSet(PUSH_DENIAL_KEY, String(count + 1));
safeSet(PUSH_DENIED_AT_KEY, String(Date.now()));
setShowPush(false);
};
const handleDismissInstall = () => {
safeSet("app_install_dismissed", "1");
setShowInstall(false);
};
if (!showPush && !showInstall) return null;
return (
<div className="space-y-1 mb-2">
{showPush && (
<div className="group flex items-center rounded-md px-3 py-2 text-sm transition-colors bg-transparent border border-primary-200/60 dark:border-primary-800/60">
<Bell className="mr-2.5 h-4 w-4 flex-shrink-0 text-primary-600" />
<button
type="button"
onClick={handleEnablePush}
disabled={enabling}
className="flex-1 text-left text-xs font-medium text-primary-700 dark:text-primary-300 hover:underline disabled:opacity-50"
>
{enabling ? "Enabling..." : "Turn on lead alerts"}
</button>
<button
type="button"
onClick={handleDismissPush}
className="ml-1 p-0.5 text-primary-400 hover:text-primary-600"
aria-label="Dismiss"
>
<X className="h-3.5 w-3.5" />
</button>
</div>
)}
{showInstall && (
<div className="group flex items-center rounded-md px-3 py-2 text-sm transition-colors bg-transparent border border-blue-200/60 dark:border-blue-800/60">
<Download className="mr-2.5 h-4 w-4 flex-shrink-0 text-blue-600" />
<button
type="button"
onClick={async () => {
if (deferredInstallPrompt) {
await deferredInstallPrompt.prompt();
const { outcome } = await deferredInstallPrompt.userChoice;
Eif (outcome === "accepted") {
setShowInstall(false);
safeSet("app_install_dismissed", "1");
}
deferredInstallPrompt = null;
E} else if (isIos) {
notify.success("Tap the Share button ↑ then 'Add to Home Screen'");
}
}}
className="flex-1 text-left text-xs font-medium text-blue-700 dark:text-blue-300 hover:underline"
>
{isIos ? "Add to Home Screen" : "Install app"}
</button>
<button
type="button"
onClick={handleDismissInstall}
className="ml-1 p-0.5 text-blue-400 hover:text-blue-600"
aria-label="Dismiss"
>
<X className="h-3.5 w-3.5" />
</button>
</div>
)}
</div>
);
}
|