more conversation details refactor

net/web/src/session/cardSelect/selectItem/SelectItem.jsx

@@ -15,7 +15,7 @@ export function SelectItem({ item, select, selected, markup, setItem, clearItem
     return profile?.handle;
   }
 
-  const onSelect = () => {
+  const onSelect = (ev) => {
     if (select) {
       select(item.id);
     }
@@ -25,6 +25,7 @@ export function SelectItem({ item, select, selected, markup, setItem, clearItem
     if (clearItem && state.selected) {
       clearItem(item.id);
     }
+    ev.stopPropagation()
   }
 
   return (
@@ -37,7 +38,7 @@ export function SelectItem({ item, select, selected, markup, setItem, clearItem
         </div>
         { (select || setItem || clearItem) && (
           <div class="switch">
-            <Switch checked={state.selected} onChange={onSelect} size="small" />
+            <Switch checked={state.selected} onChange={(flag, ev) => onSelect(ev)} size="small" />
           </div>
         )}
         { state.markup && (

net/web/src/session/details/Details.jsx

@@ -152,7 +152,7 @@ export function Details({ closeDetails, closeConversation, openContact }) {
             <Logo src={state.logo} width={72} height={72} radius={4} img={state.img} />
           </div>
           <div class="stats">
-            { state.host && (
+            { !state.host && (
               <div class="subject" onClick={actions.setEditSubject}>
                 { state.sealed && !state.contentKey && (
                   <LockFilled style={{ paddingRight: 4 }} />
@@ -173,7 +173,7 @@ export function Details({ closeDetails, closeConversation, openContact }) {
                 )}
               </div>
             )}
-            { !state.host && (
+            { state.host && (
               <div class="subject">
                 { state.sealed && !state.contentKey && (
                   <LockFilled style={{ paddingRight: 4 }} />
@@ -189,22 +189,22 @@ export function Details({ closeDetails, closeConversation, openContact }) {
                 )}
               </div>
             )}
-            { state.host && (
+            { !state.host && (
               <div class="host">host</div>
             )}
-            { !state.host && (
+            { state.host && (
               <div class="host">guest</div>
             )}
             <div class="created">{ state.started }</div>
           </div>
         </div>
-        { state.host && (
+        { !state.host && (
           <div class="button" onClick={deleteChannel}>Delete Topic</div>
         )}
-        { state.host && !state.sealed && (
+        { !state.host && !state.sealed && (
           <div class="button" onClick={actions.setEditMembers}>Edit Membership</div>
         )}
-        { !state.host && (
+        { state.host && (
           <div class="button" onClick={leaveChannel}>Leave Topic</div>
         )}
         <div class="label">Members</div>
@@ -215,7 +215,7 @@ export function Details({ closeDetails, closeConversation, openContact }) {
             }
             return false;
           }} unknown={state.unknown}
-           />
+          markup={state.host} />
         </div>
       </div>
       <Modal title="Edit Subject" centered visible={state.showEditSubject} footer={editSubjectFooter}

net/web/src/session/details/useDetails.hook.js

@@ -13,7 +13,7 @@ export function useDetails() {
     logo: null,
     img: null,
     started: null,
-    host: false,
+    host: null,
     title: null,
     label: null,
     members: [],
@@ -92,10 +92,10 @@ export function useDetails() {
       started = date.toLocaleDateString("en-US");
     }
     if (cardValue) {
-      host = false;
+      host = cardValue.id;
     }
     else {
-      host = true;
+      host = null;
     }
 
     // extract member info