rendering thread

app/client/mobile/src/context/useAppContext.hook.ts

@@ -3,7 +3,7 @@ import {DatabagSDK, Session, Focus} from 'databag-client-sdk';
 import {SessionStore} from '../SessionStore';
 import {NativeCrypto} from '../NativeCrypto';
 import {LocalStore} from '../LocalStore';
-const DATABAG_DB = 'db_v234.db';
+const DATABAG_DB = 'db_v237.db';
 const SETTINGS_DB = 'ls_v001.db';
 
 const databag = new DatabagSDK(

app/client/mobile/src/conversation/Conversation.styled.ts

@@ -8,6 +8,9 @@ export const styles = StyleSheet.create({
     height: '100%',
     minHeight: 0,
   },
+  messageList: {
+    width: '100%',
+  },
   messages: {
     paddingBottom: 64,
   },

app/client/mobile/src/conversation/Conversation.tsx

@@ -80,7 +80,7 @@ export function Conversation({close}: {close: ()=>void}) {
             <Text adjustsFontSizeToFit={true} numberOfLines={1} style={styles.label}>{ state.subject }</Text>
           )}
           { state.detailSet && state.host && !state.subject && state.subjectNames.length == 0 && (
-            <Text adjustsFontSizeToFit={true} numberOfLines={1} styles={styles.label}>{ state.strings.notes }</Text>
+            <Text adjustsFontSizeToFit={true} numberOfLines={1} style={styles.label}>{ state.strings.notes }</Text>
           )}
           { state.detailSet && !state.subject && state.subjectNames.length > 0 && (
             <Text adjustsFontSizeToFit={true} numberOfLines={1} style={styles.label}>{ state.subjectNames.join(', ') }</Text>
@@ -94,6 +94,7 @@ export function Conversation({close}: {close: ()=>void}) {
       <Divider style={styles.border} bold={true} />
       <View style={styles.thread}>
         <FlatList
+          style={styles.messageList}
           inverted
           ref={thread}
           onScroll={onScroll}
@@ -133,6 +134,7 @@ export function Conversation({close}: {close: ()=>void}) {
           </View>
         )}
       </View>
+      <Divider style={styles.border} bold={true} />
       <TouchableOpacity style={styles.add} onPress={() => thread.current.scrollToEnd()}>
         <Text>ADD</Text>
       </TouchableOpacity>

app/client/mobile/src/message/Message.styled.ts

@@ -2,4 +2,67 @@ import {StyleSheet} from 'react-native';
 import {Colors} from '../constants/Colors';
 
 export const styles = StyleSheet.create({
-});
+  message: {
+    paddingTop: 8,
+    width: '100%',
+  },
+  topic: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    paddingBottom: 8,
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flexStart',
+    width: '100%',
+  },
+  logo: {
+    width: 32,
+    height: 32,
+    borderRadius: 2,
+    marginLeft: 8,
+  },
+  body: {
+    display: 'flex',
+    flexGrow: 1,
+    flexDirection: 'column',
+  },
+  header: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flexStart',
+    width: '100%',
+    lineHeight: '16',
+    paddingBottom: '4',
+    gap: '16',
+    position: 'relative',
+  },
+  name: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 12,
+  },
+  handle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  unknown: {
+    fontSize: 14,
+    color: Colors.placeholder,
+  },
+  locked: {
+    fontStyle: 'italic',
+    color: Colors.placeholder,
+  },
+  timestamp: {
+    fontSize: 12,
+  },
+  padding: {
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 4,
+  },
+})

app/client/mobile/src/message/Message.tsx

@@ -1,16 +1,68 @@
 import { useRef, useEffect, useState, useCallback } from 'react';
 import { avatar } from '../constants/Icons'
+import { View, Image } from 'react-native';
 import {Icon, Text, IconButton, Divider} from 'react-native-paper';
 import { Topic, Card, Profile } from 'databag-client-sdk';
-import classes from './Message.styles.ts'
 import { ImageAsset } from './imageAsset/ImageAsset';
 import { AudioAsset } from './audioAsset/AudioAsset';
 import { VideoAsset } from './videoAsset/VideoAsset';
 import { BinaryAsset } from './binaryAsset/BinaryAsset';
 import { useMessage } from './useMessage.hook';
+import {styles} from './Message.styled';
 
 export function Message({ topic, card, profile, host }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean }) {
   const { state, actions } = useMessage();
+  const { locked, data, created, topicId, status, transform } = topic;
+  const { name, handle, node } = profile || card || { name: null, handle: null, node: null }
+  const { text, textColor, textSize, assets } = data || { text: null, textColor: null, textSize: null }
+  const textStyle = { color: textColor ? textColor : undefined, fontSize: textSize ? textSize : undefined };
+  const logoUrl = profile ? profile.imageUrl : card ? card.imageUrl : avatar;
+  const timestamp = actions.getTimestamp(created);
+  const [message, setMessage] = useState('');
+  const [editing, setEditing] = useState(false);
+  const [editText, setEditText] = useState('');
+  const [saving, setSaving] = useState(false);
 
-  return (<Text style={{ height: 32 }}>{ JSON.stringify(topic.data) }</Text>)
+  return (
+    <View style={styles.message}>
+      <View style={styles.topic}>
+        <View style={styles.content}>
+          <Image style={styles.logo} resizeMode={'contain'} source={{uri: logoUrl}} />
+          <View style={styles.body}>
+            <View style={styles.header}>
+              <View style={styles.name}>
+                { name && (
+                  <Text style={styles.handle}>{ name }</Text>
+                )}
+                { !name && handle && (
+                  <Text style={styles.handle}>{ `${handle}${node ? '/' + node : ''}` }</Text>
+                )}
+                { !name && !handle && (
+                  <Text style={styles.unknown}>{ state.strings.unknownContact }</Text>
+                )}
+                <Text style={styles.timestamp}> { timestamp }</Text>
+              </View>
+            </View>
+            <View style={styles.padding}>
+              {! locked && status === 'confirmed' && editing && (
+                <View style={styles.editing}>
+                </View>
+              )}
+              { !locked && status === 'confirmed' && text && !editing && (
+                  <Text style={styles.text}>{ text }</Text>
+              )}
+              { !locked && status !== 'confirmed' && (
+                <View style={styles.unconfirmed}>
+                </View>
+              )}
+              { locked && (
+                <Text style={styles.locked}>{ state.strings.encrypted }</Text>
+              )}
+            </View>
+          </View>
+        </View>
+      </View>
+      <Divider style={styles.border} />
+    </View>
+  );
 }