@peers-app/peers-ui 0.23.13 → 0.24.0

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

@@ -0,0 +1,224 @@
+import {
+  getRoleLabel,
+  getUserContext,
+  type IInvite,
+  type InviteStatus,
+  Invites,
+} from "@peers-app/peers-sdk";
+import { useCallback, useEffect, useState } from "react";
+import { inviteTools } from "./invites-ipc";
+
+/** Props for {@link PendingInvitesList}. */
+export interface PendingInvitesListProps {
+  /** Only show rows of this type. */
+  type?: IInvite["type"];
+  /** Only show rows for this group. */
+  groupId?: string;
+  /** Statuses to include; defaults to pending only. */
+  statuses?: InviteStatus[];
+  /** Hide the section entirely when there is nothing to show. */
+  hideWhenEmpty?: boolean;
+  title?: string;
+}
+
+/** Subscribe to the personal `Invites` table and return rows matching the filter, newest first. */
+export function useInviteRows(filter: {
+  type?: IInvite["type"];
+  groupId?: string;
+  statuses?: InviteStatus[];
+}): IInvite[] | undefined {
+  const [rows, setRows] = useState<IInvite[] | 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(","));
+    setRows(
+      all
+        .filter((row) => wanted.has(row.status))
+        .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
+    );
+  }, [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 rows;
+}
+
+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 === "contact") {
+    if (row.direction === "in") {
+      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.mode === "direct") {
+      return {
+        title: `${who} invited you to ${group}`,
+        detail: role ? `You would join as ${role}.` : "",
+      };
+    }
+    return { title: `Joining ${group}`, detail: `Waiting for ${who} to approve.` };
+  }
+  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}` : ""}`,
+  };
+}
+
+type RowAction = "accept" | "decline" | "approve" | "deny" | "revoke";
+
+function actionsFor(row: IInvite): RowAction[] {
+  if (row.status !== "pending") {
+    return [];
+  }
+  if (row.direction === "in") {
+    // Inbound rows I can act on: contact requests and direct group invites.
+    if (row.type === "contact" || row.mode === "direct") {
+      return ["accept", "decline"];
+    }
+    return []; // my own outstanding join request; nothing to do but wait
+  }
+  if (row.counterpart && row.type === "group" && row.mode !== "direct") {
+    return ["approve", "deny"];
+  }
+  return ["revoke"];
+}
+
+const ACTION_LABELS: Record<RowAction, { 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" },
+};
+
+function InviteRow({ row }: { row: IInvite }) {
+  const [busy, setBusy] = useState<RowAction | undefined>(undefined);
+  const [error, setError] = useState("");
+  const { title, detail } = describeInviteRow(row);
+
+  const run = async (action: RowAction) => {
+    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">{title}</div>
+          {detail ? <small className="text-muted d-block">{detail}</small> : null}
+          {row.deliveryState === "queued" ? (
+            <small className="text-warning d-block">Queued until they are reachable</small>
+          ) : null}
+          {row.status !== "pending" ? (
+            <small className="text-muted d-block text-capitalize">{row.status}</small>
+          ) : null}
+        </div>
+        <div className="d-flex gap-1">
+          {actionsFor(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>
+  );
+}
+
+/**
+ * Live list of invite rows with the actions each one supports. Subscribes to the `Invites`
+ * table directly, so it updates when replies arrive on any of the user's devices.
+ */
+export function PendingInvitesList(props: PendingInvitesListProps) {
+  const rows = useInviteRows(props);
+  if (!rows) {
+    return null;
+  }
+  if (rows.length === 0 && props.hideWhenEmpty) {
+    return null;
+  }
+  return (
+    <section className="mb-3">
+      {props.title ? <h6 className="mb-2">{props.title}</h6> : null}
+      {rows.length === 0 ? (
+        <p className="text-muted small mb-0">No pending invites.</p>
+      ) : (
+        <div className="list-group">
+          {rows.map((row) => (
+            <InviteRow key={row.inviteId} row={row} />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/screens/settings/settings-page.tsx

@@ -258,8 +258,8 @@ const AddDeviceSection: React.FC = () => {
     <section className="mt-4 pt-3 border-top">
       <h6>Add another device</h6>
       <p className="small text-muted">
-        Create a five-minute invitation, compare the same number on both devices, and approve on
-        each one before account access is transferred.
+        On the new device choose “Sign in from another device”, then type the code it shows here and
+        approve. Account access is transferred only after you approve.
       </p>
       {open ? (
         <SourceDevicePairing onClose={() => setOpen(false)} />

package/src/screens/setup-user.tsx

@@ -7,13 +7,9 @@ import {
   rpcServerCalls,
   signMessageWithSecretKey,
 } from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useObservable } from "../hooks";
-import {
-  consumePendingDevicePairingInvite,
-  DEVICE_PAIRING_INVITE_CAPTURED_EVENT,
-  DestinationDevicePairing,
-} from "./device-pairing";
+import { DestinationDevicePairing } from "./device-pairing";
 import { colorMode } from "./settings/color-mode-dropdown";
 
 type SetupStep = "select-user-type" | "complete";
@@ -21,10 +17,7 @@ type SetupStep = "select-user-type" | "complete";
 export const SetupUser = () => {
   const [_colorMode] = useObservable(colorMode);
   const [step, _setStep] = useState<SetupStep>("select-user-type");
-  const [pairingInvitation, setPairingInvitation] = useState<string | undefined>(() =>
-    consumePendingDevicePairingInvite(),
-  );
-  const [showPairing, setShowPairing] = useState(() => Boolean(pairingInvitation));
+  const [showPairing, setShowPairing] = useState(false);
   const [isExistingUser, setIsExistingUser] = useState<boolean | null>(null);
   const [userId, setUserId] = useState("");
   const [secretKey, setSecretKey] = useState("");
@@ -35,17 +28,6 @@ export const SetupUser = () => {
 
   const isDark = _colorMode === "dark";
 
-  useEffect(() => {
-    const capture = (event: Event) => {
-      const invitation = (event as CustomEvent<string>).detail;
-      setPairingInvitation(invitation);
-      consumePendingDevicePairingInvite();
-      setShowPairing(true);
-    };
-    window.addEventListener(DEVICE_PAIRING_INVITE_CAPTURED_EVENT, capture);
-    return () => window.removeEventListener(DEVICE_PAIRING_INVITE_CAPTURED_EVENT, capture);
-  }, []);
-
   const handleNewUser = async () => {
     setError("");
     setIsValidating(true);
@@ -120,14 +102,7 @@ export const SetupUser = () => {
           }}
         >
           <div className="card-body p-4 p-md-5">
-            <DestinationDevicePairing
-              initialInvitation={pairingInvitation}
-              onInvitationConsumed={() => setPairingInvitation(undefined)}
-              onBack={() => {
-                setPairingInvitation(undefined);
-                setShowPairing(false);
-              }}
-            />
+            <DestinationDevicePairing onBack={() => setShowPairing(false)} />
           </div>
         </div>
       </div>
@@ -165,21 +140,8 @@ export const SetupUser = () => {
                 <div className="d-flex align-items-center justify-content-center">
                   <i className="bi bi-person-plus fs-4 me-2" />
                   <div className="text-start">
-                    <div className="fw-semibold">I'm a New User</div>
-                    <small className="opacity-75">Create a new account</small>
-                  </div>
-                </div>
-              </button>
-
-              <button
-                className={`btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`}
-                onClick={() => setIsExistingUser(true)}
-              >
-                <div className="d-flex align-items-center justify-content-center">
-                  <i className="bi bi-box-arrow-in-right fs-4 me-2" />
-                  <div className="text-start">
-                    <div className="fw-semibold">I'm an Existing User</div>
-                    <small className="opacity-75">Sign in with your credentials</small>
+                    <div className="fw-semibold">New account</div>
+                    <small className="opacity-75">Create a new account on this device</small>
                   </div>
                 </div>
               </button>
@@ -191,11 +153,30 @@ export const SetupUser = () => {
                 <div className="d-flex align-items-center justify-content-center">
                   <i className="bi bi-phone fs-4 me-2" />
                   <div className="text-start">
-                    <div className="fw-semibold">Use Another Device</div>
-                    <small className="opacity-75">Sign in with a device already on Peers</small>
+                    <div className="fw-semibold">Sign in from another device</div>
+                    <small className="opacity-75">
+                      Show a code to a device that is already signed in
+                    </small>
                   </div>
                 </div>
               </button>
+
+              <details className="text-center mt-2">
+                <summary
+                  className={`small ${isDark ? "text-light opacity-75" : "text-muted"}`}
+                  style={{ cursor: "pointer" }}
+                >
+                  Advanced
+                </summary>
+                <button
+                  type="button"
+                  className={`btn btn-sm mt-2 ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`}
+                  onClick={() => setIsExistingUser(true)}
+                >
+                  <i className="bi bi-key me-1" />
+                  Enter a user ID and secret key
+                </button>
+              </details>
             </div>
           </div>
         </div>
@@ -291,7 +272,8 @@ export const SetupUser = () => {
                 <i className="bi bi-box-arrow-in-right text-primary" />
               </h3>
               <p className={isDark ? "text-light opacity-75" : "text-muted"}>
-                Enter your existing credentials
+                Paste your user ID and secret key. If you have another signed-in device, “Sign in
+                from another device” is easier and safer.
               </p>
             </div>
 

package/src/system-apps/index.ts

@@ -7,7 +7,7 @@ export { consoleLogsApp } from "./console-logs.app";
 export { contactsApp } from "./contacts.app";
 export { dataExplorerApp } from "./data-explorer.app";
 export { groupsApp } from "./groups.app";
-export { joinGroupApp } from "./join-group.app";
+export { invitesApp } from "./invites.app";
 export { mobileSettingsApp } from "./mobile-settings.app";
 export { networkViewerApp } from "./network-viewer.app";
 export { packagesApp } from "./packages.app";
@@ -26,7 +26,7 @@ import { consoleLogsApp } from "./console-logs.app";
 import { contactsApp } from "./contacts.app";
 import { dataExplorerApp } from "./data-explorer.app";
 import { groupsApp } from "./groups.app";
-import { joinGroupApp } from "./join-group.app";
+import { invitesApp } from "./invites.app";
 import { mobileSettingsApp } from "./mobile-settings.app";
 import { networkViewerApp } from "./network-viewer.app";
 import { packagesApp } from "./packages.app";
@@ -64,7 +64,7 @@ export const systemApps: IAppNav[] = [
   packagesApp,
   contactsApp,
   groupsApp,
-  joinGroupApp,
+  invitesApp,
 
   // User & Settings Apps
   accountApp,

package/src/system-apps/invites.app.ts

@@ -0,0 +1,8 @@
+import type { IAppNav } from "@peers-app/peers-sdk";
+
+export const invitesApp: IAppNav = {
+  name: "Invites",
+  displayName: "Invites",
+  iconClassName: "bi-envelope-paper",
+  navigationPath: "invites",
+};

package/dist/screens/contacts/user-connect-invite.d.ts

@@ -1,118 +0,0 @@
-/**
- * Invite URL and pending-intent helpers for the user-connect QR/link flow.
- *
- * Invite codes stay in the URL fragment (never the HTTP query) and are moved
- * into tab-scoped sessionStorage before startup route restoration can persist
- * them into `mainContentPath`.
- */
-/** sessionStorage key for a captured inbound invite. */
-export declare const USER_CONNECT_INVITE_STORAGE_KEY = "peers.userConnectInvite";
-/** Default production launch origin used when building shareable invite links. */
-export declare const DEFAULT_USER_CONNECT_BASE_URL = "https://peers.app";
-/**
- * Serializable pending invite captured from a deep link or stored for post-setup resume.
- */
-export interface UserConnectPendingIntent {
-    /** Normalized 12-character Crockford code (no dashes). */
-    code: string;
-    /** Epoch ms when the intent was captured. */
-    capturedAt: number;
-}
-/**
- * Result of attempting to capture or read a pending invite.
- */
-export type UserConnectInviteCaptureResult = {
-    ok: true;
-    intent: UserConnectPendingIntent;
-} | {
-    ok: false;
-    reason: "none" | "invalid" | "expired";
-};
-/**
- * Build the canonical shareable invite URL.
- * Keeps the bearer code in the fragment and uses `?app` so signed-out PWA
- * recipients receive the app shell instead of the marketing landing page.
- * @param code Connection code (formatted or raw)
- * @param baseUrl Launch origin (no trailing slash); defaults to peers.app
- * @returns Absolute invite URL
- */
-export declare function buildUserConnectInviteUrl(code: string, baseUrl?: string): string;
-/**
- * Extract a connection code from a `contacts/connect` hash fragment.
- * Accepts `#contacts/connect?code=…` or `contacts/connect?code=…`.
- * @param hashOrPath Hash or path fragment from `location.hash` / a full URL
- * @returns Raw code string from the query, or null when the route is not an invite
- */
-export declare function extractUserConnectCodeFromFragment(hashOrPath: string): string | null;
-/**
- * Validate and normalize a connection code to 12 Crockford characters.
- * @param code Candidate code (formatted or raw)
- * @returns Normalized code, or null when invalid
- */
-export declare function normalizeUserConnectCode(code: string): string | null;
-/**
- * Whether a pending intent is still within the local invite TTL.
- * @param intent Captured intent
- * @param nowMs Current epoch ms (injectable for tests)
- * @returns True when the intent has not expired
- */
-export declare function isUserConnectIntentFresh(intent: Pick<UserConnectPendingIntent, "capturedAt">, nowMs?: number): boolean;
-/**
- * Replace the visible URL so the bearer code is no longer in the address bar.
- * Leaves `?app` and a non-sensitive `#contacts/connect` route shell when present.
- * @param locationLike Browser location (defaults to `window.location`)
- * @param historyLike History API (defaults to `window.history`)
- */
-export declare function stripUserConnectCodeFromUrl(locationLike?: Pick<Location, "pathname" | "search" | "hash">, historyLike?: Pick<History, "replaceState" | "state">): void;
-/**
- * Persist a pending invite in tab-scoped sessionStorage.
- * @param intent Valid intent to store
- * @param storage Storage backend (defaults to sessionStorage)
- */
-export declare function writeUserConnectPendingIntent(intent: UserConnectPendingIntent, storage?: Storage): void;
-/**
- * Read a pending invite without consuming it.
- * Expired entries are cleared. Invalid markers remain until consumed/cleared
- * so the connection screen can show recovery UI.
- * @param storage Storage backend
- * @param nowMs Current epoch ms
- * @returns Capture result
- */
-export declare function readUserConnectPendingIntent(storage?: Storage, nowMs?: number): UserConnectInviteCaptureResult;
-/**
- * Read and remove a pending invite in one step (one-time consumption).
- * @param storage Storage backend
- * @param nowMs Current epoch ms
- * @returns Capture result for the consumed intent
- */
-export declare function consumeUserConnectPendingIntent(storage?: Storage, nowMs?: number): UserConnectInviteCaptureResult;
-/**
- * Remove any pending invite from sessionStorage.
- * @param storage Storage backend
- */
-export declare function clearUserConnectPendingIntent(storage?: Storage): void;
-/**
- * Capture an inbound invite from the current location into sessionStorage and
- * strip the code from the address bar. Safe to call multiple times; a second
- * call with no code in the URL leaves existing storage alone.
- * @param options Optional location/history/storage/clock overrides for tests
- * @returns Capture result
- */
-export declare function captureUserConnectInviteFromLocation(options?: {
-    locationLike?: Pick<Location, "pathname" | "search" | "hash">;
-    historyLike?: Pick<History, "replaceState" | "state">;
-    storage?: Storage;
-    nowMs?: number;
-}): UserConnectInviteCaptureResult;
-/**
- * Whether sessionStorage currently holds a fresh, valid pending invite.
- * @param storage Storage backend
- * @param nowMs Current epoch ms
- */
-export declare function hasPendingUserConnectInvite(storage?: Storage, nowMs?: number): boolean;
-/**
- * Share text for the Web Share API / clipboard companion copy.
- * @param inviteUrl Canonical invite URL
- * @returns Human-readable share body
- */
-export declare function buildUserConnectShareText(inviteUrl: string): string;