@peers-app/peers-ui 0.25.1 → 0.25.3

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

@@ -1,89 +1,117 @@
 import {
+  type GroupMemberRole,
+  GroupMembers,
   Groups,
   getMe,
+  getRoleLabel,
   getUserContext,
-  type ICursorIterable,
   type IGroup,
   newid,
   newKeys,
-  observable,
   rpcServerCalls,
   saveGroupSecretKey,
   setUserTrustLevel,
   TrustLevel,
+  type UserContext,
   Users,
 } from "@peers-app/peers-sdk";
-import type React from "react";
-import { useCallback, useEffect, useState } from "react";
-import { Input } from "../../components/input";
-import { LazyList } from "../../components/lazy-list";
+import { useEffect, useMemo, useState } from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
-import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
-import { isDesktop, mainContentPath } from "../../globals";
-import { useObservable, usePromise } from "../../hooks";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import { mainContentPath } from "../../globals";
+import { usePromise } from "../../hooks";
+import { IDENTITY_GROUP_NEW_PATH, IDENTITY_GROUPS_PATH } from "../identity/identity-routes";
+import { PendingWorkLink } from "../invites/activity-view";
 
-export function GroupList() {
+/** Search, summarize, and create groups owned by the signed-in user. */
+export function GroupList(props: { creating?: boolean } = {}) {
   const userContext = usePromise(getUserContext);
-  const [searchTextObs] = useState(() => observable(""));
-  const [searchText] = useObservable(searchTextObs);
-  const [cursorObs] = useState(() => observable<ICursorIterable<IGroup> | undefined>());
+  const [creating, setCreating] = useState(props.creating ?? false);
+  const [draftName, setDraftName] = useState("");
+  const [searchText, setSearchText] = useState("");
+  const [summaries, setSummaries] = useState<IGroupSummary[] | undefined>();
+  const [error, setError] = useState("");
+  const [creatingBusy, setCreatingBusy] = useState(false);
+  const [groupRevision, setGroupRevision] = useState(0);
 
-  // All hooks must be called before any conditional returns
-  const groupsTable = userContext ? Groups(userContext.userDataContext) : null;
-
-  const newCursor = useCallback(async () => {
-    if (!groupsTable) return;
-
-    const filter = {
-      $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
-      disabled: { $ne: true },
+  useEffect(() => {
+    if (!userContext) {
+      return;
+    }
+    let disposed = false;
+    const subscriptions: Array<{ unsubscribe: () => void }> = [];
+    const refresh = async () => {
+      try {
+        const next = await loadGroupSummaries(userContext);
+        if (!disposed) {
+          setSummaries(next);
+          setError("");
+        }
+      } catch (err) {
+        if (!disposed) {
+          setError((err as Error).message || "Could not load groups.");
+        }
+      }
     };
-    const cursor = await groupsTable.cursor(searchText ? filter : { disabled: { $ne: true } }, {
-      sortBy: ["name"],
-      ...(searchText ? {} : { textSearch: searchText }),
+    const table = Groups(userContext.userDataContext);
+    subscriptions.push(table.dataChanged.subscribe(() => setGroupRevision((value) => value + 1)));
+    void table.list({ disabled: { $ne: true } }).then((groups) => {
+      if (disposed) {
+        return;
+      }
+      for (const group of groups) {
+        subscriptions.push(
+          GroupMembers(userContext.getDataContext(group.groupId)).dataChanged.subscribe(
+            () => void refresh(),
+          ),
+        );
+      }
+      void refresh();
     });
-    cursorObs(cursor);
-    return cursor;
-  }, [groupsTable, searchText, cursorObs]);
+    return () => {
+      disposed = true;
+      for (const subscription of subscriptions) {
+        subscription.unsubscribe();
+      }
+    };
+  }, [groupRevision, userContext]);
 
   useEffect(() => {
-    if (groupsTable) {
-      void newCursor();
+    setCreating(props.creating ?? false);
+  }, [props.creating]);
+
+  const filtered = useMemo(() => {
+    const query = searchText.trim().toLocaleLowerCase();
+    if (!query) {
+      return summaries ?? [];
     }
-  }, [groupsTable, newCursor]);
+    return (summaries ?? []).filter(
+      ({ group }) =>
+        group.name.toLocaleLowerCase().includes(query) ||
+        group.description.toLocaleLowerCase().includes(query),
+    );
+  }, [searchText, summaries]);
 
-  // Early return after all hooks
-  if (!userContext) {
-    return <LoadingIndicator />;
+  function startCreate() {
+    setDraftName(searchText.trim());
+    mainContentPath(IDENTITY_GROUP_NEW_PATH);
   }
 
-  async function loadMore(existing: IGroup[]): Promise<IGroup[]> {
-    if (!groupsTable) return [];
-
-    const moreMatches: IGroup[] = [];
-    const cursor = cursorObs() || (await newCursor());
-    if (!cursor) return [];
-
-    for await (const nextRecord of cursor) {
-      if (existing.some((e) => e.groupId === nextRecord.groupId)) continue;
-      if (moreMatches.some((e) => e.groupId === nextRecord.groupId)) continue;
-      moreMatches.push(nextRecord);
-      if (searchText.length && moreMatches.length > 5) break;
-      if (moreMatches.length >= 10) break;
+  async function confirmCreate() {
+    const name = draftName.trim();
+    if (!name) {
+      return;
     }
-    if (moreMatches.length === 0) {
-      cursorObs(undefined);
+    setCreatingBusy(true);
+    setError("");
+    try {
+      setDraftName("");
+      setSearchText("");
+      await newRecord(name);
+    } catch (err) {
+      setError((err as Error).message || "Could not create the group.");
+    } finally {
+      setCreatingBusy(false);
     }
-    return moreMatches;
-  }
-
-  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
-    if (evt.key !== "Enter") return;
-    const name = searchText.trim();
-    if (!name) return;
-    searchTextObs("");
-    await newRecord(name);
   }
 
   async function newRecord(name: string) {
@@ -127,250 +155,161 @@ export function GroupList() {
       console.error("Error auto-installing peers-core for group:", err);
     });
 
-    mainContentPath(`groups/${group.groupId}`);
+    mainContentPath(`${IDENTITY_GROUPS_PATH}/${group.groupId}`);
     return group;
   }
 
-  function renderItem(group: IGroup) {
-    const groupIcon = group.iconClassName || "bi-people-fill";
-    return (
-      <div key={group.groupId} className="container-fluid pb-4">
-        <i className={groupIcon}></i>&nbsp;
-        <a href={`#groups/${group.groupId}`}>{group.name || "<unnamed-group>"}</a>
-        <div style={{ paddingLeft: "20px" }}>
-          <MarkdownWithMentions content={group.description || ""} />
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className="container-fluid">
-      <div className="input-group mt-3 mb-3">
-        <Input
-          value={searchTextObs}
-          className="form-control"
-          placeholder="Search or create group"
-          autoFocus={!!isDesktop()}
-          onKeyUp={(evt) => searchSubmit(evt)}
-        />
-        <ImportGroupButton />
+    <div className="container-xxl p-3">
+      <div className="mb-3">
+        <h4 className="mb-1">
+          <i className="bi-people-fill me-2" />
+          Groups
+        </h4>
+        <div className="small text-muted">Shared spaces, membership, and access</div>
       </div>
-
-      <div className="peers-list-container">
-        <LazyList
-          resetTrigger={searchText}
-          loadMore={loadMore}
-          scrollThreshold={0.6}
-          renderItems={(groups) => {
-            return groups.map(renderItem);
-          }}
-          loadingIndicator={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              <LoadingIndicator />
-            </div>
-          }
-          endOfList={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              {/* <span className="h3">End of List</span> */}
-            </div>
-          }
+      {creating ? (
+        <div className="card mb-3">
+          <div className="card-body">
+            <h6 className="card-title">Create a group</h6>
+            <form
+              className="input-group"
+              onSubmit={(event) => {
+                event.preventDefault();
+                void confirmCreate();
+              }}
+            >
+              <input
+                id="new-group-name"
+                className="form-control"
+                value={draftName}
+                onChange={(event) => setDraftName(event.target.value)}
+                placeholder="Group name"
+                aria-label="Group name"
+              />
+              <button
+                type="submit"
+                className="btn btn-primary"
+                disabled={!draftName.trim() || creatingBusy}
+              >
+                {creatingBusy ? "Creating…" : "Create"}
+              </button>
+              <a href={`#${IDENTITY_GROUPS_PATH}`} className="btn btn-outline-secondary">
+                Cancel
+              </a>
+            </form>
+          </div>
+        </div>
+      ) : null}
+      <PendingWorkLink type="group" />
+      <div className="position-relative my-3">
+        <i
+          className="bi bi-search position-absolute text-muted"
+          style={{ left: 12, top: "50%", transform: "translateY(-50%)" }}
+        />
+        <input
+          type="search"
+          className="form-control ps-5"
+          value={searchText}
+          onChange={(event) => setSearchText(event.target.value)}
+          placeholder="Search groups"
+          aria-label="Search groups"
         />
       </div>
+
+      {error ? <div className="alert alert-danger">{error}</div> : null}
+      {!summaries && !error ? <LoadingIndicator /> : null}
+      {summaries && filtered.length === 0 ? (
+        <div className="border rounded p-4 text-center">
+          <i className="bi bi-people fs-2 text-muted" />
+          <h6 className="mt-2">{searchText ? "No matching groups" : "No groups yet"}</h6>
+          <p className="small text-muted">
+            {searchText
+              ? "Try a different name or description."
+              : "Create a shared space or use an invite to join one."}
+          </p>
+          {!searchText ? (
+            <button type="button" className="btn btn-primary btn-sm" onClick={startCreate}>
+              Create your first group
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+      {filtered.length > 0 ? (
+        <div className="list-group">
+          {filtered.map((summary) => (
+            <GroupSummaryRow key={summary.group.groupId} summary={summary} />
+          ))}
+        </div>
+      ) : null}
     </div>
   );
 }
 
-const ImportGroupButton = () => {
-  const [isImporting, setIsImporting] = useState(false);
-  const [showImportDialog, setShowImportDialog] = useState(false);
-  const [importText, setImportText] = useState("");
-  const [importResult, setImportResult] = useState<{
-    success: boolean;
-    message: string;
-    groupId?: string;
-  } | null>(null);
-
-  const handleImport = async () => {
-    if (!importText.trim()) {
-      setImportResult({
-        success: false,
-        message: "Please paste the group share JSON data",
-      });
-      return;
-    }
-
-    setIsImporting(true);
-    setImportResult(null);
-
-    try {
-      const groupId = await rpcServerCalls.importGroupShare(importText.trim());
-      setImportResult({
-        success: true,
-        message: `Group imported successfully!`,
-        groupId,
-      });
-      setImportText("");
+/** Data shown for one group in the Identity list. */
+export interface IGroupSummary {
+  /** Signed group record. */
+  group: IGroup;
+  /** Number of active memberships. */
+  memberCount: number;
+  /** Signed-in user's role in this group. */
+  myRole?: GroupMemberRole;
+}
 
-      // Navigate to the imported group after a brief delay
-      setTimeout(() => {
-        mainContentPath(`groups/${groupId}`);
-        setShowImportDialog(false);
-        setImportResult(null);
-      }, 2000);
-    } catch (error: unknown) {
-      setImportResult({
-        success: false,
-        message: `Import failed: ${error instanceof Error ? error.message : String(error)}`,
+async function loadGroupSummaries(userContext: UserContext): Promise<IGroupSummary[]> {
+  const groups = await Groups(userContext.userDataContext).list({ disabled: { $ne: true } });
+  const summaries = await Promise.all(
+    groups.map(async (group) => {
+      const members = await GroupMembers(userContext.getDataContext(group.groupId)).list({
+        deleted: { $ne: true },
       });
-    } finally {
-      setIsImporting(false);
-    }
-  };
-
-  const handlePasteFromClipboard = async () => {
-    try {
-      if (navigator.clipboard?.readText) {
-        const clipboardText = await navigator.clipboard.readText();
-        setImportText(clipboardText);
-      }
-    } catch (_error) {
-      console.log("Failed to read from clipboard - user can paste manually");
-    }
-  };
+      return {
+        group,
+        memberCount: members.length,
+        myRole: members.find((member) => member.userId === userContext.userId)?.role,
+      };
+    }),
+  );
+  return summaries.sort((left, right) => left.group.name.localeCompare(right.group.name));
+}
 
+/** Compact, fully clickable group summary row. */
+export function GroupSummaryRow({ summary }: { summary: IGroupSummary }) {
+  const { group } = summary;
   return (
-    <>
-      <button
-        className="btn btn-outline-secondary dropdown-toggle"
-        type="button"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
+    <a
+      href={`#${IDENTITY_GROUPS_PATH}/${group.groupId}`}
+      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-plus-lg"></i>
-      </button>
-      <ul className="dropdown-menu dropdown-menu-end">
-        <li>
-          <button className="dropdown-item" onClick={() => setShowImportDialog(true)}>
-            <i className="bi-download me-2"></i>
-            Import Shared Group
-          </button>
-        </li>
-      </ul>
-
-      {showImportDialog && (
-        <div
-          className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
-          style={{ backgroundColor: "rgba(0,0,0,0.5)", zIndex: 1050 }}
-        >
-          <div className="card" style={{ maxWidth: "600px", width: "90%" }}>
-            <div className="card-header d-flex justify-content-between align-items-center">
-              <h6 className="mb-0">
-                <i className="bi-download me-2"></i>
-                Import Shared Group
-              </h6>
-              <button
-                className="btn-close"
-                onClick={() => {
-                  setShowImportDialog(false);
-                  setImportText("");
-                  setImportResult(null);
-                }}
-                aria-label="Close"
-              ></button>
-            </div>
-            <div className="card-body">
-              <p className="mb-3">
-                Paste the group share JSON data below to import a shared group with its admin
-                members.
-              </p>
-
-              <div className="mb-3">
-                <label className="form-label">Group Share JSON:</label>
-                <div className="d-flex gap-2 mb-2">
-                  <button
-                    className="btn btn-secondary btn-sm"
-                    onClick={handlePasteFromClipboard}
-                    title="Paste from clipboard"
-                  >
-                    <i className="bi-clipboard me-1"></i>
-                    Paste from Clipboard
-                  </button>
-                </div>
-                <textarea
-                  className="form-control font-monospace"
-                  rows={8}
-                  value={importText}
-                  onChange={(e) => setImportText(e.target.value)}
-                  placeholder="Paste the group share JSON here..."
-                  style={{ fontSize: "0.9em" }}
-                />
-              </div>
-
-              {importResult && (
-                <div className={`alert alert-${importResult.success ? "success" : "danger"} mb-3`}>
-                  <i
-                    className={`bi-${importResult.success ? "check-circle" : "exclamation-triangle"} me-2`}
-                  ></i>
-                  {importResult.message}
-                  {importResult.success && importResult.groupId && (
-                    <div className="mt-2">
-                      <small>Redirecting to group in 2 seconds...</small>
-                    </div>
-                  )}
-                </div>
-              )}
-
-              <div className="text-end">
-                <button
-                  className="btn btn-secondary me-2"
-                  onClick={() => {
-                    setShowImportDialog(false);
-                    setImportText("");
-                    setImportResult(null);
-                  }}
-                  disabled={isImporting}
-                >
-                  Cancel
-                </button>
-                <button
-                  className="btn btn-primary"
-                  onClick={handleImport}
-                  disabled={isImporting || !importText.trim()}
-                >
-                  {isImporting ? (
-                    <>
-                      <span
-                        className="spinner-border spinner-border-sm me-1"
-                        role="status"
-                        aria-hidden="true"
-                      ></span>
-                      Importing...
-                    </>
-                  ) : (
-                    <>
-                      <i className="bi-download me-1"></i>
-                      Import Group
-                    </>
-                  )}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
+        <i className={group.iconClassName || "bi bi-people-fill"} />
+      </span>
+      <span className="flex-grow-1 overflow-hidden">
+        <span className="fw-semibold d-block text-truncate">{group.name || "Unnamed group"}</span>
+        <span className="small text-muted d-block text-truncate">
+          {plainDescription(group.description) || "No description yet"}
+        </span>
+      </span>
+      <span className="d-flex align-items-center gap-2 flex-wrap justify-content-end">
+        <span className="badge text-bg-light border">
+          {summary.memberCount} member{summary.memberCount === 1 ? "" : "s"}
+        </span>
+        {summary.myRole !== undefined ? (
+          <span className="badge text-bg-secondary">{getRoleLabel(summary.myRole)}</span>
+        ) : null}
+      </span>
+      <i className="bi bi-chevron-right text-muted" aria-hidden="true" />
+    </a>
   );
-};
+}
 
-registerInternalPeersUI({
-  peersUIId: "00mf8qrs004w5u2wqk64d2yp6",
-  component: GroupList,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "groups",
-      uiCategory: "screen",
-      priority: 2,
-    },
-  ],
-});
+function plainDescription(markdown: string): string {
+  return markdown
+    .replace(/[#_*`>[\]()!-]/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}

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

@@ -24,6 +24,7 @@ interface GroupMembersUIProps {
   userContext: UserContext;
 }
 
+/** List group memberships and expose role-appropriate invite and member controls. */
 export const GroupMembersUI = (props: GroupMembersUIProps) => {
   const { groupId, userContext } = props;
 
@@ -202,7 +203,7 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
           {/* Founder info - only show if current user is NOT the founder */}
           {founderData && founderData.founderUserId !== currentUserId && (
             <a
-              href={`#contacts/${founderData.founderUserId}`}
+              href={`#identity/people/${founderData.founderUserId}`}
               className="alert alert-warning py-2 px-3 mb-0 d-flex align-items-center text-decoration-none"
               style={{ cursor: "pointer" }}
             >
@@ -273,7 +274,7 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
 
                   {/* View button - Always visible */}
                   <a
-                    href={`#contacts/${member.userId}`}
+                    href={`#identity/people/${member.userId}`}
                     className="btn btn-outline-primary btn-sm me-2"
                   >
                     <i className="bi-eye me-1" />

package/src/screens/groups/index.ts

@@ -1,8 +1,3 @@
-// Import all group screen components to ensure they register their routes
-import "./group-list";
-import "./group-details";
-import "./group-members";
-
 export * from "./group-details";
 export * from "./group-list";
 export * from "./group-members";