@peers-app/peers-ui 0.27.2 → 0.27.4

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

@@ -1,587 +0,0 @@
-import {
-  groupDeviceVar,
-  groupUserVar,
-  type IAppNav,
-  newid,
-  type Observable,
-  observable,
-} from "@peers-app/peers-sdk";
-import { _mainContentPath } from "../globals";
-import {
-  canonicalizeRoute,
-  IDENTITY_APP_PATH,
-  isIdentityPath,
-  parseRoute,
-} from "../screens/identity/identity-routes";
-import { systemPackage } from "../system-apps";
-import { allPackages, type IPackageWithNavs } from "../ui-router/routes-loader";
-
-/** One top-level app tab. */
-export interface TabState {
-  tabId: string;
-  packageId?: string; // 'launcher' for app launcher tab
-  path: string;
-  title: string;
-  iconClassName?: string;
-}
-
-/** The app launcher tab. It is always present and cannot be closed. */
-export const launcherApp: TabState = {
-  tabId: "launcher",
-  packageId: "launcher",
-  path: "",
-  title: "Apps",
-  iconClassName: "bi-grid-3x3-gap",
-};
-
-// Persistent vars for storage (write-only, no subscription to avoid oscillation)
-const _persistentActiveTabs = groupDeviceVar<TabState[]>("activeTabs", {
-  defaultValue: [launcherApp],
-});
-
-const _persistentActiveTabId = groupDeviceVar<string>("activeTabId", {
-  defaultValue: "launcher",
-});
-
-const _persistentRecentlyUsedApps = groupUserVar<string[]>("recentlyUsedApps", {
-  defaultValue: [],
-});
-
-let finishNavigationRestore: () => void = () => {};
-const navigationReady = new Promise<void>((resolve) => {
-  finishNavigationRestore = resolve;
-});
-
-// In-memory observables for UI state (loaded once, then write-through to persistent vars)
-/** Open tabs. Writes through to device storage after the initial restore. */
-export const activeTabs: Observable<TabState[]> & { loadingPromise: Promise<void> } = (() => {
-  const obs = observable<TabState[]>([launcherApp]);
-
-  // Write-through to persistent var on change
-  obs.subscribe((value) => {
-    _persistentActiveTabs(value);
-  });
-
-  return Object.assign(obs, { loadingPromise: navigationReady });
-})();
-
-/** Id of the tab whose path is showing. */
-export const activeTabId: Observable<string> & { loadingPromise: Promise<void> } = (() => {
-  const obs = observable<string>("launcher");
-
-  // Write-through to persistent var on change
-  obs.subscribe((value) => {
-    _persistentActiveTabId(value);
-  });
-
-  return Object.assign(obs, { loadingPromise: navigationReady });
-})();
-
-/** App roots recently opened from the launcher, newest first. */
-export const recentlyUsedApps: Observable<string[]> & { loadingPromise: Promise<void> } = (() => {
-  const obs = observable<string[]>([]);
-
-  // Write-through to persistent var on change
-  obs.subscribe((value) => {
-    _persistentRecentlyUsedApps(value);
-  });
-
-  return Object.assign(obs, { loadingPromise: navigationReady });
-})();
-
-void Promise.all([
-  _persistentActiveTabs.loadingPromise,
-  _persistentActiveTabId.loadingPromise,
-  _persistentRecentlyUsedApps.loadingPromise,
-]).then(() => {
-  const restored = restoreNavigationState(_persistentActiveTabs(), _persistentActiveTabId());
-  activeTabs(restored.tabs);
-  if (activeTabId() !== restored.activeId) {
-    activeTabId(restored.activeId);
-  }
-  recentlyUsedApps(migrateRecentPaths(_persistentRecentlyUsedApps()));
-  finishNavigationRestore();
-});
-
-/** Tab ids whose bodies have been mounted at least once. */
-export const initializedTabs = new Set<string>();
-
-/** Options for {@link navigateTo}. */
-export interface NavigateOptions {
-  /**
-   * When the requested path is an app's root and that app is already open,
-   * activate the existing tab without resetting its section.
-   */
-  preserveSectionOnAppRoot?: boolean;
-}
-
-/**
- * Open a path in the tab that owns its app.
- *
- * Legacy identity aliases are rewritten first. A route owned by the current
- * app replaces that tab's path. A route owned by another open app activates
- * that app's tab. Otherwise a new tab is opened.
- *
- * @param rawPath - Requested route, with or without a query string.
- * @param options - App-root behavior. Launcher opens preserve the current section.
- */
-export function navigateTo(rawPath: string, options?: NavigateOptions) {
-  const requestedPathname = parseRoute(rawPath).pathname;
-  if (!requestedPathname) {
-    const launcher = activeTabs().find((tab) => tab.tabId === "launcher") ?? activeTabs()[0];
-    if (launcher && activeTabId() !== launcher.tabId) {
-      activeTabId(launcher.tabId);
-    }
-    return;
-  }
-
-  const next = canonicalizeRoute(rawPath);
-  const app = determineAppFromPath(next);
-  if (options?.preserveSectionOnAppRoot && app && isAppRootRequest(requestedPathname, app)) {
-    const existing = findTabForApp(app);
-    if (existing) {
-      if (activeTabId() !== existing.tabId) {
-        activeTabId(existing.tabId);
-      }
-      rememberRecentApp(existing.path);
-      return;
-    }
-  }
-
-  if (!app || app.package.packageId === "launcher") {
-    openUnresolved(next);
-    return;
-  }
-
-  const current = activeTabs().find((tab) => tab.tabId === activeTabId());
-  const currentApp = current ? determineAppFromPath(current.path) : undefined;
-  if (current && current.packageId !== "launcher" && currentApp && sameApp(currentApp, app)) {
-    showTab(current.tabId, next);
-    return;
-  }
-
-  const existing = findTabForApp(app);
-  if (existing) {
-    showTab(existing.tabId, next);
-    return;
-  }
-
-  openNewTab({
-    path: next,
-    title: app.navItem.displayName || app.navItem.name,
-    packageId: app.package.packageId,
-    iconClassName: app.navItem.iconClassName,
-  });
-}
-
-/**
- * Open an app or path from the launcher.
- *
- * Choosing an app that is already open keeps the section the user was on.
- *
- * @param path - App root or deep link.
- */
-export function goToTabPath(path: string) {
-  navigateTo(path, { preserveSectionOnAppRoot: true });
-}
-
-/**
- * Apply a {@link mainContentPath} write to the open tabs.
- *
- * @param _oldPath - Previous route. Retained for existing call sites.
- * @param newPath - Requested route.
- * @param _setNewMainPath - Direct path setter. Navigation updates the path itself.
- */
-export const handleMainPathChanged = (
-  _oldPath: string,
-  newPath: string,
-  _setNewMainPath: (path: string) => void,
-) => {
-  navigateTo(newPath);
-};
-
-/**
- * Rewrite stored tabs onto canonical routes.
- *
- * Contacts, Groups, and Devices tabs from before the Identity app become one
- * Identity tab. The active tab is kept when it is one of those duplicates.
- *
- * @param tabs - Persisted tabs.
- * @param activeId - Persisted active tab id.
- */
-export function restoreNavigationState(
-  tabs: TabState[],
-  activeId: string,
-): { tabs: TabState[]; activeId: string } {
-  const migrated = (tabs.length > 0 ? tabs : [launcherApp]).map(migrateStoredTab);
-  const merged = mergeIdentityTabs(migrated, activeId);
-  const activeExists = merged.tabs.some((tab) => tab.tabId === merged.activeId);
-  return {
-    tabs: merged.tabs,
-    activeId: activeExists ? merged.activeId : merged.tabs[0].tabId,
-  };
-}
-
-/**
- * Map a stored recent-app path onto the current app root.
- *
- * @param path - Persisted recent path, possibly a legacy alias.
- */
-export function migrateRecentPath(path: string): string {
-  const canonical = canonicalizeRoute(path);
-  if (isIdentityPath(canonical)) {
-    return IDENTITY_APP_PATH;
-  }
-  return canonical;
-}
-
-type AppInfo = { navItem: IAppNav; package: IPackageWithNavs };
-
-/**
- * Resolve the app that owns a route.
- *
- * @param path - Route, with or without a query string.
- * @returns The matching app, the launcher for an empty path, or `undefined`.
- */
-export function determineAppFromPath(path: string): AppInfo | undefined {
-  const launcherInfo = {
-    navItem: {
-      name: "Apps",
-      navigationPath: "",
-      iconClassName: launcherApp.iconClassName || "bi-grid-3x3-gap",
-    },
-    package: systemPackage,
-  };
-  if (!path || path === "" || path === "/") {
-    return launcherInfo;
-  }
-
-  // Remove leading/trailing slashes and query params
-  path = path.toLowerCase().trim().split("?")[0];
-  if (path.startsWith("/")) {
-    path = path.substring(1);
-  }
-  const rootPath = path.split("/")[0];
-  const _allPackages = [systemPackage, ...allPackages()]; // WARNING allPackages might not be loaded yet
-
-  const allAppInfos: AppInfo[] = _allPackages
-    .filter((pkg) => (pkg.appNavs?.length ?? 0) > 0)
-    .flatMap((pkg) => {
-      const navs = pkg.appNavs;
-      if (!navs) return [];
-      return navs.map((navItem) => ({ navItem, package: pkg }));
-    });
-
-  // Find the most relevant app based on path
-  for (const appInfo of allAppInfos) {
-    const navPath = appInfo.navItem.navigationPath || appInfo.navItem.name.toLowerCase();
-
-    // Check for exact match or path starting with nav path
-    if (rootPath === navPath || rootPath.startsWith(`${navPath}/`)) {
-      // Return the first matching app
-      return {
-        navItem: appInfo.navItem,
-        package: appInfo.package,
-      };
-    }
-  }
-
-  // look for package-specific routes
-  // uri in format of "package-nav/{packageId}/{path}"
-  const packageNavPrefix = "package-nav/";
-  if (path.startsWith(packageNavPrefix)) {
-    const parts = path.substring(packageNavPrefix.length).split("/");
-    if (parts.length > 0) {
-      const packageId = parts[0];
-      const pkg = _allPackages.find((p) => p.packageId === packageId);
-      if (pkg) {
-        const subPath = parts.slice(1).join("/");
-        const navItem = pkg.appNavs?.find((n) => {
-          const navPath = n.navigationPath || n.name.toLowerCase();
-          return subPath === navPath || subPath.startsWith(`${navPath}/`);
-        });
-        if (navItem) {
-          return {
-            navItem,
-            package: pkg,
-          };
-        }
-      }
-    }
-  }
-
-  console.warn(`No app found for path: ${path}`);
-  return undefined;
-}
-
-function appKey(app: AppInfo): string {
-  const nav = app.navItem.navigationPath || app.navItem.name.toLowerCase();
-  return `${app.package.packageId}:${nav}`;
-}
-
-function sameApp(left: AppInfo, right: AppInfo): boolean {
-  return appKey(left) === appKey(right);
-}
-
-function isAppRootRequest(pathname: string, app: AppInfo): boolean {
-  const nav = (app.navItem.navigationPath || app.navItem.name).toLowerCase();
-  return pathname.toLowerCase() === nav;
-}
-
-function findTabForApp(app: AppInfo): TabState | undefined {
-  const key = appKey(app);
-  return activeTabs().find((tab) => {
-    const info = determineAppFromPath(tab.path);
-    return info ? appKey(info) === key : false;
-  });
-}
-
-/**
- * Replace a tab's path immutably so the memoized tab body re-renders.
- * Activating a different tab lets the tab subscription publish the path.
- */
-function showTab(tabId: string, path: string) {
-  const tabs = activeTabs();
-  const index = tabs.findIndex((tab) => tab.tabId === tabId);
-  if (index < 0) {
-    return;
-  }
-  const current = tabs[index];
-  if (current.path !== path) {
-    const nextTabs = [...tabs];
-    nextTabs[index] = { ...current, path };
-    activeTabs(nextTabs);
-  }
-  if (activeTabId() !== tabId) {
-    activeTabId(tabId);
-  } else if (_mainContentPath() !== path) {
-    _mainContentPath(path);
-  }
-  rememberRecentApp(path);
-}
-
-function openUnresolved(path: string) {
-  const current = activeTabs().find((tab) => tab.tabId === activeTabId());
-  if (current && current.packageId === "system-apps") {
-    showTab(current.tabId, path);
-    return;
-  }
-  openNewTab({
-    path,
-    title: "New Tab",
-    packageId: "system-apps",
-    iconClassName: "bi-question-circle",
-  });
-}
-
-function rememberRecentApp(path: string) {
-  const app = determineAppFromPath(canonicalizeRoute(path));
-  if (!app || app.package.packageId === "launcher") {
-    return;
-  }
-  const recentPath =
-    app.package.packageId === systemPackage.packageId ? app.navItem.navigationPath || path : path;
-  if (!recentPath) {
-    return;
-  }
-  const recent = recentlyUsedApps();
-  const filtered = recent.filter((entry) => entry !== recentPath);
-  const next = [recentPath, ...filtered].slice(0, 8);
-  if (next.length === recent.length && next.every((entry, index) => entry === recent[index])) {
-    return;
-  }
-  recentlyUsedApps(next);
-}
-
-function migrateStoredTab(tab: TabState): TabState {
-  const path = canonicalizeRoute(tab.path);
-  if (path === tab.path) {
-    return tab;
-  }
-  const app = determineAppFromPath(path);
-  const identity = app?.navItem.navigationPath === IDENTITY_APP_PATH;
-  return {
-    ...tab,
-    path,
-    packageId: app?.package.packageId ?? tab.packageId,
-    title: identity ? app?.navItem.displayName || app?.navItem.name || tab.title : tab.title,
-    iconClassName: identity ? app?.navItem.iconClassName || tab.iconClassName : tab.iconClassName,
-  };
-}
-
-function mergeIdentityTabs(
-  tabs: TabState[],
-  activeId: string,
-): { tabs: TabState[]; activeId: string } {
-  const identityTabs = tabs.filter((tab) => isIdentityPath(tab.path));
-  if (identityTabs.length <= 1) {
-    return { tabs, activeId };
-  }
-  const keeper = identityTabs.find((tab) => tab.tabId === activeId) ?? identityTabs[0];
-  const remove = new Set(
-    identityTabs.filter((tab) => tab.tabId !== keeper.tabId).map((tab) => tab.tabId),
-  );
-  return {
-    tabs: tabs.filter((tab) => !remove.has(tab.tabId)),
-    activeId: remove.has(activeId) ? keeper.tabId : activeId,
-  };
-}
-
-function migrateRecentPaths(paths: string[]): string[] {
-  const seen = new Set<string>();
-  const next: string[] = [];
-  for (const path of paths) {
-    const migrated = migrateRecentPath(path);
-    if (!migrated || seen.has(migrated)) {
-      continue;
-    }
-    seen.add(migrated);
-    next.push(migrated);
-  }
-  return next.slice(0, 8);
-}
-
-/**
- * Set the active tab's title.
- *
- * @param newTitle - Title shown on the tab strip.
- */
-export const updateActiveTabTitle = (newTitle: string) => {
-  // TODO Fix this to use a more reliable update mechanism
-  //      using setTimeout to get around a race condition for setting title on new tabs
-  setTimeout(() => {
-    const currentTabs = activeTabs();
-    const activeTab = currentTabs.find((t) => t.tabId === activeTabId());
-    if (activeTab) {
-      activeTab.title = newTitle;
-      activeTabs([...currentTabs]);
-    }
-  }, 100);
-};
-
-// Single-tab mode: when enabled, opening an app replaces the current screen instead of
-// appending a tab. Used by the full-screen root layout so it shows one screen at a time.
-let singleTabModeEnabled = false;
-
-/**
- * Enable or disable single-tab mode.
- *
- * When enabled, {@link openNewTab} replaces the active (non-launcher) screen in place
- * rather than appending a new tab, so single-screen layouts (e.g. full-screen) never
- * accumulate tabs. This is non-destructive: any pre-existing tabs are left untouched and
- * reappear when a multi-tab layout becomes active again. Layouts should enable it on mount
- * and disable it on unmount.
- */
-export const setSingleTabMode = (enabled: boolean) => {
-  singleTabModeEnabled = enabled;
-};
-
-/**
- * Open a tab, or activate an existing tab with the same package and path.
- *
- * @param tab - Tab contents. `tabId` is assigned here.
- * @param forceNew - When true, always append a tab instead of reusing one.
- */
-export const openNewTab = (tab: Omit<TabState, "tabId">, forceNew = false) => {
-  const newTab: TabState = {
-    ...tab,
-    tabId: newid(),
-  };
-
-  const currentTabs = activeTabs();
-  const existingTabIndex = currentTabs.findIndex(
-    (t) => t.packageId === tab.packageId && t.path === tab.path,
-  );
-
-  if (existingTabIndex >= 0 && !forceNew) {
-    // Switch to existing tab
-    activeTabId(currentTabs[existingTabIndex].tabId);
-  } else if (singleTabModeEnabled) {
-    // Single-tab mode: replace the active non-launcher screen in place. From the launcher
-    // (home), append once so the launcher stays put and the new app becomes the single
-    // app slot.
-    const activeIndex = currentTabs.findIndex((t) => t.tabId === activeTabId());
-    const canReplace = activeIndex >= 0 && currentTabs[activeIndex].tabId !== "launcher";
-    if (canReplace) {
-      const newTabs = [...currentTabs];
-      newTabs[activeIndex] = newTab;
-      activeTabs(newTabs);
-    } else {
-      activeTabs([...currentTabs, newTab]);
-    }
-    activeTabId(newTab.tabId);
-  } else {
-    // Always add new tab (for app launcher or when forceNew is true)
-    activeTabs([...currentTabs, newTab]);
-    activeTabId(newTab.tabId);
-  }
-
-  if (tab.path && tab.packageId !== "launcher") {
-    rememberRecentApp(tab.path);
-  }
-};
-
-/** Close the active tab. The launcher tab stays open. */
-export const closeCurrentTab = () => {
-  const currentTabs = activeTabs();
-  const _activeTabId = activeTabId();
-  const tabToClose = currentTabs.find((t) => t.tabId === _activeTabId);
-
-  if (!tabToClose || tabToClose.tabId === "launcher") return;
-
-  const closedIndex = currentTabs.findIndex((t) => t.tabId === _activeTabId);
-  const newTabs = currentTabs.filter((t) => t.tabId !== _activeTabId);
-  activeTabs(newTabs);
-  initializedTabs.delete(_activeTabId);
-
-  if (newTabs.length === 0) {
-    activeTabId("launcher");
-  } else if (closedIndex < newTabs.length) {
-    activeTabId(newTabs[closedIndex].tabId);
-  } else {
-    activeTabId(newTabs[newTabs.length - 1].tabId);
-  }
-};
-
-/** Activate the next open tab, wrapping around. */
-export const switchToNextTab = () => {
-  const currentTabs = activeTabs();
-  const activeTab = activeTabId();
-  const currentIndex = currentTabs.findIndex((tab) => tab.tabId === activeTab);
-
-  if (currentIndex === -1) return;
-
-  const nextIndex = currentIndex === currentTabs.length - 1 ? 0 : currentIndex + 1;
-  activeTabId(currentTabs[nextIndex].tabId);
-};
-
-/** Activate the previous open tab, wrapping around. */
-export const switchToPreviousTab = () => {
-  const currentTabs = activeTabs();
-  const activeTab = activeTabId();
-  const currentIndex = currentTabs.findIndex((tab) => tab.tabId === activeTab);
-
-  if (currentIndex === -1) return;
-
-  const prevIndex = currentIndex === 0 ? currentTabs.length - 1 : currentIndex - 1;
-  activeTabId(currentTabs[prevIndex].tabId);
-};
-
-// Keyboard shortcuts are now handled by the command palette system
-
-activeTabId.subscribe((newActiveTab) => {
-  const currentTabs = activeTabs();
-  const activeTab = currentTabs.find((t) => t.tabId === newActiveTab);
-
-  if (!activeTab) {
-    console.warn("Active tab not found:", newActiveTab);
-    return;
-  }
-
-  // Update mainContentPath for the new active tab
-  if (activeTab.packageId !== "launcher") {
-    _mainContentPath(activeTab.path);
-  } else {
-    _mainContentPath(""); // Launcher or fallback
-  }
-});

