@peers-app/peers-ui 0.25.1 → 0.25.3

package/src/screens/contacts/contact-list.tsx

@@ -1,300 +1,286 @@
 import {
+  GroupMembers,
+  Groups,
   getUserContext,
-  type ICreatedInvite,
-  type ICursorIterable,
-  type IUserWithSource,
-  observable,
-  setUserTrustLevel,
+  getUserTrustLevel,
+  type IUser,
   TrustLevel,
+  type UserContext,
   Users,
-  usersCursor,
 } from "@peers-app/peers-sdk";
-import type React from "react";
-import { useCallback, useEffect, useState } from "react";
-import { Input } from "../../components/input";
-import { LazyList } from "../../components/lazy-list";
+import { useEffect, useMemo, useState } from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { TrustLevelBadge } from "../../components/trust-level-badge";
 import { mainContentPath } from "../../globals";
-import { useObservable } from "../../hooks";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-import { ACCEPT_INVITE_PATH } from "../invites/invite-capture";
-import { InviteShare } from "../invites/invite-share";
-import { inviteTools } from "../invites/invites-ipc";
-import { PendingInvitesList } from "../invites/pending-invites-list";
+import { usePromise } from "../../hooks";
+import { IDENTITY_PEOPLE_PATH, IDENTITY_PEOPLE_SHARE_PATH } from "../identity/identity-routes";
+import { InviteContactPanel } from "../identity/invite-contact-panel";
+import { ProfileInviteSection } from "../identity/profile-invite";
+import { PendingWorkLink } from "../invites/activity-view";
 
