@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/components/group-switcher.tsx

@@ -1,526 +0,0 @@
-import {
-  Groups,
-  getMe,
-  getUserContext,
-  type IGroup,
-  newid,
-  newKeys,
-  saveGroupSecretKey,
-  setUserTrustLevel,
-  TrustLevel,
-  type UserContext,
-  Users,
-} from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from "react";
-import { usePromise } from "../hooks";
-import { packagesTools } from "../screens/packages/packages-ipc";
-
-interface GroupSwitcherProps {
-  /** Current theme (`light` or `dark`). */
-  colorMode: string;
-  /** Use the compact mobile layout. */
-  isMobile?: boolean;
-}
-
-/**
- * Header dropdown for switching the active group (or the personal context) and creating a
- * new group, which also installs the default packages into it.
- */
-export function GroupSwitcher({ colorMode, isMobile = false }: GroupSwitcherProps) {
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [allGroups, setAllGroups] = useState<IGroup[]>([]);
-
-  const userContext = usePromise(getUserContext);
-
-  // Load groups from user context
-  useEffect(() => {
-    if (!userContext) return;
-
-    const loadGroups = async () => {
-      const groupsTable = Groups(userContext.userDataContext);
-      const groupsList = await groupsTable.list({ disabled: { $ne: true } });
-      setAllGroups(groupsList);
-    };
-
-    loadGroups();
-  }, [userContext]);
-
-  // Use useMemo to recompute currentGroup when either currentGroupId or allGroups changes
-  const currentGroup = React.useMemo(() => {
-    const currentGroupId = userContext?.currentlyActiveGroupId();
-    if (!currentGroupId) return null;
-    return allGroups.find((g: IGroup) => g.groupId === currentGroupId) || null;
-  }, [allGroups, userContext?.currentlyActiveGroupId]);
-
-  const handleGroupSelect = (group: IGroup | null) => {
-    if (!userContext) return;
-
-    // Set the active group through user context
-    userContext.currentlyActiveGroupId(group?.groupId || "");
-    setShowDropdown(false);
-  };
-
-  const handleCreateClick = () => {
-    setShowDropdown(false);
-    setShowCreateModal(true);
-  };
-
-  const getGroupIcon = (group: IGroup | null | undefined) => {
-    if (!group) return "bi-person-fill"; // Personal group icon
-    return group.iconClassName || "bi-people-fill";
-  };
-
-  const getGroupName = (group: IGroup | null | undefined) => {
-    if (!group) return "Personal";
-    return group.name;
-  };
-
-  const isDark = colorMode === "dark";
-
-  return (
-    <>
-      <div className="dropdown">
-        <button
-          className={`btn btn-sm ${isMobile ? "" : "me-2"} d-flex align-items-center`}
-          onClick={() => setShowDropdown(!showDropdown)}
-          title={`Current group: ${getGroupName(currentGroup)}`}
-          style={{
-            padding: isMobile ? "4px" : "4px 8px",
-            fontSize: "12px",
-            borderRadius: "6px",
-            border: "none",
-            background: "transparent",
-            color: isDark ? "#adb5bd" : "#6c757d",
-            minWidth: isMobile ? "36px" : undefined,
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.backgroundColor = isDark ? "#495057" : "#f8f9fa";
-            e.currentTarget.style.color = isDark ? "#ffffff" : "#0d6efd";
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.backgroundColor = "transparent";
-            e.currentTarget.style.color = isDark ? "#adb5bd" : "#6c757d";
-          }}
-        >
-          <i
-            className={`${getGroupIcon(currentGroup)} ${isMobile ? "" : "me-1"}`}
-            style={{ fontSize: "14px" }}
-          />
-          {!isMobile && (
-            <span className="text-truncate" style={{ maxWidth: "80px" }}>
-              {getGroupName(currentGroup)}
-            </span>
-          )}
-          <i className="bi-chevron-down ms-1" style={{ fontSize: "10px" }} />
-        </button>
-
-        {showDropdown && (
-          <div
-            className={`dropdown-menu show position-absolute ${isDark ? "dropdown-menu-dark" : ""}`}
-            style={{
-              left: 0,
-              top: "100%",
-              zIndex: 1000,
-              minWidth: "200px",
-              maxHeight: "300px",
-              overflowY: "auto",
-            }}
-          >
-            {/* Personal Group */}
-            <button
-              className={`dropdown-item d-flex align-items-center ${!currentGroup ? "active" : ""}`}
-              style={{
-                cursor: "pointer",
-                border: "none",
-                background: "none",
-                width: "100%",
-                textAlign: "left",
-              }}
-              onClick={() => handleGroupSelect(null)}
-            >
-              <i className="bi-person-fill me-2" />
-              <span>Personal</span>
-            </button>
-
-            {/* Divider */}
-            {allGroups.length > 0 && <div className="dropdown-divider" />}
-
-            {/* Group List */}
-            {allGroups
-              .filter((g: IGroup) => !g.disabled)
-              .map((group: IGroup) => (
-                <button
-                  key={group.groupId}
-                  className={`dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? "active" : ""}`}
-                  style={{
-                    cursor: "pointer",
-                    border: "none",
-                    background: "none",
-                    width: "100%",
-                    textAlign: "left",
-                  }}
-                  onClick={() => handleGroupSelect(group)}
-                >
-                  <i className={`${getGroupIcon(group)} me-2`} />
-                  <span className="text-truncate">{group.name}</span>
-                </button>
-              ))}
-
-            {/* Create New Group */}
-            <div className="dropdown-divider" />
-            <button
-              className="dropdown-item d-flex align-items-center"
-              style={{
-                cursor: "pointer",
-                border: "none",
-                background: "none",
-                width: "100%",
-                textAlign: "left",
-              }}
-              onClick={handleCreateClick}
-            >
-              <i className="bi-plus-circle me-2" />
-              <span>Create Group</span>
-            </button>
-          </div>
-        )}
-
-        {/* Backdrop to close dropdown */}
-        {showDropdown && (
-          <div
-            className="position-fixed w-100 h-100"
-            style={{ top: 0, left: 0, zIndex: 999 }}
-            onClick={() => setShowDropdown(false)}
-          />
-        )}
-      </div>
-
-      {/* Create Group Modal */}
-      {showCreateModal && userContext && (
-        <CreateGroupModal
-          colorMode={colorMode}
-          userContext={userContext}
-          onClose={() => setShowCreateModal(false)}
-          onGroupCreated={async (groupId: string) => {
-            // Refresh groups list
-            const groupsTable = Groups(userContext.userDataContext);
-            const groupsList = await groupsTable.list({ disabled: { $ne: true } });
-            setAllGroups(groupsList);
-
-            // Switch to new group
-            userContext.currentlyActiveGroupId(groupId);
-            setShowCreateModal(false);
-          }}
-        />
-      )}
-    </>
-  );
-}
-
-interface CreateGroupModalProps {
-  colorMode: string;
-  userContext: UserContext;
-  onClose: () => void;
-  onGroupCreated: (groupId: string) => void;
-}
-
-function CreateGroupModal({
-  colorMode,
-  userContext,
-  onClose,
-  onGroupCreated,
-}: CreateGroupModalProps) {
-  const [groupName, setGroupName] = useState("");
-  const [iconClassName, setIconClassName] = useState("bi-people-fill");
-  const [description, setDescription] = useState("");
-  const [isCreating, setIsCreating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const isDark = colorMode === "dark";
-
-  const handleCreate = async () => {
-    // Validate
-    const trimmedName = groupName.trim();
-    if (!trimmedName) {
-      setError("Group name is required");
-      return;
-    }
-
-    if (trimmedName.length > 100) {
-      setError("Group name must be 100 characters or less");
-      return;
-    }
-
-    setIsCreating(true);
-    setError(null);
-
-    try {
-      const groupId = newid();
-      const me = await getMe();
-
-      // Generate cryptographic keys for the group
-      const groupKeys = newKeys();
-
-      // Create group data context
-      const groupDataContext = userContext.getDataContext(groupId);
-
-      // Store the validated secret under its deterministic persistent-variable ID.
-      await saveGroupSecretKey(
-        userContext.userDataContext,
-        groupId,
-        groupKeys.secretKey,
-        groupKeys,
-      );
-
-      // Add current user to the group's users table
-      await Users(groupDataContext).save(me);
-
-      // Set trust level for current user in the group context
-      await setUserTrustLevel(me.userId, TrustLevel.Trusted, groupDataContext);
-
-      // Create group in both user's and group's context
-      const groupsTable = Groups(userContext.userDataContext);
-      const newGroup = await groupsTable.signAndSave({
-        groupId,
-        name: trimmedName,
-        description: description.trim(),
-        iconClassName: iconClassName.trim() || "bi-people-fill",
-        founderUserId: me.userId,
-        disabled: false,
-        publicKey: groupKeys.publicKey,
-        publicBoxKey: groupKeys.publicBoxKey,
-        signature: "", // Will be set by signAndSave()
-      });
-
-      await Groups(groupDataContext).signAndSave(newGroup);
-
-      // Auto-install peers-core for the new group (copy from another context that
-      // already has it, else fall back to the remote updateUrl / bundle).
-      await packagesTools(groupId)
-        .then((tools) => tools.installDefaultPackages())
-        .catch((err: unknown) => {
-          console.error("Error auto-installing peers-core for group:", err);
-        });
-
-      // Notify parent
-      onGroupCreated(newGroup.groupId);
-    } catch (err: unknown) {
-      console.error("Failed to create group:", err);
-      setError(err instanceof Error ? err.message : "Failed to create group. Please try again.");
-      setIsCreating(false);
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey && groupName.trim()) {
-      e.preventDefault();
-      handleCreate();
-    } else if (e.key === "Escape") {
-      onClose();
-    }
-  };
-
-  return (
-    <div
-      className="position-fixed w-100 h-100 d-flex align-items-start justify-content-center"
-      style={{
-        top: 0,
-        left: 0,
-        zIndex: 1050,
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-        backdropFilter: "blur(4px)",
-        paddingTop: "10vh",
-      }}
-      onClick={(e) => {
-        if (e.target === e.currentTarget) {
-          onClose();
-        }
-      }}
-    >
-      <div
-        className={`${isDark ? "bg-dark text-light" : "bg-white text-dark"}`}
-        style={{
-          width: "90%",
-          maxWidth: "500px",
-          borderRadius: "12px",
-          boxShadow: isDark ? "0 20px 40px rgba(0, 0, 0, 0.5)" : "0 20px 40px rgba(0, 0, 0, 0.1)",
-          border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
-          overflow: "hidden",
-        }}
-      >
-        {/* Header */}
-        <div
-          className="p-3 border-bottom d-flex align-items-center justify-content-between"
-          style={{
-            borderBottomColor: isDark ? "#495057" : "#dee2e6",
-          }}
-        >
-          <div className="d-flex align-items-center">
-            <i className="bi-people-fill me-2" style={{ fontSize: "20px" }} />
-            <h6 className="mb-0">Create New Group</h6>
-          </div>
-          <button
-            className="btn btn-sm p-0"
-            style={{
-              border: "none",
-              background: "none",
-              fontSize: "24px",
-              lineHeight: "1",
-              opacity: 0.6,
-            }}
-            onClick={onClose}
-            disabled={isCreating}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.opacity = "1";
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.opacity = "0.6";
-            }}
-          >
-            <i className="bi-x" />
-          </button>
-        </div>
-
-        {/* Body */}
-        <div className="p-3">
-          {/* Error Alert */}
-          {error && (
-            <div className="alert alert-danger py-2 px-3 mb-3" style={{ fontSize: "14px" }}>
-              <i className="bi-exclamation-triangle me-2" />
-              {error}
-            </div>
-          )}
-
-          {/* Group Name */}
-          <div className="mb-3">
-            <label className="form-label small mb-1">
-              Group Name <span className="text-danger">*</span>
-            </label>
-            <input
-              type="text"
-              className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
-              placeholder="Enter group name"
-              value={groupName}
-              onChange={(e) => {
-                setGroupName(e.target.value);
-                setError(null);
-              }}
-              onKeyDown={handleKeyDown}
-              disabled={isCreating}
-              maxLength={100}
-              style={{
-                fontSize: "14px",
-                backgroundColor: isDark ? "#343a40" : "#ffffff",
-              }}
-            />
-            <small className="text-muted" style={{ fontSize: "11px" }}>
-              {groupName.length}/100 characters
-            </small>
-          </div>
-
-          {/* Icon Class Name */}
-          <div className="mb-3">
-            <label className="form-label small mb-1">Icon</label>
-            <div className="input-group">
-              <span
-                className={`input-group-text ${isDark ? "bg-dark text-light border-secondary" : ""}`}
-                style={{ backgroundColor: isDark ? "#343a40" : undefined }}
-              >
-                <i className={iconClassName || "bi-people-fill"} />
-              </span>
-              <input
-                type="text"
-                className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
-                placeholder="bi-people-fill"
-                value={iconClassName}
-                onChange={(e) => setIconClassName(e.target.value)}
-                onKeyDown={handleKeyDown}
-                disabled={isCreating}
-                style={{
-                  fontSize: "14px",
-                  backgroundColor: isDark ? "#343a40" : "#ffffff",
-                }}
-              />
-            </div>
-            <small className="text-muted" style={{ fontSize: "11px" }}>
-              Bootstrap icon class name (e.g., bi-star-fill, bi-house-fill)
-            </small>
-          </div>
-
-          {/* Description */}
-          <div className="mb-3">
-            <label className="form-label small mb-1">Description (optional)</label>
-            <textarea
-              className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
-              placeholder="Enter group description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              disabled={isCreating}
-              rows={3}
-              maxLength={500}
-              style={{
-                fontSize: "14px",
-                backgroundColor: isDark ? "#343a40" : "#ffffff",
-                resize: "none",
-              }}
-            />
-            <small className="text-muted" style={{ fontSize: "11px" }}>
-              {description.length}/500 characters
-            </small>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div
-          className="p-3 border-top d-flex justify-content-end gap-2"
-          style={{
-            borderTopColor: isDark ? "#495057" : "#dee2e6",
-          }}
-        >
-          <button
-            className={`btn btn-sm ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`}
-            onClick={onClose}
-            disabled={isCreating}
-            style={{ minWidth: "80px" }}
-          >
-            Cancel
-          </button>
-          <button
-            className="btn btn-sm btn-primary"
-            onClick={handleCreate}
-            disabled={isCreating || !groupName.trim()}
-            style={{ minWidth: "80px" }}
-          >
-            {isCreating ? (
-              <>
-                <span
-                  className="spinner-border spinner-border-sm me-1"
-                  role="status"
-                  aria-hidden="true"
-                />
-                Creating...
-              </>
-            ) : (
-              <>
-                <i className="bi-plus-circle me-1" />
-                Create
-              </>
-            )}
-          </button>
-        </div>
-
-        {/* Keyboard Shortcuts Helper */}
-        <div
-          className={`px-3 py-2 small text-muted border-top`}
-          style={{
-            borderTopColor: isDark ? "#495057" : "#dee2e6",
-            fontSize: "11px",
-          }}
-        >
-          <kbd className="small">↵</kbd> to create • <kbd className="small">esc</kbd> to cancel
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/input-date.tsx

@@ -1,29 +0,0 @@
-import type { Observable } from "@peers-app/peers-sdk";
-import moment from "moment-timezone";
-import type React from "react";
-import { useObservable } from "../hooks";
-
-interface IProps
-  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-  date: Observable<Date | undefined> | Date | undefined;
-}
-export const InputDate = (props: IProps) => {
-  const [date, setDate] = useObservable<Date | undefined>(props.date);
-
-  const { date: _omitDate, ...inputProps } = props;
-
-  return (
-    <input
-      {...inputProps}
-      type="date"
-      value={date?.toISOString?.().substring(0, 10) ?? ""}
-      onChange={(evt) => {
-        setDate(
-          evt.currentTarget.value
-            ? moment(new Date(evt.currentTarget.value)).startOf("day").add(1, "day").toDate()
-            : undefined,
-        );
-      }}
-    />
-  );
-};

