commit 28e513c1e584b9806bd390f8ce5b13e758dfda9e · gmstn.systems/gemstone-app

+37 -34

src/components/Chat/index.tsx

···

       1
       1
        
       import { Message } from "@/components/Chat/Message";

     

       2
       2
        
       import { Loading } from "@/components/primitives/Loading";

     

       3
       3
        
       import { Text } from "@/components/primitives/Text";

     

       4
       4
       +
       import { useFacet } from "@/lib/facet";

     

       4
       5
        
       import { useChannel } from "@/lib/hooks/useChannel";

     

       5
       6
        
       import type { AtUri } from "@/lib/types/atproto";

     

       6
       7
        
       import { useProfile } from "@/providers/authed/ProfileProvider";

     

       7
       8
        
       import { useCurrentPalette } from "@/providers/ThemeProvider";

     

       9
       9
       +
       import { ArrowUp } from "lucide-react-native";

     

       8
       10
        
       import { useState } from "react";

     

       9
       11
        
       import {

     

       10
       12
        
           View,

     

       11
       13
        
           TextInput,

     

       12
       14
        
           TouchableOpacity,

     

       13
       13
       -
           ScrollView,

     

       14
       15
        
           Image,

     

       15
       16
        
           FlatList,

     

       16
       17
        
       } from "react-native";

     
···

       20
       21
        
           const { messages, sendMessageToChannel, isConnected } =

     

       21
       22
        
               useChannel(channelAtUri);

     

       22
       23
        
           const { semantic } = useCurrentPalette();

     

       24
       24
       +
           const { typography, atoms } = useFacet();

     

       23
       25
        
       

     

       24
       26
        
           const handleSend = () => {

     

       25
       27
        
               if (inputText.trim()) {

     
···

       50
       52
        
                                   justifyContent: "space-between",

     

       51
       53
        
                                   padding: 16,

     

       52
       54
        
                                   borderBottomWidth: 1,

     

       53
       53
       -
                                   borderBottomColor: semantic.border,

     

       55
       55
       +
                                   borderBottomColor: semantic.borderVariant,

     

       54
       56
        
                                   alignItems: "center",

     

       55
       57
        
                               }}

     

       56
       58
        
                           >

     
···

       62
       64
        
                                       style={{

     

       63
       65
        
                                           width: 32,

     

       64
       66
        
                                           height: 32,

     

       65
       65
       -
                                           borderRadius: 2000000000,

     

       67
       67
       +
                                           borderRadius: atoms.radii.full,

     

       66
       68
        
                                       }}

     

       67
       69
        
                                       source={{ uri: profile.avatar }}

     

       68
       70
        
                                   />

     
···

       74
       76
        
                       style={{

     

       75
       77
        
                           padding: 16,

     

       76
       78
        
                           borderBottomWidth: 1,

     

       77
       77
       -
                           borderBottomColor: semantic.border,

     

       79
       79
       +
                           borderBottomColor: semantic.borderVariant,

     

       78
       80
        
                       }}

     

       79
       81
        
                   >

     

       80
       82
        
                       <Text

     