-/** Issues a one-off contact invite and shows it as QR/link until dismissed. */
-function InviteContactPanel({ onClose }: { onClose: () => void }) {
-  const [invite, setInvite] = useState<ICreatedInvite | undefined>(undefined);
+/** People directory and route-backed invite/profile actions. */
+export function ContactList(props: { action?: "share" | "invite" } = {}) {
+  const userContext = usePromise(getUserContext);
+  const [rows, setRows] = useState<IPersonSummary[] | undefined>();
   const [error, setError] = useState("");
+  const [searchText, setSearchText] = useState("");
+  const [groupRevision, setGroupRevision] = useState(0);
 
   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 a contact</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>
-  );
-}
-
-export function ContactList() {
-  const [inviting, setInviting] = useState(false);
-  const [searchTextObs] = useState(() => observable(""));
-  const [searchText] = useObservable(searchTextObs);
-  const [cursorObs] = useState(() => observable<ICursorIterable<IUserWithSource> | undefined>());
-  const [existingContacts, setExistingContacts] = useState<IUserWithSource[]>([]);
-
-  const newCursor = useCallback(async () => {
-    const cursor = await usersCursor({ name: { $matchWords: searchText } });
-    cursorObs(cursor);
-    return cursor;
-  }, [searchText, cursorObs]);
-
-  useEffect(() => {
-    void newCursor();
-    setExistingContacts([]); // Reset existing contacts when search changes
-  }, [newCursor]);
-
-  async function loadMore(existing: IUserWithSource[]): Promise<IUserWithSource[]> {
-    const moreMatches: IUserWithSource[] = [];
-    const cursor = cursorObs() || (await newCursor());
-    for await (const nextContact of cursor) {
-      if (existing.some((e) => e.userId === nextContact.userId)) continue;
-      if (moreMatches.some((e) => e.userId === nextContact.userId)) continue;
-      moreMatches.push(nextContact);
-      if (searchText.length && moreMatches.length > 5) break;
-      if (moreMatches.length >= 10) break;
+    if (!userContext) {
+      return;
     }
-    if (moreMatches.length === 0) {
-      cursorObs(undefined);
-    }
-    setExistingContacts(existing.concat(moreMatches)); // Track all loaded contacts
-    return moreMatches;
-  }
-
-  function isValidUserId(id: string): boolean {
-    // Check if it's a valid ID format (alphanumeric, typically 25 characters)
-    return /^[a-zA-Z0-9]{20,30}$/.test(id);
-  }
-
-  async function createContact(userId: string) {
-    try {
-      const userContext = await getUserContext();
-      const usersTable = Users(userContext.userDataContext);
-
-      const newContact = await usersTable.initRecord({
-        userId: userId.trim(),
-        name: "New User",
-        publicKey: "",
-        publicBoxKey: "",
-      });
-
-      await usersTable.save(newContact);
-
-      // Set initial trust level
-      await setUserTrustLevel(userId.trim(), TrustLevel.NewUser, userContext.userDataContext);
-
-      // Navigate to the details screen for the new contact
-      mainContentPath(`contacts/${userId.trim()}`);
-    } catch (error) {
-      console.error("Error creating contact:", error);
-    }
-  }
-
-  async function handleSearchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
-    if (evt.key !== "Enter") return;
-
-    const input = searchText.trim();
-    if (!input) return;
-
-    // Check if there are any existing results
-    if (existingContacts.length === 0) {
-      // No results found, check if it's a valid user ID
-      if (isValidUserId(input)) {
-        // Clear search and create new contact with the ID
-        searchTextObs("");
-        await createContact(input);
+    let disposed = false;
+    const subscriptions: Array<{ unsubscribe: () => void }> = [];
+    const refresh = async () => {
+      try {
+        const next = await loadPeople(userContext);
+        if (!disposed) {
+          setRows(next);
+          setError("");
+        }
+      } catch (err) {
+        if (!disposed) {
+          setError((err as Error).message || "Could not load people.");
+        }
       }
-    }
-  }
-
-  function renderItems(contacts: IUserWithSource[]): JSX.Element[] {
-    const elements: JSX.Element[] = [];
-    let lastSource: string | null = null;
-
-    contacts.forEach((contact, index) => {
-      // Add horizontal separator when source changes
-      if (lastSource !== contact.source) {
-        elements.push(
-          <div key={`separator-${index}`} className="my-3">
-            {lastSource !== null && <hr className="border-secondary opacity-50" />}
-            {contact.source === "userDataContext" && (
-              <h5>Personal Contacts {lastSource !== null && "(not in this group)"}</h5>
-            )}
-            {contact.source === "currentDataContext" && <h5>Users in this group</h5>}
-            {contact.source === "otherDataContexts" && <h5>Users from other groups</h5>}
-          </div>,
-        );
-        lastSource = contact.source;
+    };
+    const personalUsers = Users(userContext.userDataContext);
+    const personalGroups = Groups(userContext.userDataContext);
+    subscriptions.push(personalUsers.dataChanged.subscribe(() => void refresh()));
+    subscriptions.push(
+      personalGroups.dataChanged.subscribe(() => setGroupRevision((value) => value + 1)),
+    );
+    void personalGroups.list({ disabled: { $ne: true } }).then((groups) => {
+      if (disposed) {
+        return;
+      }
+      for (const group of groups) {
+        const context = userContext.getDataContext(group.groupId);
+        subscriptions.push(Users(context).dataChanged.subscribe(() => void refresh()));
+        subscriptions.push(GroupMembers(context).dataChanged.subscribe(() => void refresh()));
       }
-      elements.push(<ContactCard key={contact.userId} contact={contact} />);
+      void refresh();
     });
+    return () => {
+      disposed = true;
+      for (const subscription of subscriptions) {
+        subscription.unsubscribe();
+      }
+    };
+  }, [groupRevision, userContext]);
 
-    return elements;
-  }
+  const filteredRows = useMemo(() => {
+    const query = searchText.trim().toLocaleLowerCase();
+    if (!query) {
+      return rows ?? [];
+    }
+    return (rows ?? []).filter(
+      (row) =>
+        row.user.name.toLocaleLowerCase().includes(query) ||
+        row.sharedGroups.some((group) => group.name.toLocaleLowerCase().includes(query)),
+    );
+  }, [rows, searchText]);
+  const duplicateNames = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const row of rows ?? []) {
+      const key = row.user.name.trim().toLocaleLowerCase();
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+    return counts;
+  }, [rows]);
 
   return (
-    <div className="container-fluid p-3">
+    <div className="container-xxl p-3">
       <div className="d-flex justify-content-between align-items-center mb-3">
-        <h4>
-          <i className="bi-person-fill-check me-2" />
-          Contacts
-        </h4>
-        <div className="d-flex gap-2">
-          <a href={`#${ACCEPT_INVITE_PATH}`} className="btn btn-outline-primary btn-sm">
-            <i className="bi-qr-code-scan me-1" />
-            Accept invite
-          </a>
-          <button
-            type="button"
-            className="btn btn-primary btn-sm"
-            onClick={() => setInviting(true)}
-            disabled={inviting}
-          >
-            <i className="bi-person-plus me-1" />
-            Invite
-          </button>
+        <div>
+          <h4 className="mb-1">
+            <i className="bi-person-fill-check me-2" />
+            People
+          </h4>
+          <div className="small text-muted">Contacts and people you know through groups</div>
         </div>
+        <a href={`#${IDENTITY_PEOPLE_SHARE_PATH}`} className="btn btn-outline-primary btn-sm">
+          <i className="bi bi-qr-code me-1" />
+          Share my profile
+        </a>
       </div>
 
-      {inviting ? <InviteContactPanel onClose={() => setInviting(false)} /> : null}
-      <PendingInvitesList type="contact" hideWhenEmpty title="Pending contact invites" />
+      {props.action ? (
+        <div className="mb-3">
+          <div className="d-flex justify-content-end mb-2">
+            <a href={`#${IDENTITY_PEOPLE_PATH}`} className="btn btn-link btn-sm">
+              Close
+            </a>
+          </div>
+          {props.action === "share" ? (
+            <ProfileInviteSection />
+          ) : (
+            <InviteContactPanel onClose={() => mainContentPath(IDENTITY_PEOPLE_PATH)} />
+          )}
+        </div>
+      ) : null}
+      <PendingWorkLink type="contact" />
 
-      <div className="input-group mb-3">
-        <Input
-          value={searchTextObs}
-          className="form-control"
-          placeholder="Search or create contacts"
-          autoFocus={true}
-          onKeyUp={handleSearchSubmit}
+      <div className="position-relative mb-3">
+        <i
+          className="bi bi-search position-absolute text-muted"
+          style={{ left: 12, top: "50%", transform: "translateY(-50%)" }}
         />
-      </div>
-
-      <div className="peers-list-container">
-        <LazyList
-          resetTrigger={searchText}
-          loadMore={loadMore}
-          scrollThreshold={0.6}
-          renderItems={renderItems}
-          loadingIndicator={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              <LoadingIndicator />
-            </div>
-          }
-          endOfList={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              {/* End of contacts */}
-            </div>
-          }
+        <input
+          type="search"
+          className="form-control ps-5"
+          value={searchText}
+          onChange={(event) => setSearchText(event.target.value)}
+          placeholder="Search people or shared groups"
+          aria-label="Search people"
         />
       </div>
+
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {!rows && !error ? <LoadingIndicator /> : null}
+      {rows && filteredRows.length === 0 ? (
+        <div className="border rounded p-4 text-center">
+          <i className="bi bi-people fs-2 text-muted" />
+          <h6 className="mt-2">{searchText ? "No matching people" : "No people yet"}</h6>
+          <p className="small text-muted mb-0">
+            {searchText
+              ? "Try another name or group."
+              : "Invite someone or join a group to start building your network."}
+          </p>
+        </div>
+      ) : null}
+      {filteredRows.length > 0 ? (
+        <div className="list-group">
+          {filteredRows.map((row) => (
+            <PersonRow
+              key={row.user.userId}
+              row={row}
+              duplicateName={
+                (duplicateNames.get(row.user.name.trim().toLocaleLowerCase()) ?? 0) > 1
+              }
+            />
+          ))}
+        </div>
+      ) : null}
     </div>
   );
 }
 
