[WiP] Reimplement sensitive checkbox

app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx

@@ -0,0 +1,57 @@
+import { useCallback } from 'react';
+
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { changeComposeSensitivity } from 'flavours/glitch/actions/compose';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+const messages = defineMessages({
+  marked: {
+    id: 'compose_form.sensitive.marked',
+    defaultMessage: '{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}',
+  },
+  unmarked: {
+    id: 'compose_form.sensitive.unmarked',
+    defaultMessage: '{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}',
+  },
+});
+
+export const SensitiveButton = () => {
+  const intl = useIntl();
+
+  const spoilersAlwaysOn = useAppSelector((state) => state.getIn(['local_settings', 'always_show_spoilers_field']));
+  const spoilerText = useAppSelector((state) => state.getIn(['compose', 'spoiler_text']));
+  const sensitive = useAppSelector((state) => state.getIn(['compose', 'sensitive']));
+  const disabled = useAppSelector((state) => state.getIn(['compose', 'spoiler']));
+  const mediaCount = useAppSelector((state) => state.getIn(['compose', 'media_attachments']).size);
+
+  const active = sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0);
+
+  const dispatch = useAppDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(changeComposeSensitivity());
+  }, [dispatch]);
+
+  return (
+    <div className='compose-form__sensitive-button'>
+      <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked, { count: mediaCount })}>
+        <input
+          name='mark-sensitive'
+          type='checkbox'
+          checked={active}
+          onChange={handleClick}
+          disabled={disabled}
+        />
+
+        <FormattedMessage
+          id='compose_form.sensitive.hide'
+          defaultMessage='{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}'
+          values={{ count: mediaCount }}
+        />
+      </label>
+    </div>
+  );
+};

app/javascript/flavours/glitch/features/compose/components/upload_form.jsx

@@ -4,6 +4,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import UploadContainer from '../containers/upload_container';
 import UploadProgressContainer from '../containers/upload_progress_container';
 
+import { SensitiveButton } from './sensitive_button';
+
 export default class UploadForm extends ImmutablePureComponent {
 
   static propTypes = {
@@ -24,6 +26,8 @@ export default class UploadForm extends ImmutablePureComponent {
             ))}
           </div>
         )}
+
+        {!mediaIds.isEmpty() && <SensitiveButton />}
       </>
     );
   }

app/javascript/flavours/glitch/features/compose/containers/upload_container.js

@@ -5,7 +5,7 @@ import Upload from '../components/upload';
 
 const mapStateToProps = (state, { id }) => ({
   media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
-  sensitive: state.getIn(['compose', 'spoiler']),
+  sensitive: state.getIn(['compose', 'sensitive']),
 });
 
 const mapDispatchToProps = dispatch => ({

app/javascript/flavours/glitch/locales/en.json

@@ -14,6 +14,9 @@
   "column_subheading.lists": "Lists",
   "column_subheading.navigation": "Navigation",
   "community.column_settings.allow_local_only": "Show local-only toots",
+  "compose_form.sensitive.hide": "{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}",
+  "compose_form.sensitive.marked": "{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}",
+  "compose_form.sensitive.unmarked": "{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}",
   "confirmation_modal.do_not_ask_again": "Do not ask for confirmation again",
   "confirmations.deprecated_settings.confirm": "Use Mastodon preferences",
   "confirmations.deprecated_settings.message": "Some of the glitch-soc device-specific {app_settings} you are using have been replaced by Mastodon {preferences} and will be overriden:",

app/javascript/flavours/glitch/styles/components.scss

@@ -698,6 +698,44 @@ body > [data-popper-placement] {
     }
   }
 
+  // glitch: reintroduce sensitive button
+  &__sensitive-button {
+    padding: 0 12px;
+
+    input[type='checkbox'] {
+      appearance: none;
+      display: block;
+      border: 1px solid $ui-primary-color;
+      box-sizing: border-box;
+      width: 17px;
+      height: 17px;
+      border-radius: 4px;
+      flex: 0 0 auto;
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: $highlight-text-color;
+        border-width: 4px;
+      }
+
+      &:checked {
+        background-color: $highlight-text-color;
+        border-color: $highlight-text-color;
+      }
+
+      &::-moz-focus-inner {
+        outline: 0 !important;
+        border: 0;
+      }
+
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+    }
+  }
+
   &__footer {
     display: flex;
     flex-direction: column;