@peers-app/peers-ui 0.23.13 → 0.24.0

package/dist/screens/groups/group-invite-panel.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupInvitePanel = GroupInvitePanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+const typeahead_1 = require("../../components/typeahead");
+const invite_share_1 = require("../invites/invite-share");
+const invites_ipc_1 = require("../invites/invites-ipc");
+const pending_invites_list_1 = require("../invites/pending-invites-list");
+const ROLE_OPTIONS = [
+    { value: peers_sdk_1.GroupMemberRole.Reader, label: "Reader" },
+    { value: peers_sdk_1.GroupMemberRole.Writer, label: "Writer" },
+    { value: peers_sdk_1.GroupMemberRole.Admin, label: "Admin" },
+    { value: peers_sdk_1.GroupMemberRole.Owner, label: "Owner" },
+];
+const EXPIRY_OPTIONS = [
+    { 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) {
+    return ((0, jsx_runtime_1.jsx)("select", { className: "form-select", value: props.value, disabled: props.disabled, onChange: (event) => props.onChange(Number(event.target.value)), "aria-label": "Role", children: ROLE_OPTIONS.filter((option) => option.value <= props.max).map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.value))) }));
+}
+function ContactPicker(props) {
+    const search = async (query) => {
+        const cursor = await (0, peers_sdk_1.usersCursor)({ name: { $matchWords: query } }, { includeTrustLevel: true });
+        const results = [];
+        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 ((0, jsx_runtime_1.jsx)(typeahead_1.Typeahead, { placeholder: "Search contacts\u2026", searchFn: search, onSelectionChange: (items) => props.onChange(items), renderItem: (contact) => ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-circle me-2", style: { fontSize: 20 } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: contact.name }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: contact.userId })] })] })), renderBadge: (contact) => (0, jsx_runtime_1.jsx)("span", { children: contact.name }), selectedItems: props.selected.map((contact) => ({ ...contact, id: contact.userId })), multiSelect: true, disabled: props.disabled }));
+}
+/** Invite known contacts directly (they get a ready-to-accept invite; no link needed). */
+function InviteContactsCard(props) {
+    const [selected, setSelected] = (0, react_1.useState)([]);
+    const [role, setRole] = (0, react_1.useState)(peers_sdk_1.GroupMemberRole.Writer);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [message, setMessage] = (0, react_1.useState)(undefined);
+    const send = async () => {
+        setBusy(true);
+        setMessage(undefined);
+        try {
+            const tools = await (0, invites_ipc_1.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.message || "Could not send the invite." });
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "row g-2 align-items-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-6", children: (0, jsx_runtime_1.jsx)(ContactPicker, { excludeUserIds: props.excludeUserIds, selected: selected, disabled: busy, onChange: setSelected }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-3", children: (0, jsx_runtime_1.jsx)(RoleSelect, { value: role, max: props.myRole, disabled: busy, onChange: setRole }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-3", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary w-100", disabled: busy || selected.length === 0, onClick: () => void send(), children: busy
+                        ? "Sending…"
+                        : selected.length > 1
+                            ? `Invite ${selected.length} contacts`
+                            : "Invite contact" }) }), message ? ((0, jsx_runtime_1.jsx)("div", { className: "col-12", children: (0, jsx_runtime_1.jsx)("div", { className: `alert py-2 mb-0 ${message.ok ? "alert-success" : "alert-danger"}`, children: message.text }) })) : null] }));
+}
+/** Issue a shareable link for people who are not contacts yet. */
+function ShareLinkCard(props) {
+    const [role, setRole] = (0, react_1.useState)(peers_sdk_1.GroupMemberRole.Reader);
+    const [mode, setMode] = (0, react_1.useState)("approve");
+    const [expiresInMs, setExpiresInMs] = (0, react_1.useState)(EXPIRY_OPTIONS[1].ms);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)("");
+    const [invite, setInvite] = (0, react_1.useState)(undefined);
+    const create = async () => {
+        setBusy(true);
+        setError("");
+        try {
+            const tools = await (0, invites_ipc_1.inviteTools)();
+            const { invite: created } = await tools.createGroupInvite({
+                groupId: props.groupId,
+                role,
+                mode,
+                expiresInMs,
+            });
+            setInvite(created);
+        }
+        catch (err) {
+            setError(err.message || "Could not create the link.");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    if (invite) {
+        return ((0, jsx_runtime_1.jsx)(invite_share_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "row g-2 align-items-end", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-3", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "link-role", className: "form-label small text-muted mb-1", children: "Role" }), (0, jsx_runtime_1.jsx)(RoleSelect, { value: role, max: props.myRole, disabled: busy, onChange: setRole })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-3", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "link-mode", className: "form-label small text-muted mb-1", children: "Approval" }), (0, jsx_runtime_1.jsxs)("select", { id: "link-mode", className: "form-select", value: mode, disabled: busy, onChange: (event) => setMode(event.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "approve", children: "I approve each join" }), (0, jsx_runtime_1.jsx)("option", { value: "open", children: "Anyone with the link joins" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-3", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "link-expiry", className: "form-label small text-muted mb-1", children: "Expires in" }), (0, jsx_runtime_1.jsx)("select", { id: "link-expiry", className: "form-select", value: expiresInMs, disabled: busy, onChange: (event) => setExpiresInMs(Number(event.target.value)), children: EXPIRY_OPTIONS.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.ms, children: option.label }, option.ms))) })] }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-3", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary w-100", disabled: busy, onClick: () => void create(), children: busy ? "Creating…" : "Create link" }) }), error ? ((0, jsx_runtime_1.jsx)("div", { className: "col-12", children: (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger py-2 mb-0", children: error }) })) : null] }));
+}
+/**
+ * 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.
+ */
+function GroupInvitePanel(props) {
+    const [tab, setTab] = (0, react_1.useState)("contacts");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "card mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsx)("h6", { className: "mb-0", children: "Invite people" }), (0, jsx_runtime_1.jsxs)("div", { className: "btn-group btn-group-sm ms-auto", role: "group", "aria-label": "Invite method", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: `btn ${tab === "contacts" ? "btn-primary" : "btn-outline-primary"}`, onClick: () => setTab("contacts"), children: "Contacts" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: `btn ${tab === "link" ? "btn-primary" : "btn-outline-primary"}`, onClick: () => setTab("link"), children: "Share a link" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card-body", children: tab === "contacts" ? (0, jsx_runtime_1.jsx)(InviteContactsCard, { ...props }) : (0, jsx_runtime_1.jsx)(ShareLinkCard, { ...props }) })] }), (0, jsx_runtime_1.jsx)(pending_invites_list_1.PendingInvitesList, { type: "group", groupId: props.groupId, hideWhenEmpty: true, title: "Pending invites and join requests" })] }));
+}

