@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/root-layout/root-layout-host.tsx

@@ -1,147 +0,0 @@
-/**
- * Root layout host — the single thing a Peers client mounts.
- *
- * `RootLayoutHost` owns everything that must exist regardless of which layout is active:
- * the user gate / setup flow, user-context init, global + route loading, the
- * always-available command palette, and the first-run welcome modal. It then delegates
- * the visible shell to the selected {@link RootLayout}, swapping it live when the
- * per-device selection changes.
- *
- * This is the bootstrap logic that previously lived (tangled with the tab UI) in
- * `TabsLayoutApp` / `TabsLayout`; the tab UI itself is now just the `tabs` layout body
- * (`TabsLayoutInternal`).
- */
-
-import { hasShownWelcomeModal, setDefaultClientUserContext } from "@peers-app/peers-sdk";
-import { useEffect, useRef, useState } from "react";
-import { CommandPaletteOverlay } from "../command-palette/command-palette-ui";
-import { initializeHashNavigation, loadGlobals, mainContentPath } from "../globals";
-import { useObservable, usePromise } from "../hooks";
-import { identityTools } from "../screens/device-pairing/identity-ipc";
-import { IDENTITY_ACCEPT_PATH } from "../screens/identity/identity-routes";
-import {
-  captureInviteFromLocation,
-  inviteCaptured,
-  listenForOpenUrlInvites,
-  peekPendingInvite,
-} from "../screens/invites/invite-capture";
-import { colorMode } from "../screens/settings/color-mode-dropdown";
-import { SetupUser } from "../screens/setup-user";
-import { WelcomeModal } from "../screens/welcome-modal";
-import { activeTabId, activeTabs, recentlyUsedApps } from "../tabs-layout/tabs-state";
-import { loadAllRoutes } from "../ui-router/routes-loader";
-import { globalOverlays } from "./global-overlays";
-import { DEFAULT_ROOT_LAYOUT_ID, getRootLayout } from "./root-layout-registry";
-import { selectedRootLayoutId } from "./root-layout-state";
-
-/**
- * Top-level host mounted by the client. Resolves the user, then hands off to the
- * bootstrap component once a user exists. Kept as a thin outer component so the hook
- * order downstream is stable across the user/no-user branches.
- */
-export function RootLayoutHost() {
-  useState(() => {
-    captureInviteFromLocation();
-    return true;
-  });
-
-  const userIdRef = useRef<string | null | undefined>(undefined);
-  const userId = usePromise(async () => {
-    const session = await (await identityTools()).getSession();
-    return session.userId || (null as string | null);
-  });
-  userIdRef.current = userId;
-
-  useEffect(() => {
-    // Tokens arriving after startup: a hash change in the browser/PWA, or a peers:// open
-    // forwarded by the Electron main process. Signed-out captures stay stashed until setup
-    // finishes; signed-in captures route straight to the Accept screen.
-    const onHashChange = () => captureInviteFromLocation();
-    window.addEventListener("hashchange", onHashChange);
-    const stopOpenUrl = listenForOpenUrlInvites();
-    const sub = inviteCaptured.subscribe(() => {
-      if (userIdRef.current && peekPendingInvite()) {
-        mainContentPath(IDENTITY_ACCEPT_PATH);
-      }
-    });
-    return () => {
-      window.removeEventListener("hashchange", onHashChange);
-      stopOpenUrl();
-      sub.dispose();
-    };
-  }, []);
-
-  if (userId === undefined) {
-    return;
-  }
-
-  if (!userId) {
-    document.getElementById("appLoadingDiv")?.remove();
-    return <SetupUser />;
-  }
-
-  return <RootLayoutBootstrap userId={userId} />;
-}
-
-let userContextInitialized = false;
-
-/**
- * Inner bootstrap: initializes the user context, awaits global/route/tab loading, then
- * renders the selected layout body alongside the always-available command palette and
- * the first-run welcome modal.
- */
-function RootLayoutBootstrap(props: { userId: string }) {
-  if (!userContextInitialized) {
-    setDefaultClientUserContext(props.userId);
-    userContextInitialized = true;
-  }
-
-  const loaded = usePromise(async () => {
-    await loadGlobals();
-    await loadAllRoutes();
-    await Promise.all([
-      activeTabs.loadingPromise,
-      activeTabId.loadingPromise,
-      recentlyUsedApps.loadingPromise,
-      hasShownWelcomeModal.loadingPromise,
-    ]);
-    initializeHashNavigation();
-    if (peekPendingInvite()) {
-      mainContentPath(IDENTITY_ACCEPT_PATH);
-    }
-    return true;
-  });
-
-  const [showWelcomeModal, setShowWelcomeModal] = useState(false);
-  const [_colorMode] = useObservable(colorMode);
-  const [layoutId] = useObservable(selectedRootLayoutId);
-  const [overlays] = useObservable(globalOverlays);
-
-  // Check if we should show the welcome modal after loading
-  useEffect(() => {
-    if (loaded && !hasShownWelcomeModal()) {
-      setShowWelcomeModal(true);
-    }
-  }, [loaded]);
-
-  if (!loaded) return false;
-
-  document.getElementById("appLoadingDiv")?.remove();
-
-  const layout =
-    getRootLayout(layoutId ?? DEFAULT_ROOT_LAYOUT_ID) ?? getRootLayout(DEFAULT_ROOT_LAYOUT_ID);
-  const Body = layout?.Component;
-
-  return (
-    <>
-      {Body && <Body />}
-      <CommandPaletteOverlay />
-      {overlays.map(({ id, Component }) => (
-        <Component key={id} />
-      ))}
-      {showWelcomeModal && (
-        <WelcomeModal colorMode={_colorMode} onClose={() => setShowWelcomeModal(false)} />
-      )}
-    </>
-  );
-}

