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

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>