@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/screens/console-logs/console-logs-list.tsx

@@ -1,374 +0,0 @@
-import {
-  ConsoleLogs,
-  type DataFilter,
-  type IConsoleLog,
-  type ISubscriptionResult,
-  newid,
-} from "@peers-app/peers-sdk";
-import { min, sortBy, uniqBy } from "lodash";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import InfiniteScroll from "react-infinite-scroll-component";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { isDesktop } from "../../globals";
-import { useObservable, useObservableState } from "../../hooks";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-import { colorMode } from "../settings/color-mode-dropdown";
-import { LogDisplay } from "./log-display";
-import { LogFilters } from "./log-filters";
-import { MobileLogCard } from "./mobile-log-card";
-import { ResizableTableHeader } from "./resizable-table-header";
-
-const windowHeight = () => window.innerHeight;
-
-interface Column {
-  key: string;
-  label: string;
-  width: number;
-}
-
-const DEFAULT_COLUMNS: Column[] = [
-  { key: "timestamp", label: "Timestamp", width: 150 },
-  { key: "level", label: "Level", width: 80 },
-  { key: "process", label: "Process", width: 100 },
-  { key: "source", label: "Source", width: 120 },
-  { key: "message", label: "Message", width: 600 },
-];
-
-export const ConsoleLogsList = () => {
-  const logs = useObservableState<IConsoleLog[]>([]);
-  const [allLogsLoaded, setAllLogsLoaded] = useState(false);
-  const loadMoreId = useObservableState<string>(newid(), true);
-  const [levelFilter, setLevelFilter] = useState<string>("all");
-  const [processFilter, setProcessFilter] = useState<string>("all");
-  const searchText = useObservableState<string>("");
-  /** Observable ref is stable — depend on this string in hooks so search changes refetch. */
-  const searchQuery = searchText();
-  const [columns, setColumns] = useState<Column[]>(DEFAULT_COLUMNS);
-  const [totalLogCount, setTotalLogCount] = useState<number>(0);
-  const [_colorMode] = useObservable(colorMode);
-  const logsEndRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  useObservable(isDesktop);
-  const isMobile = !isDesktop();
-
-  const batchSize = 50;
-
-  // Track fixed column widths to trigger message column recalculation
-  const _fixedColumnsWidthKey = useMemo(() => {
-    return columns
-      .filter((col) => col.key !== "message")
-      .map((col) => `${col.key}:${col.width}`)
-      .join(",");
-  }, [columns]);
-
-  // Calculate message column width based on available space.
-  // Do not depend on `columns` — updating the message column width changes `columns` and would re-enter this effect forever.
-  // Re-run when fixed (non-message) column widths change (`_fixedColumnsWidthKey`) or on window resize.
-  useEffect(() => {
-    const updateMessageColumnWidth = () => {
-      if (!containerRef.current) return;
-
-      const containerWidth = containerRef.current.offsetWidth;
-
-      setColumns((prev) => {
-        const fixedColumnsWidth = prev
-          .filter((col) => col.key !== "message")
-          .reduce((sum, col) => sum + col.width, 0);
-
-        const messageWidth = Math.max(200, containerWidth - fixedColumnsWidth - 20); // 20px for scrollbar
-
-        return prev.map((col) => (col.key === "message" ? { ...col, width: messageWidth } : col));
-      });
-    };
-
-    updateMessageColumnWidth();
-    window.addEventListener("resize", updateMessageColumnWidth);
-
-    return () => {
-      window.removeEventListener("resize", updateMessageColumnWidth);
-    };
-  }, [_fixedColumnsWidthKey]);
-
-  // Build filter from UI state
-  const buildFilter = useCallback((): DataFilter<IConsoleLog> => {
-    const filter: DataFilter<IConsoleLog> = {};
-    if (levelFilter !== "all") {
-      filter.level = levelFilter as IConsoleLog["level"];
-    }
-    if (processFilter !== "all") {
-      filter.process = processFilter;
-    }
-    if (searchQuery.trim()) {
-      filter.message = { $matchWords: searchQuery };
-    }
-    return filter;
-  }, [levelFilter, processFilter, searchQuery]);
-
-  // Update total log count
-  const updateLogCount = useCallback(async () => {
-    const table = await ConsoleLogs();
-    const filter = buildFilter();
-    const count = await table.count(filter);
-    setTotalLogCount(count);
-  }, [buildFilter]);
-
-  // Fetch logs using cursor-based pagination
-  const fetchLogs = useCallback(
-    async (lastLog?: IConsoleLog): Promise<IConsoleLog[]> => {
-      const table = await ConsoleLogs();
-      const base = buildFilter();
-      const filter: DataFilter<IConsoleLog> = lastLog
-        ? { ...base, logId: { $lt: lastLog.logId } }
-        : base;
-      return table.list(filter, {
-        pageSize: batchSize,
-        sortBy: ["-timestamp", "-logId"],
-      });
-    },
-    [buildFilter],
-  );
-
-  const loadMoreLogsRef = useRef<(startLoadId?: string) => Promise<void>>(async () => {});
-
-  // Load older logs (prepend to list)
-  const loadMoreLogs = useCallback(
-    async (startLoadId?: string) => {
-      if (startLoadId && startLoadId !== loadMoreId()) {
-        return;
-      }
-      const sid = startLoadId ?? loadMoreId();
-      const oldestLog = logs()[0];
-      const fetchedLogs = await fetchLogs(oldestLog);
-      if (loadMoreId() !== sid) {
-        await loadMoreLogsRef.current(loadMoreId());
-        return;
-      }
-      if (fetchedLogs.length === 0) {
-        setAllLogsLoaded(true);
-      }
-      let _logs = sortBy([...logs(), ...fetchedLogs], "timestamp");
-      _logs = uniqBy(_logs, (l) => l.logId);
-      logs(_logs);
-    },
-    [fetchLogs, loadMoreId, logs],
-  );
-
-  loadMoreLogsRef.current = loadMoreLogs;
-
-  const scrollToBottom = useCallback((behavior: "instant" | "smooth", delay = 100) => {
-    setTimeout(() => {
-      logsEndRef.current?.scrollIntoView({ behavior });
-    }, delay);
-  }, []);
-
-  const logCount = logs().length;
-
-  // Initial load and ensure screen is filled
-  const minHeightOfLog = 30;
-  useEffect(() => {
-    if (!allLogsLoaded && (!logCount || logCount * minHeightOfLog < windowHeight())) {
-      void loadMoreLogs();
-    }
-  }, [allLogsLoaded, loadMoreLogs, logCount]);
-
-  // Reset when filters change (`logs` is a stable observable setter; effect is driven by filter fields and callbacks).
-  useEffect(() => {
-    loadMoreId(newid());
-    logs([]);
-    void updateLogCount();
-    setAllLogsLoaded(false);
-    void loadMoreLogs();
-  }, [levelFilter, processFilter, searchQuery, loadMoreId, loadMoreLogs, updateLogCount]);
-
-  // Subscribe to new logs (`searchText` ref is stable; handler calls searchText() per event for current query).
-  useEffect(() => {
-    let sub: ISubscriptionResult | undefined;
-    ConsoleLogs().then((table) => {
-      sub = table.dataChanged.subscribe((evt) => {
-        // Update count whenever data changes
-        void updateLogCount();
-
-        const log: IConsoleLog = evt.dataObject;
-
-        // Check if log matches current filters
-        if (levelFilter !== "all" && log.level !== levelFilter) return;
-        if (processFilter !== "all" && log.process !== processFilter) return;
-        if (searchText()) {
-          const logMessage = log.message.toLowerCase();
-          const filterOut = searchText()
-            .toLowerCase()
-            .split(" ")
-            .some((word) => !logMessage.includes(word));
-          if (filterOut) return;
-        }
-
-        // Don't add we're only showing a limited batch and this is older
-        const timestamps = logs().map((l) => l.timestamp);
-        const oldestTs = min(timestamps);
-        if (logs().length > batchSize && oldestTs !== undefined && oldestTs > log.timestamp) {
-          return;
-        }
-
-        if (evt.op === "insert") {
-          let _logs = sortBy([...logs(), log], "timestamp");
-          _logs = uniqBy(_logs, (l) => l.logId);
-          logs(_logs);
-          scrollToBottom("smooth");
-        }
-      });
-    });
-    return () => {
-      sub?.unsubscribe();
-    };
-  }, [levelFilter, processFilter, logs, scrollToBottom, searchText, updateLogCount]);
-
-  async function handleClearLogs() {
-    if (confirm("Are you sure you want to clear all console logs?")) {
-      try {
-        const table = await ConsoleLogs();
-        await table.deleteOldLogs(Date.now());
-        logs([]);
-        setTotalLogCount(0);
-      } catch (err) {
-        console.error("Failed to clear logs:", err);
-      }
-    }
-  }
-
-  const _logs = uniqBy(logs(), (l) => l.logId);
-
-  return (
-    <div
-      className="container-fluid"
-      style={{ height: "calc(100vh - 100px)", display: "flex", flexDirection: "column" }}
-    >
-      <LogFilters
-        levelFilter={levelFilter}
-        setLevelFilter={setLevelFilter}
-        processFilter={processFilter}
-        setProcessFilter={setProcessFilter}
-        searchText={searchText()}
-        setSearchText={searchText}
-      />
-
-      <div
-        ref={containerRef}
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          backgroundColor: _colorMode === "dark" ? "#1a1a1a" : "#f8f9fa",
-          borderRadius: "0.25rem",
-          marginBottom: "50px",
-          overflow: "hidden",
-        }}
-      >
-        {/* Desktop: Resizable table header outside scroll area */}
-        {!isMobile && (
-          <ResizableTableHeader
-            columns={columns}
-            onColumnsChange={setColumns}
-            colorMode={_colorMode}
-          />
-        )}
-
-        {/* Scrollable content area */}
-        <div
-          id="scrollableLogsDiv"
-          style={{
-            flex: 1,
-            overflow: "auto",
-            display: "flex",
-            flexDirection: "column-reverse",
-          }}
-        >
-          <InfiniteScroll
-            dataLength={_logs.length}
-            next={loadMoreLogs}
-            style={{ display: "flex", flexDirection: "column-reverse", overflow: "hidden" }}
-            inverse={true}
-            hasMore={!allLogsLoaded}
-            loader={<LoadingIndicator />}
-            scrollableTarget="scrollableLogsDiv"
-            endMessage={
-              <div className="d-flex justify-content-center p-3">
-                <div className="text-muted">
-                  <i>beginning of logs</i>
-                </div>
-              </div>
-            }
-          >
-            <div ref={logsEndRef} />
-            {_logs.length === 0 && allLogsLoaded ? (
-              <div className="text-center p-5 text-muted">
-                <i className="bi bi-inbox display-1"></i>
-                <p className="mt-2">No logs found</p>
-              </div>
-            ) : isMobile ? (
-              /* Mobile: Card-based layout */
-              <div>
-                {_logs.map((log) => (
-                  <MobileLogCard key={log.logId} log={log} colorMode={_colorMode} />
-                ))}
-              </div>
-            ) : (
-              /* Desktop: Table layout */
-              <table
-                className="table table-sm table-hover mb-0"
-                style={{ fontSize: "0.85rem", tableLayout: "fixed", width: "100%" }}
-              >
-                <tbody>
-                  {_logs.map((log) => (
-                    <LogDisplay key={log.logId} log={log} columns={columns} />
-                  ))}
-                </tbody>
-              </table>
-            )}
-          </InfiniteScroll>
-        </div>
-      </div>
-
-      <div
-        style={{
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          padding: "0.5rem 1rem",
-          backgroundColor: _colorMode === "dark" ? "#2a2a2a" : "#ffffff",
-          borderTop: "1px solid #dee2e6",
-          zIndex: 1000,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <div className="text-muted small">
-          {totalLogCount > 0 ? (
-            <>
-              <i className="bi bi-list-ul me-1"></i>
-              {totalLogCount} log{totalLogCount !== 1 ? "s" : ""}
-            </>
-          ) : (
-            <span>&nbsp;</span>
-          )}
-        </div>
-        <button className="btn btn-sm btn-outline-danger" onClick={handleClearLogs}>
-          <i className="bi bi-trash me-1"></i>
-          Clear All
-        </button>
-      </div>
-    </div>
-  );
-};
-
-registerInternalPeersUI({
-  component: ConsoleLogsList,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "console-logs",
-      uiCategory: "screen",
-      priority: 0,
-    },
-  ],
-});