package/src/root-layout/root-layout-registry.ts

@@ -1,51 +0,0 @@
-/**
- * Root layout registry — the static list of built-in layouts owned by peers-ui.
- *
- * For now this is a hardcoded list. The accessor functions ({@link getRootLayouts} /
- * {@link getRootLayout}) intentionally hide the underlying array so that dynamic,
- * package-contributed layouts (a future `registerRootLayout`) can be added later
- * without changing any consumer.
- */
-
-import { TabsLayoutInternal } from "../tabs-layout/tabs-layout";
-import { FullScreenLayout } from "./layouts/full-screen-layout";
-import { TabsWithConsoleLayout } from "./layouts/tabs-with-console-layout";
-import type { RootLayout } from "./root-layout";
-
-/** Id of the layout used when no selection has been made (or the selection is unknown). */
-export const DEFAULT_ROOT_LAYOUT_ID = "tabs";
-
-/** Built-in layouts, in picker display order. */
-const builtInLayouts: RootLayout[] = [
-  {
-    id: "tabs",
-    name: "Tabs",
-    description: "The classic Peers shell: a tab strip with one app per tab.",
-    iconClassName: "bi-window-stack",
-    Component: TabsLayoutInternal,
-  },
-  {
-    id: "tabs-with-console",
-    name: "Tabs + Console",
-    description: "The tab strip with the Operator Console docked alongside as a resizable panel.",
-    iconClassName: "bi-layout-split",
-    Component: TabsWithConsoleLayout,
-  },
-  {
-    id: "fullscreen",
-    name: "Full-screen",
-    description: "One screen at a time, no tabs — navigate with the Cmd/Ctrl+K command palette.",
-    iconClassName: "bi-fullscreen",
-    Component: FullScreenLayout,
-  },
-];
-
-/** Returns all registered root layouts, in display order. */
-export function getRootLayouts(): RootLayout[] {
-  return builtInLayouts;
-}
-
-/** Returns the layout with the given id, or `undefined` if none is registered. */
-export function getRootLayout(id: string): RootLayout | undefined {
-  return builtInLayouts.find((layout) => layout.id === id);
-}

package/src/root-layout/root-layout-state.ts

