feat: add ayisyen

Reviewed-on: #6

.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.

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/api/mizik-stream/[id]/__tests__/route.test.js

@@ -4,6 +4,7 @@ import {GET} from '../route'
 function fakeUpstreamResponse({status = 200, headers = {}, body = 'audio-bytes'} = {}) {
   return {
     status,
+    ok: status >= 200 && status < 300,
     body,
     headers: {
       get: key => headers[key.toLowerCase()] ?? null
@@ -52,4 +53,16 @@ describe('GET /api/mizik-stream/[id]', () => {
     expect(response.status).toBe(200)
     expect(response.headers.get('content-type')).toBe('audio/mpeg')
   })
+
+  it('renvoie une erreur JSON si le serveur audio répond en erreur', async () => {
+    global.fetch = vi.fn(async () => fakeUpstreamResponse({status: 401, headers: {'content-type': 'application/json'}, body: '{"error": "unauthorized"}'}))
+
+    const request = new Request('http://localhost/api/mizik-stream/7')
+    const response = await GET(request, {params: Promise.resolve({id: '7'})})
+
+    expect(response.status).toBe(401)
+    expect(response.headers.get('content-type')).toContain('application/json')
+    const json = await response.json()
+    expect(json.error).toContain('401')
+  })
 })

app/api/mizik-stream/[id]/route.js

@@ -1,6 +1,8 @@
 const MIZIK_URL = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || 'https://funkwhale-server.com'
-const MIZIK_API_USER = process.env.MIZIK_API_USER || 'user'
-const MIZIK_API_PASSWORD = process.env.MIZIK_API_PASSWORD || 'password'
+// Les variables publiques sont conservées en fallback pendant la migration
+// des déploiements qui utiliseraient encore l’ancien nommage.
+const MIZIK_API_USER = process.env.MIZIK_API_USER || process.env.NEXT_PUBLIC_MIZIK_API_USER || 'user'
+const MIZIK_API_PASSWORD = process.env.MIZIK_API_PASSWORD || process.env.NEXT_PUBLIC_MIZIK_API_PASSWORD || 'password'
 
 const FORWARDED_HEADERS = ['content-type', 'content-length', 'content-range', 'accept-ranges']
 
@@ -14,6 +16,12 @@ export async function GET(request, props) {
     headers: range ? {range} : {}
   })
 