···

       89
       91
        
       

     

       90
       92
        
                   <FlatList

     

       91
       93
        
                       inverted

     

       92
       92
       -
                       data={messages}

     

       94
       94
       +
                       data={messages.toReversed()}

     

       93
       95
        
                       renderItem={({ item }) => <Message message={item} />}

     

       94
       94
       -
                       keyExtractor={(item, index) => index.toString()}

     

       96
       96
       +
                       keyExtractor={(_, index) => index.toString()}

     

       95
       97
        
                       contentContainerStyle={{

     

       96
       96
       -
                           padding: 16,

     

       98
       98
       +
                           paddingLeft: 20,

     

       99
       99
       +
                           flex: 1,

     

       100
       100
       +
                           gap: 2,

     

       97
       101
        
                       }}

     

       98
       98
       -
                       style={{ flex: 1 }}

     

       102
       102
       +
                       showsVerticalScrollIndicator={false}

     

       99
       103
        
                   />

     

       100
       104
        
       

     

       101
       105
        
                   <View

     

       102
       106
        
                       style={{

     

       103
       107
        
                           flexDirection: "row",

     

       104
       108
        
                           padding: 16,

     

       105
       105
       -
                           borderTopWidth: 1,

     

       106
       106
       -
                           borderTopColor: semantic.border,

     

       109
       109
       +
                           alignItems: "center",

     

       107
       110
        
                       }}

     

       108
       111
        
                   >

     

       109
       112
        
                       <TextInput

     

       110
       110
       -
                           style={{

     

       111
       111
       -
                               flex: 1,

     

       112
       112
       -
                               borderWidth: 1,

     

       113
       113
       -
                               borderColor: semantic.border,

     

       114
       114
       -
                               borderRadius: 8,

     

       115
       115
       -
                               paddingHorizontal: 12,

     

       116
       116
       -
                               paddingVertical: 8,

     

       117
       117
       -
                               marginRight: 8,

     

       118
       118
       -
                               fontSize: 16,

     

       119
       119
       -
                               color: semantic.text,

     

       120
       120
       -
                           }}

     

       113
       113
       +
                           style={[

     

       114
       114
       +
                               {

     

       115
       115
       +
                                   flex: 1,

     

       116
       116
       +
                                   borderWidth: 1,

     

       117
       117
       +
                                   borderColor: semantic.border,

     

       118
       118
       +
                                   borderRadius: 8,

     

       119
       119
       +
                                   paddingHorizontal: 12,

     

       120
       120
       +
                                   paddingVertical: 10,

     

       121
       121
       +
                                   marginRight: 8,

     

       122
       122
       +
                                   color: semantic.text,

     

       123
       123
       +
                                   outline: "0",

     

       124
       124
       +
                               },

     

       125
       125
       +
                               typography.sizes.base,

     

       126
       126
       +
                           ]}

     

       121
       127
        
                           value={inputText}

     

       122
       128
        
                           onChangeText={setInputText}

     

       123
       129
        
                           placeholder="boop"

     

       124
       130
        
                           placeholderTextColor={semantic.textTertiary}

     

       125
       131
        
                           onSubmitEditing={handleSend}

     

       132
       132
       +
                           // eslint-disable-next-line @typescript-eslint/no-deprecated -- can't get it working with the new prop.

     

       133
       133
       +
                           blurOnSubmit={false}

     

       126
       134
        
                       />

     

       127
       135
        
                       <TouchableOpacity

     

       128
       136
        
                           style={{

     

       129
       129
       -
                               backgroundColor: semantic.primary,

     

       130
       130
       -
                               paddingHorizontal: 20,

     

       131
       131
       -
                               paddingVertical: 10,

     

       132
       132
       -
                               borderRadius: 8,

     

       137
       137
       +
                               backgroundColor: inputText.trim()

     

       138
       138
       +
                                   ? semantic.primary

     

       139
       139
       +
                                   : semantic.border,

     

       140
       140
       +
                               borderRadius: atoms.radii.full,

     

       133
       141
        
                               justifyContent: "center",

     

       142
       142
       +
                               height: 36,

     

       143
       143
       +
                               width: 36,

     

       144
       144
       +
                               alignItems: "center",

     

       134
       145
        
                           }}

     

       135
       146
        
                           onPress={handleSend}

     

       136
       147
        
                           disabled={!isConnected}

     

       137
       148
        
                       >

     

       138
       138
       -
                           <Text

     

       139
       139
       -
                               style={{

     

       140
       140
       -
                                   color: semantic.textInverse,

     

       141
       141
       -
                                   fontSize: 16,

     

       142
       142
       -
                                   fontWeight: "600",

     

       143
       143
       -
                               }}

     

       144
       144
       -
                           >

     

       145
       145
       -
                               Send

     

       146
       146
       -
                           </Text>

     

       149
       149
       +
                           <ArrowUp height={20} width={20} />

     

       147
       150
        
                       </TouchableOpacity>

     

       148
       151
        
                   </View>

     

       149
       152
        
               </View>

src/components/Navigation/ChannelsPicker/index.tsx

···

       43
       43
        
                       padding: 12,

     

       44
       44
        
                       paddingTop: 6,

     

       45
       45
        
                       borderTopRightRadius: atoms.radii.xl,

     

       46
       46
       +
                       minWidth: 200,

     

       46
       47
        
                   }}

     

       47
       48
        
               >

     

       48
       49
        
                   {spaces.map((space) => (