@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/screens/devices/devices-list.tsx

@@ -1,365 +0,0 @@
-import {
-  Devices,
-  DISPLAY_NAME_MAX_LENGTH,
-  getUserContext,
-  type IDevice,
-  type INetworkConnectionInfo,
-  TrustLevel,
-  thisDeviceId,
-} from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
-import { RemoteAppUpdatePanel } from "../../app-updates/remote-app-update-panel";
-import { Input } from "../../components/input";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { mainContentPath } from "../../globals";
-import { useObservable, useObservableState, usePromise } from "../../hooks";
-import { SourceDevicePairing } from "../device-pairing";
-import { IDENTITY_DEVICES_PATH, IDENTITY_PAIR_PATH } from "../identity/identity-routes";
-import { PendingWorkLink } from "../invites/activity-view";
-import {
-  getNetworkControlConsumer,
-  getNetworkDiagnosticsConsumer,
-} from "../network-viewer/network-viewer-ipc";
-
-function trustLabel(level: TrustLevel): string {
-  return TrustLevel[level] ?? String(level);
-}
-
-function connectionLabel(connection: INetworkConnectionInfo | undefined): string {
-  if (!connection) {
-    return "Offline";
-  }
-  const path =
-    connection.pathType === "direct"
-      ? "direct"
-      : connection.pathType === "indirect"
-        ? "indirect"
-        : "unknown path";
-  return `${connection.connectionState} · ${path}`;
-}
-
-/** Compact, fully clickable row for one of the signed-in user's devices. */
-export function DeviceRow(props: {
-  device: IDevice;
-  connection?: INetworkConnectionInfo;
-  isThisDevice: boolean;
-}) {
-  const connected = props.connection !== undefined;
-  return (
-    <a
-      href={`#${IDENTITY_DEVICES_PATH}/${props.device.deviceId}`}
-      className="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3"
-    >
-      <span
-        className="rounded-3 bg-body-secondary d-inline-flex align-items-center justify-content-center flex-shrink-0"
-        style={{ width: 44, height: 44 }}
-        aria-hidden="true"
-      >
-        <i className={`bi ${props.isThisDevice ? "bi-laptop-fill" : "bi-laptop"}`} />
-      </span>
-      <span className="flex-grow-1 overflow-hidden">
-        <span className="d-flex align-items-center gap-2 flex-wrap">
-          <span className="fw-semibold text-truncate">
-            {props.device.name || props.device.reportedName || "Unnamed device"}
-          </span>
-          {props.isThisDevice ? <span className="badge text-bg-primary">This device</span> : null}
-        </span>
-        <span className="small text-muted d-block">
-          {props.device.lastSeen ? `Seen ${relativeTime(props.device.lastSeen)}` : "Never seen"}
-        </span>
-      </span>
-      <span className={`badge ${connected ? "text-bg-success" : "text-bg-secondary"}`}>
-        {connected ? "Online" : "Offline"}
-      </span>
-      {connected && props.connection?.pathType ? (
-        <span className="badge text-bg-light border text-capitalize">
-          {props.connection.pathType}
-        </span>
-      ) : null}
-      <i className="bi bi-chevron-right text-muted" aria-hidden="true" />
-    </a>
-  );
-}
-
-function ThisDeviceCard(props: { device: IDevice }) {
-  const name = useObservableState(props.device.name ?? "");
-  const [nameValue] = useObservable(name);
-  const [saving, setSaving] = useState(false);
-
-  useEffect(() => {
-    name(props.device.name ?? "");
-  }, [name, props.device.deviceId, props.device.name]);
-
-  const save = async () => {
-    setSaving(true);
-    try {
-      const userContext = await getUserContext();
-      const table = Devices(userContext.userDataContext);
-      const next = { ...props.device, name: nameValue.trim() || undefined };
-      await table.save(next);
-    } catch (err) {
-      alert(`Could not save this device: ${(err as Error).message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const dirty = (nameValue ?? "") !== (props.device.name ?? "");
-
-  return (
-    <div className="card mb-3">
-      <div className="card-body">
-        <h6 className="card-title">This device</h6>
-        <label className="form-label small" htmlFor="this-device-name">
-          Name
-        </label>
-        <div className="input-group">
-          <Input
-            id="this-device-name"
-            value={name}
-            className="form-control"
-            maxLength={DISPLAY_NAME_MAX_LENGTH}
-            placeholder="e.g. My laptop"
-          />
-          <button
-            type="button"
-            className="btn btn-primary"
-            disabled={!dirty || saving}
-            onClick={() => void save()}
-          >
-            Save
-          </button>
-        </div>
-        <div className="small text-muted mt-2">
-          {trustLabel(props.device.trustLevel)} · {props.device.deviceId}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/** Which devices surface the Identity shell is showing. */
-export type DevicesSectionMode = "list" | "pair" | "detail";
-
-/**
- * Devices section of Identity: the account's devices, pairing, or one device.
- */
-export function DevicesSection(props: { mode?: DevicesSectionMode; deviceId?: string }) {
-  const mode = props.mode ?? "list";
-  const userContext = usePromise(getUserContext);
-  const [thisId] = useObservable(thisDeviceId);
-  const [devices, setDevices] = useState<IDevice[] | undefined>();
-  const [connections, setConnections] = useState<INetworkConnectionInfo[]>([]);
-
-  useEffect(() => {
-    if (!userContext) {
-      return;
-    }
-    let disposed = false;
-    const table = Devices(userContext.userDataContext);
-    const load = async () => {
-      const rows = await table.list();
-      if (!disposed) {
-        setDevices(rows);
-      }
-    };
-    void load();
-    const subscription = table.dataChanged.subscribe(() => {
-      void load();
-    });
-    return () => {
-      disposed = true;
-      subscription.unsubscribe();
-    };
-  }, [userContext]);
-
-  useEffect(() => {
-    let disposed = false;
-    const load = async () => {
-      try {
-        const diagnostics = await getNetworkDiagnosticsConsumer();
-        const result = await diagnostics.tools.getConnections();
-        if (!disposed) {
-          setConnections(result.connections);
-        }
-      } catch {
-        if (!disposed) {
-          setConnections([]);
-        }
-      }
-    };
-    void load();
-    const timer = window.setInterval(() => void load(), 5000);
-    return () => {
-      disposed = true;
-      window.clearInterval(timer);
-    };
-  }, []);
-
-  if (!userContext || !devices) {
-    return <LoadingIndicator />;
-  }
-
-  const byId = new Map(connections.map((connection) => [connection.deviceId, connection]));
-  const accountDevices = devicesForUser(devices, userContext.userId);
-  const mine = accountDevices.find((device) => device.deviceId === thisId);
-  const others = accountDevices
-    .filter((device) => device.deviceId !== thisId)
-    .sort((a, b) => (a.name ?? "").localeCompare(b.name ?? ""));
-
-  if (mode === "pair") {
-    return (
-      <div className="container-fluid p-3" style={{ maxWidth: 720 }}>
-        <a href={`#${IDENTITY_DEVICES_PATH}`} className="btn btn-link btn-sm px-0 mb-2">
-          Back to devices
-        </a>
-        <SourceDevicePairing onClose={() => mainContentPath(IDENTITY_DEVICES_PATH)} />
-      </div>
-    );
-  }
-
-  if (mode === "detail") {
-    const device = accountDevices.find((entry) => entry.deviceId === props.deviceId);
-    if (!device) {
-      return (
-        <div className="container-fluid p-3">
-          <a href={`#${IDENTITY_DEVICES_PATH}`}>Back to devices</a>
-          <p className="mt-3 text-muted">That device is not on this account.</p>
-        </div>
-      );
-    }
-    return (
-      <DeviceDetail
-        device={device}
-        connection={byId.get(device.deviceId)}
-        isThisDevice={device.deviceId === thisId}
-      />
-    );
-  }
-
-  return (
-    <div className="container-xxl p-3">
-      <div className="mb-3">
-        <h4 className="mb-1">
-          <i className="bi bi-laptop me-2" />
-          My devices
-        </h4>
-        <div className="small text-muted">
-          Installations signed in to this account. Connection diagnostics stay in{" "}
-          <a href="#network-viewer">Network Viewer</a>.
-        </div>
-      </div>
-      <PendingWorkLink type="device" />
-      <div className="list-group">
-        {mine ? (
-          <DeviceRow device={mine} connection={byId.get(mine.deviceId)} isThisDevice />
-        ) : null}
-        {others.map((device) => (
-          <DeviceRow
-            key={device.deviceId}
-            device={device}
-            connection={byId.get(device.deviceId)}
-            isThisDevice={false}
-          />
-        ))}
-      </div>
-      {!mine && others.length === 0 ? (
-        <div className="border rounded p-4 text-center">
-          <i className="bi bi-laptop fs-2 text-muted" />
-          <h6 className="mt-2">No devices are registered yet</h6>
-          <a href={`#${IDENTITY_PAIR_PATH}`} className="btn btn-primary btn-sm">
-            Add a device
-          </a>
-        </div>
-      ) : null}
-      {mine && others.length === 0 ? (
-        <p className="small text-muted mt-3">
-          This is your only device. Use <a href={`#${IDENTITY_PAIR_PATH}`}>Add device</a> to sign in
-          somewhere else.
-        </p>
-      ) : null}
-    </div>
-  );
-}
-
-function DeviceDetail(props: {
-  device: IDevice;
-  connection?: INetworkConnectionInfo;
-  isThisDevice: boolean;
-}) {
-  return (
-    <div className="container-xxl p-3">
-      <a href={`#${IDENTITY_DEVICES_PATH}`} className="btn btn-link btn-sm px-0 mb-2">
-        Back to devices
-      </a>
-      <h4 className="mb-3">{props.device.name || "Unnamed device"}</h4>
-      {props.isThisDevice ? <ThisDeviceCard device={props.device} /> : null}
-      <dl className="row small mb-3">
-        <dt className="col-sm-4">Trust</dt>
-        <dd className="col-sm-8">{trustLabel(props.device.trustLevel)}</dd>
-        <dt className="col-sm-4">Connection</dt>
-        <dd className="col-sm-8">{connectionLabel(props.connection)}</dd>
-        <dt className="col-sm-4">Last seen</dt>
-        <dd className="col-sm-8">
-          {props.device.lastSeen ? new Date(props.device.lastSeen).toLocaleString() : "Unknown"}
-        </dd>
-        <dt className="col-sm-4">Device ID</dt>
-        <dd className="col-sm-8 text-break">{props.device.deviceId}</dd>
-      </dl>
-      <a href="#network-viewer" className="btn btn-outline-secondary btn-sm me-2">
-        Open Network Viewer
-      </a>
-      {props.isThisDevice ? null : (
-        <button
-          type="button"
-          className="btn btn-outline-danger btn-sm"
-          onClick={() => void forgetDevice(props.device)}
-        >
-          Forget
-        </button>
-      )}
-      {props.isThisDevice ? null : (
-        <RemoteAppUpdatePanel deviceId={props.device.deviceId} deviceName={props.device.name} />
-      )}
-    </div>
-  );
-}
-
-async function forgetDevice(device: IDevice) {
-  const confirmed = confirm(`Forget ${device.name || device.deviceId}?`);
-  if (!confirmed) {
-    return;
-  }
-  const control = await getNetworkControlConsumer();
-  const result = await control.tools.deleteDevice({ deviceId: device.deviceId });
-  if (!result.success) {
-    alert(result.message);
-    return;
-  }
-  mainContentPath(IDENTITY_DEVICES_PATH);
-}
-
-/** Keep only devices whose signed-in owner is the requested user. */
-export function devicesForUser(devices: IDevice[], userId: string): IDevice[] {
-  return devices.filter((device) => device.userId === userId);
-}
-
-function relativeTime(value: Date): string {
-  const elapsedMs = Math.max(0, Date.now() - new Date(value).getTime());
-  const minutes = Math.floor(elapsedMs / 60_000);
-  if (minutes < 1) {
-    return "just now";
-  }
-  if (minutes < 60) {
-    return `${minutes}m ago`;
-  }
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) {
-    return `${hours}h ago`;
-  }
-  const days = Math.floor(hours / 24);
-  if (days < 30) {
-    return `${days}d ago`;
-  }
-  return new Date(value).toLocaleDateString();
-}

