Adding chat buttons

app/javascript/gabsocial/components/sidebar_menu.js

@@ -35,6 +35,7 @@ const messages = defineMessages({
   search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
   shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
   donate: { id: 'tabs_bar.donate', defaultMessage: 'Make a Donation' },
+  chat: { id: 'tabs_bar.chat', defaultMessage: 'Chat' },
 })
 
 const mapStateToProps = state => {
@@ -169,6 +170,10 @@ class SidebarMenu extends ImmutablePureComponent {
                 <Icon id='signal' fixedWidth />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.trends)}</span>
               </a>
+              <a className='sidebar-menu-item' href='https://chat.gab.com'>
+                <Icon id='comments' fixedWidth />
+                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.chat)}</span>
+              </a>
               <NavLink className='sidebar-menu-item' to='/search' onClick={this.handleSidebarClose}>
                 <Icon id='search' fixedWidth />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.search)}</span>

app/javascript/gabsocial/features/account/components/header.js

@@ -4,11 +4,12 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import axios from 'axios';
 import Button from 'gabsocial/components/button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { autoPlayGif, me, isStaff } from 'gabsocial/initial_state';
 import classNames from 'classnames';
-import Icon from 'gabsocial/components/icon';
+import IconButton from 'gabsocial/components/icon_button';
 import Avatar from 'gabsocial/components/avatar';
 import { shortNumberFormat } from 'gabsocial/utils/numbers';
 import { NavLink } from 'react-router-dom';
@@ -44,6 +45,7 @@ const messages = defineMessages({
   unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
   admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
   add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
+  chat: { id: 'account.chat', defaultMessage: 'Chat' },
 });
 
 const dateFormatOptions = {
@@ -92,6 +94,20 @@ class Header extends ImmutablePureComponent {
     window.removeEventListener('resize', this.handleResize);
   }
 
+  onChat = () => {
+    const { account } = this.props;
+
+    axios.post('https://chat.gab.com/direct-message', {
+      username: account.get('username'),
+    })
+    .then(function (response) {
+      console.log(response);
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+  }
+
   handleResize = debounce(() => {
     this.setState({ isSmallScreen: (window.innerWidth <= 895) });
   }, 5, {
@@ -122,6 +138,9 @@ class Header extends ImmutablePureComponent {
       menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' });
       menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' });
     } else {
+      menu.push({ text: intl.formatMessage(messages.chat), action: this.onChat });
+      menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('acct') }), action: this.props.onMention });
+
       if (account.getIn(['relationship', 'following'])) {
         if (account.getIn(['relationship', 'showing_reblogs'])) {
           menu.push({ text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }), action: this.props.onReblogToggle });
@@ -312,12 +331,15 @@ class Header extends ImmutablePureComponent {
               <div className='account__header__extra__buttons'>
                 {actionBtn}
                 {account.get('id') !== me &&
-                  <Button className='button button-alternative-2' onClick={this.props.onMention}>
+                  <Button className='button button-alternative-2 hidden-sm' onClick={this.props.onMention}>
                     <FormattedMessage id='account.mention' defaultMessage='Mention' values={{
                       name: account.get('acct')
                     }} />
                   </Button>
                 }
+                {account.get('id') !== me &&
+                  <IconButton icon='comments' className='button button-alternative-2 chat-button hidden-sm' onClick={this.onChat} title={intl.formatMessage(messages.chat)} />
+                }
                 <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />
               </div>
             }

app/javascript/gabsocial/features/ui/components/promo_panel.js

@@ -55,6 +55,13 @@ class PromoPanel extends React.PureComponent {
             </a>
           </div>
 
+          <div className='promo-panel-item'>
+            <a className='promo-panel-item__btn' href='https://chat.gab.com'>
+              <Icon id='comments' className='promo-panel-item__icon' fixedWidth />
+              <FormattedMessage id='promo.chat' defaultMessage='Chat' />
+            </a>
+          </div>
+
           <div className='promo-panel-item'>
             <a className='promo-panel-item__btn' href='https://apps.gab.com'>
               <Icon id='th' className='promo-panel-item__icon' fixedWidth />

app/javascript/styles/gabsocial/components.scss

@@ -5427,4 +5427,12 @@ noscript {
 			color: #fff;
 		}
 	}
+}
+
+.chat-button {
+	width: 36px !important;
+	height: 36px !important;
+	padding: 0 !important;
+	box-sizing: border-box;
+	color: #fff;
 }