@peers-app/peers-ui 0.23.14 → 0.24.0

package/src/screens/device-pairing/device-pairing-invite.test.ts

@@ -1,50 +0,0 @@
-import {
-  createDevicePairingInvitation,
-  createDevicePairingInvitationUrl,
-  parseDevicePairingInvitation,
-} from "@peers-app/peers-sdk";
-import {
-  captureDevicePairingInviteFromLocation,
-  clearPendingDevicePairingInvite,
-  consumePendingDevicePairingInvite,
-  readPendingDevicePairingInvite,
-} from "./device-pairing-invite";
-
-describe("device pairing invitation capture", () => {
-  beforeEach(() => {
-    clearPendingDevicePairingInvite();
-    window.history.replaceState({}, "", "/?app");
-  });
-
-  it("captures the fragment only in memory and removes it from browser history", () => {
-    const invitation = createDevicePairingInvitation({
-      serviceOrigin: "https://peers.app",
-    });
-    const inviteUrl = createDevicePairingInvitationUrl(
-      `${window.location.origin}/?app`,
-      invitation,
-    );
-    window.history.replaceState(
-      {},
-      "",
-      new URL(inviteUrl).pathname + new URL(inviteUrl).search + new URL(inviteUrl).hash,
-    );
-
-    const token = captureDevicePairingInviteFromLocation();
-
-    expect(token).toBeDefined();
-    expect(parseDevicePairingInvitation(token ?? "")).toEqual(invitation);
-    expect(window.location.hash).toBe("");
-    expect(readPendingDevicePairingInvite()).toBe(token);
-    expect(consumePendingDevicePairingInvite()).toBe(token);
-    expect(readPendingDevicePairingInvite()).toBeUndefined();
-  });
-
-  it("ignores invalid fragments without retaining them", () => {
-    window.history.replaceState({}, "", "/?app#pair=invalid");
-
-    expect(captureDevicePairingInviteFromLocation()).toBeUndefined();
-    expect(readPendingDevicePairingInvite()).toBeUndefined();
-    expect(window.location.hash).toBe("");
-  });
-});

package/src/screens/device-pairing/device-pairing-invite.ts

@@ -1,55 +0,0 @@
-import { encodeDevicePairingInvitation, parseDevicePairingInvitation } from "@peers-app/peers-sdk";
-
-let pendingInvitation: string | undefined;
-
-/** Browser event emitted after a pairing invitation is captured and removed from the URL. */
-export const DEVICE_PAIRING_INVITE_CAPTURED_EVENT = "device-pairing:invite-captured";
-
-/** Captures a pairing fragment in memory and immediately removes it from browser history. */
-export function captureDevicePairingInviteFromLocation(
-  location: Location = window.location,
-): string | undefined {
-  if (!location.hash.startsWith("#pair=") && !location.hash.startsWith("#pair?")) {
-    return undefined;
-  }
-  let capturedInvitation: string | undefined;
-  try {
-    capturedInvitation = encodeDevicePairingInvitation(parseDevicePairingInvitation(location.href));
-    pendingInvitation = capturedInvitation;
-    return capturedInvitation;
-  } catch {
-    return undefined;
-  } finally {
-    if (typeof window !== "undefined" && location === window.location) {
-      window.history.replaceState(
-        window.history.state,
-        document.title,
-        `${location.pathname}${location.search}`,
-      );
-      if (capturedInvitation) {
-        window.dispatchEvent(
-          new CustomEvent(DEVICE_PAIRING_INVITE_CAPTURED_EVENT, {
-            detail: capturedInvitation,
-          }),
-        );
-      }
-    }
-  }
-}
-
-/** Returns the in-memory invitation without consuming it. */
-export function readPendingDevicePairingInvite(): string | undefined {
-  return pendingInvitation;
-}
-
-/** Returns and erases the in-memory invitation. */
-export function consumePendingDevicePairingInvite(): string | undefined {
-  const invitation = pendingInvitation;
-  pendingInvitation = undefined;
-  return invitation;
-}
-
-/** Erases any unconsumed invitation. */
-export function clearPendingDevicePairingInvite(): void {
-  pendingInvitation = undefined;
-}

package/src/screens/groups/group-invite-listener.tsx

