@peers-app/peers-ui 0.25.2 → 0.25.4

package/src/screens/account/account-screen.tsx

@@ -1,96 +1,13 @@
-import { type ICreatedInvite, rpcServerCalls } from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
+import { copyToClipboard, getMe, thisDeviceId } from "@peers-app/peers-sdk";
+import { useState } from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { Tooltip } from "../../components/tooltip";
-import { useObservable } from "../../hooks";
+import { useObservable, usePromise } from "../../hooks";
 import {
   persistPeersServicesRegistration,
   registrationStatusPvar,
 } from "../../peers-services-registration";
-import { InviteShare } from "../invites/invite-share";
-import { inviteTools } from "../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] = useState<ICreatedInvite | undefined>(undefined);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    void inviteTools()
-      .then((tools) => tools.createContactInvite({ profile: true }))
-      .then(({ invite: created }) => {
-        if (!cancelled) setInvite(created);
-      })
-      .catch((err) => {
-        if (!cancelled) setError((err as Error).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 inviteTools();
-      const { invite: created } = await tools.regenerateProfileInvite();
-      setInvite(created);
-    } catch (err) {
-      setError((err as Error).message || "Could not regenerate.");
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  return (
-    <div className="card mb-3">
-      <div className="card-body">
-        <h5 className="card-title d-flex align-items-center gap-2">
-          Profile QR
-          <Tooltip markdownContent={PROFILE_QR_INFO} />
-        </h5>
-        {error ? <div className="alert alert-danger py-2">{error}</div> : null}
-        {invite ? (
-          <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 ? (
-          <LoadingIndicator />
-        ) : null}
-        <div className="text-center mt-3">
-          <button
-            type="button"
-            className="btn btn-outline-danger btn-sm"
-            onClick={() => void regenerate()}
-            disabled={busy || !invite}
-          >
-            {busy ? "Regenerating…" : "Regenerate (revokes all invites)"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
+import { identityTools } from "../device-pairing/identity-ipc";
 
 const INFO_TEXT = `### What does registering do?
 
@@ -109,8 +26,11 @@ Your **secret key never leaves your device**. Only your public key is shared wit
 
 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. */
 export function AccountScreen() {
   const [registrationStatus] = useObservable(registrationStatusPvar);
+  const [deviceId] = useObservable(thisDeviceId);
+  const me = usePromise(getMe);
   const [isRegistering, setIsRegistering] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
@@ -123,8 +43,8 @@ export function AccountScreen() {
     setSuccess(null);
 
     try {
-      const token = await rpcServerCalls.registerWithPeersServices();
-      persistPeersServicesRegistration(token);
+      const { token } = await (await identityTools()).registerWithPeersServices();
+      await persistPeersServicesRegistration(token);
       setSuccess("Account registered successfully.");
     } catch (err) {
       setError(`Registration failed: ${String(err)}`);
@@ -133,12 +53,19 @@ export function AccountScreen() {
     }
   };
 
+  if (!me) {
+    return <LoadingIndicator />;
+  }
+
   return (
-    <div className="container-fluid p-3" style={{ maxWidth: 600 }}>
-      <h4 className="mb-3 d-flex align-items-center gap-2">
-        <i className="bi bi-person-circle" />
-        Account
-      </h4>
+    <div className="container-xxl p-3">
+      <div className="mb-3">
+        <h4 className="mb-1 d-flex align-items-center gap-2">
+          <i className="bi bi-person-circle" />
+          Account
+        </h4>
+        <div className="small text-muted">Your public identity and account-level services</div>
+      </div>
 
       {error && (
         <div className="alert alert-danger alert-dismissible" role="alert">
@@ -166,7 +93,61 @@ export function AccountScreen() {
         </div>
       )}
 
-      <ProfileInviteSection />
+      <div className="card mb-3">
+        <div className="card-body d-flex align-items-center gap-3 flex-wrap">
+          <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"
+          >
+            {profileInitials(me.name)}
+          </span>
+          <div className="flex-grow-1">
+            <h5 className="card-title mb-1">{me.name || "Unnamed user"}</h5>
+            <div className="small text-muted">Peers identity</div>
+          </div>
+          <div className="d-flex gap-2 flex-wrap">
+            <a href="#settings" className="btn btn-outline-secondary btn-sm">
+              Edit display name
+            </a>
+            <a href="#identity/devices" className="btn btn-outline-primary btn-sm">
+              Manage devices
+            </a>
+            <a href="#identity/devices/pair" className="btn btn-primary btn-sm">
+              Add device
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="card mb-3">
+        <div className="card-body">
+          <h5 className="card-title">Technical identity</h5>
+          <p className="small text-muted">
+            Share these values only when diagnosing identity or connection problems.
+          </p>
+          <TechnicalValue
+            label="User ID"
+            value={me.userId}
+            help="Your stable identifier across Peers."
+          />
+          <TechnicalValue
+            label="Signing key"
+            value={me.publicKey}
+            help="Other people use this public key to verify your signatures."
+          />
+          <TechnicalValue
+            label="Encryption key"
+            value={me.publicBoxKey}
+            help="Other people use this public key to encrypt data for you."
+          />
+          <TechnicalValue
+            label="Current device ID"
+            value={deviceId || "Not available"}
+            help="Identifies this installation on Peers networks."
+          />
+        </div>
+      </div>
 
       <div className="card">
         <div className="card-body">
@@ -238,3 +219,43 @@ export function AccountScreen() {
     </div>
   );
 }
+
+function TechnicalValue(props: { label: string; value: string; help: string }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    if (await copyToClipboard(props.value)) {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    }
+  };
+  return (
+    <div className="border-top py-3">
+      <div className="d-flex align-items-center gap-2 mb-1">
+        <strong className="small">{props.label}</strong>
+        <Tooltip markdownContent={props.help} />
+        <button
+          type="button"
+          className="btn btn-link btn-sm ms-auto py-0"
+          onClick={() => void copy()}
+          aria-label={`Copy ${props.label}`}
+        >
+          <i className={`bi ${copied ? "bi-check-lg" : "bi-copy"} me-1`} />
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <code className="small text-break user-select-all">{props.value}</code>
+    </div>
+  );
+}
+
+function profileInitials(name: string): string {
+  return (
+    name
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toLocaleUpperCase())
+      .join("") || "?"
+  );
+}

package/src/screens/contacts/contact-details.tsx

@@ -2,11 +2,9 @@ import { getUserContext, type IDoc, type IUser, Users } from "@peers-app/peers-s
 import { Input } from "../../components/input";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { SaveButton } from "../../components/save-button";
-import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { Tabs } from "../../components/tabs";
 import { TrustLevelDropdown } from "../../components/trust-level-dropdown";
 import { usePromise } from "../../hooks";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
 interface IProps {
   userId: string;
@@ -21,7 +19,6 @@ export const ContactDetails = (props: IProps) => {
       if (!contact) {
         throw new Error("Contact not found");
       }
-      updateActiveTabTitle(contact.name || "Contact");
       return Users(userContext.userDataContext).initDoc(contact);
     },
     undefined,
@@ -33,7 +30,7 @@ export const ContactDetails = (props: IProps) => {
   }
 
   return (
-    <div className="container-fluid p-3">
+    <div className="container-xxl p-3">
       <div className="d-flex">
         <div>
           <h4>
@@ -61,9 +58,9 @@ export const ContactDetails = (props: IProps) => {
           {
             name: "Info",
             content: (
-              <ScreenTabBody>
+              <div>
                 <ContactInfo contact={contact} />
-              </ScreenTabBody>
+              </div>
             ),
           },
         ]}
@@ -124,22 +121,3 @@ const ContactInfo = (props: { contact: IDoc<IUser> }) => {
     </div>
   );
 };
-
-registerInternalPeersUI({
-  peersUIId: "00contact00details00component",
-  component: 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/src/screens/contacts/contact-list.test.tsx

@@ -0,0 +1,59 @@
+import { TrustLevel } from "@peers-app/peers-sdk";
+import { render, screen } from "@testing-library/react";
+import { type IPersonSummary, PersonRow } from "./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: IPersonSummary = {
+  user: {
+    userId: "abcdefghijklmnopqrstuvwxy",
+    name: "Alex",
+    publicKey: "signing-key",
+    publicBoxKey: "box-key",
+  },
+  isContact: true,
+  trustLevel: TrustLevel.Known,
+  sharedGroups: [{ groupId: "zyxwvutsrqponmlkjihgfedcb", name: "Neighbors" }],
+};
+
+describe("PersonRow", () => {
+  it("shows useful relationship context without exposing an ordinary user id", () => {
+    render(<PersonRow row={person} duplicateName={false} />);
+
+    expect(screen.getByText("Alex")).toBeInTheDocument();
+    expect(screen.getByText("Contact · Shared group: Neighbors")).toBeInTheDocument();
+    expect(screen.queryByText(person.user.userId)).not.toBeInTheDocument();
+    expect(screen.getByRole("link")).toHaveAttribute(
+      "href",
+      `#identity/people/${person.user.userId}`,
+    );
+  });
+
+  it("adds only a short discriminator when names collide", () => {
+    render(<PersonRow row={person} duplicateName />);
+
+    expect(screen.getByText(`…${person.user.userId.slice(-6)}`)).toBeInTheDocument();
+  });
+});