2 files changed, 113 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/pager/account/index.js b/app/javascript/flavours/glitch/features/drawer/pager/account/index.js
new file mode 100644
index 000000000..2ee95d5b9
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/drawer/pager/account/index.js
@@ -0,0 +1,70 @@
+//  Package imports.
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import {
+  FormattedMessage,
+  defineMessages,
+} from 'react-intl';
+
+//  Components.
+import Avatar from 'flavours/glitch/components/avatar';
+import Permalink from 'flavours/glitch/components/permalink';
+
+//  Utils.
+import { hiddenComponent } from 'flavours/glitch/util/react_helpers';
+
+//  Messages.
+const messages = defineMessages({
+  edit: {
+    defaultMessage: 'Edit profile',
+    id: 'navigation_bar.edit_profile',
+  },
+});
+
+//  The component.
+export default function DrawerPagerAccount ({ account }) {
+
+  //  We need an account to render.
+  if (!account) {
+    return (
+      <div className='drawer--pager--account'>
+        <a
+          className='edit'
+          href='/settings/profile'
+        >
+          <FormattedMessage {...messages.edit} />
+        </a>
+      </div>
+    );
+  }
+
+  //  The result.
+  return (
+    <div className='drawer--pager--account'>
+      <Permalink
+        className='avatar'
+        href={account.get('url')}
+        to={`/accounts/${account.get('id')}`}
+      >
+        <span {...hiddenComponent}>{account.get('acct')}</span>
+        <Avatar
+          account={account}
+          size={40}
+        />
+      </Permalink>
+      <Permalink
+        className='acct'
+        href={account.get('url')}
+        to={`/accounts/${account.get('id')}`}
+      >
+        <strong>@{account.get('acct')}</strong>
+      </Permalink>
+      <a
+        className='edit'
+        href='/settings/profile'
+      ><FormattedMessage {...messages.edit} /></a>
+    </div>
+  );
+}
+
+DrawerPagerAccount.propTypes = { account: ImmutablePropTypes.map };
diff --git a/app/javascript/flavours/glitch/features/drawer/pager/index.js b/app/javascript/flavours/glitch/features/drawer/pager/index.js
new file mode 100644
index 000000000..8dc2d3ee9
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/drawer/pager/index.js
@@ -0,0 +1,43 @@
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+//  Components.
+import IconButton from 'flavours/glitch/components/icon_button';
+import Composer from 'flavours/glitch/features/composer';
+import DrawerPagerAccount from './account';
+
+//  The component.
+export default function DrawerPager ({
+  account,
+  active,
+  onClose,
+  onFocus,
+}) {
+  const computedClass = classNames('drawer--pager', { active });
+
+  //  The result.
+  return (
+    <div
+      className={computedClass}
+      onFocus={onFocus}
+    >
+      <DrawerPagerAccount account={account} />
+      <IconButton
+        icon='close'
+        onClick={onClose}
+        title=''
+      />
+      <Composer />
+    </div>
+  );
+}
+
+DrawerPager.propTypes = {
+  account: ImmutablePropTypes.map,
+  active: PropTypes.bool,
+  onClose: PropTypes.func,
+  onFocus: PropTypes.func,
+};