@peers-app/peers-ui 0.25.1 → 0.25.3

package/dist/screens/account/account-screen.js

@@ -8,56 +8,7 @@ const loading_indicator_1 = require("../../components/loading-indicator");
 const tooltip_1 = require("../../components/tooltip");
 const hooks_1 = require("../../hooks");
 const peers_services_registration_1 = require("../../peers-services-registration");
-const invite_share_1 = require("../invites/invite-share");
-const invites_ipc_1 = require("../invites/invites-ipc");
-const PROFILE_QR_INFO = `### Your profile QR
-
-Anyone who scans this (or opens the link) can send you a contact request. Requests show up under **Contacts → Pending** and nothing happens until you confirm.
-
-### Regenerate
-
-Regenerating invalidates this QR **and every other invite link you have issued**. Use it if the QR leaked somewhere you did not intend.`;
-/** Reusable profile invite with a regenerate control that bumps the invite epoch. */
-function ProfileInviteSection() {
-    const [invite, setInvite] = (0, react_1.useState)(undefined);
-    const [busy, setBusy] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        let cancelled = false;
-        void (0, invites_ipc_1.inviteTools)()
-            .then((tools) => tools.createContactInvite({ profile: true }))
-            .then(({ invite: created }) => {
-            if (!cancelled)
-                setInvite(created);
-        })
-            .catch((err) => {
-            if (!cancelled)
-                setError(err.message || "Could not load your profile QR.");
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    const regenerate = async () => {
-        if (!confirm("Regenerate your profile QR? Every invite link you have issued so far will stop working.")) {
-            return;
-        }
-        setBusy(true);
-        setError(null);
-        try {
-            const tools = await (0, invites_ipc_1.inviteTools)();
-            const { invite: created } = await tools.regenerateProfileInvite();
-            setInvite(created);
-        }
-        catch (err) {
-            setError(err.message || "Could not regenerate.");
-        }
-        finally {
-            setBusy(false);
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title d-flex align-items-center gap-2", children: ["Profile QR", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: PROFILE_QR_INFO })] }), error ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger py-2", children: error }) : null, invite ? ((0, jsx_runtime_1.jsx)(invite_share_1.InviteShare, { invite: invite, description: "Let people connect with you by scanning this or opening the link. You confirm each request.", shareText: "Connect with me on Peers:" })) : !error ? ((0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {})) : null, (0, jsx_runtime_1.jsx)("div", { className: "text-center mt-3", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-danger btn-sm", onClick: () => void regenerate(), disabled: busy || !invite, children: busy ? "Regenerating…" : "Regenerate (revokes all invites)" }) })] }) }));
-}
+const identity_ipc_1 = require("../device-pairing/identity-ipc");
 const INFO_TEXT = `### What does registering do?
 
 Registering your account links your **public key** with the Peers cloud service. This enables cloud-powered features like:
@@ -74,8 +25,11 @@ Your **secret key never leaves your device**. Only your public key is shared wit
 ### Do I have to register?
 
 No. Peers works fully in local/peer-to-peer mode without registration. Cloud features simply won't be available until you register.`;
+/** Identity profile, public identifiers, device shortcuts, and service registration. */
 function AccountScreen() {
     const [registrationStatus] = (0, hooks_1.useObservable)(peers_services_registration_1.registrationStatusPvar);
+    const [deviceId] = (0, hooks_1.useObservable)(peers_sdk_1.thisDeviceId);
+    const me = (0, hooks_1.usePromise)(peers_sdk_1.getMe);
     const [isRegistering, setIsRegistering] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const [success, setSuccess] = (0, react_1.useState)(null);
@@ -85,8 +39,8 @@ function AccountScreen() {
         setError(null);
         setSuccess(null);
         try {
-            const token = await peers_sdk_1.rpcServerCalls.registerWithPeersServices();
-            (0, peers_services_registration_1.persistPeersServicesRegistration)(token);
+            const { token } = await (await (0, identity_ipc_1.identityTools)()).registerWithPeersServices();
+            await (0, peers_services_registration_1.persistPeersServicesRegistration)(token);
             setSuccess("Account registered successfully.");
         }
         catch (err) {
@@ -96,9 +50,31 @@ function AccountScreen() {
             setIsRegistering(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", style: { maxWidth: 600 }, children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-3 d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-circle" }), "Account"] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setError(null), "aria-label": "Close" })] })), success && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-success alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle me-2" }), success, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setSuccess(null), "aria-label": "Close" })] })), (0, jsx_runtime_1.jsx)(ProfileInviteSection, {}), (0, jsx_runtime_1.jsx)("div", { className: "card", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title d-flex align-items-center gap-2", children: ["Peers Services Registration", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: INFO_TEXT })] }), isRegistered ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle-fill text-success", style: { fontSize: "1.2em" } }), (0, jsx_runtime_1.jsx)("span", { children: "Registered" })] }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted d-block mb-3", children: ["Registered on", " ", new Date(registrationStatus).toLocaleDateString(undefined, {
+    if (!me) {
+        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-1 d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-circle" }), "Account"] }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", children: "Your public identity and account-level services" })] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setError(null), "aria-label": "Close" })] })), success && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-success alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle me-2" }), success, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setSuccess(null), "aria-label": "Close" })] })), (0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body d-flex align-items-center gap-3 flex-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "rounded-circle bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center justify-content-center fs-4 fw-semibold", style: { width: 58, height: 58 }, "aria-hidden": "true", children: profileInitials(me.name) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title mb-1", children: me.name || "Unnamed user" }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", children: "Peers identity" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("a", { href: "#settings", className: "btn btn-outline-secondary btn-sm", children: "Edit display name" }), (0, jsx_runtime_1.jsx)("a", { href: "#identity/devices", className: "btn btn-outline-primary btn-sm", children: "Manage devices" }), (0, jsx_runtime_1.jsx)("a", { href: "#identity/devices/pair", className: "btn btn-primary btn-sm", children: "Add device" })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Technical identity" }), (0, jsx_runtime_1.jsx)("p", { className: "small text-muted", children: "Share these values only when diagnosing identity or connection problems." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "User ID", value: me.userId, help: "Your stable identifier across Peers." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "Signing key", value: me.publicKey, help: "Other people use this public key to verify your signatures." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "Encryption key", value: me.publicBoxKey, help: "Other people use this public key to encrypt data for you." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "Current device ID", value: deviceId || "Not available", help: "Identifies this installation on Peers networks." })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "card", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title d-flex align-items-center gap-2", children: ["Peers Services Registration", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: INFO_TEXT })] }), isRegistered ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle-fill text-success", style: { fontSize: "1.2em" } }), (0, jsx_runtime_1.jsx)("span", { children: "Registered" })] }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted d-block mb-3", children: ["Registered on", " ", new Date(registrationStatus).toLocaleDateString(undefined, {
                                             year: "numeric",
                                             month: "long",
                                             day: "numeric",
                                         })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary btn-sm", onClick: handleRegister, disabled: isRegistering, children: isRegistering ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2" }), "Refreshing..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-clockwise me-2" }), "Refresh Token"] })) })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-3", children: "Register your account to enable cloud-powered features like the AI assistant." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: handleRegister, disabled: isRegistering, children: isRegistering ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2" }), "Registering..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-cloud-upload me-2" }), "Register Account"] })) })] }))] }) })] }));
 }
