feat: refonte visuelle des commentaires (cartes, compteur, date)

components/teks/komante.jsx

@@ -2,10 +2,13 @@
 
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
 import Avatar from '@mui/material/Avatar'
 import Typography from '@mui/material/Typography'
 import Chip from '@mui/material/Chip'
 import Link from 'next/link'
+import {format} from 'date-fns'
+import {fr} from 'date-fns/locale'
 import {Mastodon} from '@icons-pack/react-simple-icons'
 
 function formatAuteur(commentaire) {
@@ -16,6 +19,14 @@ function formatAuteur(commentaire) {
   return commentaire.user?.username || 'Anonim'
 }
 
+function formatDat(commentaire) {
+  if (!commentaire.datePublication) {
+    return null
+  }
+
+  return format(new Date(commentaire.datePublication), 'P', {locale: fr})
+}
+
 export default function Komante({commentaires}) {
   if (!commentaires || commentaires.length === 0) {
     return null
@@ -24,41 +35,61 @@ export default function Komante({commentaires}) {
   return (
     <Box sx={{maxWidth: 700, margin: '2em auto 0'}}>
       <Typography gutterBottom variant='h6'>
-        Komantè
+        Komantè ({commentaires.length})
       </Typography>
-      {commentaires.map(commentaire => {
-        const auteur = formatAuteur(commentaire)
-        const estFedere = commentaire.origine === 'activitypub'
+      <Stack spacing={1.5}>
+        {commentaires.map(commentaire => {
+          const auteur = formatAuteur(commentaire)
+          const estFedere = commentaire.origine === 'activitypub'
+          const dat = formatDat(commentaire)
 
-        return (
-          <Box key={commentaire.id} sx={{display: 'flex', gap: 1.5, mb: 2}}>
-            <Avatar src={commentaire.auteurAvatarUrl} alt={auteur} />
-            <Box sx={{flex: 1}}>
-              <Typography variant='subtitle2' component='div'>
-                {estFedere && commentaire.auteurProfilUrl ? (
-                  <Link href={commentaire.auteurProfilUrl} target='_blank' rel='noopener noreferrer'>
-                    {auteur}
+          return (
+            <Box
+              key={commentaire.id}
+              sx={{
+                display: 'flex',
+                gap: 1.5,
+                p: 2,
+                borderRadius: 2,
+                bgcolor: 'action.hover'
+              }}
+            >
+              <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' spacing={1}>
+                    <Typography variant='subtitle2' component='div'>
+                      {estFedere && commentaire.auteurProfilUrl ? (
+                        <Link href={commentaire.auteurProfilUrl} target='_blank' rel='noopener noreferrer'>
+                          {auteur}
+                        </Link>
+                      ) : auteur}
+                    </Typography>
+                    {estFedere && (
+                      <Chip
+                        label='Mastodon'
+                        size='small'
+                        icon={<Mastodon size={14} color='#6364FF' title='' />}
+                      />
+                    )}
+                  </Stack>
+                  {dat && (
+                    <Typography variant='caption' color='text.secondary'>
+                      {dat}
+                    </Typography>
+                  )}
+                </Stack>
+                <Typography variant='body2' sx={{mt: 0.5}}>{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>
                   </Link>
-                ) : auteur}
-                {estFedere && (
-                  <Chip
-                    label='Mastodon'
-                    size='small'
-                    icon={<Mastodon size={14} color='#6364FF' title='' />}
-                    sx={{ml: 1}}
-                  />
                 )}
-              </Typography>
-              <Typography variant='body2'>{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>
-                </Link>
-              )}
+              </Box>
             </Box>
-          </Box>
-        )
-      })}
+          )
+        })}
+      </Stack>
     </Box>
   )
 }