package/dist/screens/groups/group-members.js

@@ -9,9 +9,8 @@ const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = __importDefault(require("react"));
 const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
-const typeahead_1 = require("../../components/typeahead");
 const hooks_1 = require("../../hooks");
-const group_invite_listener_1 = require("./group-invite-listener");
+const group_invite_panel_1 = require("./group-invite-panel");
 const GroupMembersUI = (props) => {
     const { groupId, userContext } = props;
     // Get the group's data context and tables
@@ -99,97 +98,13 @@ const GroupMembersUI = (props) => {
             founderUserId: group.founderUserId,
         };
     }, undefined, [groupId, refreshKey]);
-    const [newMemberRole, setNewMemberRole] = react_1.default.useState(peers_sdk_1.GroupMemberRole.Reader);
-    const [addingMember, setAddingMember] = react_1.default.useState(false);
-    const [selectedContacts, setSelectedContacts] = react_1.default.useState([]);
-    // Search function for typeahead
-    const searchContacts = async (query) => {
-        try {
-            const cursor = await (0, peers_sdk_1.usersCursor)({ name: { $matchWords: query } }, { includeTrustLevel: true });
-            const results = [];
-            // 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, _isSelected) => ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-circle me-2", style: { fontSize: "20px" } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: contact.name }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: contact.userId })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("small", { className: "text-info", children: [(0, jsx_runtime_1.jsx)("i", { className: `bi-${getSourceIcon(contact.source)} me-1` }), getSourceLabel(contact.source)] }) })] }));
-    // Helper functions for contact sources
-    const getSourceLabel = (source) => {
-        switch (source) {
-            case "userDataContext":
-                return "Personal";
-            case "currentDataContext":
-                return "Current";
-            case "otherDataContexts":
-                return "Groups";
-            default:
-                return source;
-        }
-    };
-    const getSourceIcon = (source) => {
-        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(peers_sdk_1.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) => (0, jsx_runtime_1.jsx)("span", { children: contact.name });
+    // Refresh the member list when an accepted invite adds a membership row.
+    react_1.default.useEffect(() => {
+        const sub = groupMembersTable.dataChanged.subscribe(() => setRefreshKey((prev) => prev + 1));
+        return () => {
+            sub.unsubscribe();
+        };
+    }, [groupMembersTable]);
     const updateRole = async (memberId, newRole) => {
         try {
             const member = await groupMembersTable.get(memberId);
@@ -220,16 +135,7 @@ const GroupMembersUI = (props) => {
         return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
     const { canEdit, userRole, currentUserId } = userPermissions;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("h6", { className: "mb-0", children: "Group Members" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: `alert alert-${userRole ? "primary" : "warning"} py-2 px-3 mb-0 d-flex align-items-center`, children: [(0, jsx_runtime_1.jsx)("i", { className: `bi ${userRole ? "bi-person-badge" : "bi-exclamation-triangle"} me-2` }), (0, jsx_runtime_1.jsxs)("strong", { children: ["Your role: ", (0, peers_sdk_1.getRoleLabel)(userRole)] })] }), founderData && founderData.founderUserId !== currentUserId && ((0, jsx_runtime_1.jsxs)("a", { href: `#contacts/${founderData.founderUserId}`, className: "alert alert-warning py-2 px-3 mb-0 d-flex align-items-center text-decoration-none", style: { cursor: "pointer" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-crown-fill me-2" }), (0, jsx_runtime_1.jsxs)("strong", { children: ["Founder: ", founderData.founderUser?.name || founderData.founderUserId] })] }))] })] }), canEdit && (0, jsx_runtime_1.jsx)(group_invite_listener_1.GroupInviteListener, { groupId: groupId, userContext: userContext }), canEdit && ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h6", { className: "card-title", children: "Add Existing Contact as Member" }), (0, jsx_runtime_1.jsxs)("div", { className: "row g-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-6", children: (0, jsx_runtime_1.jsx)(typeahead_1.Typeahead, { placeholder: "Search contacts to add...", searchFn: searchContacts, onSelectionChange: (items) => setSelectedContacts(items), renderItem: renderContactItem, renderBadge: renderContactBadge, selectedItems: selectedContacts.map((contact) => ({
-                                            ...contact,
-                                            id: contact.userId,
-                                        })), multiSelect: true, disabled: addingMember }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-3", children: (0, jsx_runtime_1.jsxs)("select", { className: "form-select", value: newMemberRole, onChange: (e) => setNewMemberRole(Number(e.target.value) || 0), disabled: addingMember, children: [(0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.None, children: "None" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Reader, children: "Reader" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Writer, children: "Writer" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Admin, children: "Admin" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Owner, children: "Owner" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-3", children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary w-100", onClick: addMember, disabled: addingMember || selectedContacts.length === 0, children: addingMember
-                                            ? "Adding..."
-                                            : selectedContacts.length === 1
-                                                ? "Add Member"
-                                                : selectedContacts.length > 1
-                                                    ? `Add ${selectedContacts.length} Members`
-                                                    : "Add" }) })] })] }) })), !canEdit && userRole && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-info", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-info-circle me-2" }), "You can view group members, but only admins and owners can manage membership."] })), membersData.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-info", children: "No members in this group yet. Add the first member above." })) : ((0, jsx_runtime_1.jsx)("div", { className: "list-group", children: membersData.map(({ member, user }) => ((0, jsx_runtime_1.jsx)("div", { className: "list-group-item", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-fill me-2" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsxs)("strong", { children: [user?.name || member.userId, member.userId === currentUserId && " (You)"] }), user?.source === "userDataContext" && ((0, jsx_runtime_1.jsxs)("span", { className: "badge bg-info ms-2", style: { fontSize: "0.7rem" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person me-1" }), "Personal"] })), user?.source === "otherDataContexts" && ((0, jsx_runtime_1.jsxs)("span", { className: "badge bg-secondary ms-2", style: { fontSize: "0.7rem" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-people me-1" }), "Other Groups"] }))] }), user && user.userId !== user.name && ((0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block", children: member.userId }))] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "me-2", children: (0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: user?.trustLevel || peers_sdk_1.TrustLevel.Unknown }) }), (0, jsx_runtime_1.jsxs)("a", { href: `#contacts/${member.userId}`, className: "btn btn-outline-primary btn-sm me-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-eye me-1" }), "View"] }), canEdit ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm me-2", style: { width: "120px" }, value: member.role, onChange: (e) => updateRole(member.groupMemberId, Number(e.target.value) || 0), children: [(0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.None, children: "None" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Reader, children: "Reader" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Writer, children: "Writer" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Admin, children: "Admin" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Owner, children: "Owner" })] }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-danger btn-sm", onClick: () => removeMember(member.groupMemberId), title: "Remove member", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-trash" }) })] })) : (
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("h6", { className: "mb-0", children: "Group Members" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: `alert alert-${userRole ? "primary" : "warning"} py-2 px-3 mb-0 d-flex align-items-center`, children: [(0, jsx_runtime_1.jsx)("i", { className: `bi ${userRole ? "bi-person-badge" : "bi-exclamation-triangle"} me-2` }), (0, jsx_runtime_1.jsxs)("strong", { children: ["Your role: ", (0, peers_sdk_1.getRoleLabel)(userRole)] })] }), founderData && founderData.founderUserId !== currentUserId && ((0, jsx_runtime_1.jsxs)("a", { href: `#contacts/${founderData.founderUserId}`, className: "alert alert-warning py-2 px-3 mb-0 d-flex align-items-center text-decoration-none", style: { cursor: "pointer" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-crown-fill me-2" }), (0, jsx_runtime_1.jsxs)("strong", { children: ["Founder: ", founderData.founderUser?.name || founderData.founderUserId] })] }))] })] }), canEdit && ((0, jsx_runtime_1.jsx)(group_invite_panel_1.GroupInvitePanel, { groupId: groupId, excludeUserIds: membersData.map((m) => m.member.userId), myRole: userRole })), !canEdit && userRole && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-info", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-info-circle me-2" }), "You can view group members, but only admins and owners can manage membership."] })), membersData.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-info", children: "No members in this group yet. Invite someone above." })) : ((0, jsx_runtime_1.jsx)("div", { className: "list-group", children: membersData.map(({ member, user }) => ((0, jsx_runtime_1.jsx)("div", { className: "list-group-item", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-fill me-2" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsxs)("strong", { children: [user?.name || member.userId, member.userId === currentUserId && " (You)"] }), user?.source === "userDataContext" && ((0, jsx_runtime_1.jsxs)("span", { className: "badge bg-info ms-2", style: { fontSize: "0.7rem" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person me-1" }), "Personal"] })), user?.source === "otherDataContexts" && ((0, jsx_runtime_1.jsxs)("span", { className: "badge bg-secondary ms-2", style: { fontSize: "0.7rem" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-people me-1" }), "Other Groups"] }))] }), user && user.userId !== user.name && ((0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block", children: member.userId }))] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "me-2", children: (0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: user?.trustLevel || peers_sdk_1.TrustLevel.Unknown }) }), (0, jsx_runtime_1.jsxs)("a", { href: `#contacts/${member.userId}`, className: "btn btn-outline-primary btn-sm me-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-eye me-1" }), "View"] }), canEdit ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm me-2", style: { width: "120px" }, value: member.role, onChange: (e) => updateRole(member.groupMemberId, Number(e.target.value) || 0), children: [(0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.None, children: "None" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Reader, children: "Reader" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Writer, children: "Writer" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Admin, children: "Admin" }), (0, jsx_runtime_1.jsx)("option", { value: peers_sdk_1.GroupMemberRole.Owner, children: "Owner" })] }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-danger btn-sm", onClick: () => removeMember(member.groupMemberId), title: "Remove member", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-trash" }) })] })) : (
                                     /* Read-only role display for non-admins */
                                     (0, jsx_runtime_1.jsx)("span", { className: "badge bg-secondary text-capitalize", children: (0, peers_sdk_1.getRoleLabel)(member.role) }))] })] }) }, member.groupMemberId))) })), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Roles:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("strong", { children: "Reader:" }), " Can view group content", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("strong", { children: "Writer:" }), " Can create and edit content", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("strong", { children: "Admin:" }), " Can manage members and settings", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("strong", { children: "Owner:" }), " Full control including group deletion"] }) })] }));
 };

