@peers-app/peers-ui 0.19.12 → 0.19.13

package/src/operator-console/operator-console.tsx

@@ -0,0 +1,233 @@
+/**
+ * Operator Console — presentational panel
+ *
+ * The console's visual chrome only: a header toolbar (dock buttons, maximize/restore,
+ * collapse) plus the body region. It fills its container (`height/width: 100%`) and has
+ * no positioning of its own — the host layout (e.g. the `tabs-with-console` root layout)
+ * owns the split sizing, the resize handle, the collapsed edge strip, and where the panel
+ * is placed. Command input, output blocks, and the engine arrive later.
+ */
+
+import type React from "react";
+import { useObservable } from "../hooks";
+import { colorMode } from "../screens/settings/color-mode-dropdown";
+import {
+  type ConsoleDock,
+  operatorConsolePanel,
+  setConsoleDock,
+  setConsoleMaximized,
+  toggleConsole,
+} from "./operator-console-state";
+
+/** Resolved color palette for the console chrome. */
+export interface ConsoleTheme {
+  bg: string;
+  headerBg: string;
+  border: string;
+  text: string;
+  muted: string;
+  hover: string;
+  accent: string;
+}
+
+/**
+ * Resolve the console color palette for the active color mode. Shared by the panel and by
+ * the host layout (so its collapsed strip and resize divider match the panel chrome).
+ */
+export function getConsoleTheme(isDark: boolean): ConsoleTheme {
+  return {
+    bg: isDark ? "#1e1e1e" : "#ffffff",
+    headerBg: isDark ? "#252526" : "#f3f3f3",
+    border: isDark ? "#3c3c3c" : "#dee2e6",
+    text: isDark ? "#cccccc" : "#1e1e1e",
+    muted: isDark ? "#8c8c8c" : "#6c757d",
+    hover: isDark ? "#2a2d2e" : "#e8e8e8",
+    accent: "#0d6efd",
+  };
+}
+
+/**
+ * The Operator Console panel chrome. Renders as an in-flow flex column that fills its
+ * container; the parent layout decides the panel's size and placement. Reads dock and
+ * maximized state from `operatorConsolePanel` to drive the header toolbar.
+ */
+export const OperatorConsolePanel: React.FC = () => {
+  const [state] = useObservable(operatorConsolePanel);
+  const [mode] = useObservable(colorMode);
+
+  const { dock, maximized } = state;
+  const theme = getConsoleTheme(mode === "dark");
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: theme.bg,
+        color: theme.text,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+      }}
+    >
+      {/* Header toolbar */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          height: "34px",
+          flex: "0 0 auto",
+          padding: "0 8px",
+          backgroundColor: theme.headerBg,
+          borderBottom: `1px solid ${theme.border}`,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "12px" }}>
+          <i className="bi-terminal" />
+          <span style={{ fontWeight: 500 }}>Console</span>
+        </div>
+
+        <div style={{ display: "flex", alignItems: "center", gap: "2px" }}>
+          <DockButton
+            dock="left"
+            active={dock === "left"}
+            disabled={maximized}
+            theme={theme}
+            icon="bi-arrow-bar-left"
+            label="Dock left"
+          />
+          <DockButton
+            dock="bottom"
+            active={dock === "bottom"}
+            disabled={maximized}
+            theme={theme}
+            icon="bi-arrow-bar-down"
+            label="Dock bottom"
+          />
+          <DockButton
+            dock="right"
+            active={dock === "right"}
+            disabled={maximized}
+            theme={theme}
+            icon="bi-arrow-bar-right"
+            label="Dock right"
+          />
+
+          <span
+            style={{ width: "1px", height: "18px", backgroundColor: theme.border, margin: "0 4px" }}
+          />
+
+          <ToolbarButton
+            theme={theme}
+            icon={maximized ? "bi-fullscreen-exit" : "bi-arrows-fullscreen"}
+            label={maximized ? "Restore" : "Maximize"}
+            onClick={() => setConsoleMaximized(!maximized)}
+          />
+          <ToolbarButton
+            theme={theme}
+            icon="bi-chevron-down"
+            label="Collapse (Ctrl+`)"
+            onClick={toggleConsole}
+          />
+        </div>
+      </div>
+
+      {/* Body placeholder (content arrives in a later step) */}
+      <div
+        style={{
+          flex: "1 1 auto",
+          overflow: "auto",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: theme.muted,
+          fontSize: "13px",
+        }}
+      >
+        <div style={{ textAlign: "center" }}>
+          <i
+            className="bi-terminal"
+            style={{ fontSize: "24px", display: "block", marginBottom: "6px" }}
+          />
+          Operator Console
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface ButtonTheme {
+  text: string;
+  muted: string;
+  hover: string;
+}
+
+interface ToolbarButtonProps {
+  theme: ButtonTheme;
+  icon: string;
+  label: string;
+  onClick: () => void;
+  active?: boolean;
+  disabled?: boolean;
+}
+
+/** A small, icon-only button used in the console header toolbar. */
+function ToolbarButton({ theme, icon, label, onClick, active, disabled }: ToolbarButtonProps) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      disabled={disabled}
+      onClick={onClick}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "28px",
+        height: "26px",
+        border: "none",
+        borderRadius: "4px",
+        background: active ? theme.hover : "transparent",
+        color: active ? theme.text : theme.muted,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.4 : 1,
+        fontSize: "14px",
+      }}
+      onMouseEnter={(e) => {
+        if (!disabled) e.currentTarget.style.backgroundColor = theme.hover;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.backgroundColor = active ? theme.hover : "transparent";
+      }}
+    >
+      <i className={icon} />
+    </button>
+  );
+}
+
+interface DockButtonProps {
+  dock: ConsoleDock;
+  active: boolean;
+  disabled: boolean;
+  theme: ButtonTheme;
+  icon: string;
+  label: string;
+}
+
+/** Header button that docks the console to a given edge. */
+function DockButton({ dock, active, disabled, theme, icon, label }: DockButtonProps) {
+  return (
+    <ToolbarButton
+      theme={theme}
+      icon={icon}
+      label={label}
+      active={active}
+      disabled={disabled}
+      onClick={() => setConsoleDock(dock)}
+    />
+  );
+}
+
+export default OperatorConsolePanel;

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

