@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,6 +1,5 @@
-import { fromJSONString, toJSON, IConsoleLog } from "@peers-app/peers-sdk";
-import moment from 'moment';
-import React from 'react';
+import { fromJSONString, type IConsoleLog, toJSON } from "@peers-app/peers-sdk";
+import moment from "moment";
 
 interface Column {
   key: string;
@@ -15,61 +14,75 @@ interface LogDisplayProps {
 
 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';
+    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
+    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';
+    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';
+    const column = columns.find((c) => c.key === key);
+    return column ? `${column.width}px` : "auto";
   };
-  if (typeof log.context === 'string') {
+  if (typeof log.context === "string") {
     try {
       log.context = fromJSONString(log.context);
-    } catch (err) {}
+    } 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
+        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) }}
-        >
+      <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' }}>
+      <td style={{ width: getColumnWidth("process"), padding: "0.5rem" }}>
         <span
           className="badge text-white"
           style={{ backgroundColor: getProcessColor(log.process) }}
@@ -77,29 +90,43 @@ export const LogDisplay = ({ log, columns }: LogDisplayProps) => {
           {log.process}
         </span>
       </td>
-      <td className="text-truncate" style={{ width: getColumnWidth('source'), padding: '0.5rem', maxWidth: getColumnWidth('source') }} title={log.source || ''}>
-        {log.source || '-'}
+      <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' }}>
+      <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' }}>
+            <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' }}>
+            <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' }}>
+            <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' }}>
+            <pre
+              className="small mt-1 p-2 bg-danger bg-opacity-10 rounded text-danger"
+              style={{ fontSize: "0.7rem" }}
+            >
               {log.stackTrace}
             </pre>
           </details>

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface LogFiltersProps {
   levelFilter: string;
   setLevelFilter: (value: string) => void;
@@ -18,7 +16,10 @@ export const LogFilters = ({
   setSearchText,
 }: LogFiltersProps) => {
   return (
-    <div className="mb-3" style={{ position: 'sticky', top: 0, zIndex: 10, backgroundColor: 'inherit' }}>
+    <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>

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

@@ -1,6 +1,5 @@
-import { fromJSONString, IConsoleLog } from "@peers-app/peers-sdk";
-import moment from 'moment';
-import React from 'react';
+import { fromJSONString, type IConsoleLog } from "@peers-app/peers-sdk";
+import moment from "moment";
 
 interface MobileLogCardProps {
   log: IConsoleLog;
@@ -9,66 +8,81 @@ interface MobileLogCardProps {
 
 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';
+    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';
+    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';
+    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';
-  
+  const isDark = colorMode === "dark";
+
   // Parse context if it's a string
   let context = log.context;
-  if (typeof context === 'string') {
+  if (typeof context === "string") {
     try {
       context = fromJSONString(context);
-    } catch (err) {}
+    } catch (_err) {}
   }
 
   return (
     <div
       style={{
-        padding: '10px 12px',
-        borderBottom: `1px solid ${isDark ? '#333' : '#e9ecef'}`,
-        backgroundColor: isDark ? '#1a1a1a' : '#fff',
+        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')}
+      <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={{ 
+          style={{
             backgroundColor: getLevelColor(log.level),
-            fontSize: '0.65rem',
-            padding: '2px 6px'
+            fontSize: "0.65rem",
+            padding: "2px 6px",
           }}
         >
           <i className={`${getLevelIcon(log.level)} me-1`}></i>
@@ -76,72 +90,66 @@ export const MobileLogCard = ({ log, colorMode }: MobileLogCardProps) => {
         </span>
         <span
           className="badge text-white"
-          style={{ 
+          style={{
             backgroundColor: getProcessColor(log.process),
-            fontSize: '0.65rem',
-            padding: '2px 6px'
+            fontSize: "0.65rem",
+            padding: "2px 6px",
           }}
         >
           {log.process}
         </span>
         {log.source && (
-          <span style={{ fontSize: '0.65rem', color: isDark ? '#666' : '#999' }}>
-            {log.source}
-          </span>
+          <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'
-      }}>
+      <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' }}
-          >
+          <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'
+          <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' }}
-          >
+          <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'
+          <pre
+            className="mt-1 p-2 rounded text-danger"
+            style={{
+              fontSize: "0.6rem",
+              backgroundColor: isDark ? "#2a1a1a" : "#fff0f0",
+              overflow: "auto",
+              maxHeight: "150px",
             }}
           >
             {log.stackTrace}
@@ -151,4 +159,3 @@ export const MobileLogCard = ({ log, colorMode }: MobileLogCardProps) => {
     </div>
   );
 };
-

package/src/screens/console-logs/resizable-table-header.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react';
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
 
 interface Column {
   key: string;
@@ -13,7 +14,11 @@ interface ResizableTableHeaderProps {
   colorMode: string;
 }
 
-export const ResizableTableHeader = ({ columns, onColumnsChange, colorMode }: ResizableTableHeaderProps) => {
+export const ResizableTableHeader = ({
+  columns,
+  onColumnsChange,
+  colorMode,
+}: ResizableTableHeaderProps) => {
   const [resizingColumn, setResizingColumn] = useState<string | null>(null);
   const startXRef = useRef<number>(0);
   const startWidthRef = useRef<number>(0);
@@ -32,8 +37,8 @@ export const ResizableTableHeader = ({ columns, onColumnsChange, colorMode }: Re
       const diff = e.clientX - startXRef.current;
       const newWidth = Math.max(startWidthRef.current + diff, 50); // Min width 50px
 
-      const updatedColumns = columns.map(col =>
-        col.key === resizingColumn ? { ...col, width: newWidth } : col
+      const updatedColumns = columns.map((col) =>
+        col.key === resizingColumn ? { ...col, width: newWidth } : col,
       );
       onColumnsChange(updatedColumns);
     };
@@ -43,52 +48,55 @@ export const ResizableTableHeader = ({ columns, onColumnsChange, colorMode }: Re
     };
 
     if (resizingColumn) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
 
       return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
       };
     }
   }, [resizingColumn, columns, onColumnsChange]);
 
   return (
-    <table className="table table-sm mb-0" style={{ fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' }}>
-      <thead style={{ backgroundColor: colorMode === 'dark' ? '#2a2a2a' : '#ffffff' }}>
+    <table
+      className="table table-sm mb-0"
+      style={{ fontSize: "0.85rem", tableLayout: "fixed", width: "100%" }}
+    >
+      <thead style={{ backgroundColor: colorMode === "dark" ? "#2a2a2a" : "#ffffff" }}>
         <tr>
           {columns.map((column) => (
             <th
               key={column.key}
               style={{
                 width: `${column.width}px`,
-                position: 'relative',
-                padding: '0.5rem',
-                borderRight: '1px solid #dee2e6',
+                position: "relative",
+                padding: "0.5rem",
+                borderRight: "1px solid #dee2e6",
               }}
             >
               {column.label}
-              {column.key !== 'message' && (
+              {column.key !== "message" && (
                 <div
                   onMouseDown={(e) => handleMouseDown(e, column.key, column.width)}
                   style={{
-                    position: 'absolute',
+                    position: "absolute",
                     right: 0,
                     top: 0,
                     bottom: 0,
-                    width: '5px',
-                    cursor: 'col-resize',
-                    userSelect: 'none',
-                    backgroundColor: resizingColumn === column.key ? '#0d6efd' : 'transparent',
+                    width: "5px",
+                    cursor: "col-resize",
+                    userSelect: "none",
+                    backgroundColor: resizingColumn === column.key ? "#0d6efd" : "transparent",
                   }}
                   onMouseEnter={(e) => {
                     if (!resizingColumn) {
-                      e.currentTarget.style.backgroundColor = '#dee2e6';
+                      e.currentTarget.style.backgroundColor = "#dee2e6";
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (!resizingColumn) {
-                      e.currentTarget.style.backgroundColor = 'transparent';
+                      e.currentTarget.style.backgroundColor = "transparent";
                     }
                   }}
                 />

package/src/screens/contacts/contact-details.tsx

@@ -1,10 +1,9 @@
-import { getUserContext, IDoc, IUser, Users } from "@peers-app/peers-sdk";
-import React from "react";
+import { getUserContext, type IDoc, type IUser, Users } from "@peers-app/peers-sdk";
 import { Input } from "../../components/input";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { SaveButton } from "../../components/save-button";
-import { TrustLevelDropdown } from "../../components/trust-level-dropdown";
 import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { TrustLevelDropdown } from "../../components/trust-level-dropdown";
 import { usePromise } from "../../hooks";
 import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
@@ -14,16 +13,19 @@ interface IProps {
 }
 
 export const ContactDetails = (props: IProps) => {
-
-  const contact = usePromise(async () => {
-    const userContext = await getUserContext();
-    const contact = await Users(userContext.userDataContext).get(props.userId);
-    if (!contact) {
-      throw new Error('Contact not found');
-    }
-    updateActiveTabTitle(contact.name || "Contact");
-    return Users(userContext.userDataContext).initDoc(contact);
-  }, undefined, [props.userId]);
+  const contact = usePromise(
+    async () => {
+      const userContext = await getUserContext();
+      const contact = await Users(userContext.userDataContext).get(props.userId);
+      if (!contact) {
+        throw new Error("Contact not found");
+      }
+      updateActiveTabTitle(contact.name || "Contact");
+      return Users(userContext.userDataContext).initDoc(contact);
+    },
+    undefined,
+    [props.userId],
+  );
 
   if (!contact) {
     return <LoadingIndicator />;
@@ -31,7 +33,6 @@ export const ContactDetails = (props: IProps) => {
 
   return (
     <div className="container-fluid p-3">
-
       <div className="d-flex">
         <div>
           <h4>
@@ -42,17 +43,14 @@ export const ContactDetails = (props: IProps) => {
           <h4>
             <Input
               key={contact.userId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              className="border border-0"
+              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
               value={contact.qs.name}
             />
           </h4>
         </div>
         <div>
-          <SaveButton
-            key={contact.userId}
-            doc={contact}
-          />
+          <SaveButton key={contact.userId} doc={contact} />
         </div>
       </div>
 
@@ -60,16 +58,18 @@ export const ContactDetails = (props: IProps) => {
         key={contact.userId}
         tabs={[
           {
-            name: 'Info', content:
+            name: "Info",
+            content: (
               <ScreenTabBody>
                 <ContactInfo contact={contact} />
               </ScreenTabBody>
+            ),
           },
         ]}
       />
     </div>
-  )
-}
+  );
+};
 
 const ContactInfo = (props: { contact: IDoc<IUser> }) => {
   const { contact } = props;
@@ -117,13 +117,12 @@ const ContactInfo = (props: { contact: IDoc<IUser> }) => {
           title="Public box key"
         />
       </div>
-      
     </div>
   );
 };
 
 registerInternalPeersUI({
-  peersUIId: '00contact00details00component',
+  peersUIId: "00contact00details00component",
   component: ContactDetails,
   routes: [
     {
@@ -135,8 +134,8 @@ registerInternalPeersUI({
         }
         return false;
       },
-      uiCategory: 'screen',
-      priority: 2
-    }
-  ]
-});
+      uiCategory: "screen",
+      priority: 2,
+    },
+  ],
+});