@peers-app/peers-ui 0.25.2 → 0.25.3

package/src/tabs-layout/network-status-indicator.tsx

@@ -1,6 +1,7 @@
 import type { INetworkConnectionInfo, INetworkStatusSummary } from "@peers-app/peers-sdk";
 import moment from "moment";
 import { useEffect, useId, useRef, useState } from "react";
+import { IDENTITY_ACCEPT_PATH, IDENTITY_ACCOUNT_PATH } from "../screens/identity/identity-routes";
 import { getNetworkDiagnosticsConsumer } from "../screens/network-viewer/network-viewer-ipc";
 import { goToTabPath } from "./tabs-state";
 import { type INetworkStatusViewState, useNetworkStatus } from "./use-network-status";
@@ -311,12 +312,16 @@ function NetworkStatusDetails({
   status,
   unavailable,
   connectionsLoadState,
+  onUseInvite,
+  onOpenIdentity,
   onOpenViewer,
 }: {
   detailsId: string;
   status?: INetworkStatusSummary;
   unavailable: boolean;
   connectionsLoadState: ConnectionsLoadState;
+  onUseInvite: () => void;
+  onOpenIdentity: () => void;
   onOpenViewer: () => void;
 }) {
   return (
@@ -328,6 +333,24 @@ function NetworkStatusDetails({
       style={{ top: "100%", width: "320px", zIndex: 1100 }}
     >
       <div className="card-body p-3">
+        <div className="d-flex gap-2 mb-3">
+          <button
+            type="button"
+            className="btn btn-sm btn-outline-primary flex-fill"
+            onClick={onUseInvite}
+          >
+            <i className="bi bi-qr-code me-1" aria-hidden="true" />
+            Use Invite
+          </button>
+          <button
+            type="button"
+            className="btn btn-sm btn-outline-primary flex-fill"
+            onClick={onOpenIdentity}
+          >
+            <i className="bi bi-person-badge me-1" aria-hidden="true" />
+            Identity
+          </button>
+        </div>
         <h6 className="card-title mb-2">Network status</h6>
         {unavailable || !status ? (
           <p className="small text-muted mb-3">
@@ -559,6 +582,14 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
           status={viewState.status}
           unavailable={viewState.availability !== "ready"}
           connectionsLoadState={connectionsLoadState}
+          onUseInvite={() => {
+            setOpen(false);
+            goToTabPath(IDENTITY_ACCEPT_PATH);
+          }}
+          onOpenIdentity={() => {
+            setOpen(false);
+            goToTabPath(IDENTITY_ACCOUNT_PATH);
+          }}
           onOpenViewer={() => {
             setOpen(false);
             goToTabPath("network-viewer");

package/src/tabs-layout/tabs-layout.tsx

@@ -10,6 +10,7 @@ import { GroupSwitcher } from "../components/group-switcher";
 import { Router } from "../components/router";
 import { isDesktop } from "../globals";
 import { useObservable } from "../hooks";
+import { isIdentityPath } from "../screens/identity/identity-routes";
 import { colorMode } from "../screens/settings/color-mode-dropdown";
 import { systemPackage } from "../system-apps";
 import { allPackages } from "../ui-router/routes-loader";
@@ -546,9 +547,14 @@ const TabContentRenderer = React.memo(
     // System apps use the main Router (which reads from mainContentPath)
     // Package apps use UIRouter with explicit path
     const isSystemApp = tab.packageId === "system-apps";
+    const identityApp = isSystemApp && isIdentityPath(tab.path);
 
     return (
-      <div className={`h-100 overflow-auto ${isMobile ? "p-2" : "p-3"}`}>
+      <div
+        className={`h-100 ${identityApp ? "overflow-hidden" : "overflow-auto"} ${
+          identityApp ? "" : isMobile ? "p-2" : "p-3"
+        }`}
+      >
         {isSystemApp ? (
           <Router path={tab.path} />
         ) : (

package/src/tabs-layout/tabs-state.test.ts

@@ -0,0 +1,152 @@
+jest.mock("../globals", () => {
+  const { observable } =
+    jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  return { _mainContentPath: observable("") };
+});
+
+jest.mock("../ui-router/routes-loader", () => {
+  const { observable } =
+    jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  return { allPackages: observable([]) };
+});
+
+jest.mock("@peers-app/peers-sdk", () => {
+  const actual = jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  let nextId = 0;
+  const deviceVars = new Map<string, ReturnType<typeof actual.observable>>();
+  const userVars = new Map<string, ReturnType<typeof actual.observable>>();
+
+  function stored<T>(
+    map: Map<string, ReturnType<typeof actual.observable>>,
+    id: string,
+    initial: T,
+  ) {
+    const existing = map.get(id);
+    if (existing) {
+      return existing;
+    }
+    const value = actual.observable(initial);
+    Object.assign(value, { loadingPromise: Promise.resolve() });
+    map.set(id, value);
+    return value;
+  }
+
+  return {
+    ...actual,
+    newid: () => `tab${++nextId}`,
+    groupDeviceVar: (id: string, options?: { defaultValue?: unknown }) =>
+      stored(deviceVars, id, options?.defaultValue),
+    groupUserVar: (id: string, options?: { defaultValue?: unknown }) =>
+      stored(userVars, id, options?.defaultValue),
+  };
+});
+
+import { _mainContentPath } from "../globals";
+import {
+  activeTabId,
+  activeTabs,
+  goToTabPath,
+  launcherApp,
+  migrateRecentPath,
+  navigateTo,
+  recentlyUsedApps,
+  restoreNavigationState,
+  type TabState,
+} from "./tabs-state";
+
+const PERSON_ID = "abcdefghijklmnopqrstuvwxy";
+
+function tab(partial: Partial<TabState> & Pick<TabState, "tabId" | "path">): TabState {
+  return {
+    packageId: "system-apps",
+    title: partial.path,
+    iconClassName: "bi-circle",
+    ...partial,
+  };
+}
+
+describe("restoreNavigationState", () => {
+  it("merges legacy identity tabs into the active Identity tab", () => {
+    const restored = restoreNavigationState(
+      [
+        launcherApp,
+        tab({ tabId: "people", path: "contacts", title: "Contacts" }),
+        tab({ tabId: "groups", path: `groups/${PERSON_ID}`, title: "Groups" }),
+        tab({ tabId: "devices", path: "devices?action=pair", title: "Devices" }),
+        tab({ tabId: "account", path: "account", title: "Account" }),
+      ],
+      "groups",
+    );
+
+    expect(restored.tabs.map((entry) => entry.path)).toEqual(["", `identity/groups/${PERSON_ID}`]);
+    expect(restored.activeId).toBe("groups");
+    expect(restored.tabs[1]?.title).toBe("Identity");
+    expect(migrateRecentPath("contacts")).toBe("identity");
+    expect(migrateRecentPath("invites/accept")).toBe("identity");
+    expect(migrateRecentPath("account")).toBe("identity");
+  });
+});
+
+describe("navigateTo", () => {
+  beforeEach(async () => {
+    await activeTabs.loadingPromise;
+    activeTabs([launcherApp, tab({ tabId: "threads", path: "threads", title: "Threads" })]);
+    activeTabId("threads");
+    recentlyUsedApps([]);
+    _mainContentPath("threads");
+  });
+
+  it("updates the same app in place and preserves the query", () => {
+    navigateTo("threads/thread-1?draft=1");
+
+    expect(activeTabs()).toHaveLength(2);
+    expect(activeTabs().find((entry) => entry.tabId === "threads")?.path).toBe(
+      "threads/thread-1?draft=1",
+    );
+    expect(activeTabId()).toBe("threads");
+    expect(_mainContentPath()).toBe("threads/thread-1?draft=1");
+  });
+
+  it("opens another app without duplicating an existing tab", () => {
+    navigateTo(`contacts/${PERSON_ID}`);
+    const identityId = activeTabId();
+    activeTabId("threads");
+    navigateTo("identity/devices?foo=bar");
+
+    const identityTabs = activeTabs().filter((entry) => entry.path.startsWith("identity"));
+    expect(identityTabs).toHaveLength(1);
+    expect(identityTabs[0]?.path).toBe("identity/devices?foo=bar");
+    expect(activeTabId()).toBe(identityId);
+    expect(activeTabs().some((entry) => entry.tabId === "threads")).toBe(true);
+  });
+
+  it("opens the account alias inside the Identity tab", () => {
+    navigateTo("account");
+    const identityId = activeTabId();
+
+    expect(_mainContentPath()).toBe("identity/account");
+    navigateTo("identity/people");
+
+    expect(activeTabId()).toBe(identityId);
+    expect(activeTabs().filter((entry) => entry.path.startsWith("identity"))).toHaveLength(1);
+    expect(_mainContentPath()).toBe("identity/people");
+  });
+
+  it("rewrites invite acceptance onto the open Identity tab", () => {
+    navigateTo("identity/people");
+    const identityId = activeTabId();
+    navigateTo("invites/accept");
+
+    expect(activeTabId()).toBe(identityId);
+    expect(activeTabs().filter((entry) => entry.path.startsWith("identity"))).toHaveLength(1);
+    expect(_mainContentPath()).toBe("identity/activity/accept");
+  });
+
+  it("keeps the current section when the app root is opened again", () => {
+    navigateTo("identity/devices/pair");
+    goToTabPath("identity");
+
+    expect(_mainContentPath()).toBe("identity/devices/pair");
+    expect(recentlyUsedApps()).toEqual(["identity"]);
+  });
+});