support adding members to sealed channels

app/client/web/src/details/Details.tsx

@@ -6,7 +6,7 @@ import { Switch, Button, Modal, Divider, Text, Textarea, Image, TextInput, Actio
 import { Card } from '../card/Card';
 import { modals } from '@mantine/modals'
 
-export function Details({ close }: { close: () => void }) {
+export function Details({ showClose, close }: { showClose: boolean, close: () => void }) {
   const { state, actions } = useDetails()
   const [saving, setSaving] = useState(false);
   const [removing, setRemoving] = useState(false);
@@ -163,34 +163,39 @@ export function Details({ close }: { close: () => void }) {
       return true;
     }
   }).map((card, index) => {
-    const enable = (
+    const enable = !state.detail ? [] : [
       <Switch
         key="enable"
         className={classes.setMember}
         size="sm"
         checked={Boolean(state.detail.members.find(member => member.guid === card.guid))}
-        onChange={(ev) => {
-          if (ev.currentTarget.checked) {
-            console.log("ADD MEMBER");
-          } else {
-            console.log("REMOVE MEMBER");
+        onChange={async (ev) => {
+          try {
+            if (ev.currentTarget.checked) {
+              await actions.setMember(card.cardId);
+            } else {
+              await actions.clearMember(card.cardId);
+            }
+          } catch (err) {
+            console.log(err);
+            showError();
           }
         }}
       />
-    )
+    ];
 
     return (
       <Card className={classes.card} key={index} imageUrl={card.imageUrl} name={card.name} placeholder={state.strings.name}
-        handle={card.handle} node={card.node} actions={[enable]} />
+        handle={card.handle} node={card.node} actions={enable} />
     )
   });
 
   return (
     <div className={classes.details}>
       <div className={classes.header}>
-        <IconX className={classes.match} />
+        { showClose && (<IconX className={classes.match} />)}
         <Text className={classes.label}>{ state.strings.details }</Text>    
-        <IconX className={classes.close} onClick={close} />
+        { showClose && (<IconX className={classes.close} onClick={close} />)}
       </div>
       { state.access && (
         <div className={classes.body}>

app/client/web/src/details/useDetails.hook.ts

@@ -139,6 +139,14 @@ export function useDetails() {
       const content = app.state.session.getContent();
       await content.flagChannel(state.cardId, state.channelId);
     },
+    setMember: async (cardId: string) => {
+      const content = app.state.session.getContent();
+      await content.setChannelCard(state.channelId, cardId);
+    },
+    clearMember: async (cardId: string) => {
+      const content = app.state.session.getContent();
+      await content.clearChannelCard(state.channelId, cardId);
+    },
     setEditSubject: (editSubject: string) => {
       updateState({ editSubject });
     },

app/client/web/src/session/Session.tsx

@@ -53,7 +53,7 @@ export function Session() {
             )}
             {details && (
               <div className={classes.screen}>
-                <Details close={closeDetails} />
+                <Details showClose={true} close={closeDetails} />
               </div>
             )}
           </div>
@@ -166,7 +166,7 @@ export function Session() {
           </Drawer>
           <Drawer opened={details} onClose={closeDetails} withCloseButton={false} size="xs" padding="0" position="right" trapFocus={false}>
             <div style={{ height: '100vh' }}>
-              <Details close={closeDetails} />
+              <Details showClose={false} close={closeDetails} />
             </div>
           </Drawer>
           <Drawer opened={settings} onClose={closeSettings} withCloseButton={false} size="sm" padding="0" position="right">

app/sdk/src/content.ts

@@ -44,7 +44,10 @@ export class ContentModule implements Content {
   }
 
   public async setChannelCard(channelId: string, cardId: string): Promise<void> {
-    return await this.stream.setChannelCard(channelId, cardId);
+    const getSeal = async (aesKey: string) => {
+      return await this.contact.getSeal(cardId, aesKey);
+    }
+    return await this.stream.setChannelCard(channelId, cardId, getSeal);
   }
 
   public async clearChannelCard(channelId: string, cardId: string): Promise<void> {

app/sdk/src/stream.ts

@@ -341,14 +341,22 @@ export class StreamModule {
     }
   }
 
-  public async setChannelCard(channelId: string, cardId: string): Promise<void> {
+  public async setChannelCard(channelId: string, cardId: string, getSeal: (aesKey: string)=>Promise<{publicKey: string; sealedKey: string}>): Promise<void> {
     const { node, secure, token } = this;
     const channel = this.channelEntries.get(channelId);
     if (!channel) {
       throw new Error('channel not found');
     }
     if (channel.item.detail.sealed) {
-      throw new Error('sealed channels cannot add members');
+      const channelKey = channel.item.channelKey;
+      if (!channelKey) {
+        throw new Error('cannot add members to locked channels');
+      }
+      const seal = await getSeal(channelKey);
+      const data = JSON.parse(channel.item.detail.data);
+      const seals = [...data.seals, seal];
+      const subject = { ...data, seals };
+      await setChannelSubject(node, secure, token, channelId, channel.item.detail.dataType, subject); 
     }
     await setChannelCard(node, secure, token, channelId, cardId);
   }