styling drawers

app/client/mobile/src/contacts/Contacts.tsx

@@ -17,7 +17,7 @@ export function Contacts({ openRegistry, openContact }: { openRegistry: ()=>void
         <IconButton style={styles.sort} mode="contained" icon={state.sortAsc ? 'sort-descending' : 'sort-ascending'} size={24} onPress={actions.toggleSort} />
 
         <Surface mode="flat" style={styles.inputSurface}>
-          <TextInput dense={true} style={styles.input} unserlineStyle={styles.inputUnderline} mode="outlined" placeholder={state.strings.contacts} left={<TextInput.Icon style={styles.icon} icon="magnify" />} value={state.filter} onChangeText={value => actions.setFilter(value)} />
+          <TextInput dense={true} style={styles.input} autoCapitalize={false} unserlineStyle={styles.inputUnderline} mode="outlined" placeholder={state.strings.contacts} left={<TextInput.Icon style={styles.icon} icon="magnify" />} value={state.filter} onChangeText={value => actions.setFilter(value)} />
         </Surface>
 
         <Button icon="account-plus" mode="contained" style={{ borderRadius: 8 }} onPress={openRegistry}>{ state.strings.add }</Button>

app/client/mobile/src/registry/Registry.styled.ts

@@ -10,20 +10,20 @@ export const styles = StyleSheet.create({
     height: '100%',
   },
   header: {
+    position: 'relative',
     display: 'flex',
     flexDirection: 'row',
-    gap: 8,
-    paddingTop: 8,
     alignItems: 'center',
-    paddingLeft: 8,
+    justifyContent: 'center',
     paddingRight: 8,
-    paddingBottom: 8,
+    paddingLeft: 8,
     width: '100%',
+    zIndex: 1,
   },
   close: {
     flexShrink: 0,
-    margin: 0,
-    padding: 0,
+    marginRight: 0,
+    marginLeft: 0,
     backgroundColor: 'transparent',
   },
   input: {
@@ -73,4 +73,29 @@ export const styles = StyleSheet.create({
   icon: {
     backgroundColor: 'transparent',
   },
+  none: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cards: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    overscrollBehavior: 'none',
+  },
+  cardsContainer: {
+    paddingBottom: 64,
+  },
+  card: {
+    width: '100%',
+    height: 48,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingRight: 16,
+    paddingLeft: 16,
+    borderBottomWidth: 1,
+  }
 });

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

@@ -1,12 +1,14 @@
 import React from 'react';
-import { SafeAreaView, View } from 'react-native';
-import { IconButton, Icon, Divider, Button, TextInput, Surface } from 'react-native-paper';
+import { SafeAreaView, View, FlatList } from 'react-native';
+import { Text, IconButton, Icon, Divider, Button, TextInput, Surface, useTheme } from 'react-native-paper';
 import { ContactParams } from '../profile/Profile';
 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 }) {
   const { state, actions } = useRegistry();
+  const theme = useTheme();
 
   return (
     <View style={styles.registry}>
@@ -15,13 +17,43 @@ export function Registry({ close, openContact }: { close: ()=>void, openContact:
           <IconButton style={styles.close} compact="true"  mode="contained" icon="arrow-left" size={24} onPress={close} />
         )}
         <Surface mode="flat" style={styles.inputUsername}>
-          <TextInput dense={true} style={styles.input} underlineStyle={styles.inputUnderline} mode="outlined" placeholder={state.strings.username} left={<TextInput.Icon style={styles.icon} icon="account" />} value={state.username} onChangeText={value => actions.setUsername(value)} />
+          <TextInput dense={true} style={styles.input} autoCapitalize={false} underlineStyle={styles.inputUnderline} mode="outlined" placeholder={state.strings.username} left={<TextInput.Icon style={styles.icon} icon="account" />} value={state.username} onChangeText={value => actions.setUsername(value)} />
         </Surface>
         <Surface mode="flat" style={styles.inputServer}>
-          <TextInput dense={true} style={styles.input} underlineStyle={styles.inputUnderline} mode="outlined" placeholder={state.strings.server} left={<TextInput.Icon style={styles.icon} icon="server" />} value={state.server} onChangeText={value => actions.setServer(value)} />
+          <TextInput dense={true} style={styles.input} autoCapitalize={false} underlineStyle={styles.inputUnderline} mode="outlined" placeholder={state.strings.server} left={<TextInput.Icon style={styles.icon} icon="server" />} value={state.server} onChangeText={value => actions.setServer(value)} />
         </Surface>
       </SafeAreaView>
       <Divider style={styles.divider} />
+
+
+      { state.profiles.length !== 0 && (
+        <FlatList
+          style={styles.cards}
+          data={state.profiles}
+          initialNumToRender={32}
+          contentContainerStyle={styles.cardsContainer}
+          showsVerticalScrollIndicator={false}
+          renderItem={({ item }) => {
+            const select = () => {
+              const { guid, handle, node, name, location, description, imageUrl } = item;
+              const params = { guid, handle, node, name, location, description, imageUrl };
+              openContact(params);
+            }
+            return (
+              <View style={{ borderRightWidth: 2 }}>
+                <Card containerStyle={{ ...styles.card, borderColor: theme.colors.outlineVariant }} imageUrl={item.imageUrl} name={item.name} handle={item.handle} node={item.node} placeholder={state.strings.name} select={select} actions={[]} />
+              </View>
+            )
+          }}
+          keyExtractor={(profile) => profile.guid}
+        />
+      )}
+      { state.profiles.length === 0 && (
+        <Text style={styles.none}>{ state.strings.noContacts }</Text>
+      )}
+
     </View>
   )
 }
+
+

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

@@ -40,8 +40,6 @@ export function Session() {
   const ContactsRoute = () => <ContactTab />;
   const SettingsRoute = () => <Settings showLogout={true} />;
 
-console.log("RENDER: ", state.layout);
-
   return (
     <View style={styles.session}>
       {state.layout !== 'large' && (
@@ -170,7 +168,7 @@ function RegistryScreen({nav}) {
         </Surface>
       )}
       screenOptions={{
-        drawerStyle: {width: '45%'},
+        drawerStyle: {width: 350},
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
@@ -194,7 +192,7 @@ function ContactsScreen({nav}) {
         </Surface>
       )}
       screenOptions={{
-        drawerStyle: {width: '50%'},
+        drawerStyle: {width: 400},
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,

app/client/mobile/src/settings/Settings.styled.ts

@@ -205,6 +205,9 @@ export const styles = StyleSheet.create({
   label: {
     fontSize: 16,
   },
+  smallLabel: {
+    wordBreak: 'break-all',
+  },
   labelUnset: {
     fontSize: 16,
     fontStyle: 'italic',
@@ -240,7 +243,6 @@ export const styles = StyleSheet.create({
     flexShrink: 1,
     display: 'flex',
     flexDirection: 'row',
-    flexWrap: 'wrap',
     alignItems: 'center',
   },
   radioButtons: {

app/client/mobile/src/settings/Settings.tsx

@@ -584,7 +584,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
                 <Icon size={24} source="clock-outline" />
               </View>
               <View style={styles.radioControl}>
-                <Text style={styles.label}>{state.strings.timeFormat}:</Text>
+                <Text style={styles.smallLabel}>{state.strings.timeFormat}:</Text>
                 <View style={styles.radioButtons}>
                   <RadioButton.Item
                     label={state.strings.timeHalf}
@@ -612,7 +612,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
                 <Icon size={24} source="calendar-text-outline" />
               </View>
               <View style={styles.radioControl}>
-                <Text style={styles.label}>{state.strings.dateFormat}:</Text>
+                <Text style={styles.smallLabel}>{state.strings.dateFormat}:</Text>
                 <View style={styles.radioButtons}>
                   <RadioButton.Item
                     label={state.strings.monthStart}