nicolium: allow setting description for event banners

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/actions/compose.ts

@@ -682,6 +682,7 @@ const changeUploadCompose =
     return dispatch(updateMedia(mediaId, params))
       .then((response) => {
         dispatch(changeUploadComposeSuccess(composeId, response));
+        return response;
       })
       .catch((error) => {
         dispatch(changeUploadComposeFail(composeId, mediaId, error));

packages/pl-fe/src/components/upload.tsx

@@ -95,7 +95,7 @@ interface IUpload extends Pick<
   media: MediaAttachment;
   onSubmit?(): void;
   onDelete?(): void;
-  onDescriptionChange?(description: string, position: [number, number]): Promise<void>;
+  onDescriptionChange?(description: string, position: [number, number]): Promise<any>;
   descriptionLimit?: number;
   withPreview?: boolean;
 }
@@ -136,7 +136,6 @@ const Upload: React.FC<IUpload> = ({
 
     openModal('ALT_TEXT', {
       media,
-      withPosition: !!onDragStart,
       previousDescription: media.description,
       previousPosition: [focusX / 2 + 0.5, focusY / -2 + 0.5],
       descriptionLimit: descriptionLimit!,

packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx

@@ -2,10 +2,11 @@ import { useNavigate } from '@tanstack/react-router';
 import React, { useCallback, useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { resetCompose } from '@/actions/compose';
+import { changeUploadCompose, resetCompose } from '@/actions/compose';
 import { cancelEventCompose, initEventEdit, submitEvent } from '@/actions/events';
 import { uploadFile } from '@/actions/media';
 import { fetchStatus } from '@/actions/statuses';
+import AltIndicator from '@/components/alt-indicator';
 import { ADDRESS_ICONS } from '@/components/autosuggest-location';
 import LocationSearch from '@/components/location-search';
 import Button from '@/components/ui/button';
@@ -24,7 +25,9 @@ import { isCurrentOrFutureDate } from '@/features/compose/components/schedule-fo
 import { ComposeEditor, DatePicker } from '@/features/ui/util/async-components';
 import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useAppSelector } from '@/hooks/use-app-selector';
+import { useInstance } from '@/hooks/use-instance';
 import { makeGetStatus } from '@/selectors';
+import { useModalsActions } from '@/stores/modals';
 import toast from '@/toast';
 
 import UploadButton from '../components/upload-button';
@@ -60,11 +63,17 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  const { openModal } = useModalsActions();
 
   const getStatus = useCallback(makeGetStatus(), []);
   const status = useAppSelector((state) =>
     statusId ? getStatus(state, { id: statusId }) : undefined,
   );
+  const {
+    pleroma: {
+      metadata: { description_limit: descriptionLimit },
+    },
+  } = useInstance();
 
   const [name, setName] = useState(status?.event?.name ?? '');
   const [text, setText] = useState('');
@@ -81,7 +90,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
   const [isDisabled, setIsDisabled] = useState(!!statusId);
   const [isUploading, setIsUploading] = useState(false);
 
-  const composeId = statusId ? `compose-event-modal-${statusId}` : 'compose-event-modal';
+  const composeId = statusId ? `compose-event-${statusId}` : 'compose-event';
 
   const onChangeName: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
     setName(target.value);
@@ -134,6 +143,28 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
     setBanner(null);
   };
 
+  const handleChangeDescriptionClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+
+    if (!banner) return;
+
+    openModal('ALT_TEXT', {
+      media: banner,
+      previousDescription: banner.description,
+      previousPosition: [0, 0],
+      descriptionLimit: descriptionLimit,
+      onSubmit: (description: string, position: [number, number]) =>
+        dispatch(
+          changeUploadCompose(composeId, banner.id, {
+            description,
+            focus: position
+              ? `${((position[0] - 0.5) * 2).toFixed(2)},${((position[1] - 0.5) * -2).toFixed(2)}`
+              : undefined,
+          }),
+        ).then((media) => setBanner(media || null)),
+    });
+  };
+
   const handleSubmit = () => {
     setIsDisabled(true);
 
@@ -232,6 +263,13 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
                 src={require('@phosphor-icons/core/regular/x.svg')}
                 onClick={handleClearBanner}
               />
+              <button
+                type='button'
+                className='absolute bottom-1 left-1'
+                onClick={handleChangeDescriptionClick}
+              >
+                <AltIndicator warning={!banner.description} />
+              </button>
             </>
           ) : (
             <UploadButton disabled={isUploading} onSelectFile={handleFiles} />

packages/pl-fe/src/modals/alt-text-modal.tsx

@@ -40,18 +40,11 @@ interface PreviewProps {
   media: MediaAttachment;
   position: FocalPoint;
   onPositionChange: (position: FocalPoint) => void;
-  withPosition: boolean;
 }
 
-const Preview: React.FC<PreviewProps> = ({
-  media,
-  position: [x, y],
-  onPositionChange,
-  withPosition,
-}) => {
+const Preview: React.FC<PreviewProps> = ({ media, position: [x, y], onPositionChange }) => {
   const { focalPoint } = useFeatures();
-  const withFocalPoint =
-    withPosition && focalPoint && (media.type === 'image' || media.type === 'gifv');
+  const withFocalPoint = focalPoint && (media.type === 'image' || media.type === 'gifv');
 
   // const [dragging, setDragging] = useState(false);
   const nodeRef = useRef<HTMLDivElement | null>(null);
@@ -189,7 +182,6 @@ interface AltTextModalProps {
   onSubmit: (description: string, position: FocalPoint) => Promise<void>;
   previousDescription: string;
   previousPosition: FocalPoint;
-  withPosition: boolean;
 }
 
 const AltTextModal: React.FC<BaseModalProps & AltTextModalProps> = ({
@@ -200,7 +192,6 @@ const AltTextModal: React.FC<BaseModalProps & AltTextModalProps> = ({
   onSubmit,
   previousDescription,
   previousPosition,
-  withPosition,
 }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
@@ -269,12 +260,7 @@ const AltTextModal: React.FC<BaseModalProps & AltTextModalProps> = ({
       secondaryText={<FormattedMessage id='alt_text_modal.cancel' defaultMessage='Cancel' />}
     >
       <Stack space={2}>
-        <Preview
-          media={media}
-          withPosition={withPosition}
-          position={position}
-          onPositionChange={handlePositionChange}
-        />
+        <Preview media={media} position={position} onPositionChange={handlePositionChange} />
         <form>
           <FormGroup
             labelText={intl.formatMessage(