Another large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate group page components.

app/javascript/gabsocial/features/compose/components/navigation_bar/index.js

@@ -0,0 +1 @@
+export { default } from './navigation_bar';

app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.js

@@ -0,0 +1,54 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { FormattedMessage } from 'react-intl';
+import ActionBar from '../action_bar';
+import Avatar from '../../../../components/avatar';
+import Permalink from '../../../../components/permalink';
+import IconButton from '../../../../components/icon_button';
+import { me } from '../../../../initial_state';
+
+import './navigation_bar.scss';
+
+const mapStateToProps = state => {
+  return {
+    account: state.getIn(['accounts', me]),
+  };
+};
+
+export default @connect(mapStateToProps)
+class NavigationBar extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    onClose: PropTypes.func,
+  };
+
+  render () {
+    const { account } = this.props;
+
+    return (
+      <div className='navigation-bar'>
+        <Permalink href={account.get('url')} to={`/${account.get('acct')}`}>
+          <span style={{ display: 'none' }}>{account.get('acct')}</span>
+          <Avatar account={account} size={48} />
+        </Permalink>
+
+        <div className='navigation-bar__profile'>
+          <Permalink href={account.get('url')} to={`/${account.get('acct')}`}>
+            <strong className='navigation-bar__profile-account'>@{account.get('acct')}</strong>
+          </Permalink>
+
+          <a href='/settings/profile' className='navigation-bar__profile-edit'>
+            <FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' />
+          </a>
+        </div>
+
+        <div className='navigation-bar__actions'>
+          <IconButton className='close' title='' icon='close' onClick={this.props.onClose} />
+          <ActionBar account={account} />
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.scss

@@ -0,0 +1,89 @@
+.navigation-bar {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: default;
+  color: $darker-text-color;
+
+  strong {
+    color: $secondary-text-color;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  .permalink {
+    text-decoration: none;
+  }
+
+  &__actions {
+    position: relative;
+
+    .icon-button.close {
+      position: absolute;
+      pointer-events: none;
+      transform: scale(0.0, 1.0) translate(-100%, 0);
+      opacity: 0;
+    }
+
+    .compose__action-bar .icon-button {
+      pointer-events: auto;
+      transform: scale(1.0, 1.0) translate(0, 0);
+      opacity: 1;
+    }
+  }
+
+  &__profile {
+    flex: 1 1 auto;
+    margin-left: 8px;
+    line-height: 20px;
+    margin-top: -1px;
+    overflow: hidden;
+  }
+
+  &__profile-account {
+    display: block;
+    font-weight: 500;
+
+    @include text-overflow;
+  }
+
+  &__profile-edit {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  @media screen and (max-width: 630px) and (max-height: 400px) {
+    $duration: 400ms;
+    $delay: 100ms;
+
+    will-change: padding-bottom;
+    transition: padding-bottom $duration $delay;
+
+    &>a:first-child {
+      will-change: margin-top, margin-left, margin-right, width;
+      transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
+    }
+
+    &__profile-edit {
+      will-change: margin-top;
+      transition: margin-top $duration $delay;
+    }
+
+    &__actions {
+      >.icon-button.close {
+        will-change: opacity transform;
+        transition: opacity $duration * 0.5 $delay,
+          transform $duration $delay;
+      }
+
+      .compose__action-bar .icon-button {
+        will-change: opacity transform;
+        transition: opacity $duration * 0.5 $delay + $duration * 0.5,
+          transform $duration $delay;
+      }
+    }
+  }
+}