@peers-app/peers-ui 0.27.2 → 0.27.4

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

@@ -1,311 +0,0 @@
-import {
-  type GroupInviteMode,
-  GroupMemberRole,
-  type ICreatedInvite,
-  type IUserWithSource,
-  usersCursor,
-} from "@peers-app/peers-sdk";
-import { useState } from "react";
-import { Typeahead, type TypeaheadItem } from "../../components/typeahead";
-import { PendingWorkLink } from "../invites/activity-view";
-import { InviteShare } from "../invites/invite-share";
-import { inviteTools } from "../invites/invites-ipc";
-
-/** Props for {@link GroupInvitePanel}. */
-export interface GroupInvitePanelProps {
-  groupId: string;
-  /** Users who are already members; hidden from the contact picker. */
-  excludeUserIds: string[];
-  /** The local user's role; caps the roles offered. */
-  myRole: GroupMemberRole;
-}
-
-const ROLE_OPTIONS: Array<{ value: GroupMemberRole; label: string }> = [
-  { value: GroupMemberRole.Reader, label: "Reader" },
-  { value: GroupMemberRole.Writer, label: "Writer" },
-  { value: GroupMemberRole.Admin, label: "Admin" },
-  { value: GroupMemberRole.Owner, label: "Owner" },
-];
-
-const EXPIRY_OPTIONS: Array<{ ms: number; label: string }> = [
-  { ms: 60 * 60_000, label: "1 hour" },
-  { ms: 24 * 60 * 60_000, label: "1 day" },
-  { ms: 7 * 24 * 60 * 60_000, label: "7 days" },
-  { ms: 30 * 24 * 60 * 60_000, label: "30 days" },
-];
-
-function RoleSelect(props: {
-  value: GroupMemberRole;
-  max: GroupMemberRole;
-  disabled?: boolean;
-  onChange: (role: GroupMemberRole) => void;
-}) {
-  return (
-    <select
-      className="form-select"
-      value={props.value}
-      disabled={props.disabled}
-      onChange={(event) => props.onChange(Number(event.target.value) as GroupMemberRole)}
-      aria-label="Role"
-    >
-      {ROLE_OPTIONS.filter((option) => option.value <= props.max).map((option) => (
-        <option key={option.value} value={option.value}>
-          {option.label}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-function ContactPicker(props: {
-  excludeUserIds: string[];
-  selected: IUserWithSource[];
-  disabled: boolean;
-  onChange: (items: IUserWithSource[]) => void;
-}) {
-  const search = async (query: string): Promise<(IUserWithSource & TypeaheadItem)[]> => {
-    const cursor = await usersCursor({ name: { $matchWords: query } }, { includeTrustLevel: true });
-    const results: IUserWithSource[] = [];
-    for await (const contact of cursor) {
-      if (!props.excludeUserIds.includes(contact.userId)) {
-        results.push(contact);
-      }
-      if (results.length >= 10) break;
-    }
-    return results.map((contact) => ({ ...contact, id: contact.userId }));
-  };
-  return (
-    <Typeahead
-      placeholder="Search contacts…"
-      searchFn={search}
-      onSelectionChange={(items) => props.onChange(items as IUserWithSource[])}
-      renderItem={(contact) => (
-        <div className="d-flex align-items-center">
-          <i className="bi-person-circle me-2" style={{ fontSize: 20 }} />
-          <div className="flex-grow-1">
-            <div className="fw-semibold">{(contact as IUserWithSource).name}</div>
-            <small className="text-muted">{(contact as IUserWithSource).userId}</small>
-          </div>
-        </div>
-      )}
-      renderBadge={(contact) => <span>{(contact as IUserWithSource).name}</span>}
-      selectedItems={props.selected.map((contact) => ({ ...contact, id: contact.userId }))}
-      multiSelect
-      disabled={props.disabled}
-    />
-  );
-}
-
-/** Invite known contacts directly (they get a ready-to-accept invite; no link needed). */
-function InviteContactsCard(props: GroupInvitePanelProps) {
-  const [selected, setSelected] = useState<IUserWithSource[]>([]);
-  const [role, setRole] = useState<GroupMemberRole>(GroupMemberRole.Writer);
-  const [busy, setBusy] = useState(false);
-  const [message, setMessage] = useState<{ ok: boolean; text: string } | undefined>(undefined);
-
-  const send = async () => {
-    setBusy(true);
-    setMessage(undefined);
-    try {
-      const tools = await inviteTools();
-      let queued = 0;
-      for (const contact of selected) {
-        const { result } = await tools.inviteContactToGroup({
-          groupId: props.groupId,
-          userId: contact.userId,
-          role,
-        });
-        if (result.deliveryState === "queued") queued++;
-      }
-      setMessage({
-        ok: true,
-        text:
-          queued > 0
-            ? `Invited ${selected.length}. ${queued} will be delivered when they are reachable.`
-            : `Invited ${selected.length}. They will appear once they accept.`,
-      });
-      setSelected([]);
-    } catch (err) {
-      setMessage({ ok: false, text: (err as Error).message || "Could not send the invite." });
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  return (
-    <div className="row g-2 align-items-start">
-      <div className="col-md-6">
-        <ContactPicker
-          excludeUserIds={props.excludeUserIds}
-          selected={selected}
-          disabled={busy}
-          onChange={setSelected}
-        />
-      </div>
-      <div className="col-md-3">
-        <RoleSelect value={role} max={props.myRole} disabled={busy} onChange={setRole} />
-      </div>
-      <div className="col-md-3">
-        <button
-          type="button"
-          className="btn btn-primary w-100"
-          disabled={busy || selected.length === 0}
-          onClick={() => void send()}
-        >
-          {busy
-            ? "Sending…"
-            : selected.length > 1
-              ? `Invite ${selected.length} contacts`
-              : "Invite contact"}
-        </button>
-      </div>
-      {message ? (
-        <div className="col-12">
-          <div className={`alert py-2 mb-0 ${message.ok ? "alert-success" : "alert-danger"}`}>
-            {message.text}
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-/** Issue a shareable link for people who are not contacts yet. */
-function ShareLinkCard(props: GroupInvitePanelProps) {
-  const [role, setRole] = useState<GroupMemberRole>(GroupMemberRole.Reader);
-  const [mode, setMode] = useState<GroupInviteMode>("approve");
-  const [expiresInMs, setExpiresInMs] = useState(EXPIRY_OPTIONS[1].ms);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
-  const [invite, setInvite] = useState<ICreatedInvite | undefined>(undefined);
-
-  const create = async () => {
-    setBusy(true);
-    setError("");
-    try {
-      const tools = await inviteTools();
-      const { invite: created } = await tools.createGroupInvite({
-        groupId: props.groupId,
-        role,
-        mode,
-        expiresInMs,
-      });
-      setInvite(created);
-    } catch (err) {
-      setError((err as Error).message || "Could not create the link.");
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  if (invite) {
-    return (
-      <InviteShare
-        invite={invite}
-        description={
-          mode === "open"
-            ? "Anyone with this link joins immediately. Revoke it from the pending list when you are done."
-            : "People who use this link appear below as join requests for you to approve."
-        }
-        shareText={`Join ${invite.token.group?.name ?? "my group"} on Peers:`}
-        onDone={() => setInvite(undefined)}
-      />
-    );
-  }
-
-  return (
-    <div className="row g-2 align-items-end">
-      <div className="col-md-3">
-        <label htmlFor="link-role" className="form-label small text-muted mb-1">
-          Role
-        </label>
-        <RoleSelect value={role} max={props.myRole} disabled={busy} onChange={setRole} />
-      </div>
-      <div className="col-md-3">
-        <label htmlFor="link-mode" className="form-label small text-muted mb-1">
-          Approval
-        </label>
-        <select
-          id="link-mode"
-          className="form-select"
-          value={mode}
-          disabled={busy}
-          onChange={(event) => setMode(event.target.value as GroupInviteMode)}
-        >
-          <option value="approve">I approve each join</option>
-          <option value="open">Anyone with the link joins</option>
-        </select>
-      </div>
-      <div className="col-md-3">
-        <label htmlFor="link-expiry" className="form-label small text-muted mb-1">
-          Expires in
-        </label>
-        <select
-          id="link-expiry"
-          className="form-select"
-          value={expiresInMs}
-          disabled={busy}
-          onChange={(event) => setExpiresInMs(Number(event.target.value))}
-        >
-          {EXPIRY_OPTIONS.map((option) => (
-            <option key={option.ms} value={option.ms}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-      </div>
-      <div className="col-md-3">
-        <button
-          type="button"
-          className="btn btn-outline-primary w-100"
-          disabled={busy}
-          onClick={() => void create()}
-        >
-          {busy ? "Creating…" : "Create link"}
-        </button>
-      </div>
-      {error ? (
-        <div className="col-12">
-          <div className="alert alert-danger py-2 mb-0">{error}</div>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-/**
- * Admin controls for growing a group: invite existing contacts first, share a link second,
- * and act on pending join requests. Membership changes land when the other side accepts.
- */
-export function GroupInvitePanel(props: GroupInvitePanelProps) {
-  const [tab, setTab] = useState<"contacts" | "link">("contacts");
-  return (
-    <>
-      <div className="card mb-3">
-        <div className="card-header d-flex align-items-center gap-3">
-          <h6 className="mb-0">Invite people</h6>
-          <div className="btn-group btn-group-sm ms-auto" role="group" aria-label="Invite method">
-            <button
-              type="button"
-              className={`btn ${tab === "contacts" ? "btn-primary" : "btn-outline-primary"}`}
-              onClick={() => setTab("contacts")}
-            >
-              Contacts
-            </button>
-            <button
-              type="button"
-              className={`btn ${tab === "link" ? "btn-primary" : "btn-outline-primary"}`}
-              onClick={() => setTab("link")}
-            >
-              Share a link
-            </button>
-          </div>
-        </div>
-        <div className="card-body">
-          {tab === "contacts" ? <InviteContactsCard {...props} /> : <ShareLinkCard {...props} />}
-        </div>
-      </div>
-      <PendingWorkLink type="group" groupId={props.groupId} />
-    </>
-  );
-}

package/src/screens/groups/group-list.test.tsx

@@ -1,44 +0,0 @@
-import { GroupMemberRole } from "@peers-app/peers-sdk";
-import { render, screen } from "@testing-library/react";
-import { GroupSummaryRow, type IGroupSummary } from "./group-list";
-
-jest.mock("../../globals", () => ({
-  mainContentPath: jest.fn(),
-}));
-
-jest.mock("../../hooks", () => ({
-  usePromise: jest.fn(),
-}));
-
-jest.mock("../invites/activity-view", () => ({
-  PendingWorkLink: () => null,
-}));
-
-const summary: IGroupSummary = {
-  group: {
-    groupId: "zyxwvutsrqponmlkjihgfedcb",
-    name: "Neighborhood",
-    description: "**Local** projects and shared plans",
-    founderUserId: "abcdefghijklmnopqrstuvwxy",
-    publicKey: "signing-key",
-    publicBoxKey: "box-key",
-    signature: "signature",
-  },
-  memberCount: 7,
-  myRole: GroupMemberRole.Admin,
-};
-
-describe("GroupSummaryRow", () => {
-  it("shows description, member count, and local role in a clickable row", () => {
-    render(<GroupSummaryRow summary={summary} />);
-
-    expect(screen.getByText("Neighborhood")).toBeInTheDocument();
-    expect(screen.getByText("Local projects and shared plans")).toBeInTheDocument();
-    expect(screen.getByText("7 members")).toBeInTheDocument();
-    expect(screen.getByText("Admin")).toBeInTheDocument();
-    expect(screen.getByRole("link")).toHaveAttribute(
-      "href",
-      `#identity/groups/${summary.group.groupId}`,
-    );
-  });
-});

package/src/screens/groups/group-list.tsx

@@ -1,317 +0,0 @@
-import {
-  type GroupMemberRole,
-  GroupMembers,
-  Groups,
-  getMe,
-  getRoleLabel,
-  getUserContext,
-  type IGroup,
-  newid,
-  newKeys,
-  saveGroupSecretKey,
-  setUserTrustLevel,
-  TrustLevel,
-  type UserContext,
-  Users,
-} from "@peers-app/peers-sdk";
-import { useEffect, useMemo, useState } from "react";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { mainContentPath } from "../../globals";
-import { usePromise } from "../../hooks";
-import { IDENTITY_GROUP_NEW_PATH, IDENTITY_GROUPS_PATH } from "../identity/identity-routes";
-import { PendingWorkLink } from "../invites/activity-view";
-import { packagesTools } from "../packages/packages-ipc";
-
-/** Search, summarize, and create groups owned by the signed-in user. */
-export function GroupList(props: { creating?: boolean } = {}) {
-  const userContext = usePromise(getUserContext);
-  const [creating, setCreating] = useState(props.creating ?? false);
-  const [draftName, setDraftName] = useState("");
-  const [searchText, setSearchText] = useState("");
-  const [summaries, setSummaries] = useState<IGroupSummary[] | undefined>();
-  const [error, setError] = useState("");
-  const [creatingBusy, setCreatingBusy] = useState(false);
-  const [groupRevision, setGroupRevision] = useState(0);
-
-  useEffect(() => {
-    if (!userContext) {
-      return;
-    }
-    let disposed = false;
-    const subscriptions: Array<{ unsubscribe: () => void }> = [];
-    const refresh = async () => {
-      try {
-        const next = await loadGroupSummaries(userContext);
-        if (!disposed) {
-          setSummaries(next);
-          setError("");
-        }
-      } catch (err) {
-        if (!disposed) {
-          setError((err as Error).message || "Could not load groups.");
-        }
-      }
-    };
-    const table = Groups(userContext.userDataContext);
-    subscriptions.push(table.dataChanged.subscribe(() => setGroupRevision((value) => value + 1)));
-    void table.list({ disabled: { $ne: true } }).then((groups) => {
-      if (disposed) {
-        return;
-      }
-      for (const group of groups) {
-        subscriptions.push(
-          GroupMembers(userContext.getDataContext(group.groupId)).dataChanged.subscribe(
-            () => void refresh(),
-          ),
-        );
-      }
-      void refresh();
-    });
-    return () => {
-      disposed = true;
-      for (const subscription of subscriptions) {
-        subscription.unsubscribe();
-      }
-    };
-  }, [groupRevision, userContext]);
-
-  useEffect(() => {
-    setCreating(props.creating ?? false);
-  }, [props.creating]);
-
-  const filtered = useMemo(() => {
-    const query = searchText.trim().toLocaleLowerCase();
-    if (!query) {
-      return summaries ?? [];
-    }
-    return (summaries ?? []).filter(
-      ({ group }) =>
-        group.name.toLocaleLowerCase().includes(query) ||
-        group.description.toLocaleLowerCase().includes(query),
-    );
-  }, [searchText, summaries]);
-
-  function startCreate() {
-    setDraftName(searchText.trim());
-    mainContentPath(IDENTITY_GROUP_NEW_PATH);
-  }
-
-  async function confirmCreate() {
-    const name = draftName.trim();
-    if (!name) {
-      return;
-    }
-    setCreatingBusy(true);
-    setError("");
-    try {
-      setDraftName("");
-      setSearchText("");
-      await newRecord(name);
-    } catch (err) {
-      setError((err as Error).message || "Could not create the group.");
-    } finally {
-      setCreatingBusy(false);
-    }
-  }
-
-  async function newRecord(name: string) {
-    const userContext = await getUserContext();
-    const groupName = name.trim();
-    const groupId = newid();
-
-    // Generate cryptographic keys for the group
-    const groupKeys = newKeys();
-
-    // NOTE: this is relying on the userContext to be able to create a group context for a group that doesn't yet exist
-    //       at time of writing, this is supported but is probably unintuitive behavior so we need to watch for this changing in the future
-    const groupDataContext = userContext.getDataContext(groupId);
-
-    // Store the validated secret under its deterministic persistent-variable ID.
-    await saveGroupSecretKey(userContext.userDataContext, groupId, groupKeys.secretKey, groupKeys);
-
-    // add me to the group's users table
-    const me = await getMe();
-    await Users(groupDataContext).save(me);
-
-    // Set trust level for current user in the group context
-    await setUserTrustLevel(me.userId, TrustLevel.Trusted, groupDataContext);
-
-    // create group in both the user's and group's context
-    const group = await Groups(userContext.userDataContext).signAndSave({
-      groupId,
-      name: groupName,
-      description: "",
-      iconClassName: "bi-people-fill", // Default icon
-      founderUserId: me.userId,
-      disabled: false,
-      publicKey: groupKeys.publicKey,
-      publicBoxKey: groupKeys.publicBoxKey,
-      signature: "", // will be set via signAndSave
-    });
-    await Groups(groupDataContext).signAndSave(group);
-
-    // Auto-install peers-core for the new group
-    await packagesTools(groupId)
-      .then((tools) => tools.installDefaultPackages())
-      .catch((err: unknown) => {
-        console.error("Error auto-installing peers-core for group:", err);
-      });
-
-    mainContentPath(`${IDENTITY_GROUPS_PATH}/${group.groupId}`);
-    return group;
-  }
-
-  return (
-    <div className="container-xxl p-3">
-      <div className="mb-3">
-        <h4 className="mb-1">
-          <i className="bi-people-fill me-2" />
-          Groups
-        </h4>
-        <div className="small text-muted">Shared spaces, membership, and access</div>
-      </div>
-      {creating ? (
-        <div className="card mb-3">
-          <div className="card-body">
-            <h6 className="card-title">Create a group</h6>
-            <form
-              className="input-group"
-              onSubmit={(event) => {
-                event.preventDefault();
-                void confirmCreate();
-              }}
-            >
-              <input
-                id="new-group-name"
-                className="form-control"
-                value={draftName}
-                onChange={(event) => setDraftName(event.target.value)}
-                placeholder="Group name"
-                aria-label="Group name"
-              />
-              <button
-                type="submit"
-                className="btn btn-primary"
-                disabled={!draftName.trim() || creatingBusy}
-              >
-                {creatingBusy ? "Creating…" : "Create"}
-              </button>
-              <a href={`#${IDENTITY_GROUPS_PATH}`} className="btn btn-outline-secondary">
-                Cancel
-              </a>
-            </form>
-          </div>
-        </div>
-      ) : null}
-      <PendingWorkLink type="group" />
-      <div className="position-relative my-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 groups"
-          aria-label="Search groups"
-        />
-      </div>
-
-      {error ? <div className="alert alert-danger">{error}</div> : null}
-      {!summaries && !error ? <LoadingIndicator /> : null}
-      {summaries && filtered.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 groups" : "No groups yet"}</h6>
-          <p className="small text-muted">
-            {searchText
-              ? "Try a different name or description."
-              : "Create a shared space or use an invite to join one."}
-          </p>
-          {!searchText ? (
-            <button type="button" className="btn btn-primary btn-sm" onClick={startCreate}>
-              Create your first group
-            </button>
-          ) : null}
-        </div>
-      ) : null}
-      {filtered.length > 0 ? (
-        <div className="list-group">
-          {filtered.map((summary) => (
-            <GroupSummaryRow key={summary.group.groupId} summary={summary} />
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-/** Data shown for one group in the Identity list. */
-export interface IGroupSummary {
-  /** Signed group record. */
-  group: IGroup;
-  /** Number of active memberships. */
-  memberCount: number;
-  /** Signed-in user's role in this group. */
-  myRole?: GroupMemberRole;
-}
-
-async function loadGroupSummaries(userContext: UserContext): Promise<IGroupSummary[]> {
-  const groups = await Groups(userContext.userDataContext).list({ disabled: { $ne: true } });
-  const summaries = await Promise.all(
-    groups.map(async (group) => {
-      const members = await GroupMembers(userContext.getDataContext(group.groupId)).list({
-        deleted: { $ne: true },
-      });
-      return {
-        group,
-        memberCount: members.length,
-        myRole: members.find((member) => member.userId === userContext.userId)?.role,
-      };
-    }),
-  );
-  return summaries.sort((left, right) => left.group.name.localeCompare(right.group.name));
-}
-
-/** Compact, fully clickable group summary row. */
-export function GroupSummaryRow({ summary }: { summary: IGroupSummary }) {
-  const { group } = summary;
-  return (
-    <a
-      href={`#${IDENTITY_GROUPS_PATH}/${group.groupId}`}
-      className="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3"
-    >
-      <span
-        className="rounded-3 bg-body-secondary d-inline-flex align-items-center justify-content-center flex-shrink-0"
-        style={{ width: 44, height: 44 }}
-        aria-hidden="true"
-      >
-        <i className={group.iconClassName || "bi bi-people-fill"} />
-      </span>
-      <span className="flex-grow-1 overflow-hidden">
-        <span className="fw-semibold d-block text-truncate">{group.name || "Unnamed group"}</span>
-        <span className="small text-muted d-block text-truncate">
-          {plainDescription(group.description) || "No description yet"}
-        </span>
-      </span>
-      <span className="d-flex align-items-center gap-2 flex-wrap justify-content-end">
-        <span className="badge text-bg-light border">
-          {summary.memberCount} member{summary.memberCount === 1 ? "" : "s"}
-        </span>
-        {summary.myRole !== undefined ? (
-          <span className="badge text-bg-secondary">{getRoleLabel(summary.myRole)}</span>
-        ) : null}
-      </span>
-      <i className="bi bi-chevron-right text-muted" aria-hidden="true" />
-    </a>
-  );
-}
-
-function plainDescription(markdown: string): string {
-  return markdown
-    .replace(/[#_*`>[\]()!-]/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-}