@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,4 +1,7 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupInviteListener = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Component for admins to prepare group invitations and manage join requests.
  *
@@ -6,43 +9,8 @@
  *
  * Communicates with device layer through pvars (not direct imports).
  */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupInviteListener = void 0;
-const react_1 = __importStar(require("react"));
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const GroupInviteListener = (props) => {
     const { groupId } = props;
@@ -58,7 +26,7 @@ const GroupInviteListener = (props) => {
     const [status] = (0, hooks_1.useObservable)(peers_sdk_1.groupInviteStatus);
     // Check if we're currently listening for this group
     const currentListener = listeners?.[groupId];
-    const pendingRequests = (requests || []).filter(r => r.groupId === groupId);
+    const pendingRequests = (requests || []).filter((r) => r.groupId === groupId);
     // Sync local state with listener state
     (0, react_1.useEffect)(() => {
         if (currentListener) {
@@ -103,7 +71,7 @@ const GroupInviteListener = (props) => {
         (0, peers_sdk_1.groupInviteProcessRequest)({
             requestId: request.requestId,
             approved: true,
-            role: approvalRole
+            role: approvalRole,
         });
         // Clear processing state after a short delay
         setTimeout(() => setProcessingRequestId(null), 1000);
@@ -115,75 +83,11 @@ const GroupInviteListener = (props) => {
         (0, peers_sdk_1.groupInviteProcessRequest)({
             requestId: request.requestId,
             approved: false,
-            role: peers_sdk_1.GroupMemberRole.None
+            role: peers_sdk_1.GroupMemberRole.None,
         });
         // Clear processing state after a short delay
         setTimeout(() => setProcessingRequestId(null), 1000);
     }, []);
-    return (react_1.default.createElement("div", { className: "card mb-3" },
-        react_1.default.createElement("div", { className: "card-header" },
-            react_1.default.createElement("h6", { className: "mb-0" },
-                react_1.default.createElement("i", { className: "bi-person-plus-fill me-2" }),
-                "Invite New Members")),
-        react_1.default.createElement("div", { className: "card-body" },
-            react_1.default.createElement("div", { className: "mb-3" },
-                react_1.default.createElement("label", { className: "form-label small text-muted" }, "Invitation Password"),
-                react_1.default.createElement("div", { className: "input-group" },
-                    react_1.default.createElement("input", { type: "text", className: "form-control font-monospace", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "Enter or generate a password...", disabled: isListening }),
-                    react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleGeneratePassword, disabled: isListening, title: "Generate random password" },
-                        react_1.default.createElement("i", { className: "bi-shuffle" })),
-                    react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleCopyPassword, disabled: !password, title: "Copy password" },
-                        react_1.default.createElement("i", { className: copied ? "bi-check-lg text-success" : "bi-clipboard" }))),
-                react_1.default.createElement("small", { className: "text-muted" }, "Share this password with people you want to invite. They can enter it in the \"Join Group\" screen.")),
-            react_1.default.createElement("div", { className: "d-flex gap-2" }, !isListening ? (react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleStartListening, disabled: !password || password.length < 4 },
-                react_1.default.createElement("i", { className: "bi-broadcast me-2" }),
-                "Start Listening")) : (react_1.default.createElement("button", { className: "btn btn-danger", onClick: handleStopListening },
-                react_1.default.createElement("i", { className: "bi-stop-circle me-2" }),
-                "Stop Listening"))),
-            isListening && (react_1.default.createElement("div", { className: "alert alert-success mt-3 mb-0 d-flex align-items-center" },
-                react_1.default.createElement("div", { className: "spinner-border spinner-border-sm me-2", role: "status" },
-                    react_1.default.createElement("span", { className: "visually-hidden" }, "Listening...")),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("strong", null, "Listening for join requests"),
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement("small", null,
-                        "Password: ",
-                        react_1.default.createElement("code", null, password))))),
-            status && (react_1.default.createElement("div", { className: "alert alert-info mt-3 mb-0" },
-                react_1.default.createElement("i", { className: "bi-info-circle me-2" }),
-                status)),
-            pendingRequests.length > 0 && (react_1.default.createElement("div", { className: "mt-3" },
-                react_1.default.createElement("h6", { className: "mb-2" },
-                    react_1.default.createElement("i", { className: "bi-inbox-fill me-2" }),
-                    "Pending Requests (",
-                    pendingRequests.length,
-                    ")"),
-                react_1.default.createElement("div", { className: "mb-2" },
-                    react_1.default.createElement("label", { className: "form-label small text-muted" }, "Role for new members:"),
-                    react_1.default.createElement("select", { className: "form-select form-select-sm", value: approvalRole, onChange: (e) => setApprovalRole(Number(e.target.value)), style: { width: "auto" } },
-                        react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Reader }, "Reader"),
-                        react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Writer }, "Writer"),
-                        react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Admin }, "Admin"))),
-                react_1.default.createElement("div", { className: "list-group" }, pendingRequests.map((request) => (react_1.default.createElement("div", { key: request.requestId, className: "list-group-item" },
-                    react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center" },
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                                react_1.default.createElement("i", { className: "bi-person-fill me-2" }),
-                                react_1.default.createElement("div", null,
-                                    react_1.default.createElement("strong", null, request.requester.name || request.requester.userId),
-                                    request.requester.name && (react_1.default.createElement("small", { className: "text-muted d-block" }, request.requester.userId)))),
-                            react_1.default.createElement("small", { className: "text-muted" },
-                                "Device: ",
-                                request.requester.deviceId.slice(0, 8),
-                                "...",
-                                " | ",
-                                "Received: ",
-                                new Date(request.receivedAt).toLocaleTimeString())),
-                        react_1.default.createElement("div", { className: "d-flex gap-2" },
-                            react_1.default.createElement("button", { className: "btn btn-success btn-sm", onClick: () => handleApprove(request), disabled: processingRequestId === request.requestId }, processingRequestId === request.requestId ? (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm" })) : (react_1.default.createElement(react_1.default.Fragment, null,
-                                react_1.default.createElement("i", { className: "bi-check-lg me-1" }),
-                                "Approve"))),
-                            react_1.default.createElement("button", { className: "btn btn-outline-danger btn-sm", onClick: () => handleDeny(request), disabled: processingRequestId === request.requestId },
-                                react_1.default.createElement("i", { className: "bi-x-lg" })))))))))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "card mb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "card-header", children: (0, jsx_runtime_1.jsxs)("h6", { className: "mb-0", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-plus-fill me-2" }), "Invite New Members"] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small text-muted", children: "Invitation Password" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-group", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control font-monospace", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "Enter or generate a password...", disabled: isListening }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary", onClick: handleGeneratePassword, disabled: isListening, title: "Generate random password", children: (0, jsx_runtime_1.jsx)("i", { className: "bi-shuffle" }) }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary", onClick: handleCopyPassword, disabled: !password, title: "Copy password", children: (0, jsx_runtime_1.jsx)("i", { className: copied ? "bi-check-lg text-success" : "bi-clipboard" }) })] }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: "Share this password with people you want to invite. They can enter it in the \"Join Group\" screen." })] }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex gap-2", children: !isListening ? ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-primary", onClick: handleStartListening, disabled: !password || password.length < 4, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-broadcast me-2" }), "Start Listening"] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-danger", onClick: handleStopListening, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-stop-circle me-2" }), "Stop Listening"] })) }), isListening && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-success mt-3 mb-0 d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border spinner-border-sm me-2", role: "status", children: (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: "Listening..." }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Listening for join requests" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("small", { children: ["Password: ", (0, jsx_runtime_1.jsx)("code", { children: password })] })] })] })), status && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-info mt-3 mb-0", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-info-circle me-2" }), status] })), pendingRequests.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [(0, jsx_runtime_1.jsxs)("h6", { className: "mb-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-inbox-fill me-2" }), "Pending Requests (", pendingRequests.length, ")"] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small text-muted", children: "Role for new members:" }), (0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", value: approvalRole, onChange: (e) => setApprovalRole(Number(e.target.value)), style: { width: "auto" }, children: [(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)("div", { className: "list-group", children: pendingRequests.map((request) => ((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.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-fill me-2" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: request.requester.name || request.requester.userId }), request.requester.name && ((0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block", children: request.requester.userId }))] })] }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: ["Device: ", request.requester.deviceId.slice(0, 8), "...", " | ", "Received: ", new Date(request.receivedAt).toLocaleTimeString()] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-success btn-sm", onClick: () => handleApprove(request), disabled: processingRequestId === request.requestId, children: processingRequestId === request.requestId ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-check-lg me-1" }), "Approve"] })) }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-danger btn-sm", onClick: () => handleDeny(request), disabled: processingRequestId === request.requestId, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x-lg" }) })] })] }) }, request.requestId))) })] }))] })] }));
 };
 exports.GroupInviteListener = GroupInviteListener;

package/dist/screens/groups/group-list.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare function GroupList(): React.JSX.Element;
+export declare function GroupList(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,41 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupList = GroupList;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const input_1 = require("../../components/input");
 const lazy_list_1 = require("../../components/lazy-list");
 const loading_indicator_1 = require("../../components/loading-indicator");
@@ -45,46 +13,45 @@ const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
 function GroupList() {
     const userContext = (0, hooks_1.usePromise)(peers_sdk_1.getUserContext);
-    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(""));
     const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
     const [cursorObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)());
     // All hooks must be called before any conditional returns
     const groupsTable = userContext ? (0, peers_sdk_1.Groups)(userContext.userDataContext) : null;
-    async function newCursor() {
+    const newCursor = (0, react_1.useCallback)(async () => {
         if (!groupsTable)
             return;
         const filter = {
-            $or: [
-                { name: { $matchWords: searchText } },
-                { description: { $matchWords: searchText } },
-            ],
-            disabled: { $ne: true }
+            $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
+            disabled: { $ne: true },
         };
         const cursor = await groupsTable.cursor(searchText ? filter : { disabled: { $ne: true } }, {
-            sortBy: ['name'],
-            ...(searchText ? {} : { textSearch: searchText })
+            sortBy: ["name"],
+            ...(searchText ? {} : { textSearch: searchText }),
         });
         cursorObs(cursor);
         return cursor;
-    }
+    }, [groupsTable, searchText, cursorObs]);
     (0, react_1.useEffect)(() => {
         if (groupsTable) {
-            newCursor();
+            void newCursor();
         }
-    }, [searchText, groupsTable]);
+    }, [groupsTable, newCursor]);
     // Early return after all hooks
     if (!userContext) {
-        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
     async function loadMore(existing) {
         if (!groupsTable)
             return [];
-        let moreMatches = [];
-        let cursor = cursorObs() || await newCursor();
+        const moreMatches = [];
+        const cursor = cursorObs() || (await newCursor());
         if (!cursor)
             return [];
         for await (const nextRecord of cursor) {
-            if (existing.find(e => e.groupId === nextRecord.groupId))
+            if (existing.some((e) => e.groupId === nextRecord.groupId))
+                continue;
+            if (moreMatches.some((e) => e.groupId === nextRecord.groupId))
                 continue;
             moreMatches.push(nextRecord);
             if (searchText.length && moreMatches.length > 5)
@@ -103,7 +70,7 @@ function GroupList() {
         const name = searchText.trim();
         if (!name)
             return;
-        searchTextObs('');
+        searchTextObs("");
         await newRecord(name);
     }
     async function newRecord(name) {
@@ -116,12 +83,12 @@ function GroupList() {
         //       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 groupKeys.secretKey securely for this group
-        const persistentVarsTable = userContext.userDataContext.tableContainer.getTableByName('PersistentVars');
-        const groupSecretKeyVarName = 'groupSecretKey_' + groupDataContext.dataContextId;
+        const persistentVarsTable = userContext.userDataContext.tableContainer.getTableByName("PersistentVars");
+        const groupSecretKeyVarName = `groupSecretKey_${groupDataContext.dataContextId}`;
         await persistentVarsTable.save({
             persistentVarId: (0, peers_sdk_1.newid)(),
             name: groupSecretKeyVarName,
-            scope: 'groupUser',
+            scope: "groupUser",
             isSecret: true,
             value: { value: groupKeys.secretKey },
         });
@@ -134,51 +101,42 @@ function GroupList() {
         const group = await (0, peers_sdk_1.Groups)(userContext.userDataContext).signAndSave({
             groupId,
             name: groupName,
-            description: '',
-            iconClassName: 'bi-people-fill', // Default icon
+            description: "",
+            iconClassName: "bi-people-fill", // Default icon
             founderUserId: me.userId,
             disabled: false,
             publicKey: groupKeys.publicKey,
             publicBoxKey: groupKeys.publicBoxKey,
-            signature: '', // will be set via signAndSave
+            signature: "", // will be set via signAndSave
         });
         await (0, peers_sdk_1.Groups)(groupDataContext).signAndSave(group);
         // Auto-install peers-core for the new group
-        await peers_sdk_1.rpcServerCalls.addOrUpdatePackage(peers_sdk_1.peersCorePackageId, { dataContextId: groupId }).catch((err) => {
-            console.error('Error auto-installing peers-core for group:', err);
+        await peers_sdk_1.rpcServerCalls
+            .addOrUpdatePackage(peers_sdk_1.peersCorePackageId, { dataContextId: groupId })
+            .catch((err) => {
+            console.error("Error auto-installing peers-core for group:", err);
         });
         (0, globals_1.mainContentPath)(`groups/${group.groupId}`);
         return group;
     }
     function renderItem(group) {
-        const groupIcon = group.iconClassName || 'bi-people-fill';
-        return (react_1.default.createElement("div", { key: group.groupId, className: 'container-fluid pb-4' },
-            react_1.default.createElement("i", { className: groupIcon }),
-            "\u00A0",
-            react_1.default.createElement("a", { href: `#groups/${group.groupId}` }, group.name || '<unnamed-group>'),
-            react_1.default.createElement("div", { style: { paddingLeft: '20px' } },
-                react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: group.description || '' }))));
+        const groupIcon = group.iconClassName || "bi-people-fill";
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid pb-4", children: [(0, jsx_runtime_1.jsx)("i", { className: groupIcon }), "\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `#groups/${group.groupId}`, children: group.name || "<unnamed-group>" }), (0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: "20px" }, children: (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: group.description || "" }) })] }, group.groupId));
     }
