feat: remplacer les puces par un select groupé par continent

Reviewed-on: #5

.env.sample

@@ -3,7 +3,7 @@ API_URL=http://localhost:1337/api
 NEXT_PUBLIC_API_URL=$API_URL
 NEXT_PUBLIC_API_URL_ROOT=http://localhost:1337
 SITE_URL=http://localhost:3001
-NEXT_PUBLIC_READ_TOKEN=
+API_READ_TOKEN=
 
 # IDENTITÉ DU SITE (branding)
 NEXT_PUBLIC_SITE_NAME=PAWÒL-NU. Paroles et traductions.
@@ -81,6 +81,11 @@ NEXT_PUBLIC_GIT=
 NEXT_PUBLIC_CODEBERG=
 NEXT_PUBLIC_BLUESKY_URL=
 
+# Commentaires fédérés (bokante.o-k-i.net)
+
+NEXT_PUBLIC_BOKANTE_URL=https://bokante.o-k-i.net
+NEXT_PUBLIC_BOKANTE_ACCOUNT=pawol_nu
+
 # DOMAIN IMAGE
 NEXT_PUBLIC_DOMAINS_IMAGE="localhost:1337 strapi.mondomaine.com"
 

.gitea/workflows/check-pr.yml

@@ -39,6 +39,7 @@ jobs:
         username: ${{ secrets.SSH_USER }}
         key: ${{ secrets.SSH_KEY }}
         script: |
+          set -e
           export NVM_DIR="$HOME/.nvm"
           [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
           cd ${{ secrets.FRONT_DEPLOY_PATH }}

.gitea/workflows/deploy-beta.yml

@@ -37,6 +37,7 @@ jobs:
         username: ${{ secrets.SSH_USER }}
         key: ${{ secrets.SSH_KEY }}
         script: |
+          set -e
           export NVM_DIR="$HOME/.nvm"
           [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
           cd ${{ secrets.FRONT_DEPLOY_PATH }}

.gitea/workflows/deploy-prod.yml

@@ -39,6 +39,7 @@ jobs:
         username: ${{ secrets.SSH_USER }}
         key: ${{ secrets.SSH_KEY }}
         script: |
+          set -e
           export NVM_DIR="$HOME/.nvm"
           [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
           cd ${{ secrets.PROD_DEPLOY_PATH }}

README.md

@@ -24,6 +24,24 @@ cp .env.sample .env
 yarn && yarn dev
 ```
 
+## Commentaires fédérés (Mastodon / bokante.o-k-i.net)
+
+Les commentaires sous une parole peuvent provenir d'un compte pawol.nu ou du Fediverse
+(réponses reçues sur le statut miroir publié sur bokante.o-k-i.net par le backend). Un
+bouton permet de répondre directement depuis son propre compte Mastodon, quelle que soit
+son instance, via `authorize_interaction` — aucun compte pawol.nu requis.
+
+**Variables d'environnement :**
+
+| Variable | Description |
+|---|---|
+| `NEXT_PUBLIC_BOKANTE_URL` | Instance Mastodon de l'organisation (défaut : `https://bokante.o-k-i.net`) |
+| `NEXT_PUBLIC_BOKANTE_ACCOUNT` | Compte bot dont les statuts servent de miroir (défaut : `pawol_nu`) |
+
+Voir le RFC dédié pour le détail de la conception
+(`RFC-commentaires-activitypub-2026-07-04.md`, à la racine du dossier `PAWOL.NU`) et le
+`README.md` de `api.pawol.nu` pour la configuration côté backend.
+
 ## License
 
 Copyright (C) 2020 - 2026 Cédric Famibelle-Pronzola & ORGANISATION KA INTERNATIONALE (OKI)

app/api/awtis/__tests__/route.test.js

@@ -0,0 +1,23 @@
+import {describe, it, expect, vi, afterEach} from 'vitest'
+import {jwennToutAwtis} from '../../../../lib/oki-api'
+import {GET} from '../route'
+
+vi.mock('../../../../lib/oki-api', () => ({
+  jwennToutAwtis: vi.fn()
+}))
+
+describe('GET /api/awtis', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renvoie les données de jwennToutAwtis en JSON, sans exposer de jeton', async () => {
+    jwennToutAwtis.mockResolvedValue({data: [{id: 1, alias: 'Foo'}], meta: {}})
+
+    const response = await GET()
+    const body = await response.json()
+
+    expect(body).toEqual({data: [{id: 1, alias: 'Foo'}], meta: {}})
+    expect(JSON.stringify(body)).not.toMatch(/bearer|token/i)
+  })
+})

