Move DM conversation/timeline tab to column settings switch

app/javascript/flavours/glitch/features/direct_timeline/components/column_settings.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import SettingToggle from 'flavours/glitch/features/notifications/components/setting_toggle';
 import SettingText from '../../../components/setting_text';
 
 const messages = defineMessages({
@@ -23,6 +24,12 @@ class ColumnSettings extends React.PureComponent {
 
     return (
       <div>
+        <span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
+
+        <div className='column-settings__row'>
+          <SettingToggle settings={settings} settingPath={['conversations']} onChange={onChange} label={<FormattedMessage id='direct.group_by_conversations' defaultMessage='Group by conversation' />} />
+        </div>
+
         <span className='column-settings__section'><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
 
         <div className='column-settings__row'>

app/javascript/flavours/glitch/features/direct_timeline/index.js

@@ -10,7 +10,6 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectDirectStream } from 'flavours/glitch/actions/streaming';
-import { changeSetting } from 'flavours/glitch/actions/settings';
 import ConversationsListContainer from './containers/conversations_list_container';
 
 const messages = defineMessages({
@@ -99,14 +98,6 @@ class DirectTimeline extends React.PureComponent {
     this.props.dispatch(expandConversations({ maxId }));
   }
 
-  handleTimelineClick = () => {
-    this.props.dispatch(changeSetting(['direct', 'conversations'], false));
-  }
-
-  handleConversationsClick = () => {
-    this.props.dispatch(changeSetting(['direct', 'conversations'], true));
-  }
-
   render () {
     const { intl, hasUnread, columnId, multiColumn, conversationsMode } = this.props;
     const pinned = !!columnId;
@@ -130,6 +121,7 @@ class DirectTimeline extends React.PureComponent {
           scrollKey={`direct_timeline-${columnId}`}
           timelineId='direct'
           onLoadMore={this.handleLoadMoreTimeline}
+          prepend={<div className='follow_requests-unlocked_explanation'><span><FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> <a href='/terms' target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a></span></div>}
           emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
         />
       );
@@ -150,27 +142,6 @@ class DirectTimeline extends React.PureComponent {
           <ColumnSettingsContainer />
         </ColumnHeader>
 
-        <div className='notification__filter-bar'>
-          <button
-            className={conversationsMode ? 'active' : ''}
-            onClick={this.handleConversationsClick}
-          >
-            <FormattedMessage
-              id='direct.conversations_mode'
-              defaultMessage='Conversations'
-            />
-          </button>
-          <button
-            className={conversationsMode ? '' : 'active'}
-            onClick={this.handleTimelineClick}
-          >
-            <FormattedMessage
-              id='direct.timeline_mode'
-              defaultMessage='Timeline'
-            />
-          </button>
-        </div>
-
         {contents}
       </Column>
     );