-    return (react_1.default.createElement("div", { className: 'container-fluid' },
-        react_1.default.createElement("div", { className: "input-group mt-3 mb-3" },
-            react_1.default.createElement(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search or create group", autoFocus: (0, globals_1.isDesktop)() ? true : false, onKeyUp: evt => searchSubmit(evt) }),
-            react_1.default.createElement(ImportGroupButton, null)),
-        react_1.default.createElement("div", { className: "peers-list-container" },
-            react_1.default.createElement(lazy_list_1.LazyList, { resetTrigger: searchText, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (groups) => {
-                    return groups.map(renderItem);
-                }, loadingIndicator: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } },
-                    react_1.default.createElement(loading_indicator_1.LoadingIndicator, null)), endOfList: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-group mt-3 mb-3", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search or create group", autoFocus: !!(0, globals_1.isDesktop)(), onKeyUp: (evt) => searchSubmit(evt) }), (0, jsx_runtime_1.jsx)(ImportGroupButton, {})] }), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { resetTrigger: searchText, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (groups) => {
+                        return groups.map(renderItem);
+                    }, loadingIndicator: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 }, children: (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}) }), endOfList: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }) })] }));
 }
 const ImportGroupButton = () => {
     const [isImporting, setIsImporting] = (0, react_1.useState)(false);
     const [showImportDialog, setShowImportDialog] = (0, react_1.useState)(false);
-    const [importText, setImportText] = (0, react_1.useState)('');
+    const [importText, setImportText] = (0, react_1.useState)("");
     const [importResult, setImportResult] = (0, react_1.useState)(null);
     const handleImport = async () => {
         if (!importText.trim()) {
             setImportResult({
                 success: false,
-                message: 'Please paste the group share JSON data'
+                message: "Please paste the group share JSON data",
             });
             return;
         }
@@ -189,9 +147,9 @@ const ImportGroupButton = () => {
             setImportResult({
                 success: true,
                 message: `Group imported successfully!`,
-                groupId
+                groupId,
             });
-            setImportText('');
+            setImportText("");
             // Navigate to the imported group after a brief delay
             setTimeout(() => {
                 (0, globals_1.mainContentPath)(`groups/${groupId}`);
@@ -202,7 +160,7 @@ const ImportGroupButton = () => {
         catch (error) {
             setImportResult({
                 success: false,
-                message: `Import failed: ${error.message}`
+                message: `Import failed: ${error instanceof Error ? error.message : String(error)}`,
             });
         }
         finally {
@@ -211,68 +169,33 @@ const ImportGroupButton = () => {
     };
     const handlePasteFromClipboard = async () => {
         try {
-            if (navigator.clipboard && navigator.clipboard.readText) {
+            if (navigator.clipboard?.readText) {
                 const clipboardText = await navigator.clipboard.readText();
                 setImportText(clipboardText);
             }
         }
-        catch (error) {
-            console.log('Failed to read from clipboard - user can paste manually');
+        catch (_error) {
+            console.log("Failed to read from clipboard - user can paste manually");
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("button", { className: "btn btn-outline-secondary dropdown-toggle", type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false" },
-            react_1.default.createElement("i", { className: "bi-plus-lg" })),
-        react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" },
-            react_1.default.createElement("li", null,
-                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => setShowImportDialog(true) },
-                    react_1.default.createElement("i", { className: "bi-download me-2" }),
-                    "Import Shared Group"))),
-        showImportDialog && (react_1.default.createElement("div", { className: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center", style: { backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 1050 } },
-            react_1.default.createElement("div", { className: "card", style: { maxWidth: '600px', width: '90%' } },
-                react_1.default.createElement("div", { className: "card-header d-flex justify-content-between align-items-center" },
-                    react_1.default.createElement("h6", { className: "mb-0" },
-                        react_1.default.createElement("i", { className: "bi-download me-2" }),
-                        "Import Shared Group"),
-                    react_1.default.createElement("button", { className: "btn-close", onClick: () => {
-                            setShowImportDialog(false);
-                            setImportText('');
-                            setImportResult(null);
-                        }, "aria-label": "Close" })),
-                react_1.default.createElement("div", { className: "card-body" },
-                    react_1.default.createElement("p", { className: "mb-3" }, "Paste the group share JSON data below to import a shared group with its admin members."),
-                    react_1.default.createElement("div", { className: "mb-3" },
-                        react_1.default.createElement("label", { className: "form-label" }, "Group Share JSON:"),
-                        react_1.default.createElement("div", { className: "d-flex gap-2 mb-2" },
-                            react_1.default.createElement("button", { className: "btn btn-secondary btn-sm", onClick: handlePasteFromClipboard, title: "Paste from clipboard" },
-                                react_1.default.createElement("i", { className: "bi-clipboard me-1" }),
-                                "Paste from Clipboard")),
-                        react_1.default.createElement("textarea", { className: "form-control font-monospace", rows: 8, value: importText, onChange: (e) => setImportText(e.target.value), placeholder: "Paste the group share JSON here...", style: { fontSize: '0.9em' } })),
-                    importResult && (react_1.default.createElement("div", { className: `alert alert-${importResult.success ? 'success' : 'danger'} mb-3` },
-                        react_1.default.createElement("i", { className: `bi-${importResult.success ? 'check-circle' : 'exclamation-triangle'} me-2` }),
-                        importResult.message,
-                        importResult.success && importResult.groupId && (react_1.default.createElement("div", { className: "mt-2" },
-                            react_1.default.createElement("small", null, "Redirecting to group in 2 seconds..."))))),
-                    react_1.default.createElement("div", { className: "text-end" },
-                        react_1.default.createElement("button", { className: "btn btn-secondary me-2", onClick: () => {
-                                setShowImportDialog(false);
-                                setImportText('');
-                                setImportResult(null);
-                            }, disabled: isImporting }, "Cancel"),
-                        react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleImport, disabled: isImporting || !importText.trim() }, isImporting ? (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
-                            "Importing...")) : (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement("i", { className: "bi-download me-1" }),
-                            "Import Group"))))))))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary dropdown-toggle", type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false", children: (0, jsx_runtime_1.jsx)("i", { className: "bi-plus-lg" }) }), (0, jsx_runtime_1.jsx)("ul", { className: "dropdown-menu dropdown-menu-end", children: (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => setShowImportDialog(true), children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-download me-2" }), "Import Shared Group"] }) }) }), showImportDialog && ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center", style: { backgroundColor: "rgba(0,0,0,0.5)", zIndex: 1050 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card", style: { maxWidth: "600px", width: "90%" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("h6", { className: "mb-0", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-download me-2" }), "Import Shared Group"] }), (0, jsx_runtime_1.jsx)("button", { className: "btn-close", onClick: () => {
+                                        setShowImportDialog(false);
+                                        setImportText("");
+                                        setImportResult(null);
+                                    }, "aria-label": "Close" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-3", children: "Paste the group share JSON data below to import a shared group with its admin members." }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label", children: "Group Share JSON:" }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex gap-2 mb-2", children: (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-secondary btn-sm", onClick: handlePasteFromClipboard, title: "Paste from clipboard", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-clipboard me-1" }), "Paste from Clipboard"] }) }), (0, jsx_runtime_1.jsx)("textarea", { className: "form-control font-monospace", rows: 8, value: importText, onChange: (e) => setImportText(e.target.value), placeholder: "Paste the group share JSON here...", style: { fontSize: "0.9em" } })] }), importResult && ((0, jsx_runtime_1.jsxs)("div", { className: `alert alert-${importResult.success ? "success" : "danger"} mb-3`, children: [(0, jsx_runtime_1.jsx)("i", { className: `bi-${importResult.success ? "check-circle" : "exclamation-triangle"} me-2` }), importResult.message, importResult.success && importResult.groupId && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: (0, jsx_runtime_1.jsx)("small", { children: "Redirecting to group in 2 seconds..." }) }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "text-end", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary me-2", onClick: () => {
+                                                setShowImportDialog(false);
+                                                setImportText("");
+                                                setImportResult(null);
+                                            }, disabled: isImporting, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary", onClick: handleImport, disabled: isImporting || !importText.trim(), children: isImporting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Importing..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-download me-1" }), "Import Group"] })) })] })] })] }) }))] }));
 };
 (0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: '00mf8qrs004w5u2wqk64d2yp6',
+    peersUIId: "00mf8qrs004w5u2wqk64d2yp6",
     component: GroupList,
     routes: [
         {
-            isMatch: (props, context) => context.path === 'groups',
-            uiCategory: 'screen',
-            priority: 2
-        }
-    ]
+            isMatch: (_props, context) => context.path === "groups",
+            uiCategory: "screen",
+            priority: 2,
+        },
+    ],
 });

package/dist/screens/groups/group-members.d.ts

@@ -1,8 +1,7 @@
-import { UserContext } from "@peers-app/peers-sdk";
-import React from "react";
+import { type UserContext } from "@peers-app/peers-sdk";
 interface GroupMembersUIProps {
     groupId: string;
     userContext: UserContext;
 }
-export declare const GroupMembersUI: (props: GroupMembersUIProps) => React.JSX.Element;
+export declare const GroupMembersUI: (props: GroupMembersUIProps) => import("react/jsx-runtime").JSX.Element;
 export {};