feat: bouton Répondre via Mastodon (authorize_interaction)

2026-07-05 01:15:55 +04:00
parent eda30345c6
commit 21248b7138
4 changed files with 145 additions and 0 deletions
@@ -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
+}