preparing details screen

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

@@ -22,7 +22,6 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    flexDirection: 'row',
     gap: 4,
   },
   assets: {
@@ -110,7 +109,6 @@ export const styles = StyleSheet.create({
   },
   header: {
     display: 'flex',
-    flexDirection: 'row',
     width: '100%',
     minWidth: 0,
     alignItems: 'center',

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

@@ -26,7 +26,7 @@ export type MediaAsset = {
   binary?: { label: string, extension: string, data: string }
 }
 
-export function Conversation({close}: {close: ()=>void}) {
+export function Conversation({close, openDetails, wide}: {close: ()=>void, openDetails: ()=>void, wide: boolean}) {
   const { state, actions } = useConversation();
   const [ more, setMore ] = useState(false);
   const [ alert, setAlert ] = useState(false);
@@ -185,8 +185,8 @@ export function Conversation({close}: {close: ()=>void}) {
 
   return (
     <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 50}  style={styles.conversation}>
-      <SafeAreaView style={styles.header}>
-        <IconButton style={styles.icon} mode="contained" icon="arrow-left" size={28} onPress={onClose} />
+      <SafeAreaView style={{ ...styles.header, flexDirection: wide ? 'row-reverse' : 'row' }}>
+        <IconButton style={styles.icon} mode="contained" icon={wide ? 'close' : 'arrow-left'} size={28} onPress={onClose} />
         <View style={styles.status}>
         </View>
         <View style={styles.title}>
@@ -203,7 +203,7 @@ export function Conversation({close}: {close: ()=>void}) {
             <Text adjustsFontSizeToFit={true} numberOfLines={1} style={styles.unknown}>{ `, ${state.strings.unknownContact} (${state.unknownContacts})` }</Text>
           )}
         </View>
-        <View style={styles.status}>
+        <View style={{ ...styles.status, flexDirection: wide ? 'row-reverse' : 'row' }}>
           { state.detailSet && !state.access && (
             <Icon source="alert-circle-outline" size={20} color={Colors.offsync} />
           )}
@@ -217,7 +217,7 @@ export function Conversation({close}: {close: ()=>void}) {
             <Icon source="shield-outline" size={18} />
           )}
         </View>
-        <IconButton style={styles.icon} mode="contained" icon="cog-outline" size={28} onPress={()=>{}} />
+        <IconButton style={styles.icon} mode="contained" icon="cog-outline" size={28} onPress={openDetails} />
       </SafeAreaView>
       <Divider style={styles.border} bold={true} />
       <View style={styles.thread}>

app/client/mobile/src/details/Details.styled.ts

@@ -0,0 +1,42 @@
+import {StyleSheet} from 'react-native';
+import { Colors } from '../constants/Colors';
+
+export const styles = StyleSheet.create({
+  details: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+  },
+  header: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingRight: 8,
+    paddingLeft: 8,
+    width: '100%',
+    zIndex: 1,
+    height: 48,
+  },
+  title: {
+    fontSize: 20,
+  },
+  close: {
+    width: 32,
+  },
+  closeIcon: {
+    flexShrink: 0,
+    marginRight: 0,
+    marginLeft: 0,
+    marginTop: 0,
+    marginBottom: 0,
+    backgroundColor: 'transparent',
+  },
+  divider: {
+    width: '100%',
+    height: 2,
+  },
+});

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

@@ -1,6 +1,26 @@
 import React from 'react';
-import {Text} from 'react-native-paper';
+import { SafeAreaView, View } from 'react-native';
+import {Divider, IconButton, Text} from 'react-native-paper';
+import {styles} from './Details.styled';
+import {useDetails} from './useDetails.hook';
 
-export function Details() {
-  return <Text>DETAILS</Text>;
+export function Details({close, closeAll}: {close: ()=>void, closeAll: ()=>void}) {
+  const { state, actions } = useDetails();
+
+  return (
+    <View style={styles.details}>
+      <SafeAreaView style={styles.header}>
+        {close && (
+          <View style={styles.close}>
+            <IconButton style={styles.closeIcon} compact="true" mode="contained" icon="arrow-left" size={28} onPress={close} />
+          </View>
+        )}
+        <Text style={styles.title}>{ state.strings.details }</Text>
+        {close && (
+          <View style={styles.close} />
+        )} 
+      </SafeAreaView>
+      <Divider style={styles.divider} />
+    </View>
+  )
 }

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

@@ -0,0 +1,19 @@
+import {useState, useContext, useEffect, useRef} from 'react';
+import {DisplayContext} from '../context/DisplayContext';
+import {ContextType} from '../context/ContextType';
+
+export function useDetails() {
+  const display = useContext(DisplayContext) as ContextType;
+  const [state, setState] = useState({
+    strings: display.state.strings,
+  });
+
+  const updateState = (value: any) => {
+    setState(s => ({...s, ...value}));
+  };
+
+  const actions = {
+  };
+
+  return {state, actions};
+}

app/client/mobile/src/registry/Registry.tsx

@@ -6,7 +6,7 @@ import {styles} from './Registry.styled';
 import {useRegistry} from './useRegistry.hook';
 import {Card} from '../card/Card';
 
-export function Registry({close, openContact}: {close: () => void; openContact: (params: ContactParams) => void}) {
+export function Registry({close, openContact}: {close?: () => void; openContact: (params: ContactParams) => void}) {
   const {state, actions} = useRegistry();
   const theme = useTheme();
 

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

@@ -197,7 +197,16 @@ function ContentTab({scheme, textCard, contentTab}: {scheme: string, textCard: {
             ...TransitionPresets.ScaleFromCenterAndroid,
           }}>
           {props => (
-            <Conversation close={()=>props.navigation.goBack()} />
+            <Conversation openDetails={()=>props.navigation.navigate('details')} close={()=>props.navigation.goBack()} wide={false} />
+          )}
+        </ContentStack.Screen>
+        <ContentStack.Screen name="details"
+          options={{
+            headerBackTitleVisible: false,
+            ...TransitionPresets.ScaleFromCenterAndroid,
+          }}>
+          {props => (
+            <Details close={()=>props.navigation.goBack()} closeAll={()=>props.navigation.popToTop()} />
           )}
         </ContentStack.Screen>
       </ContentStack.Navigator>
@@ -258,16 +267,34 @@ function ContactTab({scheme, textContact}: {scheme: string, textContact: (cardId
 }
 
 function DetailsScreen({nav}) {
+  const [focus, setFocus] = useState(false);
+
+  const closeAll = (props) => {
+    props.navigation.closeDrawer();
+    setFocus(false);
+  }
+
+  const DetailsComponent = useCallback(
+    (props) => (
+      <Surface elevation={1}>
+        <Details
+          closeAll={()=>closeAll(props)}
+        />
+      </Surface>
+    ),
+    [nav],
+  );
+
   return (
     <DetailsDrawer.Navigator
       id="DetailsDrawer"
-      drawerContent={Details}
+      drawerContent={DetailsComponent}
       screenOptions={{
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
       }}>
-      <DetailsDrawer.Screen name="details">{({navigation}) => <ProfileScreen nav={{...nav, details: navigation}} />}</DetailsDrawer.Screen>
+      <DetailsDrawer.Screen name="details">{({navigation}) => <ProfileScreen nav={{...nav, focus, setFocus, details: navigation}} />}</DetailsDrawer.Screen>
     </DetailsDrawer.Navigator>
   );
 }
@@ -386,7 +413,6 @@ function SettingsScreen({nav}) {
 }
 
 function HomeScreen({nav}) {
-  const [focus, setFocus] = useState(false);
   const [textCard, setTextCard] = useState({ cardId: null} as {cardId: null|string});
 
   return (
@@ -396,12 +422,12 @@ function HomeScreen({nav}) {
           <Identity openSettings={nav.settings.openDrawer} openContacts={nav.contacts.openDrawer} />
         </Surface>
         <Surface style={styles.channels} elevation={1} mode="flat">
-          <Content textCard={nav.textCard} openConversation={()=>setFocus(true)} />
+          <Content textCard={nav.textCard} openConversation={()=>nav.setFocus(true)} />
         </Surface>
       </View>
       <View style={styles.right}>
-        {focus && <Conversation close={()=>setFocus(false)} />}
-        {!focus && <Text>FOCUS NOT SET</Text>}
+        {nav.focus && <Conversation openDetails={nav.details.openDrawer} close={()=>nav.setFocus(false)} wide={true} />}
+        {!nav.focus && <Text>FOCUS NOT SET</Text>}
       </View>
     </View>
   );