@@ -0,0 +1,50 @@
+import { observable } from "@peers-app/peers-sdk";
+import type React from "react";
+
+/**
+ * A globally-mounted overlay component contributed by a package (or peers-ui itself).
+ *
+ * Overlays are rendered by {@link RootLayoutHost} above every root layout (alongside the
+ * command palette), so they remain visible regardless of which tab/app is active. Each
+ * overlay is responsible for deciding its own visibility (e.g. returning `null` when it
+ * should be hidden); the registry only controls whether the component is mounted.
+ */
+export interface GlobalOverlay {
+  /** Stable id. Re-registering with the same id replaces the prior entry. */
+  id: string;
+  /** The component rendered by the host. It owns its own visibility and positioning. */
+  Component: React.ComponentType;
+}
+
+/**
+ * Reactive registry of global overlays rendered by {@link RootLayoutHost}.
+ *
+ * This mirrors the command-palette registry pattern: a package's UI bundle calls
+ * {@link registerGlobalOverlay} when it loads, and the host re-renders because this is an
+ * observable. Because peers-core (and other packages) externalize `@peers-app/peers-ui`
+ * to the shared `window.PeersUI` singleton, they register into this exact instance.
+ */
+export const globalOverlays = observable<GlobalOverlay[]>([]);
+
+/**
+ * Register a global overlay component, replacing any existing overlay with the same id.
+ *
+ * @param id Stable identifier for the overlay (used for replacement/removal).
+ * @param Component The React component to mount globally.
+ */
+export function registerGlobalOverlay(id: string, Component: React.ComponentType): void {
+  const next = globalOverlays().filter((o) => o.id !== id);
+  next.push({ id, Component });
+  globalOverlays(next);
+}
+
+/**
+ * Remove a previously-registered global overlay by id. No-op if the id is not registered.
+ *
+ * @param id The id passed to {@link registerGlobalOverlay}.
+ */
+export function unregisterGlobalOverlay(id: string): void {
+  const current = globalOverlays();
+  const next = current.filter((o) => o.id !== id);
+  if (next.length !== current.length) globalOverlays(next);
+}

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