package/dist/screens/invites/accept-invite.d.ts

@@ -0,0 +1,11 @@
+/** Props for {@link AcceptInvite}. */
+export interface AcceptInviteProps {
+    /** Token to preview immediately (e.g. from a deep link); otherwise the paste box is shown. */
+    initialToken?: string;
+    onDone?: () => void;
+}
+/**
+ * Paste or scan an invite, review what it grants, then accept it. Also consumes a token
+ * captured from a link or `peers://` open before this screen mounted.
+ */
+export declare function AcceptInvite(props: AcceptInviteProps): import("react/jsx-runtime").JSX.Element;

package/dist/screens/invites/accept-invite.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AcceptInvite = AcceptInvite;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+const qr_scanner_1 = require("../../components/qr-scanner");
+const globals_1 = require("../../globals");
+const invite_capture_1 = require("./invite-capture");
+const invites_ipc_1 = require("./invites-ipc");
+const TRUST_OPTIONS = [
+    { value: peers_sdk_1.TrustLevel.NewUser, label: "New user (default)" },
+    { value: peers_sdk_1.TrustLevel.Known, label: "Known" },
+    { value: peers_sdk_1.TrustLevel.Trusted, label: "Trusted" },
+];
+function PreviewCard(props) {
+    const { preview } = props;
+    const inviter = preview.inviter.displayName || preview.inviter.userId;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title mb-2", children: preview.type === "group" ? `Join ${preview.group?.name}` : `Connect with ${inviter}` }), (0, jsx_runtime_1.jsxs)("div", { className: "small text-muted", children: ["From ", (0, jsx_runtime_1.jsx)("strong", { children: inviter }), preview.knownContact ? " (already a contact)" : ""] }), preview.group ? ((0, jsx_runtime_1.jsxs)("div", { className: "small text-muted", children: ["You would join as ", (0, jsx_runtime_1.jsx)("strong", { children: (0, peers_sdk_1.getRoleLabel)(preview.group.role) }), preview.group.mode === "open" ? " · joins immediately" : " · the inviter must approve", preview.group.alreadyMember ? " · you are already a member" : ""] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: `small ${preview.expired ? "text-danger" : "text-muted"}`, children: [preview.expired ? "Expired " : "Expires ", new Date(preview.expiresAt).toLocaleString()] })] }) }));
+}
+function ResultPanel(props) {
+    const { result, preview } = props;
+    const accepted = result.status === "accepted";
+    const message = accepted
+        ? preview.type === "group"
+            ? `You joined ${preview.group?.name}.`
+            : "Contact added."
+        : preview.type === "group"
+            ? "Join request sent. You will be added once it is approved."
+            : "Request sent. They will see it and confirm.";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsxs)("output", { className: `alert d-block ${accepted ? "alert-success" : "alert-info"}`, children: [message, result.deliveryState === "queued" ? ((0, jsx_runtime_1.jsx)("div", { className: "small mt-1", children: "Queued until the other person is reachable." })) : null] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [accepted && result.groupId ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: () => (0, globals_1.mainContentPath)(`groups/${result.groupId}`), children: "Open group" })) : null, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onDone, children: "Done" })] })] }));
+}
+/**
+ * Paste or scan an invite, review what it grants, then accept it. Also consumes a token
+ * captured from a link or `peers://` open before this screen mounted.
+ */
+function AcceptInvite(props) {
+    const [text, setText] = (0, react_1.useState)(props.initialToken ?? "");
+    const [scanning, setScanning] = (0, react_1.useState)(false);
+    const [preview, setPreview] = (0, react_1.useState)(undefined);
+    const [result, setResult] = (0, react_1.useState)(undefined);
+    const [trustLevel, setTrustLevel] = (0, react_1.useState)(peers_sdk_1.TrustLevel.NewUser);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)("");
+    const runPreview = (0, react_1.useCallback)(async (token) => {
+        setError("");
+        setBusy(true);
+        try {
+            const tools = await (0, invites_ipc_1.inviteTools)();
+            const response = await tools.previewInvite({ token });
+            setPreview(response.preview);
+            setText(token);
+        }
+        catch (err) {
+            setPreview(undefined);
+            setError(err.message || "That is not a valid invite.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }, []);
+    // Deep-linked tokens: one stashed before mount, or one arriving while mounted.
+    (0, react_1.useEffect)(() => {
+        const stashed = props.initialToken ?? (0, invite_capture_1.consumePendingInvite)();
+        if (stashed) {
+            void runPreview(stashed);
+        }
+        const sub = invite_capture_1.inviteCaptured.subscribe(() => {
+            const token = (0, invite_capture_1.consumePendingInvite)();
+            if (token) {
+                void runPreview(token);
+            }
+        });
+        return () => sub.dispose();
+    }, [props.initialToken, runPreview]);
+    const accept = async () => {
+        setError("");
+        setBusy(true);
+        try {
+            const tools = await (0, invites_ipc_1.inviteTools)();
+            const response = await tools.acceptInvite({ token: text, trustLevel });
+            setResult(response.result);
+        }
+        catch (err) {
+            setError(err.message || "Could not accept the invite.");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const reset = () => {
+        setText("");
+        setPreview(undefined);
+        setResult(undefined);
+        setError("");
+    };
+    const done = props.onDone ?? reset;
+    if (result && preview) {
+        return (0, jsx_runtime_1.jsx)(ResultPanel, { result: result, preview: preview, onDone: done });
+    }
+    if (scanning) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)(qr_scanner_1.QrScanner, { onScan: (scanned) => {
+                        setScanning(false);
+                        void runPreview(scanned);
+                    }, onError: (message) => {
+                        setScanning(false);
+                        setError(message);
+                    } }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary mt-3", onClick: () => setScanning(false), children: "Cancel" })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 520, margin: "0 auto" }, children: preview ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PreviewCard, { preview: preview }), !preview.knownContact ? ((0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: "invite-trust", className: "form-label small text-muted mb-1", children: ["Trust level for ", preview.inviter.displayName || "this contact"] }), (0, jsx_runtime_1.jsx)("select", { id: "invite-trust", className: "form-select form-select-sm", value: trustLevel, onChange: (event) => setTrustLevel(Number(event.target.value)), disabled: busy, children: TRUST_OPTIONS.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.value))) })] })) : null, error ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger py-2", children: error }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", disabled: busy || preview.expired || preview.group?.alreadyMember, onClick: () => void accept(), children: busy ? "Working…" : preview.type === "group" ? "Join" : "Accept" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: reset, children: "Back" })] })] })) : ((0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+                event.preventDefault();
+                void runPreview(text);
+            }, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "invite-text", className: "form-label", children: "Paste an invite link or code" }), (0, jsx_runtime_1.jsx)("textarea", { id: "invite-text", className: "form-control font-monospace mb-2", rows: 3, value: text, onChange: (event) => setText(event.target.value), placeholder: "https://peers.app/i#\u2026", disabled: busy, spellCheck: false }), error ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger py-2", children: error }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "submit", className: "btn btn-primary", disabled: busy || !text.trim(), children: busy ? "Checking…" : "Continue" }), (0, qr_scanner_1.canScanQr)() ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-outline-primary", disabled: busy, onClick: () => setScanning(true), children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-qr-code-scan me-1" }), "Scan QR"] })) : null] })] })) }));
+}

package/dist/screens/invites/index.d.ts

@@ -0,0 +1,7 @@
+import "./invites-screen";
+export * from "./accept-invite";
+export * from "./invite-capture";
+export * from "./invite-share";
+export * from "./invites-ipc";
+export * from "./invites-screen";
+export * from "./pending-invites-list";

package/dist/screens/{join-group → invites}/index.js

@@ -14,6 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// Import to ensure route registration
-require("./join-group");
-__exportStar(require("./join-group"), exports);
+// Import the screen so it registers its routes.
+require("./invites-screen");
+__exportStar(require("./accept-invite"), exports);
+__exportStar(require("./invite-capture"), exports);
+__exportStar(require("./invite-share"), exports);
+__exportStar(require("./invites-ipc"), exports);
+__exportStar(require("./invites-screen"), exports);
+__exportStar(require("./pending-invites-list"), exports);

package/dist/screens/invites/invite-capture.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Captures an inbound invite token from the page URL or a desktop `peers://` open-url event
+ * and holds it (tab-scoped) until the signed-in UI can route to the Accept screen.
+ *
+ * Tokens travel only in URL fragments and are stripped from the address bar immediately so
+ * startup route restoration never persists them.
+ */
+/** sessionStorage key for a captured token awaiting the Accept screen. */
+export declare const PENDING_INVITE_STORAGE_KEY = "peers.pendingInviteToken";
+/** Route of the Accept-invite screen. */
+export declare const ACCEPT_INVITE_PATH = "invites/accept";
+/** Fires whenever a new token is captured, so a mounted app can navigate immediately. */
+export declare const inviteCaptured: import("@peers-app/peers-sdk").Observable<string | undefined>;
+/**
+ * Pull a token out of a URL fragment or deep link if one is present.
+ * Accepts `#invite=<token>`, `https://peers.app/i#<token>`, and `peers://i#<token>`.
+ */
+export declare function inviteTokenFromUrl(url: string): string | undefined;
+/** Store a token for the Accept screen and notify listeners. */
+export declare function stashPendingInvite(token: string, storage?: Storage): void;
+/** Read the stored token without consuming it. */
+export declare function peekPendingInvite(storage?: Storage): string | undefined;
+/** Read and clear the stored token. */
+export declare function consumePendingInvite(storage?: Storage): string | undefined;
+/**
+ * Capture `#invite=<token>` from the current location, strip it from the URL, and stash it.
+ * Safe to call repeatedly; returns the captured token when one was present.
+ */
+export declare function captureInviteFromLocation(locationLike?: Pick<Location, "href" | "pathname" | "search">, historyLike?: Pick<History, "replaceState" | "state">, storage?: Storage): string | undefined;
+/**
+ * Listen for `peers://` links forwarded by the Electron main process (`peers-open-url`).
+ * No-op outside Electron. Returns an unsubscribe function.
+ */
+export declare function listenForOpenUrlInvites(): () => void;

package/dist/screens/invites/invite-capture.js

@@ -0,0 +1,94 @@
+"use strict";
+/**
+ * Captures an inbound invite token from the page URL or a desktop `peers://` open-url event
+ * and holds it (tab-scoped) until the signed-in UI can route to the Accept screen.
+ *
+ * Tokens travel only in URL fragments and are stripped from the address bar immediately so
+ * startup route restoration never persists them.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inviteCaptured = exports.ACCEPT_INVITE_PATH = exports.PENDING_INVITE_STORAGE_KEY = void 0;
+exports.inviteTokenFromUrl = inviteTokenFromUrl;
+exports.stashPendingInvite = stashPendingInvite;
+exports.peekPendingInvite = peekPendingInvite;
+exports.consumePendingInvite = consumePendingInvite;
+exports.captureInviteFromLocation = captureInviteFromLocation;
+exports.listenForOpenUrlInvites = listenForOpenUrlInvites;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+/** sessionStorage key for a captured token awaiting the Accept screen. */
+exports.PENDING_INVITE_STORAGE_KEY = "peers.pendingInviteToken";
+/** Route of the Accept-invite screen. */
+exports.ACCEPT_INVITE_PATH = "invites/accept";
+/** Fires whenever a new token is captured, so a mounted app can navigate immediately. */
+exports.inviteCaptured = (0, peers_sdk_1.observable)(undefined);
+/**
+ * Pull a token out of a URL fragment or deep link if one is present.
+ * Accepts `#invite=<token>`, `https://peers.app/i#<token>`, and `peers://i#<token>`.
+ */
+function inviteTokenFromUrl(url) {
+    const hash = url.indexOf("#");
+    if (hash < 0) {
+        return undefined;
+    }
+    const before = url.slice(0, hash);
+    const fragment = url.slice(hash + 1);
+    const isInviteFragment = fragment.startsWith("invite=");
+    const isLandingPage = /^peers:\/\/i\/?$/.test(before) || /^https?:\/\/[^/]+\/i\/?$/.test(before);
+    if (!isInviteFragment && !isLandingPage) {
+        return undefined;
+    }
+    try {
+        return (0, peers_sdk_1.extractInviteTokenText)(url);
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Store a token for the Accept screen and notify listeners. */
+function stashPendingInvite(token, storage = sessionStorage) {
+    storage.setItem(exports.PENDING_INVITE_STORAGE_KEY, token);
+    (0, exports.inviteCaptured)(token);
+}
+/** Read the stored token without consuming it. */
+function peekPendingInvite(storage = sessionStorage) {
+    return storage.getItem(exports.PENDING_INVITE_STORAGE_KEY) ?? undefined;
+}
+/** Read and clear the stored token. */
+function consumePendingInvite(storage = sessionStorage) {
+    const token = peekPendingInvite(storage);
+    storage.removeItem(exports.PENDING_INVITE_STORAGE_KEY);
+    return token;
+}
+/**
+ * Capture `#invite=<token>` from the current location, strip it from the URL, and stash it.
+ * Safe to call repeatedly; returns the captured token when one was present.
+ */
+function captureInviteFromLocation(locationLike = window.location, historyLike = window.history, storage = sessionStorage) {
+    const token = inviteTokenFromUrl(locationLike.href);
+    if (!token) {
+        return undefined;
+    }
+    historyLike.replaceState(historyLike.state ?? null, "", `${locationLike.pathname}${locationLike.search}`);
+    stashPendingInvite(token, storage);
+    return token;
+}
+/**
+ * Listen for `peers://` links forwarded by the Electron main process (`peers-open-url`).
+ * No-op outside Electron. Returns an unsubscribe function.
+ */
+function listenForOpenUrlInvites() {
+    const ipc = window.ipcRenderer;
+    if (!ipc) {
+        return () => { };
+    }
+    ipc.on("peers-open-url", (_event, url) => {
+        if (typeof url !== "string") {
+            return;
+        }
+        const token = inviteTokenFromUrl(url);
+        if (token) {
+            stashPendingInvite(token);
+        }
+    });
+    return () => ipc.removeAllListeners("peers-open-url");
+}

package/dist/screens/invites/invite-share.d.ts

@@ -0,0 +1,15 @@
+import { type ICreatedInvite } from "@peers-app/peers-sdk";
+/** Props for {@link InviteShare}. */
+export interface InviteShareProps {
+    invite: ICreatedInvite;
+    /** Short line under the heading explaining what accepting grants. */
+    description?: string;
+    /** Body text used by the native share sheet; defaults to a generic line. */
+    shareText?: string;
+    onDone?: () => void;
+}
+/**
+ * Presents an issued invite as a QR code plus copyable link and token. The QR encodes the
+ * landing-page URL so phone cameras, the in-app scanner, and the desktop handler all work.
+ */
+export declare function InviteShare(props: InviteShareProps): import("react/jsx-runtime").JSX.Element;