@peers-app/peers-ui 0.27.2 → 0.27.4

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

@@ -1,282 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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();
-  });
-});