Merge branch 'main' into refactor

doc/pizero.md

@@ -61,7 +61,7 @@ These instructions assume you have the following setup:
 ## Step 8: download the webapp
   // because the react toolchain isn't available for the pi zero, the webapp is built in a github action<br/>
   Download webapp.zip from the most recent build:<br/>
-    https://github.com/balzack/databag/actions/runs/3758970117<br/>
+    https://github.com/balzack/databag/actions/runs/4033318007<br/>
   SCP webapp.zip into the pi<br/>
   Extract it into the web/build directory<br/>
     mkdir /app/databag/net/web/build<br/>

net/web/src/session/cards/Cards.jsx

@@ -1,4 +1,4 @@
-import { Input, List } from 'antd';
+import { Input, List, Button } from 'antd';
 import { CardsWrapper } from './Cards.styled';
 import { SortAscendingOutlined, UpOutlined, DoubleRightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
 import { useCards } from './useCards.hook';
@@ -27,10 +27,7 @@ export function Cards({ closeCards, openContact, openListing }) {
         </div>
         { state.display === 'small' && (
           <div className="inline">
-            <div className="add" onClick={openListing}>
-              <UserOutlined />
-              <div className="label">New</div>
-            </div>
+            <Button type="primary" icon={<UserOutlined />} onClick={openListing}>Add</Button>
           </div>
         )}
         { state.display !== 'small' && (

net/web/src/session/cards/useCards.hook.js

@@ -10,7 +10,7 @@ export function useCards() {
   const [state, setState] = useState({
     tooltip: false,
     sorted: false,
-    display: null,
+    display: 'small',
     cards: [],
   });
 
@@ -22,6 +22,11 @@ export function useCards() {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    const { display } = viewport.state;
+    updateState({ display });
+  }, [viewport.state]);
+
   useEffect(() => {
     const contacts = Array.from(card.state.cards.values()).map(item => {
       const profile = item?.data?.cardProfile;

net/web/src/session/conversation/channelHeader/useChannelHeader.hook.js

@@ -99,9 +99,14 @@ export function useChannelHeader(contentKey) {
       let title;
       try {
         const detail = channelValue?.data?.channelDetail;
-        if (detail?.dataType === 'sealed' && contentKey) {
-          const unsealed = decryptChannelSubject(detail.data, contentKey);
-          title = unsealed.subject;
+        if (detail?.dataType === 'sealed') {
+          if (contentKey) {
+            const unsealed = decryptChannelSubject(detail.data, contentKey);
+            title = unsealed.subject;
+          }
+          else {
+            title = '...';
+          }
         }
         else if (detail?.dataType === 'superbasic') {
           const data = JSON.parse(detail.data);

net/web/src/session/conversation/useConversation.hook.js

@@ -51,7 +51,7 @@ export function useConversation(cardId, channelId) {
         const seals = getChannelSeals(data);
         if (isUnsealed(seals, sealKey)) {
           const contentKey = getContentKey(seals, sealKey);
-          updateState({ sealed: true, contentKey });
+          updateState({ sealed: true, wtf: true, contentKey });
         }
         else {
           updateState({ sealed: true, contentKey: null });
@@ -105,7 +105,6 @@ export function useConversation(cardId, channelId) {
       const { card, channel } = conversationId.current;
       loading.current = true;
       conversationId.current = null;
-      updateState({ contentKey: null });
       await conversation.actions.setChannel(card, channel);
       loading.current = false;
       await setChannel();
@@ -258,7 +257,6 @@ export function useConversation(cardId, channelId) {
     updateTopic: async (topic, text) => {
       const { assets, textSize, textColor } = topic;
       const message = { text, textSize, textColor, assets };
-      console.log("UPDATE", message);
       
       if (!state.busy) {
         updateState({ busy: true });

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

@@ -129,7 +129,7 @@ export function Details({ closeDetails, closeConversation, openContact }) {
     <DetailsWrapper>
       { modalContext }
       <div class="header">
-        <div class="label">Topic</div>
+        <div class="label">Topic Details</div>
         { state.display === 'xlarge' && (
           <div class="dismiss" onClick={closeConversation}>
             <DoubleRightOutlined />

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

@@ -25,7 +25,7 @@ export function useDetails() {
     showEditSubject: false,
     editSubject: null,
 
-    display: null,
+    display: 'small',
     sealed: false,
     contentKey: null,
     seals: null,
@@ -167,9 +167,14 @@ export function useDetails() {
       let title;
       try {
         const detail = channelValue?.data?.channelDetail;
-        if (detail?.dataType === 'sealed' && state.contentKey) {
-          const unsealed = decryptChannelSubject(detail.data, state.contentKey);
-          title = unsealed.subject;
+        if (detail?.dataType === 'sealed') {
+          if (state.contentKey) {
+            const unsealed = decryptChannelSubject(detail.data, state.contentKey);
+            title = unsealed.subject;
+          }
+          else {
+            title = '...';
+          }
         }
         else if (detail?.dataType === 'superbasic') {
           const data = JSON.parse(detail.data);