@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,455 @@
+import { GroupMembers, getUserContext, IUserWithSource, usersCursor, getUserById, Users, TrustLevel, GroupMemberRole, getUserRole, getRoleLabel, Groups, UserContext } from "@peers-app/peers-sdk";
+import React from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { Typeahead, TypeaheadItem } from "../../components/typeahead";
+import { usePromise } from "../../hooks";
+
+interface GroupMembersUIProps {
+  groupId: string;
+  userContext: UserContext;
+}
+
+export const GroupMembersUI = (props: GroupMembersUIProps) => {
+  const { groupId, userContext } = props;
+  
+  // Get the group's data context and tables
+  const groupDataContext = userContext.getDataContext(groupId);
+  const groupMembersTable = GroupMembers(groupDataContext);
+  const groupUsersTable = Users(groupDataContext);
+    
+  // State for refreshing the component
+  const [refreshKey, setRefreshKey] = React.useState(0);
+  
+  // Load group members with user details and check current user permissions
+  const membersData = usePromise(async () => {
+    const members = await groupMembersTable.list({ deleted: { $ne: true } });
+
+    // Get user details for each member using the group context
+    const membersWithUsers = await Promise.all(
+      members.map(async (member) => {
+        const user = await getUserById(member.userId, {
+          currentDataContext: groupDataContext
+        });
+        
+        // If user found from external source, save to current group
+        if (user && user.source !== 'currentDataContext') {
+          try {
+            const newGroupUser = await groupUsersTable.initRecord({
+              userId: user.userId,
+              name: user.name,
+              publicKey: user.publicKey || '',
+              publicBoxKey: user.publicBoxKey || '',
+              trustLevel: TrustLevel.NewUser
+            });
+            
+            await groupUsersTable.save(newGroupUser);
+            
+            // Update user reference to reflect it's now in current group
+            user.trustLevel = TrustLevel.NewUser;
+            user.source = 'currentDataContext';
+          } catch (saveErr) {
+            console.error('Failed to save user to group context:', saveErr);
+          }
+        }
+        
+        return { 
+          member, 
+          user: user || null
+        };
+      })
+    );
+    
+    return membersWithUsers;
+  }, [], [groupId, refreshKey]);
+
+  // Check if current user has admin privileges in this group
+  const userPermissions = usePromise(async () => {
+    const currentUserContext = await getUserContext();
+    const currentUserId = currentUserContext.userId();
+    const userRole = await getUserRole(groupId, currentUserId);
+
+    return {
+      isMember: !!userRole,
+      canEdit: userRole >= GroupMemberRole.Admin,
+      userRole: userRole,
+      currentUserId: currentUserId
+    };
+  }, undefined, [groupId]);
+
+  // Load group and founder information
+  const founderData = usePromise(async () => {
+    const groupsTable = Groups(groupDataContext);
+    const group = await groupsTable.get(groupId) || await Groups(userContext.userDataContext).get(groupId);
+    
+    if (!group) {
+      return null;
+    }
+
+    // Try to get founder user details
+    const founderUser = await getUserById(group.founderUserId, {
+      currentDataContext: groupDataContext
+    });
+
+    return {
+      group,
+      founderUser,
+      founderUserId: group.founderUserId
+    };
+  }, undefined, [groupId, refreshKey]);
+
+  const [newMemberRole, setNewMemberRole] = React.useState<GroupMemberRole>(GroupMemberRole.Reader);
+  const [addingMember, setAddingMember] = React.useState(false);
+  const [selectedContacts, setSelectedContacts] = React.useState<IUserWithSource[]>([]);
+
+  // Search function for typeahead
+  const searchContacts = async (query: string): Promise<(IUserWithSource & TypeaheadItem)[]> => {
+    try {
+      const cursor = await usersCursor({ name: { $matchWords: query } });
+      const results: IUserWithSource[] = [];
+      
+      // Get first 10 results
+      for await (const contact of cursor) {
+        results.push(contact);
+        if (results.length >= 10) break;
+      }
+      
+      // Filter out users who are already members
+      const currentMembers = membersData?.map(m => m.member.userId) || [];
+      const filteredResults = results.filter(contact => 
+        !currentMembers.includes(contact.userId)
+      );
+      
+      return filteredResults.map(contact => ({
+        ...contact,
+        id: contact.userId
+      }));
+    } catch (error) {
+      console.error('Error searching contacts:', error);
+      return [];
+    }
+  };
+
+  // Render function for typeahead results
+  const renderContactItem = (contact: IUserWithSource & TypeaheadItem, isSelected: boolean) => (
+    <div className="d-flex align-items-center">
+      <i className="bi-person-circle me-2" style={{ fontSize: '20px' }} />
+      <div className="flex-grow-1">
+        <div className="fw-semibold">{contact.name}</div>
+        <small className="text-muted">{contact.userId}</small>
+      </div>
+      <div>
+        <small className="text-info">
+          <i className={`bi-${getSourceIcon(contact.source)} me-1`} />
+          {getSourceLabel(contact.source)}
+        </small>
+      </div>
+    </div>
+  );
+
+  // Helper functions for contact sources
+  const getSourceLabel = (source: string) => {
+    switch (source) {
+      case 'userDataContext': return 'Personal';
+      case 'currentDataContext': return 'Current';
+      case 'otherDataContexts': return 'Groups';
+      default: return source;
+    }
+  };
+
+  const getSourceIcon = (source: string) => {
+    switch (source) {
+      case 'userDataContext': return 'person-fill';
+      case 'currentDataContext': return 'house-fill';
+      case 'otherDataContexts': return 'people-fill';
+      default: return 'question-circle';
+    }
+  };
+
+  const addMember = async () => {
+    if (selectedContacts.length === 0) return;
+    
+    setAddingMember(true);
+    try {
+      // Add all selected contacts with the chosen role
+      for (const contact of selectedContacts) {
+        let member = await groupMembersTable.findOne({ userId: contact.userId, groupId });
+        if (member) {
+          member.role = newMemberRole;
+          member.deleted = false;
+        } else {
+          member = await groupMembersTable.initRecord({
+            groupId: groupId,
+            userId: contact.userId,
+            role: newMemberRole
+          });
+        }
+        await groupMembersTable.save(member);
+      }
+      
+      // Reset form
+      setSelectedContacts([]);
+      setNewMemberRole(GroupMemberRole.Reader);
+
+      // Refresh the members list
+      setRefreshKey(prev => prev + 1);
+    } catch (err) {
+      console.error('Failed to add member:', err);
+      alert('Failed to add member. They may already be in the group.');
+    } finally {
+      setAddingMember(false);
+    }
+  };
+
+  // Render function for contact badges
+  const renderContactBadge = (contact: IUserWithSource) => (
+    <span>{contact.name}</span>
+  );
+
+  const updateRole = async (memberId: string, newRole: GroupMemberRole) => {
+    try {
+      const member = await groupMembersTable.get(memberId);
+      if (member) {
+        member.role = newRole;
+        await groupMembersTable.save(member);
+        setRefreshKey(prev => prev + 1);
+      }
+    } catch (err) {
+      console.error('Failed to update role:', err);
+      alert('Failed to update member role.');
+    }
+  };
+
+  const removeMember = async (memberId: string) => {
+    if (!confirm('Remove this member from the group?')) return;
+    
+    try {
+      await groupMembersTable.delete(memberId);
+      setRefreshKey(prev => prev + 1);
+    } catch (err) {
+      console.error('Failed to remove member:', err);
+      alert('Failed to remove member.');
+    }
+  };
+
+  if (!membersData || !userPermissions || !founderData) {
+    return <LoadingIndicator />;
+  }
+
+  const { canEdit, userRole, currentUserId } = userPermissions;
+
+  return (
+    <div>
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h6 className="mb-0">Group Members</h6>
+        <div className="d-flex align-items-center gap-2">
+          <div className={`alert alert-${userRole ? 'primary' : 'warning'} py-2 px-3 mb-0 d-flex align-items-center`}>
+            <i className={`bi ${userRole ? 'bi-person-badge' : 'bi-exclamation-triangle'} me-2`}></i>
+            <strong>Your role: {getRoleLabel(userRole)}</strong>
+          </div>
+          {/* Founder info - only show if current user is NOT the founder */}
+          {founderData && founderData.founderUserId !== currentUserId && (
+            <a 
+              href={`#contacts/${founderData.founderUserId}`}
+              className="alert alert-warning py-2 px-3 mb-0 d-flex align-items-center text-decoration-none"
+              style={{ cursor: 'pointer' }}
+            >
+              <i className="bi bi-crown-fill me-2"></i>
+              <strong>Founder: {founderData.founderUser?.name || founderData.founderUserId}</strong>
+            </a>
+          )}
+        </div>
+      </div>
+      
+      {/* Add New Member - Only for admins/owners */}
+      {canEdit && (
+        <div className="card mb-3">
+          <div className="card-body">
+            <h6 className="card-title">Add Member</h6>
+            <div className="row g-2">
+              <div className="col-md-6">
+                <Typeahead
+                  placeholder="Search contacts to add..."
+                  searchFn={searchContacts}
+                  onSelectionChange={(items) => setSelectedContacts(items as IUserWithSource[])}
+                  renderItem={renderContactItem}
+                  renderBadge={renderContactBadge}
+                  selectedItems={selectedContacts.map(contact => ({...contact, id: contact.userId}))}
+                  multiSelect={true}
+                  disabled={addingMember}
+                />
+              </div>
+              <div className="col-md-3">
+                <select 
+                  className="form-select" 
+                  value={newMemberRole}
+                  onChange={(e) => setNewMemberRole(Number(e.target.value) || 0 as GroupMemberRole)}
+                  disabled={addingMember}
+                >
+                  <option value={GroupMemberRole.None}>None</option>
+                  <option value={GroupMemberRole.Reader}>Reader</option>
+                  <option value={GroupMemberRole.Writer}>Writer</option>
+                  <option value={GroupMemberRole.Admin}>Admin</option>
+                  <option value={GroupMemberRole.Owner}>Owner</option>
+                </select>
+              </div>
+              <div className="col-md-3">
+                <button 
+                  className="btn btn-primary w-100" 
+                  onClick={addMember}
+                  disabled={addingMember || selectedContacts.length === 0}
+                >
+                  {addingMember ? 'Adding...' : 
+                   selectedContacts.length === 1 ? 'Add Member' :
+                   selectedContacts.length > 1 ? `Add ${selectedContacts.length} Members` : 'Add'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {!canEdit && userRole && (
+        <div className="alert alert-info">
+          <i className="bi bi-info-circle me-2"></i>
+          You can view group members, but only admins and owners can manage membership.
+        </div>
+      )}
+
+
+      {/* Members List */}
+      {membersData.length === 0 ? (
+        <div className="alert alert-info">
+          No members in this group yet. Add the first member above.
+        </div>
+      ) : (
+        <div className="list-group">
+          {membersData.map(({ member, user }) => (
+            <div key={member.groupMemberId} className="list-group-item">
+              <div className="d-flex justify-content-between align-items-center">
+                <div className="flex-grow-1">
+                  <div className="d-flex align-items-center">
+                    <i className="bi bi-person-fill me-2"></i>
+                    <div>
+                      <div className="d-flex align-items-center">
+                        <strong>
+                          {user?.name || member.userId}
+                          {member.userId === currentUserId && ' (You)'}
+                        </strong>
+                        {user?.source === 'userDataContext' && (
+                          <span className="badge bg-info ms-2" style={{ fontSize: '0.7rem' }}>
+                            <i className="bi bi-person me-1"></i>
+                            Personal
+                          </span>
+                        )}
+                        {user?.source === 'otherDataContexts' && (
+                          <span className="badge bg-secondary ms-2" style={{ fontSize: '0.7rem' }}>
+                            <i className="bi bi-people me-1"></i>
+                            Other Groups
+                          </span>
+                        )}
+                      </div>
+                      {user && user.userId !== user.name && (
+                        <small className="text-muted d-block">{member.userId}</small>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="d-flex align-items-center">
+                  {<TrustLevelBadge level={user?.trustLevel || TrustLevel.Unknown} />}
+                  
+                  {/* View button - Always visible */}
+                  <a href={`#contacts/${member.userId}`} className="btn btn-outline-primary btn-sm me-2">
+                    <i className="bi-eye me-1" />
+                    View
+                  </a>
+                  
+                  {canEdit ? (
+                    <>
+                      {/* Role Selector - Only for admins/owners */}
+                      <select 
+                        className="form-select form-select-sm me-2" 
+                        style={{ width: '120px' }}
+                        value={member.role}
+                        onChange={(e) => updateRole(member.groupMemberId, Number(e.target.value) || 0 as GroupMemberRole)}
+                      >
+                        <option value={GroupMemberRole.None}>None</option>
+                        <option value={GroupMemberRole.Reader}>Reader</option>
+                        <option value={GroupMemberRole.Writer}>Writer</option>
+                        <option value={GroupMemberRole.Admin}>Admin</option>
+                        <option value={GroupMemberRole.Owner}>Owner</option>
+                      </select>
+                      
+                      {/* Remove Button - Only for admins/owners */}
+                      <button 
+                        className="btn btn-outline-danger btn-sm"
+                        onClick={() => removeMember(member.groupMemberId)}
+                        title="Remove member"
+                      >
+                        <i className="bi bi-trash"></i>
+                      </button>
+                    </>
+                  ) : (
+                    /* Read-only role display for non-admins */
+                    <span className="badge bg-secondary text-capitalize">
+                      {getRoleLabel(member.role)}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Role Descriptions */}
+      <div className="mt-4">
+        <small className="text-muted">
+          <strong>Roles:</strong><br/>
+          <strong>Reader:</strong> Can view group content<br/>
+          <strong>Writer:</strong> Can create and edit content<br/>
+          <strong>Admin:</strong> Can manage members and settings<br/>
+          <strong>Owner:</strong> Full control including group deletion
+        </small>
+      </div>
+    </div>
+  );
+};
+
+interface TrustLevelBadgeProps {
+  level: TrustLevel;
+}
+
+const TrustLevelBadge = ({ level }: TrustLevelBadgeProps) => {
+  // Define trust level configurations with their numeric values
+  const trustLevelConfigs = [
+    { value: TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
+    { value: TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
+    { value: TrustLevel.Known, color: 'info', icon: 'bi-shield-check', text: 'Known' },
+    { value: TrustLevel.NewDevice, color: 'primary', icon: 'bi-shield-plus', text: 'New Device' },
+    { value: TrustLevel.NewUser, color: 'primary', icon: 'bi-shield-plus', text: 'New User' },
+    { value: TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
+    { value: TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-x', text: 'Untrusted' },
+    { value: TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
+  ];
+
+  // Sort by trust level value (ascending, so lowest first)
+  const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
+  
+  // Find the highest trust level that is at or below the current level
+  let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
+  for (const trustConfig of sortedConfigs) {
+    if (level >= trustConfig.value) {
+      config = trustConfig;
+    } else {
+      break;
+    }
+  }
+
+  return (
+    <span className={`badge bg-${config.color} d-flex align-items-center gap-1 me-2`} style={{ fontSize: '0.7rem' }}>
+      <i className={config.icon} />
+      {config.text}
+    </span>
+  );
+};

package/src/screens/groups/index.ts

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

package/src/screens/knowledge/knowledge-frame-details.bk.tsx

@@ -0,0 +1,160 @@
+import { observable } from "@peers-app/peers-sdk";
+import React from "react";
+import { IKnowledgeFrame, KnowledgeFrames, KnowledgeValues, IDoc } from "@peers-app/peers-sdk";
+import { SaveButton } from "../../components/save-button";
+import { TextListEditor } from "../../components/text-list-editor.tsx/text-list-editor";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { useObservable, useObservableState, usePromise, useSubscription } from "../../hooks";
+import { Input } from "../../components/input";
+
+interface IProps {
+  knowledgeFrameId: string;
+}
+
+export const KnowledgeFrameDetails = (props: IProps) => {
+
+  const frame = usePromise(async () => {
+    const frame = await KnowledgeFrames().get(props.knowledgeFrameId);
+    if (!frame) {
+      throw new Error('Knowledge Frame not found');
+    }
+    return KnowledgeFrames().initDoc(frame);
+  }, undefined, [props.knowledgeFrameId]);
+
+  const bodyObs = frame?.qs.body || observable('');
+  // useEffect
+  let p = setTimeout(() => {}, 0);
+  useSubscription(bodyObs, () => {
+    clearTimeout(p);
+    p = setTimeout(() => {
+      // todo update frames knowledgeIds that are linked in the body
+      frame?.save();
+    }, 2000);
+  });
+
+  if (!frame) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div className="container-fluid p-3">
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className="me-2 bi bi-window-dock"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={frame.knowledgeFrameId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={frame.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={frame.knowledgeFrameId}
+            doc={frame}
+          />
+        </div>
+      </div>
+
+      <br />
+
+      {/* <MarkdownEditorInline
+        value={frame.qs.body}
+        maxHeight={'calc(100vh - 130px)'}
+      /> */}
+
+      {/* <KnowledgeEntriesList frame={frame} /> */}
+
+      <TextListEditor value={bodyObs} maxHeight={'calc(100vh - 130px)'} />
+
+      {/* <KnowledgeEntryEditor /> */}
+
+    </div>
+  )
+}
+
+interface IKnowledgeEntriesListProps {
+  frame: IDoc<IKnowledgeFrame>;
+}
+
+const KnowledgeEntriesList = (props: IKnowledgeEntriesListProps) => {
+  const { frame } = props;
+
+  useObservable(frame.qs.knowledgeValueIds);
+
+  const knowledgeEntries = usePromise(async () => {
+    return KnowledgeValues().list({ knowledgeValueId: frame.knowledgeValueIds } );
+  }, [], [frame.knowledgeValueIds]);
+
+  return (
+    <div>
+      <NewKnowledgeEntry frame={frame} />
+
+      <div>
+        {knowledgeEntries?.map(entry => {
+          return (
+            <div key={entry.knowledgeValueId}>
+              {JSON.stringify(entry, null, 2)}
+            </div>
+          );
+        })}
+      </div>
+
+    </div>
+  );
+};
+
+interface INewKnowledgeEntryProps {
+  defaultSubjectId?: string;
+  defaultPredicateId?: string;
+  frame: IDoc<IKnowledgeFrame>;
+}
+
+const NewKnowledgeEntry = (props: INewKnowledgeEntryProps) => {
+  const { defaultSubjectId, defaultPredicateId, frame } = props;
+
+  const valueStr = useObservableState('', true);
+
+  const addKnowledgeEntry = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const value = valueStr().trim();
+    throw new Error('Not implemented');
+    // const entry = await KnowledgeValues().insert({
+    //   knowledgeValueId: newid(),
+    //   peerTypeId: 'string',
+    //   value,
+    //   // predicateId: defaultPredicateId,
+    //   // subjectId: defaultSubjectId,
+    //   // modified: Date.now(),
+
+    // });
+
+    // frame.knowledgeValueIds = [...frame.knowledgeValueIds, entry.knowledgeValueId];
+    // await frame.save();
+    // valueStr('');
+  };
+
+  return (
+    <div>
+      <form
+        onSubmit={addKnowledgeEntry}
+      >
+        <Input
+          value={valueStr}
+          className="form-control sm"
+          type="text" 
+          placeholder="Add Entry" 
+        />
+      </form>
+      
+    </div>
+  );
+}
+