wip broadcast options :

Direct messages : Add backdrop and spinner when submitting
PostBlock.jsx : Adjust visibility selecter's design
add i18n to MentionsList.jsx
add comments to useMentions.js

frontend/src/common/blocks/PostBlock.jsx

@@ -9,12 +9,14 @@ import {
   SelectInput
 } from 'react-admin';
 import { useLocation } from 'react-router-dom';
-import { Card, Box, Button, IconButton, CircularProgress, Backdrop } from '@mui/material';
+import { Card, Box, Button, IconButton, CircularProgress, Backdrop, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import SendIcon from '@mui/icons-material/Send';
 import InsertPhotoIcon from '@mui/icons-material/InsertPhoto';
 import DeleteIcon from '@mui/icons-material/Delete';
 import PublicIcon from '@mui/icons-material/Public';
+import LockPersonIcon from '@mui/icons-material/LockPerson';
+import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
 import {
   useOutbox,
   OBJECT_TYPES,
@@ -394,11 +396,12 @@ const PostBlock = ({ inReplyTo, mention }) => {
             </Box>
           )}
 
-          <Box display="flex" justifyContent="space-between" alignItems="center" mt={imageFiles.length > 0 ? 2 : 0} flexWrap="wrap">
+          <Box display="flex" justifyContent="space-between" alignItems="center" mt={imageFiles.length > 0 ? 2 : 0}
+               flexWrap="wrap">
             <Box display="flex" alignItems="center" gap={1}>
               <SelectInput
                 helperText={false}
-                label={<PublicIcon/>}
+                label={false}
                 source="visibility"
                 defaultValue="public"
                 parse={(value) => value || 'public'} //if empty, fallback to public
@@ -407,18 +410,29 @@ const PostBlock = ({ inReplyTo, mention }) => {
                   { id: 'followers-only', name: translate('app.visibility.followersOnly') },
                   { id: 'mentions-only', name: translate('app.visibility.mentionsOnly') }
                 ]}
+                optionText={(choice) => (
+                  <Box display="flex" alignItems="center">
+                    {choice.id === 'public' && <PublicIcon color="primary" />}
+                    {choice.id === 'followers-only' && <LockPersonIcon color="secondary" />}
+                    {choice.id === 'mentions-only' && <AlternateEmailIcon color="action" />}
+                    <Typography variant="body2" sx={{ ml: 1 }}>
+                      {choice.name}
+                    </Typography>
+                  </Box>
+                )}
+                optionValue="id"
                 sx={{
+                  //hide the legend element in the fieldset to avoid empty space in the border
+                  '& .MuiOutlinedInput-notchedOutline legend': {
+                    display: 'none'
+                  },
+                  //adjust height and margin to align with buttons
+                  '& .MuiOutlinedInput-notchedOutline': {
+                    mt: '3px'
+                  },
                   '& .MuiInputBase-root': {
                     height: '36px',
-                    padding: '0 12px',
-                    display: 'flex',
-                    alignItems: 'center',
-                  },
-                  '& .MuiSelect-select': {
-                    display: 'flex',
-                    alignItems: 'center',
                   },
-                  minWidth: '150px',
                 }}
               />
               <Button

frontend/src/common/buttons/SendDirectMessageButton.jsx

@@ -1,5 +1,14 @@
 import { useCallback, useState } from 'react';
-import { Button, Dialog, DialogTitle, DialogContent, DialogActions, Box } from '@mui/material';
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Box,
+  Backdrop,
+  CircularProgress
+} from '@mui/material';
 import { Form, TextInput, useNotify, useTranslate } from 'react-admin';
 import SendIcon from '@mui/icons-material/Send';
 import { useOutbox, OBJECT_TYPES } from '@semapps/activitypub-components';