+function TechnicalValue(props) {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const copy = async () => {
+        if (await (0, peers_sdk_1.copyToClipboard)(props.value)) {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1500);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "border-top py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-1", children: [(0, jsx_runtime_1.jsx)("strong", { className: "small", children: props.label }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: props.help }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-link btn-sm ms-auto py-0", onClick: () => void copy(), "aria-label": `Copy ${props.label}`, children: [(0, jsx_runtime_1.jsx)("i", { className: `bi ${copied ? "bi-check-lg" : "bi-copy"} me-1` }), copied ? "Copied" : "Copy"] })] }), (0, jsx_runtime_1.jsx)("code", { className: "small text-break user-select-all", children: props.value })] }));
+}
+function profileInitials(name) {
+    return (name
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toLocaleUpperCase())
+        .join("") || "?");
+}

package/dist/screens/account/account-screen.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/screens/account/account-screen.test.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const account_screen_1 = require("./account-screen");
+jest.mock("../../components/tooltip", () => ({
+    Tooltip: () => null,
+}));
+jest.mock("../../hooks", () => ({
+    useObservable: (value) => value === "device-observable" ? ["device0000000000000000001"] : [undefined],
+    usePromise: () => ({
+        userId: "user00000000000000000001",
+        name: "Taylor Example",
+        publicKey: "public-signing-key",
+        publicBoxKey: "public-encryption-key",
+    }),
+}));
+jest.mock("../../peers-services-registration", () => ({
+    persistPeersServicesRegistration: jest.fn(),
+    registrationStatusPvar: "registration-observable",
+}));
+jest.mock("../device-pairing/identity-ipc", () => ({
+    identityTools: jest.fn(),
+}));
+jest.mock("@peers-app/peers-sdk", () => {
+    const actual = jest.requireActual("@peers-app/peers-sdk");
+    return {
+        ...actual,
+        copyToClipboard: jest.fn(async () => true),
+        getMe: jest.fn(),
+        thisDeviceId: "device-observable",
+    };
+});
+describe("AccountScreen", () => {
+    it("shows profile actions and copyable identity diagnostics", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(account_screen_1.AccountScreen, {}));
+        expect(react_1.screen.getByText("Taylor Example")).toBeInTheDocument();
+        expect(react_1.screen.getByText("user00000000000000000001")).toBeInTheDocument();
+        expect(react_1.screen.getByText("public-signing-key")).toBeInTheDocument();
+        expect(react_1.screen.getByText("public-encryption-key")).toBeInTheDocument();
+        expect(react_1.screen.getByText("device0000000000000000001")).toBeInTheDocument();
+        expect(react_1.screen.getByRole("link", { name: "Edit display name" })).toHaveAttribute("href", "#settings");
+        expect(react_1.screen.getByRole("link", { name: "Manage devices" })).toHaveAttribute("href", "#identity/devices");
+        expect(react_1.screen.getByRole("link", { name: "Add device" })).toHaveAttribute("href", "#identity/devices/pair");
+        expect(react_1.screen.getByRole("button", { name: "Copy User ID" })).toBeInTheDocument();
+    });
+});

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

