@peers-app/peers-ui 0.25.2 → 0.25.3

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

@@ -1,7 +1,5 @@
 import {
-  copyToClipboard,
   Groups,
-  generateGroupShare,
   getIconClassName,
   getUserContext,
   type IDoc,
@@ -10,22 +8,20 @@ import {
   rpcServerCalls,
   sleep,
 } from "@peers-app/peers-sdk";
-import { useState } from "react";
 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 { ScreenTabBody, Tabs } from "../../components/tabs";
+import { Tabs } from "../../components/tabs";
 import { usePromise } from "../../hooks";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 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 () => {
@@ -35,7 +31,6 @@ export const GroupDetails = (props: IProps) => {
       if (!group) {
         throw new Error("Group not found");
       }
-      updateActiveTabTitle(group.name || "Group");
       const groupDoc = userGroupTable.initDoc(group);
       // saves go to both the group and user db
       groupDoc.save = async () => {
@@ -66,7 +61,7 @@ export const GroupDetails = (props: IProps) => {
   }
 
   return (
-    <div className="container-fluid p-3">
+    <div className="container-xxl p-3">
       <div className="d-flex">
         <div>
           <h4>
@@ -83,10 +78,7 @@ export const GroupDetails = (props: IProps) => {
             />
           </h4>
         </div>
-        <div className="d-flex gap-2">
-          <ShareButton groupId={props.groupId} />
-          <SaveButton key={group.groupId} doc={group} />
-        </div>
+        <SaveButton key={group.groupId} doc={group} />
       </div>
 
       <Tabs
@@ -95,17 +87,17 @@ export const GroupDetails = (props: IProps) => {
           {
             name: "Info",
             content: (
-              <ScreenTabBody>
+              <div>
                 <GroupInfo group={group} />
-              </ScreenTabBody>
+              </div>
             ),
           },
           {
             name: "Members",
             content: (
-              <ScreenTabBody>
+              <div>
                 <GroupMembersWrapper groupId={props.groupId} />
-              </ScreenTabBody>
+              </div>
             ),
           },
         ]}
@@ -160,135 +152,9 @@ const GroupInfo = (props: { group: IDoc<IGroup> }) => {
   );
 };
 
-const ShareButton = ({ groupId }: { groupId: string }) => {
-  const [isSharing, setIsSharing] = useState(false);
-  const [shareResult, setShareResult] = useState<{
-    success: boolean;
-    message: string;
-  } | null>(null);
-
-  const handleShare = async () => {
-    setIsSharing(true);
-    setShareResult(null);
-
-    try {
-      // Generate the group share data
-      const groupShare = await generateGroupShare(groupId);
-
-      // Convert to JSON
-      const groupShareJson = JSON.stringify(groupShare, null, 2);
-
-      // Copy to clipboard
-      const copied = await copyToClipboard(groupShareJson);
-
-      if (copied) {
-        setShareResult({
-          success: true,
-          message: `Group share data copied to clipboard! (${groupShareJson.length} chars, ${groupShare.groupMembers.length} admin members)`,
-        });
-      } else {
-        setShareResult({
-          success: false,
-          message: "Failed to copy to clipboard. Please copy manually from the modal.",
-        });
-      }
-    } catch (error: unknown) {
-      setShareResult({
-        success: false,
-        message: `Error generating share: ${error instanceof Error ? error.message : String(error)}`,
-      });
-    } finally {
-      setIsSharing(false);
-    }
-  };
-
-  return (
-    <>
-      <button
-        className="btn btn-secondary btn-sm"
-        onClick={handleShare}
-        disabled={isSharing}
-        title="Share group with admin members"
-      >
-        {isSharing ? (
-          <>
-            <span
-              className="spinner-border spinner-border-sm me-1"
-              role="status"
-              aria-hidden="true"
-            ></span>
-            Sharing...
-          </>
-        ) : (
-          <>
-            <i className="bi-share me-1"></i>
-            Share
-          </>
-        )}
-      </button>
-
-      {shareResult && (
-        <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: "500px", width: "90%" }}>
-            <div className="card-header d-flex justify-content-between align-items-center">
-              <h6 className="mb-0">
-                <i
-                  className={`bi-${shareResult.success ? "check-circle text-success" : "exclamation-triangle text-warning"} me-2`}
-                ></i>
-                Group Share {shareResult.success ? "Ready" : "Error"}
-              </h6>
-              <button
-                className="btn-close"
-                onClick={() => setShareResult(null)}
-                aria-label="Close"
-              ></button>
-            </div>
-            <div className="card-body">
-              <p className="mb-3">{shareResult.message}</p>
-
-              <div className="text-end">
-                <button className="btn btn-secondary me-2" onClick={() => setShareResult(null)}>
-                  Close
-                </button>
-                {shareResult.success && (
-                  <button className="btn btn-primary" onClick={handleShare}>
-                    Copy Again
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
 const GroupMembersWrapper = (props: { groupId: string }) => {
   const userContext = usePromise(() => getUserContext());
   if (!userContext) return null;
 
   return <GroupMembersUI groupId={props.groupId} userContext={userContext} />;
 };
-
-registerInternalPeersUI({
-  peersUIId: "00group00details00component",
-  component: GroupDetails,
-  routes: [
-    {
-      isMatch: (props, context) => {
-        const match = context.path.match(/^groups\/([a-zA-Z0-9]{25})$/);
-        if (match) {
-          props.groupId = match[1];
-          return true;
-        }
-        return false;
-      },
-      uiCategory: "screen",
-      priority: 2,
-    },
-  ],
-});

package/src/screens/groups/group-invite-panel.tsx

@@ -7,9 +7,9 @@ import {
 } from "@peers-app/peers-sdk";
 import { useState } from "react";
 import { Typeahead, type TypeaheadItem } from "../../components/typeahead";
+import { PendingWorkLink } from "../invites/activity-view";
 import { InviteShare } from "../invites/invite-share";
 import { inviteTools } from "../invites/invites-ipc";
-import { PendingInvitesList } from "../invites/pending-invites-list";
 
 /** Props for {@link GroupInvitePanel}. */
 export interface GroupInvitePanelProps {
@@ -305,12 +305,7 @@ export function GroupInvitePanel(props: GroupInvitePanelProps) {
           {tab === "contacts" ? <InviteContactsCard {...props} /> : <ShareLinkCard {...props} />}
         </div>
       </div>
-      <PendingInvitesList
-        type="group"
-        groupId={props.groupId}
-        hideWhenEmpty
-        title="Pending invites and join requests"
-      />
+      <PendingWorkLink type="group" groupId={props.groupId} />
     </>
   );
 }

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

@@ -0,0 +1,44 @@
+import { GroupMemberRole } from "@peers-app/peers-sdk";
+import { render, screen } from "@testing-library/react";
+import { GroupSummaryRow, type IGroupSummary } from "./group-list";
+
+jest.mock("../../globals", () => ({
+  mainContentPath: jest.fn(),
+}));
+
+jest.mock("../../hooks", () => ({
+  usePromise: jest.fn(),
+}));
+
+jest.mock("../invites/activity-view", () => ({
+  PendingWorkLink: () => null,
+}));
+
+const summary: IGroupSummary = {
+  group: {
+    groupId: "zyxwvutsrqponmlkjihgfedcb",
+    name: "Neighborhood",
+    description: "**Local** projects and shared plans",
+    founderUserId: "abcdefghijklmnopqrstuvwxy",
+    publicKey: "signing-key",
+    publicBoxKey: "box-key",
+    signature: "signature",
+  },
+  memberCount: 7,
+  myRole: GroupMemberRole.Admin,
+};
+
+describe("GroupSummaryRow", () => {
+  it("shows description, member count, and local role in a clickable row", () => {
+    render(<GroupSummaryRow summary={summary} />);
+
+    expect(screen.getByText("Neighborhood")).toBeInTheDocument();
+    expect(screen.getByText("Local projects and shared plans")).toBeInTheDocument();
+    expect(screen.getByText("7 members")).toBeInTheDocument();
+    expect(screen.getByText("Admin")).toBeInTheDocument();
+    expect(screen.getByRole("link")).toHaveAttribute(
+      "href",
+      `#identity/groups/${summary.group.groupId}`,
+    );
+  });
+});