@peers-app/peers-ui 0.19.10 → 0.19.13

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

@@ -1,23 +1,18 @@
 import {
   getUserContext,
-  hasShownWelcomeModal,
   type IAppNav,
   rpcServerCalls,
   type Subscription,
-  setDefaultClientUserContext,
 } from "@peers-app/peers-sdk";
 import React, { Component, useEffect, useState } from "react";
 import { openCommandPalette } from "../command-palette/command-palette";
-import { CommandPaletteOverlay } from "../command-palette/command-palette-ui";
 import { GroupSwitcher } from "../components/group-switcher";
 import { Router } from "../components/router";
-import { isDesktop, loadGlobals } from "../globals";
-import { useObservable, usePromise } from "../hooks";
+import { isDesktop } from "../globals";
+import { useObservable } from "../hooks";
 import { colorMode } from "../screens/settings/color-mode-dropdown";
-import { SetupUser } from "../screens/setup-user";
-import { WelcomeModal } from "../screens/welcome-modal";
 import { systemPackage } from "../system-apps";
-import { allPackages, loadAllRoutes } from "../ui-router/routes-loader";
+import { allPackages } from "../ui-router/routes-loader";
 import { UIRouter } from "../ui-router/ui-loader";
 import {
   activeTabId,
@@ -41,7 +36,12 @@ interface TabErrorBoundaryState {
   error: Error | null;
 }
 
-class TabErrorBoundary extends Component<TabErrorBoundaryProps, TabErrorBoundaryState> {
+/**
+ * Wraps a single tab's content so a crash in one tab doesn't take down the whole app.
+ * Exported so other root layouts (e.g. the full-screen layout) can render a tab body with
+ * the same crash isolation. Reset it across screens by giving it a `key`.
+ */
+export class TabErrorBoundary extends Component<TabErrorBoundaryProps, TabErrorBoundaryState> {
   constructor(props: TabErrorBoundaryProps) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -88,69 +88,18 @@ class TabErrorBoundary extends Component<TabErrorBoundaryProps, TabErrorBoundary
   }
 }
 
-export function TabsLayoutApp() {
-  const userId = usePromise(async () => {
-    const _userId = await rpcServerCalls.getUserId();
-    return _userId || (null as string | null);
-  });
-
-  if (userId === undefined) {
-    return;
-  }
-
-  if (!userId) {
-    document.getElementById("appLoadingDiv")?.remove();
-    return <SetupUser />;
-  } else {
-    return <TabsLayout userId={userId} />;
-  }
-}
-
-let userContextInitialized = false;
-export function TabsLayout(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,
-    ]);
-    return true;
-  });
-
-  const [showWelcomeModal, setShowWelcomeModal] = useState(false);
-  const [_colorMode] = useObservable(colorMode);
-
-  // 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();
-
-  return (
-    <>
-      <TabsLayoutInternal />
-      <CommandPaletteOverlay />
-      {showWelcomeModal && (
-        <WelcomeModal colorMode={_colorMode} onClose={() => setShowWelcomeModal(false)} />
-      )}
-    </>
-  );
-}
-
-function TabsLayoutInternal() {
+/**
+ * The tab UI body: the tab strip plus the active tab's content. Rendered as the body of
+ * the default `tabs` root layout inside `RootLayoutHost` (which owns bootstrapping, the
+ * command palette, and the welcome modal). Branches on `isDesktop` for mobile vs. desktop
+ * chrome.
+ *
+ * @param fillContainer When `true`, the body fills its parent (`height: 100%`) instead of
+ *   sizing itself to the viewport. Set this when embedding the tabs UI inside another
+ *   layout that owns the vertical space (e.g. the `tabs-with-console` split layout);
+ *   leave it `false`/unset for the standalone `tabs` layout, which sizes to the viewport.
+ */
+export function TabsLayoutInternal({ fillContainer = false }: { fillContainer?: boolean } = {}) {
   const [_colorMode] = useObservable(colorMode);
   const [tabs] = useObservable(activeTabs);
   const [activeTab] = useObservable(activeTabId);
@@ -209,7 +158,7 @@ function TabsLayoutInternal() {
     <div
       key={currentlyActiveGroupId}
       className="d-flex flex-column"
-      style={{ height: "calc(100vh - 25px)", overflow: "hidden" }}
+      style={{ height: fillContainer ? "100%" : "calc(100vh - 25px)", overflow: "hidden" }}
     >
       {switchingGroup && (
         <div
@@ -561,7 +510,12 @@ interface TabContentProps {
   isActive: boolean;
 }
 
-function TabContent({ tab, isMobile, isActive }: TabContentProps) {
+/**
+ * Renders a single tab's body, lazily initializing it on first activation and keeping it
+ * mounted thereafter (`initializedTabs`). Exported so other root layouts (e.g. full-screen)
+ * can render the active screen through the same routing/launcher path.
+ */
+export function TabContent({ tab, isMobile, isActive }: TabContentProps) {
   // Only render content if this tab is active OR has been previously initialized
   const shouldRender = isActive || initializedTabs.has(tab.tabId);
 

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

@@ -244,6 +244,23 @@ export const updateActiveTabTitle = (newTitle: string) => {
   }, 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;
+};
+
 // Global function to open content in new tab
 export const openNewTab = (tab: Omit<TabState, "tabId">, forceNew = false) => {
   const newTab: TabState = {
@@ -259,6 +276,20 @@ export const openNewTab = (tab: Omit<TabState, "tabId">, forceNew = false) => {
   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]);

package/dist/components/chat-overlay.d.ts

@@ -1,14 +0,0 @@
-/**
- * Chat Overlay Component
- *
- * Floating UI element combining voice input with chat functionality.
- * Shows minimized voice button that expands to full chat overlay.
- * Supports both voice and text input in the same thread.
- */
-import type React from "react";
-interface ChatOverlayProps {
-    /** Position of the overlay */
-    position?: "bottom-right" | "bottom-left";
-}
-export declare const ChatOverlay: React.FC<ChatOverlayProps>;
-export default ChatOverlay;