@@ -9,8 +9,6 @@ const save_button_1 = require("../../components/save-button");
 const tabs_1 = require("../../components/tabs");
 const trust_level_dropdown_1 = require("../../components/trust-level-dropdown");
 const hooks_1 = require("../../hooks");
-const tabs_state_1 = require("../../tabs-layout/tabs-state");
-const ui_loader_1 = require("../../ui-router/ui-loader");
 /** Edit a contact's signed profile fields and personal-context trust assignment. */
 const ContactDetails = (props) => {
     const contact = (0, hooks_1.usePromise)(async () => {
@@ -19,16 +17,15 @@ const ContactDetails = (props) => {
         if (!contact) {
             throw new Error("Contact not found");
         }
-        (0, tabs_state_1.updateActiveTabTitle)(contact.name || "Contact");
         return (0, peers_sdk_1.Users)(userContext.userDataContext).initDoc(contact);
     }, undefined, [props.userId]);
     if (!contact) {
         return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)("i", { className: "bi-person-fill-check me-2" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1", children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)(input_1.Input, { className: "border border-0", style: { width: "100%", outline: "none", backgroundColor: "transparent" }, value: contact.qs.name }, contact.userId) }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: contact }, contact.userId) })] }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)("i", { className: "bi-person-fill-check me-2" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1", children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)(input_1.Input, { className: "border border-0", style: { width: "100%", outline: "none", backgroundColor: "transparent" }, value: contact.qs.name }, contact.userId) }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: contact }, contact.userId) })] }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
                     {
                         name: "Info",
-                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(ContactInfo, { contact: contact }) })),
+                        content: ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ContactInfo, { contact: contact }) })),
                     },
                 ] }, contact.userId)] }));
 };
