From 07a5a1d59d01360badaa4a38b2931a53570cb59a Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Mon, 30 Dec 2024 12:46:54 -0800
Subject: [PATCH] rendering thread

---
 .../src/conversation/Conversation.styled.ts    |  2 ++
 .../mobile/src/message/Message.styled.ts       | 15 +++++++++++++--
 app/client/mobile/src/message/Message.tsx      | 18 ++++++++++++++----
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/app/client/mobile/src/conversation/Conversation.styled.ts b/app/client/mobile/src/conversation/Conversation.styled.ts
index 63348266..e23826eb 100644
--- a/app/client/mobile/src/conversation/Conversation.styled.ts
+++ b/app/client/mobile/src/conversation/Conversation.styled.ts
@@ -27,9 +27,11 @@ export const styles = StyleSheet.create({
     paddingTop: 16,
     position: 'absolute',
     top: 0,
+    opacity: 0.5,
   },
   loading: {
     position: 'absolute',
+    opacity: 0.3,
   },
   empty: {
     position: 'absolute',
diff --git a/app/client/mobile/src/message/Message.styled.ts b/app/client/mobile/src/message/Message.styled.ts
index 6aae6efb..32367c60 100644
--- a/app/client/mobile/src/message/Message.styled.ts
+++ b/app/client/mobile/src/message/Message.styled.ts
@@ -35,7 +35,6 @@ export const styles = StyleSheet.create({
     alignItems: 'flexStart',
     width: '100%',
     lineHeight: '16',
-    paddingBottom: '4',
     gap: '16',
     position: 'relative',
   },
@@ -47,7 +46,6 @@ export const styles = StyleSheet.create({
   },
   handle: {
     fontSize: 14,
-    fontWeight: 'bold',
   },
   unknown: {
     fontSize: 14,
@@ -60,6 +58,19 @@ export const styles = StyleSheet.create({
   timestamp: {
     fontSize: 12,
   },
+  options: {
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    borderRadius: 8,
+  },
+  option: {
+    backgroundColor: 'transparent',
+    padding: 0,
+    margin: 0,
+  },
   padding: {
     paddingLeft: 12,
     paddingRight: 12,
diff --git a/app/client/mobile/src/message/Message.tsx b/app/client/mobile/src/message/Message.tsx
index 497dde6c..fb913b4b 100644
--- a/app/client/mobile/src/message/Message.tsx
+++ b/app/client/mobile/src/message/Message.tsx
@@ -1,7 +1,7 @@
 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 { Pressable, View, Image } from 'react-native';
+import {Icon, Text, IconButton, Surface, Divider} from 'react-native-paper';
 import { Topic, Card, Profile } from 'databag-client-sdk';
 import { ImageAsset } from './imageAsset/ImageAsset';
 import { AudioAsset } from './audioAsset/AudioAsset';
@@ -22,6 +22,7 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
   const [editing, setEditing] = useState(false);
   const [editText, setEditText] = useState('');
   const [saving, setSaving] = useState(false);
+  const [options, setOptions] = useState(false);
 
   return (
     <View style={styles.message}>
@@ -29,7 +30,7 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
         <View style={styles.content}>
           <Image style={styles.logo} resizeMode={'contain'} source={{uri: logoUrl}} />
           <View style={styles.body}>
-            <View style={styles.header}>
+            <Pressable style={styles.header} onPress={()=>setOptions(!options)}>
               <View style={styles.name}>
                 { name && (
                   <Text style={styles.handle}>{ name }</Text>
@@ -42,7 +43,7 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
                 )}
                 <Text style={styles.timestamp}> { timestamp }</Text>
               </View>
-            </View>
+            </Pressable>
             <View style={styles.padding}>
               {! locked && status === 'confirmed' && editing && (
                 <View style={styles.editing}>
@@ -62,6 +63,15 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
           </View>
         </View>
       </View>
+      { options && (
+        <Surface style={styles.options}>
+          <IconButton style={styles.option} loading={false} compact="true"  mode="contained" icon="share-variant-outline" size={24} onPress={() => {}} />
+          <IconButton style={styles.option} loading={false} compact="true"  mode="contained" icon="square-edit-outline" size={24} onPress={() => {}} />
+          <IconButton style={styles.option} loading={false} compact="true"  mode="contained" icon="trash-can-outline" size={24} onPress={() => {}} />
+          <IconButton style={styles.option} loading={false} compact="true"  mode="contained" icon="eye-remove-outline" size={24} onPress={() => {}} />
+          <IconButton style={styles.option} loading={false} compact="true"  mode="contained" icon="alert-octagon-outline" size={24} onPress={() => {}} />
+        </Surface>
+      )}
       <Divider style={styles.border} />
     </View>
   );