Merge branch 'suggestions-v2' into 'develop'

Suggestions improvements

See merge request soapbox-pub/soapbox-fe!767

app/soapbox/actions/suggestions.js

@@ -1,6 +1,7 @@
 import api from '../api';
 import { importFetchedAccounts } from './importer';
 import { isLoggedIn } from 'soapbox/utils/auth';
+import { getFeatures } from 'soapbox/utils/features';
 
 export const SUGGESTIONS_FETCH_REQUEST = 'SUGGESTIONS_FETCH_REQUEST';
 export const SUGGESTIONS_FETCH_SUCCESS = 'SUGGESTIONS_FETCH_SUCCESS';
@@ -8,38 +9,48 @@ export const SUGGESTIONS_FETCH_FAIL    = 'SUGGESTIONS_FETCH_FAIL';
 
 export const SUGGESTIONS_DISMISS = 'SUGGESTIONS_DISMISS';
 
+export const SUGGESTIONS_V2_FETCH_REQUEST = 'SUGGESTIONS_V2_FETCH_REQUEST';
+export const SUGGESTIONS_V2_FETCH_SUCCESS = 'SUGGESTIONS_V2_FETCH_SUCCESS';
+export const SUGGESTIONS_V2_FETCH_FAIL    = 'SUGGESTIONS_V2_FETCH_FAIL';
+
+export function fetchSuggestionsV1() {
+  return (dispatch, getState) => {
+    dispatch({ type: SUGGESTIONS_FETCH_REQUEST, skipLoading: true });
+    api(getState).get('/api/v1/suggestions').then(({ data: accounts }) => {
+      dispatch(importFetchedAccounts(accounts));
+      dispatch({ type: SUGGESTIONS_FETCH_SUCCESS, accounts, skipLoading: true });
+    }).catch(error => {
+      dispatch({ type: SUGGESTIONS_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
+    });
+  };
+}
+
+export function fetchSuggestionsV2() {
+  return (dispatch, getState) => {
+    dispatch({ type: SUGGESTIONS_V2_FETCH_REQUEST, skipLoading: true });
+    api(getState).get('/api/v2/suggestions').then(({ data: suggestions }) => {
+      const accounts = suggestions.map(({ account }) => account);
+      dispatch(importFetchedAccounts(accounts));
+      dispatch({ type: SUGGESTIONS_V2_FETCH_SUCCESS, suggestions, skipLoading: true });
+    }).catch(error => {
+      dispatch({ type: SUGGESTIONS_V2_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
+    });
+  };
+}
+
 export function fetchSuggestions() {
   return (dispatch, getState) => {
-    dispatch(fetchSuggestionsRequest());
+    const state = getState();
+    const instance = state.get('instance');
+    const features = getFeatures(instance);
 
-    api(getState).get('/api/v1/suggestions').then(response => {
+    if (features.suggestionsV2) {
-      dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchSuggestionsV2());
-      dispatch(fetchSuggestionsSuccess(response.data));
+    } else if (features.suggestions) {
-    }).catch(error => dispatch(fetchSuggestionsFail(error)));
+      dispatch(fetchSuggestionsV1());
-  };
+    } else {
-}
+      // Do nothing
-
+    }
-export function fetchSuggestionsRequest() {
-  return {
-    type: SUGGESTIONS_FETCH_REQUEST,
-    skipLoading: true,
-  };
-}
-
-export function fetchSuggestionsSuccess(accounts) {
-  return {
-    type: SUGGESTIONS_FETCH_SUCCESS,
-    accounts,
-    skipLoading: true,
-  };
-}
-
-export function fetchSuggestionsFail(error) {
-  return {
-    type: SUGGESTIONS_FETCH_FAIL,
-    error,
-    skipLoading: true,
-    skipAlert: true,
   };
 }
 

app/soapbox/actions/suggestions_v2.js

@@ -1,18 +0,0 @@
-import api from '../api';
-import { importFetchedAccount } from './importer';
-
-export const SUGGESTIONS_V2_FETCH_REQUEST = 'SUGGESTIONS_V2_FETCH_REQUEST';
-export const SUGGESTIONS_V2_FETCH_SUCCESS = 'SUGGESTIONS_V2_FETCH_SUCCESS';
-export const SUGGESTIONS_V2_FETCH_FAIL    = 'SUGGESTIONS_V2_FETCH_FAIL';
-
-export function fetchSuggestions() {
-  return (dispatch, getState) => {
-    dispatch({ type: SUGGESTIONS_V2_FETCH_REQUEST, skipLoading: true });
-    api(getState).get('/api/v2/suggestions').then(({ data: suggestions }) => {
-      suggestions.forEach(({ account }) => dispatch(importFetchedAccount(account)));
-      dispatch({ type: SUGGESTIONS_V2_FETCH_SUCCESS, suggestions, skipLoading: true });
-    }).catch(error => {
-      dispatch({ type: SUGGESTIONS_V2_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
-    });
-  };
-}

app/soapbox/features/follow_recommendations/components/account.js

@@ -66,7 +66,7 @@ class Account extends ImmutablePureComponent {
     return (
       <div className='account follow-recommendations-account'>
         <div className='account__wrapper'>
-          <Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}>
+          <Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
             <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
 
             <DisplayName account={account} />

app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedMessage } from 'react-intl';
+import { fetchSuggestions } from 'soapbox/actions/suggestions';
+import Account from './account';
+import LoadingIndicator from 'soapbox/components/loading_indicator';
+
+const mapStateToProps = state => ({
+  suggestions: state.getIn(['suggestions', 'items']),
+  isLoading: state.getIn(['suggestions', 'isLoading']),
+});
+
+export default @connect(mapStateToProps)
+class FollowRecommendationsList extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    suggestions: ImmutablePropTypes.list,
+    isLoading: PropTypes.bool,
+  };
+
+  componentDidMount() {
+    const { dispatch, suggestions } = this.props;
+
+    // Don't re-fetch if we're e.g. navigating backwards to this page,
+    // since we don't want followed accounts to disappear from the list
+    if (suggestions.size === 0) {
+      dispatch(fetchSuggestions(true));
+    }
+  }
+
+  render() {
+    const { suggestions, isLoading } = this.props;
+
+    if (isLoading) {
+      return (
+        <div className='column-list'>
+          <LoadingIndicator />
+        </div>
+      );
+    }
+
+    return (
+      <div className='column-list'>
+        {suggestions.size > 0 ? suggestions.map(suggestion => (
+          <Account key={suggestion.get('account')} id={suggestion.get('account')} />
+        )) : (
+          <div className='column-list__empty-message'>
+            <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
+          </div>
+        )}
+      </div>
+    );
+
+  }
+
+}

app/soapbox/features/follow_recommendations/index.js

@@ -1,42 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-import { fetchSuggestions } from 'soapbox/actions/suggestions_v2';
 import Column from 'soapbox/features/ui/components/column';
-import Account from './components/account';
 import Button from 'soapbox/components/button';
+import FollowRecommendationsList from './components/follow_recommendations_list';
 
-const mapStateToProps = state => ({
+export default class FollowRecommendations extends React.Component {
-  suggestions: state.getIn(['suggestions_v2', 'items']),
-  isLoading: state.getIn(['suggestions_v2', 'isLoading']),
-});
-
-export default @connect(mapStateToProps)
-class FollowRecommendations extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object.isRequired,
   };
 
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    suggestions: ImmutablePropTypes.list,
-    isLoading: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { dispatch, suggestions } = this.props;
-
-    // Don't re-fetch if we're e.g. navigating backwards to this page,
-    // since we don't want followed accounts to disappear from the list
-    if (suggestions.size === 0) {
-      dispatch(fetchSuggestions(true));
-    }
-  }
-
   handleDone = () => {
     const { router } = this.context;
 
@@ -44,8 +18,6 @@ class FollowRecommendations extends ImmutablePureComponent {
   }
 
   render() {
-    const { suggestions, isLoading } = this.props;
-
     return (
       <Column>
         <div className='scrollable follow-recommendations-container'>
@@ -54,23 +26,13 @@ class FollowRecommendations extends ImmutablePureComponent {
             <p><FormattedMessage id='follow_recommendations.lead' defaultMessage="Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!" /></p>
           </div>
 
-          {!isLoading && (
+          <FollowRecommendationsList />
-            <>
-              <div className='column-list'>
-                {suggestions.size > 0 ? suggestions.map(suggestion => (
-                  <Account key={suggestion.get('account')} id={suggestion.get('account')} />
-                )) : (
-                  <div className='column-list__empty-message'>
-                    <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
-                  </div>
-                )}
-              </div>
 
           <div className='column-actions'>
-                <Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button>
+            <Button onClick={this.handleDone}>
+              <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
+            </Button>
           </div>
-            </>
-          )}
         </div>
       </Column>
     );

app/soapbox/features/home_timeline/index.js

@@ -4,20 +4,35 @@ import { expandHomeTimeline } from '../../actions/timelines';
 import PropTypes from 'prop-types';
 import StatusListContainer from '../ui/containers/status_list_container';
 import Column from '../../components/column';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import HomeColumnHeader from '../../components/home_column_header';
 import { Link } from 'react-router-dom';
+import Button from 'soapbox/components/button';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { getFeatures } from 'soapbox/utils/features';
+
+function FollowRecommendationsList() {
+  return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_list');
+}
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
 });
 
-const mapStateToProps = state => ({
+const mapStateToProps = state => {
+  const instance = state.get('instance');
+  const features = getFeatures(instance);
+
+  return {
     hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
     isPartial: state.getIn(['timelines', 'home', 'isPartial']),
     siteTitle: state.getIn(['instance', 'title']),
-});
+    isEmpty: state.getIn(['timelines', 'home', 'items'], ImmutableOrderedSet()).isEmpty(),
+    features,
+  };
+};
 
 export default @connect(mapStateToProps)
 @injectIntl
@@ -29,8 +44,14 @@ class HomeTimeline extends React.PureComponent {
     hasUnread: PropTypes.bool,
     isPartial: PropTypes.bool,
     siteTitle: PropTypes.string,
+    isEmpty: PropTypes.bool,
+    features: PropTypes.object.isRequired,
   };
 
+  state = {
+    done: false,
+  }
+
   handleLoadMore = maxId => {
     this.props.dispatch(expandHomeTimeline({ maxId }));
   }
@@ -68,20 +89,51 @@ class HomeTimeline extends React.PureComponent {
     }
   }
 
+  handleDone = e => {
+    this.props.dispatch(expandHomeTimeline());
+    this.setState({ done: true });
+  }
+
+  renderFollowRecommendations = () => {
+    return (
+      <div className='scrollable follow-recommendations-container'>
+        <div className='column-title'>
+          <h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
+          <p><FormattedMessage id='follow_recommendations.lead' defaultMessage="Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!" /></p>
+        </div>
+
+        <BundleContainer fetchComponent={FollowRecommendationsList}>
+          {Component => <Component />}
+        </BundleContainer>
+
+        <div className='column-actions'>
+          <Button onClick={this.handleDone}>
+            <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
   render() {
-    const { intl, hasUnread, siteTitle } = this.props;
+    const { intl, hasUnread, siteTitle, isEmpty, features } = this.props;
+    const { done } = this.state;
 
     return (
       <Column label={intl.formatMessage(messages.title)}>
         <HomeColumnHeader activeItem='home' active={hasUnread}>
           <ColumnSettingsContainer />
         </HomeColumnHeader>
+        {(features.suggestions && isEmpty && !done) ? (
+          this.renderFollowRecommendations()
+        ) : (
           <StatusListContainer
             scrollKey='home_timeline'
             onLoadMore={this.handleLoadMore}
             timelineId='home'
             emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
           />
+        )}
       </Column>
     );
   }

app/soapbox/features/ui/components/who_to_follow_panel.js

@@ -43,10 +43,10 @@ class WhoToFollowPanel extends ImmutablePureComponent {
         </div>
         <div className='wtf-panel__content'>
           <div className='wtf-panel__list'>
-            {suggestions && suggestions.map(accountId => (
+            {suggestions && suggestions.map(suggestion => (
               <AccountContainer
-                key={accountId}
+                key={suggestion.get('account')}
-                id={accountId}
+                id={suggestion.get('account')}
                 actionIcon='times'
                 actionTitle={intl.formatMessage(messages.dismissSuggestion)}
                 onActionClick={dismissSuggestion}

app/soapbox/pages/default_page.js

@@ -43,9 +43,9 @@ class DefaultPage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
+                {me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
                 {showTrendsPanel && <TrendsPanel limit={3} key='trends-panel' />}
                 {showWhoToFollowPanel && <WhoToFollowPanel limit={5} key='wtf-panel' />}
-                {me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
                 <PromoPanel key='promo-panel' />
                 <LinkFooter key='link-footer' />
               </div>

app/soapbox/pages/home_page.js

@@ -86,9 +86,9 @@ class HomePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
+                {me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
                 {showTrendsPanel && <TrendsPanel limit={3} key='trends-panel' />}
                 {showWhoToFollowPanel && <WhoToFollowPanel limit={5} key='wtf-panel' />}
-                {me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
                 <PromoPanel key='promo-panel' />
                 <LinkFooter key='link-footer' />
               </div>

app/soapbox/pages/remote_instance_page.js

@@ -1,12 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import WhoToFollowPanel from 'soapbox/features/ui/components/who_to_follow_panel';
-import TrendsPanel from 'soapbox/features/ui/components/trends_panel';
 import PromoPanel from 'soapbox/features/ui/components/promo_panel';
 import FeaturesPanel from 'soapbox/features/ui/components/features_panel';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
-import { getFeatures } from 'soapbox/utils/features';
 import InstanceInfoPanel from 'soapbox/features/ui/components/instance_info_panel';
 import InstanceModerationPanel from 'soapbox/features/ui/components/instance_moderation_panel';
 import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
@@ -15,12 +12,9 @@ import { isAdmin } from 'soapbox/utils/accounts';
 const mapStateToProps = state => {
   const me = state.get('me');
   const account = state.getIn(['accounts', me]);
-  const features = getFeatures(state.get('instance'));
 
   return {
     me,
-    showTrendsPanel: features.trends,
-    showWhoToFollowPanel: features.suggestions,
     disclosed: federationRestrictionsDisclosed(state),
     isAdmin: isAdmin(account),
   };
@@ -30,7 +24,7 @@ export default @connect(mapStateToProps)
 class RemoteInstancePage extends ImmutablePureComponent {
 
   render() {
-    const { me, children, showTrendsPanel, showWhoToFollowPanel, params: { instance: host }, disclosed, isAdmin } = this.props;
+    const { me, children, params: { instance: host }, disclosed, isAdmin } = this.props;
 
     return (
       <div className='page'>
@@ -52,8 +46,6 @@ class RemoteInstancePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
-                {showTrendsPanel && <TrendsPanel limit={3} key='trends-panel' />}
-                {showWhoToFollowPanel && <WhoToFollowPanel limit={5} key='wtf-panel' />}
                 {me && <FeaturesPanel key='features-panel' />}
                 <PromoPanel key='promo-panel' />
                 <LinkFooter key='link-footer' />

app/soapbox/reducers/index.js

@@ -31,7 +31,6 @@ import listAdder from './list_adder';
 import filters from './filters';
 import conversations from './conversations';
 import suggestions from './suggestions';
-import suggestions_v2 from './suggestions_v2';
 import polls from './polls';
 import identity_proofs from './identity_proofs';
 import trends from './trends';
@@ -89,7 +88,6 @@ const appReducer = combineReducers({
   filters,
   conversations,
   suggestions,
-  suggestions_v2,
   polls,
   trends,
   groups,

app/soapbox/reducers/suggestions.js

@@ -3,7 +3,12 @@ import {
   SUGGESTIONS_FETCH_SUCCESS,
   SUGGESTIONS_FETCH_FAIL,
   SUGGESTIONS_DISMISS,
+  SUGGESTIONS_V2_FETCH_REQUEST,
+  SUGGESTIONS_V2_FETCH_SUCCESS,
+  SUGGESTIONS_V2_FETCH_FAIL,
 } from '../actions/suggestions';
+import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'soapbox/actions/accounts';
+import { DOMAIN_BLOCK_SUCCESS } from 'soapbox/actions/domain_blocks';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 
 const initialState = ImmutableMap({
@@ -11,19 +16,55 @@ const initialState = ImmutableMap({
   isLoading: false,
 });
 
+// Convert a v1 account into a v2 suggestion
+const accountToSuggestion = account => {
+  return {
+    source: 'past_interactions',
+    account: account.id,
+  };
+};
+
+const importAccounts = (state, accounts) => {
+  return state.withMutations(state => {
+    state.set('items', fromJS(accounts.map(accountToSuggestion)));
+    state.set('isLoading', false);
+  });
+};
+
+const importSuggestions = (state, suggestions) => {
+  return state.withMutations(state => {
+    state.set('items', fromJS(suggestions.map(x => ({ ...x, account: x.account.id }))));
+    state.set('isLoading', false);
+  });
+};
+
+const dismissAccount = (state, accountId) => {
+  return state.update('items', list => list.filterNot(x => x.account === accountId));
+};
+
+const dismissAccounts = (state, accountIds) => {
+  return state.update('items', list => list.filterNot(x => accountIds.includes(x.account)));
+};
+
 export default function suggestionsReducer(state = initialState, action) {
   switch(action.type) {
   case SUGGESTIONS_FETCH_REQUEST:
+  case SUGGESTIONS_V2_FETCH_REQUEST:
     return state.set('isLoading', true);
   case SUGGESTIONS_FETCH_SUCCESS:
-    return state.withMutations(map => {
+    return importAccounts(state, action.accounts);
-      map.set('items', fromJS(action.accounts.map(x => x.id)));
+  case SUGGESTIONS_V2_FETCH_SUCCESS:
-      map.set('isLoading', false);
+    return importSuggestions(state, action.suggestions);
-    });
   case SUGGESTIONS_FETCH_FAIL:
+  case SUGGESTIONS_V2_FETCH_FAIL:
     return state.set('isLoading', false);
   case SUGGESTIONS_DISMISS:
-    return state.update('items', list => list.filterNot(id => id === action.id));
+    return dismissAccount(state, action.id);
+  case ACCOUNT_BLOCK_SUCCESS:
+  case ACCOUNT_MUTE_SUCCESS:
+    return dismissAccount(state, action.relationship.id);
+  case DOMAIN_BLOCK_SUCCESS:
+    return dismissAccounts(state, action.accounts);
   default:
     return state;
   }

app/soapbox/reducers/suggestions_v2.js

@@ -1,37 +0,0 @@
-import {
-  SUGGESTIONS_V2_FETCH_REQUEST,
-  SUGGESTIONS_V2_FETCH_SUCCESS,
-  SUGGESTIONS_V2_FETCH_FAIL,
-} from '../actions/suggestions_v2';
-import { SUGGESTIONS_DISMISS } from '../actions/suggestions';
-import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'soapbox/actions/accounts';
-import { DOMAIN_BLOCK_SUCCESS } from 'soapbox/actions/domain_blocks';
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
-
-const initialState = ImmutableMap({
-  items: ImmutableList(),
-  isLoading: false,
-});
-
-export default function suggestionsReducer(state = initialState, action) {
-  switch(action.type) {
-  case SUGGESTIONS_V2_FETCH_REQUEST:
-    return state.set('isLoading', true);
-  case SUGGESTIONS_V2_FETCH_SUCCESS:
-    return state.withMutations(map => {
-      map.set('items', fromJS(action.suggestions.map(x => ({ ...x, account: x.account.id }))));
-      map.set('isLoading', false);
-    });
-  case SUGGESTIONS_V2_FETCH_FAIL:
-    return state.set('isLoading', false);
-  case SUGGESTIONS_DISMISS:
-    return state.update('items', list => list.filterNot(x => x.account === action.id));
-  case ACCOUNT_BLOCK_SUCCESS:
-  case ACCOUNT_MUTE_SUCCESS:
-    return state.update('items', list => list.filterNot(x => x.account === action.relationship.id));
-  case DOMAIN_BLOCK_SUCCESS:
-    return state.update('items', list => list.filterNot(x => action.accounts.includes(x.account)));
-  default:
-    return state;
-  }
-}

app/styles/components/columns.scss

@@ -810,3 +810,7 @@
     width: auto;
   }
 }
+
+.column-list {
+  position: relative;
+}