@peers-app/peers-ui 0.7.22 → 0.7.24

package/dist/components/messages/avatar.js

@@ -22,6 +22,13 @@ const Avatar = (props) => {
             return (0, peers_sdk_1.Assistants)().get(assistantId, { useCache: true });
         }
     }, undefined, [assistantId]);
+    const trustLevel = (0, hooks_1.usePromise)(async () => {
+        if (userId) {
+            const userContext = await (0, peers_sdk_1.getUserContext)();
+            return await (0, peers_sdk_1.getUserTrustLevel)(userContext.userDataContext, userId);
+        }
+        return peers_sdk_1.TrustLevel.Unknown;
+    }, peers_sdk_1.TrustLevel.Unknown, [userId]);
     let initials = "?";
     let name = assistant?.name || user?.name;
     if (user) {
@@ -41,6 +48,31 @@ const Avatar = (props) => {
         // backgroundColor = stringToHslColor(name || '', 100, 100);
         backgroundColor = stringToHslColor('', 0, 70);
     }
+    // Get trust level config
+    const getTrustLevelConfig = (level) => {
+        const configs = [
+            { value: peers_sdk_1.TrustLevel.Self, color: '#198754', icon: 'bi-shield-fill-check' },
+            { value: peers_sdk_1.TrustLevel.Trusted, color: '#198754', icon: 'bi-shield-fill-check' },
+            { value: peers_sdk_1.TrustLevel.Known, color: '#0d6efd', icon: 'bi-shield-fill-check' },
+            { value: peers_sdk_1.TrustLevel.NewDevice, color: '#0dcaf0', icon: 'bi-shield-fill-plus' },
+            { value: peers_sdk_1.TrustLevel.NewUser, color: '#0dcaf0', icon: 'bi-shield-fill-plus' },
+            { value: peers_sdk_1.TrustLevel.Unknown, color: '#ffc107', icon: 'bi-shield-fill-exclamation' },
+            { value: peers_sdk_1.TrustLevel.Untrusted, color: '#dc3545', icon: 'bi-shield-fill-exclamation' },
+            { value: peers_sdk_1.TrustLevel.Malicious, color: '#dc3545', icon: 'bi-shield-fill-x' }
+        ];
+        const sortedConfigs = configs.sort((a, b) => a.value - b.value);
+        let config = { color: '#6c757d', icon: 'bi-shield' };
+        for (const c of sortedConfigs) {
+            if (level >= c.value) {
+                config = c;
+            }
+            else {
+                break;
+            }
+        }
+        return config;
+    };
+    const trustConfig = getTrustLevelConfig(trustLevel || peers_sdk_1.TrustLevel.Unknown);
     return (react_1.default.createElement("div", { className: "position-relative" },
         react_1.default.createElement("div", { className: "rounded-circle d-flex justify-content-center align-items-center fs-4 border", style: {
                 width: '40px',
@@ -50,7 +82,20 @@ const Avatar = (props) => {
             } },
             react_1.default.createElement("span", { style: { fontSize: '15pt' } },
                 assistant && react_1.default.createElement("i", { className: "bi bi-person-fill-gear" }),
-                !assistant && initials.toUpperCase()))));
+                !assistant && initials.toUpperCase())),
+        !assistant && (react_1.default.createElement("div", { className: "position-absolute d-flex justify-content-center align-items-center", style: {
+                bottom: '-4px',
+                right: '0px',
+                width: '18px',
+                height: '18px',
+                // backgroundColor: 'white',
+                borderRadius: '50%',
+                // border: '1px solid #dee2e6',
+            } },
+            react_1.default.createElement("i", { className: trustConfig.icon, style: {
+                    fontSize: '12px',
+                    color: trustConfig.color,
+                } })))));
 };
 exports.Avatar = Avatar;
 function stringToHslColor(str = '', saturation = 50, lightness = 40) {

package/dist/components/messages/channel-view.js

@@ -40,11 +40,26 @@ const globals_1 = require("../../globals");
 const channel_message_list_1 = require("./channel-message-list");
 const message_compose_1 = require("./message-compose");
 const ui_loader_1 = require("../../ui-router/ui-loader");
+const hooks_1 = require("../../hooks");
 const ChannelMessages = (props) => {
     const messagesEndRef = (0, react_1.useRef)(null);
     const [effects] = (0, react_1.useState)(() => ({}));
     const [scrolledToBottom, setScrolledToBottom] = (0, react_1.useState)(true);
-    let channelId = props.channelId;
+    const currentlyActiveGroupId = (0, hooks_1.useObservableState)("");
+    const userContext = (0, hooks_1.usePromise)(() => (0, peers_sdk_1.getUserContext)());
+    (0, react_1.useEffect)(() => {
+        if (userContext) {
+            currentlyActiveGroupId(userContext.currentlyActiveGroupId() || '');
+            const sub = userContext.currentlyActiveGroupId.subscribe(() => {
+                currentlyActiveGroupId(userContext?.currentlyActiveGroupId() || '');
+            });
+            return () => sub.dispose();
+        }
+    }, [userContext]);
+    if (!userContext) {
+        return react_1.default.createElement("div", null, "Loading...");
+    }
+    let channelId = props.channelId || currentlyActiveGroupId();
     // const scrollToBottom = (behavior: 'instant' | 'smooth' = 'instant') => {
     //   setTimeout(() => messagesEndRef.current?.scrollIntoView({ behavior }), 500);
     // };
@@ -54,8 +69,7 @@ const ChannelMessages = (props) => {
             (0, globals_1.openThread)(message.messageId);
         });
     };
