@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,218 @@
+"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.GroupDetails = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const checkbox_1 = require("../../components/checkbox");
+const input_1 = require("../../components/input");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
+const save_button_1 = require("../../components/save-button");
+const tabs_1 = require("../../components/tabs");
+const hooks_1 = require("../../hooks");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+const group_members_1 = require("./group-members");
+const GroupDetails = (props) => {
+    const group = (0, hooks_1.usePromise)(async () => {
+        const userContext = await (0, peers_sdk_1.getUserContext)();
+        const userGroupTable = (0, peers_sdk_1.Groups)(userContext.userDataContext);
+        const group = await userGroupTable.get(props.groupId);
+        if (!group) {
+            throw new Error('Group not found');
+        }
+        (0, tabs_state_1.updateActiveTabTitle)(group.name || "Group");
+        const groupDoc = userGroupTable.initDoc(group);
+        // Bit of a hack - saves go to both the group and user db
+        const originalSave = groupDoc.save;
+        groupDoc.save = async () => {
+            const saveResult = await originalSave();
+            const groupDataContext = userContext.getDataContext(group.groupId);
+            const groupGroupTable = (0, peers_sdk_1.Groups)(groupDataContext);
+            await groupGroupTable.save(saveResult.toJS());
+            return saveResult;
+        };
+        return groupDoc;
+    }, undefined, [props.groupId]);
+    if (!group) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
+        react_1.default.createElement("div", { className: "d-flex" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement("i", { className: `${(0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.Groups)())} me-2` }))),
+            react_1.default.createElement("div", { className: "flex-grow-1" },
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement(input_1.Input, { key: group.groupId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: group.qs.name }))),
+            react_1.default.createElement("div", { className: "d-flex gap-2" },
+                react_1.default.createElement(ShareButton, { groupId: props.groupId }),
+                react_1.default.createElement(save_button_1.SaveButton, { key: group.groupId, doc: group }))),
+        react_1.default.createElement(tabs_1.Tabs, { key: group.groupId, tabs: [
+                {
+                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(GroupInfo, { group: group }))
+                },
+                {
+                    name: 'Members', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(GroupMembersWrapper, { groupId: props.groupId }))
+                },
+            ] })));
+};
+exports.GroupDetails = GroupDetails;
+const GroupInfo = (props) => {
+    const { group } = props;
+    group.description = group.description || '';
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("small", null, "Name:"),
+        react_1.default.createElement(input_1.Input, { value: group.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Group name", title: "Group name" }),
+        react_1.default.createElement("small", null, "Icon Class Name:"),
+        react_1.default.createElement(input_1.Input, { value: group.qs.iconClassName, className: "form-control mb-3 p-0 ps-2", placeholder: "bi-people-fill", title: "Icon class name (e.g., bi-people-fill, bi-house-fill, bi-star-fill)" }),
+        react_1.default.createElement("small", null, "Group ID:"),
+        react_1.default.createElement("div", { className: "form-control mb-3 p-2 bg-body-secondary text-body-secondary", style: { fontFamily: 'monospace', fontSize: '0.9em' } }, group.groupId),
+        react_1.default.createElement("div", { className: "d-flex flex-row" },
+            react_1.default.createElement("div", { className: "ms-2" },
+                react_1.default.createElement("label", { className: "form-label small mt-2 me-2" }, "Disabled:"),
+                react_1.default.createElement(checkbox_1.Checkbox, { className: "form-check-input mt-2", checked: group.qs.disabled }))),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("small", { className: "mt-2" }, "Description:"),
+        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: group.qs.description })));
+};
+const ShareButton = ({ groupId }) => {
+    const [isSharing, setIsSharing] = (0, react_1.useState)(false);
+    const [shareResult, setShareResult] = (0, react_1.useState)(null);
+    const handleShare = async () => {
+        setIsSharing(true);
+        setShareResult(null);
+        try {
+            // Generate the group share data
+            const groupShare = await (0, peers_sdk_1.generateGroupShare)(groupId);
+            // Check QR code compatibility
+            const qrInfo = (0, peers_sdk_1.checkQRCodeCompatibility)(groupShare, 20);
+            // Convert to JSON
+            const groupShareJson = JSON.stringify(groupShare, null, 2);
+            // Copy to clipboard
+            const copied = await (0, peers_sdk_1.copyToClipboard)(groupShareJson);
+            if (copied) {
+                setShareResult({
+                    success: true,
+                    message: `Group share data copied to clipboard! (${qrInfo.size} chars, ${qrInfo.memberCount} admin members)`,
+                    qrInfo
+                });
+            }
+            else {
+                setShareResult({
+                    success: false,
+                    message: 'Failed to copy to clipboard. Please copy manually from the modal.',
+                    qrInfo
+                });
+            }
+        }
+        catch (error) {
+            setShareResult({
+                success: false,
+                message: `Error generating share: ${error.message}`,
+            });
+        }
+        finally {
+            setIsSharing(false);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("button", { className: "btn btn-secondary btn-sm", onClick: handleShare, disabled: isSharing, title: "Share group with admin members" }, isSharing ? (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" }),
+            "Sharing...")) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("i", { className: "bi-share me-1" }),
+            "Share"))),
+        shareResult && (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: '500px', 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-${shareResult.success ? 'check-circle text-success' : 'exclamation-triangle text-warning'} me-2` }),
+                        "Group Share ",
+                        shareResult.success ? 'Ready' : 'Error'),
+                    react_1.default.createElement("button", { className: "btn-close", onClick: () => setShareResult(null), "aria-label": "Close" })),
+                react_1.default.createElement("div", { className: "card-body" },
+                    react_1.default.createElement("p", { className: "mb-3" }, shareResult.message),
+                    shareResult.qrInfo && (react_1.default.createElement("div", { className: "mb-3" },
+                        react_1.default.createElement("h6", null, "QR Code Compatibility"),
+                        react_1.default.createElement("div", { className: "row g-2" },
+                            react_1.default.createElement("div", { className: "col-6" },
+                                react_1.default.createElement("small", { className: "text-muted" }, "Size:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("strong", null,
+                                    shareResult.qrInfo.size,
+                                    " chars")),
+                            react_1.default.createElement("div", { className: "col-6" },
+                                react_1.default.createElement("small", { className: "text-muted" }, "QR Version 20:"),
+                                react_1.default.createElement("br", null),
+                                react_1.default.createElement("span", { className: `badge bg-${shareResult.qrInfo.fits ? 'success' : 'warning'}` },
+                                    shareResult.qrInfo.fits ? '✓ Fits' : '⚠ Too Large',
+                                    " (",
+                                    shareResult.qrInfo.usagePercent,
+                                    "%)"))),
+                        !shareResult.qrInfo.fits && (react_1.default.createElement("div", { className: "alert alert-warning mt-2 mb-0" },
+                            react_1.default.createElement("small", null,
+                                react_1.default.createElement("i", { className: "bi-exclamation-triangle me-1" }),
+                                "Data may be too large for standard QR codes. Consider reducing admin members or use text sharing."))))),
+                    react_1.default.createElement("div", { className: "text-end" },
+                        react_1.default.createElement("button", { className: "btn btn-secondary me-2", onClick: () => setShareResult(null) }, "Close"),
+                        shareResult.success && (react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleShare }, "Copy Again")))))))));
+};
+const GroupMembersWrapper = (props) => {
+    const userContext = (0, hooks_1.usePromise)(() => (0, peers_sdk_1.getUserContext)());
+    if (!userContext)
+        return null;
+    return react_1.default.createElement(group_members_1.GroupMembersUI, { groupId: props.groupId, userContext: userContext });
+};
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: '00group00details00component',
+    component: exports.GroupDetails,
+    routes: [
+        {
+            isMatch: (props, context) => {
+                const match = context.path.match(/^groups\/([a-zA-Z0-9]{25})$/);
+                if (match) {
+                    props.groupId = match[1];
+                    return true;
+                }
+                return false;
+            },
+            uiCategory: 'screen',
+            priority: 2
+        }
+    ]
+});

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

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

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

@@ -0,0 +1,275 @@
+"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 peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const input_1 = require("../../components/input");
+const lazy_list_1 = require("../../components/lazy-list");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
+const globals_1 = require("../../globals");
+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 [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() {
+        if (!groupsTable)
+            return;
+        const filter = {
+            $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 })
+        });
+        cursorObs(cursor);
+        return cursor;
+    }
+    (0, react_1.useEffect)(() => {
+        if (groupsTable) {
+            newCursor();
+        }
+    }, [searchText, groupsTable]);
+    // Early return after all hooks
+    if (!userContext) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    async function loadMore(existing) {
+        if (!groupsTable)
+            return [];
+        let moreMatches = [];
+        let cursor = cursorObs() || await newCursor();
+        if (!cursor)
+            return [];
+        for await (const nextRecord of cursor) {
+            if (existing.find(e => e.groupId === nextRecord.groupId))
+                continue;
+            moreMatches.push(nextRecord);
+            if (searchText.length && moreMatches.length > 5)
+                break;
+            if (moreMatches.length >= 10)
+                break;
+        }
+        if (moreMatches.length === 0) {
+            cursorObs(undefined);
+        }
+        return moreMatches;
+    }
+    async function searchSubmit(evt) {
+        if (evt.key !== "Enter")
+            return;
+        const name = searchText.trim();
+        if (!name)
+            return;
+        searchTextObs('');
+        await newRecord(name);
+    }
+    async function newRecord(name) {
+        const userContext = await (0, peers_sdk_1.getUserContext)();
+        const groupName = name.trim();
+        const groupId = (0, peers_sdk_1.newid)();
+        // Generate cryptographic keys for the group
+        const groupKeys = (0, peers_sdk_1.newKeys)();
+        // NOTE: this is relying on the userContext to be able to create a group context for a group that doesn't yet exist
+        //       at time of writing, this is supported but is probably unintuitive behavior so we need to watch for this changing in the future
+        const groupDataContext = userContext.getDataContext(groupId);
+        // Store groupKeys.secretKey securely for this group
+        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',
+            isSecret: true,
+            value: { value: groupKeys.secretKey },
+        });
+        // add me to the group's users table
+        const me = await (0, peers_sdk_1.getMe)();
+        await (0, peers_sdk_1.Users)(groupDataContext).save({
+            ...me,
+            trustLevel: peers_sdk_1.TrustLevel.Trusted
+        });
+        // create group in both the user's and group's context
+        const group = await (0, peers_sdk_1.Groups)(userContext.userDataContext).save({
+            groupId,
+            name: groupName,
+            description: '',
+            iconClassName: 'bi-people-fill', // Default icon
+            founderUserId: me.userId,
+            disabled: false,
+            publicKey: groupKeys.publicKey,
+            publicBoxKey: groupKeys.publicBoxKey,
+            signature: '', // calling save will sign
+        });
+        await (0, peers_sdk_1.Groups)(groupDataContext).save(group);
+        (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 || '' }))));
+    }
+    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 } }) }))));
+}
+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 [importResult, setImportResult] = (0, react_1.useState)(null);
+    const handleImport = async () => {
+        if (!importText.trim()) {
+            setImportResult({
+                success: false,
+                message: 'Please paste the group share JSON data'
+            });
+            return;
+        }
+        setIsImporting(true);
+        setImportResult(null);
+        try {
+            const groupId = await peers_sdk_1.rpcServerCalls.importGroupShare(importText.trim());
+            setImportResult({
+                success: true,
+                message: `Group imported successfully!`,
+                groupId
+            });
+            setImportText('');
+            // Navigate to the imported group after a brief delay
+            setTimeout(() => {
+                (0, globals_1.mainContentPath)(`groups/${groupId}`);
+                setShowImportDialog(false);
+                setImportResult(null);
+            }, 2000);
+        }
+        catch (error) {
+            setImportResult({
+                success: false,
+                message: `Import failed: ${error.message}`
+            });
+        }
+        finally {
+            setIsImporting(false);
+        }
+    };
+    const handlePasteFromClipboard = async () => {
+        try {
+            if (navigator.clipboard && navigator.clipboard.readText) {
+                const clipboardText = await navigator.clipboard.readText();
+                setImportText(clipboardText);
+            }
+        }
+        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"))))))))));
+};
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: '00mf8qrs004w5u2wqk64d2yp6',
+    component: GroupList,
+    routes: [
+        {
+            isMatch: (props, context) => context.path === 'groups',
+            uiCategory: 'screen',
+            priority: 2
+        }
+    ]
+});

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

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