Make LHN rows look the same as chatswitcher ones

[Gonals]

@shawnborton, can you review (although I have reused the ChatSwitcher file, so the styles should be fine)?
@marcaaron, can you review? Any reason we might want to keep these two in separate files?

Instead of applying the styles to SideBarLink.js, I decided, instead, to use ChatSwitcherRow (now renamed to ChatLinkRow in both places, since we'll likely always want to keep the same format in both places and it just required a few changes.

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/144292

Tests/QA

1. Open Native Chat and open a few chats in the LHN (you might need to pin them). Single-participant DMs should show the icon, the name of the person (if they have one set) and the login below. Reports should show the report's name and group DMs, a list of the participants' names (basically, the same as the chat switcher):

2. Make sure receiving a message correctly bolds the row in the LHN:

3. Make sure ChatSwitcher still works correctly. 4. Check that 1-3 are all true across platforms

[shawnborton]

Lookin' pretty good! One small thing though - when a chat row is unread, the email address part should not be bold and white, it should stay as it is:

[marcaaron]

Gonna tag in pullerbear on this one since I am leaving for a week + and won't have time to stick with this.

[marcaaron]

Maybe just ChatRow would be good enough.

[Gonals]

I thought about it, but it felt like a row in the chat itself, instead of a row with a chat 🤷

[Gonals]

Lookin' pretty good! One small thing though - when a chat row is unread, the email address part should not be bold and white, it should stay as it is:

Like this?

[shawnborton]

@Gonals looks like the screenshot didn't quite come through - mind re-uploading?

[Gonals]

@Gonals looks like the screenshot didn't quite come through - mind re-uploading?
Sure thing (but I updated it in the main post too!)

[Gonals]

@robertjchen, @roryabraham, bumping this!

[roryabraham]

LGTM

[roryabraham]

You don't have to do this in this PR if you don't want to, but react-native-web v14 was just released and offers support for hover states on pressables like so:

<Pressable
  children={
    ({ pressed, hovered, focused }) => {}
  }
  style={
    ({ pressed, hovered, focused }) => {}
  }
/>

And it would be awesome if the chat switcher automatically focused the ChatLinkRow that's hovered.

[robertjchen]

Looks great! 👍

[Gonals]

You don't have to do this in this PR if you don't want to, but react-native-web v14 was just released and offers support for hover states on pressables like so:

<Pressable
  children={
    ({ pressed, hovered, focused }) => {}
  }
  style={
    ({ pressed, hovered, focused }) => {}
  }
/>

And it would be awesome if the chat switcher automatically focused the ChatLinkRow that's hovered.

This is actually really nice! There are big plans for a LHN revamp, though, so I'll probably wait till that's decided!

[tgolen]

Lint warnings/errors will show up on everyone's PRs, so we should avoid merging code that has them. @Gonals Can you submit a PR to have these fixed, please?

[tgolen]

FYI, this broke mobile clients because the touchable opacity is on top of the pressable link and this prevents the link from triggering a router change.