Search: display WhoToFollowPanel if supported

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 {
           <LoadingIndicator />
         </div>
       );
+    } else if (features.suggestions && results.isEmpty()) {
+      return (
+        <BundleContainer fetchComponent={WhoToFollowPanel}>
+          {Component => <Component limit={5} />}
+        </BundleContainer>
+      );
     }
 
     let searchResults;

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),
   };
 };
 

app/styles/components/search.scss

@@ -167,6 +167,7 @@
 
 .search-page {
   height: 100%;
+  min-height: 140px;
 }
 
 .column {

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;
+}