@peers-app/peers-ui 0.25.1 → 0.25.3

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.tsx

@@ -79,7 +79,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>

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",
+    );
+  });
+});