@peers-app/peers-ui 0.27.3 → 0.27.5

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

@@ -1,318 +0,0 @@
-import {
-  getRoleLabel,
-  getUserContext,
-  type IAcceptInviteResult,
-  type IInvitePreview,
-  Invites,
-  TrustLevel,
-} from "@peers-app/peers-sdk";
-import { useCallback, useEffect, useState } from "react";
-import { canScanQr, QrScanner } from "../../components/qr-scanner";
-import { mainContentPath } from "../../globals";
-import { consumePendingInvite, inviteCaptured } from "./invite-capture";
-import { inviteTools } from "./invites-ipc";
-
-/** Props for {@link AcceptInvite}. */
-export interface AcceptInviteProps {
-  /** Token to preview immediately (e.g. from a deep link); otherwise the paste box is shown. */
-  initialToken?: string;
-  onDone?: () => void;
-}
-
-const TRUST_OPTIONS: Array<{ value: TrustLevel; label: string }> = [
-  { value: TrustLevel.NewUser, label: "New user (default)" },
-  { value: TrustLevel.Known, label: "Known" },
-  { value: TrustLevel.Trusted, label: "Trusted" },
-];
-
-function PreviewCard(props: { preview: IInvitePreview }) {
-  const { preview } = props;
-  const inviter = preview.inviter.displayName || preview.inviter.userId;
-  return (
-    <div className="card mb-3">
-      <div className="card-body">
-        <h5 className="card-title mb-2">
-          {preview.type === "group" ? `Join ${preview.group?.name}` : `Connect with ${inviter}`}
-        </h5>
-        <div className="small text-muted">
-          From <strong>{inviter}</strong>
-          {preview.knownContact ? " (already a contact)" : ""}
-        </div>
-        {preview.group ? (
-          <div className="small text-muted">
-            You would join as <strong>{getRoleLabel(preview.group.role)}</strong>
-            {preview.group.mode === "open" ? " · joins immediately" : " · the inviter must approve"}
-            {preview.group.alreadyMember ? " · you are already a member" : ""}
-          </div>
-        ) : null}
-        <div className={`small ${preview.expired ? "text-danger" : "text-muted"}`}>
-          {preview.expired ? "Expired " : "Expires "}
-          {new Date(preview.expiresAt).toLocaleString()}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ResultPanel(props: {
-  result: IAcceptInviteResult;
-  preview: IInvitePreview;
-  onDone: () => void;
-}) {
-  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"
-      ? 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">Waiting for a route; Peers will retry automatically.</div>
-        ) : null}
-      </output>
-      <div className="d-flex gap-2 justify-content-center">
-        {accepted && result.groupId ? (
-          <button
-            type="button"
-            className="btn btn-primary"
-            onClick={() => mainContentPath(`identity/groups/${result.groupId}`)}
-          >
-            Open group
-          </button>
-        ) : null}
-        <button type="button" className="btn btn-outline-secondary" onClick={props.onDone}>
-          Done
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Paste or scan an invite, review what it grants, then accept it. Also consumes a token
- * captured from a link or `peers://` open before this screen mounted.
- */
-export function AcceptInvite(props: AcceptInviteProps) {
-  const [text, setText] = useState(props.initialToken ?? "");
-  const [scanning, setScanning] = useState(false);
-  const [preview, setPreview] = useState<IInvitePreview | undefined>(undefined);
-  const [result, setResult] = useState<IAcceptInviteResult | undefined>(undefined);
-  const [trustLevel, setTrustLevel] = useState<TrustLevel>(TrustLevel.NewUser);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
-
-  const runPreview = useCallback(async (token: string) => {
-    setError("");
-    setBusy(true);
-    try {
-      const tools = await inviteTools();
-      const response = await tools.previewInvite({ token });
-      setPreview(response.preview);
-      setText(token);
-    } catch (err) {
-      setPreview(undefined);
-      setError((err as Error).message || "That is not a valid invite.");
-    } finally {
-      setBusy(false);
-    }
-  }, []);
-
-  // Deep-linked tokens: one stashed before mount, or one arriving while mounted.
-  useEffect(() => {
-    const stashed = props.initialToken ?? consumePendingInvite();
-    if (stashed) {
-      void runPreview(stashed);
-    }
-    const sub = inviteCaptured.subscribe(() => {
-      const token = consumePendingInvite();
-      if (token) {
-        void runPreview(token);
-      }
-    });
-    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);
-    try {
-      const tools = await inviteTools();
-      const response = await tools.acceptInvite({ token: text, trustLevel });
-      setResult(response.result);
-    } catch (err) {
-      setError((err as Error).message || "Could not accept the invite.");
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const reset = () => {
-    setText("");
-    setPreview(undefined);
-    setResult(undefined);
-    setError("");
-  };
-
-  const done = props.onDone ?? reset;
-
-  if (result && preview) {
-    return <ResultPanel result={result} preview={preview} onDone={done} />;
-  }
-
-  if (scanning) {
-    return (
-      <div className="text-center">
-        <QrScanner
-          onScan={(scanned) => {
-            setScanning(false);
-            void runPreview(scanned);
-          }}
-          onError={(message) => {
-            setScanning(false);
-            setError(message);
-          }}
-        />
-        <button
-          type="button"
-          className="btn btn-outline-secondary mt-3"
-          onClick={() => setScanning(false)}
-        >
-          Cancel
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ maxWidth: 520, margin: "0 auto" }}>
-      {preview ? (
-        <>
-          <PreviewCard preview={preview} />
-          {!preview.knownContact ? (
-            <div className="mb-3">
-              <label htmlFor="invite-trust" className="form-label small text-muted mb-1">
-                Trust level for {preview.inviter.displayName || "this contact"}
-              </label>
-              <select
-                id="invite-trust"
-                className="form-select form-select-sm"
-                value={trustLevel}
-                onChange={(event) => setTrustLevel(Number(event.target.value) as TrustLevel)}
-                disabled={busy}
-              >
-                {TRUST_OPTIONS.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          ) : null}
-          {error ? <div className="alert alert-danger py-2">{error}</div> : null}
-          <div className="d-flex gap-2">
-            <button
-              type="button"
-              className="btn btn-primary"
-              disabled={busy || preview.expired || preview.group?.alreadyMember}
-              onClick={() => void accept()}
-            >
-              {busy ? "Working…" : preview.type === "group" ? "Join" : "Accept"}
-            </button>
-            <button type="button" className="btn btn-outline-secondary" onClick={reset}>
-              Back
-            </button>
-          </div>
-        </>
-      ) : (
-        <form
-          onSubmit={(event) => {
-            event.preventDefault();
-            void runPreview(text);
-          }}
-        >
-          <label htmlFor="invite-text" className="form-label">
-            Paste an invite link or code
-          </label>
-          <textarea
-            id="invite-text"
-            className="form-control font-monospace mb-2"
-            rows={3}
-            value={text}
-            onChange={(event) => setText(event.target.value)}
-            placeholder="https://peers.app/i#…"
-            disabled={busy}
-            spellCheck={false}
-          />
-          {error ? <div className="alert alert-danger py-2">{error}</div> : null}
-          <div className="d-flex gap-2">
-            <button type="submit" className="btn btn-primary" disabled={busy || !text.trim()}>
-              {busy ? "Checking…" : "Continue"}
-            </button>
-            {canScanQr() ? (
-              <button
-                type="button"
-                className="btn btn-outline-primary"
-                disabled={busy}
-                onClick={() => setScanning(true)}
-              >
-                <i className="bi bi-qr-code-scan me-1" />
-                Scan QR
-              </button>
-            ) : null}
-          </div>
-        </form>
-      )}
-    </div>
-  );
-}

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

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

@@ -1,162 +0,0 @@
-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,6 +0,0 @@
-export * from "./accept-invite";
-export * from "./activity-view";
-export * from "./invite-capture";
-export * from "./invite-share";
-export * from "./invites-ipc";
-export * from "./pending-invites-list";