@peers-app/peers-ui 0.7.23 → 0.7.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/components/messages/avatar.js +46 -1
  2. package/dist/components/messages/channel-view.js +17 -3
  3. package/dist/components/router.d.ts +2 -0
  4. package/dist/components/router.js +2 -0
  5. package/dist/components/trust-level-badge.d.ts +7 -0
  6. package/dist/components/trust-level-badge.js +37 -0
  7. package/dist/components/trust-level-dropdown.d.ts +10 -0
  8. package/dist/components/trust-level-dropdown.js +98 -0
  9. package/dist/screens/contacts/contact-details.js +12 -45
  10. package/dist/screens/contacts/contact-list.js +14 -32
  11. package/dist/screens/data-explorer/data-explorer.d.ts +2 -0
  12. package/dist/screens/data-explorer/data-explorer.js +288 -0
  13. package/dist/screens/data-explorer/index.d.ts +4 -0
  14. package/dist/screens/data-explorer/index.js +21 -0
  15. package/dist/screens/data-explorer/query-executor.d.ts +2 -0
  16. package/dist/screens/data-explorer/query-executor.js +281 -0
  17. package/dist/screens/groups/group-members.js +22 -31
  18. package/dist/screens/network-viewer/cpu-usage-graph.d.ts +21 -0
  19. package/dist/screens/network-viewer/cpu-usage-graph.js +200 -0
  20. package/dist/screens/network-viewer/device-details-modal.d.ts +8 -0
  21. package/dist/screens/network-viewer/device-details-modal.js +198 -0
  22. package/dist/screens/network-viewer/index.d.ts +5 -0
  23. package/dist/screens/network-viewer/index.js +22 -0
  24. package/dist/screens/network-viewer/network-viewer.d.ts +2 -0
  25. package/dist/screens/network-viewer/network-viewer.js +408 -0
  26. package/dist/screens/network-viewer/usage-graph.d.ts +61 -0
  27. package/dist/screens/network-viewer/usage-graph.js +284 -0
  28. package/dist/screens/profile.d.ts +1 -1
  29. package/dist/screens/profile.js +13 -3
  30. package/dist/screens/settings/settings-page.js +81 -4
  31. package/dist/system-apps/data-explorer.app.d.ts +2 -0
  32. package/dist/system-apps/data-explorer.app.js +9 -0
  33. package/dist/system-apps/index.d.ts +2 -0
  34. package/dist/system-apps/index.js +9 -1
  35. package/dist/system-apps/network-viewer.app.d.ts +2 -0
  36. package/dist/system-apps/network-viewer.app.js +9 -0
  37. package/dist/tabs-layout/tabs-state.js +2 -2
  38. package/package.json +3 -3
  39. package/src/components/messages/avatar.tsx +59 -1
  40. package/src/components/messages/channel-message-list.tsx +1 -1
  41. package/src/components/messages/channel-view.tsx +24 -7
  42. package/src/components/router.tsx +2 -0
  43. package/src/components/trust-level-badge.tsx +40 -0
  44. package/src/components/trust-level-dropdown.tsx +100 -0
  45. package/src/screens/contacts/contact-details.tsx +21 -76
  46. package/src/screens/contacts/contact-list.tsx +15 -43
  47. package/src/screens/data-explorer/data-explorer.tsx +402 -0
  48. package/src/screens/data-explorer/index.ts +7 -0
  49. package/src/screens/data-explorer/query-executor.tsx +431 -0
  50. package/src/screens/groups/group-members.tsx +31 -47
  51. package/src/screens/network-viewer/cpu-usage-graph.tsx +298 -0
  52. package/src/screens/network-viewer/device-details-modal.tsx +320 -0
  53. package/src/screens/network-viewer/index.ts +8 -0
  54. package/src/screens/network-viewer/network-viewer.tsx +680 -0
  55. package/src/screens/network-viewer/usage-graph.tsx +447 -0
  56. package/src/screens/profile.tsx +11 -4
  57. package/src/screens/settings/settings-page.tsx +66 -3
  58. package/src/system-apps/data-explorer.app.ts +8 -0
  59. package/src/system-apps/index.ts +6 -0
  60. package/src/system-apps/network-viewer.app.ts +8 -0
  61. package/src/tabs-layout/tabs-state.ts +3 -3
@@ -22,6 +22,13 @@ const Avatar = (props) => {
22
22
  return (0, peers_sdk_1.Assistants)().get(assistantId, { useCache: true });
23
23
  }