@@ -1,55 +0,0 @@
-/**
- * Root layout selection — persistent, per-device state plus palette integration.
- *
- * The selected layout id is stored in a `deviceVar` (per-device, not synced) to match
- * the precedent of other root-UI preferences (`colorMode`, the operator console panel):
- * layout choice is tightly coupled to the device/form factor. `RootLayoutHost` reads
- * this reactively and swaps the layout live when it changes.
- */
-
-import { deviceVar } from "@peers-app/peers-sdk";
-import { closeCommandPalette, registerCommand } from "../command-palette/command-palette";
-import { DEFAULT_ROOT_LAYOUT_ID, getRootLayouts } from "./root-layout-registry";
-
-/**
- * Per-device id of the currently selected root layout. Defaults to
- * {@link DEFAULT_ROOT_LAYOUT_ID}. Observable — subscribers (the host, the picker)
- * re-render when it changes.
- */
-export const selectedRootLayoutId = deviceVar<string>("rootLayout:selectedId", {
-  defaultValue: DEFAULT_ROOT_LAYOUT_ID,
-});
-
-/** Select the root layout with the given id (persists per-device). */
-export function setRootLayout(id: string): void {
-  selectedRootLayoutId(id);
-}
-
-let initialized = false;
-
-/**
- * Register a `"Use <name> Layout"` command per layout so the selector is keyboard-driven
- * and discoverable from the command palette (mirrors the operator console's "Toggle
- * Console" command). Idempotent. The registry is static today, so this runs once at
- * module load.
- */
-export function registerLayoutCommands(): void {
-  if (initialized) return;
-  initialized = true;
-
-  for (const layout of getRootLayouts()) {
-    registerCommand({
-      id: `use-root-layout:${layout.id}`,
-      label: `Use ${layout.name} Layout`,
-      description: layout.description,
-      iconClassName: layout.iconClassName,
-      category: "View",
-      action: () => {
-        closeCommandPalette();
-        setRootLayout(layout.id);
-      },
-    });
-  }
-}
-
-registerLayoutCommands();

package/src/root-layout/root-layout.ts

@@ -1,32 +0,0 @@
-/**
- * Root layout system — the layout interface.
- *
- * A {@link RootLayout} is a top-level, swappable app shell. The user (and, in the
- * future, a package) can choose which root layout owns the visible chrome. Layouts
- * are rendered *inside* `RootLayoutHost`, which has already done all bootstrapping
- * (user context, route loading) and mounted the always-available command palette.
- * A layout therefore owns 100% of the visible chrome (tab strip, content panels,
- * console panel, etc.) while the host owns the invisible foundation.
- */
-
-import type React from "react";
-
-/**
- * A selectable top-level app layout. The `Component` is the layout body rendered by
- * `RootLayoutHost`; everything visible on screen is the layout's responsibility.
- */
-export interface RootLayout {
-  /** Stable id persisted in the layout-selection pvar (e.g. `"tabs"`). */
-  id: string;
-  /** User-facing name shown in the layout picker. */
-  name: string;
-  /** One-line description shown in the picker. */
-  description: string;
-  /** bootstrap-icon class used in the picker. */
-  iconClassName: string;
-  /**
-   * The layout body. Rendered inside `RootLayoutHost` after bootstrapping is
-   * complete and the command palette is mounted. The body owns all visible chrome.
-   */
-  Component: React.ComponentType;
-}

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

@@ -1,65 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { AccountScreen } from "./account-screen";
-
-jest.mock("../../components/tooltip", () => ({
-  Tooltip: () => null,
-}));
-
-jest.mock("../../hooks", () => ({
-  useObservable: (value: unknown) =>
-    value === "device-observable" ? ["device0000000000000000001"] : [undefined],
-  // One result for every usePromise on the screen. getKeyInfo reads previousPublicKeys
-  // and canRotate; the profile card reads the rest.
-  usePromise: () => ({
-    userId: "user00000000000000000001",
-    name: "Taylor Example",
-    publicKey: "public-signing-key",
-    publicBoxKey: "public-encryption-key",
-    previousPublicKeys: [],
-    canRotate: false,
-  }),
-}));
-
-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<typeof import("@peers-app/peers-sdk")>("@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", () => {
-    render(<AccountScreen />);
-
-    expect(screen.getByText("Taylor Example")).toBeInTheDocument();
-    expect(screen.getByText("user00000000000000000001")).toBeInTheDocument();
-    expect(screen.getAllByText("public-signing-key")).toHaveLength(2);
-    expect(screen.getByText("public-encryption-key")).toBeInTheDocument();
-    expect(screen.getByText("device0000000000000000001")).toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "Edit display name" })).toHaveAttribute(
-      "href",
-      "#settings",
-    );
-    expect(screen.getByRole("link", { name: "Manage devices" })).toHaveAttribute(
-      "href",
-      "#identity/devices",
-    );
-    expect(screen.getByRole("link", { name: "Add device" })).toHaveAttribute(
-      "href",
-      "#identity/devices/pair",
-    );
-    expect(screen.getByRole("button", { name: "Copy User ID" })).toBeInTheDocument();
-  });
-});