fix note list scroll

frontend/Components/MenuItems/index.tsx

@@ -153,15 +153,16 @@ export const MenuItems: React.FC = () => {
           showDivider={false}
         >
           <Button
-              mode='outlined'
-              onPress={onPressLogout}
-              textColor={theme.colors.onSurface}
-              icon={() => (
-                  <MaterialCommunityIcons
-                      name='logout'
-                      size={20}
-                      style={{color: theme.colors.onSurface}}/>
-              )}
+            mode='outlined'
+            onPress={onPressLogout}
+            textColor={theme.colors.onSurface}
+            icon={() => (
+              <MaterialCommunityIcons
+                name='logout'
+                size={20}
+                style={{ color: theme.colors.onSurface }}
+              />
+            )}
           >
             {t('menuItems.logout')}
           </Button>

frontend/Components/NoteCard/index.tsx

@@ -64,7 +64,7 @@ export const NoteCard: React.FC<NoteCardProps> = ({
   const theme = useTheme()
   const { publicKey, privateKey } = React.useContext(UserContext)
   const { relayPool, lastEventId, setDisplayrelayDrawer } = useContext(RelayPoolContext)
-  const { database, showSensitive, setDisplayUserDrawer } = useContext(AppContext)
+  const { database, showSensitive, setDisplayUserDrawer, relayColouring } = useContext(AppContext)
   const [relayAdded, setRelayAdded] = useState<boolean>(false)
   const [positiveReactions, setPositiveReactions] = useState<number>(0)
   const [negaiveReactions, setNegativeReactions] = useState<number>(0)
@@ -357,21 +357,22 @@ export const NoteCard: React.FC<NoteCardProps> = ({
         </Card.Content>
       )}
       <Card.Content style={styles.relayList}>
-        {relays.map((relay, index) => (
-          <TouchableNativeFeedback
-            onPress={() => setDisplayrelayDrawer(relay.relay_url)}
-            key={relay.relay_url}
-          >
-            <View
-              style={[
-                styles.relay,
-                { backgroundColor: relayToColor(relay.relay_url) },
-                index === 0 ? { borderBottomLeftRadius: 50 } : {},
-                index === relays.length - 1 ? { borderBottomRightRadius: 50 } : {},
-              ]}
-            />
-          </TouchableNativeFeedback>
-        ))}
+        {relayColouring &&
+          relays.map((relay, index) => (
+            <TouchableNativeFeedback
+              onPress={() => setDisplayrelayDrawer(relay.relay_url)}
+              key={relay.relay_url}
+            >
+              <View
+                style={[
+                  styles.relay,
+                  { backgroundColor: relayToColor(relay.relay_url) },
+                  index === 0 ? { borderBottomLeftRadius: 50 } : {},
+                  index === relays.length - 1 ? { borderBottomRightRadius: 50 } : {},
+                ]}
+              />
+            </TouchableNativeFeedback>
+          ))}
       </Card.Content>
     </Card>
   ) : (

frontend/Constants/Theme/theme-dark.json

@@ -23,7 +23,7 @@
     "surfaceVariant": "#45464F",
     "onSurfaceVariant": "#C6C6D0",
     "outline": "#8F909A",
-    "border":"#00487F",
+    "border": "#00487F",
     "outlineVariant": "#45464F",
     "shadow": "#000000",
     "scrim": "#000000",

frontend/Contexts/AppContext.tsx

@@ -20,6 +20,8 @@ export interface AppContextProps {
   setLanguage: (language: string) => void
   showPublicImages: boolean
   setShowPublicImages: (showPublicImages: boolean) => void
+  relayColouring: boolean
+  setRelayColouring: (relayColouring: boolean) => void
   showSensitive: boolean
   setShowSensitive: (showPublicImages: boolean) => void
   satoshi: 'kebab' | 'sats'
@@ -54,6 +56,8 @@ export const initialAppContext: AppContextProps = {
     )?.split('_')[0] ?? 'en',
   setLanguage: () => {},
   showSensitive: false,
+  setRelayColouring: () => {},
+  relayColouring: true,
   setShowSensitive: () => {},
   satoshi: 'kebab',
   setSatoshi: () => {},
@@ -73,6 +77,9 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.E
     initialAppContext.showPublicImages,
   )
   const [showSensitive, setShowSensitive] = React.useState<boolean>(initialAppContext.showSensitive)
+  const [relayColouring, setRelayColouring] = React.useState<boolean>(
+    initialAppContext.relayColouring,
+  )
   const [language, setLanguage] = React.useState<string>(initialAppContext.language)
   const [imageHostingService, setImageHostingService] = React.useState<string>(
     initialAppContext.imageHostingService,
@@ -134,6 +141,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.E
           last_notification_seen_at: 0,
           last_pets_at: 0,
           language: initialAppContext.language,
+          relay_coloruring: initialAppContext.relayColouring,
         }
         SInfo.setItem('config', JSON.stringify(config), {})
       }
@@ -177,6 +185,8 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.E
   return (
     <AppContext.Provider
       value={{
+        relayColouring,
+        setRelayColouring,
         displayUserDrawer,
         setDisplayUserDrawer,
         language,

frontend/Locales/de.json

@@ -69,7 +69,8 @@
       "satoshi": "Satoshi Symbol",
       "imageHostingService": "Bilder Hosting Service",
       "random": "zufällig",
-      "language": "Language"
+      "language": "Language",
+      "relayColoruring": "Relay coloruring"
     },
     "noteCard": {
       "answering": "{{pubkey}} antworten",
@@ -249,7 +250,7 @@
     "language": {
       "en": "English",
       "es": "Español",
-      "fr": "François",
+      "fr": "Français",
       "ru": "Русский",
       "de": "Deutsch"
     },

frontend/Locales/en.json

@@ -69,7 +69,8 @@
       "satoshi": "Satoshi symbol",
       "imageHostingService": "Image hosting service",
       "random": "Random",
-      "language": "Language"
+      "language": "Language",
+      "relayColoruring": "Relay coloruring"
     },
     "noteCard": {
       "answering": "Answer to {{pubkey}}",
@@ -263,7 +264,7 @@
     "language": {
       "en": "English",
       "es": "Español",
-      "fr": "François",
+      "fr": "Français",
       "ru": "Русский",
       "de": "Deutsch"
     },

frontend/Locales/es.json

@@ -69,7 +69,8 @@
       "satoshi": "Símbolo de satoshi",
       "imageHostingService": "Servicio de subida de imágenes",
       "random": "Aleatorio",
-      "language": "Idioma"
+      "language": "Idioma",
+      "relayColoruring": "Coloreado de relays"
     },
     "noteCard": {
       "answering": "Responder a {{pubkey}}",
@@ -249,7 +250,7 @@
     "language": {
       "en": "English",
       "es": "Español",
-      "fr": "François",
+      "fr": "Français",
       "ru": "Русский",
       "de": "Deutsch"
     },

frontend/Locales/fr.json

@@ -61,7 +61,7 @@
     "language": {
       "en": "English",
       "es": "Español",
-      "fr": "François",
+      "fr": "Français",
       "ru": "Русский",
       "de": "Deutsch"
     },
@@ -70,7 +70,8 @@
       "showSensitive": "Montrer les notes sensibles",
       "satoshi": "Symbole de satoshi",
       "imageHostingService": "Image hosting service",
-      "language": "Langue"
+      "language": "Langue",
+      "relayColoruring": "Relay coloruring"
     },
     "noteCard": {
       "answering": "Répondre à {{pubkey}}",

frontend/Locales/ru.json

@@ -69,7 +69,8 @@
       "showSensitive": "Show sensitive notes",
       "satoshi": "Satoshi symbol",
       "random": "Random",
-      "language": "Язык"
+      "language": "Язык",
+      "relayColoruring": "Relay coloruring"
     },
     "noteCard": {
       "answering": "Ответить {{pubkey}}",
@@ -248,7 +249,7 @@
     "language": {
       "en": "English",
       "es": "Español",
-      "fr": "François",
+      "fr": "Français",
       "ru": "Русский",
       "de": "Deutsch"
     },

frontend/Pages/ConfigPage/index.tsx

@@ -15,6 +15,7 @@ export interface Config {
   last_pets_at: number
   image_hosting_service: string
   language: string
+  relay_coloruring: boolean
 }
 
 export const ConfigPage: React.FC = () => {
@@ -32,6 +33,8 @@ export const ConfigPage: React.FC = () => {
     setImageHostingService,
     language,
     setLanguage,
+    relayColouring,
+    setRelayColouring,
   } = React.useContext(AppContext)
   const bottomSheetSatoshiRef = React.useRef<RBSheet>(null)
   const bottomSheetImageHostingRef = React.useRef<RBSheet>(null)
@@ -155,6 +158,22 @@ export const ConfigPage: React.FC = () => {
           />
         )}
       />
+      <List.Item
+        title={t('configPage.relayColoruring')}
+        right={() => (
+          <Switch
+            value={relayColouring}
+            onValueChange={(value) => {
+              setRelayColouring(value)
+              SInfo.getItem('config', {}).then((result) => {
+                const config: Config = JSON.parse(result)
+                config.relay_coloruring = value
+                SInfo.setItem('config', JSON.stringify(config), {})
+              })
+            }}
+          />
+        )}
+      />
       <List.Item
         title={t('configPage.language')}
         onPress={() => bottomSheetLanguageRef.current?.open()}
@@ -169,7 +188,7 @@ export const ConfigPage: React.FC = () => {
         title={t('configPage.imageHostingService')}
         onPress={() => bottomSheetImageHostingRef.current?.open()}
         right={() => (
-          <Text style={{color: theme.colors.onSurfaceVariant}}>
+          <Text style={{ color: theme.colors.onSurfaceVariant }}>
             {imageHostingServices[imageHostingService]?.uri ??
               t(`configPage.${imageHostingService}`)}
           </Text>

frontend/Pages/NotePage/index.tsx

@@ -12,6 +12,7 @@ import { UserContext } from '../../Contexts/UserContext'
 import { navigate } from '../../lib/Navigation'
 import { useFocusEffect } from '@react-navigation/native'
 import { SkeletonNote } from '../../Components/SkeletonNote/SkeletonNote'
+import { ScrollView } from 'react-native-gesture-handler'
 
 interface NotePageProps {
   route: { params: { noteId: string } }
@@ -101,18 +102,20 @@ export const NotePage: React.FC<NotePageProps> = ({ route }) => {
 
   return note ? (
     <View>
-      <NoteCard note={note} />
-      <View style={[styles.list, { borderColor: theme.colors.onSecondary }]}>
-        <FlashList
-          estimatedItemSize={200}
-          showsVerticalScrollIndicator={false}
-          data={replies}
-          renderItem={renderItem}
-          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
-          refreshing={refreshing}
-          horizontal={false}
-        />
-      </View>
+      <ScrollView>
+        <NoteCard note={note} />
+        <View style={[styles.list, { borderColor: theme.colors.onSecondary }]}>
+          <FlashList
+            estimatedItemSize={200}
+            showsVerticalScrollIndicator={false}
+            data={replies}
+            renderItem={renderItem}
+            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+            refreshing={refreshing}
+            horizontal={false}
+          />
+        </View>
+      </ScrollView>
       {privateKey && (
         <AnimatedFAB
           style={[styles.fabSend, { top: Dimensions.get('window').height - 160 }]}

frontend/Pages/RelaysPage/index.tsx

@@ -170,7 +170,7 @@ export const RelaysPage: React.FC = () => {
               <Text style={styles.title} variant='titleMedium'>
                 {t('relaysPage.myList')}
               </Text>
-              <Divider/>
+              <Divider />
             </View>
             <FlatList
               showsVerticalScrollIndicator={false}
@@ -183,7 +183,7 @@ export const RelaysPage: React.FC = () => {
           <Text style={styles.title} variant='titleMedium'>
             {t('relaysPage.recommended')}
           </Text>
-          <Divider/>
+          <Divider />
         </View>
         <FlatList
           showsVerticalScrollIndicator={false}

frontend/Pages/SendPage/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { FlatList, ListRenderItem, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { AppContext } from '../../Contexts/AppContext'
 import { Event } from '../../lib/nostr/Events'
 import { useTranslation } from 'react-i18next'
@@ -13,7 +13,6 @@ import { Asset, launchImageLibrary } from 'react-native-image-picker'
 import {
   Button,
   Card,
-  Divider,
   IconButton,
   Snackbar,
   Switch,
@@ -61,19 +60,18 @@ export const SendPage: React.FC<SendPageProps> = ({ route }) => {
     const match = text.match(/.*@(.*)$/)
     const note: Note | undefined = route.params?.note
     if (database && match && match?.length > 0) {
-      let request = getUsers(database, { name: match[1], order: 'contact DESC,name ASC' })
-
       if (match[1] === '' && note) {
         const taggedPubKeys = getTaggedPubKeys(note)
-        request = getUsers(database, {
+        getUsers(database, {
           includeIds: [...taggedPubKeys, note.pubkey],
-          order: 'contact DESC,name ASC',
+        }).then((results) => {
+          if (results) setUserSuggestions(results.filter((item) => item.id !== publicKey))
+        })
+      } else {
+        getUsers(database, { name: match[1] }).then((results) => {
+          if (results) setUserSuggestions(results.filter((item) => item.id !== publicKey))
         })
       }
-
-      request.then((results) => {
-        setUserSuggestions(results.filter((item) => item.id !== publicKey))
-      })
     } else {
       setUserSuggestions([])
     }
@@ -180,7 +178,7 @@ export const SendPage: React.FC<SendPageProps> = ({ route }) => {
     setUserSuggestions([])
   }
 
-  const renderContactItem: ListRenderItem<User> = ({ item, index }) => (
+  const renderContactItem: (item: User, index: number) => JSX.Element = (item, index) => (
     <TouchableRipple onPress={() => addUserMention(item)}>
       <View key={index} style={styles.contactRow}>
         <ProfileData
@@ -216,7 +214,7 @@ export const SendPage: React.FC<SendPageProps> = ({ route }) => {
 
   return (
     <>
-      <View style={[styles.textInputContainer, { paddingBottom: note ? 200 : 10 }]}>
+      <View style={[styles.textInputContainer, { paddingBottom: note ? 230 : 10 }]}>
         {note && (
           <View style={styles.noteCard}>
             <NoteCard
@@ -245,12 +243,7 @@ export const SendPage: React.FC<SendPageProps> = ({ route }) => {
       <View style={styles.actions}>
         {userSuggestions.length > 0 ? (
           <View style={styles.contactsList}>
-            <FlatList
-              data={userSuggestions}
-              renderItem={renderContactItem}
-              ItemSeparatorComponent={Divider}
-              horizontal={false}
-            />
+            {userSuggestions.map((user, index) => renderContactItem(user, index))}
           </View>
         ) : (
           <View style={{ backgroundColor: theme.colors.elevation.level1 }}>
@@ -356,7 +349,7 @@ const styles = StyleSheet.create({
   },
   contactsList: {
     bottom: 0,
-    maxHeight: 200,
+    height: 200,
   },
   contactRow: {
     paddingLeft: 16,