@@ -1,282 +0,0 @@
-/**
- * Component for admins to prepare group invitations and manage join requests.
- *
- * Shows in the group details Members tab for users with Admin role or above.
- *
- * Communicates with device layer through pvars (not direct imports).
- */
-
-import {
-  copyToClipboard,
-  GroupMemberRole,
-  generateInvitePassword,
-  groupInviteListeners,
-  groupInviteProcessRequest,
-  groupInviteRequests,
-  groupInviteStartListening,
-  groupInviteStatus,
-  groupInviteStopListening,
-  type IGroupJoinRequest,
-  type UserContext,
-} from "@peers-app/peers-sdk";
-import { useCallback, useEffect, useState } from "react";
-import { useObservable } from "../../hooks";
-
-interface GroupInviteListenerProps {
-  groupId: string;
-  userContext: UserContext;
-}
-
-export const GroupInviteListener = (props: GroupInviteListenerProps) => {
-  const { groupId } = props;
-
-  // State
-  const [password, setPassword] = useState<string>("");
-  const [isListening, setIsListening] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const [approvalRole, setApprovalRole] = useState<GroupMemberRole>(GroupMemberRole.Reader);
-  const [processingRequestId, setProcessingRequestId] = useState<string | null>(null);
-
-  // Observables
-  const [listeners] = useObservable(groupInviteListeners);
-  const [requests] = useObservable(groupInviteRequests);
-  const [status] = useObservable(groupInviteStatus);
-
-  // Check if we're currently listening for this group
-  const currentListener = listeners?.[groupId];
-  const pendingRequests = (requests || []).filter((r) => r.groupId === groupId);
-
-  // Sync local state with listener state
-  useEffect(() => {
-    if (currentListener) {
-      setPassword(currentListener.password);
-      setIsListening(true);
-    } else {
-      setIsListening(false);
-    }
-  }, [currentListener]);
-
-  // Generate a new password
-  const handleGeneratePassword = useCallback(() => {
-    const newPassword = generateInvitePassword();
-    setPassword(newPassword);
-  }, []);
-
-  // Start listening for invitations (set pvar, device layer reacts)
-  const handleStartListening = useCallback(() => {
-    if (!password.trim() || password.length < 4) {
-      alert("Password must be at least 4 characters");
-      return;
-    }
-
-    // Set the action pvar - device layer will process it
-    groupInviteStartListening({ groupId, password });
-  }, [groupId, password]);
-
-  // Stop listening (set pvar, device layer reacts)
-  const handleStopListening = useCallback(() => {
-    // Set the action pvar - device layer will process it
-    groupInviteStopListening(groupId);
-  }, [groupId]);
-
-  // Copy password to clipboard
-  const handleCopyPassword = useCallback(async () => {
-    const success = await copyToClipboard(password);
-    if (success) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  }, [password]);
-
-  // Approve a join request (set pvar, device layer reacts)
-  const handleApprove = useCallback(
-    (request: IGroupJoinRequest) => {
-      setProcessingRequestId(request.requestId);
-      // Set the action pvar - device layer will process it
-      groupInviteProcessRequest({
-        requestId: request.requestId,
-        approved: true,
-        role: approvalRole,
-      });
-      // Clear processing state after a short delay
-      setTimeout(() => setProcessingRequestId(null), 1000);
-    },
-    [approvalRole],
-  );
-
-  // Deny a join request (set pvar, device layer reacts)
-  const handleDeny = useCallback((request: IGroupJoinRequest) => {
-    setProcessingRequestId(request.requestId);
-    // Set the action pvar - device layer will process it
-    groupInviteProcessRequest({
-      requestId: request.requestId,
-      approved: false,
-      role: GroupMemberRole.None,
-    });
-    // Clear processing state after a short delay
-    setTimeout(() => setProcessingRequestId(null), 1000);
-  }, []);
-
-  return (
-    <div className="card mb-3">
-      <div className="card-header">
-        <h6 className="mb-0">
-          <i className="bi-person-plus-fill me-2" />
-          Invite New Members
-        </h6>
-      </div>
-      <div className="card-body">
-        {/* Password input and controls */}
-        <div className="mb-3">
-          <label className="form-label small text-muted">Invitation Password</label>
-          <div className="input-group">
-            <input
-              type="text"
-              className="form-control font-monospace"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Enter or generate a password..."
-              disabled={isListening}
-            />
-            <button
-              className="btn btn-outline-secondary"
-              onClick={handleGeneratePassword}
-              disabled={isListening}
-              title="Generate random password"
-            >
-              <i className="bi-shuffle" />
-            </button>
-            <button
-              className="btn btn-outline-secondary"
-              onClick={handleCopyPassword}
-              disabled={!password}
-              title="Copy password"
-            >
-              <i className={copied ? "bi-check-lg text-success" : "bi-clipboard"} />
-            </button>
-          </div>
-          <small className="text-muted">
-            Share this password with people you want to invite. They can enter it in the "Join
-            Group" screen.
-          </small>
-        </div>
-
-        {/* Start/Stop listening button */}
-        <div className="d-flex gap-2">
-          {!isListening ? (
-            <button
-              className="btn btn-primary"
-              onClick={handleStartListening}
-              disabled={!password || password.length < 4}
-            >
-              <i className="bi-broadcast me-2" />
-              Start Listening
-            </button>
-          ) : (
-            <button className="btn btn-danger" onClick={handleStopListening}>
-              <i className="bi-stop-circle me-2" />
-              Stop Listening
-            </button>
-          )}
-        </div>
-
-        {/* Listening status */}
-        {isListening && (
-          <div className="alert alert-success mt-3 mb-0 d-flex align-items-center">
-            <div className="spinner-border spinner-border-sm me-2" role="status">
-              <span className="visually-hidden">Listening...</span>
-            </div>
-            <div>
-              <strong>Listening for join requests</strong>
-              <br />
-              <small>
-                Password: <code>{password}</code>
-              </small>
-            </div>
-          </div>
-        )}
-
-        {/* Status message */}
-        {status && (
-          <div className="alert alert-info mt-3 mb-0">
-            <i className="bi-info-circle me-2" />
-            {status}
-          </div>
-        )}
-
-        {/* Pending join requests */}
-        {pendingRequests.length > 0 && (
-          <div className="mt-3">
-            <h6 className="mb-2">
-              <i className="bi-inbox-fill me-2" />
-              Pending Requests ({pendingRequests.length})
-            </h6>
-
-            {/* Role selector for approvals */}
-            <div className="mb-2">
-              <label className="form-label small text-muted">Role for new members:</label>
-              <select
-                className="form-select form-select-sm"
-                value={approvalRole}
-                onChange={(e) => setApprovalRole(Number(e.target.value) as GroupMemberRole)}
-                style={{ width: "auto" }}
-              >
-                <option value={GroupMemberRole.Reader}>Reader</option>
-                <option value={GroupMemberRole.Writer}>Writer</option>
-                <option value={GroupMemberRole.Admin}>Admin</option>
-              </select>
-            </div>
-
-            <div className="list-group">
-              {pendingRequests.map((request) => (
-                <div key={request.requestId} className="list-group-item">
-                  <div className="d-flex justify-content-between align-items-center">
-                    <div>
-                      <div className="d-flex align-items-center">
-                        <i className="bi-person-fill me-2" />
-                        <div>
-                          <strong>{request.requester.name || request.requester.userId}</strong>
-                          {request.requester.name && (
-                            <small className="text-muted d-block">{request.requester.userId}</small>
-                          )}
-                        </div>
-                      </div>
-                      <small className="text-muted">
-                        Device: {request.requester.deviceId.slice(0, 8)}...
-                        {" | "}
-                        Received: {new Date(request.receivedAt).toLocaleTimeString()}
-                      </small>
-                    </div>
-                    <div className="d-flex gap-2">
-                      <button
-                        className="btn btn-success btn-sm"
-                        onClick={() => handleApprove(request)}
-                        disabled={processingRequestId === request.requestId}
-                      >
-                        {processingRequestId === request.requestId ? (
-                          <span className="spinner-border spinner-border-sm" />
-                        ) : (
-                          <>
-                            <i className="bi-check-lg me-1" />
-                            Approve
-                          </>
-                        )}
-                      </button>
-                      <button
-                        className="btn btn-outline-danger btn-sm"
-                        onClick={() => handleDeny(request)}
-                        disabled={processingRequestId === request.requestId}
-                      >
-                        <i className="bi-x-lg" />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/screens/join-group/index.ts

@@ -1,4 +0,0 @@
-// Import to ensure route registration
-import "./join-group";
-
-export * from "./join-group";

package/src/screens/join-group/join-group.tsx

@@ -1,296 +0,0 @@
-/**
- * Join Group screen - allows users to join a group by entering an invitation password.
- *
- * Flow:
- * 1. User enters the invitation password
- * 2. System discovers all devices listening for that password
- * 3. User selects a group/device to join
- * 4. System sends join request and waits for approval
- *
- * Communicates with device layer through pvars (not direct imports).
- */
-
-import {
-  getUserContext,
-  groupInviteDiscover,
-  groupInviteDiscoveryResult,
-  groupInviteJoinResult,
-  groupInviteSendRequest,
-  groupJoinStatus,
-  type IGroupInviteListenerInfo,
-  isValidInvitePassword,
-} from "@peers-app/peers-sdk";
-import type React from "react";
-import { useCallback, useEffect, useState } from "react";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { mainContentPath } from "../../globals";
-import { useObservable, usePromise } from "../../hooks";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-
-export const JoinGroup = () => {
-  const userContext = usePromise(() => getUserContext());
-
-  // State
-  const [password, setPassword] = useState("");
-  const [isSearching, setIsSearching] = useState(false);
-  const [isJoining, setIsJoining] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [_currentJoiningGroup, setCurrentJoiningGroup] = useState<IGroupInviteListenerInfo | null>(
-    null,
-  );
-
-  // Observable state from device layer
-  const [status] = useObservable(groupJoinStatus);
-  const [discoveredListeners] = useObservable(groupInviteDiscoveryResult);
-  const [joinResult] = useObservable(groupInviteJoinResult);
-
-  // Watch for join results
-  useEffect(() => {
-    if (isJoining && joinResult) {
-      setIsJoining(false);
-      if (joinResult.success && joinResult.groupId) {
-        // Navigate to the group after a brief delay
-        setTimeout(() => {
-          mainContentPath(`groups/${joinResult.groupId}`);
-        }, 2000);
-      }
-    }
-  }, [joinResult, isJoining]);
-
-  // Search for groups (set pvar, device layer reacts)
-  const handleSearch = useCallback(() => {
-    if (!isValidInvitePassword(password)) {
-      setError("Password must be at least 4 characters");
-      return;
-    }
-
-    setError(null);
-    setIsSearching(true);
-
-    // Clear previous results and trigger discovery
-    groupInviteDiscoveryResult([]);
-    groupInviteJoinResult(null);
-    groupInviteDiscover(password);
-  }, [password]);
-
-  // Join a group (set pvar, device layer reacts)
-  const handleJoin = useCallback(
-    (listener: IGroupInviteListenerInfo) => {
-      setIsJoining(true);
-      setError(null);
-      setCurrentJoiningGroup(listener);
-
-      // Clear previous result and trigger join request
-      groupInviteJoinResult(null);
-      groupInviteSendRequest({ listener, password });
-    },
-    [password],
-  );
-
-  // Reset state
-  const handleReset = useCallback(() => {
-    setPassword("");
-    setError(null);
-    setCurrentJoiningGroup(null);
-    setIsSearching(false);
-    setIsJoining(false);
-    // Clear pvars
-    groupInviteDiscoveryResult([]);
-    groupInviteJoinResult(null);
-  }, []);
-
-  // Handle Enter key
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Enter" && password && !isSearching) {
-        handleSearch();
-      }
-    },
-    [password, isSearching, handleSearch],
-  );
-
-  if (!userContext) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="container-fluid p-4" style={{ maxWidth: "600px" }}>
-      <div className="text-center mb-4">
-        <h2>
-          <i className="bi-box-arrow-in-right me-2" />
-          Join Group
-        </h2>
-        <p className="text-muted">Enter the invitation password to find and join a group</p>
-      </div>
-
-      {/* Success state */}
-      {joinResult?.success && (
-        <div className="text-center">
-          <div className="mb-4">
-            <i className="bi-check-circle-fill text-success" style={{ fontSize: "4rem" }} />
-          </div>
-          <h4 className="text-success mb-3">Successfully Joined!</h4>
-          <p className="text-muted">Redirecting to the group...</p>
-          <button className="btn btn-outline-primary" onClick={handleReset}>
-            <i className="bi-plus-lg me-2" />
-            Join Another Group
-          </button>
-        </div>
-      )}
-
-      {/* Main form */}
-      {!joinResult?.success && (
-        <>
-          {/* Password input */}
-          <div className="card mb-4">
-            <div className="card-body">
-              <label className="form-label">
-                <i className="bi-key-fill me-2" />
-                Invitation Password
-              </label>
-              <div className="input-group">
-                <input
-                  type="text"
-                  className="form-control form-control-lg font-monospace"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Enter password (e.g., apple-banana-cherry-date)"
-                  disabled={isSearching || isJoining}
-                />
-                <button
-                  className="btn btn-primary"
-                  onClick={handleSearch}
-                  disabled={!password || isSearching || isJoining}
-                >
-                  {isSearching ? (
-                    <>
-                      <span className="spinner-border spinner-border-sm me-2" />
-                      Searching...
-                    </>
-                  ) : (
-                    <>
-                      <i className="bi-search me-2" />
-                      Search
-                    </>
-                  )}
-                </button>
-              </div>
-              <small className="text-muted">Ask the group admin for the invitation password</small>
-            </div>
-          </div>
-
-          {/* Error message */}
-          {error && (
-            <div className="alert alert-danger">
-              <i className="bi-exclamation-triangle me-2" />
-              {error}
-            </div>
-          )}
-
-          {/* Status message */}
-          {status && !error && (
-            <div className="alert alert-info">
-              <i className="bi-info-circle me-2" />
-              {status}
-            </div>
-          )}
-
-          {/* Join result error */}
-          {joinResult && !joinResult.success && (
-            <div className="alert alert-warning">
-              <i className="bi-exclamation-circle me-2" />
-              {joinResult.error || "Join request was not approved"}
-            </div>
-          )}
-
-          {/* Discovered groups */}
-          {discoveredListeners && discoveredListeners.length > 0 && (
-            <div className="card">
-              <div className="card-header">
-                <h6 className="mb-0">
-                  <i className="bi-broadcast me-2" />
-                  Found Groups ({discoveredListeners.length})
-                </h6>
-              </div>
-              <div className="list-group list-group-flush">
-                {discoveredListeners.map((listener, index) => (
-                  <div key={`${listener.deviceId}-${index}`} className="list-group-item">
-                    <div className="d-flex justify-content-between align-items-center">
-                      <div>
-                        <div className="d-flex align-items-center mb-1">
-                          <i
-                            className={`${listener.group.iconClassName || "bi-people-fill"} me-2`}
-                          />
-                          <strong>{listener.group.name}</strong>
-                        </div>
-                        {listener.group.description && (
-                          <p className="text-muted mb-1 small">{listener.group.description}</p>
-                        )}
-                        <small className="text-muted">
-                          <i className="bi-person me-1" />
-                          Invited by: {listener.name || listener.userId}
-                        </small>
-                      </div>
-                      <button
-                        className="btn btn-success"
-                        onClick={() => handleJoin(listener)}
-                        disabled={isJoining}
-                      >
-                        {isJoining ? (
-                          <>
-                            <span className="spinner-border spinner-border-sm me-2" />
-                            Joining...
-                          </>
-                        ) : (
-                          <>
-                            <i className="bi-box-arrow-in-right me-2" />
-                            Join
-                          </>
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Searching indicator */}
-          {isSearching && (
-            <div className="text-center py-4">
-              <div className="spinner-border text-primary mb-3" role="status">
-                <span className="visually-hidden">Searching...</span>
-              </div>
-              <p className="text-muted">Searching for groups...</p>
-            </div>
-          )}
-
-          {/* Joining indicator */}
-          {isJoining && (
-            <div className="text-center py-4">
-              <div className="spinner-border text-success mb-3" role="status">
-                <span className="visually-hidden">Joining...</span>
-              </div>
-              <p className="text-muted">Waiting for approval...</p>
-              <small className="text-muted">The group admin needs to approve your request</small>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-};
-
-// Register the route
-registerInternalPeersUI({
-  peersUIId: "00join0group0screen000000",
-  component: JoinGroup,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "join-group",
-      uiCategory: "screen",
-      priority: 2,
-    },
-  ],
-});