[feature] Always show content warning: use existing glitch feature (#1)

The modifications you made are somewhat janky; for instance, editing a toot with an existing content warning makes the UI look very weird and doesn't quite work.

Glitch already has a feature for this, so simply turn it on by default. This should do the same thing.

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/1
Co-authored-by: julia <midnight@trainwit.ch>
Co-committed-by: julia <midnight@trainwit.ch>

app/javascript/flavours/glitch/actions/compose.js

@@ -57,6 +57,7 @@ export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 
 export const COMPOSE_ADVANCED_OPTIONS_CHANGE = 'COMPOSE_ADVANCED_OPTIONS_CHANGE';
 export const COMPOSE_SENSITIVITY_CHANGE  = 'COMPOSE_SENSITIVITY_CHANGE';
+export const COMPOSE_SPOILERNESS_CHANGE  = 'COMPOSE_SPOILERNESS_CHANGE';
 export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
 export const COMPOSE_VISIBILITY_CHANGE   = 'COMPOSE_VISIBILITY_CHANGE';
 export const COMPOSE_LISTABILITY_CHANGE  = 'COMPOSE_LISTABILITY_CHANGE';
@@ -171,7 +172,8 @@ export function submitCompose(routerHistory) {
     let status     = getState().getIn(['compose', 'text'], '');
     const media    = getState().getIn(['compose', 'media_attachments']);
     const statusId = getState().getIn(['compose', 'id'], null);
-    let spoilerText = getState().getIn(['compose', 'spoiler_text'], '');
+    const spoilers = getState().getIn(['compose', 'spoiler']) || getState().getIn(['local_settings', 'always_show_spoilers_field']);
+    let spoilerText = spoilers ? getState().getIn(['compose', 'spoiler_text'], '') : '';
 
     if ((!status || !status.length) && media.size === 0) {
       return;
@@ -743,6 +745,12 @@ export const changeComposeLanguage = language => ({
   language,
 });
 
+export function changeComposeSpoilerness() {
+  return {
+    type: COMPOSE_SPOILERNESS_CHANGE,
+  };
+}
+
 export function changeComposeSpoilerText(text) {
   return {
     type: COMPOSE_SPOILER_TEXT_CHANGE,

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

@@ -79,6 +79,7 @@ class ComposeForm extends ImmutablePureComponent {
     spoilersAlwaysOn: PropTypes.bool,
     mediaDescriptionConfirmation: PropTypes.bool,
     preselectOnReply: PropTypes.bool,
+    onChangeSpoilerness: PropTypes.func,
     onChangeVisibility: PropTypes.func,
     onMediaDescriptionConfirm: PropTypes.func,
   };
@@ -291,6 +292,7 @@ class ComposeForm extends ImmutablePureComponent {
       intl,
       isSubmitting,
       layout,
+      onChangeSpoilerness,
       onClearSuggestions,
       onFetchSuggestions,
       onPaste,
@@ -298,8 +300,10 @@ class ComposeForm extends ImmutablePureComponent {
       sensitive,
       showSearch,
       sideArm,
+      spoiler,
       spoilerText,
       suggestions,
+      spoilersAlwaysOn,
       isEditing,
     } = this.props;
 
@@ -311,12 +315,13 @@ class ComposeForm extends ImmutablePureComponent {
 
         <ReplyIndicatorContainer />
 
-        <div className={'spoiler-input spoiler-input--visible'} ref={this.setRef}>
+        <div className={`spoiler-input ${spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef} aria-hidden={!this.props.spoiler}>
           <AutosuggestInput
             placeholder={intl.formatMessage(messages.spoiler_placeholder)}
             value={spoilerText}
             onChange={this.handleChangeSpoiler}
             onKeyDown={this.handleKeyDown}
+            disabled={!spoiler}
             ref={this.handleRefSpoilerText}
             suggestions={suggestions}
             onSuggestionsFetchRequested={onFetchSuggestions}
@@ -359,9 +364,11 @@ class ComposeForm extends ImmutablePureComponent {
           <OptionsContainer
             advancedOptions={advancedOptions}
             disabled={isSubmitting}
+            onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
             onUpload={onPaste}
             isEditing={isEditing}
-            sensitive={sensitive || (spoilerText && spoilerText.length > 0)}
+            sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
+            spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
           />
           <div className='character-counter__wrapper'>
             <CharacterCounter text={countText} max={maxChars} />

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

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import {
   changeCompose,
   changeComposeSpoilerText,
+  changeComposeSpoilerness,
   changeComposeVisibility,
   clearComposeSuggestions,
   fetchComposeSuggestions,
@@ -116,6 +117,10 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(insertEmojiCompose(position, emoji));
   },
 
+  onChangeSpoilerness() {
+    dispatch(changeComposeSpoilerness());
+  },
+
   onChangeVisibility(value) {
     dispatch(changeComposeVisibility(value));
   },

app/javascript/flavours/glitch/features/ui/index.jsx

@@ -13,7 +13,7 @@ import { debounce } from 'lodash';
 import { HotKeys } from 'react-hotkeys';
 
 import { changeLayout } from 'flavours/glitch/actions/app';
-import { uploadCompose, resetCompose } from 'flavours/glitch/actions/compose';
+import { uploadCompose, resetCompose, changeComposeSpoilerness } from 'flavours/glitch/actions/compose';
 import { clearHeight } from 'flavours/glitch/actions/height_cache';
 import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
 import { expandNotifications, notificationsSetVisibility } from 'flavours/glitch/actions/notifications';
@@ -518,6 +518,11 @@ class UI extends Component {
     this.props.dispatch(resetCompose());
   };
 
+  handleHotkeyToggleComposeSpoilers = e => {
+    e.preventDefault();
+    this.props.dispatch(changeComposeSpoilerness());
+  };
+
   handleHotkeyFocusColumn = e => {
     const index  = (e.key * 1) + 1; // First child is drawer, skip that
     const column = this.node.querySelector(`.column:nth-child(${index})`);

app/javascript/flavours/glitch/reducers/compose.js

@@ -30,6 +30,7 @@ import {
   COMPOSE_TAG_HISTORY_UPDATE,
   COMPOSE_ADVANCED_OPTIONS_CHANGE,
   COMPOSE_SENSITIVITY_CHANGE,
+  COMPOSE_SPOILERNESS_CHANGE,
   COMPOSE_SPOILER_TEXT_CHANGE,
   COMPOSE_VISIBILITY_CHANGE,
   COMPOSE_LANGUAGE_CHANGE,
@@ -382,6 +383,15 @@ export default function compose(state = initialState, action) {
 
       map.set('idempotencyKey', uuid());
     });
+  case COMPOSE_SPOILERNESS_CHANGE:
+    return state.withMutations(map => {
+      map.set('spoiler', !state.get('spoiler'));
+      map.set('idempotencyKey', uuid());
+
+      if (!state.get('sensitive') && state.get('media_attachments').size >= 1) {
+        map.set('sensitive', true);
+      }
+    });
   case COMPOSE_SPOILER_TEXT_CHANGE:
     return state
       .set('spoiler_text', action.text)

app/javascript/flavours/glitch/reducers/local_settings.js

@@ -11,7 +11,7 @@ const initialState = ImmutableMap({
   side_arm  : 'none',
   side_arm_reply_mode : 'keep',
   show_reply_count : false,
-  always_show_spoilers_field: false,
+  always_show_spoilers_field: true,
   confirm_missing_media_description: false,
   confirm_boost_missing_media_description: false,
   confirm_before_clearing_draft: true,