app/api/awtis/route.js

@@ -0,0 +1,6 @@
+import {jwennToutAwtis} from '../../../lib/oki-api'
+
+export async function GET() {
+  const data = await jwennToutAwtis()
+  return Response.json(data)
+}

app/page.js

@@ -10,6 +10,8 @@ import AnVedette from '../components/akey/an-vedette'
 import Footer from '../components/footer'
 import Aso from '../components/akey/aso'
 
+export const dynamic = 'force-dynamic'
+
 async function jwennDone() {
   const [statistik, denyeTeks, anVedette] = await Promise.all([jwennStats(), jwennDenyeTeks(), jwennAnVedette()])
 

components/awtis/cheche-awtis.js

@@ -7,7 +7,6 @@ import Autocomplete from '@mui/material/Autocomplete'
 import Avatar from '@mui/material/Avatar'
 import Container from '@mui/material/Container'
 
-import {jwennToutAwtis} from '../../lib/oki-api'
 import {formatKuveti} from '../../lib/kuveti'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
@@ -27,7 +26,7 @@ export default function ChecheAwtis() {
 
     (async () => {
       try {
-        const {data} = await jwennToutAwtis()
+        const {data} = await fetch('/api/awtis').then(response => response.json())
 
         const filteredData = data.map(artiste => {
           const firstLetter = artiste.alias[0].toUpperCase()

components/teks/__tests__/komante.test.jsx

@@ -0,0 +1,51 @@
+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')
+  })
+
+  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/__tests__/repons-mastodon.test.jsx

@@ -0,0 +1,55 @@
+import {describe, it, expect, vi, afterEach} from 'vitest'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ReponsMastodon from '../repons-mastodon'
+
+describe('ReponsMastodon', () => {
+  const originalOpen = window.open
+
+  afterEach(() => {
+    window.open = originalOpen
+  })
+
+  it('ne rend rien sans bokanteStatusId', () => {
+    const {container} = render(<ReponsMastodon bokanteStatusId={null} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('affiche un lien direct vers le fil bokante', () => {
+    render(<ReponsMastodon bokanteStatusId='112233' />)
+    const lien = screen.getByRole('link', {name: 'Mastodon'})
+    expect(lien).toHaveAttribute('href', 'https://bokante.o-k-i.net/@pawol_nu/112233')
+  })
+
+  it('redirige vers authorize_interaction avec le domaine extrait d\'un identifiant complet', async () => {
+    window.open = vi.fn()
+    const user = userEvent.setup()
+    render(<ReponsMastodon bokanteStatusId='112233' />)
+
+    await user.click(screen.getByRole('button', {name: /répondre via mastodon/i}))
+    await user.type(screen.getByLabelText(/@vous@votre-instance/i), '@quelqun@mastodon.social')
+    await user.click(screen.getByRole('button', {name: /continuer/i}))
+
+    expect(window.open).toHaveBeenCalledWith(
+      'https://mastodon.social/authorize_interaction?uri=' + encodeURIComponent('https://bokante.o-k-i.net/@pawol_nu/112233'),
+      '_blank',
+      'noopener,noreferrer'
+    )
+  })
+
+  it('accepte aussi juste un nom d\'instance sans @', async () => {
+    window.open = vi.fn()
+    const user = userEvent.setup()
+    render(<ReponsMastodon bokanteStatusId='112233' />)
+
+    await user.click(screen.getByRole('button', {name: /répondre via mastodon/i}))
+    await user.type(screen.getByLabelText(/@vous@votre-instance/i), 'mastodon.social')
+    await user.click(screen.getByRole('button', {name: /continuer/i}))
+
+    expect(window.open).toHaveBeenCalledWith(
+      expect.stringContaining('https://mastodon.social/authorize_interaction'),
+      '_blank',
+      'noopener,noreferrer'
+    )
+  })
+})

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/diferans-dialog.js

@@ -1,9 +1,6 @@
 import React, {forwardRef, useState} from 'react'
 import PropTypes from 'prop-types'
 
-import {format} from 'date-fns'
-import {fr} from 'date-fns/locale'
-
 import Button from '@mui/material/Button'
 import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
@@ -50,7 +47,7 @@ export default function DiferansDialog({difference}) {
         <List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
           {difference.map(({id, admin_user, date, jsonDiff}) => {
             const {firstname} = admin_user
-            const diferansDate = format(new Date(date), 'PPPppp', {locale: fr})
+            const diferansDate = new Intl.DateTimeFormat(undefined, {dateStyle: 'full', timeStyle: 'medium'}).format(new Date(date))
 
             return (
               <React.Fragment key={id}>

components/teks/komante.jsx

@@ -0,0 +1,112 @@
+'use client'
+
+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 {Mastodon} from '@icons-pack/react-simple-icons'
+
+function formatAuteur(commentaire) {
+  if (commentaire.origine === 'activitypub') {
+    return commentaire.auteurNom || commentaire.auteurHandle || 'Yon moun'
+  }
+
+  return commentaire.user?.username || 'Anonim'
+}
+
+function formatDat(commentaire) {
+  if (!commentaire.datePublication) {
+    return null
+  }
+
+  return new Intl.DateTimeFormat(undefined, {dateStyle: 'short', timeStyle: 'short'})
+    .format(new Date(commentaire.datePublication))
+}
+
+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}) {
+  if (!commentaires || commentaires.length === 0) {
+    return null
+  }
+
+  return (
+    <Box sx={{maxWidth: 700, margin: '2em auto 0'}}>
+      <Typography gutterBottom variant='h6'>
+        Komantè ({commentaires.length})
+      </Typography>
+      <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,
+                p: 2,
+                borderRadius: 2,
+                bgcolor: 'action.hover'
+              }}
+            >
+              <Avatar src={commentaire.auteurAvatarUrl} alt={auteur} />
+              <Box sx={{flex: 1, minWidth: 0}}>
+                <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 ? (
+                        <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' sx={{ml: 'auto', pl: 2}}>
+                      {dat}
+                    </Typography>
+                  )}
+                </Stack>
+                <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>
+                  </Link>
+                )}
+              </Box>
+            </Box>
+          )
+        })}
+      </Stack>
+    </Box>
+  )
+}
+
+Komante.propTypes = {
+  commentaires: PropTypes.array
+}

components/teks/repons-mastodon.jsx

@@ -0,0 +1,83 @@
+'use client'
+
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import Link from 'next/link'
+
+const BOKANTE_URL = process.env.NEXT_PUBLIC_BOKANTE_URL || 'https://bokante.o-k-i.net'
+const BOKANTE_ACCOUNT = process.env.NEXT_PUBLIC_BOKANTE_ACCOUNT || 'pawol_nu'
+
+function extraireInstance(saisie) {
+  const valeur = saisie.trim().replace(/^@/, '').replace(/^https?:\/\//, '').replace(/\/$/, '')
+  return valeur.includes('@') ? valeur.split('@').pop() : valeur
+}
+
+export default function ReponsMastodon({bokanteStatusId}) {
+  const [ouvert, setOuvert] = useState(false)
+  const [saisie, setSaisie] = useState('')
+
+  if (!bokanteStatusId) {
+    return null
+  }
+
+  const tootUrl = `${BOKANTE_URL}/@${BOKANTE_ACCOUNT}/${bokanteStatusId}`
+
+  const repondre = () => {
+    const instance = extraireInstance(saisie)
+    if (!instance) {
+      return
+    }
+
+    window.open(`https://${instance}/authorize_interaction?uri=${encodeURIComponent(tootUrl)}`, '_blank', 'noopener,noreferrer')
+    setOuvert(false)
+  }
+
+  return (
+    <Box sx={{maxWidth: 700, margin: '1em auto 0', textAlign: 'center'}}>
+      <Typography variant='body2' sx={{mb: 1}}>
+        Rejoignez la discussion sur{' '}
+        <Link href={tootUrl} target='_blank' rel='noopener noreferrer'>Mastodon</Link>
+      </Typography>
+      <Button variant='outlined' size='small' onClick={() => setOuvert(true)}>
+        Répondre via Mastodon
+      </Button>
+      <Dialog open={ouvert} onClose={() => setOuvert(false)}>
+        <DialogTitle>Répondre depuis votre compte Mastodon</DialogTitle>
+        <DialogContent>
+          <Typography variant='body2' sx={{mb: 2}}>
+            Indiquez votre identifiant (@vous@votre-instance) ou juste le nom de votre
+            instance, vous serez redirigé·e vers votre compte pour répondre.
+          </Typography>
+          <TextField
+            autoFocus
+            fullWidth
+            label='@vous@votre-instance'
+            value={saisie}
+            onChange={event => setSaisie(event.target.value)}
+            onKeyDown={event => {
+              if (event.key === 'Enter') {
+                repondre()
+              }
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOuvert(false)}>Annuler</Button>
+          <Button variant='contained' onClick={repondre}>Continuer</Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  )
+}
+
+ReponsMastodon.propTypes = {
+  bokanteStatusId: PropTypes.string
+}

components/teks/teks-kat.js

@@ -3,8 +3,6 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/navigation'
 import Image from 'next/image'
-import {format} from 'date-fns'
-import {fr} from 'date-fns/locale'
 import Card from '@mui/material/Card'
 
 import CardActionArea from '@mui/material/CardActionArea'
@@ -13,6 +11,7 @@ import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
 import ExplicitIcon from '@mui/icons-material/Explicit'
+import EventIcon from '@mui/icons-material/Event'
 import {styled} from '@mui/material/styles'
 
 import {getAlias} from '../../lib/utils/get-alias'
@@ -37,7 +36,7 @@ export default function TeksKat({parole}) {
   const router = useRouter()
   const {titre, artistes, annee, couverture, createdAt, slug} = parole
 
-  const datPiblikasyon = format(new Date(createdAt), 'P', {locale: fr})
+  const datPiblikasyon = new Intl.DateTimeFormat(undefined, {dateStyle: 'short'}).format(new Date(createdAt))
   const aliases = getAlias(artistes, parole.prioriteArtistes)
 
   const handleClick = slug => {
@@ -103,8 +102,15 @@ export default function TeksKat({parole}) {
                   </>
                 )}
               </Typography>
-              <Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
+              <Typography
-                Publiée le : {datPiblikasyon}
+                align='center'
+                style={{marginTop: '0.5em'}}
+                variant='body1'
+                color='textSecondary'
+                component='p'
+                sx={{display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5}}
+              >
+                <EventIcon fontSize='inherit' /> {datPiblikasyon}
               </Typography>
             </Box>
           </CardContent>

components/teks/teks.js

@@ -3,8 +3,10 @@
 import {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
-import Tabs from '@mui/material/Tabs'
+import Select from '@mui/material/Select'
-import Tab from '@mui/material/Tab'
+import MenuItem from '@mui/material/MenuItem'
+import ListSubheader from '@mui/material/ListSubheader'
+import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
@@ -13,8 +15,8 @@ import slugify from 'slugify'
 
 import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
-import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'
+import TranslateIcon from '@mui/icons-material/Translate'
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import StarIcon from '@mui/icons-material/Star'
 
 import Image from 'next/image'
 
@@ -29,6 +31,8 @@ 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 ReponsMastodon from './repons-mastodon'
 import {useCurrentTrack} from './current-track-context'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
@@ -89,15 +93,34 @@ const LANG_NAMES = {
   pt: 'Português', ja: '日本語', ko: '한국어',
 }
 
+const CONTINENTS = ['Afrique', 'Asie', 'Europe']
+
 const TRAD_FIELDS = [
-  {field: 'anglais', title: 'English'},
+  // Afrique — langues vedettes en premier
-  {field: 'francais', title: 'Français'},
+  {field: 'yoruba', title: 'Yorùbá', continent: 'Afrique', vedette: true},
-  {field: 'espagnol', title: 'Español'},
+  {field: 'lingala', title: 'Lingála', continent: 'Afrique', vedette: true},
-  {field: 'allemand', title: 'Deutsch'},
+  {field: 'wolof', title: 'Wolof', continent: 'Afrique', vedette: true},
-  {field: 'italien', title: 'Italiano'},
+  {field: 'swahili', title: 'Kiswahili', continent: 'Afrique', vedette: true},
-  {field: 'portugais', title: 'Português'},
+  {field: 'hausa', title: 'Hausa', continent: 'Afrique', vedette: true},
-  {field: 'japonais', title: '日本語'},
+  {field: 'arabe', title: 'العربية', continent: 'Afrique'},
-  {field: 'coreen', title: '한국어'},
+  {field: 'oromo', title: 'Oromoo', continent: 'Afrique'},
+  {field: 'igbo', title: 'Igbo', continent: 'Afrique'},
+  {field: 'zoulou', title: 'isiZulu', continent: 'Afrique'},
+  {field: 'malgache', title: 'Malagasy', continent: 'Afrique'},
+  {field: 'xhosa', title: 'isiXhosa', continent: 'Afrique'},
+  {field: 'tswana', title: 'Setswana', continent: 'Afrique'},
+  {field: 'tsonga', title: 'Xitsonga', continent: 'Afrique'},
+  {field: 'sesotho', title: 'Sesotho', continent: 'Afrique'},
+  // Asie
+  {field: 'japonais', title: '日本語', continent: 'Asie'},
+  {field: 'coreen', title: '한국어', continent: 'Asie'},
+  // Europe
+  {field: 'anglais', title: 'English', continent: 'Europe'},
+  {field: 'francais', title: 'Français', continent: 'Europe'},
+  {field: 'espagnol', title: 'Español', continent: 'Europe'},
+  {field: 'allemand', title: 'Deutsch', continent: 'Europe'},
+  {field: 'italien', title: 'Italiano', continent: 'Europe'},
+  {field: 'portugais', title: 'Português', continent: 'Europe'},
 ]
 
 const langToArray = parole => {
@@ -107,7 +130,15 @@ const langToArray = parole => {
 
   return TRAD_FIELDS
     .filter(({field}) => parole.traductions[field])
-    .map(({field, title}) => ({title, lang: parole.traductions[field]}))
+    .map(({field, title, continent, vedette}) => ({field, title, continent, vedette, lang: parole.traductions[field]}))
+}
+
+const BROWSER_LANG_TO_FIELD = {
+  yo: 'yoruba', ln: 'lingala', wo: 'wolof', sw: 'swahili', ha: 'hausa',
+  ar: 'arabe', om: 'oromo', ig: 'igbo', zu: 'zoulou', mg: 'malgache',
+  xh: 'xhosa', tn: 'tswana', ts: 'tsonga', st: 'sesotho',
+  ja: 'japonais', ko: 'coreen', en: 'anglais', fr: 'francais',
+  es: 'espagnol', de: 'allemand', it: 'italien', pt: 'portugais',
 }
 
 const ExplicitTooltip = Tooltip
@@ -134,6 +165,20 @@ export default function Teks({parole}) {
     return () => setCurrentTrack(null)
   }, [parole, setCurrentTrack])
 
+  useEffect(() => {
+    const browserLang = navigator.language?.split('-')[0]?.toLowerCase()
+    if (!browserLang || browserLang === parole.langueSource) {
+      return
+    }
+
+    const champ = BROWSER_LANG_TO_FIELD[browserLang]
+    const index = langArray.findIndex(lang => lang.field === champ)
+    if (index !== -1) {
+      setTab(index + 1)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- ne doit s'exécuter qu'au montage, pas à chaque changement d'onglet
+  }, [])
+
   return (
     <Root className={classes.container}>
       <Box sx={{textAlign: 'center', marginTop: 12}}>
@@ -228,39 +273,56 @@ export default function Teks({parole}) {
         )}
       </Box>
       <Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
-        <Tabs
+        <Box sx={{display: 'flex', justifyContent: 'center', borderBottom: 1, borderColor: 'divider', mb: 2, pb: 2}}>
-          scrollButtons
+          <FormControl size='small' sx={{minWidth: 240, width: isMobile ? '100%' : 'auto'}}>
-          allowScrollButtonsMobile
+            <Select
               value={tab}
-          variant='scrollable'
+              MenuProps={{PaperProps: {sx: {maxHeight: 420}}}}
-          centered={langArray.length === 0}
+              renderValue={value => {
-          slots={{
+                const label = value === 0 ? 'Transcription' : langArray[value - 1]?.title
-            startScrollButtonIcon: ArrowBackIosNewIcon,
+                return (
-            endScrollButtonIcon: ArrowForwardIosIcon
+                  <Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
+                    <TranslateIcon fontSize='small' color='primary' />
+                    {label}
+                  </Box>
+                )
               }}
-          sx={{
+              onChange={event => setTab(event.target.value)}
-            borderBottom: 1,
-            borderColor: 'divider',
-            mb: 2,
-            '& .MuiTabs-scrollButtons': {
-              width: 36,
-              height: 36,
-              borderRadius: '50%',
-              color: 'primary.main',
-              backgroundColor: 'action.hover',
-              mx: 0.5,
-              '&.Mui-disabled': {
-                opacity: 0
-              }
-            }
-          }}
-          onChange={(event, value) => setTab(value)}
             >
-          <Tab label='Transcription' />
+              <MenuItem value={0}>Transcription</MenuItem>
-          {langArray.map(({title}) => (
+              {CONTINENTS.flatMap(continent => {
-            <Tab key={title} label={title} />
+                const items = langArray
-          ))}
+                  .map((item, index) => ({...item, index}))
-        </Tabs>
+                  .filter(item => item.continent === continent)
+
+                if (items.length === 0) {
+                  return []
+                }
+
+                return [
+                  <ListSubheader
+                    key={`entet-${continent}`}
+                    sx={{
+                      fontWeight: 700,
+                      textTransform: 'uppercase',
+                      letterSpacing: 1,
+                      color: 'primary.main',
+                      lineHeight: '2.5em'
+                    }}
+                  >
+                    {continent}
+                  </ListSubheader>,
+                  ...items.map(({title, index, vedette}) => (
+                    <MenuItem key={title} value={index + 1} sx={{display: 'flex', gap: 0.75}}>
+                      {vedette && <StarIcon fontSize='inherit' color='primary' />}
+                      {title}
+                    </MenuItem>
+                  ))
+                ]
+              })}
+            </Select>
+          </FormControl>
+        </Box>
         {tab === 0 && (
           <>
             {parole.langueSource && parole.langueSource !== 'ka' && (
@@ -281,6 +343,8 @@ export default function Teks({parole}) {
           )
         ))}
       </Box>
+      <ReponsMastodon bokanteStatusId={parole.bokanteStatusId} />
+      <Komante commentaires={parole.commentaires} />
     </Root>
   )
 }

lib/oki-api.js

@@ -2,7 +2,7 @@ import qs from 'qs'
 
 const OKI_API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
 const AWTIS_POU_CHAK_PAJ = process.env.NEXT_PUBLIC_AWTIS_POU_CHAK_PAJ || 6
-const readToken = process.env.NEXT_PUBLIC_READ_TOKEN || 'read-token'
+const readToken = process.env.API_READ_TOKEN || 'read-token'
 
 const headers = {
   next: {revalidate: 60},
@@ -38,7 +38,16 @@ export async function jwennTeksEpiSlug(slug) {
         fields: ['username', 'firstname']
       },
       commentaires: {
-        fields: ['contenu', 'datePublication'],
+        fields: [
+          'contenu',
+          'datePublication',
+          'origine',
+          'auteurNom',
+          'auteurHandle',
+          'auteurAvatarUrl',
+          'auteurProfilUrl',
+          'remoteUrl'
+        ],
         populate: {
           user: {
             fields: ['username']

package.json

@@ -53,6 +53,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

yarn.lock

@@ -2356,6 +2356,20 @@
   dependencies:
     tslib "^2.8.0"
 
+"@testing-library/dom@^10.4.1":
+  version "10.4.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.1.tgz#d444f8a889e9a46e9a3b4f3b88e0fcb3efb6cf95"
+  integrity sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.3.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.5.0"
+    picocolors "1.1.1"
+    pretty-format "^27.0.2"
+
 "@testing-library/jest-dom@^6.9.1":
   version "6.9.1"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz#7613a04e146dd2976d24ddf019730d57a89d56c2"
@@ -2392,6 +2406,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@types/aria-query@^5.0.1":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
+  integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==
+
 "@types/chai@^5.2.2":
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-5.2.3.tgz#8e9cd9e1c3581fa6b341a5aed5588eb285be0b4a"
@@ -2776,6 +2795,11 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
 aproba@^1.0.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -2794,6 +2818,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-query@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+  dependencies:
+    dequal "^2.0.3"
+
 aria-query@^5.0.0:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
@@ -3525,6 +3556,11 @@ delegates@^1.0.0:
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
   integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
 
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
@@ -3556,6 +3592,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-accessibility-api@^0.5.9:
+  version "0.5.16"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
+  integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
+
 dom-accessibility-api@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
@@ -5581,6 +5622,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lz-string@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
@@ -6213,16 +6259,16 @@ peek-readable@^4.1.0:
   resolved "https://registry.yarnpkg.com/peek-readable/-/peek-readable-4.1.0.tgz#4ece1111bf5c2ad8867c314c81356847e8a62e72"
   integrity sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg==
 
+picocolors@1.1.1, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picocolors@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
-  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
-
 picomatch@^2.2.2:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -6350,6 +6396,15 @@ pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
+pretty-format@^27.0.2:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -6448,6 +6503,11 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^17.0.1:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-is@^19.0.0, react-is@^19.2.4:
   version "19.2.5"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.2.5.tgz#7e7b54143e9313fed787b23fd4295d5a23872ad9"