package/src/screens/devices/index.ts

@@ -1 +0,0 @@
-export { DevicesSection } from "./devices-list";

package/src/screens/groups/group-details.tsx

@@ -1,160 +0,0 @@
-import {
-  Groups,
-  getIconClassName,
-  getUserContext,
-  type IDoc,
-  type IGroup,
-  type Observable,
-  rpcServerCalls,
-  sleep,
-} from "@peers-app/peers-sdk";
-import { Checkbox } from "../../components/checkbox";
-import { Input } from "../../components/input";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-import { SaveButton } from "../../components/save-button";
-import { Tabs } from "../../components/tabs";
-import { usePromise } from "../../hooks";
-import { GroupMembersUI } from "./group-members";
-
-interface IProps {
-  groupId: string;
-}
-
-/** Edit group metadata and manage members and invitations inside Identity. */
-export const GroupDetails = (props: IProps) => {
-  const group = usePromise(
-    async () => {
-      const userContext = await getUserContext();
-      const userGroupTable = Groups(userContext.userDataContext);
-      const group = await userGroupTable.get(props.groupId);
-      if (!group) {
-        throw new Error("Group not found");
-      }
-      const groupDoc = userGroupTable.initDoc(group);
-      // saves go to both the group and user db
-      groupDoc.save = async () => {
-        const groupDataContext = userContext.getDataContext(group.groupId);
-        const groupGroupTable = Groups(groupDataContext);
-        const groupData = groupDoc.toJS();
-        await groupGroupTable.signAndSave(groupData);
-        await userGroupTable.signAndSave(groupData);
-        return groupDoc.load();
-      };
-      const originalDelete = groupDoc.delete;
-      groupDoc.delete = async () => {
-        const deleteResult = await originalDelete();
-        userContext.defaultDataContext(userContext.userDataContext);
-        await sleep(100);
-        await rpcServerCalls.flushDatabases();
-        window.location.reload();
-        return deleteResult;
-      };
-      return groupDoc;
-    },
-    undefined,
-    [props.groupId],
-  );
-
-  if (!group) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="container-xxl p-3">
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className={`${getIconClassName(Groups())} me-2`}></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={group.groupId}
-              className="border border-0"
-              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
-              value={group.qs.name}
-            />
-          </h4>
-        </div>
-        <SaveButton key={group.groupId} doc={group} />
-      </div>
-
-      <Tabs
-        key={group.groupId}
-        tabs={[
-          {
-            name: "Info",
-            content: (
-              <div>
-                <GroupInfo group={group} />
-              </div>
-            ),
-          },
-          {
-            name: "Members",
-            content: (
-              <div>
-                <GroupMembersWrapper groupId={props.groupId} />
-              </div>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-};
-
-const GroupInfo = (props: { group: IDoc<IGroup> }) => {
-  const { group } = props;
-
-  group.description = group.description || "";
-
-  return (
-    <div>
-      <small>Name:</small>
-      <Input
-        value={group.qs.name}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="Group name"
-        title="Group name"
-      />
-
-      <small>Icon Class Name:</small>
-      <Input
-        value={group.qs.iconClassName}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="bi-people-fill"
-        title="Icon class name (e.g., bi-people-fill, bi-house-fill, bi-star-fill)"
-      />
-
-      <small>Group ID:</small>
-      <div
-        className="form-control mb-3 p-2 bg-body-secondary text-body-secondary"
-        style={{ fontFamily: "monospace", fontSize: "0.9em" }}
-      >
-        {group.groupId}
-      </div>
-
-      <div className="d-flex flex-row">
-        <div className="ms-2">
-          <label className="form-label small mt-2 me-2">Disabled:</label>
-          <Checkbox className="form-check-input mt-2" checked={group.qs.disabled} />
-        </div>
-      </div>
-
-      <br />
-
-      <small className="mt-2">Description:</small>
-      <MarkdownEditorInline value={group.qs.description as Observable<string>} />
-    </div>
-  );
-};
-
-const GroupMembersWrapper = (props: { groupId: string }) => {
-  const userContext = usePromise(() => getUserContext());
-  if (!userContext) return null;
-
-  return <GroupMembersUI groupId={props.groupId} userContext={userContext} />;
-};