@peers-app/peers-ui 0.27.2 → 0.27.4

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

@@ -1,286 +0,0 @@
-import {
-  GroupMembers,
-  Groups,
-  getUserContext,
-  getUserTrustLevel,
-  type IUser,
-  TrustLevel,
-  type UserContext,
-  Users,
-} from "@peers-app/peers-sdk";
-import { useEffect, useMemo, useState } from "react";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { TrustLevelBadge } from "../../components/trust-level-badge";
-import { mainContentPath } from "../../globals";
-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";
-
-/** 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(() => {
-    if (!userContext) {
-      return;
-    }
-    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.");
-        }
-      }
-    };
-    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()));
-      }
-      void refresh();
-    });
-    return () => {
-      disposed = true;
-      for (const subscription of subscriptions) {
-        subscription.unsubscribe();
-      }
-    };
-  }, [groupRevision, userContext]);
-
-  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-xxl p-3">
-      <div className="d-flex justify-content-between align-items-center mb-3">
-        <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>
-
-      {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="position-relative mb-3">
-        <i
-          className="bi bi-search position-absolute text-muted"
-          style={{ left: 12, top: "50%", transform: "translateY(-50%)" }}
-        />
-        <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>
-  );
-}
-
-/** 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 }>;
-}
-
-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 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 [...summaries.values()].sort((left, right) =>
-    left.user.name.localeCompare(right.user.name),
-  );
-}
-
-/** 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>
-  );
-}
-
-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,2 +0,0 @@
-export * from "./contact-details";
-export * from "./contact-list";