diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js
new file mode 100644
index 000000000..4e04aa276
--- /dev/null
+++ b/app/soapbox/features/directory/components/account_card.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import { makeGetAccount } from 'soapbox/selectors';
+import Avatar from 'soapbox/components/avatar';
+import DisplayName from 'soapbox/components/display_name';
+import Permalink from 'soapbox/components/permalink';
+import RelativeTimestamp from 'soapbox/components/relative_timestamp';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { getSettings } from 'soapbox/actions/settings';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
+import ActionButton from 'soapbox/features/ui/components/action_button';
+
+const makeMapStateToProps = () => {
+ const getAccount = makeGetAccount();
+
+ const mapStateToProps = (state, { id }) => ({
+ account: getAccount(state, id),
+ autoPlayGif: getSettings(state).get('autoPlayGif'),
+ });
+
+ return mapStateToProps;
+};
+
+export default @injectIntl
+@connect(makeMapStateToProps)
+class AccountCard extends ImmutablePureComponent {
+
+ static propTypes = {
+ account: ImmutablePropTypes.map.isRequired,
+ autoPlayGif: PropTypes.bool,
+ };
+
+ render() {
+ const { account, autoPlayGif } = this.props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
') && 'empty')}
+ dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
+ />
+
+
+
+
{shortNumberFormat(account.get('statuses_count'))}
+
{shortNumberFormat(account.get('followers_count'))}
+
{account.get('last_status_at') === null ? : }
+
+
+ );
+ }
+
+}
\ No newline at end of file
diff --git a/app/soapbox/features/directory/index.js b/app/soapbox/features/directory/index.js
new file mode 100644
index 000000000..52209e9f1
--- /dev/null
+++ b/app/soapbox/features/directory/index.js
@@ -0,0 +1,114 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Column from 'soapbox/features/ui/components/column';
+import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory';
+import { List as ImmutableList } from 'immutable';
+import AccountCard from './components/account_card';
+import RadioButton from 'soapbox/components/radio_button';
+import classNames from 'classnames';
+import LoadMore from 'soapbox/components/load_more';
+import { getFeatures } from 'soapbox/utils/features';
+
+const messages = defineMessages({
+ title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
+ recentlyActive: { id: 'directory.recently_active', defaultMessage: 'Recently active' },
+ newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' },
+ local: { id: 'directory.local', defaultMessage: 'From {domain} only' },
+ federated: { id: 'directory.federated', defaultMessage: 'From known fediverse' },
+});
+
+const mapStateToProps = state => ({
+ accountIds: state.getIn(['user_lists', 'directory', 'items'], ImmutableList()),
+ isLoading: state.getIn(['user_lists', 'directory', 'isLoading'], true),
+ title: state.getIn(['instance', 'title']),
+ features: getFeatures(state.get('instance')),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class Directory extends React.PureComponent {
+
+ static propTypes = {
+ isLoading: PropTypes.bool,
+ accountIds: ImmutablePropTypes.list.isRequired,
+ dispatch: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ title: PropTypes.string.isRequired,
+ params: PropTypes.shape({
+ order: PropTypes.string,
+ local: PropTypes.bool,
+ }),
+ features: PropTypes.object.isRequired,
+ };
+
+ state = {
+ order: null,
+ local: null,
+ };
+
+ getParams = (props, state) => ({
+ order: state.order === null ? (props.params.order || 'active') : state.order,
+ local: state.local === null ? (props.params.local || false) : state.local,
+ });
+
+ componentDidMount() {
+ const { dispatch } = this.props;
+ dispatch(fetchDirectory(this.getParams(this.props, this.state)));
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ const { dispatch } = this.props;
+ const paramsOld = this.getParams(prevProps, prevState);
+ const paramsNew = this.getParams(this.props, this.state);
+
+ if (paramsOld.order !== paramsNew.order || paramsOld.local !== paramsNew.local) {
+ dispatch(fetchDirectory(paramsNew));
+ }
+ }
+
+ handleChangeOrder = e => {
+ this.setState({ order: e.target.value });
+ }
+
+ handleChangeLocal = e => {
+ this.setState({ local: e.target.value === '1' });
+ }
+
+ handleLoadMore = () => {
+ const { dispatch } = this.props;
+ dispatch(expandDirectory(this.getParams(this.props, this.state)));
+ }
+
+ render() {
+ const { isLoading, accountIds, intl, title, features } = this.props;
+ const { order, local } = this.getParams(this.props, this.state);
+
+ return (
+
+
+
+
+
+
+
+ {features.federating && (
+
+
+
+
+ )}
+
+ {accountIds.map(accountId =>
)}
+
+ );
+ }
+
+}
\ No newline at end of file
diff --git a/app/soapbox/features/ui/components/link_footer.js b/app/soapbox/features/ui/components/link_footer.js
index ed89dc8dd..f85caf09a 100644
--- a/app/soapbox/features/ui/components/link_footer.js
+++ b/app/soapbox/features/ui/components/link_footer.js
@@ -18,6 +18,7 @@ const mapStateToProps = state => {
return {
account,
+ profileDirectory: features.profileDirectory,
federating: features.federating,
showAliases: features.accountAliasesAPI,
importAPI: features.importAPI,
@@ -35,10 +36,11 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
},
});
-const LinkFooter = ({ onOpenHotkeys, account, federating, showAliases, importAPI, onClickLogOut, baseURL }) => (
+const LinkFooter = ({ onOpenHotkeys, account, profileDirectory, federating, showAliases, importAPI, onClickLogOut, baseURL }) => (
{account && <>
+ {profileDirectory &&