Add app icon badge permission controls

src/App.tsx

@@ -6,11 +6,11 @@ import { usePrevious } from "@uidotdev/usehooks";
 import { useTranslation } from "react-i18next";
 import { FirebaseAuthentication } from "@capacitor-firebase/authentication";
 import { ErrorComponent } from "@/components/ErrorComponent.tsx";
+import { AppBadgeManager } from "@/components/AppBadgeManager";
 import { InboxModal } from "@/components/InboxModal";
 import { PAGE_SCROLL_RESTORATION_SELECTOR } from "@/components/PageFrame";
 import { StagedTokenModal } from "@/components/home/StagedTokenModal";
 import { useAppReviewPrompt } from "@/hooks/useAppReviewPrompt";
-import { useAppBadge } from "@/hooks/useAppBadge";
 import {
   isNativePluginAvailable,
   isPluginAvailable,
@@ -263,7 +263,6 @@ export default function App() {
   useNfcAvailabilityCheck();
   useCameraAvailabilityCheck();
   useAccelerometerAvailabilityCheck();
-  useAppBadge();
   useAppReviewPrompt();
   // Initialize live updates - must be called after app renders successfully
   useLiveUpdate();
@@ -468,6 +467,7 @@ export default function App() {
             <RequirementsModal />
             <InboxModal />
             <StagedTokenModal />
+            <AppBadgeManager />
             {/* Must live inside A11yAnnouncerProvider and SlideModalProvider:
                 its WriteModal uses useAnnouncer and its confirm modal renders
                 a SlideModal */}

src/__tests__/unit/App.firebase-auth.test.tsx

@@ -246,6 +246,10 @@ vi.mock("@/components/InboxModal", () => ({
   InboxModal: () => <div data-testid="inbox-modal" />,
 }));
 
+vi.mock("@/components/AppBadgeManager", () => ({
+  AppBadgeManager: () => <div data-testid="app-badge-manager" />,
+}));
+
 vi.mock("@/components/A11yAnnouncer", () => ({
   A11yAnnouncerProvider: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="a11y-provider">{children}</div>

src/__tests__/unit/App.integration.test.tsx

@@ -204,6 +204,10 @@ vi.mock("@/components/InboxModal", () => ({
   InboxModal: () => <div data-testid="inbox-modal" />,
 }));
 
+vi.mock("@/components/AppBadgeManager", () => ({
+  AppBadgeManager: () => <div data-testid="app-badge-manager" />,
+}));
+
 vi.mock("@/components/home/StagedTokenModal", () => ({
   StagedTokenModal: () => <div data-testid="staged-token-modal" />,
 }));

src/__tests__/unit/components/AppBadgeManager.test.tsx

@@ -0,0 +1,96 @@
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { AppBadgeManager } from "@/components/AppBadgeManager";
+import { SlideModalProvider } from "@/components/SlideModalProvider";
+import { useAppBadge } from "@/hooks/useAppBadge";
+import { render, screen } from "@/test-utils";
+
+const dismissPermissionRationale = vi.fn();
+const declinePermissionRationale = vi.fn();
+const dismissPermissionDeniedHelp = vi.fn();
+const requestPermission = vi.fn();
+
+vi.mock("@/hooks/useAppBadge", () => ({
+  useAppBadge: vi.fn(),
+}));
+
+vi.mock("@/hooks/useHaptics", () => ({
+  useHaptics: () => ({ impact: vi.fn() }),
+}));
+
+function renderManager() {
+  return render(
+    <SlideModalProvider>
+      <AppBadgeManager />
+    </SlideModalProvider>,
+  );
+}
+
+describe("AppBadgeManager", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useAppBadge).mockReturnValue({
+      showPermissionRationale: true,
+      showPermissionDeniedHelp: false,
+      isRequestingPermission: false,
+      dismissPermissionRationale,
+      declinePermissionRationale,
+      dismissPermissionDeniedHelp,
+      requestPermission,
+    });
+  });
+
+  it("should explain badge-only permission before continuing", () => {
+    renderManager();
+
+    expect(
+      screen.getByRole("dialog", { name: "appBadge.title" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("appBadge.description")).toBeInTheDocument();
+  });
+
+  it("should decline the rationale without requesting permission", async () => {
+    const user = userEvent.setup();
+    renderManager();
+
+    await user.click(screen.getByRole("button", { name: "appBadge.noThanks" }));
+
+    expect(declinePermissionRationale).toHaveBeenCalledOnce();
+    expect(requestPermission).not.toHaveBeenCalled();
+  });
+
+  it("should dismiss the rationale without persisting opt-out", async () => {
+    const user = userEvent.setup();
+    renderManager();
+
+    await user.click(screen.getAllByTestId("modal-overlay")[0]!);
+
+    expect(dismissPermissionRationale).toHaveBeenCalledOnce();
+    expect(declinePermissionRationale).not.toHaveBeenCalled();
+  });
+
+  it("should request permission only after the user continues", async () => {
+    const user = userEvent.setup();
+    renderManager();
+
+    await user.click(screen.getByRole("button", { name: "appBadge.continue" }));
+
+    expect(requestPermission).toHaveBeenCalledOnce();
+  });
+
+  it("should explain how to recover denied system permission", () => {
+    vi.mocked(useAppBadge).mockReturnValue({
+      showPermissionRationale: false,
+      showPermissionDeniedHelp: true,
+      isRequestingPermission: false,
+      dismissPermissionRationale,
+      declinePermissionRationale,
+      dismissPermissionDeniedHelp,
+      requestPermission,
+    });
+
+    renderManager();
+
+    expect(screen.getByText("appBadge.deniedDescription")).toBeInTheDocument();
+  });
+});