@@ -9,8 +18,10 @@ const SendDirectMessageButton = ({ actorUri, children, ...rest }) => {
   const translate = useTranslate();
   const notify = useNotify();
   const outbox = useOutbox();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const onSubmit = useCallback(async values => {
+    setIsSubmitting(true);
     try {
       await outbox.post({
         type: OBJECT_TYPES.NOTE,
@@ -22,6 +33,8 @@ const SendDirectMessageButton = ({ actorUri, children, ...rest }) => {
       setShowDialog(false);
     } catch (e) {
       notify('app.notification.message_send_error', { type: 'error', messageArgs: { error: e.message } });
+    } finally {
+      setIsSubmitting(false);
     }
   }, []);
 
@@ -36,13 +49,25 @@ const SendDirectMessageButton = ({ actorUri, children, ...rest }) => {
         {translate('app.action.message')}
       </Button>
       <Dialog fullWidth open={showDialog} onClose={() => setShowDialog(false)}>
+        <Backdrop
+          sx={{
+            color: '#fff',
+            position: 'absolute',
+            zIndex: (theme) => theme.zIndex.drawer + 1,
+            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+            borderRadius: 1
+          }}
+          open={isSubmitting}
+        >
+          <CircularProgress color="inherit" />
+        </Backdrop>
         <Form onSubmit={onSubmit}>
           <DialogTitle>{translate('app.action.sendDirectMessage')}</DialogTitle>
             <DialogContent>
                 <TextInput
                   source="content"
                   label={translate('app.input.message')}
-                  variant="filled"
+                  variant="outlined"
                   margin="dense"
                   fullWidth
                   multiline

frontend/src/config/messages/en.js

@@ -36,7 +36,8 @@ export default {
     message: {
       early_dev_warning:
         'This application is in early development. Use it for tests only, and please report issues you find on',
-      actor_boosted: '%{actor} boosted'
+      actor_boosted: '%{actor} boosted',
+      no_result: 'No result'
     },
     notification: {
       activity_send_error: 'Error while posting the activity: %{error}',

frontend/src/config/messages/fr.js

@@ -36,7 +36,8 @@ export default {
     message: {
       early_dev_warning:
         'Cette application est en cours de développement. Utilisez-la pour des tests uniquement, et veuillez remonter les bugs que vous trouvez sur',
-      actor_boosted: '%{actor} a boosté'
+      actor_boosted: '%{actor} a boosté',
+      no_result: 'Aucun résultat'
     },
     notification: {
       message_sent: 'Votre message a été envoyé',

frontend/src/hooks/useMentions/MentionsList.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import {useTranslate} from 'react-admin';
 import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(theme => ({
@@ -30,6 +31,7 @@ const useStyles = makeStyles(theme => ({
 export default forwardRef((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const classes = useStyles();
+  const translate = useTranslate();
 
   const selectItem = index => {
     const item = props.items[index];
@@ -87,7 +89,7 @@ export default forwardRef((props, ref) => {
           </button>
         ))
       ) : (
-        <div className={classes.item}>Aucun résultat</div>
+        <div className={classes.item}>{translate('app.message.no_result')}</div>
       )}
     </div>
   );

frontend/src/hooks/useMentions/useMentions.js

@@ -1,7 +1,20 @@
 import { useMemo } from 'react';
 import renderMentions from './renderMentions';
 
+/**
+ *
+ * @param data The list of mentionable actors to be used in the mention suggestions.
+ *  e.g. : {
+ *    id: 'https://pod.provider/username', => the value that will be used in the "data-id" attribute of the generated link in the document
+ *    label: '@[email protected]' => will be displayed in the document and stored in the "data-label" of the link
+ *  }
+ * @returns {{items: (function({query: *}): *), render: ((function(): {onKeyDown(*): (boolean|*), onStart: function(*): void, onExit(): void, onUpdate(*): void})|*)}}
+ */
 const useMentions = data => {
+  /**
+   * Filters suggestions using the end user query (what is typed after a "@" in the text field)
+   * @type {function({query: *}): *}
+   */
   const items = useMemo(
     () => ({ query }) => data.filter(({ label }) => label.toLowerCase().includes(query.toLowerCase())).slice(0, 5)
     , [data]