Improve getting started column (#7676)

* Adjust footer of getting started column

- Improved style
- Moved hotkeys, about this instance and logout to footer
- Removed FAQ, User Guide, Apps links
- Use hamburger icon for the column

* Add edit profile action button to profile and more to dropdown

* Add "Trending now" to getting started column

* Add preferences/security links on mobile layout

app/javascript/mastodon/features/compose/components/search_results.js

@@ -1,42 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage, FormattedNumber } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
 import StatusContainer from '../../../containers/status_container';
-import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { Sparklines, SparklinesCurve } from 'react-sparklines';
-
-const shortNumberFormat = number => {
-  if (number < 1000) {
-    return <FormattedNumber value={number} />;
-  } else {
-    return <React.Fragment><FormattedNumber value={number / 1000} maximumFractionDigits={1} />K</React.Fragment>;
-  }
-};
-
-const renderHashtag = hashtag => (
-  <div className='trends__item' key={hashtag.get('name')}>
-    <div className='trends__item__name'>
-      <Link to={`/timelines/tag/${hashtag.get('name')}`}>
-        #<span>{hashtag.get('name')}</span>
-      </Link>
-
-      <FormattedMessage id='trends.count_by_accounts' defaultMessage='{count} {rawCount, plural, one {person} other {people}} talking' values={{ rawCount: hashtag.getIn(['history', 0, 'accounts']), count: <strong>{shortNumberFormat(hashtag.getIn(['history', 0, 'accounts']))}</strong> }} />
-    </div>
-
-    <div className='trends__item__current'>
-      {shortNumberFormat(hashtag.getIn(['history', 0, 'uses']))}
-    </div>
-
-    <div className='trends__item__sparkline'>
-      <Sparklines width={50} height={28} data={hashtag.get('history').reverse().map(day => day.get('uses')).toArray()}>
-        <SparklinesCurve style={{ fill: 'none' }} />
-      </Sparklines>
-    </div>
-  </div>
-);
+import Hashtag from '../../../components/hashtag';
 
 export default class SearchResults extends ImmutablePureComponent {
 
@@ -66,7 +35,7 @@ export default class SearchResults extends ImmutablePureComponent {
               <FormattedMessage id='trends.header' defaultMessage='Trending now' />
             </div>
 
-            {trends && trends.map(hashtag => renderHashtag(hashtag))}
+            {trends && trends.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
           </div>
         </div>
       );
@@ -100,7 +69,7 @@ export default class SearchResults extends ImmutablePureComponent {
         <div className='search-results__section'>
           <h5><i className='fa fa-fw fa-hashtag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
 
-          {results.get('hashtags').map(hashtag => renderHashtag(hashtag))}
+          {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
         </div>
       );
     }