pinnedHosts: add host picker to public timelines

app/soapbox/actions/remote_timeline.js

@@ -1,6 +1,6 @@
 import { getSettings, changeSetting } from 'soapbox/actions/settings';
 
-const getPinnedPosts = state => {
+const getPinnedHosts = state => {
   const settings = getSettings(state);
   return settings.getIn(['remote_timeline', 'pinnedHosts']);
 };
@@ -8,7 +8,7 @@ const getPinnedPosts = state => {
 export function pinHost(host) {
   return (dispatch, getState) => {
     const state = getState();
-    const pinnedHosts = getPinnedPosts(state);
+    const pinnedHosts = getPinnedHosts(state);
 
     return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.add(host)));
   };
@@ -17,7 +17,7 @@ export function pinHost(host) {
 export function unpinHost(host) {
   return (dispatch, getState) => {
     const state = getState();
-    const pinnedHosts = getPinnedPosts(state);
+    const pinnedHosts = getPinnedHosts(state);
 
     return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.delete(host)));
   };

app/soapbox/features/public_timeline/index.js

@@ -7,6 +7,7 @@ import Column from '../../components/column';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import HomeColumnHeader from '../../components/home_column_header';
 import Accordion from 'soapbox/features/ui/components/accordion';
+import PinnedHostsPicker from '../remote_timeline/components/pinned_hosts_picker';
 import { expandPublicTimeline } from '../../actions/timelines';
 import { connectPublicStream } from '../../actions/streaming';
 import { Link } from 'react-router-dom';
@@ -101,6 +102,7 @@ class CommunityTimeline extends React.PureComponent {
         <HomeColumnHeader activeItem='fediverse' active={hasUnread} >
           <ColumnSettingsContainer />
         </HomeColumnHeader>
+        <PinnedHostsPicker />
         {showExplanationBox && <div className='explanation-box'>
           <Accordion
             headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}

app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js

@@ -0,0 +1,51 @@
+'use strict';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+import { getSettings } from 'soapbox/actions/settings';
+
+const mapStateToProps = state => {
+  const settings = getSettings(state);
+
+  return {
+    pinnedHosts: settings.getIn(['remote_timeline', 'pinnedHosts']),
+  };
+};
+
+class PinnedHostPicker extends React.PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    pinnedHosts: ImmutablePropTypes.orderedSet,
+    host: PropTypes.string,
+  };
+
+  render() {
+    const { pinnedHosts, host: activeHost } = this.props;
+
+    if (!pinnedHosts || pinnedHosts.isEmpty()) return null;
+
+    return (
+      <div>
+        <div className='pinned-hosts-picker'>
+          {pinnedHosts.map(host => (
+            <div className={classNames('pinned-host', { 'active': host === activeHost })} key={host}>
+              <Link to={`/timeline/${host}`}>{host}</Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps)(PinnedHostPicker);

app/soapbox/features/remote_timeline/index.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import StatusListContainer from '../ui/containers/status_list_container';
 import Column from '../../components/column';
 import HomeColumnHeader from '../../components/home_column_header';
+import PinnedHostsPicker from './components/pinned_hosts_picker';
 import IconButton from 'soapbox/components/icon_button';
 import { expandRemoteTimeline } from '../../actions/timelines';
 import { connectRemoteStream } from '../../actions/streaming';
@@ -84,6 +85,7 @@ class RemoteTimeline extends React.PureComponent {
     return (
       <Column label={intl.formatMessage(messages.title)}>
         <HomeColumnHeader activeItem='fediverse' active={hasUnread} />
+        <PinnedHostsPicker host={instance} />
         <div className='timeline-filter-message'>
           <IconButton icon='close' onClick={this.handleCloseClick} />
           <FormattedMessage

app/styles/components/remote-timeline.scss

@@ -27,3 +27,48 @@
     padding-right: 10px;
   }
 }
+
+.pinned-hosts-picker {
+  margin-left: 10px;
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  .pinned-host {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+
+  &:hover {
+    .pinned-host {
+      background: var(--background-color);
+
+      &:hover {
+        background: var(--brand-color--faint);
+      }
+    }
+  }
+}
+
+.pinned-host {
+  background: var(--background-color);
+  border-radius: 999px;
+  transition: 0.2s;
+
+  &.active {
+    background: var(--brand-color--faint);
+
+    a {
+      color: #fff;
+    }
+  }
+
+  a {
+    display: block;
+    color: var(--primary-text-color);
+    text-decoration: none;
+    padding: 5px 11px;
+    max-width: 115px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}