@@ -37,21 +34,3 @@ const ContactInfo = (props) => {
     const { contact } = props;
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-1", children: "Name" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: contact.qs.name, className: "form-control mb-3 ps-2", placeholder: "Contact name", title: "Contact name" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-start ps-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-1", children: "User ID" }), (0, jsx_runtime_1.jsx)("code", { className: "small", children: contact.userId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-start ps-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-1", children: "Trust Level" }), (0, jsx_runtime_1.jsx)(trust_level_dropdown_1.TrustLevelDropdown, { userId: contact.userId }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mt-1", children: "Self grants this user full remote contract access." })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { children: "Public Key:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: contact.qs.publicKey, className: "form-control mb-3 p-0 ps-2", placeholder: "Public key", title: "Public key" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { children: "Public Box Key:" }), (0, jsx_runtime_1.jsx)(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",
-    component: exports.ContactDetails,
-    routes: [
-        {
-            isMatch: (props, context) => {
-                const match = context.path.match(/^contacts\/([a-zA-Z0-9]+)$/);
-                if (match) {
-                    props.userId = match[1];
-                    return true;
-                }
-                return false;
-            },
-            uiCategory: "screen",
-            priority: 2,
-        },
-    ],
-});

package/dist/screens/contacts/contact-list.d.ts

@@ -1 +1,24 @@
-export declare function ContactList(): import("react/jsx-runtime").JSX.Element;
+import { type IUser, TrustLevel } from "@peers-app/peers-sdk";
+/** People directory and route-backed invite/profile actions. */
+export declare function ContactList(props?: {
+    action?: "share" | "invite";
+}): import("react/jsx-runtime").JSX.Element;
+/** One person plus the relationship context shown in the directory. */
+export interface IPersonSummary {
+    /** Signed user profile. */
+    user: IUser;
+    /** Whether the person is saved in the personal context. */
+    isContact: boolean;
+    /** Personal trust assignment when this is a contact. */
+    trustLevel?: TrustLevel;
+    /** Enabled groups both users belong to. */
+    sharedGroups: Array<{
+        groupId: string;
+        name: string;
+    }>;
+}
+/** Compact, fully clickable row in the People directory. */
+export declare function PersonRow(props: {
+    row: IPersonSummary;
+    duplicateName: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,167 +1,152 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContactList = ContactList;
+exports.PersonRow = PersonRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 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");
 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");
-const invite_capture_1 = require("../invites/invite-capture");
-const invite_share_1 = require("../invites/invite-share");
-const invites_ipc_1 = require("../invites/invites-ipc");
-const pending_invites_list_1 = require("../invites/pending-invites-list");
-/** Issues a one-off contact invite and shows it as QR/link until dismissed. */
-function InviteContactPanel({ onClose }) {
-    const [invite, setInvite] = (0, react_1.useState)(undefined);
+const identity_routes_1 = require("../identity/identity-routes");
+const invite_contact_panel_1 = require("../identity/invite-contact-panel");
+const profile_invite_1 = require("../identity/profile-invite");
+const activity_view_1 = require("../invites/activity-view");
+/** People directory and route-backed invite/profile actions. */
+function ContactList(props = {}) {
+    const userContext = (0, hooks_1.usePromise)(peers_sdk_1.getUserContext);
+    const [rows, setRows] = (0, react_1.useState)();
     const [error, setError] = (0, react_1.useState)("");
+    const [searchText, setSearchText] = (0, react_1.useState)("");
+    const [groupRevision, setGroupRevision] = (0, react_1.useState)(0);
     (0, react_1.useEffect)(() => {
-        let cancelled = false;
-        void (0, invites_ipc_1.inviteTools)()
-            .then((tools) => tools.createContactInvite({}))
-            .then(({ invite: created }) => {
-            if (!cancelled)
-                setInvite(created);
-        })
-            .catch((err) => {
-            if (!cancelled)
-                setError(err.message || "Could not create an invite.");
+        if (!userContext) {
+            return;
+        }
+        let disposed = false;
+        const subscriptions = [];
+        const refresh = async () => {
+            try {
+                const next = await loadPeople(userContext);
+                if (!disposed) {
+                    setRows(next);
+                    setError("");
+                }
+            }
+            catch (err) {
+                if (!disposed) {
+                    setError(err.message || "Could not load people.");
+                }
+            }
+        };
+        const personalUsers = (0, peers_sdk_1.Users)(userContext.userDataContext);
+        const personalGroups = (0, peers_sdk_1.Groups)(userContext.userDataContext);
+        subscriptions.push(personalUsers.dataChanged.subscribe(() => void refresh()));
+        subscriptions.push(personalGroups.dataChanged.subscribe(() => setGroupRevision((value) => value + 1)));
+        void personalGroups.list({ disabled: { $ne: true } }).then((groups) => {
+            if (disposed) {
+                return;
+            }
+            for (const group of groups) {
+                const context = userContext.getDataContext(group.groupId);
+                subscriptions.push((0, peers_sdk_1.Users)(context).dataChanged.subscribe(() => void refresh()));
+                subscriptions.push((0, peers_sdk_1.GroupMembers)(context).dataChanged.subscribe(() => void refresh()));
+            }
+            void refresh();
         });
         return () => {
-            cancelled = true;
+            disposed = true;
+            for (const subscription of subscriptions) {
+                subscription.unsubscribe();
+            }
         };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h6", { className: "card-title", children: "Invite a contact" }), error ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger py-2", children: error }) : null, invite ? ((0, jsx_runtime_1.jsx)(invite_share_1.InviteShare, { invite: invite, description: "Send this link or show the QR. When they accept, you are connected \u2014 no need to be online at the same time.", shareText: "Connect with me on Peers:", onDone: onClose })) : !error ? ((0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {})) : null] }) }));