+  if (!upstreamResponse.ok) {
+    const message = `Le serveur audio a répondu ${upstreamResponse.status}`
+    console.error(message, upstreamUrl.replace(/p=[^&]+/, 'p=***'))
+    return Response.json({error: message}, {status: upstreamResponse.status})
+  }
+
   const headers = new Headers()
   for (const key of FORWARDED_HEADERS) {
     const value = upstreamResponse.headers.get(key)

app/awtis/[slug]/page.js

@@ -1,3 +1,4 @@
+import {headers} from 'next/headers'
 import {notFound} from 'next/navigation'
 import Box from '@mui/material/Box'
 
@@ -67,6 +68,8 @@ export default async function AwtisPajSlug(props) {
   const params = await props.params
   const {slug} = params
   const anAwtis = await jwennAwtis(slug)
+  const requestHeaders = await headers()
+  const nonce = requestHeaders.get('x-nonce') || undefined
 
   const {photo} = anAwtis
   const kuvetiFormat = formatKuveti(photo)
@@ -91,6 +94,7 @@ export default async function AwtisPajSlug(props) {
       <section>
         <script
           type='application/ld+json'
+          nonce={nonce}
           dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
         />
       </section>

app/emotion-cache-provider.js

@@ -7,10 +7,10 @@ import {useServerInsertedHTML} from 'next/navigation'
 import {CacheProvider as DefaultCacheProvider} from '@emotion/react'
 
 export default function NextAppDirEmotionCacheProvider(props) {
-  const {options, CacheProvider = DefaultCacheProvider, children} = props
+  const {options, CacheProvider = DefaultCacheProvider, children, nonce} = props
 
   const [registry] = React.useState(() => {
-    const cache = createCache(options)
+    const cache = createCache({...options, nonce})
     cache.compat = true
     const prevInsert = cache.insert
     let inserted = []
@@ -65,12 +65,14 @@ export default function NextAppDirEmotionCacheProvider(props) {
           <style
             key={name}
             dangerouslySetInnerHTML={{__html: style}}
+            nonce={nonce}
             data-emotion={`${registry.cache.key}-global ${name}`}
           />
         ))}
         {styles !== '' && (
           <style
             dangerouslySetInnerHTML={{__html: styles}}
+            nonce={nonce}
             data-emotion={dataEmotionAttribute}
           />
         )}
@@ -84,5 +86,6 @@ export default function NextAppDirEmotionCacheProvider(props) {
 NextAppDirEmotionCacheProvider.propTypes = {
   options: PropTypes.object.isRequired,
   CacheProvider: PropTypes.func,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  nonce: PropTypes.string
 }

app/layout.js

@@ -1,3 +1,4 @@
+import {headers} from 'next/headers'
 import PlausibleProvider from 'next-plausible'
 import TopLoader from '../components/top-loader'
 import Navigasyon from '../components/navigasyon'
@@ -61,16 +62,20 @@ const jsonLd = {
 }
 
 export default async function RootLayout({children}) {
+  const requestHeaders = await headers()
+  const nonce = requestHeaders.get('x-nonce') || undefined
+
   const inner = (
     <>
-      <TopLoader color='#ffeb3b' />
-      <ThemeRegistry>
+      <TopLoader color='#ffeb3b' nonce={nonce} />
+      <ThemeRegistry nonce={nonce}>
         <Navigasyon />
         {children}
       </ThemeRegistry>
       <section>
         <script
           type='application/ld+json'
+          nonce={nonce}
           dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
         />
       </section>
@@ -81,7 +86,7 @@ export default async function RootLayout({children}) {
     <html suppressHydrationWarning lang='fr'>
       <body>
         {plausibleUrl
-          ? <PlausibleProvider src={plausibleUrl}>{inner}</PlausibleProvider>
+          ? <PlausibleProvider src={plausibleUrl} scriptProps={{nonce}}>{inner}</PlausibleProvider>
           : inner}
       </body>
     </html>

app/paroles/[slug]/page.js

@@ -1,3 +1,4 @@
+import {headers} from 'next/headers'
 import {notFound} from 'next/navigation'
 import Box from '@mui/material/Box'
 
@@ -71,6 +72,8 @@ export default async function AnPawolPaj(props) {
   const {slug} = params
 
   const anTeks = await jwennAnTeks(slug)
+  const requestHeaders = await headers()
+  const nonce = requestHeaders.get('x-nonce') || undefined
   const {couverture} = anTeks
   const teksKuvetiFormat = formatKuveti(couverture)
 
@@ -126,6 +129,7 @@ export default async function AnPawolPaj(props) {
       <section>
         <script
           type='application/ld+json'
+          nonce={nonce}
           dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
         />
       </section>

app/theme-registy.js

@@ -64,12 +64,12 @@ const theme = createTheme({
 })
 
 export default function ThemeRegistry(props) {
-  const {children} = props
+  const {children, nonce} = props
 
   return (
     <>
-      <InitColorSchemeScript attribute='class' />
-      <NextAppDirEmotionCacheProvider options={{key: 'mui'}}>
+      <InitColorSchemeScript attribute='class' nonce={nonce} />
+      <NextAppDirEmotionCacheProvider options={{key: 'mui'}} nonce={nonce}>
         <ThemeProvider theme={theme}>
           <CssBaseline enableColorScheme />
           <ChanjeTem />
@@ -81,5 +81,6 @@ export default function ThemeRegistry(props) {
 }
 
 ThemeRegistry.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  nonce: PropTypes.string
 }

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

@@ -34,4 +34,18 @@ describe('Komante', () => {
     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

@@ -15,19 +15,36 @@ describe('ReponsMastodon', () => {
     expect(container).toBeEmptyDOMElement()
   })
 
-  it('affiche un lien direct vers le fil bokante', () => {
+  it('affiche un lien direct vers le fil BOKANTE', () => {
     render(<ReponsMastodon bokanteStatusId='112233' />)
-    const lien = screen.getByRole('link', {name: 'Mastodon'})
+    const lien = screen.getByRole('link', {name: 'BOKANTE (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 () => {
+  it('redirige vers BOKANTE par défaut quand on continue', 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: /répondre sur mastodon/i}))
+    await user.click(screen.getByRole('button', {name: /continuer/i}))
+
+    expect(window.open).toHaveBeenCalledWith(
+      'https://bokante.o-k-i.net/authorize_interaction?uri=' + encodeURIComponent('https://bokante.o-k-i.net/@pawol_nu/112233'),
+      '_blank',
+      'noopener,noreferrer'
+    )
+  })
+
+  it('permet de choisir une autre instance dans le select', async () => {
+    window.open = vi.fn()
+    const user = userEvent.setup()
+    render(<ReponsMastodon bokanteStatusId='112233' />)
+
+    await user.click(screen.getByRole('button', {name: /répondre sur mastodon/i}))
+    await user.click(screen.getByLabelText(/instance mastodon/i))
+    await user.click(screen.getByRole('option', {name: /autre instance/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(
@@ -37,17 +54,19 @@ describe('ReponsMastodon', () => {
     )
   })
 
-  it('accepte aussi juste un nom d\'instance sans @', async () => {
+  it('accepte un identifiant complet pour une autre instance', 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: /répondre sur mastodon/i}))
+    await user.click(screen.getByLabelText(/instance mastodon/i))
+    await user.click(screen.getByRole('option', {name: /autre instance/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(
-      expect.stringContaining('https://mastodon.social/authorize_interaction'),
+      'https://mastodon.social/authorize_interaction?uri=' + encodeURIComponent('https://bokante.o-k-i.net/@pawol_nu/112233'),
       '_blank',
       'noopener,noreferrer'
     )

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

@@ -2,10 +2,12 @@
 
 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') {
@@ -15,6 +17,29 @@ function formatAuteur(commentaire) {
   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
@@ -23,36 +48,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' 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>
-                ) : 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>
-        )
-      })}
+          )
+        })}
+      </Stack>
     </Box>
   )
 }

components/teks/repons-mastodon.jsx

@@ -10,11 +10,24 @@ 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'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Link from '@mui/material/Link'
+import {Mastodon} from '@icons-pack/react-simple-icons'
 
 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'
 
+const INSTANCES_SUGGEREES = [
+  {domain: 'bokante.o-k-i.net', label: 'BOKANTE - notre instance'},
+  {domain: 'mastodon.social', label: 'mastodon.social'},
+  {domain: 'piaille.fr', label: 'piaille.fr'},
+]
+
+const AUTRE_INSTANCE = 'autre'
+
 function extraireInstance(saisie) {
   const valeur = saisie.trim().replace(/^@/, '').replace(/^https?:\/\//, '').replace(/\/$/, '')
   return valeur.includes('@') ? valeur.split('@').pop() : valeur
@@ -22,7 +35,8 @@ function extraireInstance(saisie) {
 
 export default function ReponsMastodon({bokanteStatusId}) {
   const [ouvert, setOuvert] = useState(false)
-  const [saisie, setSaisie] = useState('')
+  const [instance, setInstance] = useState(INSTANCES_SUGGEREES[0].domain)
+  const [autreInstance, setAutreInstance] = useState('')
 
   if (!bokanteStatusId) {
     return null
@@ -31,43 +45,92 @@ export default function ReponsMastodon({bokanteStatusId}) {
   const tootUrl = `${BOKANTE_URL}/@${BOKANTE_ACCOUNT}/${bokanteStatusId}`
 
   const repondre = () => {
-    const instance = extraireInstance(saisie)
-    if (!instance) {
+    const domaine = instance === AUTRE_INSTANCE ? extraireInstance(autreInstance) : instance
+    if (!domaine) {
       return
     }
 
-    window.open(`https://${instance}/authorize_interaction?uri=${encodeURIComponent(tootUrl)}`, '_blank', 'noopener,noreferrer')
+    window.open(`https://${domaine}/authorize_interaction?uri=${encodeURIComponent(tootUrl)}`, '_blank', 'noopener,noreferrer')
     setOuvert(false)
+    setAutreInstance('')
   }
 
   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>
+        Rejoignez la discussion sur le Fediverse via{' '}
+        <Link
+          href={tootUrl}
+          target='_blank'
+          rel='noopener noreferrer'
+          underline='hover'
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 0.5,
+            px: 1,
+            py: 0.25,
+            borderRadius: 1,
+            bgcolor: 'action.hover',
+            color: 'primary.main',
+            fontWeight: 500,
+            textDecoration: 'none',
+            '&:hover': {
+              bgcolor: 'action.selected'
+            }
+          }}
+        >
+          BOKANTE (Mastodon)
+        </Link>
       </Typography>
-      <Button variant='outlined' size='small' onClick={() => setOuvert(true)}>
-        Répondre via Mastodon
+      <Button
+        variant='outlined'
+        size='small'
+        startIcon={<Mastodon size={16} color='#6364FF' title='' />}
+        onClick={() => setOuvert(true)}
+      >
+        Répondre sur Mastodon
       </Button>
       <Dialog open={ouvert} onClose={() => setOuvert(false)}>
-        <DialogTitle>Répondre depuis votre compte Mastodon</DialogTitle>
+        <DialogTitle>Répondre depuis 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.
+            Choisissez l’instance Mastodon sur laquelle vous avez un compte.
+            BOKANTE est l’instance de OKI : vous pouvez aussi utiliser
+            n’importe quelle autre instance du Fediverse.
           </Typography>
-          <TextField
-            autoFocus
-            fullWidth
-            label='@vous@votre-instance'
-            value={saisie}
-            onChange={event => setSaisie(event.target.value)}
-            onKeyDown={event => {
-              if (event.key === 'Enter') {
-                repondre()
-              }
-            }}
-          />
+          <FormControl fullWidth sx={{mb: 2}}>
+            <InputLabel id='instance-mastodon-label'>Instance Mastodon</InputLabel>
+            <Select
+              labelId='instance-mastodon-label'
+              id='instance-mastodon'
+              value={instance}
+              label='Instance Mastodon'
+              onChange={event => setInstance(event.target.value)}
+            >
+              {INSTANCES_SUGGEREES.map(({domain, label}) => (
+                <MenuItem key={domain} value={domain}>
+                  {label}
+                </MenuItem>
+              ))}
+              <MenuItem value={AUTRE_INSTANCE}>Autre instance…</MenuItem>
+            </Select>
+          </FormControl>
+          {instance === AUTRE_INSTANCE && (
+            <TextField
+              autoFocus
+              fullWidth
+              label='@vous@votre-instance'
+              helperText='Indiquez votre identifiant (@vous@votre-instance) ou juste le nom de votre instance, vous serez redirigé·e vers votre compte pour répondre.'
+              value={autreInstance}
+              onChange={event => setAutreInstance(event.target.value)}
+              onKeyDown={event => {
+                if (event.key === 'Enter') {
+                  repondre()
+                }
+              }}
+            />
+          )}
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setOuvert(false)}>Annuler</Button>

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'>
-                Publiée le : {datPiblikasyon}
+              <Typography
+                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,11 @@
 import {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
-import Tabs from '@mui/material/Tabs'
-import Tab from '@mui/material/Tab'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import ListSubheader from '@mui/material/ListSubheader'
+import Divider from '@mui/material/Divider'
+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 +16,9 @@ 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 ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import TranslateIcon from '@mui/icons-material/Translate'
+import StarIcon from '@mui/icons-material/Star'
+import ArticleIcon from '@mui/icons-material/Article'
 
 import Image from 'next/image'
 
@@ -91,15 +95,35 @@ const LANG_NAMES = {
   pt: 'Português', ja: '日本語', ko: '한국어',
 }
 
+const CONTINENTS = ['Afrique', 'Asie', 'Europe']
+
 const TRAD_FIELDS = [
-  {field: 'anglais', title: 'English'},
-  {field: 'francais', title: 'Français'},
-  {field: 'espagnol', title: 'Español'},
-  {field: 'allemand', title: 'Deutsch'},
-  {field: 'italien', title: 'Italiano'},
-  {field: 'portugais', title: 'Português'},
-  {field: 'japonais', title: '日本語'},
-  {field: 'coreen', title: '한국어'},
+  // Afrique — langues vedettes en premier
+  {field: 'ayisyen', title: 'Ayisyen 🇭🇹', continent: 'Afrique', vedette: true},
+  {field: 'yoruba', title: 'Yorùbá', continent: 'Afrique', vedette: true},
+  {field: 'lingala', title: 'Lingála', continent: 'Afrique', vedette: true},
+  {field: 'wolof', title: 'Wolof', continent: 'Afrique', vedette: true},
+  {field: 'swahili', title: 'Kiswahili', continent: 'Afrique', vedette: true},
+  {field: 'hausa', title: 'Hausa', continent: 'Afrique', vedette: true},
+  {field: 'arabe', title: 'العربية', continent: 'Afrique'},
+  {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 => {
@@ -109,7 +133,7 @@ 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 ExplicitTooltip = Tooltip
@@ -230,39 +254,61 @@ export default function Teks({parole}) {
         )}
       </Box>
       <Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
-        <Tabs
-          scrollButtons
-          allowScrollButtonsMobile
-          value={tab}
-          variant='scrollable'
-          centered={langArray.length === 0}
-          slots={{
-            startScrollButtonIcon: ArrowBackIosNewIcon,
-            endScrollButtonIcon: ArrowForwardIosIcon
-          }}
-          sx={{
-            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' />
-          {langArray.map(({title}) => (
-            <Tab key={title} label={title} />
-          ))}
-        </Tabs>
+        <Box sx={{display: 'flex', justifyContent: 'center', borderBottom: 1, borderColor: 'divider', mb: 2, pb: 2}}>
+          <FormControl size='small' sx={{minWidth: 240, width: isMobile ? '100%' : 'auto'}}>
+            <Select
+              value={tab}
+              MenuProps={{PaperProps: {sx: {maxHeight: 420}}}}
+              renderValue={value => {
+                const label = value === 0 ? 'Transcription' : langArray[value - 1]?.title
+                const Icon = value === 0 ? ArticleIcon : TranslateIcon
+                return (
+                  <Box sx={{display: 'flex', alignItems: 'center', gap: 1, fontWeight: value === 0 ? 700 : 400}}>
+                    <Icon fontSize='small' color='primary' />
+                    {label}
+                  </Box>
+                )
+              }}
+              onChange={event => setTab(event.target.value)}
+            >
+              <MenuItem value={0} sx={{display: 'flex', gap: 0.75, fontWeight: 700}}>
+                <ArticleIcon fontSize='inherit' color='primary' />
+                Transcription
+              </MenuItem>
+              <Divider />
+              {CONTINENTS.flatMap(continent => {
+                const items = langArray
+                  .map((item, index) => ({...item, index}))
+                  .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' && (

components/top-loader.js

@@ -3,8 +3,13 @@
 import PropTypes from 'prop-types'
 import NextTopLoader from 'nextjs-toploader'
 
-export default function TopLoader({color}) {
-  return <NextTopLoader color={color} />
+export default function TopLoader({color, nonce}) {
+  return <NextTopLoader color={color} nonce={nonce} />
+}
+
+TopLoader.propTypes = {
+  color: PropTypes.string.isRequired,
+  nonce: PropTypes.string
 }
 
 TopLoader.propTypes = {

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},

next.config.js

@@ -28,9 +28,49 @@ function buildRemotePatterns() {
   return patterns
 }
 
+async function headers() {
+  return [
+    {
+      source: '/:path*',
+      headers: [
+        {
+          key: 'Strict-Transport-Security',
+          value: 'max-age=63072000; includeSubDomains; preload'
+        },
+        {
+          key: 'X-Content-Type-Options',
+          value: 'nosniff'
+        },
+        {
+          key: 'X-Frame-Options',
+          value: 'SAMEORIGIN'
+        },
+        {
+          key: 'Referrer-Policy',
+          value: 'strict-origin-when-cross-origin'
+        },
+        {
+          key: 'Cross-Origin-Resource-Policy',
+          value: 'same-site'
+        },
+        {
+          key: 'Cross-Origin-Opener-Policy',
+          value: 'same-origin'
+        },
+        {
+          key: 'Permissions-Policy',
+          value: 'accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()'
+        }
+      ]
+    }
+  ]
+}
+
 module.exports = (withPWA({
   turbopack: {},
+  poweredByHeader: false,
   images: {
     remotePatterns: buildRemotePatterns()
-  }
+  },
+  headers
 }))

proxy.js

@@ -0,0 +1,121 @@
+/* eslint-disable @next/next/no-server-import-in-page */
+import {NextResponse} from 'next/server'
+
+const nonceCharset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+
+function generateNonce() {
+  const array = new Uint8Array(16)
+  crypto.getRandomValues(array)
+  let nonce = ''
+  for (const byte of array) {
+    nonce += nonceCharset[byte % 64]
+  }
+
+  return nonce
+}
+
+function extractOrigin(url) {
+  if (!url) {
+    return ''
+  }
+
+  try {
+    return new URL(url).origin
+  } catch {
+    return ''
+  }
+}
+
+function extractHostSource(raw) {
+  if (!raw) {
+    return ''
+  }
+
+  const [hostname, port] = raw.split(':')
+  if (!hostname) {
+    return ''
+  }
+
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return `http://${hostname}${port ? `:${port}` : ''}`
+  }
+
+  return `https://${hostname}${port ? `:${port}` : ''}`
+}
+
+function buildCsp(nonce) {
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || process.env.NEXT_PUBLIC_API_URL_ROOT || ''
+  const plausibleUrl = process.env.NEXT_PUBLIC_PLAUSIBLE_URL || ''
+  const mizikUrl = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || ''
+  const imageDomainsRaw = process.env.NEXT_PUBLIC_DOMAINS_IMAGE || ''
+
+  const apiOrigin = extractOrigin(apiUrl)
+  const plausibleOrigin = extractOrigin(plausibleUrl)
+  const mizikOrigin = extractOrigin(mizikUrl)
+  const imageOrigins = imageDomainsRaw
+    .split(' ')
+    .filter(Boolean)
+    .map(entry => extractHostSource(entry))
+    .filter(Boolean)
+
+  const imageOriginsSet = new Set([apiOrigin, ...imageOrigins])
+  const imageOriginsUnique = [...imageOriginsSet].filter(Boolean)
+
+  const connectSrc = ['\'self\'', apiOrigin, plausibleOrigin, mizikOrigin].filter(Boolean)
+  const imgSrc = ['\'self\'', 'data:', 'blob:', ...imageOriginsUnique].filter(Boolean)
+  const mediaSrc = ['\'self\'', apiOrigin, mizikOrigin].filter(Boolean)
+
+  // Frame-src is intentionally broad: the application embeds user-supplied
+  // PeerTube instances in addition to known platforms (Tidal, Deezer, Spotify,
+  // Soundcloud, Apple Music). Restricting this to a fixed list would break
+  // user-generated content.
+  const frameSrc = ['\'self\'', 'https:']
+
+  const directives = [
+    'default-src \'self\'',
+    `script-src 'nonce-${nonce}' 'strict-dynamic'`,
+    `style-src-elem 'self' 'nonce-${nonce}'`,
+    'style-src-attr \'unsafe-inline\'',
+    `img-src ${imgSrc.join(' ')}`,
+    'font-src \'self\'',
+    `connect-src ${connectSrc.join(' ')}`,
+    `frame-src ${frameSrc.join(' ')}`,
+    `media-src ${mediaSrc.join(' ')}`,
+    'manifest-src \'self\'',
+    'object-src \'none\'',
+    'base-uri \'self\'',
+    'form-action \'self\'',
+    'frame-ancestors \'self\'',
+    'upgrade-insecure-requests'
+  ]
+
+  return directives.join('; ')
+}
+
+export function proxy(request) {
+  const nonce = generateNonce()
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-nonce', nonce)
+
+  const response = NextResponse.next({
+    request: {
+      headers: requestHeaders
+    }
+  })
+
+  response.headers.set('Content-Security-Policy', buildCsp(nonce))
+
+  return response
+}
+
+export const config = {
+  matcher: [
+    {
+      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      missing: [
+        {type: 'header', key: 'next-router-prefetch'},
+        {type: 'header', key: 'purpose', value: 'prefetch'}
+      ]
+    }
+  ]
+}