Works fine, I think

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/compose/components/search_results.js

@@ -1,25 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage, injectIntl } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
 import StatusContainer from '../../../containers/status_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Hashtag from '../../../components/hashtag';
-import Icon from 'soapbox/components/icon';
 import LoadingIndicator from 'soapbox/components/loading_indicator';
 import FilterBar from '../../search/components/filter_bar';
 import LoadMore from '../../../components/load_more';
 import classNames from 'classnames';
 
-export default @injectIntl
+export default class SearchResults extends ImmutablePureComponent {
-class SearchResults extends ImmutablePureComponent {
 
   static propTypes = {
     results: ImmutablePropTypes.map.isRequired,
     submitted: PropTypes.bool,
     expandSearch: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
   };
 
   state = {
@@ -29,7 +25,6 @@ class SearchResults extends ImmutablePureComponent {
   handleLoadMore = () => this.props.expandSearch(this.state.selectedFilter);
 
   handleSelectFilter = newActiveFilter => {
-    console.log(newActiveFilter);
     this.setState({ selectedFilter: newActiveFilter });
   };
 
@@ -46,11 +41,9 @@ class SearchResults extends ImmutablePureComponent {
     }
 
     let searchResults;
-    let count = 0;
     let hasMore = false;
 
     if (selectedFilter === 'accounts' && results.get('accounts') && results.get('accounts').size > 0) {
-      count = results.get('accounts').size;
       hasMore = results.get('accountsHasMore');
 
       searchResults = (
@@ -61,7 +54,6 @@ class SearchResults extends ImmutablePureComponent {
     }
 
     if (selectedFilter === 'statuses' && results.get('statuses') && results.get('statuses').size > 0) {
-      count = results.get('statuses').size;
       hasMore = results.get('statusesHasMore');
 
       searchResults = (
@@ -72,7 +64,6 @@ class SearchResults extends ImmutablePureComponent {
     }
 
     if (selectedFilter === 'hashtags' && results.get('hashtags') && results.get('hashtags').size > 0) {
-      count = results.get('hashtags').size;
       hasMore = results.get('hashtagsHasMore');
 
       searchResults = (
@@ -83,22 +74,13 @@ class SearchResults extends ImmutablePureComponent {
     }
 
     return (
-      <div className='search-results'>
+      <>
-        <div className='search-results__header'>
+        <FilterBar selectedFilter={submitted ? selectedFilter : null} selectFilter={this.handleSelectFilter} />
-          <Icon id='search' fixedWidth />
-          {
-            hasMore
-              ? <FormattedMessage id='search_results.total.has_more' defaultMessage='Over {count, number} {count, plural, one {result} other {results}}' values={{ count }} />
-              : <FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
-          }
-        </div>
-
-        <FilterBar selectedFilter={selectedFilter} selectFilter={this.handleSelectFilter} />
 
         {searchResults}
 
         {hasMore && <LoadMore visible onClick={this.handleLoadMore} />}
-      </div>
+      </>
     );
   }
 

app/soapbox/features/search/index.js

@@ -1,11 +1,19 @@
 import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import ColumnHeader from 'soapbox/components/column_header';
 import SearchContainer from 'soapbox/features/compose/containers/search_container';
 import SearchResultsContainer from 'soapbox/features/compose/containers/search_results_container';
 
-const Search = () => (
+const messages = defineMessages({
+  heading: { id: 'column.search', defaultMessage: 'Search' },
+});
+
+const Search = ({ intl }) => (
   <div className='column search-page'>
     <SearchContainer />
 
+    <ColumnHeader icon='search' title={intl.formatMessage(messages.heading)} />
     <div className='drawer__pager'>
       <div className='drawer__inner darker'>
         <SearchResultsContainer />
@@ -14,4 +22,8 @@ const Search = () => (
   </div>
 );
 
-export default Search;
+Search.propTypes = {
+  intl: PropTypes.object.isRequired,
+};
+
+export default injectIntl(Search);

app/styles/components/search.scss

@@ -1,9 +1,19 @@
+.search-page {
+  min-height: 97px;
+}
+
 @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
   .search-page .search {
     display: none;
   }
 }
 
+@media screen and (max-width: 600px + (285px * 1) + (10px * 1) - 1px) {
+  .search-page .column-header__wrapper {
+    display: none;
+  }
+}
+
 .search {
   position: relative;
 }
@@ -158,3 +168,8 @@
 .search-popout {
   @include search-popout;
 }
+
+
+.search__filter-bar:last-child {
+  border-bottom: none;
+}