Move missing description confirmation setting back to Settings, add optional indicator for attachments without description

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/upload.tsx

@@ -10,14 +10,14 @@ import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { spring } from 'react-motion';
 
 import { openModal } from 'soapbox/actions/modals';
 import Blurhash from 'soapbox/components/blurhash';
 import { HStack, Icon, IconButton } from 'soapbox/components/ui';
 import Motion from 'soapbox/features/ui/util/optional-motion';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useSettings } from 'soapbox/hooks';
 import { Attachment } from 'soapbox/types/entities';
 
 export const MIMETYPE_ICONS: Record<string, string> = {
@@ -55,6 +55,7 @@ export const MIMETYPE_ICONS: Record<string, string> = {
 };
 
 const messages = defineMessages({
+  altWarning: { id: 'upload_form.alt_warning', defaultMessage: 'This attachment doesn\'t have a description' },
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
   delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
   preview: { id: 'upload_form.preview', defaultMessage: 'Preview' },
@@ -80,6 +81,8 @@ const Upload: React.FC<IUpload> = ({
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
+  const { missingDescriptionModal } = useSettings();
+
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
   const [dirtyDescription, setDirtyDescription] = useState<string | null>(null);
@@ -200,6 +203,19 @@ const Upload: React.FC<IUpload> = ({
               </div>
             )}
 
+            {missingDescriptionModal && !description && (
+              <span
+                title={intl.formatMessage(messages.altWarning)}
+                className={clsx('absolute bottom-2 left-2 z-10 inline-flex items-center gap-1 rounded bg-gray-900 px-2 py-1 text-xs font-medium uppercase text-white transition-opacity duration-100 ease-linear', {
+                  'opacity-0 pointer-events-none': active,
+                  'opacity-100': !active,
+                })}
+              >
+                <Icon className='h-4 w-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
+                <FormattedMessage id='upload_form.alt_label' defaultMessage='Alt' />
+              </span>
+            )}
+
             <div className='compose-form__upload-preview'>
               {mediaType === 'video' && (
                 <video autoPlay playsInline muted loop>

src/features/developers/settings-store.tsx

@@ -118,10 +118,6 @@ const SettingsStore: React.FC = () => {
           <SettingToggle settings={settings} settingPath={['unfollowModal']} onChange={onToggleChange} />
         </ListItem>
 
-        <ListItem label={<FormattedMessage id='preferences.fields.missing_description_modal_label' defaultMessage='Show confirmation dialog before sending a post without media descriptions' />}>
-          <SettingToggle settings={settings} settingPath={['missingDescriptionModal']} onChange={onToggleChange} />
-        </ListItem>
-
         <ListItem label={<FormattedMessage id='preferences.fields.reduce_motion_label' defaultMessage='Reduce motion in animations' />}>
           <SettingToggle settings={settings} settingPath={['reduceMotion']} onChange={onToggleChange} />
         </ListItem>

src/features/preferences/index.tsx

@@ -190,6 +190,10 @@ const Preferences = () => {
         <ListItem label={<FormattedMessage id='preferences.fields.delete_modal_label' defaultMessage='Show confirmation dialog before deleting a post' />}>
           <SettingToggle settings={settings} settingPath={['deleteModal']} onChange={onToggleChange} />
         </ListItem>
+
+        <ListItem label={<FormattedMessage id='preferences.fields.missing_description_modal_label' defaultMessage='Show confirmation dialog before sending a post without media descriptions' />}>
+          <SettingToggle settings={settings} settingPath={['missingDescriptionModal']} onChange={onToggleChange} />
+        </ListItem>
       </List>
 
       <List>

src/locales/en.json

@@ -1590,6 +1590,8 @@
   "upload_error.poll": "File upload not allowed with polls.",
   "upload_error.video_duration_limit": "Video exceeds the current duration limit ({limit, plural, one {# second} other {# seconds}})",
   "upload_error.video_size_limit": "Video exceeds the current file size limit ({limit})",
+  "upload_form.alt_label": "Alt",
+  "upload_form.alt_warning": "This attachment doesn't have a description",
   "upload_form.description": "Describe for the visually impaired",
   "upload_form.preview": "Preview",
   "upload_form.undo": "Delete",