-}
-function ContactList() {
-    const [inviting, setInviting] = (0, react_1.useState)(false);
-    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)());
-    const [existingContacts, setExistingContacts] = (0, react_1.useState)([]);
-    const newCursor = (0, react_1.useCallback)(async () => {
-        const cursor = await (0, peers_sdk_1.usersCursor)({ name: { $matchWords: searchText } });
-        cursorObs(cursor);
-        return cursor;
-    }, [searchText, cursorObs]);
-    (0, react_1.useEffect)(() => {
-        void newCursor();
-        setExistingContacts([]); // Reset existing contacts when search changes
-    }, [newCursor]);
-    async function loadMore(existing) {
-        const moreMatches = [];
-        const cursor = cursorObs() || (await newCursor());
-        for await (const nextContact of cursor) {
-            if (existing.some((e) => e.userId === nextContact.userId))
-                continue;
-            if (moreMatches.some((e) => e.userId === nextContact.userId))
-                continue;
-            moreMatches.push(nextContact);
-            if (searchText.length && moreMatches.length > 5)
-                break;
-            if (moreMatches.length >= 10)
-                break;
+    }, [groupRevision, userContext]);
+    const filteredRows = (0, react_1.useMemo)(() => {
+        const query = searchText.trim().toLocaleLowerCase();
+        if (!query) {
+            return rows ?? [];
         }
-        if (moreMatches.length === 0) {
-            cursorObs(undefined);
+        return (rows ?? []).filter((row) => row.user.name.toLocaleLowerCase().includes(query) ||
+            row.sharedGroups.some((group) => group.name.toLocaleLowerCase().includes(query)));
+    }, [rows, searchText]);
+    const duplicateNames = (0, react_1.useMemo)(() => {
+        const counts = new Map();
+        for (const row of rows ?? []) {
+            const key = row.user.name.trim().toLocaleLowerCase();
+            counts.set(key, (counts.get(key) ?? 0) + 1);
         }
-        setExistingContacts(existing.concat(moreMatches)); // Track all loaded contacts
-        return moreMatches;
-    }
-    function isValidUserId(id) {
-        // Check if it's a valid ID format (alphanumeric, typically 25 characters)
-        return /^[a-zA-Z0-9]{20,30}$/.test(id);
-    }
-    async function createContact(userId) {
-        try {
-            const userContext = await (0, peers_sdk_1.getUserContext)();
-            const usersTable = (0, peers_sdk_1.Users)(userContext.userDataContext);
-            const newContact = await usersTable.initRecord({
-                userId: userId.trim(),
-                name: "New User",
-                publicKey: "",
-                publicBoxKey: "",
-            });
-            await usersTable.save(newContact);
-            // Set initial trust level
-            await (0, peers_sdk_1.setUserTrustLevel)(userId.trim(), peers_sdk_1.TrustLevel.NewUser, userContext.userDataContext);
-            // Navigate to the details screen for the new contact
-            (0, globals_1.mainContentPath)(`contacts/${userId.trim()}`);
-        }
-        catch (error) {
-            console.error("Error creating contact:", error);
+        return counts;
+    }, [rows]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-fill-check me-2" }), "People"] }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", children: "Contacts and people you know through groups" })] }), (0, jsx_runtime_1.jsxs)("a", { href: `#${identity_routes_1.IDENTITY_PEOPLE_SHARE_PATH}`, className: "btn btn-outline-primary btn-sm", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-qr-code me-1" }), "Share my profile"] })] }), props.action ? ((0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-end mb-2", children: (0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_PEOPLE_PATH}`, className: "btn btn-link btn-sm", children: "Close" }) }), props.action === "share" ? ((0, jsx_runtime_1.jsx)(profile_invite_1.ProfileInviteSection, {})) : ((0, jsx_runtime_1.jsx)(invite_contact_panel_1.InviteContactPanel, { onClose: () => (0, globals_1.mainContentPath)(identity_routes_1.IDENTITY_PEOPLE_PATH) }))] })) : null, (0, jsx_runtime_1.jsx)(activity_view_1.PendingWorkLink, { type: "contact" }), (0, jsx_runtime_1.jsxs)("div", { className: "position-relative mb-3", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-search position-absolute text-muted", style: { left: 12, top: "50%", transform: "translateY(-50%)" } }), (0, jsx_runtime_1.jsx)("input", { type: "search", className: "form-control ps-5", value: searchText, onChange: (event) => setSearchText(event.target.value), placeholder: "Search people or shared groups", "aria-label": "Search people" })] }), error ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", children: error }) : null, !rows && !error ? (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}) : null, rows && filteredRows.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "border rounded p-4 text-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-people fs-2 text-muted" }), (0, jsx_runtime_1.jsx)("h6", { className: "mt-2", children: searchText ? "No matching people" : "No people yet" }), (0, jsx_runtime_1.jsx)("p", { className: "small text-muted mb-0", children: searchText
+                            ? "Try another name or group."
+                            : "Invite someone or join a group to start building your network." })] })) : null, filteredRows.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "list-group", children: filteredRows.map((row) => ((0, jsx_runtime_1.jsx)(PersonRow, { row: row, duplicateName: (duplicateNames.get(row.user.name.trim().toLocaleLowerCase()) ?? 0) > 1 }, row.user.userId))) })) : null] }));
+}
+async function loadPeople(userContext) {
+    const personalUsers = await (0, peers_sdk_1.Users)(userContext.userDataContext).list();
+    const personalById = new Map(personalUsers.map((user) => [user.userId, user]));
+    const summaries = new Map();
+    for (const user of personalUsers) {
+        if (user.userId === userContext.userId) {
+            continue;
         }
+        summaries.set(user.userId, {
+            user,
+            isContact: true,
+            trustLevel: await (0, peers_sdk_1.getUserTrustLevel)(userContext.userDataContext, user.userId),
+            sharedGroups: [],
+        });
     }
-    async function handleSearchSubmit(evt) {
-        if (evt.key !== "Enter")
-            return;
-        const input = searchText.trim();
-        if (!input)
-            return;
-        // Check if there are any existing results
-        if (existingContacts.length === 0) {
-            // No results found, check if it's a valid user ID
-            if (isValidUserId(input)) {
-                // Clear search and create new contact with the ID
-                searchTextObs("");
-                await createContact(input);
+    const groups = await (0, peers_sdk_1.Groups)(userContext.userDataContext).list({ disabled: { $ne: true } });
+    for (const group of groups) {
+        const context = userContext.getDataContext(group.groupId);
+        const members = await (0, peers_sdk_1.GroupMembers)(context).list({ deleted: { $ne: true } });
+        for (const member of members) {
+            if (member.userId === userContext.userId) {
+                continue;
             }
+            const existing = summaries.get(member.userId);
+            const user = personalById.get(member.userId) ?? (await (0, peers_sdk_1.Users)(context).get(member.userId));
+            if (!user) {
+                continue;
+            }
+            const summary = existing ?? {
+                user,
+                isContact: false,
+                sharedGroups: [],
+            };
+            if (!summary.sharedGroups.some((entry) => entry.groupId === group.groupId)) {
+                summary.sharedGroups.push({ groupId: group.groupId, name: group.name });
+            }
+            summaries.set(member.userId, summary);
         }
     }
-    function renderItems(contacts) {
-        const elements = [];
-        let lastSource = null;
-        contacts.forEach((contact, index) => {
-            // Add horizontal separator when source changes
-            if (lastSource !== contact.source) {
-                elements.push((0, jsx_runtime_1.jsxs)("div", { className: "my-3", children: [lastSource !== null && (0, jsx_runtime_1.jsx)("hr", { className: "border-secondary opacity-50" }), contact.source === "userDataContext" && ((0, jsx_runtime_1.jsxs)("h5", { children: ["Personal Contacts ", lastSource !== null && "(not in this group)"] })), contact.source === "currentDataContext" && (0, jsx_runtime_1.jsx)("h5", { children: "Users in this group" }), contact.source === "otherDataContexts" && (0, jsx_runtime_1.jsx)("h5", { children: "Users from other groups" })] }, `separator-${index}`));
-                lastSource = contact.source;
-            }
-            elements.push((0, jsx_runtime_1.jsx)(ContactCard, { contact: contact }, contact.userId));
-        });
-        return elements;
+    return [...summaries.values()].sort((left, right) => left.user.name.localeCompare(right.user.name));
+}
+/** Compact, fully clickable row in the People directory. */
+function PersonRow(props) {
+    const { row } = props;
+    const groups = row.sharedGroups;
+    const relationship = row.isContact
+        ? groups.length > 0
+            ? `Contact · ${sharedGroupLabel(groups)}`
+            : "Contact"
+        : sharedGroupLabel(groups);
+    return ((0, jsx_runtime_1.jsxs)("a", { href: `#${identity_routes_1.IDENTITY_PEOPLE_PATH}/${row.user.userId}`, className: "list-group-item list-group-item-action d-flex align-items-center gap-3 py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "rounded-circle bg-body-secondary d-inline-flex align-items-center justify-content-center flex-shrink-0 fw-semibold", style: { width: 42, height: 42 }, "aria-hidden": "true", children: initials(row.user.name) }), (0, jsx_runtime_1.jsxs)("span", { className: "flex-grow-1 overflow-hidden", children: [(0, jsx_runtime_1.jsxs)("span", { className: "d-flex align-items-center gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "fw-semibold text-truncate", children: row.user.name || "Unnamed person" }), props.duplicateName ? ((0, jsx_runtime_1.jsxs)("code", { className: "small text-muted", children: ["\u2026", row.user.userId.slice(-6)] })) : null] }), (0, jsx_runtime_1.jsx)("span", { className: "small text-muted text-truncate d-block", children: relationship })] }), row.isContact ? ((0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: row.trustLevel ?? peers_sdk_1.TrustLevel.Unknown })) : ((0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-light border", children: "Shared group" })), (0, jsx_runtime_1.jsx)("i", { className: "bi bi-chevron-right text-muted", "aria-hidden": "true" })] }));
+}
+function sharedGroupLabel(groups) {
+    if (groups.length === 0) {
+        return "Known through a shared group";
+    }
+    if (groups.length === 1) {
+        return `Shared group: ${groups[0].name}`;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-fill-check me-2" }), "Contacts"] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, jsx_runtime_1.jsxs)("a", { href: `#${invite_capture_1.ACCEPT_INVITE_PATH}`, className: "btn btn-outline-primary btn-sm", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-qr-code-scan me-1" }), "Accept invite"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-primary btn-sm", onClick: () => setInviting(true), disabled: inviting, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-plus me-1" }), "Invite"] })] })] }), inviting ? (0, jsx_runtime_1.jsx)(InviteContactPanel, { onClose: () => setInviting(false) }) : null, (0, jsx_runtime_1.jsx)(pending_invites_list_1.PendingInvitesList, { type: "contact", hideWhenEmpty: true, title: "Pending contact invites" }), (0, jsx_runtime_1.jsx)("div", { className: "input-group mb-3", children: (0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search or create contacts", autoFocus: true, onKeyUp: handleSearchSubmit }) }), (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: renderItems, 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 } }) }) })] }));
+    return `${groups.length} shared groups`;
+}
+function initials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    return (parts
+        .slice(0, 2)
+        .map((part) => part[0]?.toLocaleUpperCase())
+        .join("") || "?");
 }
-const ContactCard = ({ contact }) => {
-    const getSourceLabel = (source) => {
-        switch (source) {
-            case "userDataContext":
-                return "Personal";
-            case "currentDataContext":
-                return "Current Context";
-            case "otherDataContexts":
-                return "Groups";
-            default:
-                return source;
-        }
-    };
-    const getSourceIcon = (source) => {
-        switch (source) {
-            case "userDataContext":
-                return "bi-person-fill";
-            case "currentDataContext":
-                return "bi-house-fill";
-            case "otherDataContexts":
-                return "bi-people-fill";
-            default:
-                return "bi-question-circle";
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "list-group-item d-flex align-items-center justify-content-between py-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-circle me-3", style: { fontSize: "32px", color: "#6c757d" } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: contact.name }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: contact.userId }), (0, jsx_runtime_1.jsx)("span", { className: "mx-1 text-muted", children: "\u2022" }), (0, jsx_runtime_1.jsxs)("small", { className: "text-info d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: `${getSourceIcon(contact.source)} me-1` }), getSourceLabel(contact.source)] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: contact.trustLevel || peers_sdk_1.TrustLevel.Unknown }), (0, jsx_runtime_1.jsxs)("a", { href: `#contacts/${contact.userId}`, className: "btn btn-outline-primary btn-sm ms-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-eye me-1" }), "View"] })] })] }));
-};
-(0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: "00mfc4ql0lgqmjxrpvcd4ufk0",
-    component: ContactList,
-    routes: [
-        {
-            isMatch: (_props, context) => context.path === "contacts",
-            uiCategory: "screen",
-            priority: 2,
-        },
-    ],
-});

package/dist/screens/contacts/contact-list.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("@testing-library/react");
+const contact_list_1 = require("./contact-list");
+jest.mock("../../globals", () => ({
+    mainContentPath: jest.fn(),
+}));
+jest.mock("../../hooks", () => ({
+    usePromise: jest.fn(),
+}));
+jest.mock("../../ui-router/ui-loader", () => ({
+    registerInternalPeersUI: jest.fn(),
+}));
+jest.mock("../identity/invite-contact-panel", () => ({
+    InviteContactPanel: () => null,
+}));
+jest.mock("../identity/profile-invite", () => ({
+    ProfileInviteSection: () => null,
+}));
+jest.mock("../invites/activity-view", () => ({
+    PendingWorkLink: () => null,
+}));
+const person = {
+    user: {
+        userId: "abcdefghijklmnopqrstuvwxy",
+        name: "Alex",
+        publicKey: "signing-key",
+        publicBoxKey: "box-key",
+    },
+    isContact: true,
+    trustLevel: peers_sdk_1.TrustLevel.Known,
+    sharedGroups: [{ groupId: "zyxwvutsrqponmlkjihgfedcb", name: "Neighbors" }],
+};
+describe("PersonRow", () => {
+    it("shows useful relationship context without exposing an ordinary user id", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(contact_list_1.PersonRow, { row: person, duplicateName: false }));
+        expect(react_1.screen.getByText("Alex")).toBeInTheDocument();
+        expect(react_1.screen.getByText("Contact · Shared group: Neighbors")).toBeInTheDocument();
+        expect(react_1.screen.queryByText(person.user.userId)).not.toBeInTheDocument();
+        expect(react_1.screen.getByRole("link")).toHaveAttribute("href", `#identity/people/${person.user.userId}`);
+    });
+    it("adds only a short discriminator when names collide", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(contact_list_1.PersonRow, { row: person, duplicateName: true }));
+        expect(react_1.screen.getByText(`…${person.user.userId.slice(-6)}`)).toBeInTheDocument();
+    });
+});

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

@@ -1,4 +1,2 @@
-import "./contact-list";
-import "./contact-details";
 export * from "./contact-details";
 export * from "./contact-list";