package/src/tabs-layout/use-network-status.test.tsx

@@ -1,58 +0,0 @@
-import {
-  type INetworkDiagnosticsConsumer,
-  type INetworkStatusSummary,
-  inProcessTransportPair,
-  observable,
-  registerHostContractTransport,
-} from "@peers-app/peers-sdk";
-import { act, renderHook, waitFor } from "@testing-library/react";
-import { getNetworkDiagnosticsConsumer } from "../screens/network-viewer/network-viewer-ipc";
-import { useNetworkStatus } from "./use-network-status";
-
-jest.mock("../screens/network-viewer/network-viewer-ipc", () => ({
-  getNetworkDiagnosticsConsumer: jest.fn(),
-}));
-
-const mockGetDiagnostics = getNetworkDiagnosticsConsumer as jest.MockedFunction<
-  typeof getNetworkDiagnosticsConsumer
->;
-
-function makeStatus(overrides: Partial<INetworkStatusSummary> = {}): INetworkStatusSummary {
-  return {
-    state: "offline",
-    connectionCount: 0,
-    syncingContextCount: 0,
-    errorCount: 0,
-    disconnectedContextCount: 0,
-    connectedContextCount: 0,
-    stuckRecoveryCount: 0,
-    errors: [],
-    ...overrides,
-  };
-}
-
-describe("useNetworkStatus", () => {
-  it("streams status updates and reports host disconnection", async () => {
-    const status = observable(makeStatus());
-    mockGetDiagnostics.mockResolvedValue({
-      observables: { status },
-    } as INetworkDiagnosticsConsumer);
-    const [transport] = inProcessTransportPair();
-    const disposeTransport = registerHostContractTransport(transport);
-    const hook = renderHook(() => useNetworkStatus());
-
-    await waitFor(() => expect(hook.result.current.availability).toBe("ready"));
-    expect(hook.result.current.status?.state).toBe("offline");
-
-    act(() => {
-      status(makeStatus({ state: "syncing", connectionCount: 2, syncingContextCount: 1 }));
-    });
-    await waitFor(() => expect(hook.result.current.status?.state).toBe("syncing"));
-
-    act(() => {
-      disposeTransport();
-    });
-    await waitFor(() => expect(hook.result.current.availability).toBe("unavailable"));
-    hook.unmount();
-  });
-});