24
24
  }, undefined, [assistantId]);
25
+ const trustLevel = (0, hooks_1.usePromise)(async () => {
26
+ if (userId) {
27
+ const userContext = await (0, peers_sdk_1.getUserContext)();
28
+ return await (0, peers_sdk_1.getUserTrustLevel)(userContext.userDataContext, userId);
29
+ }
30
+ return peers_sdk_1.TrustLevel.Unknown;
31
+ }, peers_sdk_1.TrustLevel.Unknown, [userId]);
25
32
  let initials = "?";
26
33
  let name = assistant?.name || user?.name;
27
34
  if (user) {
@@ -41,6 +48,31 @@ const Avatar = (props) => {
41
48
  // backgroundColor = stringToHslColor(name || '', 100, 100);
42
49
  backgroundColor = stringToHslColor('', 0, 70);
43
50
  }
51
+ // Get trust level config
52
+ const getTrustLevelConfig = (level) => {
53
+ const configs = [
54
+ { value: peers_sdk_1.TrustLevel.Self, color: '#198754', icon: 'bi-shield-fill-check' },
55
+ { value: peers_sdk_1.TrustLevel.Trusted, color: '#198754', icon: 'bi-shield-fill-check' },
56
+ { value: peers_sdk_1.TrustLevel.Known, color: '#0d6efd', icon: 'bi-shield-fill-check' },
57
+ { value: peers_sdk_1.TrustLevel.NewDevice, color: '#0dcaf0', icon: 'bi-shield-fill-plus' },
58
+ { value: peers_sdk_1.TrustLevel.NewUser, color: '#0dcaf0', icon: 'bi-shield-fill-plus' },
59
+ { value: peers_sdk_1.TrustLevel.Unknown, color: '#ffc107', icon: 'bi-shield-fill-exclamation' },
60
+ { value: peers_sdk_1.TrustLevel.Untrusted, color: '#dc3545', icon: 'bi-shield-fill-exclamation' },
61
+ { value: peers_sdk_1.TrustLevel.Malicious, color: '#dc3545', icon: 'bi-shield-fill-x' }
62
+ ];
63
+ const sortedConfigs = configs.sort((a, b) => a.value - b.value);
64
+ let config = { color: '#6c757d', icon: 'bi-shield' };
65
+ for (const c of sortedConfigs) {
66
+ if (level >= c.value) {
67
+ config = c;
68
+ }
69
+ else {
70
+ break;
71
+ }
72
+ }
73
+ return config;
74
+ };
75
+ const trustConfig = getTrustLevelConfig(trustLevel || peers_sdk_1.TrustLevel.Unknown);
44
76
  return (react_1.default.createElement("div", { className: "position-relative" },
45
77
  react_1.default.createElement("div", { className: "rounded-circle d-flex justify-content-center align-items-center fs-4 border", style: {
46
78
  width: '40px',
@@ -50,7 +82,20 @@ const Avatar = (props) => {
50
82
  } },
51
83
  react_1.default.createElement("span", { style: { fontSize: '15pt' } },
52
84
  assistant && react_1.default.createElement("i", { className: "bi bi-person-fill-gear" }),
53
- !assistant && initials.toUpperCase()))));
85
+ !assistant && initials.toUpperCase())),
86
+ !assistant && (react_1.default.createElement("div", { className: "position-absolute d-flex justify-content-center align-items-center", style: {
87
+ bottom: '-4px',
88
+ right: '0px',
89
+ width: '18px',
90
+ height: '18px',
91
+ // backgroundColor: 'white',
92
+ borderRadius: '50%',
93
+ // border: '1px solid #dee2e6',
94
+ } },
95
+ react_1.default.createElement("i", { className: trustConfig.icon, style: {
96
+ fontSize: '12px',
97
+ color: trustConfig.color,
98
+ } })))));
54
99
  };
55
100
  exports.Avatar = Avatar;
