added remove and leave channel support

app/client/web/src/conversation/useConversation.hook.ts

@@ -334,7 +334,7 @@ export function useConversation() {
               return { binary: { label, extension, data } };
             }
           });
-          return { text: state.message, textColor: state.textColorSet ? state.textColor : null, textSize: state.textSizeSet ? state.textSize : null, assets };
+          return { text: state.message, textColor: state.textColorSet ? state.textColor : null, textSize: state.textSizeSet ? state.textSize : null, assets: assets.length > 0 ? assets : null };
         }
         const upload = (progress: number) => { updateState({ progress }) };
         await focus.addTopic(sealed, sealed ? 'sealedtopic' : 'superbasictopic', subject, sources, upload);

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

@@ -6,9 +6,10 @@ import { Divider, Text, Textarea, Image, TextInput, ActionIcon } from '@mantine/
 import { Card } from '../card/Card';
 import { modals } from '@mantine/modals'
 
-export function Details({ close }: { close?: () => void }) {
+export function Details({ close }: { close: () => void }) {
   const { state, actions } = useDetails()
   const [saving, setSaving] = useState(false);
+  const [removing, setRemoving] = useState(false);
 
   const undo = () => {
     actions.undoSubject();
@@ -27,6 +28,58 @@ export function Details({ close }: { close?: () => void }) {
     }
   }
 
+  const remove = async () => {
+    modals.openConfirmModal({
+      title: state.strings.confirmTopic,
+      withCloseButton: false,
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3,
+      },
+      children: <Text>{ state.strings.sureTopic }</Text>,
+      labels: { confirm: state.strings.remove, cancel: state.strings.cancel },
+      onConfirm: async () => {
+        if (!removing) {
+          setRemoving(true);
+          try {
+            await actions.remove();
+            close();
+          } catch (err) {
+            console.log(err);
+            showError();
+          }
+          setRemoving(false);
+        }
+      }
+    })
+  }
+
+  const leave = async () => {
+    modals.openConfirmModal({
+      title: state.strings.confirmLeave,
+      withCloseButton: false,
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3,
+      },
+      children: <Text>{ state.strings.sureLeave }</Text>,
+      labels: { confirm: state.strings.leave, cancel: state.strings.cancel },
+      onConfirm: async () => {
+        if (!removing) {
+          setRemoving(true);
+          try {
+            await actions.leave();
+            close();
+          } catch (err) {
+            console.log(err);
+            showError();
+          }
+          setRemoving(false);
+        }
+      }
+    })
+  }
+
   const showError = () => {
     modals.openConfirmModal({
       title: state.strings.operationFailed,
@@ -49,9 +102,9 @@ export function Details({ close }: { close?: () => void }) {
   return (
     <div className={classes.details}>
       <div className={classes.header}>
-        {close && <IconX className={classes.match} />}
+        <IconX className={classes.match} />
         <Text className={classes.label}>{ state.strings.details }</Text>    
-        {close && <IconX className={classes.close} onClick={close} />}
+        <IconX className={classes.close} onClick={close} />
       </div>
       { state.access && (
         <div className={classes.body}>
@@ -119,7 +172,7 @@ export function Details({ close }: { close?: () => void }) {
           { !state.host && (
             <div className={classes.actions}>
               <div className={classes.action}>
-                <ActionIcon variant="subtle" size="lg">
+                <ActionIcon variant="subtle" size="lg" loading={removing} onClick={leave}>
                   <IconLogout2 size="lg" />
                 </ActionIcon>
                 <Text className={classes.actionLabel}>{state.strings.leave}</Text>
@@ -141,7 +194,7 @@ export function Details({ close }: { close?: () => void }) {
           { state.host && (
             <div className={classes.actions}>
               <div className={classes.action}>
-                <ActionIcon variant="subtle" size="lg" >
+                <ActionIcon variant="subtle" size="lg" loading={removing} onClick={remove}>
                   <IconMessageX size="lg" />
                 </ActionIcon>
                 <Text className={classes.actionLabel}>{state.strings.remove}</Text>

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

@@ -116,6 +116,16 @@ export function useDetails() {
   }, [app.state.focus, state.timeFormat, state.dateFormat]);
 
   const actions = {
+    remove: async () => {
+      const content = app.state.session.getContent()
+      await content.removeChannel(state.channelId);
+      app.actions.clearFocus();
+    },
+    leave: async () => {
+      const content = app.state.session.getContent()
+      await content.leaveChannel(state.cardId, state.channelId);
+      app.actions.clearFocus();
+    },
     setEditSubject: (editSubject: string) => {
       updateState({ editSubject });
     },

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

@@ -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 />
+              <Details close={closeDetails} />
             </div>
           </Drawer>
           <Drawer opened={settings} onClose={closeSettings} withCloseButton={false} size="sm" padding="0" position="right">

app/sdk/src/focus.ts

@@ -562,6 +562,7 @@ export class FocusModule implements Focus {
           }
         });
         const updated = { text, textColor, textSize, assets: mapped };
+
         // end of legacy support block
 
         if (sealed) {
@@ -742,6 +743,7 @@ export class FocusModule implements Focus {
       }
     });
     const updated = { text, textColor, textSize, assets: mapped };
+
     // end of legacy support block
 
     if (sealed) {