@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/screens/invites/invite-capture.ts

@@ -1,104 +0,0 @@
-/**
- * Captures an inbound invite token from the page URL or a desktop `peers://` open-url event
- * and holds it (tab-scoped) until the signed-in UI can route to the Accept screen.
- *
- * Tokens travel only in URL fragments and are stripped from the address bar immediately so
- * startup route restoration never persists them.
- */
-
-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";
-
-/** Fires whenever a new token is captured, so a mounted app can navigate immediately. */
-export const inviteCaptured = observable<string | undefined>(undefined);
-
-type IpcRendererLike = {
-  on: (channel: string, listener: (event: unknown, ...args: unknown[]) => void) => void;
-  removeAllListeners: (channel: string) => void;
-};
-
-/**
- * Pull a token out of a URL fragment or deep link if one is present.
- * Accepts `#invite=<token>`, `https://peers.app/i#<token>`, and `peers://i#<token>`.
- */
-export function inviteTokenFromUrl(url: string): string | undefined {
-  const hash = url.indexOf("#");
-  if (hash < 0) {
-    return undefined;
-  }
-  const before = url.slice(0, hash);
-  const fragment = url.slice(hash + 1);
-  const isInviteFragment = fragment.startsWith("invite=");
-  const isLandingPage = /^peers:\/\/i\/?$/.test(before) || /^https?:\/\/[^/]+\/i\/?$/.test(before);
-  if (!isInviteFragment && !isLandingPage) {
-    return undefined;
-  }
-  try {
-    return extractInviteTokenText(url);
-  } catch {
-    return undefined;
-  }
-}
-
-/** Store a token for the Accept screen and notify listeners. */
-export function stashPendingInvite(token: string, storage: Storage = sessionStorage): void {
-  storage.setItem(PENDING_INVITE_STORAGE_KEY, token);
-  inviteCaptured(token);
-}
-
-/** Read the stored token without consuming it. */
-export function peekPendingInvite(storage: Storage = sessionStorage): string | undefined {
-  return storage.getItem(PENDING_INVITE_STORAGE_KEY) ?? undefined;
-}
-
-/** Read and clear the stored token. */
-export function consumePendingInvite(storage: Storage = sessionStorage): string | undefined {
-  const token = peekPendingInvite(storage);
-  storage.removeItem(PENDING_INVITE_STORAGE_KEY);
-  return token;
-}
-
-/**
- * Capture `#invite=<token>` from the current location, strip it from the URL, and stash it.
- * Safe to call repeatedly; returns the captured token when one was present.
- */
-export function captureInviteFromLocation(
-  locationLike: Pick<Location, "href" | "pathname" | "search"> = window.location,
-  historyLike: Pick<History, "replaceState" | "state"> = window.history,
-  storage: Storage = sessionStorage,
-): string | undefined {
-  const token = inviteTokenFromUrl(locationLike.href);
-  if (!token) {
-    return undefined;
-  }
-  historyLike.replaceState(
-    historyLike.state ?? null,
-    "",
-    `${locationLike.pathname}${locationLike.search}`,
-  );
-  stashPendingInvite(token, storage);
-  return token;
-}
-
-/**
- * Listen for `peers://` links forwarded by the Electron main process (`peers-open-url`).
- * No-op outside Electron. Returns an unsubscribe function.
- */
-export function listenForOpenUrlInvites(): () => void {
-  const ipc = (window as Window & { ipcRenderer?: IpcRendererLike }).ipcRenderer;
-  if (!ipc) {
-    return () => {};
-  }
-  ipc.on("peers-open-url", (_event, url) => {
-    if (typeof url !== "string") {
-      return;
-    }
-    const token = inviteTokenFromUrl(url);
-    if (token) {
-      stashPendingInvite(token);
-    }
-  });
-  return () => ipc.removeAllListeners("peers-open-url");
-}

package/src/screens/invites/invite-classify.test.ts

@@ -1,129 +0,0 @@
-import type { IInvite } from "@peers-app/peers-sdk";
-import { actionsForInvite, classifyInvite, describeInviteRow } 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");
-  });
-
-  it("describes an open join as automatic rather than approval-gated", () => {
-    const openJoin = invite({
-      inviteId: "openjoinrequest0000000001",
-      direction: "in",
-      type: "group",
-      mode: "open",
-      counterpart: { ...counterpart, displayName: "Ada" },
-      recipientUserId: counterpart.userId,
-      groupName: "Neighbors",
-      deliveryState: "queued",
-    });
-
-    expect(describeInviteRow(openJoin)).toEqual({
-      title: "Joining Neighbors",
-      detail: "Completing automatically; no approval is required.",
-    });
-    expect(classifyInvite(openJoin)).toBe("waiting");
-  });
-});

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