-interface ContactCardProps {
-  contact: IUserWithSource;
+/** One person plus the relationship context shown in the directory. */
+export interface IPersonSummary {
+  /** Signed user profile. */
+  user: IUser;
+  /** Whether the person is saved in the personal context. */
+  isContact: boolean;
+  /** Personal trust assignment when this is a contact. */
+  trustLevel?: TrustLevel;
+  /** Enabled groups both users belong to. */
+  sharedGroups: Array<{ groupId: string; name: string }>;
 }
 
-const ContactCard = ({ contact }: ContactCardProps) => {
-  const getSourceLabel = (source: string) => {
-    switch (source) {
-      case "userDataContext":
-        return "Personal";
-      case "currentDataContext":
-        return "Current Context";
-      case "otherDataContexts":
-        return "Groups";
-      default:
-        return source;
+async function loadPeople(userContext: UserContext): Promise<IPersonSummary[]> {
+  const personalUsers = await Users(userContext.userDataContext).list();
+  const personalById = new Map(personalUsers.map((user) => [user.userId, user]));
+  const summaries = new Map<string, IPersonSummary>();
+  for (const user of personalUsers) {
+    if (user.userId === userContext.userId) {
+      continue;
     }
-  };
+    summaries.set(user.userId, {
+      user,
+      isContact: true,
+      trustLevel: await getUserTrustLevel(userContext.userDataContext, user.userId),
+      sharedGroups: [],
+    });
+  }
 
-  const getSourceIcon = (source: string) => {
-    switch (source) {
-      case "userDataContext":
-        return "bi-person-fill";
-      case "currentDataContext":
-        return "bi-house-fill";
-      case "otherDataContexts":
-        return "bi-people-fill";
-      default:
-        return "bi-question-circle";
+  const groups = await Groups(userContext.userDataContext).list({ disabled: { $ne: true } });
+  for (const group of groups) {
+    const context = userContext.getDataContext(group.groupId);
+    const members = await GroupMembers(context).list({ deleted: { $ne: true } });
+    for (const member of members) {
+      if (member.userId === userContext.userId) {
+        continue;
+      }
+      const existing = summaries.get(member.userId);
+      const user = personalById.get(member.userId) ?? (await Users(context).get(member.userId));
+      if (!user) {
+        continue;
+      }
+      const summary = existing ?? {
+        user,
+        isContact: false,
+        sharedGroups: [],
+      };
+      if (!summary.sharedGroups.some((entry) => entry.groupId === group.groupId)) {
+        summary.sharedGroups.push({ groupId: group.groupId, name: group.name });
+      }
+      summaries.set(member.userId, summary);
     }
-  };
+  }
 
-  return (
-    <div className="list-group-item d-flex align-items-center justify-content-between py-2">
-      <div className="d-flex align-items-center">
-        <i className="bi-person-circle me-3" style={{ fontSize: "32px", color: "#6c757d" }} />
-        <div>
-          <strong>{contact.name}</strong>
-          <div className="d-flex align-items-center">
-            <small className="text-muted">{contact.userId}</small>
-            <span className="mx-1 text-muted">•</span>
-            <small className="text-info d-flex align-items-center">
-              <i className={`${getSourceIcon(contact.source)} me-1`} />
-              {getSourceLabel(contact.source)}
-            </small>
-          </div>
-        </div>
-      </div>
+  return [...summaries.values()].sort((left, right) =>
+    left.user.name.localeCompare(right.user.name),
+  );
+}
 
-      <div className="d-flex align-items-center">
-        {<TrustLevelBadge level={contact.trustLevel || TrustLevel.Unknown} />}
-        <a href={`#contacts/${contact.userId}`} className="btn btn-outline-primary btn-sm ms-2">
-          <i className="bi-eye me-1" />
-          View
-        </a>
-      </div>
-    </div>
+/** Compact, fully clickable row in the People directory. */
+export function PersonRow(props: { row: IPersonSummary; duplicateName: boolean }) {
+  const { row } = props;
+  const groups = row.sharedGroups;
+  const relationship = row.isContact
+    ? groups.length > 0
+      ? `Contact · ${sharedGroupLabel(groups)}`
+      : "Contact"
+    : sharedGroupLabel(groups);
+  return (
+    <a
+      href={`#${IDENTITY_PEOPLE_PATH}/${row.user.userId}`}
+      className="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3"
+    >
+      <span
+        className="rounded-circle bg-body-secondary d-inline-flex align-items-center justify-content-center flex-shrink-0 fw-semibold"
+        style={{ width: 42, height: 42 }}
+        aria-hidden="true"
+      >
+        {initials(row.user.name)}
+      </span>
+      <span className="flex-grow-1 overflow-hidden">
+        <span className="d-flex align-items-center gap-2 flex-wrap">
+          <span className="fw-semibold text-truncate">{row.user.name || "Unnamed person"}</span>
+          {props.duplicateName ? (
+            <code className="small text-muted">…{row.user.userId.slice(-6)}</code>
+          ) : null}
+        </span>
+        <span className="small text-muted text-truncate d-block">{relationship}</span>
+      </span>
+      {row.isContact ? (
+        <TrustLevelBadge level={row.trustLevel ?? TrustLevel.Unknown} />
+      ) : (
+        <span className="badge text-bg-light border">Shared group</span>
+      )}
+      <i className="bi bi-chevron-right text-muted" aria-hidden="true" />
+    </a>
   );
-};
+}
 
-registerInternalPeersUI({
-  peersUIId: "00mfc4ql0lgqmjxrpvcd4ufk0",
-  component: ContactList,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "contacts",
-      uiCategory: "screen",
-      priority: 2,
-    },
-  ],
-});
+function sharedGroupLabel(groups: Array<{ name: string }>): string {
+  if (groups.length === 0) {
+    return "Known through a shared group";
+  }
+  if (groups.length === 1) {
+    return `Shared group: ${groups[0].name}`;
+  }
+  return `${groups.length} shared groups`;
+}
+
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  return (
+    parts
+      .slice(0, 2)
+      .map((part) => part[0]?.toLocaleUpperCase())
+      .join("") || "?"
+  );
+}

package/src/screens/contacts/index.ts

@@ -1,6 +1,2 @@
-// Import all contact screen components to ensure they register their routes
-import "./contact-list";
-import "./contact-details";
-
 export * from "./contact-details";
 export * from "./contact-list";

package/src/screens/device-pairing/device-pairing.test.tsx

@@ -1,4 +1,4 @@
-import { type DevicePairingState, rpcServerCalls } from "@peers-app/peers-sdk";
+import type { DevicePairingState } from "@peers-app/peers-sdk";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import { DestinationDevicePairing, SourceDevicePairing } from "./device-pairing";
 
@@ -11,13 +11,9 @@ const mockRpc = {
 };
 let mockPairingState: DevicePairingState = { phase: "idle" };
 
-rpcServerCalls.devicePairingStartSource =
-  mockRpc.startSource as typeof rpcServerCalls.devicePairingStartSource;
-rpcServerCalls.devicePairingStartDestination =
-  mockRpc.startDestination as typeof rpcServerCalls.devicePairingStartDestination;
-rpcServerCalls.devicePairingApprove = mockRpc.approve as typeof rpcServerCalls.devicePairingApprove;
-rpcServerCalls.devicePairingReject = mockRpc.reject as typeof rpcServerCalls.devicePairingReject;
-rpcServerCalls.devicePairingCancel = mockRpc.cancel as typeof rpcServerCalls.devicePairingCancel;
+jest.mock("./identity-ipc", () => ({
+  identityTools: async () => mockRpc,
+}));
 
 jest.mock("./use-device-pairing-state", () => ({
   useDevicePairingState: () => mockPairingState,
@@ -39,7 +35,9 @@ describe("device pairing UI lifecycle", () => {
     );
     const view = render(<DestinationDevicePairing onBack={jest.fn()} />);
 
-    expect(mockRpc.startDestination).toHaveBeenCalledWith({ deviceType: "browser" });
+    await waitFor(() =>
+      expect(mockRpc.startDestination).toHaveBeenCalledWith({ deviceType: "browser" }),
+    );
     view.unmount();
     resolveStart({
       sessionId: "00mh0wlipkdbeaw8tests0001",