feat: ajouter un sélecteur d'instance Mastodon et expliciter BOKANTE

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 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 'next/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,70 @@ 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'>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>