add posting language user setting

app/soapbox/__fixtures__/intlMessages.json

@@ -323,7 +323,10 @@
     "preferences.fields.demetricator_label": "Use Demetricator",
     "preferences.fields.dyslexic_font_label": "Dyslexic mode",
     "preferences.fields.expand_spoilers_label": "Always expand posts marked with content warnings",
-    "preferences.fields.language_label": "Language",
+    "preferences.fields.language_label": "Interface language",
+    "preferences.fields.language_hint": "The language of the user interface, e-mails and push notifications",
+    "preferences.fields.post_language_label": "Posting language",
+    "preferences.fields.post_language_hint": "The language of your posts cannot currently be detected automatically",
     "preferences.fields.privacy_label": "Post privacy",
     "preferences.fields.reduce_motion_label": "Reduce motion in animations",
     "preferences.fields.system_font_label": "Use system\"s default font",

app/soapbox/actions/compose.js

@@ -178,6 +178,7 @@ export function submitCompose(routerHistory, group) {
       visibility: getState().getIn(['compose', 'privacy']),
       content_type: getState().getIn(['compose', 'content_type']),
       poll: getState().getIn(['compose', 'poll'], null),
+      language: getState().getIn(['settings', 'posting_language'], null),
       group_id: group ? group.get('id') : null,
     }, {
       headers: {

app/soapbox/actions/settings.js

@@ -22,6 +22,7 @@ const defaultSettings = ImmutableMap({
   defaultPrivacy: 'public',
   themeMode: 'light',
   locale: navigator.language.split(/[-_]/)[0] || 'en',
+  posting_language: navigator.language.split(/[-_]/)[0] || '',
   explanationBox: true,
 
   systemFont: false,

app/soapbox/features/forms/index.js

@@ -193,10 +193,11 @@ export class SelectDropdown extends ImmutablePureComponent {
   static propTypes = {
     label: FormPropTypes.label,
     items: PropTypes.object.isRequired,
+    hint: PropTypes.node,
   }
 
   render() {
-    const { label, items, ...props } = this.props;
+    const { label, items, hint, ...props } = this.props;
 
     const optionElems = Object.keys(items).map(item => (
       <option key={item} value={item}>{items[item]}</option>
@@ -205,7 +206,9 @@ export class SelectDropdown extends ImmutablePureComponent {
     const selectElem = <select {...props}>{optionElems}</select>;
 
     return label ? (
-      <LabelInputContainer label={label}>{selectElem}</LabelInputContainer>
+      <LabelInputContainer label={label}>{selectElem}
+        {hint && <span className='hint'>{hint}</span>}
+      </LabelInputContainer>
     ) : selectElem;
   }
 

app/soapbox/features/preferences/index.js

@@ -113,12 +113,22 @@ class Preferences extends ImmutablePureComponent {
       <Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <SimpleForm>
           <FieldsGroup>
-            <SelectDropdown
-              label={<FormattedMessage id='preferences.fields.language_label' defaultMessage='Language' />}
-              items={languages}
-              defaultValue={settings.get('locale')}
-              onChange={this.onSelectChange(['locale'])}
-            />
+            <div className='select-languages__container'>
+              <SelectDropdown
+                label={<FormattedMessage id='preferences.fields.language_label' defaultMessage='Interface language' />}
+                hint={<FormattedMessage id='preferences.fields.language_hint' defaultMessage='The language of the user interface, e-mails and push notifications' />}
+                items={languages}
+                defaultValue={settings.get('locale')}
+                onChange={this.onSelectChange(['locale'])}
+              />
+              <SelectDropdown
+                label={<FormattedMessage id='preferences.fields.posting_language_label' defaultMessage='Posting language' />}
+                hint={<FormattedMessage id='preferences.fields.posting_language_hint' defaultMessage='The language of your posts cannot currently be detected automatically' />}
+                items={languages}
+                defaultValue={settings.get('posting_language')}
+                onChange={this.onSelectChange(['posting_language'])}
+              />
+            </div>
           </FieldsGroup>
 
           <FieldsGroup>

app/styles/application.scss

@@ -71,3 +71,4 @@
 @import 'components/error-boundary';
 @import 'components/video-player';
 @import 'components/audio-player';
+@import 'components/language-preferences';

app/styles/components/language-preferences.scss

@@ -0,0 +1,10 @@
+.select-languages__container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  .label_input {
+    width: 50%;
+    padding-right: 20px;
+  }
+}