@peers-app/peers-ui 0.27.3 → 0.27.4

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

@@ -1,161 +0,0 @@
-import { fromJSONString, type IConsoleLog } from "@peers-app/peers-sdk";
-import moment from "moment";
-
-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>
-  );
-};

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

@@ -1,110 +0,0 @@
-import type React from "react";
-import { useEffect, useRef, useState } from "react";
-
-interface Column {
-  key: string;
-  label: string;
-  width: number;
-  minWidth?: number;
-}
-
-interface ResizableTableHeaderProps {
-  columns: Column[];
-  onColumnsChange: (columns: Column[]) => void;
-  colorMode: string;
-}
-
-export const ResizableTableHeader = ({
-  columns,
-  onColumnsChange,
-  colorMode,
-}: ResizableTableHeaderProps) => {
-  const [resizingColumn, setResizingColumn] = useState<string | null>(null);
-  const startXRef = useRef<number>(0);
-  const startWidthRef = useRef<number>(0);
-
-  const handleMouseDown = (e: React.MouseEvent, columnKey: string, currentWidth: number) => {
-    e.preventDefault();
-    setResizingColumn(columnKey);
-    startXRef.current = e.clientX;
-    startWidthRef.current = currentWidth;
-  };
-
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!resizingColumn) return;
-
-      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,
-      );
-      onColumnsChange(updatedColumns);
-    };
-
-    const handleMouseUp = () => {
-      setResizingColumn(null);
-    };
-
-    if (resizingColumn) {
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-
-      return () => {
-        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" }}>
-        <tr>
-          {columns.map((column) => (
-            <th
-              key={column.key}
-              style={{
-                width: `${column.width}px`,
-                position: "relative",
-                padding: "0.5rem",
-                borderRight: "1px solid #dee2e6",
-              }}
-            >
-              {column.label}
-              {column.key !== "message" && (
-                <div
-                  onMouseDown={(e) => handleMouseDown(e, column.key, column.width)}
-                  style={{
-                    position: "absolute",
-                    right: 0,
-                    top: 0,
-                    bottom: 0,
-                    width: "5px",
-                    cursor: "col-resize",
-                    userSelect: "none",
-                    backgroundColor: resizingColumn === column.key ? "#0d6efd" : "transparent",
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!resizingColumn) {
-                      e.currentTarget.style.backgroundColor = "#dee2e6";
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!resizingColumn) {
-                      e.currentTarget.style.backgroundColor = "transparent";
-                    }
-                  }}
-                />
-              )}
-            </th>
-          ))}
-        </tr>
-      </thead>
-    </table>
-  );
-};

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

@@ -1,123 +0,0 @@
-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 { Tabs } from "../../components/tabs";
-import { TrustLevelDropdown } from "../../components/trust-level-dropdown";
-import { usePromise } from "../../hooks";
-
-interface IProps {
-  userId: string;
-}
-
-/** Edit a contact's signed profile fields and personal-context trust assignment. */
-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");
-      }
-      return Users(userContext.userDataContext).initDoc(contact);
-    },
-    undefined,
-    [props.userId],
-  );
-
-  if (!contact) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="container-xxl p-3">
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className="bi-person-fill-check me-2"></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={contact.userId}
-              className="border border-0"
-              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
-              value={contact.qs.name}
-            />
-          </h4>
-        </div>
-        <div>
-          <SaveButton key={contact.userId} doc={contact} />
-        </div>
-      </div>
-
-      <Tabs
-        key={contact.userId}
-        tabs={[
-          {
-            name: "Info",
-            content: (
-              <div>
-                <ContactInfo contact={contact} />
-              </div>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-};
-
-const ContactInfo = (props: { contact: IDoc<IUser> }) => {
-  const { contact } = props;
-
-  return (
-    <div>
-      <div className="mb-3">
-        <div className="d-flex align-items-center gap-3">
-          <div className="flex-grow-1">
-            <small className="text-muted d-block mb-1">Name</small>
-            <Input
-              value={contact.qs.name}
-              className="form-control mb-3 ps-2"
-              placeholder="Contact name"
-              title="Contact name"
-            />
-          </div>
-          <div className="border-start ps-3">
-            <small className="text-muted d-block mb-1">User ID</small>
-            <code className="small">{contact.userId}</code>
-          </div>
-          <div className="border-start ps-3">
-            <small className="text-muted d-block mb-1">Trust Level</small>
-            <TrustLevelDropdown userId={contact.userId} />
-            <small className="text-muted d-block mt-1">
-              Self grants this user full remote contract access.
-            </small>
-          </div>
-        </div>
-      </div>
-
-      <div className="mb-3">
-        <small>Public Key:</small>
-        <Input
-          value={contact.qs.publicKey}
-          className="form-control mb-3 p-0 ps-2"
-          placeholder="Public key"
-          title="Public key"
-        />
-      </div>
-
-      <div className="mb-3">
-        <small>Public Box Key:</small>
-        <Input
-          value={contact.qs.publicBoxKey}
-          className="form-control mb-3 p-0 ps-2"
-          placeholder="Public box key"
-          title="Public box key"
-        />
-      </div>
-    </div>
-  );
-};

package/src/screens/contacts/contact-list.test.tsx

@@ -1,59 +0,0 @@
-import { TrustLevel } from "@peers-app/peers-sdk";
-import { render, screen } from "@testing-library/react";
-import { type IPersonSummary, PersonRow } from "./contact-list";
-
-jest.mock("../../globals", () => ({
-  mainContentPath: jest.fn(),
-}));
-
-jest.mock("../../hooks", () => ({
-  usePromise: jest.fn(),
-}));
-
-jest.mock("../../ui-router/ui-loader", () => ({
-  registerInternalPeersUI: jest.fn(),
-}));
-
-jest.mock("../identity/invite-contact-panel", () => ({
-  InviteContactPanel: () => null,
-}));
-
-jest.mock("../identity/profile-invite", () => ({
-  ProfileInviteSection: () => null,
-}));
-
-jest.mock("../invites/activity-view", () => ({
-  PendingWorkLink: () => null,
-}));
-
-const person: IPersonSummary = {
-  user: {
-    userId: "abcdefghijklmnopqrstuvwxy",
-    name: "Alex",
-    publicKey: "signing-key",
-    publicBoxKey: "box-key",
-  },
-  isContact: true,
-  trustLevel: TrustLevel.Known,
-  sharedGroups: [{ groupId: "zyxwvutsrqponmlkjihgfedcb", name: "Neighbors" }],
-};
-
-describe("PersonRow", () => {
-  it("shows useful relationship context without exposing an ordinary user id", () => {
-    render(<PersonRow row={person} duplicateName={false} />);
-
-    expect(screen.getByText("Alex")).toBeInTheDocument();
-    expect(screen.getByText("Contact · Shared group: Neighbors")).toBeInTheDocument();
-    expect(screen.queryByText(person.user.userId)).not.toBeInTheDocument();
-    expect(screen.getByRole("link")).toHaveAttribute(
-      "href",
-      `#identity/people/${person.user.userId}`,
-    );
-  });
-
-  it("adds only a short discriminator when names collide", () => {
-    render(<PersonRow row={person} duplicateName />);
-
-    expect(screen.getByText(`…${person.user.userId.slice(-6)}`)).toBeInTheDocument();
-  });
-});