-    channelId = channelId || globals_1.me.userId;
-    return (react_1.default.createElement("div", { className: "d-flex flex-column flex-col-reverse", style: {
+    return (react_1.default.createElement("div", { key: channelId, className: "d-flex flex-column flex-col-reverse", style: {
             // height: '100vh',
             height: 'calc(100vh - 50px)',
             // marginTop: '50px',

package/dist/components/router.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import "../screens/console-logs/console-logs-list";
 import "../screens/groups";
 import "../screens/contacts";
+import "../screens/network-viewer";
 export declare function Router({ path: providedPath }?: {
     path?: string;
 }): React.JSX.Element;

package/dist/components/router.js

@@ -73,6 +73,7 @@ const global_search_1 = require("../screens/search/global-search");
 require("../screens/console-logs/console-logs-list");
 require("../screens/groups");
 require("../screens/contacts");
+require("../screens/network-viewer");
 function Router({ path: providedPath } = {}) {
     try {
         // Use provided path or fall back to global mainContentPath

package/dist/components/trust-level-badge.d.ts

@@ -0,0 +1,7 @@
+import { TrustLevel } from '@peers-app/peers-sdk';
+import React from 'react';
+interface TrustLevelBadgeProps {
+    level: TrustLevel;
+}
+export declare const TrustLevelBadge: ({ level }: TrustLevelBadgeProps) => React.JSX.Element;
+export {};

package/dist/components/trust-level-badge.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrustLevelBadge = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const TrustLevelBadge = ({ level }) => {
+    // Define trust level configurations with their numeric values
+    const trustLevelConfigs = [
+        { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
+        { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
+        { value: peers_sdk_1.TrustLevel.Known, color: 'primary', icon: 'bi-shield-check', text: 'Known' },
+        { value: peers_sdk_1.TrustLevel.NewDevice, color: 'info', icon: 'bi-shield-plus', text: 'New Device' },
+        { value: peers_sdk_1.TrustLevel.NewUser, color: 'info', icon: 'bi-shield-plus', text: 'New User' },
+        { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
+        { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-exclamation', text: 'Untrusted' },
+        { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
+    ];
+    // Sort by trust level value (ascending, so lowest first)
+    const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
+    // Find the highest trust level that is at or below the current level
+    let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
+    for (const trustConfig of sortedConfigs) {
+        if (level >= trustConfig.value) {
+            config = trustConfig;
+        }
+        else {
+            break;
+        }
+    }
+    return (react_1.default.createElement("span", { className: `badge bg-${config.color} d-flex align-items-center gap-1` },
+        react_1.default.createElement("i", { className: config.icon }),
+        config.text));
+};
+exports.TrustLevelBadge = TrustLevelBadge;

package/dist/components/trust-level-dropdown.d.ts

@@ -0,0 +1,10 @@
+import { DataContext, TrustLevel } from '@peers-app/peers-sdk';
+import React from 'react';
+interface TrustLevelDropdownProps {
+    userId: string;
+    dataContext?: DataContext;
+    onChange?: (newLevel: TrustLevel) => void;
+    type?: 'user' | 'device';
+}
+export declare const TrustLevelDropdown: ({ userId, dataContext, onChange, type }: TrustLevelDropdownProps) => React.JSX.Element;
+export {};

package/dist/components/trust-level-dropdown.js

@@ -0,0 +1,98 @@
+"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.TrustLevelDropdown = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const loading_indicator_1 = require("./loading-indicator");
+const TrustLevelDropdown = ({ userId, dataContext, onChange, type = 'user' }) => {
+    const [trustLevel, setTrustLevelState] = (0, react_1.useState)(peers_sdk_1.TrustLevel.Unknown);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const allTrustLevelConfigs = [
+        { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
+        { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
+        { value: peers_sdk_1.TrustLevel.Known, color: 'primary', icon: 'bi-shield-check', text: 'Known' },
+        { value: peers_sdk_1.TrustLevel.NewDevice, color: 'info', icon: 'bi-shield-plus', text: 'New Device', showFor: 'device' },
+        { value: peers_sdk_1.TrustLevel.NewUser, color: 'info', icon: 'bi-shield-plus', text: 'New User', showFor: 'user' },
+        { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
+        { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-exclamation', text: 'Untrusted' },
+        { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
+    ];
+    // Filter configs based on type
+    const trustLevelConfigs = allTrustLevelConfigs.filter(config => !config.showFor || config.showFor === type);
+    (0, react_1.useEffect)(() => {
+        async function loadTrustLevel() {
+            const userContext = await (0, peers_sdk_1.getUserContext)();
+            const contextToUse = dataContext || userContext.userDataContext;
+            const level = await (0, peers_sdk_1.getUserTrustLevel)(contextToUse, userId);
+            setTrustLevelState(level);
+            setLoading(false);
+        }
+        loadTrustLevel();
+    }, [userId, dataContext]);
+    async function handleTrustLevelChange(newLevel) {
+        const userContext = await (0, peers_sdk_1.getUserContext)();
+        const contextToUse = dataContext || userContext.userDataContext;
+        await (0, peers_sdk_1.setUserTrustLevel)(userId, newLevel, contextToUse);
+        setTrustLevelState(newLevel);
+        if (onChange) {
+            onChange(newLevel);
+        }
+    }
+    // Find current config
+    const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
+    let currentConfig = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
+    for (const config of sortedConfigs) {
+        if (trustLevel >= config.value) {
+            currentConfig = config;
+        }
+        else {
+            break;
+        }
+    }
+    if (loading) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    return (react_1.default.createElement("div", { className: "dropdown" },
+        react_1.default.createElement("button", { className: `btn btn-sm btn-${currentConfig.color} dropdown-toggle d-flex align-items-center gap-1`, type: "button", "data-bs-toggle": "dropdown", "data-bs-auto-close": "true", "data-bs-popper-config": '{"strategy":"fixed"}', "aria-expanded": "false" },
+            react_1.default.createElement("i", { className: currentConfig.icon }),
+            currentConfig.text),
+        react_1.default.createElement("ul", { className: "dropdown-menu" }, trustLevelConfigs.map((config) => (react_1.default.createElement("li", { key: config.value },
+            react_1.default.createElement("button", { className: "dropdown-item p-2", onClick: () => handleTrustLevelChange(config.value) },
+                react_1.default.createElement("span", { className: `badge bg-${config.color} d-flex align-items-center gap-2 w-100 py-2 px-3 fs-6 ${trustLevel === config.value ? 'border border-dark border-2' : ''}` },
+                    react_1.default.createElement("i", { className: config.icon }),
+                    config.text))))))));
+};
+exports.TrustLevelDropdown = TrustLevelDropdown;

package/dist/screens/console-logs/log-display.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LogDisplay = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
 const moment_1 = __importDefault(require("moment"));
 const react_1 = __importDefault(require("react"));
 const getLevelColor = (level) => {
@@ -39,6 +40,12 @@ const LogDisplay = ({ log, columns }) => {
         const column = columns.find(c => c.key === key);
         return column ? `${column.width}px` : 'auto';
     };
+    if (typeof log.context === 'string') {
+        try {
+            log.context = (0, peers_sdk_1.fromJSONString)(log.context);
+        }
+        catch (err) { }
+    }
     return (react_1.default.createElement("tr", null,
         react_1.default.createElement("td", { className: "text-nowrap", style: { fontSize: '0.75rem', width: getColumnWidth('timestamp'), padding: '0.5rem' } }, (0, moment_1.default)(log.timestamp).format('MM/DD HH:mm:ss.SSS')),
         react_1.default.createElement("td", { style: { width: getColumnWidth('level'), padding: '0.5rem' } },

package/dist/screens/contacts/contact-details.js

@@ -9,6 +9,7 @@ const react_1 = __importDefault(require("react"));
 const input_1 = require("../../components/input");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const save_button_1 = require("../../components/save-button");
+const trust_level_dropdown_1 = require("../../components/trust-level-dropdown");
 const tabs_1 = require("../../components/tabs");
 const hooks_1 = require("../../hooks");
 const tabs_state_1 = require("../../tabs-layout/tabs-state");
@@ -48,56 +49,22 @@ const ContactInfo = (props) => {
     const { contact } = props;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("small", null, "Name:"),
-            react_1.default.createElement(input_1.Input, { value: contact.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Contact name", title: "Contact name" })),
-        react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("small", null, "User ID:"),
-            react_1.default.createElement("div", { className: "form-control-plaintext text-muted small" }, contact.userId)),
+            react_1.default.createElement("div", { className: "d-flex align-items-center gap-3" },
+                react_1.default.createElement("div", { className: "flex-grow-1" },
+                    react_1.default.createElement("small", { className: "text-muted d-block mb-1" }, "Name"),
+                    react_1.default.createElement(input_1.Input, { value: contact.qs.name, className: "form-control mb-3 ps-2", placeholder: "Contact name", title: "Contact name" })),
+                react_1.default.createElement("div", { className: "border-start ps-3" },
+                    react_1.default.createElement("small", { className: "text-muted d-block mb-1" }, "User ID"),
+                    react_1.default.createElement("code", { className: "small" }, contact.userId)),
+                react_1.default.createElement("div", { className: "border-start ps-3" },
+                    react_1.default.createElement("small", { className: "text-muted d-block mb-1" }, "Trust Level"),
+                    react_1.default.createElement(trust_level_dropdown_1.TrustLevelDropdown, { userId: contact.userId })))),
         react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement("small", null, "Public Key:"),
             react_1.default.createElement(input_1.Input, { value: contact.qs.publicKey, className: "form-control mb-3 p-0 ps-2", placeholder: "Public key", title: "Public key" })),
         react_1.default.createElement("div", { className: "mb-3" },
             react_1.default.createElement("small", null, "Public Box Key:"),
-            react_1.default.createElement(input_1.Input, { value: contact.qs.publicBoxKey, className: "form-control mb-3 p-0 ps-2", placeholder: "Public box key", title: "Public box key" })),
-        react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("small", null, "Trust Level:"),
-            react_1.default.createElement("div", { className: "mt-2" },
-                react_1.default.createElement(TrustLevelSelector, { contact: contact })))));
-};
-const TrustLevelSelector = (props) => {
-    const { contact } = props;
-    const [trustLevel, setTrustLevelState] = react_1.default.useState(peers_sdk_1.TrustLevel.Unknown);
-    const [loading, setLoading] = react_1.default.useState(true);
-    react_1.default.useEffect(() => {
-        async function loadTrustLevel() {
-            const userContext = await (0, peers_sdk_1.getUserContext)();
-            const level = await (0, peers_sdk_1.getUserTrustLevel)(userContext.userDataContext, contact.userId);
-            setTrustLevelState(level);
-            setLoading(false);
-        }
-        loadTrustLevel();
-    }, [contact.userId]);
-    async function handleTrustLevelChange(newLevel) {
-        const userContext = await (0, peers_sdk_1.getUserContext)();
-        await (0, peers_sdk_1.setUserTrustLevel)(contact.userId, newLevel, userContext.userDataContext);
-        setTrustLevelState(newLevel);
-    }
-    const trustLevels = [
-        { value: peers_sdk_1.TrustLevel.Self, label: 'Self', color: 'success' },
-        { value: peers_sdk_1.TrustLevel.Trusted, label: 'Trusted', color: 'success' },
-        { value: peers_sdk_1.TrustLevel.Known, label: 'Known', color: 'info' },
-        { value: peers_sdk_1.TrustLevel.NewDevice, label: 'New Device', color: 'primary' },
-        { value: peers_sdk_1.TrustLevel.NewUser, label: 'New User', color: 'primary' },
-        { value: peers_sdk_1.TrustLevel.Unknown, label: 'Unknown', color: 'warning' },
-        { value: peers_sdk_1.TrustLevel.Untrusted, label: 'Untrusted', color: 'danger' },
-        { value: peers_sdk_1.TrustLevel.Malicious, label: 'Malicious', color: 'danger' },
-    ];
-    if (loading) {
-        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
-    }
-    return (react_1.default.createElement("div", { className: "d-flex flex-wrap gap-2" }, trustLevels.map(level => (react_1.default.createElement("button", { key: level.value, className: `btn btn-sm ${trustLevel === level.value
-            ? `btn-${level.color}`
-            : `btn-outline-${level.color}`}`, onClick: () => handleTrustLevelChange(level.value) }, level.label)))));
+            react_1.default.createElement(input_1.Input, { value: contact.qs.publicBoxKey, className: "form-control mb-3 p-0 ps-2", placeholder: "Public box key", title: "Public box key" }))));
 };
 (0, ui_loader_1.registerInternalPeersUI)({
     peersUIId: '00contact00details00component',

package/dist/screens/contacts/contact-list.js

@@ -39,6 +39,7 @@ 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 trust_level_badge_1 = require("../../components/trust-level-badge");
 const globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
@@ -119,12 +120,21 @@ function ContactList() {
         let lastSource = null;
         contacts.forEach((contact, index) => {
             // Add horizontal separator when source changes
-            if (lastSource && lastSource !== contact.source) {
+            if (lastSource !== contact.source) {
                 elements.push(react_1.default.createElement("div", { key: `separator-${index}`, className: "my-3" },
-                    react_1.default.createElement("hr", { className: "border-secondary opacity-50" })));
+                    lastSource !== null &&
+                        react_1.default.createElement("hr", { className: "border-secondary opacity-50" }),
+                    contact.source === 'userDataContext' &&
+                        react_1.default.createElement("h5", null,
+                            "Personal Contacts ",
+                            lastSource !== null && "(not in this group)"),
+                    contact.source === 'currentDataContext' &&
+                        react_1.default.createElement("h5", null, "Users in this group"),
+                    contact.source === 'otherDataContexts' &&
+                        react_1.default.createElement("h5", null, "Users from other groups")));
+                lastSource = contact.source;
             }
             elements.push(react_1.default.createElement(ContactCard, { key: contact.userId, contact: contact }));
-            lastSource = contact.source;
         });
         return elements;
     }
@@ -168,39 +178,11 @@ const ContactCard = ({ contact }) => {
                         react_1.default.createElement("i", { className: `${getSourceIcon(contact.source)} me-1` }),
                         getSourceLabel(contact.source))))),
         react_1.default.createElement("div", { className: "d-flex align-items-center" },
-            react_1.default.createElement(TrustLevelBadge, { level: contact.trustLevel || peers_sdk_1.TrustLevel.Unknown }),
+            react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: contact.trustLevel || peers_sdk_1.TrustLevel.Unknown }),
             react_1.default.createElement("a", { href: `#contacts/${contact.userId}`, className: "btn btn-outline-primary btn-sm ms-2" },
                 react_1.default.createElement("i", { className: "bi-eye me-1" }),
                 "View"))));
 };
-const TrustLevelBadge = ({ level }) => {
-    // Define trust level configurations with their numeric values
-    const trustLevelConfigs = [
-        { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
-        { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
-        { value: peers_sdk_1.TrustLevel.Known, color: 'info', icon: 'bi-shield-check', text: 'Known' },
-        { value: peers_sdk_1.TrustLevel.NewDevice, color: 'primary', icon: 'bi-shield-plus', text: 'New Device' },
-        { value: peers_sdk_1.TrustLevel.NewUser, color: 'primary', icon: 'bi-shield-plus', text: 'New User' },
-        { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
-        { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-x', text: 'Untrusted' },
-        { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
-    ];
-    // Sort by trust level value (ascending, so lowest first)
-    const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
-    // Find the highest trust level that is at or below the current level
-    let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
-    for (const trustConfig of sortedConfigs) {
-        if (level >= trustConfig.value) {
-            config = trustConfig;
-        }
-        else {
-            break;
-        }
-    }
-    return (react_1.default.createElement("span", { className: `badge bg-${config.color} d-flex align-items-center gap-1` },
-        react_1.default.createElement("i", { className: config.icon }),
-        config.text));
-};
 (0, ui_loader_1.registerInternalPeersUI)({
     peersUIId: '00mfc4ql0lgqmjxrpvcd4ufk0',
     component: ContactList,

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

@@ -7,6 +7,7 @@ exports.GroupMembersUI = void 0;
 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 GroupMembersUI = (props) => {
@@ -23,7 +24,8 @@ const GroupMembersUI = (props) => {
         // Get user details for each member using the group context
         const membersWithUsers = await Promise.all(members.map(async (member) => {
             const user = await (0, peers_sdk_1.getUserById)(member.userId, {
-                currentDataContext: groupDataContext
+                currentDataContext: groupDataContext,
+                includeTrustLevel: true
             });
             // If user found from external source, save to current group
             if (user && user.source !== 'currentDataContext') {
@@ -42,6 +44,22 @@ const GroupMembersUI = (props) => {
                     console.error('Failed to save user to group context:', saveErr);
                 }
             }
+            // TODO don't do it this way!!! Use group-specific trust level fetching
+            if (user && !user.trustLevel) {
+                const userCursor = await (0, peers_sdk_1.usersCursor)({ userId: member.userId }, { includeTrustLevel: true });
+                const _user = await userCursor.next();
+                user.trustLevel = _user?.trustLevel || user.trustLevel || peers_sdk_1.TrustLevel.Unknown;
+            }
+            // // Fetch trust level for this user in the group context
+            // if (user) {
+            //   try {
+            //     const trustLevel = await getUserTrustLevel(groupDataContext, user.userId);
+            //     user.trustLevel = trustLevel;
+            //   } catch (err) {
+            //     console.error('Failed to get trust level:', err);
+            //     user.trustLevel = TrustLevel.Unknown;
+            //   }
+            // }
             return {
                 member,
                 user: user || null
@@ -84,7 +102,7 @@ const GroupMembersUI = (props) => {
     // Search function for typeahead
     const searchContacts = async (query) => {
         try {
-            const cursor = await (0, peers_sdk_1.usersCursor)({ name: { $matchWords: query } });
+            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) {
@@ -251,7 +269,8 @@ const GroupMembersUI = (props) => {
                                     "Other Groups"))),
                             user && user.userId !== user.name && (react_1.default.createElement("small", { className: "text-muted d-block" }, member.userId))))),
                 react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                    react_1.default.createElement(TrustLevelBadge, { level: user?.trustLevel || peers_sdk_1.TrustLevel.Unknown }),
+                    react_1.default.createElement("div", { className: "me-2" },
+                        react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: user?.trustLevel || peers_sdk_1.TrustLevel.Unknown })),
                     react_1.default.createElement("a", { href: `#contacts/${member.userId}`, className: "btn btn-outline-primary btn-sm me-2" },
                         react_1.default.createElement("i", { className: "bi-eye me-1" }),
                         "View"),
@@ -283,31 +302,3 @@ const GroupMembersUI = (props) => {
                 " Full control including group deletion"))));
 };
 exports.GroupMembersUI = GroupMembersUI;
-const TrustLevelBadge = ({ level }) => {
-    // Define trust level configurations with their numeric values
-    const trustLevelConfigs = [
-        { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
-        { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
-        { value: peers_sdk_1.TrustLevel.Known, color: 'info', icon: 'bi-shield-check', text: 'Known' },
-        { value: peers_sdk_1.TrustLevel.NewDevice, color: 'primary', icon: 'bi-shield-plus', text: 'New Device' },
-        { value: peers_sdk_1.TrustLevel.NewUser, color: 'primary', icon: 'bi-shield-plus', text: 'New User' },
-        { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
-        { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-x', text: 'Untrusted' },
-        { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
-    ];
-    // Sort by trust level value (ascending, so lowest first)
-    const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
-    // Find the highest trust level that is at or below the current level
-    let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
-    for (const trustConfig of sortedConfigs) {
-        if (level >= trustConfig.value) {
-            config = trustConfig;
-        }
-        else {
-            break;
-        }
-    }
-    return (react_1.default.createElement("span", { className: `badge bg-${config.color} d-flex align-items-center gap-1 me-2`, style: { fontSize: '0.7rem' } },
-        react_1.default.createElement("i", { className: config.icon }),
-        config.text));
-};

package/dist/screens/network-viewer/cpu-usage-graph.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface ICpuUsageGraphProps {
+    /**
+     * Function to fetch current CPU usage percentage
+     */
+    fetchCpuUsage: () => Promise<number>;
+    /**
+     * Duration in minutes to display
+     */
+    durationMinutes?: number;
+    /**
+     * Update interval in milliseconds
+     */
+    updateInterval?: number;
+    /**
+     * Minimum height in pixels (optional, defaults to 80)
+     */
+    minHeight?: number;
+}
+export declare function CpuUsageGraph({ fetchCpuUsage, durationMinutes, updateInterval, minHeight }: ICpuUsageGraphProps): React.JSX.Element;
+export {};