feat: mettre en valeur les mentions et afficher l'heure des commentaires

components/teks/__tests__/komante.test.jsx

@@ -34,4 +34,18 @@ describe('Komante', () => {
     expect(screen.getByRole('link', {name: 'Quelqu\'un'})).toHaveAttribute('href', 'https://mastodon.social/@quelqun')
     expect(screen.getByRole('link', {name: /voir sur mastodon/i})).toHaveAttribute('href', 'https://bokante.o-k-i.net/@quelqun/1')
   })
+
+  it('met en valeur les mentions @ dans le contenu', () => {
+    render(<Komante commentaires={[{
+      id: 3,
+      contenu: '@pawol_nu oh oh ye ye, avec @cybermawonaj@bokante.o-k-i.net aussi',
+      origine: 'activitypub',
+      auteurNom: 'Quelqu\'un'
+    }]} />)
+
+    const mansyon = screen.getByText('@pawol_nu')
+    expect(mansyon).toBeInTheDocument()
+    expect(screen.getByText('@cybermawonaj@bokante.o-k-i.net')).toBeInTheDocument()
+    expect(screen.getByText(/oh oh ye ye/)).toBeInTheDocument()
+  })
 })

components/teks/komante.jsx

@@ -24,7 +24,21 @@ function formatDat(commentaire) {
     return null
   }
 
-  return format(new Date(commentaire.datePublication), 'P', {locale: fr})
+  return format(new Date(commentaire.datePublication), 'Pp', {locale: fr})
+}
+
+const MENTION_REGEX = /(?:@[\w.-]+){1,2}/g
+
+function metanValèMansyon(contenu) {
+  const mansyon = contenu.match(MENTION_REGEX) || []
+  return contenu.split(MENTION_REGEX).flatMap((moso, index) => (
+    mansyon[index] ? [
+      moso,
+      <Box key={index} component='span' sx={{color: 'primary.main', fontWeight: 700}}>
+        {mansyon[index]}
+      </Box>
+    ] : [moso]
+  ))
 }
 
 export default function Komante({commentaires}) {
@@ -56,7 +70,7 @@ export default function Komante({commentaires}) {
             >
               <Avatar src={commentaire.auteurAvatarUrl} alt={auteur} />
               <Box sx={{flex: 1, minWidth: 0}}>
-                <Stack direction='row' alignItems='center' justifyContent='space-between' flexWrap='wrap' rowGap={0.5}>
+                <Stack direction='row' alignItems='center' flexWrap='wrap' rowGap={0.5}>
                   <Stack direction='row' alignItems='center' spacing={1}>
                     <Typography variant='subtitle2' component='div'>
                       {estFedere && commentaire.auteurProfilUrl ? (
@@ -74,12 +88,12 @@ export default function Komante({commentaires}) {
                     )}
                   </Stack>
                   {dat && (
-                    <Typography variant='caption' color='text.secondary'>
+                    <Typography variant='caption' color='text.secondary' sx={{ml: 'auto', pl: 2}}>
                       {dat}
                     </Typography>
                   )}
                 </Stack>
-                <Typography variant='body2' sx={{mt: 0.5}}>{commentaire.contenu}</Typography>
+                <Typography variant='body2' sx={{mt: 0.5}}>{metanValèMansyon(commentaire.contenu)}</Typography>
                 {estFedere && commentaire.remoteUrl && (
                   <Link href={commentaire.remoteUrl} target='_blank' rel='noopener noreferrer'>
                     <Typography variant='caption' color='text.secondary'>Voir sur Mastodon</Typography>