package/src/screens/console-logs/log-display.tsx

@@ -1,137 +0,0 @@
-import { fromJSONString, type IConsoleLog, toJSON } from "@peers-app/peers-sdk";
-import moment from "moment";
-
-interface Column {
-  key: string;
-  label: string;
-  width: number;
-}
-
-interface LogDisplayProps {
-  log: IConsoleLog;
-  columns: Column[];
-}
-
-const getLevelColor = (level: string) => {
-  switch (level) {
-    case "error":
-      return "#dc3545"; // Red - matches console error
-    case "warn":
-      return "#ffc107"; // Yellow - matches console warn
-    case "info":
-      return "#0dcaf0"; // Cyan - matches console info
-    case "log":
-      return "#6c757d"; // Gray - default log color
-    case "debug":
-      return "#6c757d"; // Gray - debug color
-    default:
-      return "#6c757d";
-  }
-};
-
-const getProcessColor = (process: string) => {
-  switch (process) {
-    case "ui":
-    case "renderer":
-      return "#0dcaf0"; // Cyan - matches console logger
-    case "electron":
-    case "main":
-      return "#d946ef"; // Magenta - matches console logger
-    default:
-      return "#6c757d"; // Gray for unknown
-  }
-};
-
-const getLevelIcon = (level: string) => {
-  switch (level) {
-    case "error":
-      return "bi-x-circle-fill";
-    case "warn":
-      return "bi-exclamation-triangle-fill";
-    case "info":
-      return "bi-info-circle-fill";
-    case "debug":
-      return "bi-bug-fill";
-    default:
-      return "bi-chat-square-text";
-  }
-};
-
-export const LogDisplay = ({ log, columns }: LogDisplayProps) => {
-  const getColumnWidth = (key: string) => {
-    const column = columns.find((c) => c.key === key);
-    return column ? `${column.width}px` : "auto";
-  };
-  if (typeof log.context === "string") {
-    try {
-      log.context = fromJSONString(log.context);
-    } catch (_err) {}
-  }
-
-  return (
-    <tr>
-      <td
-        className="text-nowrap"
-        style={{ fontSize: "0.75rem", width: getColumnWidth("timestamp"), padding: "0.5rem" }}
-      >
-        {moment(log.timestamp).format("MM/DD HH:mm:ss.SSS")}
-      </td>
-      <td style={{ width: getColumnWidth("level"), padding: "0.5rem" }}>
-        <span className="badge text-white" style={{ backgroundColor: getLevelColor(log.level) }}>
-          <i className={`${getLevelIcon(log.level)} me-1`}></i>
-          {log.level}
-        </span>
-      </td>
-      <td style={{ width: getColumnWidth("process"), padding: "0.5rem" }}>
-        <span
-          className="badge text-white"
-          style={{ backgroundColor: getProcessColor(log.process) }}
-        >
-          {log.process}
-        </span>
-      </td>
-      <td
-        className="text-truncate"
-        style={{
-          width: getColumnWidth("source"),
-          padding: "0.5rem",
-          maxWidth: getColumnWidth("source"),
-        }}
-        title={log.source || ""}
-      >
-        {log.source || "-"}
-      </td>
-      <td style={{ width: getColumnWidth("message"), wordBreak: "break-word", padding: "0.5rem" }}>
-        {log.message}
-        {log.context && (
-          <details className="mt-1">
-            <summary className="text-muted small" style={{ cursor: "pointer" }}>
-              <i className="bi bi-code-square me-1"></i>
-              Context
-            </summary>
-            <pre
-              className="small mt-1 p-2 bg-secondary bg-opacity-10 rounded"
-              style={{ fontSize: "0.7rem" }}
-            >
-              {JSON.stringify(toJSON(log.context), null, 2)}
-            </pre>
-          </details>
-        )}
-        {log.stackTrace && (
-          <details className="mt-1">
-            <summary className="text-danger small" style={{ cursor: "pointer" }}>
-              <i className="bi bi-bug me-1"></i>
-              Stack Trace
-            </summary>
-            <pre
-              className="small mt-1 p-2 bg-danger bg-opacity-10 rounded text-danger"
-              style={{ fontSize: "0.7rem" }}
-            >
-              {log.stackTrace}
-            </pre>
-          </details>
-        )}
-      </td>
-    </tr>
-  );
-};