56
101
  function stringToHslColor(str = '', saturation = 50, lightness = 40) {
@@ -40,11 +40,26 @@ const globals_1 = require("../../globals");
40
40
  const channel_message_list_1 = require("./channel-message-list");
41
41
  const message_compose_1 = require("./message-compose");
42
42
  const ui_loader_1 = require("../../ui-router/ui-loader");
43
+ const hooks_1 = require("../../hooks");
43
44
  const ChannelMessages = (props) => {
44
45
  const messagesEndRef = (0, react_1.useRef)(null);
45
46
  const [effects] = (0, react_1.useState)(() => ({}));
46
47
  const [scrolledToBottom, setScrolledToBottom] = (0, react_1.useState)(true);
47
- let channelId = props.channelId;
48
+ const currentlyActiveGroupId = (0, hooks_1.useObservableState)("");
49
+ const userContext = (0, hooks_1.usePromise)(() => (0, peers_sdk_1.getUserContext)());
50
+ (0, react_1.useEffect)(() => {
51
+ if (userContext) {
52
+ currentlyActiveGroupId(userContext.currentlyActiveGroupId() || '');
53
+ const sub = userContext.currentlyActiveGroupId.subscribe(() => {
54
+ currentlyActiveGroupId(userContext?.currentlyActiveGroupId() || '');
55
+ });
56
+ return () => sub.dispose();
57
+ }
58
+ }, [userContext]);
59
+ if (!userContext) {
60
+ return react_1.default.createElement("div", null, "Loading...");
61
+ }
62
+ let channelId = props.channelId || currentlyActiveGroupId();
48
63
  // const scrollToBottom = (behavior: 'instant' | 'smooth' = 'instant') => {
49
64
  // setTimeout(() => messagesEndRef.current?.scrollIntoView({ behavior }), 500);
50
65
  // };
@@ -54,8 +69,7 @@ const ChannelMessages = (props) => {
54
69
  (0, globals_1.openThread)(message.messageId);
55
70
  });
56
71
  };