package/src/tabs-layout/use-network-status.ts

@@ -1,68 +0,0 @@
-import {
-  type INetworkStatusSummary,
-  type Subscription,
-  subscribeHostContractTransport,
-} from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
-import { getNetworkDiagnosticsConsumer } from "../screens/network-viewer/network-viewer-ipc";
-
-/** Host availability plus the latest reactive network status snapshot. */
-export interface INetworkStatusViewState {
-  availability: "loading" | "ready" | "unavailable";
-  status?: INetworkStatusSummary;
-}
-
-/** Subscribe to the current host's System Network Diagnostics status observable. */
-export function useNetworkStatus(): INetworkStatusViewState {
-  const [viewState, setViewState] = useState<INetworkStatusViewState>({
-    availability: "loading",
-  });
-
-  useEffect(() => {
-    let active = true;
-    let generation = 0;
-    let statusSubscription: Subscription | undefined;
-    let hadTransport = false;
-    const unsubscribeTransport = subscribeHostContractTransport((transport) => {
-      generation += 1;
-      const currentGeneration = generation;
-      statusSubscription?.dispose();
-      statusSubscription = undefined;
-      if (!transport) {
-        setViewState({ availability: hadTransport ? "unavailable" : "loading" });
-        return;
-      }
-      hadTransport = true;
-      setViewState({ availability: "loading" });
-      void getNetworkDiagnosticsConsumer()
-        .then((diagnostics) => {
-          if (!active || generation !== currentGeneration) {
-            return;
-          }
-          setViewState({
-            availability: "ready",
-            status: diagnostics.observables.status(),
-          });
-          statusSubscription = diagnostics.observables.status.subscribe((status) => {
-            if (active && generation === currentGeneration) {
-              setViewState({ availability: "ready", status });
-            }
-          });
-        })
-        .catch(() => {
-          if (active && generation === currentGeneration) {
-            setViewState({ availability: "unavailable" });
-          }
-        });
-    });
-
-    return () => {
-      active = false;
-      generation += 1;
-      statusSubscription?.dispose();
-      unsubscribeTransport();
-    };
-  }, []);
-
-  return viewState;
-}