@@ -0,0 +1,47 @@
+/**
+ * Layout picker — Settings entry point for choosing the root layout.
+ *
+ * Lists every registered {@link RootLayout} and writes the selection to
+ * `selectedRootLayoutId` (per-device). `RootLayoutHost` subscribes to that pvar, so the
+ * layout swaps live on select. Mirrors the `ColorModeDropdown` pattern.
+ */
+
+import { useObservable } from "../hooks";
+import { getRootLayouts } from "./root-layout-registry";
+import { selectedRootLayoutId, setRootLayout } from "./root-layout-state";
+
+/** Dropdown that selects the active root layout. */
+export const LayoutPicker = () => {
+  const [selectedId] = useObservable(selectedRootLayoutId);
+  const layouts = getRootLayouts();
+  const active = layouts.find((layout) => layout.id === selectedId);
+
+  return (
+    <div className="dropdown">
+      <button
+        className="btn btn-secondary dropdown-toggle"
+        type="button"
+        id="layoutPickerDropdown"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        Layout: {active?.name ?? selectedId}
+      </button>
+      <ul className="dropdown-menu" aria-labelledby="layoutPickerDropdown">
+        {layouts.map((layout) => (
+          <li key={layout.id}>
+            <button
+              type="button"
+              className="dropdown-item"
+              onClick={() => setRootLayout(layout.id)}
+            >
+              <i className={`${layout.iconClassName} me-2`} />
+              {layout.name} {layout.id === selectedId && "✓"}
+              <div className="small text-muted ms-4">{layout.description}</div>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/root-layout/layouts/full-screen-layout.tsx

@@ -0,0 +1,144 @@
+/**
+ * Full-screen root layout — one screen at a time, no tab strip.
+ *
+ * Renders only the active tab's content under a minimal header. All navigation flows
+ * through the command palette (Cmd/Ctrl+K), which {@link RootLayoutHost} always mounts,
+ * plus a Home button back to the app launcher. While mounted, this layout enables
+ * single-tab mode (see `setSingleTabMode`) so opening an app replaces the current screen
+ * instead of accumulating tabs. This is non-destructive: any tabs opened under a multi-tab
+ * layout are left untouched and reappear if the user switches back.
+ */
+
+import { type ReactNode, useEffect } from "react";
+import { openCommandPalette } from "../../command-palette/command-palette";
+import { GroupSwitcher } from "../../components/group-switcher";
+import { isDesktop } from "../../globals";
+import { useObservable } from "../../hooks";
+import { colorMode } from "../../screens/settings/color-mode-dropdown";
+import { TabContent, TabErrorBoundary } from "../../tabs-layout/tabs-layout";
+import {
+  activeTabId,
+  activeTabs,
+  launcherApp,
+  setSingleTabMode,
+} from "../../tabs-layout/tabs-state";
+
+const isMac =
+  typeof navigator !== "undefined" ? /Mac|iPod|iPhone|iPad/.test(navigator.userAgent) : false;
+const paletteHint = isMac ? "⌘K" : "Ctrl+K";
+
+/** The full-screen layout body: minimal header + the single active screen. */
+export function FullScreenLayout() {
+  const [mode] = useObservable(colorMode);
+  const [tabs] = useObservable(activeTabs);
+  const [activeId] = useObservable(activeTabId);
+  useObservable(isDesktop);
+  const isMobile = !isDesktop();
+
+  // Single-tab navigation while this layout is active; restore on unmount/layout swap.
+  useEffect(() => {
+    setSingleTabMode(true);
+    return () => setSingleTabMode(false);
+  }, []);
+
+  const activeTab = tabs.find((t) => t.tabId === activeId) ?? launcherApp;
+  const isLauncher = activeTab.packageId === "launcher" || activeTab.tabId === "launcher";
+  const isLight = mode === "light";
+
+  const title = isLauncher ? "Apps" : activeTab.title;
+
+  return (
+    <div
+      className="d-flex flex-column"
+      style={{ height: "calc(100vh - 25px)", overflow: "hidden" }}
+    >
+      {/* Minimal header */}
+      <div
+        className={`border-bottom d-flex align-items-center px-1 ${isLight ? "bg-light" : "bg-dark"}`}
+        style={{ height: "36px", borderBottomColor: isLight ? "#dee2e6" : "#495057" }}
+      >
+        <GroupSwitcher colorMode={mode} isMobile={isMobile} />
+
+        <HeaderButton
+          isLight={isLight}
+          active={isLauncher}
+          icon="bi-grid-3x3-gap"
+          label="Apps"
+          onClick={() => activeTabId("launcher")}
+        />
+
+        {/* Current screen title */}
+        <div className="d-flex align-items-center flex-grow-1 overflow-hidden px-2">
+          {!isLauncher && activeTab.iconClassName && (
+            <i className={`${activeTab.iconClassName} me-2`} />
+          )}
+          <span className="text-truncate fw-medium" style={{ fontSize: "13px" }}>
+            {title}
+          </span>
+        </div>
+
+        {/* Command palette (navigation) */}
+        <HeaderButton
+          isLight={isLight}
+          icon="bi-search"
+          label={`Search and navigate (${paletteHint})`}
+          onClick={openCommandPalette}
+        >
+          <span className="d-none d-md-inline ms-1" style={{ fontSize: "11px" }}>
+            {paletteHint}
+          </span>
+        </HeaderButton>
+      </div>
+
+      {/* The single active screen. Key on tabId so each screen mounts fresh (and the error
+          boundary resets) when navigating. */}
+      <div className="flex-grow-1 overflow-hidden">
+        <TabErrorBoundary key={activeTab.tabId} tabTitle={activeTab.title} tabId={activeTab.tabId}>
+          <TabContent tab={activeTab} isMobile={isMobile} isActive />
+        </TabErrorBoundary>
+      </div>
+    </div>
+  );
+}
+
+interface HeaderButtonProps {
+  isLight: boolean;
+  icon: string;
+  label: string;
+  onClick: () => void;
+  active?: boolean;
+  children?: ReactNode;
+}
+
+/** A small, transparent header button matching the tabs layout's toolbar styling. */
+function HeaderButton({ isLight, icon, label, onClick, active, children }: HeaderButtonProps) {
+  const baseColor = active ? (isLight ? "#0d6efd" : "#ffffff") : isLight ? "#6c757d" : "#adb5bd";
+  return (
+    <button
+      type="button"
+      className="btn btn-sm d-flex align-items-center"
+      onClick={onClick}
+      title={label}
+      aria-label={label}
+      style={{
+        padding: "4px 8px",
+        fontSize: "12px",
+        borderRadius: "6px",
+        border: "none",
+        background: "transparent",
+        color: baseColor,
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.backgroundColor = isLight ? "#f8f9fa" : "#495057";
+        e.currentTarget.style.color = isLight ? "#0d6efd" : "#ffffff";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
+        e.currentTarget.style.color = baseColor;
+      }}
+    >
+      <i className={icon} style={{ fontSize: "14px" }} />
+      {children}
+    </button>
+  );
+}