@peers-app/peers-ui 0.23.14 → 0.25.0

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

@@ -1,5 +1,4 @@
 import {
-  checkQRCodeCompatibility,
   copyToClipboard,
   Groups,
   generateGroupShare,
@@ -166,7 +165,6 @@ const ShareButton = ({ groupId }: { groupId: string }) => {
   const [shareResult, setShareResult] = useState<{
     success: boolean;
     message: string;
-    qrInfo?: ReturnType<typeof checkQRCodeCompatibility>;
   } | null>(null);
 
   const handleShare = async () => {
@@ -177,9 +175,6 @@ const ShareButton = ({ groupId }: { groupId: string }) => {
       // Generate the group share data
       const groupShare = await generateGroupShare(groupId);
 
-      // Check QR code compatibility
-      const qrInfo = checkQRCodeCompatibility(groupShare, 20);
-
       // Convert to JSON
       const groupShareJson = JSON.stringify(groupShare, null, 2);
 
@@ -189,14 +184,12 @@ const ShareButton = ({ groupId }: { groupId: string }) => {
       if (copied) {
         setShareResult({
           success: true,
-          message: `Group share data copied to clipboard! (${qrInfo.size} chars, ${qrInfo.memberCount} admin members)`,
-          qrInfo,
+          message: `Group share data copied to clipboard! (${groupShareJson.length} chars, ${groupShare.groupMembers.length} admin members)`,
         });
       } else {
         setShareResult({
           success: false,
           message: "Failed to copy to clipboard. Please copy manually from the modal.",
-          qrInfo,
         });
       }
     } catch (error: unknown) {
@@ -256,39 +249,6 @@ const ShareButton = ({ groupId }: { groupId: string }) => {
             <div className="card-body">
               <p className="mb-3">{shareResult.message}</p>
 
-              {shareResult.qrInfo && (
-                <div className="mb-3">
-                  <h6>QR Code Compatibility</h6>
-                  <div className="row g-2">
-                    <div className="col-6">
-                      <small className="text-muted">Size:</small>
-                      <br />
-                      <strong>{shareResult.qrInfo.size} chars</strong>
-                    </div>
-                    <div className="col-6">
-                      <small className="text-muted">QR Version 20:</small>
-                      <br />
-                      <span
-                        className={`badge bg-${shareResult.qrInfo.fits ? "success" : "warning"}`}
-                      >
-                        {shareResult.qrInfo.fits ? "✓ Fits" : "⚠ Too Large"} (
-                        {shareResult.qrInfo.usagePercent}%)
-                      </span>
-                    </div>
-                  </div>
-
-                  {!shareResult.qrInfo.fits && (
-                    <div className="alert alert-warning mt-2 mb-0">
-                      <small>
-                        <i className="bi-exclamation-triangle me-1"></i>
-                        Data may be too large for standard QR codes. Consider reducing admin members
-                        or use text sharing.
-                      </small>
-                    </div>
-                  )}
-                </div>
-              )}
-
               <div className="text-end">
                 <button className="btn btn-secondary me-2" onClick={() => setShareResult(null)}>
                   Close

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

@@ -0,0 +1,316 @@
+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 { InviteShare } from "../invites/invite-share";
+import { inviteTools } from "../invites/invites-ipc";
+import { PendingInvitesList } from "../invites/pending-invites-list";
+
+/** 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>
+      <PendingInvitesList
+        type="group"
+        groupId={props.groupId}
+        hideWhenEmpty
+        title="Pending invites and join requests"
+      />
+    </>
+  );
+}

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

@@ -7,7 +7,6 @@ import {
   getUserContext,
   getUserRole,
   type IUser,
-  type IUserWithSource,
   setUserTrustLevel,
   TrustLevel,
   type UserContext,
@@ -17,9 +16,8 @@ import {
 import React from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { TrustLevelBadge } from "../../components/trust-level-badge";
-import { Typeahead, type TypeaheadItem } from "../../components/typeahead";
 import { usePromise } from "../../hooks";
-import { GroupInviteListener } from "./group-invite-listener";
+import { GroupInvitePanel } from "./group-invite-panel";
 
 interface GroupMembersUIProps {
   groupId: string;
@@ -148,120 +146,13 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
     [groupId, refreshKey],
   );
 
-  const [newMemberRole, setNewMemberRole] = React.useState<GroupMemberRole>(GroupMemberRole.Reader);
-  const [addingMember, setAddingMember] = React.useState(false);
-  const [selectedContacts, setSelectedContacts] = React.useState<IUserWithSource[]>([]);
-
-  // Search function for typeahead
-  const searchContacts = async (query: string): Promise<(IUserWithSource & TypeaheadItem)[]> => {
-    try {
-      const cursor = await usersCursor(
-        { name: { $matchWords: query } },
-        { includeTrustLevel: true },
-      );
-      const results: IUserWithSource[] = [];
-
-      // Get first 10 results
-      for await (const contact of cursor) {
-        results.push(contact);
-        if (results.length >= 10) break;
-      }
-
-      // Filter out users who are already members
-      const currentMembers = membersData?.map((m) => m.member.userId) || [];
-      const filteredResults = results.filter((contact) => !currentMembers.includes(contact.userId));
-
-      return filteredResults.map((contact) => ({
-        ...contact,
-        id: contact.userId,
-      }));
-    } catch (error) {
-      console.error("Error searching contacts:", error);
-      return [];
-    }
-  };
-
-  // Render function for typeahead results
-  const renderContactItem = (contact: IUserWithSource & TypeaheadItem, _isSelected: boolean) => (
-    <div className="d-flex align-items-center">
-      <i className="bi-person-circle me-2" style={{ fontSize: "20px" }} />
-      <div className="flex-grow-1">
-        <div className="fw-semibold">{contact.name}</div>
-        <small className="text-muted">{contact.userId}</small>
-      </div>
-      <div>
-        <small className="text-info">
-          <i className={`bi-${getSourceIcon(contact.source)} me-1`} />
-          {getSourceLabel(contact.source)}
-        </small>
-      </div>
-    </div>
-  );
-
-  // Helper functions for contact sources
-  const getSourceLabel = (source: string) => {
-    switch (source) {
-      case "userDataContext":
-        return "Personal";
-      case "currentDataContext":
-        return "Current";
-      case "otherDataContexts":
-        return "Groups";
-      default:
-        return source;
-    }
-  };
-
-  const getSourceIcon = (source: string) => {
-    switch (source) {
-      case "userDataContext":
-        return "person-fill";
-      case "currentDataContext":
-        return "house-fill";
-      case "otherDataContexts":
-        return "people-fill";
-      default:
-        return "question-circle";
-    }
-  };
-
-  const addMember = async () => {
-    if (selectedContacts.length === 0) return;
-
-    setAddingMember(true);
-    try {
-      // Add all selected contacts with the chosen role
-      for (const contact of selectedContacts) {
-        let member = await groupMembersTable.findOne({ userId: contact.userId, groupId });
-        if (member) {
-          member.role = newMemberRole;
-          member.deleted = false;
-        } else {
-          member = await groupMembersTable.initRecord({
-            groupId: groupId,
-            userId: contact.userId,
-            role: newMemberRole,
-          });
-        }
-        await groupMembersTable.signAndSave(member);
-      }
-
-      // Reset form
-      setSelectedContacts([]);
-      setNewMemberRole(GroupMemberRole.Reader);
-
-      // Refresh the members list
-      setRefreshKey((prev) => prev + 1);
-    } catch (err) {
-      console.error("Failed to add member:", err);
-      alert("Failed to add member. They may already be in the group.");
-    } finally {
-      setAddingMember(false);
-    }
-  };
-
-  // Render function for contact badges
-  const renderContactBadge = (contact: IUserWithSource) => <span>{contact.name}</span>;
+  // Refresh the member list when an accepted invite adds a membership row.
+  React.useEffect(() => {
+    const sub = groupMembersTable.dataChanged.subscribe(() => setRefreshKey((prev) => prev + 1));
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [groupMembersTable]);
 
   const updateRole = async (memberId: string, newRole: GroupMemberRole) => {
     try {
@@ -322,64 +213,13 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
         </div>
       </div>
 
-      {/* Group Invite Listener - Only for admins/owners */}
-      {canEdit && <GroupInviteListener groupId={groupId} userContext={userContext} />}
-
-      {/* Add New Member - Only for admins/owners */}
+      {/* Invite people - Only for admins/owners */}
       {canEdit && (
-        <div className="card mb-3">
-          <div className="card-body">
-            <h6 className="card-title">Add Existing Contact as Member</h6>
-            <div className="row g-2">
-              <div className="col-md-6">
-                <Typeahead
-                  placeholder="Search contacts to add..."
-                  searchFn={searchContacts}
-                  onSelectionChange={(items) => setSelectedContacts(items as IUserWithSource[])}
-                  renderItem={renderContactItem}
-                  renderBadge={renderContactBadge}
-                  selectedItems={selectedContacts.map((contact) => ({
-                    ...contact,
-                    id: contact.userId,
-                  }))}
-                  multiSelect={true}
-                  disabled={addingMember}
-                />
-              </div>
-              <div className="col-md-3">
-                <select
-                  className="form-select"
-                  value={newMemberRole}
-                  onChange={(e) =>
-                    setNewMemberRole(Number(e.target.value) || (0 as GroupMemberRole))
-                  }
-                  disabled={addingMember}
-                >
-                  <option value={GroupMemberRole.None}>None</option>
-                  <option value={GroupMemberRole.Reader}>Reader</option>
-                  <option value={GroupMemberRole.Writer}>Writer</option>
-                  <option value={GroupMemberRole.Admin}>Admin</option>
-                  <option value={GroupMemberRole.Owner}>Owner</option>
-                </select>
-              </div>
-              <div className="col-md-3">
-                <button
-                  className="btn btn-primary w-100"
-                  onClick={addMember}
-                  disabled={addingMember || selectedContacts.length === 0}
-                >
-                  {addingMember
-                    ? "Adding..."
-                    : selectedContacts.length === 1
-                      ? "Add Member"
-                      : selectedContacts.length > 1
-                        ? `Add ${selectedContacts.length} Members`
-                        : "Add"}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
+        <GroupInvitePanel
+          groupId={groupId}
+          excludeUserIds={membersData.map((m) => m.member.userId)}
+          myRole={userRole}
+        />
       )}
 
       {!canEdit && userRole && (
@@ -391,9 +231,7 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
 
       {/* Members List */}
       {membersData.length === 0 ? (
-        <div className="alert alert-info">
-          No members in this group yet. Add the first member above.
-        </div>
+        <div className="alert alert-info">No members in this group yet. Invite someone above.</div>
       ) : (
         <div className="list-group">
           {membersData.map(({ member, user }) => (