feat: afficher les commentaires (locaux et Mastodon)

2026-07-04 23:45:27 +04:00
parent b40e2d71b0
commit eda30345c6
7 changed files with 177 additions and 7 deletions
@@ -0,0 +1,62 @@
+'use client'
+
+import PropTypes from 'prop-types'
+import Box from '@mui/material/Box'
+import Avatar from '@mui/material/Avatar'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Link from 'next/link'
+
+function formatAuteur(commentaire) {
+  if (commentaire.origine === 'activitypub') {
+    return commentaire.auteurNom || commentaire.auteurHandle || 'Yon moun'
+  }
+
+  return commentaire.user?.username || 'Anonim'
+}
+
+export default function Komante({commentaires}) {
+  if (!commentaires || commentaires.length === 0) {
+    return null
+  }
+
+  return (
+    <Box sx={{maxWidth: 700, margin: '2em auto 0'}}>
+      <Typography gutterBottom variant='h6'>
+        Komantè
+      </Typography>
+      {commentaires.map(commentaire => {
+        const auteur = formatAuteur(commentaire)
+        const estFedere = commentaire.origine === 'activitypub'
+
+        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}
+                  </Link>
+                ) : auteur}
+                {estFedere && (
+                  <Chip label='Mastodon' size='small' 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>
+  )
+}
+
+Komante.propTypes = {
+  commentaires: PropTypes.array
+}