package/src/components/input-number.tsx

@@ -1,83 +0,0 @@
-import { formatMoney, type Observable, unwrapObservable } from "@peers-app/peers-sdk";
-import _, { isNumber } from "lodash";
-import type React from "react";
-import { useState } from "react";
-import { useObservable } from "../hooks";
-
-interface IProps
-  extends Omit<
-    React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    "value"
-  > {
-  value?: number | null | string | Observable<number | null | string | undefined>;
-  format?: "money";
-  precision?: number;
-  refPassthrough?: React.LegacyRef<HTMLInputElement>;
-}
-
-export function InputNumber(props: IProps) {
-  let { format, precision, refPassthrough } = props;
-  if (!_.isNumber(precision)) {
-    precision = 2;
-  }
-
-  const propsPassthrough = { ...props } as Record<string, unknown> & typeof props;
-  for (const name of ["value", "format", "precision", "refPassthrough"] as const) {
-    delete propsPassthrough[name];
-  }
-
-  const [value, setValue] = useObservable(props.value);
-
-  const [displayValue, setDisplayValue] = useState<string>(() => {
-    if (Number.isNaN(Number(value)) || value === null || String(value).trim() === "") {
-      return "";
-    }
-    if (format === "money") {
-      return formatMoney(Number(unwrapObservable(props.value)), precision);
-    }
-    return String(value);
-  });
-
-  function onChange(evt: React.ChangeEvent<HTMLInputElement>) {
-    const _value: string = evt.target.value;
-    setDisplayValue(_value);
-    // convert blank to null
-    if (String(_value).trim() === "") {
-      setValue(null);
-      return;
-    }
-
-    const stripped = _value.replace(/\$/g, "");
-    const parsed = Number(stripped);
-    if (isNumber(parsed) && !Number.isNaN(parsed)) {
-      setValue(parsed);
-    }
-  }
-
-  function onBlur(_evt: React.FocusEvent<HTMLInputElement>) {
-    if (
-      format === "money" &&
-      !Number.isNaN(Number(value)) &&
-      value !== null &&
-      String(value).trim() !== ""
-    ) {
-      const fmtMoney = formatMoney(Number(value), precision);
-      setDisplayValue(fmtMoney);
-    } else if (value === null) {
-      setDisplayValue("");
-    } else {
-      setDisplayValue(String(value));
-    }
-    // todo if not money format precision and set display
-  }
-
-  return (
-    <input
-      {...propsPassthrough}
-      ref={refPassthrough}
-      value={displayValue}
-      onChange={onChange}
-      onBlur={onBlur}
-    />
-  );
-}

package/src/components/input.tsx

@@ -1,25 +0,0 @@
-import type { Observable } from "@peers-app/peers-sdk";
-import type React from "react";
-import { useObservable } from "../hooks";
-
-interface IProps
-  extends Omit<
-    React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    "value"
-  > {
-  value?: string | number | null | Observable<string | number | null | undefined>;
-  type?: React.HTMLInputTypeAttribute;
-}
-
-export function Input(props: IProps) {
-  const [value, setValue] = useObservable(props.value);
-  const type = props.type ?? typeof value;
-  function onChange(evt: React.ChangeEvent<HTMLInputElement>) {
-    let _value: string | number = evt.target.value;
-    if (type === "number") {
-      _value = Number(_value);
-    }
-    setValue(_value);
-  }
-  return <input onChange={onChange} type={type} {...props} value={value ?? ""} />;
-}