@peers-app/peers-ui 0.25.2 → 0.25.4

package/src/screens/identity/identity-screen.tsx

@@ -0,0 +1,282 @@
+import type { IInvite } from "@peers-app/peers-sdk";
+import { type ReactNode, useState } from "react";
+import { ResponsiveSectionNav } from "../../components/responsive-section-nav";
+import { isDesktop, mainContentPath } from "../../globals";
+import { useObservable } from "../../hooks";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import { AccountScreen } from "../account/account-screen";
+import { ContactDetails } from "../contacts/contact-details";
+import { ContactList } from "../contacts/contact-list";
+import { DevicesSection } from "../devices/devices-list";
+import { GroupDetails } from "../groups/group-details";
+import { GroupList } from "../groups/group-list";
+import { AcceptInvite } from "../invites/accept-invite";
+import { ActivityView } from "../invites/activity-view";
+import { classifyInvite, useInviteRows } from "../invites/pending-invites-list";
+import {
+  IDENTITY_ACCEPT_PATH,
+  IDENTITY_ACCOUNT_PATH,
+  IDENTITY_ACTIVITY_PATH,
+  IDENTITY_DEVICES_PATH,
+  IDENTITY_GROUP_NEW_PATH,
+  IDENTITY_GROUPS_PATH,
+  IDENTITY_PAIR_PATH,
+  IDENTITY_PEOPLE_INVITE_PATH,
+  IDENTITY_PEOPLE_PATH,
+  type IdentitySectionId,
+  parseIdentityLocation,
+} from "./identity-routes";
+
+const SECTION_PATHS: Record<IdentitySectionId, string> = {
+  activity: IDENTITY_ACTIVITY_PATH,
+  people: IDENTITY_PEOPLE_PATH,
+  groups: IDENTITY_GROUPS_PATH,
+  devices: IDENTITY_DEVICES_PATH,
+  account: IDENTITY_ACCOUNT_PATH,
+};
+
+/**
+ * Identity app shell.
+ *
+ * Activity, People, Groups, Devices, and Account stay one top-level tab. The
+ * route selects the section, and detail routes keep that section highlighted.
+ */
+export function IdentityScreen(props: { path?: string }) {
+  const [livePath] = useObservable(mainContentPath);
+  const location =
+    parseIdentityLocation(props.path ?? livePath) ?? parseIdentityLocation(IDENTITY_ACTIVITY_PATH);
+  const pending = useInviteRows({ statuses: ["pending"] });
+  const rows = pending?.rows;
+  if (!location) {
+    return null;
+  }
+
+  return (
+    <ResponsiveSectionNav
+      label="Identity"
+      activeSectionId={location.section}
+      onSelect={(sectionId) => mainContentPath(SECTION_PATHS[sectionId as IdentitySectionId])}
+      toolbar={<IdentityQuickActions />}
+      sections={[
+        {
+          id: "activity",
+          label: "Activity",
+          iconClassName: "bi-inbox",
+          badge: badgeCount(rows, "attention"),
+        },
+        {
+          id: "people",
+          label: "People",
+          iconClassName: "bi-person-fill-check",
+          badge: badgeCount(rows, "contact"),
+        },
+        {
+          id: "groups",
+          label: "Groups",
+          iconClassName: "bi-people-fill",
+          badge: badgeCount(rows, "group"),
+        },
+        {
+          id: "devices",
+          label: "Devices",
+          iconClassName: "bi-laptop",
+          badge: badgeCount(rows, "device"),
+        },
+        {
+          id: "account",
+          label: "Account",
+          iconClassName: "bi-person-circle",
+        },
+      ]}
+    >
+      <IdentityBody location={location} />
+    </ResponsiveSectionNav>
+  );
+}
+
+function IdentityBody(props: { location: NonNullable<ReturnType<typeof parseIdentityLocation>> }) {
+  const { location } = props;
+  if (location.accepting) {
+    return (
+      <div className="container-fluid py-3" style={{ maxWidth: 720 }}>
+        <a href={`#${IDENTITY_ACTIVITY_PATH}`} className="btn btn-link btn-sm px-0 mb-2">
+          Back to Activity
+        </a>
+        <h4 className="mb-3">
+          <i className="bi bi-envelope-paper me-2" />
+          Accept an invite
+        </h4>
+        <div className="card">
+          <div className="card-body">
+            <AcceptInvite onDone={() => mainContentPath(IDENTITY_ACTIVITY_PATH)} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+  if (location.section === "people") {
+    return location.personId ? (
+      <DetailFrame backHref={`#${IDENTITY_PEOPLE_PATH}`} backLabel="Back to people">
+        <ContactDetails userId={location.personId} />
+      </DetailFrame>
+    ) : (
+      <ContactList action={location.peopleAction} />
+    );
+  }
+  if (location.section === "groups") {
+    return location.groupId ? (
+      <DetailFrame backHref={`#${IDENTITY_GROUPS_PATH}`} backLabel="Back to groups">
+        <GroupDetails groupId={location.groupId} />
+      </DetailFrame>
+    ) : (
+      <GroupList creating={location.creatingGroup} />
+    );
+  }
+  if (location.section === "devices") {
+    const mode = location.pairing ? "pair" : location.deviceId ? "detail" : "list";
+    return <DevicesSection mode={mode} deviceId={location.deviceId} />;
+  }
+  if (location.section === "account") {
+    return <AccountScreen />;
+  }
+  return (
+    <div className="container-xxl p-3">
+      <ActivityView filter={location.activityFilter} />
+    </div>
+  );
+}
+
+function IdentityQuickActions() {
+  const [desktop] = useObservable(isDesktop);
+  const [showAdd, setShowAdd] = useState(false);
+  const addActions = [
+    {
+      path: IDENTITY_PEOPLE_INVITE_PATH,
+      label: "Add person",
+      icon: "bi-person-plus",
+    },
+    {
+      path: IDENTITY_GROUP_NEW_PATH,
+      label: "Create group",
+      icon: "bi-people",
+    },
+    {
+      path: IDENTITY_PAIR_PATH,
+      label: "Add device",
+      icon: "bi-laptop",
+    },
+  ];
+
+  if (desktop) {
+    return (
+      <div
+        className="d-grid align-items-center gap-2 border-bottom p-2"
+        style={{ gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)" }}
+      >
+        <div className="overflow-hidden">
+          <div className="fw-semibold">Identity</div>
+          <small className="text-muted text-truncate d-block">
+            People, groups, and your devices
+          </small>
+        </div>
+        <div className="d-flex align-items-center justify-content-center gap-2">
+          {addActions.map((action) => (
+            <a
+              key={action.path}
+              href={`#${action.path}`}
+              className="btn btn-outline-primary btn-sm"
+            >
+              <i className={`bi ${action.icon} me-1`} />
+              {action.label}
+            </a>
+          ))}
+          <a href={`#${IDENTITY_ACCEPT_PATH}`} className="btn btn-primary btn-sm">
+            <i className="bi bi-qr-code-scan me-1" />
+            Use invite
+          </a>
+        </div>
+        <span aria-hidden="true" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="position-relative d-flex align-items-center gap-2 border-bottom p-2">
+      <div className="me-auto fw-semibold">Identity</div>
+      <button
+        type="button"
+        className="btn btn-outline-primary btn-sm"
+        aria-expanded={showAdd}
+        onClick={() => setShowAdd((open) => !open)}
+      >
+        <i className="bi bi-plus-lg me-1" />
+        Add
+      </button>
+      <a href={`#${IDENTITY_ACCEPT_PATH}`} className="btn btn-primary btn-sm">
+        <i className="bi bi-qr-code-scan me-1" />
+        Invite
+      </a>
+      {showAdd ? (
+        <div
+          className="card position-absolute end-0 top-100 mt-1 shadow-sm"
+          style={{ zIndex: 20, minWidth: 190 }}
+        >
+          <div className="list-group list-group-flush">
+            {addActions.map((action) => (
+              <a
+                key={action.path}
+                href={`#${action.path}`}
+                className="list-group-item list-group-item-action d-flex align-items-center gap-2"
+                onClick={() => setShowAdd(false)}
+              >
+                <i className={`bi ${action.icon}`} />
+                {action.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function DetailFrame(props: { backHref: string; backLabel: string; children: ReactNode }) {
+  return (
+    <div>
+      <a href={props.backHref} className="btn btn-link btn-sm px-3 pt-3">
+        {props.backLabel}
+      </a>
+      {props.children}
+    </div>
+  );
+}
+
+function badgeCount(
+  rows: IInvite[] | undefined,
+  kind: "attention" | "contact" | "group" | "device",
+): number | undefined {
+  if (!rows) {
+    return undefined;
+  }
+  const count = rows.filter((row) =>
+    kind === "attention"
+      ? classifyInvite(row) === "attention"
+      : row.type === kind && classifyInvite(row) === "attention",
+  ).length;
+  return count > 0 ? count : undefined;
+}
+
+registerInternalPeersUI({
+  peersUIId: "00identity0screen00000001",
+  component: IdentityScreen,
+  routes: [
+    {
+      isMatch: (_props, context) => {
+        const path = context.path.split("?")[0];
+        return path === "identity" || path.startsWith("identity/");
+      },
+      uiCategory: "screen",
+      priority: 3,
+    },
+  ],
+});

package/src/screens/identity/index.ts

@@ -0,0 +1,2 @@
+export { identityApp } from "../../system-apps/identity.app";
+import "./identity-screen";

package/src/screens/identity/invite-contact-panel.tsx

@@ -0,0 +1,45 @@
+import type { ICreatedInvite } from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { InviteShare } from "../invites/invite-share";
+import { inviteTools } from "../invites/invites-ipc";
+
+/** Issues a one-off contact invite and shows it as a QR code and link. */
+export function InviteContactPanel({ onClose }: { onClose: () => void }) {
+  const [invite, setInvite] = useState<ICreatedInvite | undefined>(undefined);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void inviteTools()
+      .then((tools) => tools.createContactInvite({}))
+      .then(({ invite: created }) => {
+        if (!cancelled) setInvite(created);
+      })
+      .catch((err) => {
+        if (!cancelled) setError((err as Error).message || "Could not create an invite.");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h6 className="card-title">Invite someone</h6>
+        {error ? <div className="alert alert-danger py-2">{error}</div> : null}
+        {invite ? (
+          <InviteShare
+            invite={invite}
+            description="Send this link or show the QR. When they accept, you are connected — no need to be online at the same time."
+            shareText="Connect with me on Peers:"
+            onDone={onClose}
+          />
+        ) : !error ? (
+          <LoadingIndicator />
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/screens/identity/profile-invite.tsx

@@ -0,0 +1,93 @@
+import type { ICreatedInvite } from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { Tooltip } from "../../components/tooltip";
+import { InviteShare } from "../invites/invite-share";
+import { inviteTools } from "../invites/invites-ipc";
+
+const PROFILE_QR_INFO = `### Your profile QR
+
+Anyone who scans this (or opens the link) can send you a contact request. Requests show up in **Identity → Activity** and nothing happens until you confirm.
+
+### Regenerate
+
+Regenerating invalidates this QR **and every other invite link you have issued**. Use it if the QR leaked somewhere you did not intend.`;
+
+/**
+ * Reusable profile invite.
+ *
+ * Sharing it asks the other person to request a connection. Regenerating bumps
+ * the invite epoch and revokes outstanding links.
+ */
+export function ProfileInviteSection() {
+  const [invite, setInvite] = useState<ICreatedInvite | undefined>(undefined);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void inviteTools()
+      .then((tools) => tools.createContactInvite({ profile: true }))
+      .then(({ invite: created }) => {
+        if (!cancelled) setInvite(created);
+      })
+      .catch((err) => {
+        if (!cancelled) setError((err as Error).message || "Could not load your profile QR.");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const regenerate = async () => {
+    if (
+      !confirm(
+        "Regenerate your profile QR? Every invite link you have issued so far will stop working.",
+      )
+    ) {
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const tools = await inviteTools();
+      const { invite: created } = await tools.regenerateProfileInvite();
+      setInvite(created);
+    } catch (err) {
+      setError((err as Error).message || "Could not regenerate.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h5 className="card-title d-flex align-items-center gap-2">
+          Profile QR
+          <Tooltip markdownContent={PROFILE_QR_INFO} />
+        </h5>
+        {error ? <div className="alert alert-danger py-2">{error}</div> : null}
+        {invite ? (
+          <InviteShare
+            invite={invite}
+            description="Let people connect with you by scanning this or opening the link. You confirm each request."
+            shareText="Connect with me on Peers:"
+          />
+        ) : !error ? (
+          <LoadingIndicator />
+        ) : null}
+        <div className="text-center mt-3">
+          <button
+            type="button"
+            className="btn btn-outline-danger btn-sm"
+            onClick={() => void regenerate()}
+            disabled={busy || !invite}
+          >
+            {busy ? "Regenerating…" : "Regenerate (revokes all invites)"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/screens/invites/accept-invite.test.tsx

@@ -0,0 +1,115 @@
+import {
+  getUserContext,
+  type IAcceptInviteResult,
+  type IInvite,
+  type IInvitePreview,
+  Invites,
+} from "@peers-app/peers-sdk";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AcceptInvite } from "./accept-invite";
+import { inviteTools } from "./invites-ipc";
+
+jest.mock("@peers-app/peers-sdk", () => {
+  const actual = jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  return {
+    ...actual,
+    getUserContext: jest.fn(actual.getUserContext),
+    Invites: jest.fn(),
+  };
+});
+
+jest.mock("./invites-ipc", () => ({
+  inviteTools: jest.fn(),
+}));
+
+jest.mock("../../globals", () => ({
+  mainContentPath: jest.fn(),
+}));
+
+const preview: IInvitePreview = {
+  type: "group",
+  inviter: {
+    userId: "abcdefghijklmnopqrstuvwxy",
+    publicKey: "a".repeat(43),
+    publicBoxKey: "b".repeat(43),
+    displayName: "Ada",
+  },
+  expiresAt: "2026-10-01T00:00:00.000Z",
+  expired: false,
+  knownContact: false,
+  group: {
+    groupId: "zyxwvutsrqponmlkjihgfedcb",
+    name: "Neighbors",
+    role: 20,
+    mode: "open",
+    alreadyMember: false,
+  },
+};
+
+const pendingResult: IAcceptInviteResult = {
+  inviteId: "openjoinrequest0000000001",
+  status: "pending",
+  deliveryState: "queued",
+  groupId: preview.group?.groupId,
+};
+
+function invite(status: IInvite["status"], deliveryState: IInvite["deliveryState"]): IInvite {
+  return {
+    inviteId: pendingResult.inviteId,
+    direction: "in",
+    type: "group",
+    status,
+    mode: "open",
+    counterpart: preview.inviter,
+    groupId: preview.group?.groupId,
+    groupName: preview.group?.name,
+    role: preview.group?.role,
+    epoch: 0,
+    recipientUserId: preview.inviter.userId,
+    deliveryState,
+    createdAt: new Date("2026-09-22T00:00:00.000Z"),
+    expiresAt: new Date(preview.expiresAt),
+  };
+}
+
+describe("AcceptInvite", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("shows automatic progress and reacts when the delayed approval arrives", async () => {
+    let row = invite("pending", "queued");
+    let onDataChanged: ((event: { dataObject: IInvite }) => void) | undefined;
+    const table = {
+      get: jest.fn(async () => row),
+      dataChanged: {
+        subscribe: jest.fn((listener: typeof onDataChanged) => {
+          onDataChanged = listener;
+          return { unsubscribe: jest.fn() };
+        }),
+      },
+    };
+    (getUserContext as jest.Mock).mockResolvedValue({ userDataContext: {} });
+    (Invites as jest.Mock).mockReturnValue(table);
+    (inviteTools as jest.Mock).mockResolvedValue({
+      previewInvite: jest.fn().mockResolvedValue({ preview }),
+      acceptInvite: jest.fn().mockResolvedValue({ result: pendingResult }),
+    });
+
+    render(<AcceptInvite initialToken="signed-token" />);
+    await userEvent.click(await screen.findByRole("button", { name: "Join" }));
+
+    expect(await screen.findByText("Finishing your automatic join to Neighbors.")).toBeVisible();
+    expect(screen.getByText("Waiting for a route; Peers will retry automatically.")).toBeVisible();
+    expect(screen.queryByText(/once it is approved/i)).not.toBeInTheDocument();
+
+    row = invite("accepted", "sent");
+    await act(async () => {
+      onDataChanged?.({ dataObject: row });
+    });
+
+    await waitFor(() => expect(screen.getByText("You joined Neighbors.")).toBeVisible());
+    expect(screen.getByRole("button", { name: "Open group" })).toBeEnabled();
+  });
+});

package/src/screens/invites/accept-invite.tsx

@@ -1,7 +1,9 @@
 import {
   getRoleLabel,
+  getUserContext,
   type IAcceptInviteResult,
   type IInvitePreview,
+  Invites,
   TrustLevel,
 } from "@peers-app/peers-sdk";
 import { useCallback, useEffect, useState } from "react";
@@ -59,19 +61,22 @@ function ResultPanel(props: {
 }) {
   const { result, preview } = props;
   const accepted = result.status === "accepted";
+  const openGroup = preview.type === "group" && preview.group?.mode === "open";
   const message = accepted
     ? preview.type === "group"
       ? `You joined ${preview.group?.name}.`
       : "Contact added."
     : preview.type === "group"
-      ? "Join request sent. You will be added once it is approved."
+      ? openGroup
+        ? `Finishing your automatic join to ${preview.group?.name}.`
+        : "Join request sent. You will be added once it is approved."
       : "Request sent. They will see it and confirm.";
   return (
     <div className="text-center">
       <output className={`alert d-block ${accepted ? "alert-success" : "alert-info"}`}>
         {message}
         {result.deliveryState === "queued" ? (
-          <div className="small mt-1">Queued until the other person is reachable.</div>
+          <div className="small mt-1">Waiting for a route; Peers will retry automatically.</div>
         ) : null}
       </output>
       <div className="d-flex gap-2 justify-content-center">
@@ -79,7 +84,7 @@ function ResultPanel(props: {
           <button
             type="button"
             className="btn btn-primary"
-            onClick={() => mainContentPath(`groups/${result.groupId}`)}
+            onClick={() => mainContentPath(`identity/groups/${result.groupId}`)}
           >
             Open group
           </button>
@@ -136,6 +141,48 @@ export function AcceptInvite(props: AcceptInviteProps) {
     return () => sub.dispose();
   }, [props.initialToken, runPreview]);
 
+  const resultInviteId = result?.inviteId;
+  const resultStatus = result?.status;
+  useEffect(() => {
+    if (!resultInviteId || resultStatus !== "pending") {
+      return;
+    }
+    let disposed = false;
+    let unsubscribe: (() => void) | undefined;
+    void getUserContext().then(async (userContext) => {
+      if (disposed) {
+        return;
+      }
+      const table = Invites(userContext.userDataContext);
+      const refresh = async () => {
+        const row = await table.get(resultInviteId);
+        if (!disposed && row) {
+          setResult((current) =>
+            current?.inviteId === resultInviteId
+              ? {
+                  ...current,
+                  status: row.status,
+                  deliveryState: row.deliveryState,
+                  groupId: row.groupId ?? current.groupId,
+                }
+              : current,
+          );
+        }
+      };
+      const subscription = table.dataChanged.subscribe((event) => {
+        if (event.dataObject.inviteId === resultInviteId) {
+          void refresh();
+        }
+      });
+      unsubscribe = () => subscription.unsubscribe();
+      await refresh();
+    });
+    return () => {
+      disposed = true;
+      unsubscribe?.();
+    };
+  }, [resultInviteId, resultStatus]);
+
   const accept = async () => {
     setError("");
     setBusy(true);