@peers-app/peers-ui 0.8.3 → 0.8.4

package/dist/screens/console-logs/console-logs-list.js

@@ -48,6 +48,8 @@ const color_mode_dropdown_1 = require("../settings/color-mode-dropdown");
 const log_display_1 = require("./log-display");
 const log_filters_1 = require("./log-filters");
 const resizable_table_header_1 = require("./resizable-table-header");
+const globals_1 = require("../../globals");
+const mobile_log_card_1 = require("./mobile-log-card");
 const windowHeight = () => window.innerHeight;
 const DEFAULT_COLUMNS = [
     { key: 'timestamp', label: 'Timestamp', width: 150 },
@@ -68,6 +70,8 @@ const ConsoleLogsList = () => {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
     const logsEndRef = react_1.default.useRef(null);
     const containerRef = react_1.default.useRef(null);
+    (0, hooks_1.useObservable)(globals_1.isDesktop);
+    const isMobile = !(0, globals_1.isDesktop)();
     const batchSize = 50;
     // Track fixed column widths to trigger message column recalculation
     const fixedColumnsWidthKey = (0, react_1.useMemo)(() => {
@@ -225,7 +229,7 @@ const ConsoleLogsList = () => {
                 marginBottom: '50px',
                 overflow: 'hidden',
             } },
-            react_1.default.createElement(resizable_table_header_1.ResizableTableHeader, { columns: columns, onColumnsChange: setColumns, colorMode: _colorMode }),
+            !isMobile && (react_1.default.createElement(resizable_table_header_1.ResizableTableHeader, { columns: columns, onColumnsChange: setColumns, colorMode: _colorMode })),
             react_1.default.createElement("div", { id: "scrollableLogsDiv", style: {
                     flex: 1,
                     overflow: 'auto',
@@ -239,10 +243,12 @@ const ConsoleLogsList = () => {
                     react_1.default.createElement("div", { ref: logsEndRef }),
                     _logs.length === 0 && allLogsLoaded ? (react_1.default.createElement("div", { className: "text-center p-5 text-muted" },
                         react_1.default.createElement("i", { className: "bi bi-inbox display-1" }),
-                        react_1.default.createElement("p", { className: "mt-2" }, "No logs found"))) : (react_1.default.createElement("table", { className: "table table-sm table-hover mb-0", style: { fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' } },
-                        react_1.default.createElement("tbody", null, _logs.map((log) => (
-                        // log.logId
-                        react_1.default.createElement(log_display_1.LogDisplay, { key: log.logId, log: log, columns: columns }))))))))),
+                        react_1.default.createElement("p", { className: "mt-2" }, "No logs found"))) : isMobile ? (
+                    /* Mobile: Card-based layout */
+                    react_1.default.createElement("div", null, _logs.map((log) => (react_1.default.createElement(mobile_log_card_1.MobileLogCard, { key: log.logId, log: log, colorMode: _colorMode }))))) : (
+                    /* Desktop: Table layout */
+                    react_1.default.createElement("table", { className: "table table-sm table-hover mb-0", style: { fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' } },
+                        react_1.default.createElement("tbody", null, _logs.map((log) => (react_1.default.createElement(log_display_1.LogDisplay, { key: log.logId, log: log, columns: columns }))))))))),
         react_1.default.createElement("div", { style: {
                 position: 'fixed',
                 bottom: 0,

package/dist/screens/console-logs/mobile-log-card.d.ts

@@ -0,0 +1,8 @@
+import { IConsoleLog } from "@peers-app/peers-sdk";
+import React from 'react';
+interface MobileLogCardProps {
+    log: IConsoleLog;
+    colorMode: string;
+}
+export declare const MobileLogCard: ({ log, colorMode }: MobileLogCardProps) => React.JSX.Element;
+export {};

package/dist/screens/console-logs/mobile-log-card.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileLogCard = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const moment_1 = __importDefault(require("moment"));
+const react_1 = __importDefault(require("react"));
+const getLevelColor = (level) => {
+    switch (level) {
+        case 'error': return '#dc3545';
+        case 'warn': return '#ffc107';
+        case 'info': return '#0dcaf0';
+        case 'log': return '#6c757d';
+        case 'debug': return '#6c757d';
+        default: return '#6c757d';
+    }
+};
+const getProcessColor = (process) => {
+    switch (process) {
+        case 'ui':
+        case 'renderer': return '#0dcaf0';
+        case 'electron':
+        case 'main': return '#d946ef';
+        case 'react-native': return '#61dafb';
+        default: return '#6c757d';
+    }
+};
+const getLevelIcon = (level) => {
+    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';
+    }
+};
+const MobileLogCard = ({ log, colorMode }) => {
+    const isDark = colorMode === 'dark';
+    // Parse context if it's a string
+    let context = log.context;
+    if (typeof context === 'string') {
+        try {
+            context = (0, peers_sdk_1.fromJSONString)(context);
+        }
+        catch (err) { }
+    }
+    return (react_1.default.createElement("div", { style: {
+            padding: '10px 12px',
+            borderBottom: `1px solid ${isDark ? '#333' : '#e9ecef'}`,
+            backgroundColor: isDark ? '#1a1a1a' : '#fff',
+        } },
+        react_1.default.createElement("div", { className: "d-flex align-items-center gap-2 mb-1", style: { flexWrap: 'wrap' } },
+            react_1.default.createElement("span", { style: { fontSize: '0.7rem', color: isDark ? '#888' : '#666' } }, (0, moment_1.default)(log.timestamp).format('HH:mm:ss.SSS')),
+            react_1.default.createElement("span", { className: "badge text-white", style: {
+                    backgroundColor: getLevelColor(log.level),
+                    fontSize: '0.65rem',
+                    padding: '2px 6px'
+                } },
+                react_1.default.createElement("i", { className: `${getLevelIcon(log.level)} me-1` }),
+                log.level),
+            react_1.default.createElement("span", { className: "badge text-white", style: {
+                    backgroundColor: getProcessColor(log.process),
+                    fontSize: '0.65rem',
+                    padding: '2px 6px'
+                } }, log.process),
+            log.source && (react_1.default.createElement("span", { style: { fontSize: '0.65rem', color: isDark ? '#666' : '#999' } }, log.source))),
+        react_1.default.createElement("div", { style: {
+                fontSize: '0.8rem',
+                wordBreak: 'break-word',
+                color: isDark ? '#e0e0e0' : '#333'
+            } }, log.message),
+        context && (react_1.default.createElement("details", { className: "mt-1" },
+            react_1.default.createElement("summary", { className: "text-muted", style: { cursor: 'pointer', fontSize: '0.7rem' } },
+                react_1.default.createElement("i", { className: "bi bi-code-square me-1" }),
+                "Context"),
+            react_1.default.createElement("pre", { className: "mt-1 p-2 rounded", style: {
+                    fontSize: '0.65rem',
+                    backgroundColor: isDark ? '#252525' : '#f8f9fa',
+                    color: isDark ? '#aaa' : '#333',
+                    overflow: 'auto',
+                    maxHeight: '150px'
+                } }, JSON.stringify(context, null, 2)))),
+        log.stackTrace && (react_1.default.createElement("details", { className: "mt-1" },
+            react_1.default.createElement("summary", { className: "text-danger", style: { cursor: 'pointer', fontSize: '0.7rem' } },
+                react_1.default.createElement("i", { className: "bi bi-bug me-1" }),
+                "Stack Trace"),
+            react_1.default.createElement("pre", { className: "mt-1 p-2 rounded text-danger", style: {
+                    fontSize: '0.6rem',
+                    backgroundColor: isDark ? '#2a1a1a' : '#fff0f0',
+                    overflow: 'auto',
+                    maxHeight: '150px'
+                } }, log.stackTrace)))));
+};
+exports.MobileLogCard = MobileLogCard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -27,7 +27,7 @@
   },
   "peerDependencies": {
     "bootstrap": "^5.3.3",
-    "@peers-app/peers-sdk": "^0.8.3",
+    "@peers-app/peers-sdk": "^0.8.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -57,7 +57,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.5",
     "path-browserify": "^1.0.1",
-    "@peers-app/peers-sdk": "0.8.3",
+    "@peers-app/peers-sdk": "0.8.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "string-width": "^7.1.0",

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

@@ -9,6 +9,8 @@ import { colorMode } from '../settings/color-mode-dropdown';
 import { LogDisplay } from './log-display';
 import { LogFilters } from './log-filters';
 import { ResizableTableHeader } from './resizable-table-header';
+import { isDesktop } from '../../globals';
+import { MobileLogCard } from './mobile-log-card';
 
 const windowHeight = () => window.innerHeight;
 
@@ -37,7 +39,9 @@ export const ConsoleLogsList = () => {
   const [totalLogCount, setTotalLogCount] = useState<number>(0);
   const [_colorMode] = useObservable(colorMode);
   const logsEndRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);  
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  useObservable(isDesktop);
+  const isMobile = !isDesktop();
 
   const batchSize = 50;
 
@@ -226,12 +230,14 @@ export const ConsoleLogsList = () => {
           overflow: 'hidden',
         }}
       >
-        {/* Resizable table header outside scroll area */}
-        <ResizableTableHeader
-          columns={columns}
-          onColumnsChange={setColumns}
-          colorMode={_colorMode}
-        />
+        {/* Desktop: Resizable table header outside scroll area */}
+        {!isMobile && (
+          <ResizableTableHeader
+            columns={columns}
+            onColumnsChange={setColumns}
+            colorMode={_colorMode}
+          />
+        )}
 
         {/* Scrollable content area */}
         <div
@@ -267,11 +273,18 @@ export const ConsoleLogsList = () => {
                 <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) => (
-                    // log.logId
                     <LogDisplay key={log.logId} log={log} columns={columns} />
                   ))}
                 </tbody>

package/src/screens/console-logs/mobile-log-card.tsx

@@ -0,0 +1,154 @@
+import { fromJSONString, IConsoleLog } from "@peers-app/peers-sdk";
+import moment from 'moment';
+import React from 'react';
+
+interface MobileLogCardProps {
+  log: IConsoleLog;
+  colorMode: string;
+}
+
+const getLevelColor = (level: string) => {
+  switch (level) {
+    case 'error': return '#dc3545';
+    case 'warn': return '#ffc107';
+    case 'info': return '#0dcaf0';
+    case 'log': return '#6c757d';
+    case 'debug': return '#6c757d';
+    default: return '#6c757d';
+  }
+};
+
+const getProcessColor = (process: string) => {
+  switch (process) {
+    case 'ui':
+    case 'renderer': return '#0dcaf0';
+    case 'electron':
+    case 'main': return '#d946ef';
+    case 'react-native': return '#61dafb';
+    default: return '#6c757d';
+  }
+};
+
+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 MobileLogCard = ({ log, colorMode }: MobileLogCardProps) => {
+  const isDark = colorMode === 'dark';
+  
+  // Parse context if it's a string
+  let context = log.context;
+  if (typeof context === 'string') {
+    try {
+      context = fromJSONString(context);
+    } catch (err) {}
+  }
+
+  return (
+    <div
+      style={{
+        padding: '10px 12px',
+        borderBottom: `1px solid ${isDark ? '#333' : '#e9ecef'}`,
+        backgroundColor: isDark ? '#1a1a1a' : '#fff',
+      }}
+    >
+      {/* Header row: timestamp, level, process */}
+      <div className="d-flex align-items-center gap-2 mb-1" style={{ flexWrap: 'wrap' }}>
+        <span style={{ fontSize: '0.7rem', color: isDark ? '#888' : '#666' }}>
+          {moment(log.timestamp).format('HH:mm:ss.SSS')}
+        </span>
+        <span
+          className="badge text-white"
+          style={{ 
+            backgroundColor: getLevelColor(log.level),
+            fontSize: '0.65rem',
+            padding: '2px 6px'
+          }}
+        >
+          <i className={`${getLevelIcon(log.level)} me-1`}></i>
+          {log.level}
+        </span>
+        <span
+          className="badge text-white"
+          style={{ 
+            backgroundColor: getProcessColor(log.process),
+            fontSize: '0.65rem',
+            padding: '2px 6px'
+          }}
+        >
+          {log.process}
+        </span>
+        {log.source && (
+          <span style={{ fontSize: '0.65rem', color: isDark ? '#666' : '#999' }}>
+            {log.source}
+          </span>
+        )}
+      </div>
+      
+      {/* Message */}
+      <div style={{ 
+        fontSize: '0.8rem', 
+        wordBreak: 'break-word',
+        color: isDark ? '#e0e0e0' : '#333'
+      }}>
+        {log.message}
+      </div>
+      
+      {/* Context (collapsible) */}
+      {context && (
+        <details className="mt-1">
+          <summary 
+            className="text-muted" 
+            style={{ cursor: 'pointer', fontSize: '0.7rem' }}
+          >
+            <i className="bi bi-code-square me-1"></i>
+            Context
+          </summary>
+          <pre 
+            className="mt-1 p-2 rounded" 
+            style={{ 
+              fontSize: '0.65rem',
+              backgroundColor: isDark ? '#252525' : '#f8f9fa',
+              color: isDark ? '#aaa' : '#333',
+              overflow: 'auto',
+              maxHeight: '150px'
+            }}
+          >
+            {JSON.stringify(context, null, 2)}
+          </pre>
+        </details>
+      )}
+      
+      {/* Stack trace (collapsible) */}
+      {log.stackTrace && (
+        <details className="mt-1">
+          <summary 
+            className="text-danger" 
+            style={{ cursor: 'pointer', fontSize: '0.7rem' }}
+          >
+            <i className="bi bi-bug me-1"></i>
+            Stack Trace
+          </summary>
+          <pre 
+            className="mt-1 p-2 rounded text-danger" 
+            style={{ 
+              fontSize: '0.6rem',
+              backgroundColor: isDark ? '#2a1a1a' : '#fff0f0',
+              overflow: 'auto',
+              maxHeight: '150px'
+            }}
+          >
+            {log.stackTrace}
+          </pre>
+        </details>
+      )}
+    </div>
+  );
+};
+