commit 7ee4af66193dda14c6ea26211094f515e68cd2c1 · gmstn.systems/gemstone-app

+42 -16

src/components/Chat/Message.tsx

···

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

     

       2
        
       import { Avatar } from "@/components/Profile/Avatar";

     

       0
        
       
     

       0
        
       
     

       3
        
       import type { ShardMessage } from "@/lib/types/messages";

     

       0
        
       
     

       0
        
       
     

       4
        
       import { View } from "react-native";

     

       5
        
       

     

       6
        
       export const Message = ({ message }: { message: ShardMessage }) => {

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       7
        
           return (

     

       8
        
               <View

     

       9
        
                   style={{

     

       10
        
                       display: "flex",

     

       11
        
                       flexDirection: "row",

     

       12
        
                       justifyContent: "flex-start",

     

       13
       -
                       alignItems: "flex-end",

     

       14
        
                   }}

     

       15
        
               >

     

       16
        
                   <Avatar did={message.sentBy} />

     

       17
        
                   <View

     

       18
        
                       style={{

     

       19
       -
                           marginBottom: 12,

     

       20
       -
                           padding: 12,

     

       21
        
                           borderRadius: 8,

     

       22
        
                       }}

     

       23
        
                   >

     

       24
       -
                       <Text

     

       25
        
                           style={{

     

       26
       -
                               fontSize: 16,

     

       27
       -
                               marginBottom: 4,

     

       28
       -
                           }}

     

       29
       -
                       >

     

       30
       -
                           {message.content}

     

       31
       -
                       </Text>

     

       32
       -
                       <Text

     

       33
       -
                           style={{

     

       34
       -
                               fontSize: 12,

     

       35
       -
                               color: "#666",

     

       36
        
                           }}

     

       37
        
                       >

     

       38
       -
                           {new Date(message.sentAt).toLocaleTimeString()}

     

       39
       -
                       </Text>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       40
        
                   </View>

     

       41
        
               </View>

     

       42
        
           );

···

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

     

       2
        
       import { Avatar } from "@/components/Profile/Avatar";

     

       3
       +
       import { Name } from "@/components/Profile/Name";

     

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

     

       5
        
       import type { ShardMessage } from "@/lib/types/messages";

     

       6
       +
       import { useCurrentPalette } from "@/providers/ThemeProvider";

     

       7
       +
       import { format } from "date-fns";

     

       8
        
       import { View } from "react-native";

     

       9
        
       

     

       10
        
       export const Message = ({ message }: { message: ShardMessage }) => {

     

       11
       +
           const { typography } = useFacet();

     

       12
       +
           const { semantic } = useCurrentPalette()

     

       13
       +
       

     

       14
       +
           const sentAtString = format(new Date(message.sentAt), "h:mm aaa");

     

       15
       +
       

     

       16
        
           return (

     

       17
        
               <View

     

       18
        
                   style={{

     

       19
        
                       display: "flex",

     

       20
        
                       flexDirection: "row",

     

       21
        
                       justifyContent: "flex-start",

     

       22
       +
                       alignItems: "flex-start",

     

       23
        
                   }}

     

       24
        
               >

     

       25
        
                   <Avatar did={message.sentBy} />

     

       26
        
                   <View

     

       27
        
                       style={{

     

       28
       +
                           paddingLeft: 12,

     

       0
        
       
     

       29
        
                           borderRadius: 8,

     

       30
        
                       }}

     

       31
        
                   >

     

       32
       +
                       <View

     

       33
        
                           style={{

     

       34
       +
                               flex: 1,

     

       35
       +
                               flexDirection: "row",

     

       36
       +
                               alignItems: "center",

     

       37
       +
                               gap: 4,

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       38
        
                           }}

     

       39
        
                       >

     

       40
       +
                           <Name did={message.sentBy} />

     

       41
       +
                           <Text

     

       42
       +
                               style={{

     

       43
       +
                                   fontSize: 12,

     

       44
       +
                                   color: semantic.textTertiary,

     

       45
       +
                               }}

     

       46
       +
                           >

     

       47
       +
                               {sentAtString}

     

       48
       +
                           </Text>

     

       49
       +
                       </View>

     

       50
       +
                       <View>

     

       51
       +
                           <Text

     

       52
       +
                               style={[

     

       53
       +
                                   {

     

       54
       +
                                       marginBottom: 4,

     

       55
       +
                                   },

     

       56
       +
                                   // @ts-expect-error it's fiiiiiiine

     

       57
       +
                                   {

     

       58
       +
                                       fontWeight: typography.weights.extralight,

     

       59
       +
                                   },

     

       60
       +
                                   typography.sizes.sm,

     

       61
       +
                               ]}

     

       62
       +
                           >

     

       63
       +
                               {message.content}

     

       64
       +
                           </Text>

     

       65
       +
                       </View>

     

       66
        
                   </View>

     

       67
        
               </View>

     

       68
        
           );

+2 -1

src/components/Profile/Name.tsx

···

       27
        
           ) : (

     

       28
        
               profile && (

     

       29
        
                   <Text

     

       30
       -
                       style={{ fontWeight: typography.weights.extralight.toString() }}

     

       0
        
       
     

       31
        
                   >

     

       32
        
                       {profile.displayName ?? profile.handle}

     

       33
        
                   </Text>

···

       27
        
           ) : (

     

       28
        
               profile && (

     

       29
        
                   <Text

     

       30
       +
                       // @ts-expect-error it's fiiiiiiiine

     

       31
       +
                       style={{ fontWeight: typography.weights.normal }}

     

       32
        
                   >

     

       33
        
                       {profile.displayName ?? profile.handle}

     

       34
        
                   </Text>