diff --git a/app/soapbox/features/compose/components/search_results.js b/app/soapbox/features/compose/components/search_results.js
index d61226193..25dd43c7b 100644
--- a/app/soapbox/features/compose/components/search_results.js
+++ b/app/soapbox/features/compose/components/search_results.js
@@ -9,17 +9,20 @@ import Hashtag from '../../../components/hashtag';
import LoadingIndicator from 'soapbox/components/loading_indicator';
import FilterBar from '../../search/components/filter_bar';
import LoadMore from '../../../components/load_more';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components';
import classNames from 'classnames';
export default class SearchResults extends ImmutablePureComponent {
static propTypes = {
- value: ImmutablePropTypes.string,
+ value: PropTypes.string,
results: ImmutablePropTypes.map.isRequired,
submitted: PropTypes.bool,
expandSearch: PropTypes.func.isRequired,
selectedFilter: PropTypes.string.isRequired,
selectFilter: PropTypes.func.isRequired,
+ features: PropTypes.object.isRequired,
};
handleLoadMore = () => this.props.expandSearch(this.props.selectedFilter);
@@ -27,7 +30,7 @@ export default class SearchResults extends ImmutablePureComponent {
handleSelectFilter = newActiveFilter => this.props.selectFilter(newActiveFilter);
render() {
- const { value, results, submitted, selectedFilter } = this.props;
+ const { value, results, submitted, selectedFilter, features } = this.props;
if (submitted && results.isEmpty()) {
return (
@@ -35,6 +38,12 @@ export default class SearchResults extends ImmutablePureComponent {
);
+ } else if (features.suggestions && results.isEmpty()) {
+ return (
+
+ {Component => }
+
+ );
}
let searchResults;
diff --git a/app/soapbox/features/compose/containers/search_results_container.js b/app/soapbox/features/compose/containers/search_results_container.js
index 650b28316..54b5765de 100644
--- a/app/soapbox/features/compose/containers/search_results_container.js
+++ b/app/soapbox/features/compose/containers/search_results_container.js
@@ -2,14 +2,18 @@ import { connect } from 'react-redux';
import SearchResults from '../components/search_results';
import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
import { expandSearch, setFilter } from '../../../actions/search';
+import { getFeatures } from 'soapbox/utils/features';
const mapStateToProps = state => {
+ const instance = state.get('instance');
+
return {
value: state.getIn(['search', 'submittedValue']),
results: state.getIn(['search', 'results']),
suggestions: state.getIn(['suggestions', 'items']),
submitted: state.getIn(['search', 'submitted']),
selectedFilter: state.getIn(['search', 'filter']),
+ features: getFeatures(instance),
};
};
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index 87a2142d9..d7f728257 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -167,6 +167,7 @@
.search-page {
height: 100%;
+ min-height: 140px;
}
.column {
diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss
index b9530646b..b76e7a6e4 100644
--- a/app/styles/components/wtf-panel.scss
+++ b/app/styles/components/wtf-panel.scss
@@ -1,12 +1,14 @@
.wtf-panel {
- @include standard-panel-shadow;
+ @include standard-panel;
display: flex;
width: 100%;
- border-radius: 10px;
flex-direction: column;
height: auto;
box-sizing: border-box;
- background: var(--foreground-color);
+
+ @media screen and (max-width: 580px) {
+ border-radius: 0;
+ }
&:first-child {
margin-top: 0;
@@ -159,3 +161,8 @@
margin-left: auto;
}
}
+
+.column .sub-navigation ~ .wtf-panel {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}