feat: afficher les commentaires (locaux et Mastodon)

components/teks/__tests__/komante.test.jsx

@@ -0,0 +1,37 @@
+import {describe, it, expect} from 'vitest'
+import {render, screen} from '@testing-library/react'
+import Komante from '../komante'
+
+describe('Komante', () => {
+  it('ne rend rien quand il n\'y a aucun commentaire', () => {
+    const {container} = render(<Komante commentaires={[]} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('affiche un commentaire local avec le pseudo pawol.nu', () => {
+    render(<Komante commentaires={[
+      {id: 1, contenu: 'Bèl tèks', origine: 'local', user: {username: 'foo'}}
+    ]} />)
+
+    expect(screen.getByText('foo')).toBeInTheDocument()
+    expect(screen.getByText('Bèl tèks')).toBeInTheDocument()
+    expect(screen.queryByText('Mastodon')).not.toBeInTheDocument()
+  })
+
+  it('affiche un commentaire fédéré avec le badge et le lien Mastodon', () => {
+    render(<Komante commentaires={[{
+      id: 2,
+      contenu: 'Trè bèl',
+      origine: 'activitypub',
+      auteurNom: 'Quelqu\'un',
+      auteurHandle: '@quelqun@mastodon.social',
+      auteurProfilUrl: 'https://mastodon.social/@quelqun',
+      remoteUrl: 'https://bokante.o-k-i.net/@quelqun/1'
+    }]} />)
+
+    expect(screen.getByText('Quelqu\'un')).toBeInTheDocument()
+    expect(screen.getByText('Mastodon')).toBeInTheDocument()
+    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')
+  })
+})

components/teks/an-teks.js

@@ -8,7 +8,6 @@ export default function AnTeks({parole, paroleId}) {
     <Teks
       parole={parole}
       paroleId={paroleId}
-      commentaires={parole?.commentaires}
     />
   )
 }

components/teks/komante.jsx

@@ -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
+}

components/teks/teks.js

@@ -29,6 +29,7 @@ import {StreamButton} from '../streaming-buttons'
 import EntegreMizik from './entegre-mizik'
 import OkiMizik from './oki-mizik'
 import DiferansDialog from './diferans-dialog'
+import Komante from './komante'
 import {useCurrentTrack} from './current-track-context'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
@@ -281,6 +282,7 @@ export default function Teks({parole}) {
           )
         ))}
       </Box>
+      <Komante commentaires={parole.commentaires} />
     </Root>
   )
 }