package/src/screens/console-logs/log-filters.tsx

@@ -1,64 +0,0 @@
-interface LogFiltersProps {
-  levelFilter: string;
-  setLevelFilter: (value: string) => void;
-  processFilter: string;
-  setProcessFilter: (value: string) => void;
-  searchText: string;
-  setSearchText: (value: string) => void;
-}
-
-export const LogFilters = ({
-  levelFilter,
-  setLevelFilter,
-  processFilter,
-  setProcessFilter,
-  searchText,
-  setSearchText,
-}: LogFiltersProps) => {
-  return (
-    <div
-      className="mb-3"
-      style={{ position: "sticky", top: 0, zIndex: 10, backgroundColor: "inherit" }}
-    >
-      <div className="row g-2">
-        <div className="col-md-3">
-          <label className="form-label small">Level</label>
-          <select
-            className="form-select form-select-sm"
-            value={levelFilter}
-            onChange={(e) => setLevelFilter(e.target.value)}
-          >
-            <option value="all">All Levels</option>
-            <option value="error">Error</option>
-            <option value="warn">Warning</option>
-            <option value="info">Info</option>
-            <option value="log">Log</option>
-            <option value="debug">Debug</option>
-          </select>
-        </div>
-        <div className="col-md-3">
-          <label className="form-label small">Process</label>
-          <select
-            className="form-select form-select-sm"
-            value={processFilter}
-            onChange={(e) => setProcessFilter(e.target.value)}
-          >
-            <option value="all">All Processes</option>
-            <option value="electron">Electron</option>
-            <option value="ui">UI</option>
-          </select>
-        </div>
-        <div className="col-md-6">
-          <label className="form-label small">Search</label>
-          <input
-            type="text"
-            className="form-control form-control-sm"
-            placeholder="Search log messages..."
-            value={searchText}
-            onChange={(e) => setSearchText(e.target.value)}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};