@peers-app/peers-ui 0.25.1 → 0.25.3

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,110 @@
+import type { IInvite } from "@peers-app/peers-sdk";
+import { actionsForInvite, classifyInvite } 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");
+  });
+});

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`. */

package/src/screens/invites/pending-invites-list.tsx

@@ -8,26 +8,26 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { inviteTools } from "./invites-ipc";
 
-/** Props for {@link PendingInvitesList}. */
-export interface PendingInvitesListProps {
-  /** Only show rows of this type. */
-  type?: IInvite["type"];
-  /** Only show rows for this group. */
-  groupId?: string;
-  /** Statuses to include; defaults to pending only. */
-  statuses?: InviteStatus[];
-  /** Hide the section entirely when there is nothing to show. */
-  hideWhenEmpty?: boolean;
-  title?: string;
+/** Filtered invite rows plus whether any non-pending row exists for the same type and group. */
+export interface IInviteRowQuery {
+  /** Rows matching the status filter, newest first. */
+  rows: IInvite[];
+  /** True when at least one matching invite is not pending. */
+  hasHistory: boolean;
 }
 
-/** Subscribe to the personal `Invites` table and return rows matching the filter, newest first. */
+/**
+ * Subscribe to the personal `Invites` table.
+ *
+ * @param filter Type, group, and statuses to include. Statuses default to pending.
+ * @returns Matching rows and whether any non-pending row exists, or `undefined` while loading.
+ */
 export function useInviteRows(filter: {
   type?: IInvite["type"];
   groupId?: string;
   statuses?: InviteStatus[];
-}): IInvite[] | undefined {
-  const [rows, setRows] = useState<IInvite[] | undefined>(undefined);
+}): IInviteRowQuery | undefined {
+  const [query, setQuery] = useState<IInviteRowQuery | undefined>(undefined);
   const statuses = filter.statuses ?? ["pending"];
   const statusKey = statuses.join(",");
 
@@ -39,11 +39,12 @@ export function useInviteRows(filter: {
       ...(filter.groupId ? { groupId: filter.groupId } : {}),
     });
     const wanted = new Set(statusKey.split(","));
-    setRows(
-      all
+    setQuery({
+      rows: all
         .filter((row) => wanted.has(row.status))
         .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
-    );
+      hasHistory: all.some((row) => row.status !== "pending"),
+    });
   }, [filter.type, filter.groupId, statusKey]);
 
   useEffect(() => {
@@ -65,7 +66,7 @@ export function useInviteRows(filter: {
     };
   }, [refresh]);
 
-  return rows;
+  return query;
 }
 
 function counterpartLabel(row: IInvite): string {
@@ -77,8 +78,20 @@ export function describeInviteRow(row: IInvite): { title: string; detail: string
   const who = counterpartLabel(row);
   const role = row.role !== undefined ? getRoleLabel(row.role) : undefined;
   const group = row.groupName ?? "a group";
+  if (row.type === "device") {
+    return {
+      title: row.direction === "in" ? `Device request from ${who}` : `Device invite for ${who}`,
+      detail: "Device admission actions are not available yet.",
+    };
+  }
   if (row.type === "contact") {
     if (row.direction === "in") {
+      if (row.recipientUserId) {
+        return {
+          title: `Connection request to ${who}`,
+          detail: "Waiting for them to confirm.",
+        };
+      }
       return { title: `${who} wants to connect`, detail: "Accept to add them as a contact." };
     }
     if (row.counterpart) {
@@ -90,13 +103,19 @@ export function describeInviteRow(row: IInvite): { title: string; detail: string
     };
   }
   if (row.direction === "in") {
+    if (row.recipientUserId) {
+      return { title: `Request to join ${group}`, detail: `Waiting for ${who} to approve.` };
+    }
     if (row.mode === "direct") {
       return {
         title: `${who} invited you to ${group}`,
         detail: role ? `You would join as ${role}.` : "",
       };
     }
-    return { title: `Joining ${group}`, detail: `Waiting for ${who} to approve.` };
+    return {
+      title: `${who} wants to join ${group}`,
+      detail: role ? `Requested as ${role}. Approve or deny.` : "Approve or deny.",
+    };
   }
   if (row.mode === "direct") {
     return { title: `Invited ${who} to ${group}`, detail: "Waiting for them to accept." };
@@ -113,26 +132,55 @@ export function describeInviteRow(row: IInvite): { title: string; detail: string
   };
 }
 
-type RowAction = "accept" | "decline" | "approve" | "deny" | "revoke";
+/** Which Activity bucket a row belongs in. */
+export type InviteBucket = "attention" | "waiting" | "history";
 
-function actionsFor(row: IInvite): RowAction[] {
+/**
+ * Group an invite by what the signed-in user can do with it.
+ *
+ * Pending rows that need a decision are `attention`. Pending rows waiting on
+ * someone else, including links the user issued, are `waiting`.
+ *
+ * @param row - Invite row from the personal Invites table.
+ */
+export function classifyInvite(row: IInvite): InviteBucket {
   if (row.status !== "pending") {
+    return "history";
+  }
+  return actionsForInvite(row).some((action) => action !== "revoke") ? "attention" : "waiting";
+}
+
+/** Action that the local user can take on an Activity row. */
+export type InviteRowAction = "accept" | "decline" | "approve" | "deny" | "revoke";
+
+/**
+ * Return actions that are valid from the local user's perspective.
+ *
+ * Inbound rows with `recipientUserId` were initiated locally and are waiting
+ * for that recipient. Actionable profile requests and join requests omit it.
+ */
+export function actionsForInvite(row: IInvite): InviteRowAction[] {
+  if (row.status !== "pending" || row.type === "device") {
+    return [];
+  }
+  if (row.direction === "out") {
+    return ["revoke"];
+  }
+  if (row.recipientUserId) {
     return [];
   }
   if (row.direction === "in") {
-    // Inbound rows I can act on: contact requests and direct group invites.
     if (row.type === "contact" || row.mode === "direct") {
       return ["accept", "decline"];
     }
-    return []; // my own outstanding join request; nothing to do but wait
-  }
-  if (row.counterpart && row.type === "group" && row.mode !== "direct") {
-    return ["approve", "deny"];
+    if (row.type === "group" && row.mode === "approve" && row.counterpart) {
+      return ["approve", "deny"];
+    }
   }
-  return ["revoke"];
+  return [];
 }
 
-const ACTION_LABELS: Record<RowAction, { text: string; className: string }> = {
+const ACTION_LABELS: Record<InviteRowAction, { text: string; className: string }> = {
   accept: { text: "Accept", className: "btn-primary" },
   decline: { text: "Decline", className: "btn-outline-secondary" },
   approve: { text: "Approve", className: "btn-primary" },
@@ -140,12 +188,13 @@ const ACTION_LABELS: Record<RowAction, { text: string; className: string }> = {
   revoke: { text: "Revoke", className: "btn-outline-danger" },
 };
 
-function InviteRow({ row }: { row: IInvite }) {
-  const [busy, setBusy] = useState<RowAction | undefined>(undefined);
+/** One invite row and the actions its direction and status allow. */
+export function InviteRow({ row }: { row: IInvite }) {
+  const [busy, setBusy] = useState<InviteRowAction | undefined>(undefined);
   const [error, setError] = useState("");
   const { title, detail } = describeInviteRow(row);
 
-  const run = async (action: RowAction) => {
+  const run = async (action: InviteRowAction) => {
     setBusy(action);
     setError("");
     try {
@@ -167,7 +216,10 @@ function InviteRow({ row }: { row: IInvite }) {
     <div className="list-group-item">
       <div className="d-flex justify-content-between align-items-center gap-2 flex-wrap">
         <div className="flex-grow-1">
-          <div className="fw-semibold">{title}</div>
+          <div className="fw-semibold">
+            <span className="badge text-bg-light border me-2 text-capitalize">{row.type}</span>
+            {title}
+          </div>
           {detail ? <small className="text-muted d-block">{detail}</small> : null}
           {row.deliveryState === "queued" ? (
             <small className="text-warning d-block">Queued until they are reachable</small>
@@ -177,7 +229,7 @@ function InviteRow({ row }: { row: IInvite }) {
           ) : null}
         </div>
         <div className="d-flex gap-1">
-          {actionsFor(row).map((action) => (
+          {actionsForInvite(row).map((action) => (
             <button
               key={action}
               type="button"
@@ -194,31 +246,3 @@ function InviteRow({ row }: { row: IInvite }) {
     </div>
   );
 }
-
-/**
- * Live list of invite rows with the actions each one supports. Subscribes to the `Invites`
- * table directly, so it updates when replies arrive on any of the user's devices.
- */
-export function PendingInvitesList(props: PendingInvitesListProps) {
-  const rows = useInviteRows(props);
-  if (!rows) {
-    return null;
-  }
-  if (rows.length === 0 && props.hideWhenEmpty) {
-    return null;
-  }
-  return (
-    <section className="mb-3">
-      {props.title ? <h6 className="mb-2">{props.title}</h6> : null}
-      {rows.length === 0 ? (
-        <p className="text-muted small mb-0">No pending invites.</p>
-      ) : (
-        <div className="list-group">
-          {rows.map((row) => (
-            <InviteRow key={row.inviteId} row={row} />
-          ))}
-        </div>
-      )}
-    </section>
-  );
-}