@peers-app/peers-ui 0.25.2 → 0.25.4

package/src/screens/invites/activity-view.test.tsx

@@ -0,0 +1,127 @@
+import type { IInvite } from "@peers-app/peers-sdk";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ActivityView } from "./activity-view";
+import { inviteTools } from "./invites-ipc";
+import { useInviteRows } from "./pending-invites-list";
+
+jest.mock("./pending-invites-list", () => {
+  const actual =
+    jest.requireActual<typeof import("./pending-invites-list")>("./pending-invites-list");
+  return {
+    ...actual,
+    useInviteRows: jest.fn(),
+  };
+});
+
+jest.mock("./invites-ipc", () => ({
+  inviteTools: jest.fn(),
+}));
+
+function invite(
+  partial: Partial<IInvite> & Pick<IInvite, "inviteId" | "direction" | "type" | "mode">,
+): IInvite {
+  return {
+    status: "pending",
+    epoch: 1,
+    createdAt: new Date("2026-01-01T00:00:00Z"),
+    expiresAt: new Date("2026-02-01T00:00:00Z"),
+    counterpart: { userId: "abcdefghijklmnopqrstuvwxy", displayName: "Ada" },
+    ...partial,
+  } as IInvite;
+}
+
+const attention = invite({
+  inviteId: "inboundcontact0000000001",
+  direction: "in",
+  type: "contact",
+  mode: "contact",
+});
+const waiting = invite({
+  inviteId: "outboundcontact0000000001",
+  direction: "out",
+  type: "contact",
+  mode: "contact",
+});
+const joinRequest = invite({
+  inviteId: "groupjoinrequest000000001",
+  direction: "in",
+  type: "group",
+  mode: "approve",
+  groupId: "zyxwvutsrqponmlkjihgfedcb",
+  groupName: "Neighbors",
+});
+const history = invite({
+  inviteId: "oldcontact000000000000001",
+  direction: "in",
+  type: "contact",
+  mode: "contact",
+  status: "accepted",
+});
+
+const mockedRows = useInviteRows as jest.MockedFunction<typeof useInviteRows>;
+const acceptInvite = jest.fn();
+const approveJoinRequest = jest.fn();
+
+describe("ActivityView", () => {
+  beforeEach(() => {
+    acceptInvite.mockReset();
+    approveJoinRequest.mockReset();
+    (inviteTools as jest.Mock).mockResolvedValue({
+      acceptInvite,
+      declineInvite: jest.fn(),
+      approveJoinRequest,
+      denyJoinRequest: jest.fn(),
+      revokeInvite: jest.fn(),
+    });
+    mockedRows.mockImplementation((filter) => ({
+      rows: filter.statuses?.includes("accepted") ? [history] : [attention, joinRequest, waiting],
+      hasHistory: true,
+    }));
+  });
+
+  it("offers approval for a received group join request", async () => {
+    render(<ActivityView />);
+
+    expect(screen.getByText("Ada wants to join Neighbors")).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Approve" }));
+    await waitFor(() =>
+      expect(approveJoinRequest).toHaveBeenCalledWith({ inviteId: joinRequest.inviteId }),
+    );
+  });
+
+  it("splits pending invites and accepts a request from the inbox", async () => {
+    render(<ActivityView />);
+
+    expect(screen.getByRole("heading", { name: "Needs your attention" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Waiting on others" })).toBeInTheDocument();
+    expect(screen.getByText("Ada wants to connect")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: "Accept" }));
+    await waitFor(() =>
+      expect(acceptInvite).toHaveBeenCalledWith({ inviteId: attention.inviteId }),
+    );
+  });
+
+  it("switches to history and shows an empty pending inbox", async () => {
+    const view = render(<ActivityView />);
+    await userEvent.click(screen.getByRole("button", { name: "History" }));
+    expect(screen.getByRole("heading", { name: "History" })).toBeInTheDocument();
+    expect(screen.getByText(/accepted/i)).toBeInTheDocument();
+    expect(screen.queryByRole("heading", { name: "Needs your attention" })).not.toBeInTheDocument();
+
+    mockedRows.mockReturnValue({ rows: [], hasHistory: false });
+    view.rerender(<ActivityView />);
+    await userEvent.click(screen.getByRole("button", { name: "Pending" }));
+    expect(screen.getByText("No invites need attention.")).toBeInTheDocument();
+  });
+
+  it("shows the active filter", () => {
+    render(<ActivityView filter={{ type: "group", groupId: "zyxwvutsrqponmlkjihgfedcb" }} />);
+    expect(screen.getByText("Showing invites for this group.")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Show all" })).toHaveAttribute(
+      "href",
+      "#identity/activity",
+    );
+  });
+});

package/src/screens/invites/activity-view.tsx

@@ -0,0 +1,162 @@
+import type { IInvite, InviteStatus } from "@peers-app/peers-sdk";
+import { useState } from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import {
+  IDENTITY_ACCEPT_PATH,
+  type IdentityInviteType,
+  identityActivityFilterPath,
+} from "../identity/identity-routes";
+import { classifyInvite, InviteRow, useInviteRows } from "./pending-invites-list";
+
+/** Statuses shown in Activity's History view. */
+const TERMINAL_STATUSES: InviteStatus[] = ["accepted", "declined", "expired", "revoked"];
+
+/** Props for {@link ActivityView}. */
+export interface ActivityViewProps {
+  /** Optional type and group limit, taken from the route query. */
+  filter?: {
+    type?: IdentityInviteType;
+    groupId?: string;
+  };
+}
+
+/**
+ * Unified invite inbox.
+ *
+ * Pending rows are split into decisions the user can make and items waiting
+ * on someone else. History is a separate view, not a disclosure on each list.
+ */
+export function ActivityView(props: ActivityViewProps) {
+  const [view, setView] = useState<"pending" | "history">("pending");
+  const filter = props.filter;
+  const query = useInviteRows({
+    type: filter?.type,
+    groupId: filter?.groupId,
+    statuses: view === "history" ? TERMINAL_STATUSES : ["pending"],
+  });
+  const rows = query?.rows ?? [];
+  const attention = rows.filter((row) => classifyInvite(row) === "attention");
+  const waiting = rows.filter((row) => classifyInvite(row) === "waiting");
+  const filtered = Boolean(filter?.type || filter?.groupId);
+
+  return (
+    <div>
+      <div className="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-3">
+        <h4 className="mb-0">
+          <i className="bi bi-inbox me-2" />
+          Activity
+        </h4>
+        <div className="d-flex gap-2">
+          <div className="btn-group btn-group-sm" role="group" aria-label="Invite view">
+            <button
+              type="button"
+              className={`btn ${view === "pending" ? "btn-primary" : "btn-outline-primary"}`}
+              onClick={() => setView("pending")}
+            >
+              Pending
+            </button>
+            <button
+              type="button"
+              className={`btn ${view === "history" ? "btn-primary" : "btn-outline-primary"}`}
+              onClick={() => setView("history")}
+            >
+              History
+            </button>
+          </div>
+          <a href={`#${IDENTITY_ACCEPT_PATH}`} className="btn btn-outline-primary btn-sm">
+            <i className="bi-qr-code-scan me-1" />
+            Enter or scan an invite
+          </a>
+        </div>
+      </div>
+
+      {filtered ? (
+        <div className="alert alert-secondary py-2 d-flex justify-content-between align-items-center">
+          <span>{filterLabel(filter?.type, filter?.groupId)}</span>
+          <a href="#identity/activity">Show all</a>
+        </div>
+      ) : null}
+
+      {!query ? (
+        <LoadingIndicator />
+      ) : view === "history" ? (
+        <InviteBucket title="History" rows={rows} empty="No invite history." />
+      ) : (
+        <>
+          <InviteBucket
+            title="Needs your attention"
+            rows={attention}
+            empty={
+              waiting.length === 0 ? "No invites need attention." : "Nothing needs a decision."
+            }
+          />
+          <InviteBucket
+            title="Waiting on others"
+            rows={waiting}
+            empty={attention.length === 0 ? "" : "Nothing is waiting on someone else."}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Compact link from a resource screen to the matching Activity filter.
+ * Renders nothing when that filter has no pending rows.
+ */
+export function PendingWorkLink(props: { type: IdentityInviteType; groupId?: string }) {
+  const query = useInviteRows({
+    type: props.type,
+    groupId: props.groupId,
+    statuses: ["pending"],
+  });
+  if (!query || query.rows.length === 0) {
+    return null;
+  }
+  const noun = props.type === "contact" ? "contact" : props.type === "group" ? "group" : "device";
+  const count = query.rows.length;
+  return (
+    <a
+      href={`#${identityActivityFilterPath(props.type, props.groupId)}`}
+      className="alert alert-info py-2 px-3 d-flex justify-content-between align-items-center text-decoration-none"
+    >
+      <span>
+        {count} pending {noun} invite{count === 1 ? "" : "s"}
+      </span>
+      <span>View in Activity</span>
+    </a>
+  );
+}
+
+function InviteBucket(props: { title: string; rows: IInvite[]; empty: string }) {
+  if (props.rows.length === 0 && !props.empty) {
+    return null;
+  }
+  return (
+    <section className="mb-4">
+      <h6>{props.title}</h6>
+      {props.rows.length === 0 ? (
+        <p className="text-muted small mb-0">{props.empty}</p>
+      ) : (
+        <div className="list-group">
+          {props.rows.map((row) => (
+            <InviteRow key={row.inviteId} row={row} />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function filterLabel(type: IdentityInviteType | undefined, groupId: string | undefined): string {
+  const kind =
+    type === "contact" ? "contact" : type === "group" ? "group" : type === "device" ? "device" : "";
+  if (groupId) {
+    return "Showing invites for this group.";
+  }
+  if (kind) {
+    return `Showing ${kind} invites.`;
+  }
+  return "Showing a filtered list.";
+}

package/src/screens/invites/index.ts

@@ -1,9 +1,6 @@
-// Import the screen so it registers its routes.
-import "./invites-screen";
-
 export * from "./accept-invite";
+export * from "./activity-view";
 export * from "./invite-capture";
 export * from "./invite-share";
 export * from "./invites-ipc";
-export * from "./invites-screen";
 export * from "./pending-invites-list";

package/src/screens/invites/invite-capture.ts

@@ -11,9 +11,6 @@ import { extractInviteTokenText, observable } from "@peers-app/peers-sdk";
 /** sessionStorage key for a captured token awaiting the Accept screen. */
 export const PENDING_INVITE_STORAGE_KEY = "peers.pendingInviteToken";
 
-/** Route of the Accept-invite screen. */
-export const ACCEPT_INVITE_PATH = "invites/accept";
-
 /** Fires whenever a new token is captured, so a mounted app can navigate immediately. */
 export const inviteCaptured = observable<string | undefined>(undefined);
 

package/src/screens/invites/invite-classify.test.ts

@@ -0,0 +1,129 @@
+import type { IInvite } from "@peers-app/peers-sdk";
+import { actionsForInvite, classifyInvite, describeInviteRow } from "./pending-invites-list";
+
+function invite(
+  partial: Partial<IInvite> & Pick<IInvite, "inviteId" | "direction" | "type" | "mode">,
+): IInvite {
+  return {
+    status: "pending",
+    epoch: 1,
+    createdAt: new Date("2026-01-01T00:00:00Z"),
+    expiresAt: new Date("2026-02-01T00:00:00Z"),
+    ...partial,
+  } as IInvite;
+}
+
+describe("classifyInvite", () => {
+  const counterpart = {
+    userId: "abcdefghijklmnopqrstuvwxy",
+    publicKey: "pk",
+    publicBoxKey: "box",
+  };
+
+  it("puts received decisions in attention", () => {
+    const profileRequest = invite({
+      inviteId: "1",
+      direction: "in",
+      type: "contact",
+      mode: "profile",
+      counterpart,
+      parentInviteId: "profileinvite0000000000001",
+    });
+    const directGroupInvite = invite({
+      inviteId: "2",
+      direction: "in",
+      type: "group",
+      mode: "direct",
+      counterpart,
+    });
+    const joinRequest = invite({
+      inviteId: "3",
+      direction: "in",
+      type: "group",
+      mode: "approve",
+      counterpart,
+      parentInviteId: "groupinvite00000000000001",
+    });
+
+    expect(classifyInvite(profileRequest)).toBe("attention");
+    expect(actionsForInvite(profileRequest)).toEqual(["accept", "decline"]);
+    expect(classifyInvite(directGroupInvite)).toBe("attention");
+    expect(actionsForInvite(directGroupInvite)).toEqual(["accept", "decline"]);
+    expect(classifyInvite(joinRequest)).toBe("attention");
+    expect(actionsForInvite(joinRequest)).toEqual(["approve", "deny"]);
+  });
+
+  it("keeps locally initiated requests and unsupported device rows waiting", () => {
+    const contactRequest = invite({
+      inviteId: "4",
+      direction: "in",
+      type: "contact",
+      mode: "profile",
+      counterpart,
+      recipientUserId: counterpart.userId,
+    });
+    const groupRequest = invite({
+      inviteId: "5",
+      direction: "in",
+      type: "group",
+      mode: "approve",
+      counterpart,
+      recipientUserId: counterpart.userId,
+    });
+    const outbound = invite({
+      inviteId: "6",
+      direction: "out",
+      type: "group",
+      mode: "open",
+    });
+    const device = invite({
+      inviteId: "7",
+      direction: "in",
+      type: "device",
+      mode: "direct",
+      counterpart,
+    });
+
+    expect(classifyInvite(contactRequest)).toBe("waiting");
+    expect(actionsForInvite(contactRequest)).toEqual([]);
+    expect(classifyInvite(groupRequest)).toBe("waiting");
+    expect(actionsForInvite(groupRequest)).toEqual([]);
+    expect(classifyInvite(outbound)).toBe("waiting");
+    expect(actionsForInvite(outbound)).toEqual(["revoke"]);
+    expect(classifyInvite(device)).toBe("waiting");
+    expect(actionsForInvite(device)).toEqual([]);
+  });
+
+  it("puts terminal rows in history", () => {
+    expect(
+      classifyInvite(
+        invite({
+          inviteId: "8",
+          direction: "in",
+          type: "contact",
+          mode: "contact",
+          status: "accepted",
+        }),
+      ),
+    ).toBe("history");
+  });
+
+  it("describes an open join as automatic rather than approval-gated", () => {
+    const openJoin = invite({
+      inviteId: "openjoinrequest0000000001",
+      direction: "in",
+      type: "group",
+      mode: "open",
+      counterpart: { ...counterpart, displayName: "Ada" },
+      recipientUserId: counterpart.userId,
+      groupName: "Neighbors",
+      deliveryState: "queued",
+    });
+
+    expect(describeInviteRow(openJoin)).toEqual({
+      title: "Joining Neighbors",
+      detail: "Completing automatically; no approval is required.",
+    });
+    expect(classifyInvite(openJoin)).toBe("waiting");
+  });
+});

package/src/screens/invites/invites-ipc.ts

@@ -1,71 +1,22 @@
 import {
-  createContractConsumer,
-  getHostContractTransport,
   getInvitesContractDefinition,
   getUserContext,
-  type IContractTransport,
+  hostContractConsumer,
   type IInvitesConsumer,
-  subscribeHostContractTransport,
-  waitForHostContractTransport,
 } from "@peers-app/peers-sdk";
 
-const HOST_TRANSPORT_TIMEOUT_MS = 10_000;
-
-let cached: { transport: IContractTransport; consumer: IInvitesConsumer } | undefined;
-let pending: Promise<IInvitesConsumer> | undefined;
-
-subscribeHostContractTransport(
-  (transport) => {
-    if (cached && cached.transport !== transport) {
-      cached.consumer.dispose();
-      cached = undefined;
-      pending = undefined;
-    }
-  },
-  { emitCurrent: false },
-);
-
-async function load(transport: IContractTransport): Promise<IInvitesConsumer> {
-  const userContext = await getUserContext();
-  const consumer = createContractConsumer(getInvitesContractDefinition(), transport, {
-    dataContextId: userContext.userId,
-  }) as unknown as IInvitesConsumer;
-  try {
-    await consumer.loadingPromise;
-    if (getHostContractTransport() !== transport) {
-      consumer.dispose();
-      return getInvitesConsumer();
-    }
-    cached = { transport, consumer };
-    return consumer;
-  } catch (error) {
-    consumer.dispose();
-    throw error;
-  }
-}
+const invites = hostContractConsumer<IInvitesConsumer>(getInvitesContractDefinition(), {
+  dataContextId: async () => (await getUserContext()).userId,
+});
 
 /**
  * Return the typed local-host consumer for the System Invites contract.
  *
  * The consumer is cached per host transport and rebuilt if the transport is replaced
- * (e.g. after a socket reconnect).
+ * (for example after a socket reconnect).
  */
 export async function getInvitesConsumer(): Promise<IInvitesConsumer> {
-  const transport =
-    getHostContractTransport() ??
-    (await waitForHostContractTransport({ timeoutMs: HOST_TRANSPORT_TIMEOUT_MS }));
-  if (cached?.transport === transport) {
-    return cached.consumer;
-  }
-  if (pending) {
-    return pending;
-  }
-  pending = load(transport);
-  try {
-    return await pending;
-  } finally {
-    pending = undefined;
-  }
+  return invites.get();
 }
 
 /** Shorthand for `(await getInvitesConsumer()).tools`. */