@@ -1,104 +0,0 @@
-import { copyToClipboard, type ICreatedInvite } from "@peers-app/peers-sdk";
-import { useState } from "react";
-import QRCode from "react-qr-code";
-
-/** Props for {@link InviteShare}. */
-export interface InviteShareProps {
-  invite: ICreatedInvite;
-  /** Short line under the heading explaining what accepting grants. */
-  description?: string;
-  /** Body text used by the native share sheet; defaults to a generic line. */
-  shareText?: string;
-  onDone?: () => void;
-}
-
-function canNativeShare(): boolean {
-  return typeof navigator !== "undefined" && typeof navigator.share === "function";
-}
-
-/**
- * Presents an issued invite as a QR code plus copyable link and token. The QR encodes the
- * landing-page URL so phone cameras, the in-app scanner, and the desktop handler all work.
- */
-export function InviteShare(props: InviteShareProps) {
-  const { invite } = props;
-  const [copied, setCopied] = useState<"link" | "token" | undefined>(undefined);
-  const expires = new Date(invite.token.expiresAt);
-
-  const copy = async (what: "link" | "token") => {
-    await copyToClipboard(what === "link" ? invite.url : invite.encoded);
-    setCopied(what);
-    window.setTimeout(() => setCopied(undefined), 1500);
-  };
-
-  const share = async () => {
-    try {
-      await navigator.share({
-        title: "Peers invite",
-        text: props.shareText ?? "Join me on Peers:",
-        url: invite.url,
-      });
-    } catch {
-      // User dismissed the share sheet; nothing to do.
-    }
-  };
-
-  return (
-    <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
-      {props.description ? <p className="text-muted">{props.description}</p> : null}
-      <div className="d-inline-block bg-white rounded p-3 mb-2">
-        <QRCode value={invite.url} size={200} aria-label="Invite QR code" />
-      </div>
-      <p className="small text-muted mb-3">
-        Expires {expires.toLocaleString()}
-        {invite.token.uses === "unlimited" ? " · reusable" : " · single use"}
-      </p>
-      <div className="input-group input-group-sm mb-2">
-        <input
-          className="form-control font-monospace"
-          readOnly
-          value={invite.url}
-          aria-label="Invite link"
-          onFocus={(event) => event.currentTarget.select()}
-        />
-        <button type="button" className="btn btn-outline-primary" onClick={() => void copy("link")}>
-          {copied === "link" ? "Copied" : "Copy link"}
-        </button>
-      </div>
-      <details className="text-start small mb-3">
-        <summary className="text-muted" style={{ cursor: "pointer" }}>
-          No camera or link? Share the code text instead
-        </summary>
-        <div className="input-group input-group-sm mt-2">
-          <input
-            className="form-control font-monospace"
-            readOnly
-            value={invite.encoded}
-            aria-label="Invite code"
-            onFocus={(event) => event.currentTarget.select()}
-          />
-          <button
-            type="button"
-            className="btn btn-outline-secondary"
-            onClick={() => void copy("token")}
-          >
-            {copied === "token" ? "Copied" : "Copy"}
-          </button>
-        </div>
-      </details>
-      <div className="d-flex gap-2 justify-content-center">
-        {canNativeShare() ? (
-          <button type="button" className="btn btn-primary" onClick={() => void share()}>
-            <i className="bi bi-share me-1" />
-            Share…
-          </button>
-        ) : null}
-        {props.onDone ? (
-          <button type="button" className="btn btn-outline-secondary" onClick={props.onDone}>
-            Done
-          </button>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/src/screens/invites/invites-ipc.ts

@@ -1,25 +0,0 @@
-import {
-  getInvitesContractDefinition,
-  getUserContext,
-  hostContractConsumer,
-  type IInvitesConsumer,
-} from "@peers-app/peers-sdk";
-
-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
- * (for example after a socket reconnect).
- */
-export async function getInvitesConsumer(): Promise<IInvitesConsumer> {
-  return invites.get();
-}
-
-/** Shorthand for `(await getInvitesConsumer()).tools`. */
-export async function inviteTools(): Promise<IInvitesConsumer["tools"]> {
-  return (await getInvitesConsumer()).tools;
-}

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

@@ -1,256 +0,0 @@
-import {
-  getRoleLabel,
-  getUserContext,
-  type IInvite,
-  type InviteStatus,
-  Invites,
-} from "@peers-app/peers-sdk";
-import { useCallback, useEffect, useState } from "react";
-import { inviteTools } from "./invites-ipc";
-
-/** 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.
- *
- * @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[];
-}): IInviteRowQuery | undefined {
-  const [query, setQuery] = useState<IInviteRowQuery | undefined>(undefined);
-  const statuses = filter.statuses ?? ["pending"];
-  const statusKey = statuses.join(",");
-
-  const refresh = useCallback(async () => {
-    const userContext = await getUserContext();
-    const table = Invites(userContext.userDataContext);
-    const all = await table.list({
-      ...(filter.type ? { type: filter.type } : {}),
-      ...(filter.groupId ? { groupId: filter.groupId } : {}),
-    });
-    const wanted = new Set(statusKey.split(","));
-    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(() => {
-    let disposed = false;
-    let dispose: (() => void) | undefined;
-    void refresh();
-    void getUserContext().then((userContext) => {
-      if (disposed) {
-        return;
-      }
-      const sub = Invites(userContext.userDataContext).dataChanged.subscribe(() => void refresh());
-      dispose = () => {
-        sub.unsubscribe();
-      };
-    });
-    return () => {
-      disposed = true;
-      dispose?.();
-    };
-  }, [refresh]);
-
-  return query;
-}
-
-function counterpartLabel(row: IInvite): string {
-  return row.counterpart?.displayName || row.counterpart?.userId || "Someone";
-}
-
-/** Human summary of what a row is, from the local user's point of view. */
-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) {
-      return { title: `Contact invite to ${who}`, detail: "Waiting for them to accept." };
-    }
-    return {
-      title: row.mode === "profile" ? "Your profile QR" : "Contact invite link",
-      detail: row.mode === "profile" ? "Reusable; regenerate to revoke." : "Not used yet.",
-    };
-  }
-  if (row.direction === "in") {
-    if (row.recipientUserId) {
-      if (row.mode === "open") {
-        return {
-          title: `Joining ${group}`,
-          detail: "Completing automatically; no approval is required.",
-        };
-      }
-      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: `${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." };
-  }
-  if (row.counterpart) {
-    return {
-      title: `${who} wants to join ${group}`,
-      detail: role ? `Requested as ${role}. Approve or deny.` : "Approve or deny.",
-    };
-  }
-  return {
-    title: `${group} invite link`,
-    detail: `${row.mode === "open" ? "Open" : "Approval required"}${role ? ` · ${role}` : ""}`,
-  };
-}
-
-/** Which Activity bucket a row belongs in. */
-export type InviteBucket = "attention" | "waiting" | "history";
-
-/**
- * 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") {
-    if (row.type === "contact" || row.mode === "direct") {
-      return ["accept", "decline"];
-    }
-    if (row.type === "group" && row.mode === "approve" && row.counterpart) {
-      return ["approve", "deny"];
-    }
-  }
-  return [];
-}
-
-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" },
-  deny: { text: "Deny", className: "btn-outline-secondary" },
-  revoke: { text: "Revoke", className: "btn-outline-danger" },
-};
-
-/** 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: InviteRowAction) => {
-    setBusy(action);
-    setError("");
-    try {
-      const tools = await inviteTools();
-      const input = { inviteId: row.inviteId };
-      if (action === "accept") await tools.acceptInvite(input);
-      else if (action === "decline") await tools.declineInvite(input);
-      else if (action === "approve") await tools.approveJoinRequest(input);
-      else if (action === "deny") await tools.denyJoinRequest(input);
-      else await tools.revokeInvite(input);
-    } catch (err) {
-      setError((err as Error).message || "Could not update the invite.");
-    } finally {
-      setBusy(undefined);
-    }
-  };
-
-  return (
-    <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">
-            <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">
-              Waiting for a route; Peers will retry automatically
-            </small>
-          ) : null}
-          {row.status !== "pending" ? (
-            <small className="text-muted d-block text-capitalize">{row.status}</small>
-          ) : null}
-        </div>
-        <div className="d-flex gap-1">
-          {actionsForInvite(row).map((action) => (
-            <button
-              key={action}
-              type="button"
-              className={`btn btn-sm ${ACTION_LABELS[action].className}`}
-              disabled={busy !== undefined}
-              onClick={() => void run(action)}
-            >
-              {busy === action ? "…" : ACTION_LABELS[action].text}
-            </button>
-          ))}
-        </div>
-      </div>
-      {error ? <div className="alert alert-danger py-1 px-2 small mt-2 mb-0">{error}</div> : null}
-    </div>
-  );
-}