57
- channelId = channelId || globals_1.me.userId;
58
- return (react_1.default.createElement("div", { className: "d-flex flex-column flex-col-reverse", style: {
72
+ return (react_1.default.createElement("div", { key: channelId, className: "d-flex flex-column flex-col-reverse", style: {
59
73
  // height: '100vh',
60
74
  height: 'calc(100vh - 50px)',
61
75
  // marginTop: '50px',
@@ -2,6 +2,8 @@ import React from "react";
2
2
  import "../screens/console-logs/console-logs-list";
3
3
  import "../screens/groups";
4
4
  import "../screens/contacts";
5
+ import "../screens/network-viewer";
6
+ import "../screens/data-explorer";
5
7
  export declare function Router({ path: providedPath }?: {
6
8
  path?: string;
7
9
  }): React.JSX.Element;
@@ -73,6 +73,8 @@ const global_search_1 = require("../screens/search/global-search");
73
73
  require("../screens/console-logs/console-logs-list");
74
74
  require("../screens/groups");
75
75
  require("../screens/contacts");
76
+ require("../screens/network-viewer");
77
+ require("../screens/data-explorer");
76
78
  function Router({ path: providedPath } = {}) {
77
79
  try {
78
80
  // Use provided path or fall back to global mainContentPath
@@ -0,0 +1,7 @@
1
+ import { TrustLevel } from '@peers-app/peers-sdk';
2
+ import React from 'react';
3
+ interface TrustLevelBadgeProps {
4
+ level: TrustLevel;
5
+ }
6
+ export declare const TrustLevelBadge: ({ level }: TrustLevelBadgeProps) => React.JSX.Element;
7
+ export {};
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.TrustLevelBadge = void 0;
7
+ const peers_sdk_1 = require("@peers-app/peers-sdk");
8
+ const react_1 = __importDefault(require("react"));
9
+ const TrustLevelBadge = ({ level }) => {
10
+ // Define trust level configurations with their numeric values
11
+ const trustLevelConfigs = [
12
+ { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
13
+ { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
14
+ { value: peers_sdk_1.TrustLevel.Known, color: 'primary', icon: 'bi-shield-check', text: 'Known' },
15
+ { value: peers_sdk_1.TrustLevel.NewDevice, color: 'info', icon: 'bi-shield-plus', text: 'New Device' },
16
+ { value: peers_sdk_1.TrustLevel.NewUser, color: 'info', icon: 'bi-shield-plus', text: 'New User' },
17
+ { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
18
+ { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-exclamation', text: 'Untrusted' },
19
+ { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
20
+ ];
21
+ // Sort by trust level value (ascending, so lowest first)
22
+ const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
23
+ // Find the highest trust level that is at or below the current level
24
+ let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
25
+ for (const trustConfig of sortedConfigs) {
26
+ if (level >= trustConfig.value) {
27
+ config = trustConfig;
28
+ }
29
+ else {
30
+ break;
31
+ }
32
+ }
33
+ return (react_1.default.createElement("span", { className: `badge bg-${config.color} d-flex align-items-center gap-1` },
34
+ react_1.default.createElement("i", { className: config.icon }),
35
+ config.text));
36
+ };
37
+ exports.TrustLevelBadge = TrustLevelBadge;
@@ -0,0 +1,10 @@
1
+ import { DataContext, TrustLevel } from '@peers-app/peers-sdk';
2
+ import React from 'react';
3
+ interface TrustLevelDropdownProps {
4
+ userId: string;
5
+ dataContext?: DataContext;
6
+ onChange?: (newLevel: TrustLevel) => void;
7
+ type?: 'user' | 'device';
8
+ }
9
+ export declare const TrustLevelDropdown: ({ userId, dataContext, onChange, type }: TrustLevelDropdownProps) => React.JSX.Element;
10
+ export {};
@@ -0,0 +1,98 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ Object.defineProperty(exports, "__esModule", { value: true });
36
+ exports.TrustLevelDropdown = void 0;
37
+ const peers_sdk_1 = require("@peers-app/peers-sdk");
38
+ const react_1 = __importStar(require("react"));
39
+ const loading_indicator_1 = require("./loading-indicator");
40
+ const TrustLevelDropdown = ({ userId, dataContext, onChange, type = 'user' }) => {
41
+ const [trustLevel, setTrustLevelState] = (0, react_1.useState)(peers_sdk_1.TrustLevel.Unknown);
42
+ const [loading, setLoading] = (0, react_1.useState)(true);
43
+ const allTrustLevelConfigs = [
44
+ { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
45
+ { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
46
+ { value: peers_sdk_1.TrustLevel.Known, color: 'primary', icon: 'bi-shield-check', text: 'Known' },
47
+ { value: peers_sdk_1.TrustLevel.NewDevice, color: 'info', icon: 'bi-shield-plus', text: 'New Device', showFor: 'device' },
48
+ { value: peers_sdk_1.TrustLevel.NewUser, color: 'info', icon: 'bi-shield-plus', text: 'New User', showFor: 'user' },
49
+ { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
50
+ { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-exclamation', text: 'Untrusted' },
51
+ { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
52
+ ];
53
+ // Filter configs based on type
54
+ const trustLevelConfigs = allTrustLevelConfigs.filter(config => !config.showFor || config.showFor === type);
55
+ (0, react_1.useEffect)(() => {
56
+ async function loadTrustLevel() {
57
+ const userContext = await (0, peers_sdk_1.getUserContext)();
58
+ const contextToUse = dataContext || userContext.userDataContext;
59
+ const level = await (0, peers_sdk_1.getUserTrustLevel)(contextToUse, userId);
60
+ setTrustLevelState(level);
61
+ setLoading(false);
62
+ }
63
+ loadTrustLevel();
64
+ }, [userId, dataContext]);
65
+ async function handleTrustLevelChange(newLevel) {
66
+ const userContext = await (0, peers_sdk_1.getUserContext)();
67
+ const contextToUse = dataContext || userContext.userDataContext;
68
+ await (0, peers_sdk_1.setUserTrustLevel)(userId, newLevel, contextToUse);
69
+ setTrustLevelState(newLevel);
70
+ if (onChange) {
71
+ onChange(newLevel);
72
+ }
73
+ }
74
+ // Find current config
75
+ const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
76
+ let currentConfig = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
77
+ for (const config of sortedConfigs) {
78
+ if (trustLevel >= config.value) {
79
+ currentConfig = config;
80
+ }
81
+ else {
82
+ break;
83
+ }
84
+ }
85
+ if (loading) {
86
+ return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
87
+ }
88
+ return (react_1.default.createElement("div", { className: "dropdown" },
89
+ 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" },
90
+ react_1.default.createElement("i", { className: currentConfig.icon }),
91
+ currentConfig.text),
92
+ react_1.default.createElement("ul", { className: "dropdown-menu" }, trustLevelConfigs.map((config) => (react_1.default.createElement("li", { key: config.value },
93
+ react_1.default.createElement("button", { className: "dropdown-item p-2", onClick: () => handleTrustLevelChange(config.value) },
94
+ 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' : ''}` },
95
+ react_1.default.createElement("i", { className: config.icon }),
96
+ config.text))))))));
97
+ };
98
+ exports.TrustLevelDropdown = TrustLevelDropdown;
@@ -9,6 +9,7 @@ const react_1 = __importDefault(require("react"));
9
9
  const input_1 = require("../../components/input");
10
10
  const loading_indicator_1 = require("../../components/loading-indicator");
11
11
  const save_button_1 = require("../../components/save-button");
12
+ const trust_level_dropdown_1 = require("../../components/trust-level-dropdown");
12
13
  const tabs_1 = require("../../components/tabs");
13
14
  const hooks_1 = require("../../hooks");
14
15
  const tabs_state_1 = require("../../tabs-layout/tabs-state");
@@ -48,56 +49,22 @@ const ContactInfo = (props) => {
48
49
  const { contact } = props;
49
50
  return (react_1.default.createElement("div", null,
50
51
  react_1.default.createElement("div", { className: "mb-3" },
51
- react_1.default.createElement("small", null, "Name:"),
52
- 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" })),
53
- react_1.default.createElement("div", { className: "mb-3" },
54
- react_1.default.createElement("small", null, "User ID:"),
55
- react_1.default.createElement("div", { className: "form-control-plaintext text-muted small" }, contact.userId)),
52
+ react_1.default.createElement("div", { className: "d-flex align-items-center gap-3" },
53
+ react_1.default.createElement("div", { className: "flex-grow-1" },
54
+ react_1.default.createElement("small", { className: "text-muted d-block mb-1" }, "Name"),
55
+ react_1.default.createElement(input_1.Input, { value: contact.qs.name, className: "form-control mb-3 ps-2", placeholder: "Contact name", title: "Contact name" })),
56
+ react_1.default.createElement("div", { className: "border-start ps-3" },
57
+ react_1.default.createElement("small", { className: "text-muted d-block mb-1" }, "User ID"),
58
+ react_1.default.createElement("code", { className: "small" }, contact.userId)),
59
+ react_1.default.createElement("div", { className: "border-start ps-3" },
60
+ react_1.default.createElement("small", { className: "text-muted d-block mb-1" }, "Trust Level"),
61
+ react_1.default.createElement(trust_level_dropdown_1.TrustLevelDropdown, { userId: contact.userId })))),
56
62
  react_1.default.createElement("div", { className: "mb-3" },
57
63
  react_1.default.createElement("small", null, "Public Key:"),
58
64
  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" })),
59
65
  react_1.default.createElement("div", { className: "mb-3" },
60
66
  react_1.default.createElement("small", null, "Public Box Key:"),
61
- 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" })),
62
- react_1.default.createElement("div", { className: "mb-3" },
63
- react_1.default.createElement("small", null, "Trust Level:"),
64
- react_1.default.createElement("div", { className: "mt-2" },
65
- react_1.default.createElement(TrustLevelSelector, { contact: contact })))));
66
- };
67
- const TrustLevelSelector = (props) => {
68
- const { contact } = props;
69
- const [trustLevel, setTrustLevelState] = react_1.default.useState(peers_sdk_1.TrustLevel.Unknown);
70
- const [loading, setLoading] = react_1.default.useState(true);
71
- react_1.default.useEffect(() => {
72
- async function loadTrustLevel() {
73
- const userContext = await (0, peers_sdk_1.getUserContext)();
74
- const level = await (0, peers_sdk_1.getUserTrustLevel)(userContext.userDataContext, contact.userId);
75
- setTrustLevelState(level);
76
- setLoading(false);
77
- }
78
- loadTrustLevel();
79
- }, [contact.userId]);
80
- async function handleTrustLevelChange(newLevel) {
81
- const userContext = await (0, peers_sdk_1.getUserContext)();
82
- await (0, peers_sdk_1.setUserTrustLevel)(contact.userId, newLevel, userContext.userDataContext);
83
- setTrustLevelState(newLevel);
84
- }
85
- const trustLevels = [
86
- { value: peers_sdk_1.TrustLevel.Self, label: 'Self', color: 'success' },
87
- { value: peers_sdk_1.TrustLevel.Trusted, label: 'Trusted', color: 'success' },
88
- { value: peers_sdk_1.TrustLevel.Known, label: 'Known', color: 'info' },
89
- { value: peers_sdk_1.TrustLevel.NewDevice, label: 'New Device', color: 'primary' },
90
- { value: peers_sdk_1.TrustLevel.NewUser, label: 'New User', color: 'primary' },
91
- { value: peers_sdk_1.TrustLevel.Unknown, label: 'Unknown', color: 'warning' },
92
- { value: peers_sdk_1.TrustLevel.Untrusted, label: 'Untrusted', color: 'danger' },
93
- { value: peers_sdk_1.TrustLevel.Malicious, label: 'Malicious', color: 'danger' },
94
- ];
95
- if (loading) {
96
- return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
97
- }
98
- 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
99
- ? `btn-${level.color}`
100
- : `btn-outline-${level.color}`}`, onClick: () => handleTrustLevelChange(level.value) }, level.label)))));
67
+ 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" }))));
101
68
  };
102
69
  (0, ui_loader_1.registerInternalPeersUI)({
103
70
  peersUIId: '00contact00details00component',
@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
39
39
  const input_1 = require("../../components/input");
40
40
  const lazy_list_1 = require("../../components/lazy-list");
41
41
  const loading_indicator_1 = require("../../components/loading-indicator");
42
+ const trust_level_badge_1 = require("../../components/trust-level-badge");
42
43
  const globals_1 = require("../../globals");
43
44
  const hooks_1 = require("../../hooks");
44
45
  const ui_loader_1 = require("../../ui-router/ui-loader");
@@ -119,12 +120,21 @@ function ContactList() {
119
120
  let lastSource = null;
120
121
  contacts.forEach((contact, index) => {
121
122
  // Add horizontal separator when source changes
122
- if (lastSource && lastSource !== contact.source) {
123
+ if (lastSource !== contact.source) {
123
124
  elements.push(react_1.default.createElement("div", { key: `separator-${index}`, className: "my-3" },
124
- react_1.default.createElement("hr", { className: "border-secondary opacity-50" })));
125
+ lastSource !== null &&
126
+ react_1.default.createElement("hr", { className: "border-secondary opacity-50" }),
127
+ contact.source === 'userDataContext' &&
128
+ react_1.default.createElement("h5", null,
129
+ "Personal Contacts ",
130
+ lastSource !== null && "(not in this group)"),
131
+ contact.source === 'currentDataContext' &&
132
+ react_1.default.createElement("h5", null, "Users in this group"),
133
+ contact.source === 'otherDataContexts' &&
134
+ react_1.default.createElement("h5", null, "Users from other groups")));
135
+ lastSource = contact.source;
125
136
  }
126
137
  elements.push(react_1.default.createElement(ContactCard, { key: contact.userId, contact: contact }));
127
- lastSource = contact.source;
128
138
  });
129
139
  return elements;
130
140
  }
@@ -168,39 +178,11 @@ const ContactCard = ({ contact }) => {
168
178
  react_1.default.createElement("i", { className: `${getSourceIcon(contact.source)} me-1` }),
169
179
  getSourceLabel(contact.source))))),
170
180
  react_1.default.createElement("div", { className: "d-flex align-items-center" },
171
- react_1.default.createElement(TrustLevelBadge, { level: contact.trustLevel || peers_sdk_1.TrustLevel.Unknown }),
181
+ react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: contact.trustLevel || peers_sdk_1.TrustLevel.Unknown }),
172
182
  react_1.default.createElement("a", { href: `#contacts/${contact.userId}`, className: "btn btn-outline-primary btn-sm ms-2" },
173
183
  react_1.default.createElement("i", { className: "bi-eye me-1" }),
174
184
  "View"))));
175
185
  };
176
- const TrustLevelBadge = ({ level }) => {
177
- // Define trust level configurations with their numeric values
178
- const trustLevelConfigs = [
179
- { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
180
- { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
181
- { value: peers_sdk_1.TrustLevel.Known, color: 'info', icon: 'bi-shield-check', text: 'Known' },
182
- { value: peers_sdk_1.TrustLevel.NewDevice, color: 'primary', icon: 'bi-shield-plus', text: 'New Device' },
183
- { value: peers_sdk_1.TrustLevel.NewUser, color: 'primary', icon: 'bi-shield-plus', text: 'New User' },
184
- { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
185
- { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-x', text: 'Untrusted' },
186
- { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
187
- ];
188
- // Sort by trust level value (ascending, so lowest first)
189
- const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
190
- // Find the highest trust level that is at or below the current level
191
- let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
192
- for (const trustConfig of sortedConfigs) {
193
- if (level >= trustConfig.value) {
194
- config = trustConfig;
195
- }
196
- else {
197
- break;
198
- }
199
- }
200
- return (react_1.default.createElement("span", { className: `badge bg-${config.color} d-flex align-items-center gap-1` },
201
- react_1.default.createElement("i", { className: config.icon }),
202
- config.text));
203
- };
204
186
  (0, ui_loader_1.registerInternalPeersUI)({
205
187
  peersUIId: '00mfc4ql0lgqmjxrpvcd4ufk0',
206
188
  component: ContactList,
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare function DataExplorerList(): React.JSX.Element;